/* ============================================================
   TEMA 1 — BİRLEŞTİRİLMİŞ ANA STİL DOSYASI (theme.css)
   ------------------------------------------------------------
   Bu dosya, daha önce includes/header.php içinde ayrı ayrı
   <link> etiketleriyle yüklenen tüm CSS dosyalarının TEK BİR
   dosyada, ORİJİNAL YÜKLENME SIRASI korunarak birleştirilmiş
   hâlidir. Sıra kasıtlı olarak korunmuştur — özellikle
   design-tokens.css (renk/aralık/radius temel değişkenleri) en
   başta, mor-tema.css (renk override'ları) ve nav-header-mode.css
   (layout override'ları) ise kendi bloklarında en sonda kalacak
   şekilde dizilmiştir. Gelecekte yapılacak bir "tema renk editörü"
   bu dosyanın EN BAŞINDAKİ design-tokens.css bölümünü hedef
   alabilir.

   Şu ikisi bu dosyaya DAHİL EDİLMEMİŞTİR (kasıtlı):
   - lee1z6JJcfOJ.css (Kar Yağma Efekti): sadece site_settings.
     snowfall_enabled=1 VE anasayfadayken koşullu yüklenir; bu
     yüzden includes/header.php içinde ayrı, koşullu <link> olarak
     bırakılmıştır — koşulsuz buraya taşınırsa efekt her sayfada
     ve ayardan bağımsız şekilde aktif hâle gelirdi.
   - Site arkaplan görseli / kart arkaplan görseli / "Oyna" butonu
     rengi için header.php'nin ürettiği küçük inline <style>
     blokları: bunlar veritabanından anlık okunan (site_settings)
     dinamik değerlerdir, statik bir dosyaya gömülemez — aynen
     inline kalmaya devam ediyor, sadece bu paketten SONRA
     yükleniyor (override sırası korunuyor).
   ============================================================ */


/* ── design-tokens.css ──────────────────────────────────────── */
/* ================================================================
   DESIGN TOKENS — mobil tasarım spesifikasyonu
   ----------------------------------------------------------------
   Spesifikasyonda istenen renk/spacing/radius sistemi burada resmi
   olarak :root değişkenleri altında tanımlanıyor. Bu dosyadan sonra
   yazılan/düzenlenen tüm CSS (auth-modals.css, sidebar-cards.css,
   navbar-auth-buttons.css, site-font.css ve index.php içindeki .fe-*
   kuralları) bu paletle uyumludur.

   NOT (dürüstlük payı): Sitenin onlarca yıllık/eski CSS dosyası
   (N8YGPI5g2q3U.css, K9enq522wjZR.css, mor-tema.css vb. — bkz.
   includes/header.php'deki <link> listesi) bu değişkenleri henüz
   KULLANMIYOR; kendi sabit hex değerleriyle yazılmış. Onları tek
   tek bu sisteme taşımak ayrı, çok daha büyük bir refactor işi —
   şimdilik üzerine inşa ettiğimiz YENİ/GÜNCELLENEN her şey bu
   tokenlara göre. <head>'de EN SON yüklenir.
   ================================================================ */

:root {
    /* ── Renkler ── */
    --z-bg: #07090D;
    --z-surface-1: #0D1117;
    --z-surface-2: #12171E;
    --z-surface-raised: #171C24;
    --z-border: #262D36;
    --z-border-soft: rgba(255,255,255,0.07);
    --z-text-1: #F4F5F7;
    --z-text-2: #9AA3AF;
    --z-text-3: #707987;
    --z-gold: #C6A46A;
    --z-gold-rgb: 198,164,106;
    --z-gold-light: #D5B67D;
    --z-success: #39B980;
    --z-error: #EF6464;

    /* ── Tipografi ── */
    --z-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Spacing ── */
    --z-space-xs: 8px;
    --z-space-sm: 12px;
    --z-space-md: 16px;
    --z-space-lg: 24px;

    /* ── Radius ── */
    --z-radius-card: 12px;
    --z-radius-modal: 18px;
    --z-radius-btn: 10px;

    /* ── Boyutlar ── */
    --z-header-h: 54px;
    --z-bottom-nav-h: 62px;
    --z-touch-min: 44px;
}


/* ── N8YGPI5g2q3U.css ──────────────────────────────────────── */
/* ========================================
   PREMIUM GLASS THEME 2025
   Modern • Elegant • Professional
   ======================================== */

:root {
    /* Primary Colors - Dark & Silver */
    --primary-blue: var(--primary, #ac895e);
    --primary-teal: var(--primary, #ac895e);
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;
    
    /* Background Colors - Dark Graphite */
    --bg-primary: var(--surface-elevated, #06070a);
    --bg-secondary: var(--surface, #0d0f13);
    --bg-tertiary: #15171c;
    --bg-card: rgba(23, 24, 28, 0.7);
    
    /* Glass Effects */
    --glass-bg: rgba(31, 33, 38, 0.4);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    /* Text Colors */
    --text-primary: #f4f5f7;
    --text-secondary: #9aa1ab;
    --text-muted: #5b626c;
    
    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    
    /* Gradients - Flat Metallic Silver */
    --gradient-primary: linear-gradient(135deg, #c9a97d 0%, #9aa4b0 100%);
    --gradient-gold: linear-gradient(135deg, #c9a97d 0%, #9aa4b0 100%);
    --gradient-cyan: linear-gradient(135deg, var(--primary, #ac895e) 0%, #9aa4b0 100%);
    --gradient-rose: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
    --gradient-teal: linear-gradient(135deg, var(--primary, #ac895e) 0%, #9aa4b0 100%);
    
    /* Spacing */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-glow-blue: 0 0 24px rgba(var(--primary-rgb, 172, 137, 94), 0.18);
    --shadow-glow-teal: 0 0 24px rgba(var(--primary-rgb, 172, 137, 94), 0.18);
}

/* ========================================
   BASE STYLES
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--surface-elevated, #06070a) !important;
    background-color: var(--surface-elevated, #06070a) !important;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Animated Background - Glass Theme */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(20, 184, 166, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
    z-index: -1;
    animation: backgroundShift 25s ease infinite;
}

@keyframes backgroundShift {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.8; transform: scale(1.05) rotate(5deg); }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

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

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 0;
    background: rgba(13, 15, 19, 0.85);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
    padding: 8px 0;
    background: rgba(13, 15, 19, 0.95);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Logo */
.nav-brand {
    flex-shrink: 0;
}

.brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px;
    transition: transform 0.3s ease;
}

.brand-logo:hover {
    transform: scale(1.05);
}

.logo-img {
    height: 42px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
}

.brand-text {
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(135deg, #00d9ff 0%, #8b5cf6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

/* Nav Menu */
.nav-menu {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.2), transparent);
    transition: left 0.5s ease;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover {
    color: var(--text-primary);
    background: rgba(139, 92, 246, 0.15);
    transform: translateY(-2px);
}

.nav-link.active {
    color: var(--text-primary);
    background: rgba(139, 92, 246, 0.25);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.nav-link i {
    font-size: 16px;
}

/* User Info */
/* User Info - Compact Modern Design */
.user-info-compact {
    display: flex;
    align-items: center;
    gap: 8px;
}

.balance-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(6, 7, 10, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
}

.balance-badge i {
    font-size: 14px;
    color: #3b82f6;
}

.balance-badge:hover {
    background: rgba(6, 7, 10, 0.95);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
}

.user-menu-wrapper {
    position: relative;
}

.user-menu-wrapper:hover .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-avatar-compact {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.user-avatar-compact i {
    font-size: 16px;
    color: #ffffff;
}

.user-avatar-compact:hover {
    transform: scale(1.05);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* Nav Actions */
.nav-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.btn i {
    font-size: 14px;
    line-height: 1;
}

.btn span {
    line-height: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: white;
    box-shadow: 
        0 4px 20px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 
        0 8px 30px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: white;
    box-shadow: 
        0 4px 20px rgba(16, 185, 129, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-secondary:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 
        0 8px 30px rgba(16, 185, 129, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid rgba(139, 92, 246, 0.5);
}

.btn-outline:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--primary-purple);
}

/* Header Login & Register Buttons */

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

.main-content {
    padding-top: 85px;
    min-height: 100vh;
}

/* ========================================
   SLIDER
   ======================================== */

.modern-slider-wrapper {
    margin: 20px auto 30px;
    position: relative;
    padding: 0 20px;
    max-width: 1400px;
}

.modern-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 580;
    height: auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: translateZ(0);
}

.slide-item {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity 0.8s ease;
    cursor: pointer;
}

.slide-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

.slide-item.active {
    opacity: 1;
    z-index: 1;
}

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dots .dot.active {
    width: 30px;
    border-radius: 5px;
    background: var(--text-primary, #e7e9ec);
    box-shadow: none;
}

/* ========================================
   WINNERS SECTION - AUTO SCROLL
   ======================================== */

.recent-winners-section {
    margin: 30px 0;
    padding: 20px 0;
    background: rgba(59, 130, 246, 0.03);
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    border-bottom: 1px solid rgba(20, 184, 166, 0.15);
    position: relative;
    overflow: hidden;
}

.winners-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.recent-winners-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.winners-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.winners-icon {
    width: 36px;
    height: 36px;
    background: var(--gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

.recent-winners-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.winners-live-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    color: #10b981;
    letter-spacing: 0.3px;
}

.live-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Winners Auto-Slide Animation + Manual Scroll */
.winners-marquee-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    cursor: grab;
    user-select: none;
}

.winners-marquee-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.winners-marquee-wrapper:active {
    cursor: grabbing;
}

.winners-marquee {
    width: 100%;
    overflow: visible;
}

.winners-marquee-content {
    display: flex;
    gap: 12px;
    padding: 5px 0;
    width: fit-content;
    animation: autoSlide 90s linear infinite;
}

/* Hover veya touch'ta animasyon durdur */
.winners-marquee-wrapper:hover .winners-marquee-content,
.winners-marquee-wrapper:active .winners-marquee-content {
    animation-play-state: paused;
}

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

/* Mobilde daha hızlı ama yine de yavaş */
@media (max-width: 768px) {
    .winners-marquee-content {
        animation: autoSlide 60s linear infinite;
    }
}

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

.winner-card {
    flex: 0 0 240px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(21, 23, 28, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.winner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

.winner-game-image {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.winner-game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.winner-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.winner-game {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.winner-amount-wrapper {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
}

.winner-amount {
    font-size: 14px;
    font-weight: 700;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.winner-currency {
    font-size: 11px;
    color: #f59e0b;
    font-weight: 600;
}

.winner-arrow {
    color: var(--text-muted);
    font-size: 10px;
    flex-shrink: 0;
}

/* Mobile Layout */
@media (max-width: 768px) {
    .recent-winners-header {
        justify-content: space-between;
        padding: 0 20px;
    }

    .winners-marquee-wrapper {
        padding: 0 10px;
    }

    .winner-card {
        flex: 0 0 200px;
        padding: 8px;
        gap: 8px;
    }

    .winner-game-image {
        width: 36px;
        height: 36px;
    }

    .winner-name {
        font-size: 11px;
    }

    .winner-game {
        font-size: 9px;
    }

    .winner-amount {
        font-size: 12px;
    }
}

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

.games-section {
    margin: 50px 0;
}

.section {
    padding: 30px 0;
}

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
}

.section-header-center {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
}

.section-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-header-center .section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    line-height: 1.2;
}

.section-header-center .section-title i {
    font-size: 22px;
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-center .section-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
}

.view-all-center {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.section-header-center .btn-view-all {
    margin-top: 0;
    flex-shrink: 0;
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-cyan);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    flex-shrink: 0;
}

.section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.section-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    padding-left: 0;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-view-all:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Games Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

@media (min-width: 1200px) {
    .games-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.game-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    width: 100%;
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 7, 10, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.4);
}

.game-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
    background: rgba(6, 7, 10, 0.8);
}

.game-card:hover .game-image {
    transform: scale(1.05);
}

.game-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 8px;
    background: linear-gradient(to top, 
        rgba(6, 7, 10, 0.95) 0%, 
        rgba(6, 7, 10, 0.7) 60%, 
        transparent 100%);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    pointer-events: none;
}

.game-card:hover .game-overlay {
    opacity: 1;
    pointer-events: auto;
}

.game-card:hover .game-info {
    opacity: 0;
}

/* Touch cihazlarda hover'ı devre dışı bırak */
@media (hover: none) and (pointer: coarse) {
    /* Mobilde overlay ve before efektini kapat */
    .game-card::before {
        opacity: 0 !important;
    }
    
    .game-overlay {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .game-card:hover .game-info {
        opacity: 1 !important;
    }
    
    /* Sadece hafif basma efekti */
    .game-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .game-card:active .game-image {
        transform: scale(1) !important;
    }
}

.play-btn {
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: auto;
}

.play-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.play-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.play-btn:hover i {
    transform: translateX(2px);
}

.game-name {
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.game-provider {
    display: none;
}

/* Mobil optimizasyonu */
@media (max-width: 768px) {
    .game-info {
        padding: 8px 6px;
        background: linear-gradient(to top, 
            rgba(6, 7, 10, 0.85) 0%, 
            transparent 100%);
    }
    
    .game-name {
        font-size: 11px;
        font-weight: 600;
    }
    
    .play-btn {
        padding: 10px 24px;
        font-size: 13px;
        gap: 6px;
    }
    
    .play-btn i {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .game-info {
        padding: 6px 5px;
    }
    
    .game-name {
        font-size: 10px;
    }
    
    .play-btn {
        padding: 9px 20px;
        font-size: 12px;
    }
}

.game-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--primary-purple);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 3;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.game-card:hover .game-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

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

.footer {
    margin-top: 80px;
    background: linear-gradient(180deg, #0d0d0d 0%, var(--page-background, #080808) 100%);
    border-top: 1px solid rgba(154,164,176, 0.2);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(154,164,176, 0.6), transparent);
}

.footer-header {
    padding: 30px 0;
    text-align: center;
    background: rgba(154,164,176, 0.04);
    border-bottom: 1px solid rgba(154,164,176, 0.1);
}

.footer-header-title {
    font-size: 20px;
    font-weight: 800;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.footer-header-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.footer-main {
    padding: 50px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
    gap: 40px;
    align-items: start;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-contact .footer-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.footer-contact .footer-email {
    font-size: 16px;
    color: var(--primary-gold);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.footer-contact .footer-email:hover {
    color: #c9a97d;
    text-shadow: 0 0 12px rgba(154,164,176, 0.5);
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.social-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.social-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.social-icon:hover::before {
    width: 100px;
    height: 100px;
}

.social-icon.whatsapp {
    background: linear-gradient(135deg, #25d366, #128c7e);
}

.social-icon.telegram {
    background: linear-gradient(135deg, #0088cc, #0077b5);
}

.social-icon:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.footer-menu-title {
    font-size: 13px;
    font-weight: 700;
    color: #9aa4b0;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.footer-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-menu a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-menu a:hover {
    color: #9aa4b0;
    transform: translateX(5px);
}

.footer-badges-desktop {
    display: flex;
    justify-content: flex-end;
}

.footer-badges {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-badges .badge-18,
.footer-badges .badge-gcb {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.footer-badges .badge-18 {
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.footer-badges .gcb-link:hover img {
    transform: scale(1.1);
}

.footer-license {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    text-align: center;
}

.footer-license p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
}

.footer-payments {
    padding: 35px 0;
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(154,164,176, 0.12);
}

.payment-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.payment-row img {
    height: 28px;
    width: auto;
    opacity: 0.55;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.payment-row img:hover {
    opacity: 1;
    transform: scale(1.12);
    filter: brightness(0) saturate(100%) invert(82%) sepia(40%) saturate(500%) hue-rotate(5deg) brightness(105%);
}

.footer-badges-mobile,
.footer-license-mobile {
    display: none;
}

.mobile-nav-spacer {
    display: none;
}

/* ========================================
   MOBILE NAVIGATION
   ======================================== */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(13, 15, 19, 0.98);
    border-top: 1px solid rgba(139, 92, 246, 0.3);
    padding: 8px 0;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5);
}

.mobile-bottom-nav .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    flex: 1;
}

.mobile-bottom-nav .mobile-nav-item.active {
    color: var(--primary-cyan);
    background: rgba(0, 217, 255, 0.1);
}

.mobile-bottom-nav .mobile-nav-item i {
    font-size: 20px;
}

.mobile-bottom-nav .mobile-nav-item span {
    font-size: 10px;
}

.support-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.online-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    animation: blink 1.5s ease-in-out infinite;
}

/* Side Menu */
.side-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.side-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid rgba(139, 92, 246, 0.3);
    z-index: 1999;
    overflow-y: auto;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
}

.side-menu.active {
    right: 0;
}

.side-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(139, 92, 246, 0.1);
}

.side-menu-header h3 {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.side-menu-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-menu-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.side-menu-content {
    padding: 15px;
}

.side-menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.side-menu-item i {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.side-menu-item:hover {
    background: rgba(139, 92, 246, 0.15);
    color: var(--text-primary);
    transform: translateX(5px);
}

.side-menu-item.active {
    background: rgba(139, 92, 246, 0.25);
    color: var(--primary-cyan);
}

.side-menu-item.active i {
    color: var(--primary-cyan);
}

.side-menu-item.logout {
    color: var(--error, var(--danger, #ef4444));
}

.side-menu-item.logout:hover {
    background: rgba(239, 68, 68, 0.15);
}

.side-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 15px 0;
}

.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(13, 15, 19, 0.95);
    border-top: 1px solid rgba(139, 92, 246, 0.3);
    padding: 10px 0;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5);
}

.mobile-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.mobile-nav-item.active {
    color: var(--primary-cyan);
    background: rgba(0, 217, 255, 0.1);
}

.mobile-nav-item i {
    font-size: 20px;
}

.mobile-nav-item span {
    font-size: 10px;
}

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

/* Auth Modals */
.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.auth-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.auth-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--bg-secondary);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-xl);
    padding: 0;
    width: min(580px, 92vw);
    max-width: none;
    height: auto;
    max-height: 94vh;
    overflow: hidden;
    z-index: 2001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Kayıt modalı — premium-modals.css ile yönetiliyor */
#registerModal {
    max-width: none;
    width: min(780px, 92vw);
    height: auto;
    min-height: unset;
    overflow: hidden;
}

.auth-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.auth-modal-header {
    padding: 25px 25px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    background: rgba(139, 92, 246, 0.05);
}

.auth-modal-header h2 {
    font-size: 24px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.auth-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.auth-modal-body {
    padding: 25px;
}

/* Auth modal scrollbar - Koyu mor tema */
.auth-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb, 172, 137, 94), 0.6) rgba(21, 23, 28, 0.4);
}

.auth-modal::-webkit-scrollbar {
    width: 8px;
}

.auth-modal::-webkit-scrollbar-track {
    background: rgba(21, 23, 28, 0.4);
    border-radius: 10px;
}

.auth-modal::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(var(--primary-rgb, 172, 137, 94), 0.7),
        rgba(88, 28, 135, 0.7)
    );
    border-radius: 10px;
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94), 0.3);
}

.auth-modal::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(var(--primary-rgb, 172, 137, 94), 0.9),
        rgba(88, 28, 135, 0.9)
    );
}

.auth-alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-alert.success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--success, #10b981);
}

.auth-alert.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--error, var(--danger, #ef4444));
}

.forgot-description {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Form Styles in Modals */
.input-with-icon {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    z-index: 1;
}

.input-with-icon .form-control {
    padding-left: 45px;
}

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

.password-input-wrapper .input-icon {
    left: 16px;
}

.password-input-wrapper .form-control {
    padding-left: 45px;
    padding-right: 45px;
}

.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s ease;
    z-index: 1;
}

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

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(154, 161, 171, 0.9);
    line-height: 1.6;
    user-select: none;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: #3b82f6;
}

.checkbox-wrapper span {
    flex: 1;
}

.checkbox-wrapper .terms-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.checkbox-wrapper .terms-link:hover {
    color: #3b82f6;
    text-decoration: underline;
}

.forgot-password-link {
    color: var(--primary-cyan);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.forgot-password-link:hover {
    color: var(--primary-purple);
}

.required-mark {
    color: var(--error, var(--danger, #ef4444));
    margin-left: 2px;
}

.btn-full {
    width: 100%;
}

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

.phone-input-wrapper .form-control {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
}

.phone-input-wrapper .form-control::placeholder {
    color: var(--text-muted);
}

.phone-input-wrapper .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
}

.phone-input-wrapper .form-control {
    padding-left: 48px;
}

.phone-input-wrapper .form-control:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    background: var(--border, rgba(255,255,255,0.08));
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-control {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-purple);
    background: var(--border, rgba(255,255,255,0.08));
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* ========================================
   MODAL - Ultra Professional Glass Design
   ======================================== */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 7, 10, 0.94);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    animation: modalBackdropFade 0.4s ease;
    padding: 20px;
}

.modal.active {
    display: flex;
}

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

.modal-content {
    position: relative;
    background: linear-gradient(
        145deg,
        rgba(13, 15, 19, 0.98) 0%,
        rgba(21, 23, 28, 0.95) 100%
    );
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 24px;
    padding: 50px 45px 45px;
    max-width: 460px;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(59, 130, 246, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Decorative top accent */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(59, 130, 246, 0.8) 20%,
        rgba(139, 92, 246, 0.8) 50%,
        rgba(236, 72, 153, 0.8) 80%,
        transparent
    );
}

/* Subtle inner glow */
.modal-content::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 100px;
    background: linear-gradient(
        180deg,
        rgba(59, 130, 246, 0.05) 0%,
        transparent 100%
    );
    border-radius: 24px 24px 0 0;
    pointer-events: none;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(40px) scale(0.94);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-header {
    margin-bottom: 35px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.modal-title {
    font-size: 30px;
    font-weight: 800;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #e0e7ff 50%,
        #c7d2fe 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.modal-subtitle {
    font-size: 14px;
    color: rgba(154, 161, 171, 0.75);
    font-weight: 400;
    line-height: 1.5;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(21, 23, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: white;
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
}

/* Modal Body */
.modal-body {
    position: relative;
    z-index: 1;
    max-height: calc(88vh - 180px);
    overflow-y: auto;
    padding-right: 5px;
}

/* Custom Professional Scrollbar - Blue Theme */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(6, 7, 10, 0.5);
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(59, 130, 246, 0.6),
        rgba(99, 102, 241, 0.6)
    );
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(59, 130, 246, 0.8),
        rgba(99, 102, 241, 0.8)
    );
}

/* Scrollbar Firefox */
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.6) rgba(6, 7, 10, 0.5);
}

/* Mobile Modal */
@media (max-width: 600px) {
    .modal {
        padding: 15px;
    }
    
    .modal-content {
        padding: 40px 30px 35px;
        border-radius: 20px;
        max-height: 90vh;
    }
    
    .modal-content::before {
        height: 2px;
    }
    
    .modal-title {
        font-size: 26px;
    }
    
    .modal-subtitle {
        font-size: 13px;
    }
    
    .modal-close {
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 18px;
    }
    
    .modal-body {
        max-height: calc(90vh - 160px);
    }
}

/* ========================================
   FORM STYLES - Ultra Professional Design
   ======================================== */

.form-group {
    margin-bottom: 22px;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.95);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 11px;
}

.form-input {
    width: 100%;
    padding: 15px 18px;
    background: rgba(6, 7, 10, 0.6);
    border: 1.5px solid rgba(71, 85, 105, 0.4);
    border-radius: 14px;
    color: white;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-input::placeholder {
    color: rgba(148, 163, 184, 0.4);
    font-weight: 400;
}

.form-input:hover:not(:focus) {
    border-color: rgba(71, 85, 105, 0.6);
    background: rgba(6, 7, 10, 0.7);
}

.form-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.7);
    background: rgba(6, 7, 10, 0.85);
    box-shadow: 
        0 0 0 4px rgba(59, 130, 246, 0.12),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* Input Icons */
.form-input-wrapper {
    position: relative;
}

.form-input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, 0.5);
    font-size: 16px;
    pointer-events: none;
    transition: color 0.3s ease;
    z-index: 1;
}

.form-input.with-icon {
    padding-left: 48px;
}

.form-input-wrapper .form-input.with-icon {
    padding-left: 48px;
    padding-right: 50px; /* Şifre toggle için */
}

.form-input:focus + .form-input-icon,
.form-input-wrapper:focus-within .form-input-icon {
    color: rgba(59, 130, 246, 0.8);
}

/* Password Toggle */
.password-toggle {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: rgba(148, 163, 184, 0.5);
    font-size: 18px;
    transition: color 0.3s ease;
    z-index: 2;
}

.password-toggle:hover {
    color: rgba(154, 161, 171, 0.9);
}

/* Form Input Wrapper (for password toggle) */
.form-input-wrapper {
    position: relative;
}

.form-input-wrapper .form-input {
    padding-right: 50px;
}

/* Password Toggle */
.password-toggle {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(148, 163, 184, 0.5);
    font-size: 18px;
    transition: color 0.3s ease;
    z-index: 2;
    padding: 5px;
}

.password-toggle:hover {
    color: rgba(154, 161, 171, 0.9);
}

/* Phone Input with +90 Prefix */
.phone-input-group {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.phone-prefix {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, 0.7);
    font-size: 15px;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
}

.phone-input {
    padding-left: 55px !important;
    width: 100%;
}

/* Submit Button */
.modal-content .btn-primary {
    width: 100%;
    padding: 16px;
    font-size: 15px;
    font-weight: 700;
    margin-top: 12px;
    border-radius: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.modal-content .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.modal-content .btn-primary:hover::before {
    left: 100%;
}

/* Form Footer */
.form-footer {
    margin-top: 28px;
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid rgba(71, 85, 105, 0.3);
}

.form-footer p {
    color: rgba(154, 161, 171, 0.7);
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 400;
}

.form-footer a {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-left: 5px;
    position: relative;
}

.form-footer a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #60a5fa;
    transition: width 0.3s ease;
}

.form-footer a:hover {
    color: #3b82f6;
}

.form-footer a:hover::after {
    width: 100%;
}

/* Checkbox */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
    border-radius: 4px;
}

.form-checkbox label {
    color: rgba(154, 161, 171, 0.85);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
}

/* Divider */
.form-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 25px 0;
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(71, 85, 105, 0.3);
}

.form-divider span {
    color: rgba(148, 163, 184, 0.6);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Success/Error Messages */
.form-message {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-message-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.form-message-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.form-message i {
    font-size: 16px;
}

/* Loading State */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spinner 0.6s linear infinite;
}

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

/* Mobile Form Optimizations */
@media (max-width: 600px) {
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-input {
        padding: 14px 16px;
        font-size: 16px; /* iOS zoom prevention */
    }
    
    .form-input-wrapper .form-input {
        padding-left: 46px;
    }
    
    .modal-content .btn-primary {
        padding: 15px;
        font-size: 14px;
    }
}

.form-input::placeholder {
    color: var(--text-muted);
}

.btn-submit {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
}

.auth-switch-text {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-switch-text a {
    color: var(--primary-cyan);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.auth-switch-text a:hover {
    color: var(--primary-purple);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 992px) {
    .desktop-only {
        display: none !important;
    }

    .navbar {
        padding: 10px 0;
    }

    .brand-text {
        font-size: 22px;
    }

    .nav-actions {
        gap: 8px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    .modern-slider {
        height: auto;
        margin: 20px 0;
    }
    
    .modern-slider-wrapper {
        margin: 20px 0 30px;
        padding: 0;
    }
    
    .slide-item {
        background-size: cover;
        background-position: center center;
    }

    .games-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .section-header-center .section-title {
        font-size: 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
    }

    .footer-contact {
        grid-column: 1 / -1;
        text-align: center;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    }

    .footer-social {
        justify-content: center;
    }

    .footer-badges-desktop {
        grid-column: 1 / -1;
        justify-content: center;
        padding-top: 20px;
        border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    }

    .payment-row {
        gap: 20px;
    }

    .payment-row img {
        height: 24px;
    }

    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .mobile-nav-spacer {
        display: block;
        height: 70px;
    }
}

@media (max-width: 600px) {
    .brand-text {
        font-size: 20px;
    }

    .user-balance {
        font-size: 13px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .modern-slider {
        height: auto;
        border-radius: var(--radius-md);
        margin: 15px 0;
    }
    
    .modern-slider-wrapper {
        margin: 15px 0 25px;
        padding: 0;
    }
    
    .slide-item {
        background-size: cover;
        background-position: center center;
    }
    
    .slider-dots {
        bottom: 10px;
        gap: 6px;
    }
    
    .slider-dots .dot {
        width: 8px;
        height: 8px;
    }
    
    .slider-dots .dot.active {
        width: 20px;
    }

    .section-title {
        font-size: 20px;
    }

    .section-header-center {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .section-header-center .section-title {
        font-size: 18px;
        justify-content: center;
    }

    .section-header-center .btn-view-all {
        display: none;
    }

    .view-all-center {
        display: block;
        text-align: center;
        margin-top: 20px;
    }

    .games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 30px;
    }

    .winner-card {
        flex: 0 0 200px;
        padding: 8px;
        gap: 8px;
    }

    .winner-game-image {
        width: 36px;
        height: 36px;
    }

    .winner-name {
        font-size: 11px;
    }

    .winner-game {
        font-size: 9px;
    }

    .winner-amount {
        font-size: 12px;
    }

    .footer-main {
        display: none;
    }

    .footer-header {
        padding: 20px 15px;
    }

    .footer-header-title {
        font-size: 16px;
    }

    .footer-header-subtitle {
        font-size: 12px;
    }

    .footer-payments {
        padding: 25px 15px;
    }

    .payment-row {
        gap: 15px;
    }

    .payment-row img {
        height: 20px;
    }

    .footer-badges-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    }

    .footer-badges-mobile .footer-badges {
        flex-direction: row;
        gap: 15px;
    }

    .footer-badges-mobile .badge-18,
    .footer-badges-mobile .badge-gcb {
        height: 40px;
    }

    .footer-license-mobile {
        display: block;
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.6;
        text-align: center;
        padding: 0 20px;
        margin-top: 15px;
    }

    .modal-content {
        padding: 25px;
    }

    .modal-title {
        font-size: 22px;
    }

    .auth-modal {
        max-width: none;
        /* premium-modals.css manages sizing */
    }

    .auth-modal-header {
        padding: 20px 20px 15px;
    }

    .auth-modal-header h2 {
        font-size: 20px;
    }

    .auth-modal-body {
        padding: 20px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-center { text-align: center; }
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b5cf6, #ec4899);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7c3aed, #db2777);
}

/* ========================================
   GAME FILTERS & SEARCH
   ======================================== */

.game-filters {
    background: rgba(21, 23, 28, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 30px;
}

.filter-row {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.search-input {
    width: 100%;
    padding: 14px 16px 14px 48px !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-cyan);
    background: var(--border, rgba(255,255,255,0.08));
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.15);
}

.provider-box {
    min-width: 200px;
}

.provider-select {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.provider-select:focus {
    outline: none;
    border-color: var(--primary-purple);
    background: var(--border, rgba(255,255,255,0.08));
}

.provider-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 10px;
}

/* ========================================
   PAGINATION
   ======================================== */

/* ========================================
   PAGINATION - Professional Glass Design
   ======================================== */

.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 60px 0 50px;
    padding: 0;
}

.pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px 25px;
    background: rgba(13, 15, 19, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    background: rgba(21, 23, 28, 0.5);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.pagination a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pagination a:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.pagination a:hover::before {
    opacity: 1;
}

.pagination .btn-primary,
.pagination a.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-color: transparent;
    color: white;
    box-shadow: 
        0 4px 20px rgba(59, 130, 246, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.pagination .btn-primary:hover,
.pagination a.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 8px 30px rgba(59, 130, 246, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.pagination .disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-dots {
    color: var(--text-secondary);
    font-weight: bold;
    padding: 0 5px;
    user-select: none;
}

.pagination-info {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 15px;
}

/* ========================================
   PAGE HEADER STYLES
   ======================================== */

.page-header {
    margin-bottom: 30px;
}

.page-header .section-title {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.page-header .section-title i {
    font-size: 28px;
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-header .section-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-left: 40px;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 60px 20px;
    background: rgba(21, 23, 28, 0.3);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.no-results i {
    font-size: 64px;
    color: var(--text-muted);
    margin-bottom: 20px;
    opacity: 0.5;
}

.no-results h3 {
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.no-results p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Empty State (Oyun Bulunamadı) */
.empty-state {
    text-align: center;
    padding: 80px 30px;
    margin: 40px 0;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: none;
}

.empty-state i {
    font-size: 72px;
    color: rgba(148, 163, 184, 0.4);
    margin-bottom: 24px;
    display: block;
}

.empty-state h3 {
    font-size: 26px;
    color: white;
    margin-bottom: 12px;
    font-weight: 700;
}

.empty-state p {
    font-size: 15px;
    color: rgba(154, 161, 171, 0.7);
    margin-bottom: 28px;
    line-height: 1.6;
}

.empty-state .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Search Results Info */
.search-results-info {
    text-align: center;
    padding: 15px 20px;
    margin-bottom: 25px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--radius-lg);
    color: rgba(154, 161, 171, 0.9);
    font-size: 14px;
    font-weight: 500;
}

.search-results-info i {
    color: #60a5fa;
    margin-right: 6px;
}

/* ========================================
   RESPONSIVE - FILTERS & PAGINATION
   ======================================== */

@media (max-width: 768px) {
    .game-filters {
        padding: 20px;
        margin-bottom: 30px;
    }

    .filter-row {
        flex-direction: column;
        gap: 12px;
    }

    .search-box,
    .provider-box {
        width: 100%;
        min-width: 100%;
    }

    /* Mobil Pagination - Daha kompakt ve profesyonel */
    .pagination-wrapper {
        margin: 45px 0 35px;
        padding: 0 10px;
    }

    .pagination {
        padding: 12px 15px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }

    .pagination a,
    .pagination span {
        min-width: 40px;
        height: 40px;
        font-size: 13px;
        padding: 0 10px;
    }

    /* Önceki/Sonraki butonları mobilde daha küçük */
    .pagination .btn-secondary {
        font-size: 12px;
        padding: 0 12px;
        gap: 5px;
    }

    .pagination .btn-secondary i {
        font-size: 10px;
    }

    /* Dots mobilde daha küçük */
    .pagination-dots {
        padding: 0 3px;
        font-size: 12px;
    }

    .pagination-info {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    .page-header {
        text-align: center;
        margin-bottom: 25px;
    }

    .page-header .section-title {
        font-size: 22px;
        justify-content: center;
    }

    .page-header .section-subtitle {
        margin-left: 0;
        font-size: 13px;
    }
    
    /* Mobilde oyunlar ile pagination arası daha fazla boşluk */
    .games-grid {
        margin-bottom: 35px;
    }
}


/* ========================================
   GAME FILTERS & SEARCH - Professional Glass
   ======================================== */

.game-filters {
    background: linear-gradient(135deg, rgba(13, 15, 19, 0.7) 0%, rgba(21, 23, 28, 0.7) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-xl);
    padding: 25px;
    margin-bottom: 40px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.filter-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(59, 130, 246, 0.7);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.search-input {
    width: 100%;
    padding: 13px 16px 13px 48px !important;
    background: rgba(6, 7, 10, 0.7);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(6, 7, 10, 0.9);
    box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.15),
        0 4px 20px rgba(59, 130, 246, 0.2);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.provider-box {
    min-width: 220px;
}

.provider-select {
    width: 100%;
    padding: 13px 16px;
    background: rgba(6, 7, 10, 0.7);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.provider-select:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(6, 7, 10, 0.9);
    box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.15),
        0 4px 20px rgba(59, 130, 246, 0.2);
}

.provider-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 10px;
}

.clear-btn {
    white-space: nowrap;
    padding: 13px 20px !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.clear-btn:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3) !important;
}

/* ========================================
   PAGINATION - CENTERED
   ======================================== */

.pagination-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 50px;
    padding: 30px 0;
}

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

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    background: rgba(21, 23, 28, 0.4);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

.pagination .active {
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.pagination .disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.page-header {
    margin-bottom: 30px;
}

.page-header .section-title {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 28px;
}

.page-header .section-title i {
    font-size: 26px;
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-header .section-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-left: 38px;
}


/* ========================================
   SLOTS & CASINO PAGES - LAYOUT
   ======================================== */

.page-container {
    padding-top: 30px;
    padding-bottom: 50px;
}

.page-header {
    margin-bottom: 25px;
}

.page-header .section-title {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 28px;
    font-weight: 800;
}

.page-header .section-title i {
    font-size: 26px;
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-header .section-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-left: 38px;
}

/* ========================================
   GAME FILTERS - MINIMAL DESIGN
   ======================================== */

.game-filters {
    background: rgba(21, 23, 28, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 30px;
}

.filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.filter-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 350px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 10px 12px 10px 38px !important;
    background: rgba(6, 7, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(6, 7, 10, 0.7);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.provider-box {
    min-width: 160px;
}

.provider-select {
    width: 100%;
    padding: 10px 12px;
    padding-right: 35px;
    background: rgba(6, 7, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23cbd5e1' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.provider-select:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.4);
    background-color: rgba(6, 7, 10, 0.7);
}

.provider-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px;
}

/* ========================================
   PAGINATION - CENTERED & CLEAN
   ======================================== */

.pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 20px 0;
}

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

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    background: rgba(21, 23, 28, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

.pagination .active {
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

.pagination .disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-info {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 60px 20px;
    background: rgba(21, 23, 28, 0.15);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin: 40px 0;
}

.no-results i {
    font-size: 56px;
    color: var(--text-muted);
    margin-bottom: 16px;
    opacity: 0.3;
}

.no-results h3 {
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 700;
}

.no-results p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ========================================
   RESPONSIVE - SLOTS & CASINO
   ======================================== */

@media (max-width: 768px) {
    .page-container {
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .page-header {
        text-align: center;
        margin-bottom: 25px;
    }

    .page-header .section-title {
        font-size: 22px;
        justify-content: center;
    }

    .page-header .section-subtitle {
        margin-left: 0;
        font-size: 13px;
    }

    .game-filters {
        padding: 15px;
        margin-bottom: 25px;
    }

    .filter-row {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .filter-left {
        flex-direction: column;
        width: 100%;
    }

    .search-box,
    .provider-box {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    /* Küçük mobil pagination */
    .pagination-wrapper {
        margin: 35px 0 25px;
        padding: 0 5px;
    }

    .pagination {
        padding: 10px 12px;
        gap: 5px;
        flex-wrap: wrap;
    }

    .pagination a,
    .pagination span {
        min-width: 35px;
        height: 35px;
        font-size: 12px;
        padding: 0 8px;
    }

    .pagination .btn-secondary {
        font-size: 11px;
        padding: 0 10px;
    }

    .pagination-dots {
        font-size: 11px;
    }

    .pagination-info {
        order: 1;
        margin-top: 8px;
        font-size: 12px;
    }
}


/* ========================================
   USER DROPDOWN MENU STYLES
   ======================================== */

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.user-balance {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    font-size: 15px;
    color: #00FFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-deposit {
    padding: 10px 20px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: none !important;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    color: white !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-deposit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
}

.btn-admin {
    padding: 10px 20px !important;
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    border: none !important;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    color: white !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.3);
}

.btn-admin:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(251, 191, 36, 0.5);
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00FFFF, #FF00FF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.user-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.4);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 260px;
    background: rgba(6, 7, 10, 0.98);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(59, 130, 246, 0.1);
    z-index: 1000;
}

.user-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    padding: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px 12px 0 0;
}

.dropdown-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.dropdown-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-user-details strong {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.dropdown-balance {
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
    font-weight: 600;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}
/* Dropdown Items - Temel Stiller */
.dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-right: 55px !important; /* Badge için alan */
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.dropdown-item i {
    width: 18px;
    font-size: 16px;
    color: rgba(59, 130, 246, 0.7);
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
    border-left-color: rgba(59, 130, 246, 0.8);
}

.dropdown-item:hover i {
    color: #3b82f6;
    transform: translateX(2px);
}

.dropdown-item.admin-item {
    background: rgba(139, 92, 246, 0.08);
    border-left-color: rgba(139, 92, 246, 0.3);
}

.dropdown-item.admin-item:hover {
    background: rgba(139, 92, 246, 0.15);
    border-left-color: rgba(139, 92, 246, 0.8);
}

.dropdown-item.admin-item i {
    color: rgba(139, 92, 246, 0.8);
}

.dropdown-item.admin-item:hover i {
    color: #8b5cf6;
}

.dropdown-item.logout-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4px;
}

.dropdown-item.logout-item:hover {
    background: rgba(239, 68, 68, 0.1);
    border-left-color: rgba(239, 68, 68, 0.8);
}

.dropdown-item.logout-item i {
    color: rgba(239, 68, 68, 0.7);
}

.dropdown-item.logout-item:hover i {
    color: #ef4444;
}

.notification-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(239, 68, 68, 0.25);
    -webkit-
    border: 2px solid rgba(239, 68, 68, 0.8);
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 25px rgba(239, 68, 68, 0.6),
        0 4px 15px rgba(239, 68, 68, 0.4),
        inset 0 0 15px rgba(239, 68, 68, 0.3),
        inset 0 2px 5px rgba(255, 255, 255, 0.2);
    animation: pulse-notification 2s ease-in-out infinite;
    z-index: 10;
}

.notification-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.3) 0%, transparent 50%, rgba(200, 50, 50, 0.3) 100%);
    z-index: -1;
}

@keyframes pulse-notification {
    0%, 100% {
        box-shadow: 
            0 0 25px rgba(239, 68, 68, 0.6),
            0 4px 15px rgba(239, 68, 68, 0.4),
            inset 0 0 15px rgba(239, 68, 68, 0.3),
            inset 0 2px 5px rgba(255, 255, 255, 0.2);
        transform: translateY(-50%) scale(1);
        border-color: rgba(239, 68, 68, 0.8);
    }
    50% {
        box-shadow: 
            0 0 35px rgba(239, 68, 68, 0.8),
            0 6px 20px rgba(239, 68, 68, 0.5),
            inset 0 0 20px rgba(239, 68, 68, 0.4),
            inset 0 2px 8px rgba(255, 255, 255, 0.3);
        transform: translateY(-50%) scale(1.08);
        border-color: rgba(239, 68, 68, 1);
    }
}

/* Admin Divider Fix */
.admin-section-divider {
    margin: 8px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Notification Badge - Glass Circle - FINAL VERSION */
.user-dropdown-menu .dropdown-item {
    position: relative;
}

.user-dropdown-menu .dropdown-item .notification-badge {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    background: rgba(239, 68, 68, 0.3) !important;
    -webkit-
    border: 2.5px solid #ef4444 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        0 0 30px rgba(239, 68, 68, 0.7),
        0 5px 20px rgba(239, 68, 68, 0.5),
        inset 0 0 20px rgba(239, 68, 68, 0.4),
        inset 0 3px 8px rgba(255, 255, 255, 0.3) !important;
    animation: pulse-glow 2s ease-in-out infinite !important;
    z-index: 999 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.user-dropdown-menu .dropdown-item .notification-badge::before {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%) !important;
    z-index: -1 !important;
    animation: rotate-glow 3s linear infinite !important;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 
            0 0 30px rgba(239, 68, 68, 0.7),
            0 5px 20px rgba(239, 68, 68, 0.5),
            inset 0 0 20px rgba(239, 68, 68, 0.4),
            inset 0 3px 8px rgba(255, 255, 255, 0.3);
        transform: translateY(-50%) scale(1);
        border-color: #ef4444;
    }
    50% {
        box-shadow: 
            0 0 40px rgba(239, 68, 68, 0.9),
            0 7px 25px rgba(239, 68, 68, 0.6),
            inset 0 0 25px rgba(239, 68, 68, 0.5),
            inset 0 3px 10px rgba(255, 255, 255, 0.4);
        transform: translateY(-50%) scale(1.1);
        border-color: #ff5555;
    }
}

@keyframes rotate-glow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Admin Section Divider */
.admin-section-divider {
    margin: 8px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   GÜNCEL ADRES BANNER - GLASS MOR TEMA
   ======================================== */

.current-site-banner {
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

.site-banner-wrapper {
    position: relative;
    z-index: 1;
}

.banner-content {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.15) 0%, 
        rgba(124, 58, 237, 0.12) 50%, 
        rgba(var(--primary-rgb, 172, 137, 94), 0.15) 100%);
    -webkit-
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 20px;
    padding: 28px 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 
        0 10px 40px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Parlaklık efekti */
.banner-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at center,
        rgba(167, 139, 250, 0.15) 0%,
        transparent 70%
    );
    animation: bannerGlow 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bannerGlow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(10%, 10%) scale(1.2);
        opacity: 0.8;
    }
}

/* Üst parlak çizgi */
.banner-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(167, 139, 250, 0.8) 50%, 
        transparent 100%);
}

.banner-content:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 139, 250, 0.4);
    box-shadow: 
        0 15px 50px rgba(139, 92, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.banner-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.3) 0%, 
        rgba(124, 58, 237, 0.25) 100%);
    border: 2px solid rgba(167, 139, 250, 0.4);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #c4b5fd;
    box-shadow: 
        0 4px 15px rgba(139, 92, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* İkon hover animasyonu */
.banner-content:hover .banner-icon {
    transform: rotate(5deg) scale(1.05);
    border-color: rgba(167, 139, 250, 0.6);
    box-shadow: 
        0 6px 20px rgba(139, 92, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.banner-icon i {
    position: relative;
    z-index: 1;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.banner-text {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

.banner-label {
    color: #e9d5ff;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.banner-link {
    color: #f3e8ff;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.25) 0%, 
        rgba(124, 58, 237, 0.2) 100%);
    padding: 8px 22px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 19px;
    border: 1px solid rgba(167, 139, 250, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 12px rgba(139, 92, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    letter-spacing: 0.3px;
}

/* Link parlama efekti */
.banner-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
    transition: left 0.5s ease;
}

.banner-link:hover::before {
    left: 100%;
}

.banner-link:hover {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.35) 0%, 
        rgba(124, 58, 237, 0.3) 100%);
    border-color: rgba(167, 139, 250, 0.6);
    transform: translateY(-2px);
    box-shadow: 
        0 6px 18px rgba(139, 92, 246, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.banner-suffix {
    color: #e9d5ff;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Mobil Responsive */
@media (max-width: 768px) {
    .current-site-banner {
        padding: 25px 0;
    }
    
    .banner-content {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 20px;
    }
    
    .banner-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }
    
    .banner-text {
        flex-direction: column;
        text-align: center;
        font-size: 16px;
        gap: 8px;
    }
    
    .banner-link {
        padding: 10px 20px;
        font-size: 17px;
        width: auto;
        display: inline-block;
    }
}

@media (max-width: 480px) {
    .banner-content {
        padding: 20px 16px;
        border-radius: 16px;
    }
    
    .banner-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
    
    .banner-text {
        font-size: 15px;
    }
    
    .banner-link {
        font-size: 16px;
        padding: 9px 18px;
    }
    
    .banner-label,
    .banner-suffix {
        font-size: 14px;
    }
}

/* ========================================
   IOS ZOOM FIX - input font-size >= 16px
   ======================================== */
@media (max-width: 768px) {
    input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea,
    .form-input,
    .form-control {
        font-size: 16px !important;
    }
}

/* ========================================
   MOBİL SLIDER — Ayrı section
   ======================================== */

.mobile-slider-section {
    width: 100%;
    margin: 0 0 12px 0;
    padding: 0;
    box-sizing: border-box;
}

.mobile-slider-wrapper {
    position: relative;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    background: #0a0a0a;
}

.mobile-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0;
    background: #0a0a0a;
}

.mobile-slider .slide-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity 0.6s ease;
    cursor: pointer;
}

.mobile-slider .slide-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}

.mobile-slider .slide-item.active {
    opacity: 1;
    z-index: 1;
}

/* Ok tuşları */
.mobile-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transition: color 0.2s ease;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.mobile-slider-arrow:active {
    color: #fff;
    background: transparent;
}

.mobile-slider-prev {
    left: 6px;
    border-radius: 0;
}

.mobile-slider-next {
    right: 6px;
    border-radius: 0;
}

.mobile-slider-wrapper .slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.mobile-slider-wrapper .slider-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.mobile-slider-wrapper .slider-dots .dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--text-primary, #e7e9ec);
    box-shadow: none;
}

/* Desktop'ta mobil slider section'ı gizle */
@media (min-width: 769px) {
    .mobile-slider-section {
        display: none;
    }
}


/* ── OsNLjVHWGaub.css ──────────────────────────────────────── */
/* ========================================
   AUTH BUTTONS — Köşeli Mat Gold
   ======================================== */

.modern-auth-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modern-auth-btn {
    position: relative;
    height: 38px;
    padding: 0 20px;
    border-radius: 6px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}

.modern-auth-btn:active { transform: scale(0.97); }

/* glow efekti — kapalı */
.btn-glow { display: none; }

.btn-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
}

.btn-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
    flex-shrink: 0;
}

.btn-text { line-height: 1; white-space: nowrap; }

/* ── Giriş Yap — şeffaf, mat gold border & yazı ── */
.modern-auth-btn-login {
    background: transparent;
    border: 1px solid rgba(154,164,176,0.4);
    color: #C8A84B;

}

.modern-auth-btn-login:hover {
    background: rgba(154,164,176,0.06);
    border-color: rgba(154,164,176,0.7);
    color: #c9a97d;

    transform: none;
}

.modern-auth-btn-login .btn-icon { filter: none; }

/* ── Kayıt Ol — mat gold dolgu, siyah yazı ── */
.modern-auth-btn-register {
    background: #C8A84B;
    border: 1px solid #C8A84B;
    color: #000;
}

.modern-auth-btn-register:hover {
    background: #9aa4b0;
    border-color: #9aa4b0;
    color: #000;
}

.modern-auth-btn-register .btn-icon { filter: none; }

/* ========================================
   GAME MODAL AUTH BUTTONS
   ======================================== */

.game-login-required {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    gap: 24px;
}

.lock-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(154,164,176,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(154,164,176,0.2);
}

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

.lock-icon {
    width: 38px;
    height: 38px;
    stroke: #C8A84B;
    stroke-width: 2;
    filter: none;
}

.game-lock-text {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    margin: 0;
    line-height: 1.5;
}

.game-auth-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    margin-top: 8px;
}

.game-auth-btn {
    position: relative;
    flex: 1;
    height: 44px;
    padding: 0 20px;
    border-radius: 6px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s, border-color .15s, color .15s;
}

.game-auth-btn:active { transform: scale(0.97); }
.game-btn-glow { display: none; }

.game-btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.game-btn-icon { width: 16px; height: 16px; stroke-width: 2.2; }
.game-btn-text { line-height: 1; white-space: nowrap; }

.game-auth-btn-login {
    background: transparent;
    border: 1px solid rgba(154,164,176,0.4);
    color: #C8A84B;
}
.game-auth-btn-login:hover {
    background: rgba(154,164,176,0.06);
    border-color: rgba(154,164,176,0.7);
    color: #c9a97d;
}

.game-auth-btn-register {
    background: #C8A84B;
    border: 1px solid #C8A84B;
    color: #000;
}
.game-auth-btn-register:hover {
    background: #9aa4b0;
    border-color: #9aa4b0;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .modern-auth-buttons { gap: 6px; }
    .modern-auth-btn { height: 34px; padding: 0 14px; font-size: 12px; }
    .btn-icon { width: 13px; height: 13px; }
    .game-auth-buttons { flex-direction: column; gap: 8px; }
    .game-auth-btn { height: 42px; font-size: 13px; }
}

@media (max-width: 480px) {
    .modern-auth-btn { height: 32px; padding: 0 12px; font-size: 11.5px; }
    .btn-icon { width: 12px; height: 12px; }
    .lock-icon-wrapper { width: 64px; height: 64px; }
    .lock-icon { width: 30px; height: 30px; }
}

/* ── iO6kGL75UQSy.css ──────────────────────────────────────── */
/* Notification System Styles */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    pointer-events: none;
}

.notification {
    background: rgba(13, 15, 19, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    pointer-events: auto;
    animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-in 2.7s;
    position: relative;
    overflow: hidden;
}

.notification::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: currentColor;
    animation: progressBar 3s linear;
}

@keyframes progressBar {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(400px);
    }
}

.notification-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.notification-content {
    flex: 1;
    color: #f8fafc;
}

.notification-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.notification-message {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.4;
}

.notification-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-size: 18px;
    transition: color 0.2s;
}

.notification-close:hover {
    color: #f8fafc;
}

/* Notification Types */
.notification.success {
    border-left: 4px solid var(--success, #10b981);
    color: var(--success, #10b981);
}

.notification.error {
    border-left: 4px solid var(--error, #ef4444);
    color: var(--error, #ef4444);
}

.notification.warning {
    border-left: 4px solid var(--warning, #f59e0b);
    color: var(--warning, #f59e0b);
}

.notification.info {
    border-left: 4px solid var(--info, #3b82f6);
    color: var(--info, #3b82f6);
}

@media (max-width: 768px) {
    #notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .notification {
        min-width: auto;
    }
}


/* ── re4JSnE2NiiU.css ──────────────────────────────────────── */
/* ========================================
   LOADING SCREEN — Site rengiyle uyumlu (Dark & Bronze)
   ======================================== */

.loading-screen {
  position: fixed;
  inset: 0;
  background: var(--loading-screen-background, var(--surface-elevated, #06070a));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  gap: 40px;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* ─── LOGO ─── */
.ls-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ls-logo-in 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.ls-logo img {
  height: 52px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: brightness(1) drop-shadow(0 0 14px rgba(var(--loading-screen-accent-rgb, var(--primary-rgb, 172, 137, 94)),0.22));
}

/* ─── CIRCLE ─── */
.ls-circle-wrap {
  position: relative;
  width: 82px;
  height: 82px;
  animation: ls-logo-in 0.6s 0.15s cubic-bezier(0.22,1,0.36,1) both;
}
.ls-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(var(--loading-screen-accent-rgb, var(--primary-rgb, 172, 137, 94)),0.85);
  border-right-color: rgba(var(--loading-screen-accent-rgb, var(--primary-rgb, 172, 137, 94)),0.20);
  animation: ls-spin 1.1s linear infinite;
}
.ls-ring-2 {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-bottom-color: rgba(231,233,236,0.18);
  border-left-color: rgba(231,233,236,0.07);
  animation: ls-spin 1.9s linear infinite reverse;
}
.ls-icon-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
}
.ls-icon.visible {
  animation: ls-icon-in 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.ls-icon.leaving {
  animation: ls-icon-out 0.22s ease-in forwards;
}

/* ─── KEYFRAMES ─── */
@keyframes ls-spin {
  to { transform: rotate(360deg); }
}
@keyframes ls-logo-in {
  from { opacity:0; transform: translateY(-10px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes ls-icon-in {
  from { opacity:0; transform: scale(0.4) rotate(-12deg); }
  to   { opacity:1; transform: scale(1)   rotate(0deg); }
}
@keyframes ls-icon-out {
  from { opacity:1; transform: scale(1)   rotate(0deg); }
  to   { opacity:0; transform: scale(0.4) rotate(12deg); }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .ls-logo img  { height: 44px; }
  .ls-circle-wrap { width: 72px; height: 72px; }
}
@media (max-width: 480px) {
  .ls-logo img  { height: 36px; }
  .ls-circle-wrap { width: 64px; height: 64px; }
  .loading-screen { gap: 32px; }
}


/* ── YQKxKDpI6Qh2.css ──────────────────────────────────────── */
/* Mobile Bottom Navigation Responsive Fixes */

/* Temel stil - Tüm ekranlar için */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    z-index: 999;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 2px;
    }
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 8px 4px;
    border-radius: 12px;
    position: relative;
    flex: 1;
    min-width: 0; /* Önemli: Flex itemlerin küçülmesine izin verir */
}

.mobile-nav-item i {
    font-size: 20px;
    transition: all 0.3s ease;
}

.mobile-nav-item span {
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

/* Küçük ekranlar için özel düzenlemeler */
@media (max-width: 380px) {
    .mobile-bottom-nav {
        padding: 6px 0 max(6px, env(safe-area-inset-bottom));
        gap: 0;
    }
    
    .mobile-nav-item {
        padding: 6px 2px;
        gap: 3px;
    }
    
    .mobile-nav-item i {
        font-size: 18px;
    }
    
    .mobile-nav-item span {
        font-size: 9px;
        font-weight: 500;
    }
    
    /* Uzun metinleri kısalt */
    .mobile-nav-item span {
        display: block;
        max-width: 60px;
    }
}

/* Çok küçük ekranlar için */
@media (max-width: 350px) {
    .mobile-nav-item i {
        font-size: 16px;
    }
    
    .mobile-nav-item span {
        font-size: 8px;
        max-width: 50px;
    }
    
    .mobile-nav-item {
        padding: 5px 1px;
        gap: 2px;
    }
}

/* Active state — beyaz/aydınlık, tasarıma uygun */
.mobile-nav-item.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.mobile-nav-item.active i {
    color: #ffffff;
    transform: scale(1.1);
}

.mobile-nav-item.active span {
    color: #ffffff;
    font-weight: 600;
}

/* Aktif gösterge çizgisi — üst kenar (ince, nötr) */
.mobile-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0 0 2px 2px;
}



/* Hover effect (sadece büyük dokunmatik ekranlar için) */
@media (hover: hover) and (pointer: fine) {
    .mobile-nav-item:hover {
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.05);
    }
    
    .mobile-nav-item:hover i {
        transform: scale(1.1);
        color: rgba(255, 255, 255, 0.85);
    }
}

/* Support icon wrapper */
.support-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.online-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.9);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Küçük ekranlarda online dot'u küçült */
@media (max-width: 380px) {
    .online-dot {
        width: 6px;
        height: 6px;
        border-width: 1.5px;
        top: -1px;
        right: -1px;
    }
}

/* Ana içerik için padding (navbar yüksekliği kadar) */
@media (max-width: 768px) {
    body {
        padding-bottom: 70px;
    }
}

@media (max-width: 380px) {
    body {
        padding-bottom: 65px;
    }
}

/* Desktop'ta gizle */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
    
    body {
        padding-bottom: 0 !important;
    }
}

/* Safe area insets için destek (iPhone X ve sonrası) */
@supports (padding: max(0px)) {
    .mobile-bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    
    @media (max-width: 380px) {
        .mobile-bottom-nav {
            padding-bottom: max(6px, env(safe-area-inset-bottom));
        }
    }
}

/* Not: Önceden burada 320px altı ekranlarda etiket metinlerini tamamen
   gizleyen bir kural vardı. Kaldırıldı — etiketler artık her ekran
   genişliğinde görünür kalıyor. */

/* ═══════════════════════════════════════════════════
   BONUS 3D CIRCLE — Ortada yükselen renkli top
   ═══════════════════════════════════════════════════ */

/* Bonus nav-item wrapper — diğer itemlarla aynı flex ama overflow görünür */
.mobile-nav-bonus-item {
    overflow: visible !important;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 4px 8px;
    gap: 0;
    text-decoration: none;
    /* Aktif state için ek renk */
    color: rgba(255, 255, 255, 0.75);
}

/* Bonus aktifken background ve border overlay yok */
.mobile-nav-bonus-item.active,
.mobile-nav-bonus-item.active::before {
    background: none !important;
    border: none !important;
    height: auto !important;
    content: none !important;
}

/* 3D Circle — nav üstüne taşan asıl element */
.bonus-3d-circle {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin-bottom: 4px;
    /* Navbarın üstüne taşsın */
    margin-top: -26px;
    flex-shrink: 0;

    /* Çok katmanlı gradient — sıcak sarı/turuncu/pembe/mor 3D efekt */
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 180, 0.9) 0%, transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(220, 60, 120, 0.6) 0%, transparent 50%),
        linear-gradient(135deg,
            #ffe259 0%,
            #ffa751 20%,
            #ff6b35 38%,
            #e91e8c 58%,
            #9c27b0 78%,
            #3f51b5 100%
        );

    /* 3D derin gölge + parlak kenar */
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.18),
        0 0 0 5px rgba(255, 180, 50, 0.25),
        0 6px 20px rgba(255, 107, 53, 0.55),
        0 12px 35px rgba(233, 30, 140, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.6),
        inset 0 -4px 8px rgba(0, 0, 0, 0.3),
        inset 0 2px 6px rgba(255, 255, 255, 0.35);

    /* Sürekli renk döngüsü animasyonu */
    animation: bonusHueRotate 4s linear infinite, bonusPulse 2.5s ease-in-out infinite;

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

    /* Dönüşüm — hafif press efekti için */
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Dış parlayan halka */
.bonus-3d-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(255,226,89,0.9), rgba(255,107,53,0.7), rgba(233,30,140,0.7), rgba(156,39,176,0.6), rgba(63,81,181,0.5)) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: bonusRingRotate 3s linear infinite;
    pointer-events: none;
}

/* Üstteki beyaz parlaklık — cam/3D illüzyon */
.bonus-3d-shine {
    position: absolute;
    top: 6px;
    left: 10px;
    width: 34px;
    height: 16px;
    background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50%;
    pointer-events: none;
    transform: rotate(-15deg);
}

/* Dışarı yayılan ışık halkası */
.bonus-3d-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 180, 50, 0.35) 0%, rgba(233,30,140,0.2) 50%, transparent 70%);
    animation: bonusGlowPulse 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* İkon — circle içinde beyaz */
.bonus-3d-icon {
    width: 22px;
    height: 22px;
    fill: #ffffff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

/* Label */
.bonus-3d-label {
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(90deg, #ffe259, #ff6b35, #e91e8c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.3px;
    line-height: 1;
    text-align: center;
}

/* ── Animasyonlar ── */

/* Sürekli renk tonu dönüşü */
@keyframes bonusHueRotate {
    0%   { filter: hue-rotate(0deg) brightness(1.05); }
    50%  { filter: hue-rotate(30deg) brightness(1.15); }
    100% { filter: hue-rotate(0deg) brightness(1.05); }
}

/* Hafif up-down nefes efekti */
@keyframes bonusPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-2px) scale(1.03); }
}

/* Dış glow titreşimi */
@keyframes bonusGlowPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.12); }
}

/* Halka döndürme */
@keyframes bonusRingRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Tıklama efekti */
.mobile-nav-bonus-item:active .bonus-3d-circle {
    transform: translateY(1px) scale(0.95);
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.15),
        0 3px 12px rgba(255,107,53,0.5),
        0 6px 20px rgba(233,30,140,0.35),
        inset 0 -2px 6px rgba(0,0,0,0.4),
        inset 0 1px 4px rgba(255,255,255,0.25);
}

/* Aktif sayfa — ekstra efekt yok, circle olduğu gibi kalır */
.mobile-nav-bonus-item.active .bonus-3d-circle {
    /* normal animasyon devam eder, ekstra glow yok */
}

/* Küçük ekran uyumu */
@media (max-width: 380px) {
    .bonus-3d-circle {
        width: 48px;
        height: 48px;
        margin-top: -22px;
    }
    .bonus-3d-shine {
        width: 30px;
        height: 13px;
        left: 8px;
    }
    .bonus-3d-icon {
        width: 19px;
        height: 19px;
    }
}

@media (max-width: 350px) {
    .bonus-3d-circle {
        width: 44px;
        height: 44px;
        margin-top: -20px;
    }
    .bonus-3d-icon {
        width: 17px;
        height: 17px;
    }
    .bonus-3d-label {
        font-size: 9px;
    }
}

/* Reduced motion: animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
    .bonus-3d-circle,
    .bonus-3d-ring,
    .bonus-3d-glow {
        animation: none !important;
    }
}

/* ── Navbar gold çizgi override — tüm kaynaklardan gelen gold/amber border'ı sıfırla ── */
.mobile-bottom-nav,
nav.mobile-bottom-nav {
    border-top: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    border-bottom: none !important;
    outline: none !important;
}

.mobile-bottom-nav::before,
.mobile-bottom-nav::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

.mobile-nav-item::after {
    display: none !important;
    content: none !important;
}

.mobile-nav-item.active::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}


/* ── x2Ztd26fEeVV.css ──────────────────────────────────────── */
/* ============================================================
   NAVBAR REDESIGN — Dark Silver Premium
   Temiz, keskin, pro casino navbar
   ============================================================ */

/* SVG nav ikonları */
.nav-svg-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

/* ── NAVBAR ── */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    height: 64px !important;
    padding: 0 !important;
    background: rgba(8, 8, 8, 0.97) !important;
    border-bottom: 1px solid rgba(154,164,176, 0.18) !important;
    box-shadow: 0 1px 0 rgba(201,169,125,0.06), 0 8px 32px rgba(0,0,0,0.7) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

.navbar.scrolled {
    background: rgba(5, 5, 5, 0.99) !important;
    border-bottom-color: rgba(154,164,176, 0.25) !important;
    box-shadow: 0 1px 0 rgba(201,169,125,0.08), 0 12px 40px rgba(0,0,0,0.85) !important;
}

.navbar .container {
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── LOGO ── */
.nav-brand { flex-shrink: 0; }

.brand-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    gap: 10px !important;
    transition: opacity 0.2s ease !important;
}
.brand-logo:hover { opacity: 0.85 !important; transform: none !important; }

.logo-img {
    height: 38px !important;
    width: auto !important;
    filter: drop-shadow(0 0 12px rgba(201,169,125,0.3)) !important;
}

.brand-text {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    background: linear-gradient(135deg, #c9a97d 0%, var(--primary, #ac895e) 60%, #9aa4b0 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
}

/* ── DESKTOP NAV MENU ── */
.nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 14px !important;
    color: #a8a8a8 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 0.01em !important;
    border-radius: 8px !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    position: relative !important;
    white-space: nowrap !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
}

.nav-link::before { display: none !important; }

.nav-link:hover {
    color: #c9a97d !important;
    background: rgba(201,169,125, 0.07) !important;
    box-shadow: none !important;
    transform: none !important;
}

.nav-link.active {
    color: #c9a97d !important;
    background: rgba(201,169,125, 0.1) !important;
    box-shadow: none !important;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: linear-gradient(90deg, #9aa4b0, #c9a97d);
    border-radius: 2px 2px 0 0;
}

/* ikonlar — hem fa hem svg */
.nav-link i,
.nav-link .nav-svg-icon {
    color: #c9a97d !important;
    font-size: 15px !important;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

/* stroke tabanlı SVG ikonlar (fill=none) - fill zorlamayı engelle */
.nav-link .nav-svg-icon[fill="none"] path,
.nav-link .nav-svg-icon[fill="none"] rect,
.nav-link .nav-svg-icon[fill="none"] circle {
    fill: none !important;
    stroke: currentColor !important;
}

.nav-link:hover i,
.nav-link:hover .nav-svg-icon,
.nav-link.active i,
.nav-link.active .nav-svg-icon {
    opacity: 1 !important;
}

/* ── DEPOSIT BUTTON (nav içi) ── */
.nav-deposit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #9aa4b0, #c9a97d);
    color: #0a0a0a !important;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: filter 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}
.nav-deposit-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.nav-deposit-btn i { color: #0a0a0a !important; font-size: 13px !important; }

/* ── BALANCE BADGE ── */
.balance-badge {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 13px !important;
    background: rgba(15, 15, 15, 0.9) !important;
    border: 1px solid rgba(154,164,176, 0.35) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #f0e6c0 !important;
    cursor: default !important;
    transition: border-color 0.2s ease !important;
    box-shadow: none !important;
    animation: none !important;
    overflow: visible !important;
}
.balance-badge::before { display: none !important; }
.balance-badge:hover {
    border-color: rgba(201,169,125, 0.55) !important;
    background: rgba(20, 20, 20, 0.95) !important;
    transform: none !important;
    box-shadow: none !important;
}
.balance-badge i {
    color: #c9a97d !important;
    font-size: 13px !important;
    filter: none !important;
}

/* ── USER AVATAR ── */
.user-info-compact {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.user-avatar-compact {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(154,164,176, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    box-shadow: none !important;
}
.user-avatar-compact:hover {
    border-color: rgba(201,169,125, 0.7) !important;
    background: rgba(25, 25, 25, 0.98) !important;
    transform: none !important;
    box-shadow: none !important;
}
.user-avatar-compact i {
    color: #9aa4b0 !important;
    font-size: 14px !important;
    filter: none !important;
}

/* ── DROPDOWN ── */
.user-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 220px !important;
    background: #0f0f0f !important;
    border: 1px solid rgba(154,164,176, 0.25) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.85) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    z-index: 2000 !important;
}

.user-menu-wrapper:hover .user-dropdown-menu,
.user-dropdown-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.dropdown-header {
    padding: 10px 10px 10px 10px !important;
    border-bottom: 1px solid rgba(201,169,125,0.1) !important;
    margin-bottom: 4px !important;
    background: transparent !important;
}

.dropdown-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(154,164,176,0.12);
    border: 1px solid rgba(154,164,176,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #9aa4b0;
    flex-shrink: 0;
    letter-spacing: 0;
}

.dropdown-user-details strong {
    display: block;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
}
.dropdown-user-details .dropdown-balance {
    font-size: 12px;
    color: #9aa4b0;
    font-weight: 500;
}

.dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 8px 10px !important;
    color: #aaa !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 7px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    position: relative !important;
}
.dropdown-item:hover {
    background: rgba(201,169,125,0.07) !important;
    color: #fff !important;
}
.dropdown-item i {
    font-size: 13px !important;
    color: rgba(154,164,176,0.7) !important;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.dropdown-item:hover i { color: #c9a97d !important; }

.dropdown-item.admin-item {
    background: rgba(154,164,176,0.08) !important;
    color: #9aa4b0 !important;
    border: 1px solid rgba(154,164,176,0.15) !important;
    margin-bottom: 2px !important;
}
.dropdown-item.admin-item:hover {
    background: rgba(154,164,176,0.14) !important;
    border-color: rgba(154,164,176,0.3) !important;
}
.dropdown-item.logout-item:hover {
    background: rgba(239,68,68,0.1) !important;
    color: #f87171 !important;
}
.dropdown-item.logout-item:hover i { color: #f87171 !important; }

/* ── AUTH BUTTONS ── */
.modern-auth-buttons {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.modern-auth-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.modern-auth-btn:hover {
    filter: none !important;
    transform: none !important;
}
.modern-auth-btn .btn-glow { display: none !important; }

.modern-auth-btn .btn-content {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.btn-icon {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

.modern-auth-btn-login {
    background: rgba(154,164,176,0.1) !important;
    border: 1px solid rgba(154,164,176,0.35) !important;
    color: #9aa4b0 !important;
}
.modern-auth-btn-login:hover {
    background: rgba(154,164,176,0.16) !important;
    border-color: rgba(201,169,125,0.55) !important;
}
.modern-auth-btn-login .btn-content { color: #9aa4b0 !important; }

.modern-auth-btn-register {
    background: #C8A84B !important;
    border: 1px solid #C8A84B !important;
    color: #000 !important;
}
.modern-auth-btn-register:hover {
    background: #9aa4b0 !important;
    border-color: #9aa4b0 !important;
    filter: none !important;
    transform: none !important;
}
.modern-auth-btn-register .btn-content { color: #0a0a0a !important; }

/* ── MOBILE BOTTOM NAV ── */
.mobile-bottom-nav {
    display: none !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: rgba(8, 8, 8, 0.98) !important;
    border-top: 1px solid rgba(154,164,176,0.15) !important;
    padding: 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.7) !important;
    height: 62px !important;
    align-items: stretch !important;
    justify-content: space-around !important;
}

.mobile-bottom-nav .mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    color: #666 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 8px 4px !important;
    border-radius: 0 !important;
    transition: color 0.2s ease !important;
    flex: 1 !important;
    position: relative !important;
}

.mobile-bottom-nav .mobile-nav-item i {
    font-size: 18px !important;
    line-height: 1 !important;
}

.mobile-bottom-nav .mobile-nav-item .nav-svg-icon {
    width: 20px !important;
    height: 20px !important;
}

.mobile-bottom-nav .mobile-nav-item span {
    font-size: 9.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
}

.mobile-bottom-nav .mobile-nav-item.active {
    color: #ffffff !important;
    background: rgba(255,255,255,0.05) !important;
}

.mobile-bottom-nav .mobile-nav-item.active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 22% !important;
    right: 22% !important;
    height: 2px !important;
    background: rgba(255,255,255,0.5) !important;
    border-radius: 0 0 2px 2px !important;
}

.mobile-bottom-nav .mobile-nav-item:hover {
    color: rgba(255,255,255,0.8) !important;
    background: rgba(255,255,255,0.04) !important;
    transform: none !important;
}

/* canlı destek center butonu */
.mobile-bottom-nav .live-support-btn {
    position: relative !important;
}

.support-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.online-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    border: 1.5px solid var(--page-background, #080808);
    animation: blink 2s ease-in-out infinite;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex !important;
    }
    .desktop-only {
        display: none !important;
    }
    .navbar .container {
        padding: 0 16px !important;
    }
    /* Auth butonları mobilde küçük */
    .modern-auth-btn .btn-content {
        padding: 7px 10px !important;
        font-size: 12px !important;
    }
    .btn-icon { display: none !important; }
}

@media (max-width: 480px) {
    .balance-badge span {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================
   EK: Logo, CANLI Badge, Address Bar, Side Menu Redesign
   ============================================================ */

/* ── LOGO BÜYÜT ── */
.logo-img {
    height: 46px !important;
    max-height: 46px !important;
    width: auto !important;
}

/* ── CANLI BADGE (Spor linki üzerinde) ── */
.nav-live-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: #e53e3e;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    border-radius: 4px;
    line-height: 1.4;
    position: relative;
    top: -1px;
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* ── GÜNCEL ADRESİMİZ BAR ── */
.mobile-only-address-banner {
    background: rgba(10, 10, 10, 0.95) !important;
    border: 1px solid rgba(154,164,176, 0.2) !important;
    border-radius: 10px !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.mobile-address-compact {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 11px 20px !important;
    font-size: 13px !important;
}

.mobile-address-compact i {
    color: #9aa4b0 !important;
    font-size: 14px !important;
}

.mobile-address-compact span {
    color: #888 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

.mobile-address-compact a {
    color: #c9a97d !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    background: rgba(201,169,125, 0.1) !important;
    border: 1px solid rgba(201,169,125, 0.25) !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    white-space: nowrap !important;
}

.mobile-address-compact a:hover {
    background: rgba(201,169,125, 0.18) !important;
    border-color: rgba(201,169,125, 0.45) !important;
    transform: none !important;
}

/* ── SIDE MENU REDESIGN ── */
.side-menu {
    position: fixed !important;
    top: 0 !important;
    right: -320px !important;
    width: 300px !important;
    height: 100% !important;
    background: #0a0a0a !important;
    border-left: 1px solid rgba(154,164,176, 0.15) !important;
    z-index: 1999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.8) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(154,164,176,0.2) transparent;
}

.side-menu.active { right: 0 !important; }

/* Side menu header */
.side-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid rgba(154,164,176, 0.12) !important;
    background: rgba(12, 12, 12, 0.98) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

.side-menu-logo { text-decoration: none; display: flex; align-items: center; }
.side-menu-logo-img { height: 32px; width: auto; filter: drop-shadow(0 0 8px rgba(201,169,125,0.25)); }
.side-menu-brand {
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(135deg, #c9a97d, #9aa4b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.side-menu-close {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    color: #888 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    flex-shrink: 0 !important;
}
.side-menu-close:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    transform: none !important;
}

/* Section titles */
.side-menu-section-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(154,164,176, 0.5) !important;
    padding: 0 4px !important;
    margin: 16px 0 6px !important;
}

/* Side menu content */
.side-menu-content {
    padding: 12px 12px 24px !important;
}

/* Side menu items */
.side-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 12px !important;
    color: #999 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    margin-bottom: 2px !important;
    transform: none !important;
}

.side-menu-item:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
    transform: none !important;
}

.side-menu-item.active {
    background: rgba(154,164,176, 0.1) !important;
    color: #c9a97d !important;
}

.side-menu-item.active .smi-icon { color: #c9a97d !important; }

/* Icon container */
.smi-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #9aa4b0 !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.smi-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.side-menu-item:hover .smi-icon {
    background: rgba(154,164,176, 0.1) !important;
    border-color: rgba(154,164,176, 0.2) !important;
}

.side-menu-item.active .smi-icon {
    background: rgba(154,164,176, 0.15) !important;
    border-color: rgba(154,164,176, 0.3) !important;
}

/* Text */
.smi-text { flex: 1 !important; line-height: 1 !important; }

/* CANLI badge (side menu) */
.smi-live {
    font-size: 8.5px !important;
    font-weight: 800 !important;
    padding: 2px 5px !important;
    background: #e53e3e !important;
    color: #fff !important;
    border-radius: 4px !important;
    letter-spacing: 0.04em !important;
    animation: live-pulse 2s ease-in-out infinite !important;
}

/* Arrow */
.smi-arrow { color: #444 !important; flex-shrink: 0 !important; }

/* Para Yatır - altın vurgu */
.side-menu-item--deposit {
    background: rgba(154,164,176, 0.07) !important;
    border: 1px solid rgba(154,164,176, 0.15) !important;
    color: #9aa4b0 !important;
}
.side-menu-item--deposit .smi-icon {
    background: rgba(154,164,176, 0.12) !important;
    border-color: rgba(154,164,176, 0.25) !important;
    color: #c9a97d !important;
}
.side-menu-item--deposit:hover {
    background: rgba(154,164,176, 0.13) !important;
    border-color: rgba(154,164,176, 0.3) !important;
    color: #c9a97d !important;
}

/* Çıkış */
.side-menu-item--logout:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #f87171 !important;
}
.side-menu-item--logout:hover .smi-icon {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

/* Divider */
.side-menu-divider {
    height: 1px !important;
    background: rgba(255,255,255,0.06) !important;
    margin: 10px 4px !important;
}

/* ── Promosyonlar stroke SVG fix ── */
/* Explicitly prevent any fill inheritance on stroke-only SVGs in nav */
.nav-link svg path[stroke],
.nav-link svg rect[stroke] {
    fill: none !important;
}
.nav-link svg[fill="none"] {
    fill: none !important;
}
.nav-link svg[fill="none"] * {
    fill: none !important;
}
.smi-icon svg[fill="none"] {
    fill: none !important;
}
.smi-icon svg[fill="none"] * {
    fill: none !important;
}

/* ── yay5WrRTWPEl.css ──────────────────────────────────────── */
/* ============================================================
   CASINO SIDEBAR LAYOUT — Premium Dark Silver
   Renkler: #0a0a0a / #141414 / #c9a97d / #9aa4b0
   ============================================================ */

:root {
    --sb-width: 232px;
    --sb-bg: var(--sidebar-background, #0a0a0a);
    --sb-header-bg: #141414;
    --sb-border: rgba(201,169,125, 0.13);
    --sb-gold: #9aa4b0;
    --sb-gold-bright: #c9a97d;
    --sb-item-color: #b7b7c0;
    --sb-item-hover: #c9a97d;
    --sb-section-color: rgba(190,196,205, 0.55);
    --sb-item-bg-hover: rgba(201,169,125, 0.07);
    --sb-item-bg-active: rgba(201,169,125, 0.1);
    --top-bar-h: 62px;
}

/* ── ESKİ NAVBAR GİZLE ── */
.navbar {
    display: none !important;
}

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.casino-sidebar {
    position: fixed;
    top: var(--top-bar-h);
    left: 0;
    width: var(--sb-width);
    height: calc(100vh - var(--top-bar-h));
    background: var(--sb-bg);
    border-right: 1px solid rgba(255,255,255,0.06);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-ticker .casino-sidebar {
    top: calc(var(--top-bar-h) + var(--ticker-h, 32px));
    height: calc(100vh - var(--top-bar-h) - var(--ticker-h, 32px));
}

/* ── Sidebar Header — desktop'ta gizli, mobilde logo+close için görünür ── */
.sb-header {
    display: none;
    align-items: center;
    height: var(--top-bar-h);
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    background: rgba(10, 10, 10, 0.98);
    gap: 8px;
}

/* Logo bloğu — header'ın solunda, sidebar genişliğinde */
.header-logo-block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--sb-width);
    height: 100%;
    flex-shrink: 0;
    padding: 0 16px;
    gap: 8px;
}

.header-logo-block .sb-logo-img {
    height: 58px;
    width: auto;
}

.header-logo-block a {
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* Sportsbook sayfasında logo bloğu görünsün — VIP ve çark ikonlarıyla (sadece desktop) */
@media (min-width: 1025px) {
    body[data-page="sportsbook.php"] .header-logo-block {
        display: flex !important;
    }
}

@media (max-width: 1024px) {
    .header-logo-block { display: none !important; }
}

.sb-brand-text {
    font-size: 17px;
    font-weight: 800;
    font-family: 'Manrope', sans-serif;
    background: var(--gradient-gold, linear-gradient(135deg, #c9a97d 0%, #9aa4b0 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

/* ── sb-header (mobil sidebar üstü) ── */
.sb-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    height: var(--top-bar-h);
    padding: 0 12px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    background: #0d1117;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Sol grup — logo (+ çark kapalıyken VIP hemen yanında) */
.sb-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Logo */
.sb-header-logo {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    text-decoration: none;
    overflow: hidden;
}
.sb-header-logo img {
    height: 34px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Çark kapalıyken logonun hemen yanındaki VIP ikonu — sağa uzayıp gitmesin */
.sb-hdr-vip-inline {
    flex-shrink: 0;
}

/* Sağ grup */
.sb-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Her ikon: çark + VIP */
.sb-hdr-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    border-radius: 8px;
    padding: 3px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.sb-hdr-icon:hover { background: rgba(255,255,255,0.06); }

/* Çark gif */
.sb-hdr-spin {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1.5px solid rgba(255,255,255,0.1);
}

/* VIP */
.sb-hdr-vip {
    width: 34px;
}
.sb-hdr-vip #vip-lottie-mob {
    width: 32px;
    height: 24px;
    display: block;
    overflow: visible;
}
.sb-hdr-vip #vip-lottie-mob svg {
    width: 34px !important;
    height: 34px !important;
    transform: translate(-1px, -5px);
}
.sb-hdr-vip span {
    font-size: 8px;
    font-weight: 800;
    color: #d9b75e;
    line-height: 1;
    margin-top: -6px;
    font-family: 'Manrope', sans-serif;
    letter-spacing: 0.3px;
    display: block;
    text-align: center;
}

/* Kapat butonu */
.sb-hdr-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
    margin-left: 2px;
}
.sb-hdr-close:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* Eski close btn — geriye dönük uyumluluk */
.sb-close-btn {
    display: none;
}

/* ── sb-header ikon grubu (eski — temizlik) ── */
.sb-header-icons,
.sb-header-icon-btn,
.sb-header-spin-gif,
.sb-header-vip,
.sb-header-vip-lbl {
    /* Eski class'lar — yeni .sb-hdr-* ile değiştirildi */
}
#vip-lottie-mob {
    width: 32px;
    height: 24px;
    display: block;
    overflow: visible;
}
#vip-lottie-mob svg {
    width: 34px !important;
    height: 34px !important;
    transform: translate(-1px, -5px);
}

/* ── Nav Scroll ── */
.sb-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.sb-nav::-webkit-scrollbar { width: 3px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.sb-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ── Section title ── */
.sb-section-title {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--sb-section-color);
    padding: 14px 18px 5px;
    text-transform: uppercase;
    font-family: 'Manrope', sans-serif;
}

/* ── Nav item ── */
.sb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 15px;
    color: var(--sb-item-color);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    border-left: 2.5px solid transparent;
    position: relative;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.sb-item:hover {
    color: #c9a97d;
    background: var(--sb-item-bg-hover);
    border-left-color: rgba(154,164,176, 0.4);
}

.sb-item.active {
    color: #c9a97d;
    background: var(--sb-item-bg-active);
    border-left-color: #9aa4b0;
    font-weight: 600;
}

.sb-item.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: rgba(154,164,176, 0.2);
    border-radius: 3px 0 0 3px;
}

/* ── Item icon ── */
.sb-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    display: block;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.sb-item:hover .sb-icon,
.sb-item.active .sb-icon {
    opacity: 1;
}

.sb-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Badges ── */
.sb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1.4;
    font-family: 'Manrope', sans-serif;
}

.sb-badge-live {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ff6b6b;
}

.sb-badge-live::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff5c5c;
    flex-shrink: 0;
    animation: live-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes live-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

.sb-badge-new {
    background: rgba(201,169,125, 0.1);
    border: 1px solid rgba(201,169,125, 0.3);
    color: #c9a97d;
}

/* ── Divider ── */
.sb-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(201,169,125, 0.12) 25%,
        rgba(201,169,125, 0.12) 75%,
        transparent);
    margin: 8px 16px;
}

/* ── Özel item renkleri ── */
.sb-item--deposit {
    color: #9aa4b0 !important;
    background: rgba(154,164,176, 0.04);
}

.sb-item--deposit:hover {
    color: #c9a97d !important;
    background: rgba(201,169,125, 0.09);
    border-left-color: #9aa4b0;
}

.sb-item--logout {
    color: rgba(200, 60, 60, 0.6) !important;
}

.sb-item--logout:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.06);
    border-left-color: rgba(239, 68, 68, 0.3);
}

/* ── Promo button ── */
/* ── Casino / Spor sekmeleri ── */
.sb-tabs {
    display: flex;
    gap: 6px;
    margin: 10px 12px 4px;
}

.sb-tab {
    flex: 1;
    text-align: left;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    text-decoration: none;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.05);
    border: none;
    position: relative;
    overflow: hidden;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Sağ köşede taşan quick-nav görseli (Casino: çark, Spor: futbol topu) —
   yazı ayrı bir katmanda üstte olduğu için görselle asla çakışmaz */
.sb-tab-icon-bg {
    position: absolute;
    right: -6px;
    bottom: -8px;
    width: 42px;
    height: 42px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.sb-tab:first-child .sb-tab-icon-bg { background-image: url('/assets/images/quick-nav-slot.png'); }
.sb-tab:last-child  .sb-tab-icon-bg { background-image: url('/assets/images/quick-nav-sports.png'); }
.sb-tab:hover .sb-tab-icon-bg { opacity: 0.85; transform: scale(1.06); }

/* Yazı her zaman en üstte, görselin üzerine biner ve net okunur */
.sb-tab-label {
    position: relative;
    z-index: 1;
}

/* Hover (henüz aktif olmayan sekme) — renk YOK, sadece daha parlak/aydınlık görünür */
.sb-tab:not(.active-casino):not(.active-spor):hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

.sb-tab.active-casino {
    color: #fff;
    background: #1a73e8;
    box-shadow: 0 2px 10px rgba(26,115,232,0.4);
}

.sb-tab.active-casino:hover {
    background: #2d82f5;
    color: #fff;
}

.sb-tab.active-spor {
    color: #fff;
    background: #e8621a;
    box-shadow: 0 2px 10px rgba(232,98,26,0.4);
}

.sb-tab.active-spor:hover {
    background: #f5722d;
    color: #fff;
}

/* ── Spin wheel ── */
.sb-spin-wheel {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(154,164,176, 0.25);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.sb-spin-wheel:hover {
    border-color: #c9a97d;
    transform: scale(1.05);
}

.sb-spin-wheel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Sidebar Overlay ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 1199;
}

.sidebar-overlay.active {
    display: block;
}

/* ═══════════════════════════════════════
   TOP HEADER BAR
═══════════════════════════════════════ */
.top-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--top-bar-h);
    background: rgba(10, 10, 10, 0.99);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    /* backdrop-filter kaldırıldı: iOS'ta klavye açılınca fixed element
       tekrar render edilir. blur varsa bu çok daha ağır olur. */
    z-index: 1150;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 0;
    gap: 12px;
}

body.has-ticker .top-header-bar {
    top: var(--ticker-h, 32px) !important;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Hamburger — sadece mobil */
.sidebar-toggle-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.7);
    border-radius: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: color 0.2s;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
}

.sidebar-toggle-btn:hover {
    background: transparent;
    color: #fff;
}

/* Mobil logo */
.top-bar-mobile-logo {
    display: none;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
}

.top-bar-mobile-logo .sb-logo-img { height: 52px; vertical-align: middle; }
.top-bar-mobile-logo .sb-brand-text { font-size: 18px; }

/* ═══════════════════════════════════════
   MAIN CONTENT + FOOTER OFFSET
═══════════════════════════════════════ */
.main-content {
    margin-left: var(--sb-width) !important;
    padding-top: var(--top-bar-h) !important;
    min-height: 100vh;
}

.footer {
    margin-left: var(--sb-width) !important;
}

/* footer.php'deki gerçek <footer> etiketi ".footer" değil ".nft-footer"
   sınıfını taşıyor — üstteki kural hiç uygulanmıyordu, footer sidebar'ın
   sağına değil, body'nin TAMAMINA göre ortalanıyordu (viewport genişliğine
   göre sidebar'a farklı mesafelerde/örtüşerek görünmesine yol açıyordu).
   .main-content ile birebir aynı ofseti burada doğrudan .nft-footer'a
   veriyoruz. */
.nft-footer {
    margin-left: var(--sb-width) !important;
}

.social-sidebar {
    left: var(--sb-width) !important;
}

body.has-ticker .main-content {
    padding-top: calc(var(--top-bar-h) + var(--ticker-h, 32px)) !important;
}

/* ═══════════════════════════════════════
   TICKER
═══════════════════════════════════════ */
#site-ticker-bar {
    z-index: 1300 !important;
}

:root { --ticker-h: 32px; }
@media (max-width: 768px) { :root { --ticker-h: 28px; } }

/* ═══════════════════════════════════════
   RESPONSIVE ≤ 1024px
═══════════════════════════════════════ */
@media (max-width: 1024px) {

    .casino-sidebar {
        top: 0 !important;
        height: 100vh !important;
        transform: translateX(calc(-1 * var(--sb-width)));
        box-shadow: none;
        /* sb-header içindeki logo alanı kendi header görevi görür */
        background: var(--sb-bg, #0a0a0a) !important;
        overflow: hidden;
        overflow-y: auto;
    }

    .casino-sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.9);
        overflow: hidden;
        overflow-y: auto;
    }

    body.has-ticker .casino-sidebar {
        top: 0 !important;
        height: 100vh !important;
    }

    /* sb-header: logo + sağ ikonlar */
    .sb-header {
        display: flex !important;
    }

    .sb-hdr-close   { display: flex; }
    .sidebar-toggle-btn  { display: flex; }
    .top-bar-mobile-logo { display: flex; }

    .top-header-bar {
        left: 0 !important;
        padding: 0 14px;
    }

    .main-content  { margin-left: 0 !important; }
    .footer        { margin-left: 0 !important; }
    .nft-footer    { margin-left: 0 !important; }
    .social-sidebar { display: none !important; }
}

@media (max-width: 768px) {
    :root { --top-bar-h: 54px; }
    .top-header-bar  { padding: 0 10px; gap: 6px; }
    .top-bar-left    { gap: 6px; }
    .top-bar-right   { gap: 6px; }
    .top-bar-mobile-logo .sb-logo-img { height: 50px; }
    .main-content    { padding-bottom: 68px !important; }
    .footer          { padding-bottom: 68px !important; }
    .nft-footer      { padding-bottom: 68px !important; }
}

@media (min-width: 1025px) {
    .mobile-bottom-nav { display: none !important; }
}

/* ═══════════════════════════════════════
   AUTH BUTTONS — top bar
═══════════════════════════════════════ */
.modern-auth-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Auth butonları — top bar'da normal görünsün */
.modern-auth-btn {
    /* navbar-redesign.css padding:0 !important kuralını geçersiz kılma;
       gerçek padding btn-content içinde */
}

/* Mobil: butonlar küçülsün ama metin görünsün */
@media (max-width: 768px) {
    .modern-auth-btn .btn-content {
        padding: 7px 12px !important;
        font-size: 12px !important;
        gap: 5px !important;
    }
    .modern-auth-btn .btn-icon {
        width: 13px !important;
        height: 13px !important;
    }
}

@media (max-width: 420px) {
    .modern-auth-btn .btn-content {
        padding: 7px 9px !important;
        font-size: 11.5px !important;
        gap: 4px !important;
    }
    /* Çok dar ekranlarda ikonları gizle, metni göster */
    .modern-auth-btn .btn-icon {
        display: none !important;
    }
}

/* User area */
.user-info-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-deposit-btn {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
}

@media (max-width: 580px) {
    .header-deposit-text { display: none !important; }
    .header-deposit-btn  { padding: 7px 11px !important; width: 36px; justify-content: center; }
}

.balance-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(201,169,125, 0.07);
    border: 1px solid rgba(201,169,125, 0.18);
    border-radius: 8px;
    padding: 5px 11px;
    color: #c9a97d;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    white-space: nowrap;
}

.balance-badge i { font-size: 12px; opacity: 0.8; }

@media (max-width: 768px) {
    .balance-badge { display: none !important; }
}

/* User dropdown */
.user-menu-wrapper { position: relative; }

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    z-index: 2000;
}

/* ═══════════════════════════════════════
   PAGE HERO BANNER FIX
   Sayfalar eski navbar için margin-top: -85px kullanıyordu.
   Yeni top-bar 62px → margin-top değerini senkronize et.
   
   Etkilenen sayfalar:
   deposit.php     → .dp-hero
   live-casino.php → .lcp-page
   loss-bonus.php  → .lb-hero
   messages.php    → .msg-page
   profile.php     → .prf-page
   promotions.php  → .prp-page
   slots.php       → .sp-page
   withdrawal.php  → .wd-hero
═══════════════════════════════════════ */

.dp-hero,
.mb-hero,
.lcp-page,
.lb-hero,
.msg-page,
.prf-page,
.prp-page,
.sp-page,
.wd-hero {
    margin-top: calc(-1 * var(--top-bar-h)) !important;
    padding-top: 0 !important;
}

/* Ticker aktifken ekstra offset ekle */
body.has-ticker .dp-hero,
body.has-ticker .mb-hero,
.mb-hero,
body.has-ticker .lcp-page,
body.has-ticker .lb-hero,
body.has-ticker .msg-page,
body.has-ticker .prf-page,
body.has-ticker .prp-page,
body.has-ticker .sp-page,
body.has-ticker .wd-hero {
    margin-top: calc(-1 * (var(--top-bar-h) + var(--ticker-h, 32px))) !important;
    padding-top: var(--ticker-h, 32px) !important;
}

/* Mobile: sidebar yok, margin-top ayarla */
@media (max-width: 1024px) {
    .dp-hero,
.mb-hero,
    .lcp-page,
    .lb-hero,
    .msg-page,
    .prf-page,
    .prp-page,
    .sp-page,
    .wd-hero {
        margin-top: calc(-1 * var(--top-bar-h)) !important;
    }
}

/* lb-hero özel: hero-inner top padding'ini top-bar yüksekliğini karşılasın */
/* Tüm hero-inner'lar için top-bar yüksekliğini padding'e ekle */
.dp-hero .dp-hero-inner,
.wd-hero .wd-hero-inner,
.lb-hero .lb-hero-inner {
    padding-top: calc(var(--top-bar-h, 62px) + 16px) !important;
}

@media (max-width: 768px) {
    .dp-hero .dp-hero-inner,
    .wd-hero .wd-hero-inner,
    .lb-hero .lb-hero-inner {
        padding-top: calc(var(--top-bar-h, 54px) + 14px) !important;
    }
}



/* ═══════════════════════════════════════════════════════
   SPORTSBOOK — TAMAMEN KAPALI SIDEBAR
   Sadece 10px altın trigger şeridi görünür.
   Mouse üzerine gelince tam sidebar açılır → overlay.
   Logo top-header-bar'da gösterilir.
═══════════════════════════════════════════════════════ */

/* ── Sidebar tamamen gizlenir, sadece 10px sağ kenar görünür ── */
body[data-page="sportsbook.php"] .casino-sidebar {
    transform: translateX(calc(-100% + 10px));
    box-shadow: none;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.26s ease;
}

/* Görünür trigger şeridi — altın border */
body[data-page="sportsbook.php"] .casino-sidebar::before {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(154,164,176, 0.45) 30%,
        rgba(154,164,176, 0.55) 50%,
        rgba(154,164,176, 0.45) 70%,
        transparent 100%
    );
    border-radius: 2px;
    transition: opacity 0.2s ease;
}

body[data-page="sportsbook.php"] .casino-sidebar:hover::before {
    opacity: 0;
}

/* ── Hover: tam sidebar açılır ve içeriği overlay'ler ── */
body[data-page="sportsbook.php"] .casino-sidebar:hover {
    transform: translateX(0);
    box-shadow: 10px 0 50px rgba(0, 0, 0, 0.92);
    overflow: visible;
}

/* ── Content tam genişliği alır ── */
body[data-page="sportsbook.php"] .main-content {
    margin-left: 0 !important;
}

body[data-page="sportsbook.php"] .footer {
    margin-left: 0 !important;
}

body[data-page="sportsbook.php"] .top-header-bar {
    left: 0 !important;
}

/* ── Sportsbook: desktop'ta header-logo-block görünsün, mobile logo gizlensin ── */
@media (min-width: 1025px) {
    body[data-page="sportsbook.php"] .top-bar-mobile-logo {
        display: none !important;
    }
}

/* ── Mobil: top-bar-mobile-logo görünsün ── */
@media (max-width: 1024px) {
    body[data-page="sportsbook.php"] .top-bar-mobile-logo {
        display: flex !important;
    }
}

/* ── Kapalıyken sidebar içeriği görünmesin ── */
body[data-page="sportsbook.php"] .casino-sidebar:not(:hover) .sb-nav,
body[data-page="sportsbook.php"] .casino-sidebar:not(:hover) .sb-header {
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

/* ── Açılınca içerik fade-in gelsin ── */
body[data-page="sportsbook.php"] .casino-sidebar:hover .sb-nav,
body[data-page="sportsbook.php"] .casino-sidebar:hover .sb-header {
    opacity: 1;
    transition: opacity 0.18s ease 0.1s;
    pointer-events: auto;
}

/* ── Mobil: normal davranış ── */
@media (max-width: 1024px) {
    body[data-page="sportsbook.php"] .casino-sidebar {
        transform: translateX(calc(-1 * var(--sb-width)));
    }
    body[data-page="sportsbook.php"] .casino-sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.9);
    }
    body[data-page="sportsbook.php"] .casino-sidebar::before {
        display: none;
    }
    body[data-page="sportsbook.php"] .top-bar-mobile-logo {
        display: flex !important;
    }
    /* Mobilde hover mantigi calismaz — opacity sifirla */
    body[data-page="sportsbook.php"] .casino-sidebar .sb-nav,
    body[data-page="sportsbook.php"] .casino-sidebar .sb-header {
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: none !important;
    }
}


/* ── OgTpigTHKbfo.css ──────────────────────────────────────── */
/* =====================================================
   BACKGROUND OVERRIDE — Dark & Silver zemin
   ===================================================== */

:root {
    --bg-primary:   var(--page-background, #080808) !important;
    --bg-secondary: #0f0f0f !important;
    --bg-tertiary:  #141414 !important;
    --bg-card:      var(--card-background, rgba(14, 14, 14, 0.95)) !important;
    --glass-bg:     rgba(18, 18, 18, 0.8) !important;
}

html { background: var(--page-background, #080808) !important; }

body {
    background-color: var(--page-background, #080808) !important;
    background-image: var(--site-bg-image, url('/assets/images/anasayfa.webp')) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Radial glow'ları kapat, üzerine koyu overlay koy */
body::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.72) !important;
}

/* body::after tamamen kapat */
body::after {
    display: none !important;
    content: none !important;
}

/* Navbar scrolled glow kaldır */
.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.9) !important;
}

/* ── AUTH BUTTONS — tüm parlama/glow efektlerini kapat ── */
.modern-auth-btn,
.modern-auth-btn:hover,
.modern-auth-btn:focus,
.modern-auth-btn:active {
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    text-shadow: none !important;
}

.modern-auth-btn::before,
.modern-auth-btn::after {
    display: none !important;
    content: none !important;
}

.modern-auth-btn-register {
    background: #c9a97d !important;
    border: 1px solid #c9a97d !important;
    color: #000 !important;
    opacity: 1 !important;
}
.modern-auth-btn-register:hover {
    background: #ECC900 !important;
    border-color: #ECC900 !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.modern-auth-btn-register .btn-content,
.modern-auth-btn-register .btn-text { color: #000 !important; }

.modern-auth-btn-login {
    background: transparent !important;
    border: 1px solid rgba(154,164,176,0.4) !important;
    color: #C8A84B !important;
    box-shadow: none !important;
}
.modern-auth-btn-login:hover {
    background: rgba(154,164,176,0.08) !important;
    border-color: rgba(154,164,176,0.65) !important;
    color: #c9a97d !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.modern-auth-btn-login .btn-content,
.modern-auth-btn-login .btn-text { color: inherit !important; }
/* ── PROMO BANNER — tüm arkaplan/glow/border kaldır ── */
.promo-banner-item,
.promo-banner-item:hover,
.promo-banner-item:active {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

.promo-banner-item::before,
.promo-banner-item::after,
.promo-banner-item:hover::before,
.promo-banner-item:hover::after,
.promo-banner-item:active::before,
.promo-banner-item:active::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

.promo-banner-link,
.promo-banner-link:hover {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.promo-banner-link::before,
.promo-banner-link::after {
    display: none !important;
    content: none !important;
}

/* ── SOCIAL MEDIA SIDEBAR ── */
.social-sidebar {
    position: fixed;
    right: 0 !important;
    left: auto !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    overflow: visible;
}

.social-sidebar-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 44px;
    border-radius: 8px 0 0 8px;
    background: rgba(10, 8, 0, 0.88);
    border: 1px solid rgba(154,164,176, 0.2);
    border-right: none;
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: background 0.25s ease, border-color 0.25s ease;
    /* Icon her zaman görünür */
    min-width: 44px;
}

/* Label — icon'un sağında açılır */
.social-sidebar-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    transition: max-width 0.35s cubic-bezier(0.4,0,0.2,1),
                opacity 0.2s ease,
                padding-right 0.35s ease;
}

.social-sidebar-item:hover .social-sidebar-label {
    max-width: 110px;
    opacity: 1;
    padding-right: 14px;
}

/* Icon — ortada sabit */
.social-sidebar-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #9aa4b0;
    transition: color 0.2s ease;
    flex-shrink: 0;
    margin-left: 0;
}

/* Renk temaları */
.social-instagram:hover { background: rgba(193, 53, 132, 0.25); border-color: rgba(193, 53, 132, 0.5); }
.social-instagram:hover .social-sidebar-icon { color: #E1306C; }

.social-telegram:hover { background: rgba(0, 136, 204, 0.25); border-color: rgba(0, 136, 204, 0.5); }
.social-telegram:hover .social-sidebar-icon { color: #29B6F6; }

.social-youtube:hover { background: rgba(255, 0, 0, 0.2); border-color: rgba(255, 0, 0, 0.4); }
.social-youtube:hover .social-sidebar-icon { color: #FF0000; }

.social-whatsapp:hover { background: rgba(37, 211, 102, 0.2); border-color: rgba(37, 211, 102, 0.4); }
.social-whatsapp:hover .social-sidebar-icon { color: #25D366; }

@media (max-width: 768px) {
    .social-sidebar { display: none !important; }
}


/* ── K9enq522wjZR.css ──────────────────────────────────────── */
/* ================================================================
   DARK & SILVER THEME v4.0 — Profesyonel Kurumsal
   
   Palet:
     Arka plan : var(--surface-elevated, #06070a) (koyu antrasit)
     Surface   : var(--surface, #0d0f13)
     Elevated  : #15171c
     Hover     : #1f2228
     Aksan     : var(--primary, #ac895e) (gümüş) — sadece CTA & öne çıkan öğeler
     Platin    : #9aa4b0 (küçük detaylar: VIP, divider vb.)
     Text-1    : var(--text-primary, #e7e9ec) (açık gri)
     Text-2    : #9aa1ab (orta gri)
     Text-3    : #5b626c (koyu gri)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── DEĞIŞKENLER ── */
:root {
    /* Zeminler */
    --st-bg:       var(--surface-elevated, #06070a);
    --st-surface:  var(--surface, #0d0f13);
    --st-elevated: #15171c;
    --st-hover:    #1f2228;

    /* Aksan — gümüş metalik ton */
    --st-green:     var(--primary, #ac895e);
    --st-green-dim: rgba(var(--primary-rgb, 172, 137, 94),0.10);
    --st-green-brd: rgba(var(--primary-rgb, 172, 137, 94),0.28);
    --st-green-hi:  #c9a97d;

    /* Gümüş metal buton dolgusu */
    --st-silver-btn:       linear-gradient(180deg, #c9a97d 0%, var(--primary, #ac895e) 55%, #8a6a45 100%);
    --st-silver-btn-hover: linear-gradient(180deg, #d9bd98 0%, #c9a97d 55%, var(--primary, #ac895e) 100%);


    /* Platin — sadece küçük dekor detaylar (VIP, divider) */
    --st-gold:     #9aa4b0;
    --st-gold-dim: rgba(154,164,176,0.12);
    --st-gold-brd: rgba(154,164,176,0.28);

    /* Metin */
    --st-text-1: var(--text-primary, #e7e9ec);
    --st-text-2: #9aa1ab;
    --st-text-3: #5b626c;

    /* Border */
    --st-brd:    rgba(255,255,255,0.06);
    --st-brd-md: rgba(255,255,255,0.10);
    --st-brd-hi: rgba(255,255,255,0.17);
}

/* ================================================================
   BODY
   ================================================================ */
html { background: var(--st-bg) !important; }
body {
    background-color: var(--st-bg) !important;
    background-image: none !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: var(--st-text-1) !important;
}
body::before { background: none !important; animation: none !important; }
body::after  { display: none !important; content: none !important; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.casino-sidebar, aside.casino-sidebar {
    background: var(--st-bg) !important;
    border-right: 1px solid var(--st-brd) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
}

/* Sol yeşil şerit */
.casino-sidebar::before {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--primary-rgb, 172, 137, 94),0.4) 30%,
        rgba(var(--primary-rgb, 172, 137, 94),0.4) 70%,
        transparent 100%) !important;
}

/* Logo satırı */
.sb-header, .sb-logo-row {
    background: #0a0a0a !important;
    border-bottom: 1px solid var(--st-brd) !important;
}

.sb-brand-text, .sb-logo-text {
    background: linear-gradient(135deg, var(--text-primary, #e7e9ec) 0%, #7a96a8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.sb-logo-img { filter: none !important; }

/* Section başlıkları */
.sb-section-title, .sb-section {
    color: var(--st-text-3) !important;
    letter-spacing: 0.12em !important;
}
.sb-section::after { background: var(--st-brd) !important; }

/* Divider — ince gold çizgi */
.sb-divider {
    background: linear-gradient(90deg,
        transparent,
        var(--st-gold-dim) 30%,
        var(--st-gold-dim) 70%,
        transparent) !important;
}

/* Nav öğeleri */
.sb-item, .sb-link {
    color: var(--st-text-2) !important;
    border-radius: 6px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    gap: 8px !important;
}
.sb-item:hover, .sb-link:hover {
    background: var(--st-elevated) !important;
    color: var(--st-text-1) !important;
}
.sb-item.active, .sb-link.active {
    background: var(--st-green-dim) !important;
    color: var(--st-green) !important;
}
.sb-link.active::before {
    background: linear-gradient(180deg, var(--st-green), rgba(var(--primary-rgb, 172, 137, 94),0.5)) !important;
}

/* Nav ikonları */
.sb-icon, .sb-item i, .sb-link i { color: var(--st-text-2) !important; }
.sb-item.active .sb-icon, .sb-item.active i,
.sb-link.active .sb-icon, .sb-link.active i { color: var(--st-green) !important; }

/* Toggle butonu */
.sb-toggle {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
}
.sb-toggle:hover { background: var(--st-hover) !important; color: var(--st-text-1) !important; }

/* Extras (Çark, VIP kısayol) */
.sb-extras { border-bottom: 1px solid var(--st-brd) !important; }
.sb-extra-btn {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
}
.sb-extra-btn:hover {
    background: var(--st-hover) !important;
    border-color: var(--st-brd-hi) !important;
    color: var(--st-text-1) !important;
}

/* ── BADGE'LER ── */

/* CANLI — kırmızı (doğru) */
.sb-badge-live {
    background: rgba(239,68,68,0.12) !important;
    border: 1px solid rgba(239,68,68,0.32) !important;
    color: #ff5c5c !important;
}

/* VIP — gold (kurumsal lüks) */
.sb-badge-new {
    background: var(--st-gold-dim) !important;
    border: 1px solid var(--st-gold-brd) !important;
    color: var(--st-gold) !important;
}

/* Promosyon butonu */
.sb-promo-btn {
    background: var(--st-green-dim) !important;
    border: 1px solid var(--st-green-brd) !important;
    color: var(--st-green) !important;
    font-weight: 700 !important;
}
.sb-promo-btn:hover {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.16) !important;
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.45) !important;
}

/* Footer (logout vb.) */
.sb-footer { border-top: 1px solid var(--st-brd) !important; }

/* ================================================================
   TOP HEADER BAR
   ================================================================ */
.top-header-bar {
    background: var(--header-background, rgba(6,7,10,0.97)) !important;
    border-bottom: 1px solid var(--st-brd) !important;
    box-shadow: 0 1px 0 rgba(var(--primary-rgb, 172, 137, 94),0.03), 0 4px 24px rgba(0,0,0,0.5) !important;
}

.sidebar-toggle-btn {
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,0.7) !important;
}
.sidebar-toggle-btn:hover {
    background: transparent !important;
    color: #fff !important;
}

/* ================================================================
   GİRİŞ YAP & KAYIT OL — Stake 1:1
   ================================================================ */
.modern-auth-buttons { display: flex !important; align-items: center !important; gap: 8px !important; }

.modern-auth-btn {
    position: relative !important;
    height: 36px !important;
    padding: 0 18px !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    transition: background 0.15s, border-color 0.15s !important;
    filter: none !important;
    box-shadow: none !important;
}
.modern-auth-btn::before, .modern-auth-btn::after { display: none !important; content: none !important; }

/* GİRİŞ YAP — şeffaf */
.modern-auth-btn-login {
    background: var(--button-secondary-bg, rgba(255,255,255,0.07)) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: var(--button-secondary-text, var(--st-text-1)) !important;
}
.modern-auth-btn-login:hover {
    background: rgba(255,255,255,0.13) !important;
    border-color: rgba(255,255,255,0.26) !important;
    color: #fff !important;
    transform: none !important;
}
.modern-auth-btn-login .btn-content,
.modern-auth-btn-login .btn-text { color: var(--st-text-1) !important; }
.modern-auth-btn-login .btn-icon,
.modern-auth-btn-login .btn-icon * { stroke: var(--st-text-1) !important; }

/* KAYIT OL — gümüş */
.modern-auth-btn-register {
    background: var(--button-primary-bg, var(--st-silver-btn)) !important;
    border: 1px solid var(--st-green) !important;
    color: var(--button-primary-text, #101114) !important;
}
.modern-auth-btn-register:hover {
    background: var(--st-silver-btn-hover) !important;
    border-color: var(--st-green-hi) !important;
    color: #101114 !important;
    transform: none !important;
    filter: none !important;
}
.modern-auth-btn-register .btn-content,
.modern-auth-btn-register .btn-text { color: #101114 !important; }
.modern-auth-btn-register .btn-icon,
.modern-auth-btn-register .btn-icon * { stroke: #101114 !important; }

/* Game modal auth */
.game-auth-btn-login {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: var(--st-text-1) !important;
}
.game-auth-btn-login:hover { background: rgba(255,255,255,0.13) !important; color: #fff !important; }

.game-auth-btn-register {
    background: var(--st-silver-btn) !important;
    border: 1px solid var(--st-green) !important;
    color: #101114 !important;
}
.game-auth-btn-register:hover {
    background: var(--st-silver-btn-hover) !important;
    color: #101114 !important;
}

/* ================================================================
   PARA YATIR — yeşil CTA
   ================================================================ */
a.header-deposit-btn,
button.header-deposit-btn,
.header-deposit-btn,
.top-bar-right .header-deposit-btn,
.top-bar-right a[href="/deposit"] {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
}
a.header-deposit-btn:hover, .header-deposit-btn:hover {
    background: var(--st-silver-btn-hover) !important;
    color: #101114 !important;
    transform: none !important;
    filter: none !important;
}
.header-deposit-btn::before, .header-deposit-btn::after { display: none !important; content: none !important; }
.header-deposit-icon, .header-deposit-text { color: #101114 !important; }

/* ================================================================
   BALANCE BADGE
   ================================================================ */
.balance-badge {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-1) !important;
    box-shadow: none !important;
    animation: none !important;
    overflow: visible !important;
}
.balance-badge::before { display: none !important; content: none !important; }
.balance-badge:hover { background: var(--st-hover) !important; border-color: var(--st-brd-hi) !important; transform: none !important; }
.balance-badge i { color: var(--st-green) !important; filter: none !important; }

/* ================================================================
   KULLANICI DROPDOWN
   ================================================================ */
.user-avatar-compact {
    background: var(--st-elevated) !important;
    border: 2px solid var(--st-brd-md) !important;
    box-shadow: none !important;
}
.user-avatar-compact i { color: var(--st-text-2) !important; filter: none !important; }
.user-avatar-compact:hover { border-color: rgba(var(--primary-rgb, 172, 137, 94),0.3) !important; box-shadow: 0 0 12px rgba(var(--primary-rgb, 172, 137, 94),0.1) !important; }

.user-dropdown-menu {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-brd-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.65) !important;
    border-radius: 10px !important;
}
.dropdown-header {
    background: var(--st-elevated) !important;
    border-bottom: 1px solid var(--st-brd) !important;
    border-radius: 10px 10px 0 0 !important;
}
.dropdown-header::before { display: none !important; }
.dropdown-avatar {
    background: var(--st-hover) !important;
    border: 2px solid var(--st-green-brd) !important;
    color: var(--st-green) !important;
    font-weight: 700;
    box-shadow: none !important;
}
.dropdown-user-details strong { color: var(--st-text-1) !important; text-shadow: none !important; }
.dropdown-balance { color: var(--st-green) !important; }
.dropdown-item { color: var(--st-text-2) !important; }
.dropdown-item:hover { background: var(--st-elevated) !important; color: var(--st-text-1) !important; }
.dropdown-item i { color: var(--st-text-3) !important; }
.dropdown-item:hover i { color: var(--st-green) !important; }

/* ================================================================
   KAZANÇ DAİRELERİ
   ================================================================ */
.bw-circle {
    background: linear-gradient(145deg,
        rgba(var(--primary-rgb, 172, 137, 94),0.75) 0%,
        rgba(140,148,158,0.6) 40%,
        rgba(90,96,104,0.7) 70%,
        rgba(var(--primary-rgb, 172, 137, 94),0.7) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.7),
        0 4px 16px rgba(0,0,0,0.6),
        0 0 14px rgba(var(--primary-rgb, 172, 137, 94),0.12) !important;
}
.bw-item:hover .bw-circle {
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.7),
        0 6px 22px rgba(0,0,0,0.75),
        0 0 22px rgba(var(--primary-rgb, 172, 137, 94),0.3) !important;
}
.bw-item.viewed .bw-circle {
    background: linear-gradient(145deg, #1a1c20, #131417, #1a1c20) !important;
    opacity: 0.5 !important;
}
.bw-mult { color: var(--st-green) !important; text-shadow: 0 1px 6px rgba(var(--primary-rgb, 172, 137, 94),0.3) !important; }
.bw-mult.viewed { color: var(--st-text-3) !important; text-shadow: none !important; }

/* Bigwin modal */
.bigwin-modal {
    background: var(--st-surface) !important;
    border: 1px solid var(--st-brd-md) !important;
    box-shadow: 0 40px 100px rgba(0,0,0,0.92) !important;
}
.bigwin-modal-close {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
}
.bigwin-modal-close:hover { background: var(--st-hover) !important; color: var(--st-text-1) !important; }
.bigwin-iframe-loader { background: var(--st-surface) !important; color: var(--st-text-3) !important; }
.bw-spinner { border: 2.5px solid rgba(var(--primary-rgb, 172, 137, 94),0.08) !important; border-top-color: var(--st-green) !important; }

/* ================================================================
   BÖLÜM BAŞLIKLARI
   ================================================================ */
.section-title,
h2.section-title,
[class*="section"] h2,
#feSection h2 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--st-text-1) !important;
    background-clip: unset !important;
    color: var(--st-text-1) !important;
    font-weight: 700 !important;
}
.section-title svg, h2.section-title svg {
    stroke: var(--st-green) !important;
    fill: var(--st-green) !important;
    opacity: 0.85 !important;
}
.section-subtitle, p.section-subtitle { color: var(--st-text-2) !important; }
.section-header-center, #feSection .section-header-center {
    border-bottom: 1px solid var(--st-brd) !important;
}

/* ================================================================
   ÖNE ÇIKAN ETKİNLİKLER
   ================================================================ */
.fe-tab {
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
    background: transparent !important;
}
.fe-tab:hover { border-color: rgba(var(--primary-rgb, 172, 137, 94),0.25) !important; color: var(--st-text-1) !important; background: rgba(var(--primary-rgb, 172, 137, 94),0.05) !important; }
.fe-tab.active { background: rgba(var(--primary-rgb, 172, 137, 94),0.08) !important; border-color: rgba(var(--primary-rgb, 172, 137, 94),0.3) !important; color: #fff !important; }

.fe-card {
    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        var(--card-bg-image, url('/assets/images/anasayfa.webp')) !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid var(--st-brd) !important;
}
.fe-card:hover {
    background:
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        var(--card-bg-image, url('/assets/images/anasayfa.webp')) !important;
    background-size: cover !important;
    background-position: center !important;
    border-color: var(--st-brd-md) !important;
}
.fe-card-top, .fe-card-odds { background: rgba(6,7,10,0.7) !important; }
.fe-card-top { border-bottom: 1px solid var(--st-brd) !important; }
.fe-card-odds { border-top: 1px solid var(--st-brd) !important; }
.fe-odd-btn { border-right: 1px solid var(--st-brd) !important; }
.fe-odd-btn:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.05) !important; }
.fe-c-live { background: var(--st-silver-btn) !important; color: #101114 !important; font-weight: 800 !important; }
.fe-vs-minute { color: var(--st-green) !important; }
.fe-odd-val { color: var(--st-green) !important; }
.fe-odd-btn:hover .fe-odd-val { color: #fff !important; }

/* ================================================================
   TÜMÜNÜ GÖR BUTONLARI — sade, Stake uyumlu
   ================================================================ */
.btn-view-all {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 9px 26px !important;
    transition: all .18s !important;
    letter-spacing: 0 !important;
}
.btn-view-all:hover {
    background: var(--st-hover) !important;
    border-color: var(--st-brd-hi) !important;
    color: var(--st-text-1) !important;
}
.btn-view-all i { color: var(--st-text-2) !important; }

.fe-all-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 7px 18px !important;
    border-radius: 20px !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
    transition: all .18s !important;
}
.fe-all-link:hover {
    border-color: var(--st-brd-hi) !important;
    color: var(--st-text-1) !important;
    background: var(--st-elevated) !important;
}

.view-all-center a, .view-all-center .btn-view-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 28px !important;
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all .18s !important;
}
.view-all-center a:hover, .view-all-center .btn-view-all:hover {
    background: var(--st-hover) !important;
    border-color: var(--st-brd-hi) !important;
    color: var(--st-text-1) !important;
}

/* ================================================================
   ARAMA & PROVIDER TABLAR
   ================================================================ */
.sp-search-input, .lcp-search-input, input[type="search"] {
    background: var(--st-elevated) !important;
    border-color: var(--st-brd-md) !important;
    color: var(--st-text-1) !important;
}
.sp-search-input:focus, .lcp-search-input:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.3) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.06) !important;
}
.sp-search-ico, .lcp-search-ico { color: var(--st-text-3) !important; }
.sp-search:focus-within .sp-search-ico,
.lcp-search:focus-within .lcp-search-ico { color: var(--st-green) !important; }

.sp-tab, .lcp-tab { background: var(--st-elevated) !important; border: 1px solid var(--st-brd) !important; color: var(--st-text-2) !important; }
.sp-tab:hover, .lcp-tab:hover { background: var(--st-hover) !important; color: var(--st-text-1) !important; }
.sp-tab.active, .lcp-tab.active { background: rgba(var(--primary-rgb, 172, 137, 94),0.07) !important; border-color: rgba(var(--primary-rgb, 172, 137, 94),0.28) !important; color: var(--st-green) !important; }

.sp-arrow, .lcp-arrow { background: var(--st-elevated) !important; border-color: var(--st-brd-md) !important; color: var(--st-text-2) !important; }
.sp-arrow:hover, .lcp-arrow:hover { background: var(--st-hover) !important; color: var(--st-text-1) !important; }

/* ================================================================
   OYUN MODAL
   ================================================================ */
.game-modal {
    background: var(--surface, #0d0f13) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6) !important;
}
.game-modal::before {
    background: var(--primary, #ac895e) !important;
}
.game-modal-header { background: rgba(0,0,0,0.12) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.game-modal-image { border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.2) !important; }
.game-modal-info h2 { color: var(--text-primary, #e7e9ec) !important; }
.game-modal-provider { color: rgba(var(--primary-rgb, 172, 137, 94),0.8) !important; }

/* Kapatma butonu — am-close ile aynı */
.game-modal-close {
    background: none !important; border: none !important;
    color: #5b626c !important; font-size: 18px !important;
    box-shadow: none !important; transform: none !important;
    border-radius: 0 !important; padding: 0 !important;
    width: auto !important; height: auto !important;
}
.game-modal-close:hover { background: none !important; color: var(--text-primary, #e7e9ec) !important; border-color: transparent !important; }

/* Gerçek Para ile Oyna */
.btn-play-real {
    background: var(--primary, #ac895e) !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--surface-elevated, #06070a) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb, 172, 137, 94),0.22) !important;
}
.btn-play-real::before { display: none !important; }
.btn-play-real:hover { background: #c9a97d !important; box-shadow: 0 8px 28px rgba(var(--primary-rgb, 172, 137, 94),0.32) !important; color: var(--surface-elevated, #06070a) !important; }
.btn-play-real i { color: var(--surface-elevated, #06070a) !important; }

/* Demo Oyna */
.btn-play-fun {
    background: var(--surface-elevated, #06070a) !important;
    border-color: var(--border, rgba(255,255,255,0.08)) !important;
    color: #9aa1ab !important;
    box-shadow: none !important;
}
.btn-play-fun:hover { background: #152230 !important; border-color: rgba(var(--primary-rgb, 172, 137, 94),0.2) !important; color: var(--text-primary, #e7e9ec) !important; }
.btn-play-fun i { color: rgba(var(--primary-rgb, 172, 137, 94),0.5) !important; }
.btn-play-fun:hover i { color: var(--primary, #ac895e) !important; }
.btn-play-fun::before { display: none !important; }

/* Kilit ikonu */
.lock-icon-wrapper {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.06) !important;
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.18) !important;
    border-radius: 50% !important;
}
.lock-icon { color: rgba(var(--primary-rgb, 172, 137, 94),0.7) !important; stroke: rgba(var(--primary-rgb, 172, 137, 94),0.7) !important; }

/* Modal butonları */
.am-btn { background: var(--st-silver-btn) !important; border: none !important; color: #101114 !important; font-weight: 700 !important; }
.am-btn:hover { background: var(--st-silver-btn-hover) !important; }
.am-input { background: var(--input-background, var(--st-elevated, #15171c)) !important; border: 1px solid var(--st-brd-md) !important; color: var(--st-text-1) !important; }
.am-input:focus { border-color: rgba(var(--primary-rgb, 172, 137, 94),0.3) !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.06) !important; }

/* ================================================================
   FOOTER — Yeniden tasarım
   ================================================================ */
footer, .footer {
    background: var(--st-bg) !important;
    border-top: 1px solid var(--st-brd) !important;
}

/* Footer üst banner */
.footer-header {
    background: var(--st-surface) !important;
    border-bottom: 1px solid var(--st-brd) !important;
}
.footer-header-title {
    background: none !important;
    -webkit-text-fill-color: var(--st-text-1) !important;
    background-clip: unset !important;
    color: var(--st-text-1) !important;
    font-weight: 700 !important;
}
.footer-header-subtitle { color: var(--st-text-2) !important; }

/* Footer main */
.footer-main { background: var(--st-bg) !important; }

/* Label (EMAİL) */
.footer-contact .footer-label {
    color: var(--st-text-3) !important;
    font-size: 10px !important;
    letter-spacing: 1.8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Email */
.footer-contact .footer-email { color: var(--st-text-1) !important; text-shadow: none !important; }
.footer-contact .footer-email:hover { color: var(--st-green) !important; text-shadow: none !important; transform: none !important; }

/* Menü başlıkları (OYUNLAR, HESAP, DESTEK) */
.footer-menu-title, h4.footer-menu-title {
    background: none !important;
    -webkit-text-fill-color: unset !important;
    color: var(--st-text-3) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
}

/* Menü linkleri */
.footer-menu a, .footer-menu li a {
    color: var(--st-text-2) !important;
    font-size: 14px !important;
    transition: color 0.15s !important;
}
.footer-menu a:hover, .footer-menu li a:hover {
    color: var(--st-text-1) !important;
    transform: none !important;
}

/* Lisans */
.footer-license { border-top: 1px solid var(--st-brd) !important; }
.footer-license p, .footer-license-mobile { color: var(--st-text-3) !important; }

/* Sosyal ikonlar */
.social-icon {
    border-radius: 8px !important;
    box-shadow: none !important;
}
.social-icon:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important; }

/* ── ÖDEME LOGOLARI — tema renginde, gold değil ── */
.footer-payments {
    background: rgba(6,7,10,0.6) !important;
    border-top: 1px solid var(--st-brd) !important;
    padding: 32px 0 !important;
}

/* Gold filter tamamen kaldır, beyaz-gri yap */
.payment-row img,
.footer-payments .payment-row img {
    height: 26px !important;
    width: auto !important;
    opacity: 0.35 !important;
    filter: brightness(0) invert(1) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    transform: scale(1) !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}
.payment-row img:hover,
.footer-payments .payment-row img:hover {
    opacity: 0.75 !important;
    filter: brightness(0) invert(1) !important;
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: none !important;
}

/* Mobil payment */
@media (max-width: 768px) {
    .footer-payments .payment-row img { height: 22px !important; }
}
@media (max-width: 480px) {
    .footer-payments .payment-row img { height: 18px !important; }
}

/* elexbet-colors override */
footer { border-top: 1px solid var(--st-brd) !important; }

/* ================================================================
   TICKER
   ================================================================ */
.ticker-icon-wrap { color: var(--st-text-2) !important; background: rgba(var(--primary-rgb, 172, 137, 94),0.04) !important; border-right: 1px solid var(--st-brd) !important; }
.ticker-close { background: rgba(255,255,255,0.03) !important; border-left: 1px solid var(--st-brd) !important; color: var(--st-text-3) !important; }
.ticker-close:hover { background: rgba(255,255,255,0.07) !important; color: var(--st-text-1) !important; }

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--st-bg); }
::-webkit-scrollbar-thumb { background: var(--st-brd-hi); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.3); }

/* ================================================================
   NAV LİNKLERİ
   ================================================================ */
.nav-link { color: var(--st-text-2) !important; }
.nav-link:hover { color: var(--st-text-1) !important; background: var(--st-elevated) !important; box-shadow: none !important; }
.nav-link.active { color: var(--st-green) !important; background: var(--st-green-dim) !important; box-shadow: none !important; }
.nav-link.active::after { background: linear-gradient(90deg, var(--st-green), rgba(var(--primary-rgb, 172, 137, 94),0.5)) !important; }
.nav-link i { color: var(--st-text-2) !important; }
.nav-link:hover i, .nav-link.active i { color: var(--st-green) !important; }

/* ================================================================
   ÇARK İFELEK / SPIN
   ================================================================ */
.spin-wheel-gif { border: 2px solid rgba(154,164,176,0.35) !important; }
.spin-wheel-btn:hover .spin-wheel-gif { border-color: var(--st-gold) !important; }

/* ================================================================
   SOSYAL SIDEBAR
   ================================================================ */
.social-sidebar-item { background: rgba(6,7,10,0.88) !important; border-color: var(--st-brd-md) !important; }
.social-sidebar-icon { color: var(--st-text-2) !important; }

/* ================================================================
   MOBİL NAV
   ================================================================ */
/* Mobile bottom nav — koyu, header ile uyumlu */
.mobile-bottom-nav {
    background: var(--mobile-navigation-background, rgba(6,7,10,0.98)) !important;
    border-top: 1px solid var(--st-brd) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
}
.mobile-bottom-nav .mobile-nav-item,
.mobile-bottom-nav a,
.mobile-bottom-nav button { color: var(--st-text-3) !important; }

.mobile-bottom-nav .mobile-nav-item:hover,
.mobile-bottom-nav a:hover,
.mobile-bottom-nav button:hover { color: var(--st-text-2) !important; background: rgba(255,255,255,0.04) !important; }

.mobile-bottom-nav .mobile-nav-item.active,
.mobile-bottom-nav a.active,
.mobile-bottom-nav button.active {
    color: var(--st-green) !important;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.06) !important;
}
.mobile-bottom-nav .mobile-nav-item i { color: inherit !important; }
.mobile-bottom-nav .mobile-nav-item span { color: inherit !important; }

/* ================================================================
   GENEL BUTONLAR
   ================================================================ */
.btn-primary { background: var(--st-silver-btn) !important; border-color: var(--st-green) !important; color: #101114 !important; }
.btn-primary:hover { background: var(--st-silver-btn-hover) !important; }
.btn-secondary { background: var(--st-elevated) !important; border: 1px solid var(--st-brd-md) !important; color: var(--st-text-1) !important; }
.btn-secondary:hover { background: var(--st-hover) !important; }
.btn-outline { border-color: rgba(var(--primary-rgb, 172, 137, 94),0.3) !important; color: var(--st-green) !important; }
.btn-outline:hover { background: var(--st-green-dim) !important; }

/* ================================================================
   MOBİL
   ================================================================ */
@media (max-width: 768px) {
    .modern-auth-btn { height: 33px !important; padding: 0 13px !important; font-size: 12px !important; }
}
@media (max-width: 480px) {
    .modern-auth-btn { height: 31px !important; padding: 0 10px !important; font-size: 11.5px !important; }
}

/* ================================================================
   DEPOSIT / WITHDRAWAL / LOSS-BONUS SAYFALARI
   gold-black-luxury-theme.css'in button[type=submit] ve
   elexbet-colors.css'in input focus gold override'larını ez
   ================================================================ */

/* Birincil aksiyon butonları (Devam Et, Talep Oluştur, vb.) */
.dp-btn-primary,
.dp-btn-green,
.wd-btn-primary,
.lb-claim-btn:not(:disabled) {
    background: var(--st-silver-btn) !important;
    border: none !important;
    border-color: transparent !important;
    color: #101114 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
}
.dp-btn-primary::after,
.dp-btn-green::after,
.wd-btn-primary::after {
    display: none !important;
    content: none !important;
}
.dp-btn-primary:hover,
.dp-btn-green:hover,
.wd-btn-primary:hover {
    background: var(--st-silver-btn-hover) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
.dp-btn-primary:disabled,
.wd-btn-primary:disabled {
    background: var(--border, rgba(255,255,255,0.08)) !important;
    color: rgba(255,255,255,0.25) !important;
    border: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Geri butonları */
.dp-btn-back,
.wd-btn-back {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: var(--st-text-1) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}
.dp-btn-back::after,
.wd-btn-back::after { display: none !important; content: none !important; }
.dp-btn-back:hover,
.wd-btn-back:hover {
    background: rgba(255,255,255,0.13) !important;
    border-color: rgba(255,255,255,0.26) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Genel button[type=submit] override — gold-black-luxury eziliyor */
button[type="submit"].dp-btn,
button[type="submit"].wd-btn,
button[type="submit"].lb-claim-btn,
button[type="submit"].wd-modal-save-btn,
button[type="submit"].wd-modal-del-btn {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}
button[type="submit"].dp-btn::after,
button[type="submit"].wd-btn::after { display: none !important; content: none !important; }

/* Input gold focus ezme */
.dp-amount-input:focus,
.wd-amount-input:focus,
.lb-date-input:focus,
.wd-modal input:focus,
.wd-modal select:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.30) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.06) !important;
}

/* Input normal border ezme */
.dp-amount-input,
.wd-amount-input {
    border: 2px solid rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.04) !important;
    box-shadow: none !important;
}

/* ================================================================
   TARİH INPUT GOLD BORDER EZMESİ
   elexbet-colors.css'in input:focus gold override'ını ezdik ama
   input (normal state) gold border hâlâ kalıyor — override:
   ================================================================ */
input[type="date"],
input[type="date"]:focus,
input[type="date"]:active {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--st-text-1, var(--text-primary, #e7e9ec)) !important;
    box-shadow: none !important;
    color-scheme: dark;
}
input[type="date"]:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.30) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 172, 137, 94),0.06) !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.6) !important;
    opacity: 0.5 !important;
    cursor: pointer;
}
/* lb-date-input özel class - daha spesifik override */
.lb-date-input,
.lb-date-input:focus {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--st-text-1, var(--text-primary, #e7e9ec)) !important;
    box-shadow: none !important;
}
.lb-date-input:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.30) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 172, 137, 94),0.06) !important;
}

/* ================================================================
   PROFİL SAYFASI — gold-black-luxury button[type=submit] ezme
   ================================================================ */
.prf-btn-submit,
button.prf-btn-submit,
button[type="submit"].prf-btn-submit,
.prf-kyc-submit,
button.prf-kyc-submit,
button[type="submit"].prf-kyc-submit,
.aff-submit-btn,
button.aff-submit-btn,
button[type="submit"].aff-submit-btn {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
}
.prf-btn-submit::after,
.prf-kyc-submit::after,
.aff-submit-btn::after {
    display: none !important;
    content: none !important;
}
.prf-btn-submit:hover,
button[type="submit"].prf-btn-submit:hover,
.prf-kyc-submit:hover,
button[type="submit"].prf-kyc-submit:hover,
.aff-submit-btn:hover,
button[type="submit"].aff-submit-btn:hover {
    background: var(--st-silver-btn-hover) !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}


/* ── EYlgAACTP9gy.css ──────────────────────────────────────── */
/* ================================================================
   AUTH MODALS v14 — Dark & Silver Theme
   Palet: var(--surface-elevated, #06070a) / var(--surface, #0d0f13) / #15171c
   Aksan: var(--primary, #ac895e) (kayıt CTA)
   Giriş butonu: rgba(255,255,255,0.07) + rgba(255,255,255,0.16) border
   Gold detay: #9aa4b0
   Metin: var(--text-primary, #e7e9ec)
   ================================================================ */

/* ── OVERLAY ── */
.auth-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.78) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 3000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.22s ease, visibility 0.22s ease !important;
}
.auth-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── MODAL WRAPPER ── */
.auth-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -46%) !important;
    z-index: 3001 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.24s ease, transform 0.26s cubic-bezier(.22,.68,0,1.15), visibility 0.24s ease !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    width: min(580px, 94vw) !important;
    max-width: none !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 94vh !important;
    background: var(--surface-elevated, #06070a) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}
.auth-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) !important;
}
.auth-modal::before,
.auth-modal::after {
    display: none !important;
    content: none !important;
}

/* ID seçiciler — yüksek özgüllük */
#loginModal,
#forgotModal {
    width: min(580px, 94vw) !important;
    max-width: none !important;
    height: auto !important;
    max-height: 94vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

#registerModal {
    width: min(800px, 94vw) !important;
    max-width: none !important;
    height: auto !important;
    max-height: 94vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

/* ── GÖRSEL PANEL ── */
.am-img {
    width: 42% !important;
    min-width: 42% !important;
    max-width: 42% !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
    position: relative !important;
    overflow: hidden !important;
    background: #101114 !important;
    height: auto !important;
    min-height: 420px !important;
}
.am-img::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        135deg,
        rgba(6,7,10,0.15) 0%,
        rgba(6,7,10,0.0) 40%,
        rgba(6,7,10,0.55) 100%
    ) !important;
    z-index: 1 !important;
}
/* Alt gradient — forma geçişi */
.am-img::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; right: -1px !important; bottom: 0 !important;
    width: 60px !important;
    background: linear-gradient(
        270deg,
        rgba(13,15,19,1) 0%,
        rgba(13,15,19,0.6) 30%,
        rgba(13,15,19,0) 100%
    ) !important;
    z-index: 2 !important;
}
.am-img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 62% center !important;
    display: block !important;
    filter: none !important;
    z-index: 0 !important;
}

/* ── FORM PANEL ── */
.am-form {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    background: var(--surface-elevated, #06070a) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--border, rgba(255,255,255,0.08)) transparent !important;
    height: auto !important;
}
.am-form::-webkit-scrollbar { width: 3px !important; }
.am-form::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10) !important; border-radius: 3px !important; }

/* ── KAPAT BUTONU ── */
.am-close {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    border: none !important;
    color: #5b626c !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 0 !important;
    transition: color 0.15s !important;
}
.am-close:hover {
    background: none !important;
    color: var(--text-primary, #e7e9ec) !important;
    border-color: transparent !important;
}

/* ── BAŞLIK ── */
.am-head {
    padding: 26px 28px 0 28px !important;
    position: relative !important;
    flex-shrink: 0 !important;
}
.am-head h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #e7e9ec) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.25 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    text-shadow: none !important;
}
/* Başlık altındaki vurgu çizgisi */
.am-head h2::after {
    content: "" !important;
    display: block !important;
    width: 28px !important;
    height: 2px !important;
    background: var(--primary, #ac895e) !important;
    border-radius: 2px !important;
    margin-top: 7px !important;
}
.am-head p {
    font-size: 12.5px !important;
    color: #8fa8b8 !important;
    margin: 0 !important;
}

/* ── FORM GÖVDE ── */
.am-body {
    padding: 20px 28px 20px 28px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    justify-content: center !important;
}
.am-group { margin-bottom: 11px !important; }
.am-group:last-child { margin-bottom: 0 !important; }

/* ── LABEL ── */
.am-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #8fa8b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 6px !important;
}

/* ── INPUT ── */
.am-input,
.am-select,
.am-textarea {
    width: 100% !important;
    height: 42px !important;
    background: var(--input-background, var(--surface, #0d0f13)) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 6px !important;
    color: var(--text-primary, #e7e9ec) !important;
    font-size: 13.5px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    padding: 0 13px !important;
    outline: none !important;
    transition: border-color 0.18s, background 0.18s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
/* iOS Safari: font-size < 16px olan input focus'ta sayfayı zoom yapar → kasma */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px) {
    .am-input,
    .am-select,
    .am-textarea {
        font-size: 16px !important;
    }
}
/* iOS date input — am-input'taki -webkit-appearance:none'u geri al */
.am-input[type="date"],
.am-date-input {
    -webkit-appearance: textfield !important;
    appearance: textfield !important;
    font-size: 16px !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Date wrapper — placeholder efekti için */
.am-date-wrapper {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

.am-date-placeholder {
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #5a7a8a !important;
    -webkit-text-fill-color: #5a7a8a !important;
    font-size: 13.5px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    pointer-events: none !important;
    z-index: 3 !important;
    transition: opacity 0.15s !important;
    line-height: 1 !important;
}

.am-date-input:not(:placeholder-shown) + .am-date-placeholder,
.am-date-input.has-value + .am-date-placeholder {
    opacity: 0 !important;
}

/* Date input değer seçilmeden önce metin rengini gizle (sadece placeholder görünsün) */
.am-date-input:not(.has-value) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.am-date-input.has-value {
    color: var(--text-primary, #e7e9ec) !important;
    -webkit-text-fill-color: var(--text-primary, #e7e9ec) !important;
}

.am-input::placeholder, .am-textarea::placeholder {
    color: #5a7a8a !important;
    -webkit-text-fill-color: #5a7a8a !important;
}
.am-input:focus, .am-select:focus, .am-textarea:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    background: #1e3244 !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.07) !important;
}
.am-input.err, .am-select.err, .am-textarea.err {
    border-color: rgba(255,80,80,0.5) !important;
    box-shadow: 0 0 0 3px rgba(255,80,80,0.06) !important;
}

/* Password wrapper */
.am-pw { position: relative !important; }
.am-pw .am-input { padding-right: 42px !important; }
.am-pw-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: #5b626c !important;
    font-size: 13px !important;
    cursor: pointer !important;
    padding: 4px !important;
    line-height: 1 !important;
    transition: color 0.18s !important;
}
.am-pw-toggle:hover { color: var(--text-primary, #e7e9ec) !important; }

/* Phone */
.am-phone {
    display: flex !important;
    border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: var(--input-background, var(--surface, #0d0f13)) !important;
    transition: border-color 0.18s !important;
}
.am-phone:focus-within {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.07) !important;
}
.am-phone-flag {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 13px !important;
    font-size: 12.5px !important;
    color: #9aa1ab !important;
    white-space: nowrap !important;
    border-right: 1px solid rgba(255,255,255,0.07) !important;
    flex-shrink: 0 !important;
    font-weight: 500 !important;
}
.am-phone-flag img { width: 16px !important; }
.am-phone .am-input {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    flex: 1 !important;
    height: 42px !important;
    padding-left: 11px !important;
    box-shadow: none !important;
}
.am-phone .am-input:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Select */
.am-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath stroke='%236e8a9a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 34px !important;
    cursor: pointer !important;
}
.am-select option { background: var(--surface-elevated, #06070a) !important; color: var(--text-primary, #e7e9ec) !important; }

/* Textarea */
.am-textarea {
    height: auto !important;
    resize: none !important;
    padding: 10px 13px !important;
    line-height: 1.55 !important;
}

/* Checkbox */
.am-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    color: #8fa8b8 !important;
    line-height: 1.55 !important;
    user-select: none !important;
}
.am-check input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    accent-color: var(--primary, #ac895e) !important;
    cursor: pointer !important;
    margin-top: 2px !important;
}
.am-check a { color: var(--text-primary, #e7e9ec) !important; text-decoration: underline !important; text-underline-offset: 2px !important; }

/* Remember / forgot row */
.am-remember-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 12px 0 16px !important;
}
.am-forgot {
    font-size: 12px !important;
    color: #8fa8b8 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.18s !important;
}
.am-forgot:hover { color: var(--text-primary, #e7e9ec) !important; }

/* ── TÜM MODAL BUTONLARI — neon yeşil CTA ── */
.am-btn {
    width: 100% !important;
    height: 44px !important;
    background: var(--primary, #ac895e) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #0a1a0a !important;
    -webkit-text-fill-color: #0a1a0a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background 0.18s, box-shadow 0.18s !important;
    position: relative !important;
    overflow: hidden !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
/* Tüm modal butonlarında shimmer/parlama efekti kapat */
.auth-modal .am-btn::before, .auth-modal .am-btn::after,
#loginSubmitBtn::before, #loginSubmitBtn::after,
#forgotSubmitBtn::before, #forgotSubmitBtn::after,
#registerSubmitBtn::before, #registerSubmitBtn::after,
#regPanel1 .am-btn::before, #regPanel1 .am-btn::after,
#regPanel2 .am-btn::before, #regPanel2 .am-btn::after {
    display: none !important;
    content: none !important;
}
.am-btn:hover {
    background: #c9a97d !important;
    box-shadow: none !important;
    color: #0a1a0a !important;
    -webkit-text-fill-color: #0a1a0a !important;
    filter: none !important;
    transform: none !important;
}
.am-btn:active {
    background: #8a6a45 !important;
    box-shadow: none !important;
}
.am-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* Kayıt formu butonu — neon yeşil (CTA) */
#registerSubmitBtn,
#registerModal .am-btn[type="submit"],
#regPanel1 .am-btn,
#regPanel2 .am-btn[type="submit"] {
    background: var(--primary, #ac895e) !important;
    border: none !important;
    color: #0a1a0a !important;
    -webkit-text-fill-color: #0a1a0a !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
}
#registerSubmitBtn:hover,
#registerModal .am-btn[type="submit"]:hover,
#regPanel1 .am-btn:hover,
#regPanel2 .am-btn[type="submit"]:hover {
    background: #c9a97d !important;
    border: none !important;
    color: #0a1a0a !important;
    -webkit-text-fill-color: #0a1a0a !important;
    box-shadow: none !important;
    filter: none !important;
}
#registerSubmitBtn:active,
#registerModal .am-btn[type="submit"]:active {
    background: #8a6a45 !important;
    box-shadow: none !important;
}

/* Devam et butonu (regPanel1) — yeşil */
#regPanel1 .am-group:last-child .am-btn {
    background: var(--primary, #ac895e) !important;
    border: none !important;
    color: #0a1a0a !important;
    -webkit-text-fill-color: #0a1a0a !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ── ALERT ── */
.am-alert {
    display: none !important;
    padding: 10px 13px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    margin-bottom: 13px !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}
.am-alert.error {
    display: flex !important;
    background: rgba(255,70,70,0.08) !important;
    border: 1px solid rgba(255,70,70,0.20) !important;
    color: #ff7878 !important;
}
.am-alert.success {
    display: flex !important;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.07) !important;
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20) !important;
    color: var(--primary, #ac895e) !important;
}
.am-alert.info {
    display: flex !important;
    background: rgba(31,160,255,0.07) !important;
    border: 1px solid rgba(31,160,255,0.20) !important;
    color: #4db8ff !important;
}

/* ── FOOTER ── */
.am-footer {
    padding: 12px 28px 18px !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    background: rgba(0,0,0,0.25) !important;
}
.am-switch {
    font-size: 12.5px !important;
    color: #9aa1ab !important;
    margin: 0 !important;
}
.am-switch a {
    color: var(--text-primary, #e7e9ec) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.18s !important;
}
.am-switch a:hover { color: #fff !important; }

/* ── Şifremi unuttum açıklama ── */
.am-desc {
    font-size: 13px !important;
    color: #8fa8b8 !important;
    margin-bottom: 18px !important;
    line-height: 1.65 !important;
}

/* ── Section başlıkları ── */
.am-section {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #5a7a8a !important;
    font-weight: 700 !important;
    margin: 16px 0 9px 0 !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.am-section:first-child { margin-top: 0 !important; }

/* ── Register grid ── */
.am-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 10px !important;
}
.am-grid .am-full { grid-column: 1 / -1 !important; }
.am-grid .am-group { margin-bottom: 0 !important; }

/* ── Step göstergesi ── */
.am-steps {
    display: flex !important;
    gap: 5px !important;
    margin-bottom: 18px !important;
}
.am-step {
    height: 3px !important;
    flex: 1 !important;
    border-radius: 3px !important;
    background: rgba(255,255,255,0.07) !important;
    transition: background 0.28s !important;
}
.am-step.active { background: var(--text-primary, #e7e9ec) !important; }

.am-step-panel { display: none !important; }
.am-step-panel.active { display: block !important; }

/* ── Geri butonu ── */
.am-back {
    background: none !important;
    border: none !important;
    color: #9aa1ab !important;
    font-size: 12px !important;
    cursor: pointer !important;
    padding: 0 !important;
    font-family: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    transition: color 0.18s !important;
}
.am-back:hover { color: var(--text-primary, #e7e9ec) !important; }

/* ── Mobil banner ── */
.am-mob-banner { display: none !important; }

/* Register: justify flex-start */
#registerModal .am-body {
    justify-content: flex-start !important;
    padding-bottom: 16px !important;
}
#registerModal .am-form {
    overflow-y: auto !important;
}

/* ================================================================
   MOBİL ≤ 640px
================================================================ */
@media (max-width: 640px) {
    .auth-modal,
    #loginModal, #forgotModal, #registerModal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        flex-direction: column !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        top: 0 !important;
        left: 0 !important;
        transform: translateY(3%) !important;
    }
    .auth-modal.active,
    #loginModal.active, #forgotModal.active, #registerModal.active {
        transform: translateY(0) !important;
    }

    .am-img { display: none !important; }

    .am-mob-banner {
        display: block !important;
        width: 100% !important;
        height: 150px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .am-mob-banner img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 62% 35% !important;
    }

    .am-form {
        flex: none !important;
        width: 100% !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .am-head {
        padding: 20px 20px 0 !important;
        flex-shrink: 0 !important;
    }

    .am-body {
        padding: 18px 20px 28px !important;
        justify-content: flex-start !important;
        flex: none !important;
        overflow: visible !important;
    }

    .am-footer {
        padding: 14px 20px 22px !important;
        margin-top: 0 !important;
        background: transparent !important;
    }

    .am-input, .am-select { height: 46px !important; font-size: 16px !important; }
    .am-phone .am-input { height: 46px !important; }
    .am-date-input { height: 46px !important; line-height: 46px !important; font-size: 16px !important; }
    .am-date-placeholder { font-size: 15px !important; }
    .am-btn { height: 48px !important; font-size: 15px !important; }

    .am-grid { grid-template-columns: 1fr !important; }
    .am-grid .am-full { grid-column: 1 !important; }
    .am-remember-row { margin: 10px 0 14px !important; }
    .am-section { margin: 12px 0 7px !important; }
}

/* ================================================================
   GLOBAL OVERRIDE — Diğer CSS dosyalarından gelen
   çelişen kuralları sıfırla
================================================================ */
.auth-modal-overlay {
    background: rgba(0,0,0,0.78) !important;
    backdrop-filter: blur(6px) !important;
}
/* iOS'ta blur GPU frame drop yaratır — kapat */
@supports (-webkit-touch-callout: none) {
    .auth-modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0,0,0,0.88) !important;
    }
}

.auth-modal,
#loginModal, #forgotModal, #registerModal {
    background: var(--surface-elevated, #06070a) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.80), 0 0 0 1px rgba(255,255,255,0.04) !important;
    padding: 0 !important;
    overflow: hidden !important;
}
/* Mobilde modal scroll etmeli — overflow:hidden override'ını ez */
@media (max-width: 640px) {
    .auth-modal,
    #loginModal, #forgotModal, #registerModal {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }
}

.auth-modal::before, .auth-modal::after,
#loginModal::before, #loginModal::after,
#forgotModal::before, #forgotModal::after,
#registerModal::before, #registerModal::after {
    display: none !important;
    content: none !important;
}

/* Input renk override */
.auth-modal input[type="text"],
.auth-modal input[type="email"],
.auth-modal input[type="password"],
.auth-modal input[type="tel"],
.auth-modal input[type="date"],
.auth-modal select,
.auth-modal textarea {
    background: var(--surface, #0d0f13) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    color: var(--text-primary, #e7e9ec) !important;
    box-shadow: none !important;
}
.auth-modal input:focus,
.auth-modal select:focus,
.auth-modal textarea:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.07) !important;
    background: #243e4d !important;
}
.auth-modal input::placeholder,
.auth-modal input::-webkit-input-placeholder,
.auth-modal input::-moz-placeholder {
    color: #5a7a8a !important;
    -webkit-text-fill-color: #5a7a8a !important;
    opacity: 1 !important;
}
.auth-modal .am-phone input {
    border: none !important;
    box-shadow: none !important;
}
.auth-modal label,
.auth-modal .form-label {
    color: #8fa8b8 !important;
    font-weight: 400 !important;
    background: none !important;
    -webkit-text-fill-color: unset !important;
}
.auth-modal .am-head h2 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: var(--text-primary, #e7e9ec) !important;
    text-shadow: none !important;
}

/* Tüm modal butonları — neon yeşil */
.auth-modal .am-btn,
#loginSubmitBtn,
#forgotSubmitBtn {
    background: var(--primary, #ac895e) !important;
    border: none !important;
    color: #0a1a0a !important;
    -webkit-text-fill-color: #0a1a0a !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
.auth-modal .am-btn:hover,
#loginSubmitBtn:hover, #loginSubmitBtn:focus,
#forgotSubmitBtn:hover, #forgotSubmitBtn:focus {
    background: #c9a97d !important;
    border: none !important;
    color: #0a1a0a !important;
    -webkit-text-fill-color: #0a1a0a !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Register submit — neon yeşil (override üstüne override) */
#registerSubmitBtn,
#registerSubmitBtn:hover,
#registerSubmitBtn:focus {
    background: var(--primary, #ac895e) !important;
    border: none !important;
    color: #0a1a0a !important;
    -webkit-text-fill-color: #0a1a0a !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}
#registerSubmitBtn:hover {
    background: #c9a97d !important;
    box-shadow: none !important;
}
#registerSubmitBtn:active {
    background: #8a6a45 !important;
    box-shadow: none !important;
}

/* gold-black-luxury-theme.css button submit hover override */
.auth-modal button[type="submit"]:hover,
.auth-modal button[type="submit"]:focus {
    transform: none !important;
}

/* ── gold-black-luxury-theme.css SIFIRLAMA ── */
/* Shimmer efekti — tüm modal butonlarında kapat */
.auth-modal button[type="submit"]::before,
.auth-modal button[type="submit"]::after,
.auth-modal .am-btn::before,
.auth-modal .am-btn::after,
#loginSubmitBtn::before, #loginSubmitBtn::after,
#forgotSubmitBtn::before, #forgotSubmitBtn::after,
#registerSubmitBtn::before, #registerSubmitBtn::after,
#loginModal .am-btn::before, #loginModal .am-btn::after,
#forgotModal .am-btn::before, #forgotModal .am-btn::after,
#registerModal .am-btn::before, #registerModal .am-btn::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Gold input focus — tamamen kaldır, yeşil ile değiştir */
.auth-modal input[type="text"]:focus,
.auth-modal input[type="email"]:focus,
.auth-modal input[type="password"]:focus,
.auth-modal input[type="tel"]:focus,
.auth-modal input[type="date"]:focus,
.auth-modal select:focus,
.auth-modal textarea:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.07) !important;
    background: #1e3244 !important;
    outline: none !important;
}

/* Gold box-shadow efekti — giriş/şifre sıfırlama butonlarında yok */
#loginSubmitBtn,
#forgotSubmitBtn {
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Date input — iOS Safari uyumlu */
.auth-modal input[type="date"],
.auth-modal .am-date-input {
    -webkit-appearance: textfield !important;
    appearance: textfield !important;
    background: var(--surface, #0d0f13) !important;
    cursor: pointer !important;
    font-size: 16px !important; /* iOS zoom engellemek için min 16px */
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 13px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 6px !important;
}
.auth-modal input[type="date"]::-webkit-date-and-time-value,
.auth-modal .am-date-input::-webkit-date-and-time-value {
    color: var(--text-primary, #e7e9ec) !important;
    text-align: left !important;
}
.auth-modal input[type="date"]::-webkit-datetime-edit,
.auth-modal .am-date-input::-webkit-datetime-edit {
    color: var(--text-primary, #e7e9ec) !important;
    -webkit-text-fill-color: var(--text-primary, #e7e9ec) !important;
    padding: 0 !important;
}
.auth-modal input[type="date"]::-webkit-datetime-edit-text,
.auth-modal input[type="date"]::-webkit-datetime-edit-month-field,
.auth-modal input[type="date"]::-webkit-datetime-edit-day-field,
.auth-modal input[type="date"]::-webkit-datetime-edit-year-field,
.auth-modal .am-date-input::-webkit-datetime-edit-text,
.auth-modal .am-date-input::-webkit-datetime-edit-month-field,
.auth-modal .am-date-input::-webkit-datetime-edit-day-field,
.auth-modal .am-date-input::-webkit-datetime-edit-year-field {
    color: var(--text-primary, #e7e9ec) !important;
    -webkit-text-fill-color: var(--text-primary, #e7e9ec) !important;
}
.auth-modal input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.auth-modal .am-date-input::-webkit-datetime-edit-fields-wrapper {
    color: var(--text-primary, #e7e9ec) !important;
    padding: 0 !important;
}
.auth-modal input[type="date"]::-webkit-inner-spin-button,
.auth-modal input[type="date"]::-webkit-calendar-picker-indicator,
.auth-modal .am-date-input::-webkit-inner-spin-button,
.auth-modal .am-date-input::-webkit-calendar-picker-indicator {
    opacity: 0.5 !important;
    cursor: pointer !important;
    filter: invert(1) !important;
}
/* ── OTP KUTULARI ── */
.am-otp-input {
    width: 42px !important;
    height: 50px !important;
    background: var(--surface, #0d0f13) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    color: var(--text-primary, #e7e9ec) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-align: center !important;
    outline: none !important;
    caret-color: var(--primary, #ac895e) !important;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}
.am-otp-input:focus {
    border-color: var(--primary, #ac895e) !important;
    background: #1e3244 !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.12) !important;
}
.am-otp-input.filled {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.45) !important;
}
.am-otp-input.err {
    border-color: rgba(255,80,80,0.6) !important;
    box-shadow: 0 0 0 3px rgba(255,80,80,0.1) !important;
}
@media (max-width: 480px) {
    .am-otp-input {
        width: 38px !important;
        height: 46px !important;
        font-size: 20px !important;
        border-radius: 7px !important;
    }
}

/* ================================================================
   iOS / MOBİL PERFORMANS DÜZELTMESİ
   position:fixed scroll lock kaldırıldı — sadece overflow:hidden
   kullanılıyor (parisbet ile aynı yaklaşım).
   Bu iOS'ta klavye açılınca yaşanan kasma/zıplama sorununu çözer.
   ================================================================ */

/* Modal açıkken body scroll engelle */
body.modal-open {
    overflow: hidden !important;
}

/* Modal scroll alanları touch ile kaydırılabilsin */
.auth-modal,
.auth-modal-overlay {
    -webkit-overflow-scrolling: auto !important;
}
.am-form {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* ================================================================
   MOBİL: Modal içinde kaydırınca arka plan (site) scroll olmasın
   position:fixed kullanılmıyor (klavye kasması geri gelmesin),
   sadece overscroll zincirini kesiyoruz.
================================================================ */
@media (max-width: 640px) {
    html.modal-open,
    body.modal-open {
        overflow: hidden !important;
        height: 100% !important;
        overscroll-behavior: none !important;
        /* touch-action: none kaldırıldı — Android'de modal scroll'u engelliyordu */
    }
    .auth-modal-overlay {
        touch-action: none !important;
    }
    .auth-modal,
    #loginModal, #forgotModal, #registerModal {
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
    }
    .am-form,
    .am-body {
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ================================================================
   iOS INPUT ZOOM ÖNLEME
   iOS Safari: font-size 16px altındaki input'a tıklanınca
   sayfa otomatik zoom yapar → kasma. 16px ile engellenir.
   ================================================================ */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px) {
    .am-input,
    .am-select,
    .am-textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ================================================================
   iOS OVERLAY BLUR — GPU yük azaltma
   iOS'ta backdrop-filter:blur() GPU-intensive olup
   input focus sırasında frame drop yaratır.
   ================================================================ */
@supports (-webkit-touch-callout: none) {
    .auth-modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.88) !important;
    }
}

/* ================================================================
   LIVECHAT GPU LAYER
   iOS'ta iframe reflow önlemek için compositing layer'a al
   ================================================================ */
#chat-widget-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* ================================================================
   iOS MOBİL MODAL — KESİN KASMA ÇÖZÜMÜ
   
   Sorun: position:fixed modal + transform animasyonu + klavye açılması
   aynı anda gerçekleşince iOS GPU'da üst üste 3 işlem olur = kasma.
   
   Çözüm: iOS'ta modal animasyonunu tamamen kapat (opacity only),
   transform kullanma. Klavye gelince yeniden hesap yapılmaz.
================================================================ */
@supports (-webkit-touch-callout: none) {
    /* Modal açılış animasyonunu sadece opacity'e indir */
    .auth-modal,
    #loginModal, #forgotModal, #registerModal {
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
        /* transform transition yok - iOS'ta klavye+transform = kasma */
    }
    
    /* Mobil tam ekran modal - transform kullanma */
    @media (max-width: 640px) {
        .auth-modal,
        #loginModal, #forgotModal, #registerModal {
            transform: none !important;
            /* Modal tam ekran, transform'a gerek yok */
        }
        .auth-modal.active,
        #loginModal.active, #forgotModal.active, #registerModal.active {
            transform: none !important;
        }
    }
    
    /* Overlay animasyonu da sadece opacity */
    .auth-modal-overlay {
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }
}

/* ================================================================
   ANDROİD / MOBİL SCROLL — KESİN ÇÖZÜM
   Modal position:fixed + height:100% + overflow-y:scroll
   İçerik (am-form/am-body) overflow:visible ile doğal büyür,
   scroll modal container'da gerçekleşir.
================================================================ */
@media (max-width: 640px) {

    /* Modal: tam ekran, scroll eden container */
    #registerModal,
    #loginModal,
    #forgotModal,
    .auth-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
    }

    /* İçerik: doğal yükseklikte büyüsün, modal scroll eder */
    #registerModal .am-form,
    #loginModal .am-form,
    #forgotModal .am-form {
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
        touch-action: pan-y !important;
    }

    #registerModal .am-body,
    #loginModal .am-body,
    #forgotModal .am-body {
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
        padding-bottom: 40px !important;
        touch-action: pan-y !important;
    }

    #registerModal .am-head,
    #loginModal .am-head,
    #forgotModal .am-head {
        flex-shrink: 0 !important;
        touch-action: pan-y !important;
    }

    /* Banner küçük tut — form alanlarına yer aç */
    #registerModal .am-mob-banner {
        height: 100px !important;
        flex-shrink: 0 !important;
    }
}

/* ── mor-tema.css ──────────────────────────────────────── */
/* ================================================================
   SİTE TEMASI v1.0 — CasinoRoys Tarzı Profesyonel (Dark & Silver)

   Palet:
     Zemin       : var(--surface-elevated, #06070a) (koyu antrasit)
     Surface     : var(--surface, #0d0f13) (koyu antrasit-gri)
     Elevated    : #15171c (orta antrasit-gri)
     Hover       : #1f2228 (açık antrasit-gri)
     Aksan       : var(--primary, #ac895e) (gümüş)
     Aksan Açık  : #c9a97d (parlak gümüş / hover)
     Aksan Dim   : rgba(var(--primary-rgb, 172, 137, 94),0.10)
     Platin      : #9aa4b0 (sadece VIP/küçük detay)
     Text-1      : var(--text-primary, #e7e9ec) (açık gri)
     Text-2      : #9aa1ab (orta gri)
     Text-3      : #5b626c (koyu gri)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── DEĞİŞKENLER ── */
:root {
    /* Zeminler */
    --st-bg:       var(--surface-elevated, #06070a);
    --st-surface:  var(--surface, #0d0f13);
    --st-elevated: #15171c;
    --st-hover:    #1f2228;

    /* Aksan — gümüş */
    --st-green:     var(--primary, #ac895e);
    --st-green-dim: rgba(var(--primary-rgb, 172, 137, 94),0.10);
    --st-green-brd: rgba(var(--primary-rgb, 172, 137, 94),0.28);
    --st-green-hi:  #c9a97d;

    /* Gümüş metal buton dolgusu — parlak/koyu geçişli, gerçek metal hissi */
    --st-silver-btn:       linear-gradient(180deg, #c9a97d 0%, var(--primary, #ac895e) 55%, #8a6a45 100%);
    --st-silver-btn-hover: linear-gradient(180deg, #d9bd98 0%, #c9a97d 55%, var(--primary, #ac895e) 100%);

    /* Gold — sadece VIP/küçük detaylar */
    --st-gold:     #9aa4b0;
    --st-gold-dim: rgba(154,164,176,0.12);
    --st-gold-brd: rgba(154,164,176,0.28);

    /* Metin */
    --st-text-1: var(--text-primary, #e7e9ec);
    --st-text-2: #9aa1ab;
    --st-text-3: #5b626c;

    /* Border */
    --st-brd:    rgba(255,255,255,0.06);
    --st-brd-md: rgba(255,255,255,0.10);
    --st-brd-hi: rgba(255,255,255,0.17);
}

/* ================================================================
   BODY & ARKAPLAN
   ================================================================ */
html {
    background: var(--st-bg) !important;
}

/* Arkaplan: düz renk, görsel yok.
   ── iOS PERFORMANS DÜZELTMESİ ──
   background-attachment: fixed, body üzerinde kullanıldığında iOS Safari'de
   ciddi input-lag/kasmaya yol açar: klavye açılıp visual viewport her
   değiştiğinde (her tuş vuruşunda chat widget'ı gibi fixed elementler
   yeniden konumlanırken) tarayıcı bu "fixed" arka planı yeniden
   render etmek zorunda kalır.
   Çözüm: background-attachment: scroll (varsayılan) + görsel yok, düz renk. */
body {
    background-color: var(--surface-elevated, #06070a) !important;
    background-image: none !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: var(--st-text-1) !important;
}

/* ── iOS: LiveChat açıkken büyük arka plan görselini devre dışı bırak ── */
body.livechat-open {
    background-image: none !important;
}

/* iOS'ta modal açıkken background-image kaldır */
body.modal-open {
    background-image: none !important;
}

/* iOS'ta tüm input/focus durumlarında background-image kaldır */
@supports (-webkit-touch-callout: none) {
    body {
        background-image: none !important;
        background-color: var(--surface-elevated, #06070a) !important;
    }
}

/* Body pseudo-elementleri temizle — layout bozulmasin */
body::before { display: none !important; content: none !important; animation: none !important; }
body::after  { display: none !important; content: none !important; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.casino-sidebar, aside.casino-sidebar {
    background: var(--sidebar-background, rgba(6,7,10,0.98)) !important;
    border-right: 1px solid var(--st-brd) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.7) !important;
    /* backdrop-filter kaldırıldı: iOS'ta sidebar her görünür/gizli olduğunda
       ve klavye açılınca tüm composite tree yeniden render edilir = kasma */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Sol yeşil şerit */
.casino-sidebar::before {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--primary-rgb, 172, 137, 94),0.45) 30%,
        rgba(var(--primary-rgb, 172, 137, 94),0.35) 70%,
        transparent 100%) !important;
}

/* Logo satırı */
.sb-header, .sb-logo-row {
    background: #0a0a0a !important;
    border-bottom: 1px solid var(--st-brd) !important;
}

.sb-brand-text, .sb-logo-text {
    background: linear-gradient(135deg, var(--text-primary, #e7e9ec) 0%, #7a96a8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.sb-logo-img { filter: none !important; }

/* Section başlıkları */
.sb-section-title, .sb-section {
    color: var(--st-text-3) !important;
    letter-spacing: 0.12em !important;
}
.sb-section::after { background: var(--st-brd) !important; }

/* Divider — ince gold çizgi */
.sb-divider {
    background: linear-gradient(90deg,
        transparent,
        var(--st-gold-dim) 30%,
        var(--st-gold-dim) 70%,
        transparent) !important;
}

/* Nav öğeleri */
.sb-item, .sb-link {
    color: var(--st-text-2) !important;
    border-radius: 6px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    gap: 8px !important;
}
.sb-item:hover, .sb-link:hover {
    background: var(--st-elevated) !important;
    color: var(--st-text-1) !important;
}
.sb-item.active, .sb-link.active {
    background: var(--st-green-dim) !important;
    color: var(--st-green) !important;
}
.sb-link.active::before {
    background: linear-gradient(180deg, var(--st-green), rgba(var(--primary-rgb, 172, 137, 94),0.5)) !important;
}

/* Nav ikonları */
.sb-icon, .sb-item i, .sb-link i { color: var(--st-text-2) !important; }
.sb-item.active .sb-icon, .sb-item.active i,
.sb-link.active .sb-icon, .sb-link.active i { color: var(--st-green) !important; }

/* Toggle */
.sb-toggle {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
}
.sb-toggle:hover { background: var(--st-hover) !important; color: var(--st-text-1) !important; }

/* Extras */
.sb-extras { border-bottom: 1px solid var(--st-brd) !important; }
.sb-extra-btn {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
}
.sb-extra-btn:hover {
    background: var(--st-hover) !important;
    border-color: var(--st-brd-hi) !important;
    color: var(--st-text-1) !important;
}

/* BADGE */
.sb-badge-live {
    background: rgba(239,68,68,0.12) !important;
    border: 1px solid rgba(239,68,68,0.32) !important;
    color: #ff5c5c !important;
}
.sb-badge-new {
    background: var(--st-gold-dim) !important;
    border: 1px solid var(--st-gold-brd) !important;
    color: var(--st-gold) !important;
}
.sb-promo-btn {
    background: var(--st-green-dim) !important;
    border: 1px solid var(--st-green-brd) !important;
    color: var(--st-green) !important;
    font-weight: 700 !important;
}
.sb-promo-btn:hover {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.16) !important;
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.45) !important;
}
.sb-footer { border-top: 1px solid var(--st-brd) !important; }

/* ================================================================
   TOP HEADER BAR
   ================================================================ */
.top-header-bar {
    background: var(--header-background, rgba(6,7,10,0.97)) !important;
    border-bottom: 1px solid var(--st-brd) !important;
    box-shadow: 0 1px 0 rgba(var(--primary-rgb, 172, 137, 94),0.06), 0 4px 32px rgba(0,0,0,0.6) !important;
    /* backdrop-filter kaldırıldı: header her scroll/resize'da repaint tetikler */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sidebar-toggle-btn {
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,0.7) !important;
}
.sidebar-toggle-btn:hover {
    background: transparent !important;
    color: #fff !important;
}

/* ================================================================
   GİRİŞ YAP & KAYIT OL
   ================================================================ */
.modern-auth-buttons { display: flex !important; align-items: center !important; gap: 8px !important; }

.modern-auth-btn {
    position: relative !important;
    height: 36px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    transition: all 0.18s !important;
    filter: none !important;
    box-shadow: none !important;
}
.modern-auth-btn::before, .modern-auth-btn::after { display: none !important; content: none !important; }

/* GİRİŞ YAP */
.modern-auth-btn-login {
    background: var(--button-secondary-bg, rgba(255,255,255,0.07)) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: var(--button-secondary-text, var(--st-text-1)) !important;
}
.modern-auth-btn-login:hover {
    background: rgba(255,255,255,0.13) !important;
    border-color: rgba(255,255,255,0.26) !important;
    color: #fff !important;
    transform: none !important;
}
.modern-auth-btn-login .btn-content,
.modern-auth-btn-login .btn-text { color: var(--st-text-1) !important; }

/* KAYIT OL — gümüş */
.modern-auth-btn-register {
    background: var(--button-primary-bg, var(--st-silver-btn)) !important;
    border: none !important;
    color: var(--button-primary-text, #101114) !important;
    box-shadow: none !important;
}
.modern-auth-btn-register:hover {
    background: var(--st-silver-btn-hover) !important;
    box-shadow: none !important;
    transform: none !important;
}
.modern-auth-btn-register .btn-content,
.modern-auth-btn-register .btn-text { color: #101114 !important; }

/* Game modal auth */
.game-auth-btn-login {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: var(--st-text-1) !important;
}
.game-auth-btn-login:hover { background: rgba(255,255,255,0.13) !important; color: #fff !important; }

.game-auth-btn-register {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    box-shadow: none !important;
}
.game-auth-btn-register:hover {
    background: var(--st-silver-btn-hover) !important;
}

/* ================================================================
   PARA YATIR — yeşil CTA
   ================================================================ */
a.header-deposit-btn,
button.header-deposit-btn,
.header-deposit-btn,
.top-bar-right .header-deposit-btn,
.top-bar-right a[href="/deposit"] {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    animation: none !important;
}
a.header-deposit-btn:hover, .header-deposit-btn:hover {
    background: var(--st-silver-btn-hover) !important;
    color: #101114 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}
.header-deposit-btn::before, .header-deposit-btn::after { display: none !important; content: none !important; }
.header-deposit-icon, .header-deposit-text { color: #101114 !important; }

/* ================================================================
   BALANCE BADGE
   ================================================================ */
.balance-badge {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-1) !important;
    box-shadow: none !important;
    animation: none !important;
}
.balance-badge::before { display: none !important; content: none !important; }
.balance-badge:hover { background: var(--st-hover) !important; border-color: var(--st-brd-hi) !important; }
.balance-badge i { color: var(--st-green) !important; filter: none !important; }

/* ================================================================
   KULLANICI DROPDOWN
   ================================================================ */
.user-avatar-compact {
    background: var(--st-elevated) !important;
    border: 2px solid var(--st-brd-md) !important;
    box-shadow: none !important;
}
.user-avatar-compact i { color: var(--st-text-2) !important; filter: none !important; }
.user-avatar-compact:hover {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: 0 0 16px rgba(var(--primary-rgb, 172, 137, 94),0.15) !important;
}

.user-dropdown-menu {
    background: rgba(13,15,19,0.99) !important;
    border: 1px solid var(--st-brd-md) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px var(--border, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important;
    backdrop-filter: none !important;
}
.dropdown-header {
    background: var(--st-elevated) !important;
    border-bottom: 1px solid var(--st-brd) !important;
    border-radius: 12px 12px 0 0 !important;
}
.dropdown-header::before { display: none !important; }
.dropdown-avatar {
    background: var(--st-hover) !important;
    border: 2px solid var(--st-green-brd) !important;
    color: var(--st-green) !important;
    font-weight: 700;
    box-shadow: none !important;
}
.dropdown-user-details strong { color: var(--st-text-1) !important; text-shadow: none !important; }
.dropdown-balance { color: var(--st-green) !important; }
.dropdown-item { color: var(--st-text-2) !important; }
.dropdown-item:hover { background: var(--st-elevated) !important; color: var(--st-text-1) !important; }
.dropdown-item i { color: var(--st-text-3) !important; }
.dropdown-item:hover i { color: var(--st-green) !important; }

/* ================================================================
   KAZANÇ DAİRELERİ
   ================================================================ */
.bw-circle {
    background: linear-gradient(145deg,
        rgba(var(--primary-rgb, 172, 137, 94),0.75) 0%,
        rgba(140,148,158,0.6) 40%,
        rgba(90,96,104,0.7) 70%,
        rgba(var(--primary-rgb, 172, 137, 94),0.7) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        0 4px 16px rgba(0,0,0,0.6),
        0 0 18px rgba(var(--primary-rgb, 172, 137, 94),0.15) !important;
}
.bw-item:hover .bw-circle {
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        0 6px 24px rgba(0,0,0,0.75),
        0 0 28px rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
}
.bw-item.viewed .bw-circle {
    background: linear-gradient(145deg, #1a1c20, #131417, #1a1c20) !important;
    opacity: 0.5 !important;
}
.bw-mult {
    color: var(--st-green) !important;
    text-shadow: 0 1px 8px rgba(var(--primary-rgb, 172, 137, 94),0.4) !important;
}
.bw-mult.viewed { color: var(--st-text-3) !important; text-shadow: none !important; }

/* Bigwin modal */
.bigwin-modal {
    background: rgba(13,15,19,0.98) !important;
    border: 1px solid var(--st-brd-md) !important;
    box-shadow: 0 40px 100px rgba(0,0,0,0.92) !important;
}
.bigwin-modal-close {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
}
.bigwin-modal-close:hover { background: var(--st-hover) !important; color: var(--st-text-1) !important; }
.bw-spinner {
    border: 2.5px solid rgba(var(--primary-rgb, 172, 137, 94),0.08) !important;
    border-top-color: var(--st-green) !important;
}

/* ================================================================
   BÖLÜM BAŞLIKLARI
   ================================================================ */
.section-title,
h2.section-title,
[class*="section"] h2,
#feSection h2 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--st-text-1) !important;
    background-clip: unset !important;
    color: var(--st-text-1) !important;
    font-weight: 700 !important;
}
.section-title svg, h2.section-title svg {
    stroke: var(--st-green) !important;
    fill: var(--st-green) !important;
    opacity: 0.85 !important;
}
.section-subtitle, p.section-subtitle { color: var(--st-text-2) !important; }
.section-header-center, #feSection .section-header-center {
    border-bottom: 1px solid var(--st-brd) !important;
}

/* ================================================================
   ÖNE ÇIKAN ETKİNLİKLER
   ================================================================ */
.fe-tab {
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
    background: transparent !important;
}
.fe-tab:hover {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.30) !important;
    color: var(--st-text-1) !important;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.06) !important;
}
.fe-tab.active {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.10) !important;
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    color: #fff !important;
}

.fe-card {
    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        var(--card-bg-image, url('/assets/images/anasayfa.webp')) !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid var(--st-brd) !important;
    backdrop-filter: none !important;
}
.fe-card:hover {
    background:
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        var(--card-bg-image, url('/assets/images/anasayfa.webp')) !important;
    background-size: cover !important;
    background-position: center !important;
    border-color: var(--st-brd-md) !important;
    box-shadow: 0 0 20px rgba(var(--primary-rgb, 172, 137, 94),0.10) !important;
}
.fe-card-top, .fe-card-odds { background: rgba(6,7,10,0.65) !important; }
.fe-card-top { border-bottom: 1px solid var(--st-brd) !important; }
.fe-card-odds { border-top: 1px solid var(--st-brd) !important; }
.fe-odd-btn { border-right: 1px solid var(--st-brd) !important; }
.fe-odd-btn:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.07) !important; }
.fe-c-live {
    background: var(--st-silver-btn) !important;
    color: #101114 !important;
    font-weight: 800 !important;
}
.fe-vs-minute { color: var(--st-green) !important; }
.fe-odd-val { color: var(--st-green) !important; }
.fe-odd-btn:hover .fe-odd-val { color: #fff !important; }

/* ================================================================
   TÜMÜNÜ GÖR BUTONLARI
   ================================================================ */
.btn-view-all {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 9px 26px !important;
    transition: all .18s !important;
}
.btn-view-all:hover {
    background: var(--st-hover) !important;
    border-color: var(--st-brd-hi) !important;
    color: var(--st-text-1) !important;
    box-shadow: 0 0 16px rgba(var(--primary-rgb, 172, 137, 94),0.12) !important;
}
.btn-view-all i { color: var(--st-text-2) !important; }

.fe-all-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 7px 18px !important;
    border-radius: 20px !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
    transition: all .18s !important;
}
.fe-all-link:hover {
    border-color: var(--st-brd-hi) !important;
    color: var(--st-text-1) !important;
    background: var(--st-elevated) !important;
}

.view-all-center a, .view-all-center .btn-view-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 28px !important;
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all .18s !important;
}
.view-all-center a:hover, .view-all-center .btn-view-all:hover {
    background: var(--st-hover) !important;
    border-color: var(--st-brd-hi) !important;
    color: var(--st-text-1) !important;
}

/* ================================================================
   ARAMA & PROVIDER TABLAR
   ================================================================ */
.sp-search-input, .lcp-search-input, input[type="search"] {
    background: var(--st-elevated) !important;
    border-color: var(--st-brd-md) !important;
    color: var(--st-text-1) !important;
}
.sp-search-input:focus, .lcp-search-input:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.08) !important;
}
.sp-search-ico, .lcp-search-ico { color: var(--st-text-3) !important; }
.sp-search:focus-within .sp-search-ico,
.lcp-search:focus-within .lcp-search-ico { color: var(--st-green) !important; }

.sp-tab, .lcp-tab {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd) !important;
    color: var(--st-text-2) !important;
}
.sp-tab:hover, .lcp-tab:hover { background: var(--st-hover) !important; color: var(--st-text-1) !important; }
.sp-tab.active, .lcp-tab.active {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.10) !important;
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    color: var(--st-green) !important;
}

.sp-arrow, .lcp-arrow {
    background: var(--st-elevated) !important;
    border-color: var(--st-brd-md) !important;
    color: var(--st-text-2) !important;
}
.sp-arrow:hover, .lcp-arrow:hover { background: var(--st-hover) !important; color: var(--st-text-1) !important; }

/* ================================================================
   OYUN KARTLARI
   ================================================================ */
.game-card, .slot-card, .lcp-card {
    background: var(--card-background, rgba(13,15,19,0.85)) !important;
    border: 1px solid var(--st-brd) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.2s !important;
}
.game-card:hover, .slot-card:hover, .lcp-card:hover {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: none !important;
    transform: translateY(-3px) !important;
}

/* Çevrim sayısı badge */
.game-card .badge-cevrim,
.slot-card .badge-cevrim,
[class*="cevrim"] {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.20) !important;
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    color: var(--st-green) !important;
}

/* ================================================================
   OYUN MODAL
   ================================================================ */
.game-modal {
    background: rgba(13,15,19,0.99) !important;
    border: 1px solid var(--st-brd-md) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7) !important;
    backdrop-filter: none !important;
}
.game-modal::before { background: var(--st-silver-btn) !important; }
.game-modal-header {
    background: rgba(0,0,0,0.15) !important;
    border-bottom: 1px solid var(--st-brd) !important;
}
.game-modal-image { border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.25) !important; }
.game-modal-info h2 { color: var(--st-text-1) !important; }
.game-modal-provider { color: rgba(var(--primary-rgb, 172, 137, 94),0.85) !important; }
.game-modal-close {
    background: none !important; border: none !important;
    color: var(--st-text-3) !important;
    box-shadow: none !important;
}
.game-modal-close:hover { color: var(--st-text-1) !important; }

/* Gerçek Para ile Oyna */
.btn-play-real {
    background: var(--st-silver-btn) !important;
    border-color: transparent !important;
    color: var(--surface-elevated, #06070a) !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}
.btn-play-real::before { display: none !important; }
.btn-play-real:hover {
    background: var(--st-silver-btn-hover) !important;
    box-shadow: none !important;
    color: var(--surface-elevated, #06070a) !important;
}
.btn-play-real i { color: var(--surface-elevated, #06070a) !important; }

/* Demo Oyna */
.btn-play-fun {
    background: var(--border, rgba(255,255,255,0.08)) !important;
    border-color: rgba(255,255,255,0.20) !important;
    color: var(--st-text-2) !important;
    box-shadow: none !important;
}
.btn-play-fun:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.30) !important;
    color: var(--st-text-1) !important;
}
.btn-play-fun i { color: rgba(var(--primary-rgb, 172, 137, 94),0.5) !important; }
.btn-play-fun:hover i { color: var(--st-green) !important; }
.btn-play-fun::before { display: none !important; }

/* Kilit ikonu */
.lock-icon-wrapper {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.08) !important;
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.22) !important;
    border-radius: 50% !important;
}
.lock-icon { color: rgba(var(--primary-rgb, 172, 137, 94),0.7) !important; }

/* Modal genel butonlar */
.am-btn {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    font-weight: 700 !important;
}
.am-btn:hover { background: var(--st-silver-btn-hover) !important; }
.am-input {
    background: var(--input-background, var(--st-elevated, #15171c)) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-1) !important;
}
.am-input:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.08) !important;
}

/* ================================================================
   FOOTER
   ================================================================ */
footer, .footer {
    background: var(--footer-background, rgba(6,7,10,0.99)) !important;
    border-top: 1px solid var(--st-brd) !important;
    backdrop-filter: none !important;
}
.footer-header {
    background: var(--st-surface) !important;
    border-bottom: 1px solid var(--st-brd) !important;
}
.footer-header-title {
    background: none !important;
    -webkit-text-fill-color: var(--st-text-1) !important;
    color: var(--st-text-1) !important;
    font-weight: 700 !important;
}
.footer-header-subtitle { color: var(--st-text-2) !important; }
.footer-main { background: transparent !important; }
.footer-contact .footer-label {
    color: var(--st-text-3) !important;
    font-size: 10px !important;
    letter-spacing: 1.8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.footer-contact .footer-email { color: var(--st-text-1) !important; text-shadow: none !important; }
.footer-contact .footer-email:hover { color: var(--st-green) !important; }
.footer-menu-title, h4.footer-menu-title {
    color: var(--st-text-3) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    -webkit-text-fill-color: unset !important;
}
.footer-menu a, .footer-menu li a {
    color: var(--st-text-2) !important;
    font-size: 14px !important;
    transition: color 0.15s !important;
}
.footer-menu a:hover, .footer-menu li a:hover {
    color: var(--st-text-1) !important;
    transform: none !important;
}
.footer-license { border-top: 1px solid var(--st-brd) !important; }
.footer-license p, .footer-license-mobile { color: var(--st-text-3) !important; }
.social-icon { border-radius: 8px !important; box-shadow: none !important; }
.social-icon:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important; }

/* Payment logoları */
.footer-payments {
    background: rgba(6,7,10,0.6) !important;
    border-top: 1px solid var(--st-brd) !important;
    padding: 32px 0 !important;
}
.payment-row img,
.footer-payments .payment-row img {
    height: 26px !important;
    width: auto !important;
    opacity: 0.35 !important;
    filter: brightness(0) invert(1) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}
.payment-row img:hover,
.footer-payments .payment-row img:hover {
    opacity: 0.75 !important;
    filter: brightness(0) invert(1) !important;
    transform: scale(1.1) translateY(-2px) !important;
}

/* ================================================================
   TICKER
   ================================================================ */
.ticker-icon-wrap {
    color: var(--st-text-2) !important;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.04) !important;
    border-right: 1px solid var(--st-brd) !important;
}
.ticker-close {
    background: rgba(255,255,255,0.03) !important;
    border-left: 1px solid var(--st-brd) !important;
    color: var(--st-text-3) !important;
}
.ticker-close:hover { background: rgba(255,255,255,0.07) !important; color: var(--st-text-1) !important; }

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--st-bg); }
::-webkit-scrollbar-thumb { background: var(--st-brd-hi); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.35); }

/* ================================================================
   NAV LİNKLERİ
   ================================================================ */
.nav-link { color: var(--st-text-2) !important; }
.nav-link:hover {
    color: var(--st-text-1) !important;
    background: var(--st-elevated) !important;
    box-shadow: none !important;
}
.nav-link.active {
    color: var(--st-green) !important;
    background: var(--st-green-dim) !important;
    box-shadow: none !important;
}
.nav-link.active::after {
    background: linear-gradient(90deg, var(--st-green), rgba(var(--primary-rgb, 172, 137, 94),0.5)) !important;
}
.nav-link i { color: var(--st-text-2) !important; }
.nav-link:hover i, .nav-link.active i { color: var(--st-green) !important; }

/* ================================================================
   ÇARK İFELEK / SPIN
   ================================================================ */
.spin-wheel-gif {
    border: 2px solid rgba(154,164,176,0.40) !important;
}
.spin-wheel-btn:hover .spin-wheel-gif {
    border-color: var(--st-gold) !important;
    box-shadow: 0 0 16px rgba(154,164,176,0.25) !important;
}

/* ================================================================
   SOSYAL SIDEBAR
   ================================================================ */
.social-sidebar-item {
    background: rgba(6,7,10,0.90) !important;
    border-color: var(--st-brd-md) !important;
}
.social-sidebar-icon { color: var(--st-text-2) !important; }
.social-sidebar-item:hover {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    background: rgba(13,15,19,0.95) !important;
}

/* ================================================================
   MOBİL NAV
   ================================================================ */
.mobile-bottom-nav {
    background: var(--mobile-navigation-background, rgba(6,7,10,0.99)) !important;
    border-top: 1px solid var(--st-brd) !important;
    /* backdrop-filter kaldırıldı: mobil nav her zaman görünür ve fixed —
       iOS'ta klavye açıldıkça sürekli GPU'da render edilir = en kritik kasma kaynağı */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.6) !important;
}
.mobile-bottom-nav .mobile-nav-item,
.mobile-bottom-nav a,
.mobile-bottom-nav button { color: var(--st-text-3) !important; }

.mobile-bottom-nav .mobile-nav-item:hover,
.mobile-bottom-nav a:hover,
.mobile-bottom-nav button:hover {
    color: var(--st-text-2) !important;
    background: rgba(255,255,255,0.04) !important;
}

.mobile-bottom-nav .mobile-nav-item.active,
.mobile-bottom-nav a.active,
.mobile-bottom-nav button.active {
    color: var(--st-green) !important;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.08) !important;
}
.mobile-bottom-nav .mobile-nav-item i { color: inherit !important; }
.mobile-bottom-nav .mobile-nav-item span { color: inherit !important; }

/* ================================================================
   GENEL BUTONLAR
   ================================================================ */
.btn-primary {
    background: var(--st-silver-btn) !important;
    border-color: transparent !important;
    color: #101114 !important;
    box-shadow: none !important;
}
.btn-primary:hover {
    background: var(--st-silver-btn-hover) !important;
    box-shadow: none !important;
}
.btn-secondary {
    background: var(--st-elevated) !important;
    border: 1px solid var(--st-brd-md) !important;
    color: var(--st-text-1) !important;
}
.btn-secondary:hover { background: var(--st-hover) !important; }
.btn-outline {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    color: var(--st-green) !important;
}
.btn-outline:hover { background: var(--st-green-dim) !important; }

/* ================================================================
   DEPOSIT / WITHDRAWAL / FORM SAYFALARI
   ================================================================ */
.dp-btn-primary,
.dp-btn-green,
.wd-btn-primary,
.lb-claim-btn:not(:disabled) {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}
.dp-btn-primary::after,
.dp-btn-green::after,
.wd-btn-primary::after { display: none !important; content: none !important; }
.dp-btn-primary:hover,
.dp-btn-green:hover,
.wd-btn-primary:hover {
    background: var(--st-silver-btn-hover) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}
.dp-btn-primary:disabled,
.wd-btn-primary:disabled {
    background: var(--border, rgba(255,255,255,0.08)) !important;
    color: rgba(255,255,255,0.25) !important;
    border: none !important;
    box-shadow: none !important;
}

.dp-btn-back, .wd-btn-back {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: var(--st-text-1) !important;
    box-shadow: none !important;
}
.dp-btn-back:hover, .wd-btn-back:hover {
    background: rgba(255,255,255,0.13) !important;
    border-color: rgba(255,255,255,0.26) !important;
    color: #fff !important;
}

button[type="submit"].dp-btn,
button[type="submit"].wd-btn,
button[type="submit"].lb-claim-btn,
button[type="submit"].wd-modal-save-btn {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    box-shadow: none !important;
}

/* Input focus */
.dp-amount-input:focus,
.wd-amount-input:focus,
.lb-date-input:focus,
.wd-modal input:focus,
.wd-modal select:focus,
.dp-card-body input:focus,
.dp-card-body select:focus,
.wd-card-body input:focus,
.wd-card-body select:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.08) !important;
}
.dp-amount-input,
.wd-amount-input,
.dp-card-body input[type="text"],
.dp-card-body select,
.wd-card-body input[type="text"],
.wd-card-body select {
    border: 2px solid rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.04) !important;
    box-shadow: none !important;
    color: var(--text1, #e7e9ec) !important;
}

input[type="date"],
input[type="date"]:focus,
input[type="date"]:active {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--st-text-1) !important;
    box-shadow: none !important;
    color-scheme: dark;
}
input[type="date"]:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 172, 137, 94),0.08) !important;
}

/* ================================================================
   PROFİL SAYFASI
   ================================================================ */
.prf-btn-submit,
.prf-kyc-submit,
.aff-submit-btn,
button[type="submit"].prf-btn-submit,
button[type="submit"].prf-kyc-submit,
button[type="submit"].aff-submit-btn {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.prf-btn-submit:hover,
.prf-kyc-submit:hover,
.aff-submit-btn:hover {
    background: var(--st-silver-btn-hover) !important;
    box-shadow: none !important;
}

/* ================================================================
   GENEL KART / YÜZEY
   ================================================================ */
.card, .panel, .box {
    background: rgba(13,15,19,0.85) !important;
    border: 1px solid var(--st-brd) !important;
    backdrop-filter: none !important;
}

/* ================================================================
   MOBİL
   ================================================================ */
@media (max-width: 768px) {
    .modern-auth-btn { height: 33px !important; padding: 0 13px !important; font-size: 12px !important; }
}
@media (max-width: 480px) {
    .modern-auth-btn { height: 31px !important; padding: 0 10px !important; font-size: 11.5px !important; }
    .footer-payments .payment-row img { height: 22px !important; }
}

/* ================================================================
   GOLD OVERRIDE — eski gold CSS'lerin ezilmesi
   ================================================================ */
/* Bu satırlar fIZM1JRcoreo.css, jnVgxwvqcCh5.css vb. override eder */
:root {
    --gold-primary:  #c9a97d !important;
    --gold-light:    #f4f5f7 !important;
    --gold-dark:     #9aa4b0 !important;
    --gold-accent:   #9aa4b0 !important;
    --gradient-gold: linear-gradient(135deg, #c9a97d 0%, var(--primary, #ac895e) 50%, #9aa4b0 100%) !important;
    --primary-gold:  #c9a97d !important;
    --bg-primary:    var(--surface-elevated, #06070a) !important;
    --bg-secondary:  var(--surface, #0d0f13) !important;
    --bg-tertiary:   #15171c !important;
    --sb-gold:       #9aa4b0 !important;
    --sb-gold-bright:#c9a97d !important;
    --sb-item-hover: #9aa4b0 !important;
    --sb-border:     rgba(255,255,255,0.13) !important;
}

/* ================================================================
   AUTH MODAL EK OVERRIDE — am-img panel arka plan
   ================================================================ */
.am-img {
    background: #101114 !important;
}
/* Sol-sağ geçiş */
.am-img::before {
    background: linear-gradient(
        270deg,
        rgba(13,15,19,1) 0%,
        rgba(13,15,19,0.6) 30%,
        rgba(13,15,19,0) 100%
    ) !important;
}
.am-img::after {
    background: linear-gradient(
        135deg,
        rgba(6,7,10,0.15) 0%,
        rgba(6,7,10,0.0) 40%,
        rgba(6,7,10,0.55) 100%
    ) !important;
}

/* Global override bölümündeki arka planlar */
.auth-modal,
#loginModal, #forgotModal, #registerModal {
    background: var(--surface-elevated, #06070a) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.80), 0 0 0 1px rgba(255,255,255,0.04) !important;
}

/* Input focus - global override */
.auth-modal input:focus,
.auth-modal select:focus,
.auth-modal textarea:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.07) !important;
    background: #243e4d !important;
}

/* ================================================================
   GAME MODAL — oyuna tıklayınca açılan popup
   ================================================================ */
.game-modal {
    background: var(--surface-elevated, rgba(6,7,10,0.98)) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.8) !important;
}
.game-modal::before {
    background: var(--st-silver-btn) !important;
}
.game-modal-provider { color: var(--st-green) !important; }

/* Giriş Yap butonu (game modal içindeki) */
.game-auth-btn-login {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: var(--text-primary, #e7e9ec) !important;
    border-radius: 8px !important;
}
.game-auth-btn-login:hover {
    background: rgba(255,255,255,0.13) !important;
    border-color: rgba(255,255,255,0.26) !important;
}

/* Kayıt Ol butonu (game modal içindeki) */
.game-auth-btn-register {
    background: var(--st-silver-btn) !important;
    border: none !important;
    color: #101114 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb, 172, 137, 94),0.30) !important;
}
.game-auth-btn-register:hover {
    background: var(--st-silver-btn-hover) !important;
    box-shadow: 0 6px 28px rgba(var(--primary-rgb, 172, 137, 94),0.45) !important;
}


/* ── homepage-background.css ──────────────────────────────────────── */
/* =====================================================
   ANA SAYFA ARKAPLAN GÖRSELİ — v5 (tekrarlı, hem web hem mobil)
   -----------------------------------------------------
   v4'te background-repeat:no-repeat + tek "ekran boyu" görsel
   kullanmıştım — bu masaüstünde de bozdu (görsel sadece en üstte
   duruyor, altı düz renk kalıyor, kötü görünüyor). Artık görsel
   dikeyde TEKRAR EDİYOR (repeat-y) — sayfa ne kadar uzun olursa
   olsun arkaplan aşağıya doğru sürekli devam ediyor.

   Koyu katman artık AYRI bir element (body::after, yükseklik
   belirsizliği yaratıyordu) DEĞİL — aynı body arkaplanının İKİNCİ
   katmanı (çok katmanlı background-image). Bu şekilde koyu katman
   ve görsel HER ZAMAN birebir aynı alanı kaplıyor, garantili.
   ===================================================== */

html { background: var(--page-background, #080808) !important; }

body {
    background-color: var(--page-background, #080808) !important;
    background-image:
        linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
        var(--site-bg-image, url('/assets/images/anasayfa.webp')) !important;
    background-repeat: repeat, repeat-y !important;
    background-position: center top, center top !important;
    background-attachment: scroll, scroll !important;
    background-size: 100% 100%, 100vw auto !important;
}


/* ── page-transitions.css ──────────────────────────────────────── */
/* ============================================================
   PAGE TRANSITIONS — üst ilerleme çubuğu
   ------------------------------------------------------------
   Backoffice/sportsbook panelindeki #zbProgressBar ile BİREBİR AYNI
   mantık — sitenin kendi paletine (gümüş/bronz aksan, bkz. mor-tema.css
   --st-green / --st-green-hi) uyarlanmış hali.

   Önceki sürüm (native View Transitions + tüm body'yi fade) gerçek
   sayfa navigasyonunda ağ gecikmesi sırasında kısa bir beyaz an
   yaratıyordu. Bu sürüm ekranı ASLA gizlemiyor/beyazlatmıyor:
   navbar/sidebar sabit kalır, sadece içerik alanı (.main-content)
   hafifçe kararır (opacity .35 — tamamen gizlenmez) ve üstte ince,
   renkli bir ilerleme çubuğu dolar. Yeni sayfa geldiğinde çubuk
   tamamlanıp kaybolur, içerik yumuşak bir fade-in ile görünür.
   ============================================================ */

#ptProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary, #ac895e), #c9a97d, var(--primary, #ac895e));
  box-shadow: 0 0 10px rgba(var(--primary-rgb, 172, 137, 94), .55);
  z-index: 999999;
  opacity: 0;
  transition: width .25s ease, opacity .2s ease;
  pointer-events: none;
}
#ptProgressBar.pt-active { opacity: 1; }
#ptProgressBar.pt-done {
  width: 100% !important;
  transition: width .15s ease, opacity .3s ease .1s;
  opacity: 0;
}

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

/* header.php'de <main class="main-content"> ile açılıp footer.php'de
   kapanan asıl içerik sarmalayıcısı — navbar/sidebar bunun DIŞINDA
   olduğu için geçiş sırasında yerinden oynamaz/kaybolmaz. */
.main-content {
  animation: ptFadeIn .28s ease both;
}
.main-content.pt-leaving {
  animation: none;
  opacity: .35;
  transition: opacity .16s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .main-content,
  .main-content.pt-leaving {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
  #ptProgressBar { transition: none !important; }
}


/* ── auth-modals.css ──────────────────────────────────────── */
/* ================================================================
   AUTH MODALS — kökten revizyon v2 (tek otorite dosya)
   ----------------------------------------------------------------
   css/EYlgAACTP9gy.css hâlâ yüklü ve dokunulmadı (temel yapı: görsel
   panel, input/select/label stilleri, form iskeleti). Bu dosya <head>
   'de EN SON yüklenir ve yüksek özgüllük (html body #id) kullanır —
   başka hiçbir dosyadaki çakışan bir kural bunu ezemez.

   v2 DÜZELTMESİ (önemli): v1'deki açılış/kapanış animasyon kuralı
   MEDYA SORGUSU OLMADAN tüm ekranlara uygulanıyordu ve mobildeki
   orijinal "tam ekran, üstten kayarak açılan" transform'unu (bkz.
   EYlgAACTP9gy.css @media max-width:640px) eziyordu — modal mobilde
   ekran dışına kayıyordu. Artık TÜM masaüstüne özel kurallar
   (animasyon dahil) @media (min-width:641px) içinde; mobile HİÇ
   dokunulmuyor, orijinal tam ekran davranışı aynen duruyor.

   İçindekiler:
     1) [≥641px] Açılış/kapanış animasyonu
     2) [≥641px] EŞİT BOYUT — giriş & kayıt birebir aynı çerçeve;
        şifremi unuttum aynı genişlikte ama içeriğine uygun, daha
        kompakt bir yükseklikte (gereksiz boşluk bırakmasın diye)
     3) [≥641px] SABİT ÇERÇEVE — içerik ne olursa olsun modal ASLA
        büyüyüp küçülmez, taşan içerik iç scroll ile akar
     4) [≥641px] Giriş / Şifremi Unuttum — dengeli, nefes alan,
        etiketli (am-label) form düzeni
     5) hCaptcha — etiketli, hizalı, sabit yer kaplayan (sıçramaz)
     6) Buton — metal degrade + yumuşak hover/aktif/yükleniyor
     7) Uyarı kutusu — yumuşak aç/kapa
   ================================================================ */

/* ────────────────────────────────────────────────────────────
   1) [≥641px] AÇILIŞ / KAPANIŞ — premium, kasmasız (GPU dostu)
   ------------------------------------------------------------
   NOT: Önceki sürüm transform'a scale() de ekliyordu — modal içinde
   büyük bir fotoğraf (.am-img) olduğu için scale animasyonu her
   karede o görseli yeniden rasterize ettiriyor, backdrop-filter:
   blur() ile (bkz. EYlgAACTP9gy.css .auth-modal-overlay) aynı anda
   çalışınca belirgin bir kasmaya yol açıyordu. Artık SADECE opacity
   + translateY (saf compositor işlemi, yeniden çizim gerektirmez)
   kullanılıyor — GPU dostu, kasmasız.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 641px) {
    html body .auth-modal-overlay {
        transition: opacity .26s ease, visibility .26s ease !important;
    }
    html body .auth-modal,
    html body #loginModal,
    html body #forgotModal,
    html body #registerModal {
        transition: opacity .28s ease-out,
                    transform .28s ease-out,
                    visibility .28s ease !important;
        transform: translate(-50%, calc(-50% + 10px)) !important;
        will-change: transform, opacity;
    }
    html body .auth-modal.active,
    html body #loginModal.active,
    html body #forgotModal.active,
    html body #registerModal.active {
        transform: translate(-50%, -50%) !important;
    }
}
@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
    html body .auth-modal,
    html body #loginModal,
    html body #forgotModal,
    html body #registerModal {
        transition: opacity .15s ease, visibility .15s ease !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* ────────────────────────────────────────────────────────────
   2) + 3) [≥641px] EŞİT BOYUT & SABİT ÇERÇEVE
   ------------------------------------------------------------
   Giriş ve Kayıt birebir aynı çerçevede (kullanıcı isteği: "kayıt
   ol ve giriş yap herşey eşit olsun"). Şifremi Unuttum aynı GENİŞLİKTE
   (marka/görsel tutarlılık) ama tek bir e-posta alanından ibaret
   olduğu için daha kompakt bir yükseklikte — dev gibi boş durmasın.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 641px) {
    html body #loginModal,
    html body #registerModal {
        width: min(860px, 94vw) !important;
        height: min(620px, 86vh) !important;
        max-width: none !important;
        max-height: min(620px, 86vh) !important;
        min-height: 0 !important;
    }
    html body #forgotModal {
        width: min(860px, 94vw) !important;
        height: min(430px, 80vh) !important;
        max-width: none !important;
        max-height: min(430px, 80vh) !important;
        min-height: 0 !important;
    }

    /* .am-form zaten (EYlgAACTP9gy.css) flex:1 + align-self:stretch +
       overflow-y:auto ile kurulu — üst kapsayıcı SABİT yükseklikte
       olduğu için bu, taşan içeriği (ör. kayıt formunun 2. adımı)
       otomatik iç scroll'a çevirir; modal KENDİSİ asla büyümez. */
    html body .am-form {
        height: 100% !important;
    }
}

/* ────────────────────────────────────────────────────────────
   4) [≥641px] Giriş / Şifremi Unuttum — dengeli, etiketli düzen
   ------------------------------------------------------------
   includes/header.php'de artık her alanın üstünde am-label var
   (Kullanıcı Adı, Şifre, Güvenlik Doğrulaması...) — bu hem daha
   profesyonel/okunur bir form hem de boşluğu ANLAMLI içerikle
   dolduruyor (sadece boş margin artırmak yerine).
   ──────────────────────────────────────────────────────────── */
@media (min-width: 641px) {
    html body #loginModal .am-body,
    html body #forgotModal .am-body {
        max-width: 380px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    html body #loginModal .am-group,
    html body #forgotModal .am-group {
        margin-bottom: 20px !important;
    }
    html body #loginModal .am-group:last-child,
    html body #forgotModal .am-group:last-child {
        margin-bottom: 0 !important;
    }
    html body #loginModal .am-remember-row,
    html body #forgotModal .am-remember-row {
        margin: 2px 0 20px !important;
    }
    html body #loginModal .am-label,
    html body #forgotModal .am-label,
    html body #registerModal .am-label {
        color: #9aa8b4 !important;
    }
}

/* ────────────────────────────────────────────────────────────
   5) hCaptcha — etiketli, forma entegre görünüm
   ──────────────────────────────────────────────────────────── */
html body .am-captcha-wrap {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 2px !important;
}
html body .am-captcha-wrap > div {
    /* hCaptcha widget'ı (normal/dark) yaklaşık 78px yüksekliğinde —
       script yüklenip render olana kadar bu alanı önceden ayırarak
       aniden belirip formun geri kalanını aşağı itmesini (layout
       sıçraması) önlüyoruz. */
    min-height: 78px !important;
    max-width: 100% !important;
}

/* ────────────────────────────────────────────────────────────
   6) BUTON — metal degrade + hover/aktif/yükleniyor
   ──────────────────────────────────────────────────────────── */
html body #loginModal #loginSubmitBtn,
html body #forgotModal #forgotSubmitBtn,
html body #registerModal #registerSubmitBtn,
html body #regPanel1 .am-btn,
html body .auth-modal .am-btn {
    background: linear-gradient(180deg, var(--button-primary-hover, #D5B67D) 0%, var(--button-primary-bg, #C6975A) 55%, var(--primary-active, #B8934F) 100%) !important;
    color: var(--button-primary-text, #0A0B0D) !important;
    -webkit-text-fill-color: var(--button-primary-text, #0A0B0D) !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22) !important;
    transition: background .18s ease, box-shadow .18s ease, transform .12s ease !important;
    position: relative !important;
}
html body #loginModal #loginSubmitBtn:hover,
html body #loginModal #loginSubmitBtn:focus-visible,
html body #forgotModal #forgotSubmitBtn:hover,
html body #forgotModal #forgotSubmitBtn:focus-visible,
html body #registerModal #registerSubmitBtn:hover,
html body #registerModal #registerSubmitBtn:focus-visible,
html body #regPanel1 .am-btn:hover,
html body #regPanel1 .am-btn:focus-visible,
html body .auth-modal .am-btn:hover,
html body .auth-modal .am-btn:focus-visible {
    background: linear-gradient(180deg, var(--button-primary-hover, #D5B67D) 0%, var(--button-primary-hover, #D5B67D) 55%, var(--button-primary-bg, #C6975A) 100%) !important;
    color: var(--button-primary-text, #0A0B0D) !important;
    -webkit-text-fill-color: var(--button-primary-text, #0A0B0D) !important;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb, 172, 137, 94),0.35), inset 0 1px 0 rgba(255,255,255,0.28) !important;
    filter: none !important;
    transform: none !important;
}
html body #loginModal #loginSubmitBtn:active,
html body #forgotModal #forgotSubmitBtn:active,
html body #registerModal #registerSubmitBtn:active,
html body #regPanel1 .am-btn:active,
html body .auth-modal .am-btn:active {
    background: var(--primary-active, #B8934F) !important;
    color: var(--button-primary-text, #0A0B0D) !important;
    -webkit-text-fill-color: var(--button-primary-text, #0A0B0D) !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.35) !important;
    transform: none !important;
}
html body .auth-modal .am-btn:disabled {
    opacity: 0.5 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* Yükleniyor durumu: metin+ok yumuşakça solar, spinner butonun tam
   ortasında (mutlak konumlu — buton boyutunu ETKİLEMEZ) belirir. */
html body .auth-modal .am-btn > span,
html body .auth-modal .am-btn > i.fa-arrow-right {
    transition: opacity .15s ease !important;
}
html body .auth-modal .am-btn.am-btn-loading > span,
html body .auth-modal .am-btn.am-btn-loading > i.fa-arrow-right {
    opacity: 0 !important;
}
html body .auth-modal .am-btn > i.fa-spinner {
    display: inline-flex !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
    font-size: 16px !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) !important;
    transition: opacity .15s ease !important;
    pointer-events: none !important;
}
html body .auth-modal .am-btn.am-btn-loading > i.fa-spinner {
    opacity: 1 !important;
}

/* ────────────────────────────────────────────────────────────
   7) UYARI KUTUSU — yumuşak aç/kapa
   ------------------------------------------------------------
   Modal artık SABİT çerçeveli olduğu için bu, saf bir kozmetik
   incelik: mesaj beliriken/kaybolurken sert bir "pop" yerine
   yumuşak bir genişleme/opaklık geçişi. JS tarafı (bkz.
   js/AbTu5X1YqWg2.js) sadece 'am-visible' sınıfını ekleyip
   çıkarıyor; renk/ikon stilleri .auth-alert / .am-alert kurallarından
   (EYlgAACTP9gy.css, base tema) geliyor, burada SADECE görünürlük/
   boyut davranışı yönetiliyor.
   ──────────────────────────────────────────────────────────── */
html body #loginAlert,
html body #forgotAlert,
html body #registerAlert {
    display: flex !important;
    align-items: center !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-width: 0 !important;
    transition: max-height .3s cubic-bezier(.16,1,.3,1),
                opacity .2s ease,
                padding .24s ease,
                margin-bottom .24s ease,
                border-width .24s ease !important;
}
html body #loginAlert.am-visible,
html body #forgotAlert.am-visible,
html body #registerAlert.am-visible {
    max-height: 90px !important;
    opacity: 1 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 13px !important;
    border-width: 1px !important;
}

/* ────────────────────────────────────────────────────────────
   INPUT FOCUS — mobil tasarım spesifikasyonu: "Mavi focus arka
   planını ve mavi borderı kaldır. Focus durumunda 1px altın border
   ve çok hafif altın dış gölge kullan." Eski hâl focus'ta arka planı
   #1e3244 (mavi tonlu lacivert) yapıyordu — border zaten altındı ama
   arka plan mavi kalıyordu. Artık nötr koyu (mavi değil).
   ──────────────────────────────────────────────────────────── */
html body .auth-modal .am-input:focus,
html body .auth-modal .am-select:focus,
html body .auth-modal .am-textarea:focus {
    border-color: #C6A365 !important;
    background: #10151C !important;
    box-shadow: 0 0 0 3px rgba(198,163,101,0.12) !important;
}

/* ────────────────────────────────────────────────────────────
   FORM ALANLARI — mobil tasarım spesifikasyonu
   ------------------------------------------------------------
   Şifre göster/gizle butonu görsel ikonu ~13px'ti ama dokunma alanı
   sadece 4px padding ile ~21px'ti — spesifikasyonun istediği minimum
   44×44px'in çok altında. Görsel ikon boyutu AYNI kalıyor (büyük bir
   göz ikonu istenmiyor), sadece görünmez dokunma alanı büyütüldü.
   Mobil input yüksekliği de 46px'ten spesifikasyon aralığına (48px)
   çekildi.
   ──────────────────────────────────────────────────────────── */
html body .auth-modal .am-pw-toggle {
    width: 44px !important;
    height: 44px !important;
    right: -3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
@media (max-width: 640px) {
    html body .auth-modal .am-input,
    html body .auth-modal .am-select {
        height: 48px !important;
    }
    html body .auth-modal .am-phone .am-input {
        height: 48px !important;
    }
    html body .auth-modal .am-date-input {
        height: 48px !important;
        line-height: 48px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   KAPATMA TUŞU — sade, dairesiz. Sadece ikon + renk geçişi;
   arka plan/kenarlık/daire YOK. Kontrast artırıldı (soluk gri
   yerine daha belirgin bir ton), hover'da altına dönüyor.
   ──────────────────────────────────────────────────────────── */
html body .auth-modal .am-close {
    background: none !important;
    border: none !important;
    color: #c7ccd3 !important;
    font-size: 16px !important;
    transition: color .16s ease, transform .16s ease !important;
}
html body .auth-modal .am-close:hover {
    background: none !important;
    border: none !important;
    color: #C6A365 !important;
    transform: rotate(90deg) !important;
}
html body .auth-modal .am-close:active {
    transform: rotate(90deg) scale(0.9) !important;
}
@media (prefers-reduced-motion: reduce) {
    html body .auth-modal .am-close:hover,
    html body .auth-modal .am-close:active {
        transform: none !important;
    }
}


/* ── navbar-auth-buttons.css ──────────────────────────────────────── */
/* ================================================================
   NAVBAR — Giriş Yap / Kayıt Ol butonları (v2 — verilen tam spesifikasyon)
   ----------------------------------------------------------------
   .modern-auth-btn-login / -register sınıfları site genelinde birden
   fazla eski CSS dosyasında tanımlı; bu dosya <head>'de EN SON
   yüklenir ve yüksek özgüllük kullanır — hangi eski dosyada ne kalmış
   olursa olsun bu kazanır.

   Boyut (height/min-width/padding) SADECE masaüstünde (≥769px)
   uygulanıyor — mor-tema.css'teki mevcut mobil küçültme kurallarını
   (768px: 33px yükseklik, 480px: 31px) EZMESİN diye. Renk/kenarlık/
   hover davranışı her ekranda aynı.

   Kayıt Ol, Giriş Yap'tan ~%18 daha geniş (min-width farkı) — birincil
   işlem olduğu daha net anlaşılsın diye. İkisinde de hover'da HAREKET
   yok (transform:none) — sadece renk/parlaklık/gölge değişiyor.
   ================================================================ */

@media (min-width: 769px) {
    html body .modern-auth-btn {
        height: 42px !important;
        border-radius: 9px !important;
    }
    html body .modern-auth-btn-login {
        min-width: 118px !important;
        padding: 0 20px !important;
    }
    html body .modern-auth-btn-register {
        min-width: 140px !important;
        padding: 0 24px !important;
    }
}

/* ── Giriş Yap — ikincil buton ── */
html body .modern-auth-btn-login {
    background: var(--button-secondary-bg, rgba(255,255,255,0.025)) !important;
    color: var(--button-secondary-text, #E8E8E8) !important;
    border: 1px solid rgba(198,163,101,0.45) !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease !important;
    transform: none !important;
}
html body .modern-auth-btn-login:hover,
html body .modern-auth-btn-login:focus-visible {
    background: var(--button-secondary-hover, rgba(198,163,101,0.10)) !important;
    border-color: #C6A365 !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}
html body .modern-auth-btn-login:active {
    background: rgba(198,163,101,0.16) !important;
    transform: none !important;
}
html body .modern-auth-btn-login .btn-content,
html body .modern-auth-btn-login .btn-text {
    color: inherit !important;
}
html body .modern-auth-btn-login .btn-icon,
html body .modern-auth-btn-login .btn-icon * {
    stroke: #C6A365 !important;
}

/* ── Kayıt Ol — birincil buton (mat şampanya-altın degrade) ── */
html body .modern-auth-btn-register {
    background: var(--button-primary-bg, linear-gradient(135deg, #D2B071, #A98348)) !important;
    color: var(--button-primary-text, #0A0B0D) !important;
    border: 1px solid #D8BC82 !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    filter: brightness(1) !important;
    transition: filter .18s ease, box-shadow .18s ease !important;
    transform: none !important;
}
html body .modern-auth-btn-register:hover,
html body .modern-auth-btn-register:focus-visible {
    filter: brightness(1.08) !important;
    box-shadow: 0 5px 18px rgba(198, 163, 101, 0.22) !important;
    transform: none !important;
}
html body .modern-auth-btn-register:active {
    filter: brightness(0.97) !important;
    transform: none !important;
}
html body .modern-auth-btn-register .btn-content,
html body .modern-auth-btn-register .btn-text {
    color: var(--button-primary-text, #0A0B0D) !important;
}
html body .modern-auth-btn-register .btn-icon,
html body .modern-auth-btn-register .btn-icon * {
    stroke: #0A0B0D !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .modern-auth-btn-login,
    html body .modern-auth-btn-register {
        transition: none !important;
    }
}

/* ────────────────────────────────────────────────────────────
   PROFİL DROPDOWN — mobil tasarım spesifikasyonu
   ------------------------------------------------------------
   Eski hâl: min-width 260px, mavi kenarlık/gölge (rgba(59,130,246,..)
   — sitenin geri kalanıyla alakasız). Artık spesifikasyon aralığında
   (220-240px) ve viewport'tan taşmayacak şekilde sağdan sabit
   mesafeli; kenarlık/gölge nötr + altın vurgulu.
   ──────────────────────────────────────────────────────────── */
html body .user-dropdown-menu {
    width: 230px !important;
    min-width: 230px !important;
    max-width: calc(100vw - 24px) !important;
    right: 8px !important;
    border-color: rgba(198,164,106,0.18) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) !important;
}
@media (max-width: 480px) {
    html body .user-dropdown-menu {
        right: 4px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   AFFILIATE / BENİ ARA — Para Yatır butonuyla hizalı yükseklik
   ------------------------------------------------------------
   SADECE masaüstünde (≥769px) büyütüldü — mobilde bu yükseklik
   logoyla çakışmaya sebep oluyordu, mobil orijinal (28px) haliyle
   kalıyor, hiç dokunulmadı.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    html body .header-img-btn img {
        height: 34px !important;
    }
}


/* ── sidebar-cards.css ──────────────────────────────────────── */
/* ================================================================
   SIDEBAR — DİL SEÇİCİ
   ----------------------------------------------------------------
   NOT: Bu dosya önceden sidebar menü öğelerini de ("kart" tasarımı)
   yeniden stilliyordu — o kısım kullanıcı isteğiyle GERİ ALINDI,
   sidebar menüsü artık tamamen eski/orijinal haliyle (yay5WrRTWPEl.css)
   çalışıyor, buna hiç dokunulmuyor. Bu dosyada SADECE sidebar'ın en
   altındaki dil seçici (bkz. includes/header.php — #sbLangWrap) kaldı.
   <head>'de en son yüklenir.
   ================================================================ */

html body .sb-lang {
    position: relative !important;
    margin: 3px 10px 8px !important;
}
html body .sb-lang-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    color: #b7b7c0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Manrope', sans-serif !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
html body .sb-lang-btn:hover,
html body .sb-lang.open .sb-lang-btn {
    background: rgba(var(--z-gold-rgb), 0.09) !important;
    border-color: rgba(var(--z-gold-rgb), 0.35) !important;
    color: var(--z-gold-light) !important;
}
html body .sb-lang-flag {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.14) !important;
}
html body .sb-lang-chevron {
    width: 14px !important;
    height: 14px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    opacity: 0.65 !important;
    transition: transform .2s ease !important;
}
html body .sb-lang.open .sb-lang-chevron {
    transform: rotate(180deg) !important;
}

html body .sb-lang-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(100% + 6px) !important;
    background: #141414 !important;
    border: 1px solid rgba(var(--z-gold-rgb), 0.25) !important;
    border-radius: 10px !important;
    padding: 5px !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.55) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
    z-index: 40 !important;
}
html body .sb-lang.open .sb-lang-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
html body .sb-lang-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Manrope', sans-serif !important;
    color: #b7b7c0 !important;
    white-space: nowrap !important;
}
html body .sb-lang-option--active {
    color: var(--z-gold-light) !important;
    background: rgba(var(--z-gold-rgb), 0.12) !important;
}
html body .sb-lang-check {
    width: 14px !important;
    height: 14px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    color: var(--z-gold-light) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .sb-lang-btn,
    html body .sb-lang-chevron,
    html body .sb-lang-menu {
        transition: none !important;
    }
}

/* ────────────────────────────────────────────────────────────
   SIDEBAR SCROLLBAR — görünmez, ama kaydırma çalışmaya devam
   ediyor. Önceden sadece mobilde gizliydi, artık masaüstünde de
   (css/yay5WrRTWPEl.css'in kendi ince 3px scrollbar'ını eziyor).
   ──────────────────────────────────────────────────────────── */
html body .casino-sidebar .sb-nav {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overscroll-behavior: contain !important;
}
html body .casino-sidebar .sb-nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* ────────────────────────────────────────────────────────────
   SIDEBAR RENK SİSTEMİ — design-tokens.css'teki resmi --z-gold /
   --z-gold-light paletiyle birebir aynı (dil seçici de bu paleti
   kullanıyor, bkz. yukarısı). Normalde mat gold ikon + gri yazı;
   hover'da ikon+yazı birlikte açık gold'a geçer (arka plan/çizgi
   yok — sade); aktifte aynı ton kalıcı olur ve dolu, net bir sol
   çizgiyle "buradasınız" hissi verir.
   ──────────────────────────────────────────────────────────── */
html body .casino-sidebar .sb-text {
    color: var(--text-secondary, #9aa1ac) !important;
    transition: color .15s ease !important;
}
html body .casino-sidebar .sb-icon {
    color: var(--z-gold) !important;
    transition: color .15s ease !important;
}
html body .casino-sidebar .sb-item:hover .sb-icon {
    color: var(--z-gold-light) !important;
}

/* Üzerine gelince (hover): arka plan kutusu / sol çizgi yok — sadece
   ikon ve yazı açık gold'a geçiyor. */
html body .casino-sidebar .sb-item:hover {
    background: transparent !important;
    border-left-color: transparent !important;
}
html body .casino-sidebar .sb-item:hover .sb-text {
    color: var(--z-gold-light) !important;
}

/* ── Aktif menü öğesi — hover'daki aynı ton kalıcı hale geliyor,
   ama işaret bu kez SOLUK değil, dolu ve net (kararsız/yıkanmış
   görünmesin diye) ── */
html body .casino-sidebar .sb-item.active {
    background: rgba(var(--z-gold-rgb), 0.09) !important;
    border-left: 2px solid var(--z-gold) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
}
html body .casino-sidebar .sb-item.active .sb-icon {
    color: var(--z-gold-light) !important;
}
html body .casino-sidebar .sb-item.sb-item-aviator .sb-icon {
    color: #ef4444 !important;
}
html body .casino-sidebar .sb-item.active .sb-text {
    color: var(--z-gold-light) !important;
}

/* ────────────────────────────────────────────────────────────
   İSTİSNALAR — bu 4 öğe genel gold sistemine değil, kendi anlamsal
   rengine sahip (Çıkış Yap/Aviator kırmızı, Para Yatır yeşil,
   Para Çek kırmızı). Aktif olduklarında yine de genel altın kuralı
   (yukarıda, daha yüksek özgüllükte) devreye giriyor — tutarlılık
   bozulmuyor.
   ──────────────────────────────────────────────────────────── */
html body .casino-sidebar a[href="/logout"] .sb-icon,
html body .casino-sidebar a[href="/logout"]:hover .sb-icon {
    color: #D6483F !important;
}
html body .casino-sidebar a[href^="/play?game_id=palace_aviator"] .sb-icon,
html body .casino-sidebar a[href^="/play?game_id=palace_aviator"]:hover .sb-icon {
    color: #D6483F !important;
}
html body .casino-sidebar a[href="/deposit"] .sb-icon,
html body .casino-sidebar a[href="/deposit"]:hover .sb-icon {
    color: #3FAE79 !important;
}
html body .casino-sidebar a[href="/withdrawal"] .sb-icon,
html body .casino-sidebar a[href="/withdrawal"]:hover .sb-icon {
    color: #D6483F !important;
}

/* ────────────────────────────────────────────────────────────
   SIDEBAR İKON RENKLERİ — mobil tasarım spesifikasyonu gereği
   sadeleştirildi: "Pasif ikonları gri, aktif ikonu altın kullan.
   Aviator için kırmızı, promosyon için pembe gibi rastgele farklı
   ikon renklerini kaldır." Önceki kürasyonlu palet (her öğeye ayrı
   renk) tamamen kaldırıldı. Artık ikonlar HİÇBİR özel renk almıyor
   — pasif haldeyken zaten .sb-item'ın metin rengini (gri,
   var(--sb-item-color)) miras alıyor, aktifken yukarıdaki kural
   altına çeviriyor. Poker'in SVG'si de currentColor kullandığı için
   (bkz. includes/header.php) bu davranışa otomatik uyuyor.
   ──────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────
   KATEGORİ BAŞLIKLARI — harf aralığı biraz azaltıldı, renk bir
   ton açıldı (daha okunur, daha az "bağırıyor")
   ──────────────────────────────────────────────────────────── */
html body .casino-sidebar .sb-section-title {
    letter-spacing: 1.3px !important;
    color: rgba(198, 204, 213, 0.7) !important;
}

/* ────────────────────────────────────────────────────────────
   SIDEBAR / İÇERİK AYIRICI ÇİZGİ — biraz daha belirsiz
   ──────────────────────────────────────────────────────────── */
html body .casino-sidebar {
    border-right: 1px solid rgba(255,255,255,0.03) !important;
}

/* ────────────────────────────────────────────────────────────
   İKON KALINLIĞI/BOYUTU — bu tek değişiklik korundu (19px → 18px)
   ──────────────────────────────────────────────────────────── */
html body .casino-sidebar .sb-icon {
    width: 18px !important;
    height: 18px !important;
}

/* ────────────────────────────────────────────────────────────
   SIDEBAR'DAKİ GİRİŞ/KAYIT LİNKLERİ — masaüstünde gizli
   ------------------------------------------------------------
   Sağ üstteki navbar butonlarıyla birebir aynısı olduğu için
   masaüstünde tekrar gösterilmiyor (sidebar'ı gereksiz uzatıyordu).
   Mobilde (≤1024px, sidebar'ın kendi kırılma noktası — bkz.
   css/yay5WrRTWPEl.css) aynen kalıyor.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    html body .sb-auth-links-mobile {
        display: none !important;
    }
}

/* ────────────────────────────────────────────────────────────
   CASINO / SPOR — aktif sekme rengi site altınına çevrildi
   ------------------------------------------------------------
   Eski hâl (iki ayrı yuvarlak köşeli "pill", ikonlu) korunuyor —
   sadece aktif durumdaki eski mavi (#1a73e8) / turuncu (#e8621a)
   renkleri sitenin kendi altın degrade butonlarıyla (bkz.
   css/auth-modals.css .am-btn) aynı dile çevrildi.
   ──────────────────────────────────────────────────────────── */
html body .casino-sidebar .sb-tab.active-casino,
html body .casino-sidebar .sb-tab.active-spor {
    background: linear-gradient(180deg, #d9bd98 0%, #c9a97d 55%, var(--primary, #ac895e) 100%) !important;
    color: #0a1a0a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
html body .casino-sidebar .sb-tab.active-casino:hover,
html body .casino-sidebar .sb-tab.active-spor:hover {
    background: linear-gradient(180deg, #e3caa3 0%, #d3b489 55%, #b6935f 100%) !important;
    color: #0a1a0a !important;
}

/* ────────────────────────────────────────────────────────────
   MOBİL SIDEBAR — profesyonel/uygulama hissi (sadece ≤1024px,
   sidebar'ın kendi kırılma noktası — masaüstüne dokunulmuyor)
   ------------------------------------------------------------
   - Biraz daha geniş (232px → ekranın ~80%'i, azami 288px)
   - ÜST (logo/kapat) ve ALT (dil seçici) SABİT — sadece ORTADAKİ
     menü listesi kayıyor. Bunun için includes/header.php'de dil
     seçici artık <nav> DIŞINA, ayrı bir .sb-footer'a taşındı;
     burada .casino-sidebar'ın kendisi değil, sadece .sb-nav scroll
     ediyor (flex:1 + overflow-y:auto + min-height:0 — flex içinde
     scroll'un çalışması için min-height:0 şart, yoksa .sb-nav
     içeriği kadar büyüyüp scroll hiç tetiklenmez).
   - Scrollbar görünmez ama scroll aynen çalışıyor
   - Açılış/kapanış daha yumuşak bir eğri (premium easing)
   - Arka plan perdesi artık aniden açılıp kapanmıyor, yumuşak
     opaklık geçişiyle beliriyor/kayboluyor
   - Sağ kenar hafif yuvarlatıldı — düz bir dikdörtgen yerine
     gerçek bir "panel" gibi duruyor
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    html body .casino-sidebar {
        width: min(80vw, 288px) !important;
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        transition: transform .2s cubic-bezier(.16,1,.3,1) !important;
        box-shadow: none !important;
        /* NOT: Önceki sürümde köşeleri yuvarlatmak için border-radius +
           overflow:hidden kullanıyordum — bu ikisi transform ile aynı
           elemanda birleşince iOS Safari'de bilinen bir hataya yol
           açıyor (arka plan soluk/yarı saydam render ediliyor). Bunu
           düzeltmek için eklediğim -webkit-mask-image hilesi ise bu
           uzun/dar elemanda (288px genişlik x tüm ekran yüksekliği)
           KENDİSİ bir vinyet (merkezden kenara solma) etkisi yaratıp
           metin/ikonların soluk görünmesine sebep oluyordu — yani
           "düzeltme" yeni bir sorun yaratmıştı. En sağlam çözüm:
           köşe yuvarlatmayı tamamen kaldırmak — düz kenar, ama HİÇ
           solma/şeffaflık sorunu yok. */
        background-color: var(--sb-bg, #0a0a0a) !important;
        /* NOT: 100vh, iOS'ta Safari/Chrome'un alt URL çubuğunun kapladığı
           alanı hesaba katmıyor — sidebar'ın alt kısmı (dil seçici) o
           çubuğun ARKASINDA kalıyordu. 100dvh (dynamic viewport height)
           tarayıcı arayüzü açık/kapalıyken GERÇEK görünür yüksekliği
           kullanır. Desteklemeyen eski tarayıcılarda üstteki 100vh
           satırı fallback olarak devrede kalır (aşağıdaki satır
           anlaşılmazsa yok sayılır, üsttekine geri döner). */
        height: 100vh !important;
        height: 100dvh !important;
    }
    html body.has-ticker .casino-sidebar {
        height: 100vh !important;
        height: 100dvh !important;
    }
    html body .casino-sidebar.sidebar-open {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        box-shadow: 12px 0 48px rgba(0,0,0,0.55) !important;
    }

    /* ÜST — logo/kapat, sabit */
    html body .casino-sidebar .sb-header {
        flex-shrink: 0 !important;
        padding: 0 18px !important;
    }

    /* Kapatma tuşu — modaldakiyle birebir aynı: sade, dairesiz,
       sadece ikon + renk geçişi. */
    html body .casino-sidebar .sb-hdr-close {
        background: none !important;
        border: none !important;
        color: #c7ccd3 !important;
        font-size: 16px !important;
        transition: color .16s ease, transform .16s ease !important;
    }
    html body .casino-sidebar .sb-hdr-close:hover {
        background: none !important;
        color: #C6A365 !important;
        transform: rotate(90deg) !important;
    }
    html body .casino-sidebar .sb-hdr-close:active {
        transform: rotate(90deg) scale(0.9) !important;
    }

    /* Metin/ikonlar mobilde daha belirgin olsun — soluk gri yerine
       daha yüksek kontrastlı tonlar, ikon opaklığı tam. */
    html body .casino-sidebar .sb-text {
        color: #A9ADB5 !important;
    }
    html body .casino-sidebar .sb-icon {
        opacity: 1 !important;
    }
    html body .casino-sidebar .sb-section-title {
        color: #8a919b !important;
    }

    /* VIP başlık ikonu — web'deki gibi (taç ~otel wheel ikonuyla eşit
       boyutta, yazı hemen altında) görünmesi isteniyor. Yapı hâlâ
       "taşırma/negatif margin YOK" prensibiyle sağlam kalıyor, sadece
       boyut web'e yakın (32px, yanındaki .sb-hdr-spin ile aynı görsel
       ağırlıkta) çıkarıldı. */
    html body .casino-sidebar .sb-hdr-vip {
        width: 40px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
    }
    html body .casino-sidebar .sb-hdr-vip #vip-lottie-mob {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    html body .casino-sidebar .sb-hdr-vip #vip-lottie-mob svg {
        width: 32px !important;
        height: 32px !important;
        transform: none !important;
    }
    html body .casino-sidebar .sb-hdr-vip span {
        display: block !important;
        margin-top: -8px !important;
        font-size: 8px !important;
        line-height: 1 !important;
    }

    /* ORTA — SADECE bu kısım scroll ediyor, scrollbar gizli */
    html body .casino-sidebar .sb-nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px 0 16px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    html body .casino-sidebar .sb-nav::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

    /* ALT — dil seçici, sabit, üstünde ince bir ayraç çizgisi */
    html body .casino-sidebar .sb-footer {
        flex-shrink: 0 !important;
        background: var(--sb-bg, #0a0a0a) !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
        padding-top: 2px !important;
    }
    html body .casino-sidebar .sb-footer .sb-divider {
        display: none !important;
    }

    /* Arka plan perdesi — yumuşak açılış/kapanış, spesifikasyon
       gereği rgba(0,0,0,0.72) */
    html body .sidebar-overlay {
        display: block !important;
        background: rgba(0,0,0,0.72) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity .2s ease, visibility .2s ease !important;
        pointer-events: none !important;
    }
    html body .sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Menü satırları — spesifikasyon gereği minimum 44px dokunma alanı */
    html body .casino-sidebar .sb-item {
        min-height: 44px !important;
        padding: 12px 18px !important;
    }

    /* ────────────────────────────────────────────────────────────
       ALT NAVİGASYON — "Bonus" butonundaki yoğun pembe/kırmızı neon
       parlama, sürekli renk-dönüşü ve nefes animasyonu kaldırıldı.
       Spesifikasyon: "Bonus butonunu maksimum 50–52px tut. Aktif
       durumda altın/amber renk ve ÇOK HAFİF bir halo kullan. Sürekli
       atan/yanıp sönen animasyon kullanma." Artık sitenin kendi metal
       altın degradesi + tek, sabit, ince bir gölge var — animasyon yok.
       ──────────────────────────────────────────────────────────── */
    html body .bonus-3d-circle {
        width: 50px !important;
        height: 50px !important;
        margin-top: -22px !important;
        background: linear-gradient(180deg, #d9bd98 0%, #c9a97d 55%, var(--primary, #ac895e) 100%) !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 0 0 3px rgba(198,163,101,0.15), inset 0 1px 0 rgba(255,255,255,0.22) !important;
        animation: none !important;
    }
    html body .bonus-3d-ring,
    html body .bonus-3d-glow,
    html body .bonus-3d-shine {
        display: none !important;
    }
    html body .bonus-3d-icon {
        fill: #0a1a0a !important;
        filter: none !important;
    }
    html body .bonus-3d-label {
        background: none !important;
        -webkit-text-fill-color: #C6A365 !important;
        color: #C6A365 !important;
    }
    html body .mobile-nav-bonus-item:active .bonus-3d-circle {
        transform: scale(0.96) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 4px rgba(0,0,0,0.25) !important;
    }

    /* Casino/Spor sekmeleri — kullanıcı isteğiyle mobile özel HİÇBİR
       boyut/dolgu ayarı yapılmıyor artık; web'deki (beğenilen) CSS
       aynen kullanılıyor. */
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    html body .casino-sidebar,
    html body .sidebar-overlay {
        transition: none !important;
    }
}


/* ── site-font.css ──────────────────────────────────────── */
/* ================================================================
   SİTE GENELİ YAZI TİPİ — Manrope
   ----------------------------------------------------------------
   Mobil tasarım spesifikasyonuna göre: arayüzün tamamında Manrope,
   sadece 400/500/600/700 ağırlıkları, font-display:swap (bkz.
   includes/header.php <link>). Site genelinde tek bir "body" kuralı
   yetmiyor — 'Inter' (mor-tema.css, K9enq522wjZR.css, EYlgAACTP9gy.css),
   'Poppins' (ticker, bazı eski dosyalar) onlarca farklı dosyada ayrı
   ayrı, kendi !important'ıyla tanımlanmış. Bu dosya <head>'de EN SON
   yüklenir ve her birini AYNI özgüllükte/daha yükseğinde hedefleyip
   Manrope'a çeviriyor.
   ================================================================ */

html body {
    font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 400 !important;
}

/* ── Sidebar — tüm alt bileşenler (zaten Manrope'du, tutarlılık için burada da açıkça belirtildi) ── */
html body .casino-sidebar,
html body .casino-sidebar .sb-item,
html body .casino-sidebar .sb-text,
html body .casino-sidebar .sb-section-title,
html body .casino-sidebar .sb-tab,
html body .casino-sidebar .sb-tab-label,
html body .casino-sidebar .sb-brand-text,
html body .casino-sidebar .sb-badge,
html body .casino-sidebar .sb-hdr-vip span,
html body .casino-sidebar .sb-lang-btn,
html body .casino-sidebar .sb-lang-option,
html body .balance-badge {
    font-family: 'Manrope', sans-serif !important;
}
html body .casino-sidebar .sb-item,
html body .casino-sidebar .sb-text {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
html body .casino-sidebar .sb-section-title {
    font-weight: 700 !important;
}

/* ── Diğer bileşenler (ticker, modallar) — sitenin geri kalanıyla tutarlı olsun ── */
html body .ticker-unit,
html body #site-ticker-bar {
    font-family: 'Manrope', 'Poppins', sans-serif !important;
}
html body .auth-modal {
    font-family: 'Manrope', 'Inter', -apple-system, sans-serif !important;
}
html body .auth-modal .am-input,
html body .auth-modal .am-select,
html body .auth-modal .am-textarea,
html body .auth-modal .am-date-placeholder,
html body .auth-modal .am-btn {
    font-family: 'Manrope', 'Inter', -apple-system, sans-serif !important;
}

/* ── İKON KORUMASI (site geneli) — Font Awesome ikonları ASLA site
   fontunu almasın, kendi ikon fontunda kalsın. Bu olmadan herhangi
   bir geniş "*" seçicisi (modal, sidebar, kart vb.) ikonları bozar. */
html body i.fas, html body i.far, html body i.fab, html body i.fa,
html body [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
html body i.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
html body i.fas {
    font-weight: 900 !important;
}
html body i.far {
    font-weight: 400 !important;
}


/* ── bottom-nav.css ──────────────────────────────────────── */
/* ================================================================
   ALT NAVİGASYON (mobile-bottom-nav) — profesyonel revizyon
   ----------------------------------------------------------------
   x2Ztd26fEeVV.css'teki (aktif "navbar-redesign.css") temel yapıya
   dokunulmadı — sadece boyut/renk/spacing ince ayarları. <head>'de
   en son yüklenen dosyalardan biri, yüksek özgüllük kullanıyor.
   ================================================================ */

@media (max-width: 768px) {
    /* ── Navbar çerçevesi ── */
    html body .mobile-bottom-nav {
        height: 64px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        border-top: 1px solid rgba(214,174,104,0.15) !important;
        /* Gerçek mobil cihazlarda (masaüstü tarayıcının mobil emülasyonunda
           DEĞİL) dinamik adres çubuğu açılıp/kapanırken position:fixed
           elemanlar bazen görsel olarak "kayıyor"/sabit kalmıyor —
           bilinen bir platform kısıtı. Elemanı kendi GPU katmanına
           zorlamak (translateZ(0) + will-change) bunu güvenilir şekilde
           düzeltiyor.
           NOT: transform artık !important DEĞİL — sportsbook.php'deki
           küçültme/gizleme butonu (toggleNav) navbar'ı JS ile
           translateY(100%) yaparak gizliyor; !important burada olursa
           o JS'i geçersiz kılıp butonu çalışmaz hale getiriyordu. Inline
           JS stili zaten normal (important olmayan) stylesheet
           kurallarını doğal olarak eziyor, bu yüzden !important
           kaldırılınca hem GPU katmanı varsayılan olarak çalışmaya
           devam ediyor HEM DE JS toggle'ı tekrar işlevsel oluyor. */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform !important;
    }

    /* ── Sekme (öğe) ── */
    html body .mobile-bottom-nav .mobile-nav-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 44px !important;
        gap: 4px !important;
        color: #77808D !important;
    }
    html body .mobile-bottom-nav .mobile-nav-item i {
        font-size: 23px !important;
        color: #77808D !important;
    }
    html body .mobile-bottom-nav .mobile-nav-item .nav-svg-icon {
        width: 23px !important;
        height: 23px !important;
        color: #77808D !important;
    }
    html body .mobile-bottom-nav .mobile-nav-item span {
        font-size: 10.5px !important;
        font-weight: 500 !important;
        color: inherit !important;
    }

    /* ── Aktif sekme — gold ikon + gold yazı ── */
    html body .mobile-bottom-nav .mobile-nav-item.active {
        color: #D6AE68 !important;
        background: transparent !important;
    }
    html body .mobile-bottom-nav .mobile-nav-item.active i,
    html body .mobile-bottom-nav .mobile-nav-item.active .nav-svg-icon {
        color: #D6AE68 !important;
    }
    html body .mobile-bottom-nav .mobile-nav-item.active::before {
        background: #D6AE68 !important;
    }
    html body .mobile-bottom-nav .mobile-nav-item:hover {
        color: #9aa4b0 !important;
    }

    /* ── Destek — çevrim içi noktası küçültüldü, ikonun sağ üstüne
       düzgün hizalandı (önceden tüm nav-item'a göre konumlanıyordu,
       ikonla hizası tutmuyordu) ── */
    html body .support-icon-wrapper {
        position: relative !important;
        display: inline-flex !important;
    }
    html body .online-dot {
        top: -1px !important;
        right: -2px !important;
        width: 6px !important;
        height: 6px !important;
        border-width: 1.5px !important;
    }

    /* ── Bonus butonu — 52px, navbarın üzerinden 10-12px taşıyor,
       kalın siyah gölge yerine yumuşak/ince gold gölge ── */
    html body .bonus-3d-circle {
        width: 52px !important;
        height: 52px !important;
        margin-top: -11px !important;
        background: linear-gradient(180deg, #d9bd98 0%, #c9a97d 55%, var(--primary, #ac895e) 100%) !important;
        box-shadow:
            0 2px 8px rgba(0,0,0,0.22),
            0 0 0 1px rgba(214,174,104,0.35),
            0 4px 14px rgba(214,174,104,0.28),
            inset 0 1px 0 rgba(255,255,255,0.22) !important;
        animation: none !important;
    }
    html body .bonus-3d-ring,
    html body .bonus-3d-glow,
    html body .bonus-3d-shine {
        display: none !important;
    }
    html body .bonus-3d-icon {
        fill: #0a1a0a !important;
        filter: none !important;
    }
    /* Bonus yazısı: sadece aktifken belirgin gold + gölge, normalde sade */
    html body .bonus-3d-label {
        background: none !important;
        -webkit-text-fill-color: #77808D !important;
        color: #77808D !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        text-shadow: none !important;
    }
    html body .mobile-nav-bonus-item.active .bonus-3d-label {
        -webkit-text-fill-color: #D6AE68 !important;
        color: #D6AE68 !important;
        text-shadow: 0 0 10px rgba(214,174,104,0.45) !important;
    }
    html body .mobile-nav-bonus-item:active .bonus-3d-circle {
        transform: scale(0.96) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 4px rgba(0,0,0,0.22) !important;
    }
}


/* ── game-card-actions.css ──────────────────────────────────────── */
/* ==================================================================
   Oyun Kartı — "Kart Üzerinde Butonlar" stili
   admin/settings > Oyun Ayarları > Oyun Kartı Stili

   Varsayılan durumda (data-card-style="modal", mevcut bilgi penceresi
   sistemi) bu katman DOM'da bulunsa bile tamamen gizlidir ve hiçbir
   şeyi etkilemez. Sadece <body data-card-style="hover"> olduğunda
   devreye girer:
     - Masaüstü (gerçek hover): Kartın üzerine gelince "Oyna" /
       "Eğlencesine Oyna" / favori butonları belirir (CSS :hover).
     - Dokunmatik cihaz (hover yok): Karta İLK dokunuş o kartı açar
       (js/AbTu5X1YqWg2.js .zb-force-show ekler) — tıpkı hover gibi
       TEK kart için; başka bir karta veya boşluğa dokununca kapanır.
       Böylece tüm kartlarda aynı anda sürekli açık durmaz.
     - Kartın kendisine (butonların dışına) tıklamak hiçbir şey
       yapmaz — bkz. js/AbTu5X1YqWg2.js içindeki playGame() guard'ı.
   ================================================================== */

.zb-card-actions {
    display: none;
}

/* Catalog favorites use the card overlay, without native button chrome. */
.zb-card-actions [data-agg-fav] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.zb-card-actions [data-agg-fav]:hover,
.zb-card-actions [data-agg-fav][aria-pressed="true"] {
    color: #ffc93c;
}

.zb-card-actions [data-agg-fav]:focus-visible {
    outline: 2px solid #ffc93c;
    outline-offset: 2px;
}

body[data-card-style="hover"] .zb-card-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
}

body[data-card-style="hover"] .zb-card-actions {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 20;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: rgba(6, 7, 10, 0.55);
    backdrop-filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

/* Favori (yıldız) butonu — sade bir ikon, arkasında daire/arkaplan yok.
   Oyna/Eğlencesine Oyna katmanı gibi SADECE karta gelince (hover) belirir,
   sürekli görünmez. .zb-card-actions'ın ÜSTÜNDE kalması için daha yüksek
   z-index kullanılır, aksi halde ortadaki katman hover'da onu tıklanamaz
   hale getirir. */
.zb-fav-btn {
    display: none;
}

body[data-card-style="hover"] .zb-fav-btn {
    display: flex;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 25;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    background: none;
    color: #ffffff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
    transition: opacity 0.2s ease, color 0.15s ease, transform 0.15s ease;
}

body[data-card-style="hover"] .zb-fav-btn:hover {
    transform: scale(1.15);
}

body[data-card-style="hover"] .zb-fav-btn.is-fav {
    color: #ffc93c;
}

/* Eski tekli "play" ikon butonları (bilgi penceresi stilinin görsel
   ipucu) hover modunda tamamen devre dışı — yerini yeni katman alır. */
body[data-card-style="hover"] .sp-play,
body[data-card-style="hover"] .lcp-play,
body[data-card-style="hover"] .jps-play {
    display: none !important;
}

/* Kartın üzerine gelince buton + favori katmanını göster */
body[data-card-style="hover"] .sp-card:hover .zb-card-actions,
body[data-card-style="hover"] .lcp-card:hover .zb-card-actions,
body[data-card-style="hover"] .jps-card:hover .zb-card-actions,
body[data-card-style="hover"] .sk-game-card:hover .zb-card-actions,
body[data-card-style="hover"] .sk-game-thumb:hover .zb-card-actions {
    opacity: 1;
    pointer-events: auto;
}

body[data-card-style="hover"] .sp-card:hover .zb-fav-btn,
body[data-card-style="hover"] .lcp-card:hover .zb-fav-btn,
body[data-card-style="hover"] .jps-card:hover .zb-fav-btn,
body[data-card-style="hover"] .sk-game-card:hover .zb-fav-btn,
body[data-card-style="hover"] .sk-game-thumb:hover .zb-fav-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Kartın kendisi TIKLANABİLİR GÖRÜNMESİN: imleç normale döner, çünkü
   kartın üzerine (butonların dışına) tıklamak artık hiçbir şey yapmıyor.
   Sadece aşağıdaki .zb-card-btn üzerinde işaret (pointer) imleci çıkar. */
body[data-card-style="hover"] .sp-card,
body[data-card-style="hover"] .lcp-card,
body[data-card-style="hover"] .jps-card,
body[data-card-style="hover"] .sk-game-card,
body[data-card-style="hover"] .sk-game-thumb {
    cursor: default;
}

body[data-card-style="hover"] .zb-card-actions {
    cursor: default;
}

.zb-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 172px;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.zb-card-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.zb-card-btn:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

.zb-card-btn-real {
    background: var(--zb-btn-real-bg, linear-gradient(135deg, #ff3d81, #d90f74));
    color: var(--zb-btn-real-text, #ffffff);
    box-shadow: 0 6px 18px var(--zb-btn-real-shadow, rgba(217, 15, 116, 0.4));
}

.zb-card-btn-fun {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--text-primary, #e7e9ec);
}

.zb-card-btn i {
    font-size: 11px;
}

/* Küçük kartlarda (ana sayfa carousel'i vb.) metni sıkıştır */
@media (max-width: 480px) {
    body[data-card-style="hover"] .zb-card-actions {
        padding: 8px;
        gap: 6px;
    }
    body[data-card-style="hover"] .zb-fav-btn {
        font-size: 15px;
        top: 8px;
        left: 8px;
    }
    .zb-card-btn {
        font-size: 11px;
        padding: 8px 10px;
        max-width: 100%;
    }
}

/* Dokunmatik cihaz (hover desteği yok): butonlar/favori artık her zaman
   görünmüyor — sadece kart tıklanınca (js/AbTu5X1YqWg2.js'teki tap-to-
   reveal sistemi .zb-force-show ekler) o TEK kart için beliriyor, tıpkı
   masaüstünde hover gibi. Burada sadece mobile özgü konumlandırma
   (alt kenara yaslı gradient) tanımlanıyor, görünürlük değil. */
@media (hover: none) {
    body[data-card-style="hover"] .zb-card-actions {
        background: linear-gradient(to bottom, rgba(6, 7, 10, 0) 25%, rgba(6, 7, 10, 0.78) 100%);
        justify-content: flex-end;
        padding-bottom: 16px;
    }
}

/* Dokunmatik cihazlarda karta ilk dokunuş bu sınıfı ekler (bkz.
   AbTu5X1YqWg2.js) — masaüstündeki :hover ile birebir aynı görünürlüğü
   tetikler, farklı karta dokununca veya boşluğa dokununca kaldırılır. */
.zb-card-actions.zb-force-show,
.zb-fav-btn.zb-force-show {
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* ── nav-header-mode.css ──────────────────────────────────────── */
/* ================================================================
   NAVİGASYON YAPISI — "HEADER" MODU
   ----------------------------------------------------------------
   admin/settings > "Navigasyon Yapısı" ayarı "Header (Üst Menü)"
   seçiliyken <body> etikoduna "nav-layout-header" class'ı eklenir
   (bkz. includes/header.php). Bu dosyadaki HER kural o class'a
   bağımlıdır — ayar "Sidebar (Klasik)" (varsayılan, <body
   class="nav-layout-sidebar">) iken bu dosyadaki HİÇBİR kural
   devreye girmez, site birebir eskisi gibi çalışır.

   casino-sidebar / main-content / top-header-bar gibi mevcut
   elementlerin kendi CSS'ine (yay5WrRTWPEl.css vb.) HİÇ dokunulmadı;
   burada sadece "header" modunda onları geçersiz kılan ek kurallar
   var. <head>'de EN SON yüklenir — eski dosyalardaki !important'lara
   güvenle üstün gelir.

   Yeni element: <nav class="header-nav-bar"> — top-header-bar'ın
   (position:fixed, yükseklik var(--top-bar-h)) hemen altında, AYNI
   position:fixed yöntemiyle sabitlenen yatay menü şeridi — ikisi
   scroll sırasında tek bir blok gibi birlikte hareket eder. İçindeki
   linkler casino-sidebar'daki ile birebir aynı hedeflere gider.
   ================================================================ */

:root {
    --hnb-h: 52px;
}

@media (max-width: 768px) {
    :root { --hnb-h: 44px; }
}

/* ── Sidebar'ı ve mobil hamburger'ı tamamen kapat ──
   (aside.casino-sidebar markup'ı DOM'da kalır, sadece görünmez —
   JS fonksiyonları (openSidebar/closeSidebar) zararsız şekilde
   var olmaya devam eder, hiçbir yerde çağrılmaz çünkü tetikleyen
   buton da burada gizleniyor.) */
body.nav-layout-header .casino-sidebar,
body.nav-layout-header .sidebar-toggle-btn,
body.nav-layout-header .sidebar-overlay {
    display: none !important;
}

/* ── İçerik/footer/sosyal-medya şeridi artık sidebar boşluğu bırakmasın ── */
body.nav-layout-header .main-content,
body.nav-layout-header .footer {
    margin-left: 0 !important;
}
body.nav-layout-header .social-sidebar {
    left: 0 !important;
}

/* ── main-content üst boşluğu: top-header-bar + yeni header-nav-bar ── */
body.nav-layout-header .main-content {
    padding-top: calc(var(--top-bar-h, 62px) + var(--hnb-h, 52px)) !important;
}
body.nav-layout-header.has-ticker .main-content {
    padding-top: calc(var(--top-bar-h, 62px) + var(--hnb-h, 52px) + var(--ticker-h, 32px)) !important;
}

/* ═══════════════════════════════════════
   HEADER NAV BAR — yatay menü şeridi
   position:fixed kullanılır (top-header-bar ile AYNI yöntem) —
   böylece ikisi tek bir blok gibi davranır; scroll sırasında
   header'dan asla ayrılmaz/geride kalmaz, ekstra hesap gerekmez.
═══════════════════════════════════════ */
body.nav-layout-header .header-nav-bar {
    position: fixed;
    top: var(--top-bar-h, 62px);
    left: 0;
    right: 0;
    z-index: 1140; /* top-header-bar: 1150'nin hemen altı */
    height: var(--hnb-h);
    background: rgba(10, 10, 10, 0.99);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: stretch;
}

body.nav-layout-header.has-ticker .header-nav-bar {
    top: calc(var(--top-bar-h, 62px) + var(--ticker-h, 32px)) !important;
}

body.nav-layout-header .header-nav-scroll {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 24px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.nav-layout-header .header-nav-scroll::-webkit-scrollbar {
    display: none;
}

/* ── Menü öğesi — sidebar'ın GERÇEK final renk kuralıyla (bkz.
   css/sidebar-cards.css → "SIDEBAR RENK SİSTEMİ") BİREBİR aynı,
   design-tokens.css'teki resmi --z-gold / --z-gold-light paleti:
   ikon HER ZAMAN mat altın (--z-gold), yazı gri (var(--text-secondary, #9aa1ac)) — sadece
   sidebar'daki gibi opacity oyunu değil, gerçek renk eşleşmesi.
   Hover'da arka plan/kutu YOK, sadece ikon+yazı açık altına
   (--z-gold-light) geçer. Aktifte sidebar'daki gibi hafif altın
   arka plan + kalıcı açık altın renk. ── */
body.nav-layout-header .hnb-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    margin: 0 2px;
    border-radius: 6px;
    color: var(--text-secondary, #9aa1ac);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    border-bottom: 2px solid transparent;
    scroll-snap-align: start;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

body.nav-layout-header .hnb-item:hover,
body.nav-layout-header .hnb-item:hover .hnb-icon {
    color: var(--hnb-icon-color-active, var(--z-gold-light, #D5B67D));
}

body.nav-layout-header .hnb-item.active {
    color: var(--hnb-icon-color-active, var(--z-gold-light, #D5B67D));
    background: rgba(var(--z-gold-rgb, 198,164,106), 0.09);
    border-bottom-color: var(--hnb-icon-color, var(--z-gold, #C6A46A));
}

body.nav-layout-header .hnb-item.active .hnb-icon {
    color: var(--hnb-icon-color-active, var(--z-gold-light, #D5B67D));
}

body.nav-layout-header .hnb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
    color: var(--hnb-icon-color, var(--z-gold, #C6A46A));
    transition: color 0.15s ease;
}

/* Admin panelden eklenen özel öğeler Font Awesome (<i class="fas fa-x hnb-icon">)
   kullanır — SVG'lerin aksine boyutu width/height değil font-size belirler. */
body.nav-layout-header i.hnb-icon {
    width: auto;
    height: auto;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Admin panelden eklenen özel SVG kodu / yüklenen PNG görsel — .hnb-icon
   kendisi 18x18'lik kutuyu ayarlar (yukarıda), içindeki gerçek svg/img
   o kutuyu doldurur. Emoji ise doğrudan metin olarak boyutlanır. */
body.nav-layout-header .hnb-icon-custom svg,
body.nav-layout-header .hnb-icon-custom img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
body.nav-layout-header .hnb-icon-emoji {
    font-size: 16px;
    line-height: 1;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Emoji kendi rengini taşır, --hnb-icon-color'dan etkilenmez. */
}

/* ── Logo bloğu sidebar genişliğine (232px) sabitliydi (sidebar
   moduyla hizalansın diye); header modunda içine Casino/Spor
   sekmeleri de eklendiği için içeriğe göre serbest genişlesin. ── */
body.nav-layout-header .header-logo-block {
    width: auto;
}

/* ── Logo yanındaki Casino/Spor sekmeleri (.header-logo-tabs) —
   sidebar'ın .sb-tab / .sb-tab-icon-bg / .sb-tab-label CSS'i (yukarıda,
   yay5WrRTWPEl.css) hiç değiştirilmeden burada yeniden kullanılıyor;
   sadece konteynerin sidebar'a özgü margin'i ve .sb-tab'ın flex:1
   genişlemesi burada iptal edilir ki logonun yanında kompakt dursun. ── */
body.nav-layout-header .header-logo-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--border, rgba(255,255,255,0.08));
}

body.nav-layout-header .header-logo-tabs .sb-tab {
    flex: none;
    min-width: 104px;
}

/* ── Mobil: daha kompakt, yatay kaydırma (slide) tam burada devrede ── */
@media (max-width: 1024px) {
    body.nav-layout-header .header-nav-scroll {
        padding: 0 14px;
    }
}

@media (max-width: 768px) {
    body.nav-layout-header .header-nav-scroll {
        gap: 2px;
        padding: 0 10px;
    }
    body.nav-layout-header .hnb-item {
        padding: 7px 11px;
        font-size: 12px;
        gap: 7px;
    }
    body.nav-layout-header .hnb-icon {
        width: 16px;
        height: 16px;
    }
    body.nav-layout-header i.hnb-icon {
        font-size: 14px;
    }
    body.nav-layout-header .hnb-icon-emoji {
        font-size: 14px;
    }
}

/* ── sportsbook.php'nin özel "hover ile açılan gizli sidebar" davranışı
   (yay5WrRTWPEl.css) casino-sidebar'ı hedeflediği için header modunda
   zaten devre dışı kalıyor (element display:none) — ekstra kural
   gerekmiyor; sadece o sayfada da mobil logo/top-header-bar'ın normal
   şekilde tam genişlik çalıştığından emin ol. */
body.nav-layout-header[data-page="sportsbook.php"] .top-header-bar {
    left: 0 !important;
}


/* ── jackpot-cards.css ──────────────────────────────────────── */
/* ================================================================
   PROGRESSIVE JACKPOT — KART BÖLÜMÜ (v4)
   ----------------------------------------------------------------
   ÖNEMLİ: Renkler artık design-tokens.css'teki (--z-*) az kullanılan
   token setinden DEĞİL, sitenin asıl/aktif tema sistemi olan --st-*
   değişkenlerinden geliyor (bkz. css/mor-tema.css — header, "Kayıt Ol"
   butonu, sidebar hepsi bunu kullanıyor). Böylece jackpot bölümü
   header ve diğer bileşenlerle BİREBİR aynı arka plan/kenarlık/altın
   tonunu paylaşıyor, ayrı bir palet gibi sırıtmıyor.
   Tüm seviyeler tek, tutarlı vurgu rengini paylaşır (--jp-accent,
   varsayılan --st-green-hi) — ayrım suit ikonuyla (♠ ♥ ♦ ♣) sağlanır.
   Masaüstünde 4 kart tek satırda; tablet/mobilde taşmadan yatay
   kaydırmalı (scroll-snap, tek kart + bir sonrakinin kenarı görünür).
   <head>'de mor-tema.css'ten SONRA yüklenmelidir (bkz. index.php).
   ================================================================ */

.jp-section {
    padding: 16px 0 8px;
    position: relative;
}

.jp-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 20px;
}

.jp-card {
    --jp-accent: var(--st-green-hi);
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        var(--card-bg-image, url('/assets/images/anasayfa.webp'));
    background-size: cover;
    background-position: center;
    border: 1px solid var(--st-brd-md);
    border-radius: var(--z-radius-card);
    padding: 14px 16px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    min-height: 84px;
}

.jp-card.jp-disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.jp-card:focus-visible {
    outline: 2px solid var(--jp-accent);
    outline-offset: 2px;
}

/* Sadece gerçek imleç/hover desteği olan cihazlarda (masaüstü) kaldırma
   efekti uygulanır — dokunmatik cihazda tıklama "takılı hover" ya da
   gölge kırpılması gibi görsel sorunlara yol açmasın diye buraya
   kısıtlandı. */
@media (hover: hover) and (pointer: fine) {
    .jp-card:hover {
        border-color: color-mix(in srgb, var(--jp-accent) 45%, var(--st-brd-md));
        box-shadow: 0 6px 16px rgba(0,0,0,0.3);
        background:
            linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
            var(--card-bg-image, url('/assets/images/anasayfa.webp'));
        background-size: cover;
        background-position: center;
    }
}
/* Dokunmatik cihazda aktif/açık kart — kaldırma efekti olmadan, sadece
   ince bir kenarlık vurgusu (kesilme yaratmaz). */
.jp-card.jp-open {
    border-color: color-mix(in srgb, var(--jp-accent) 55%, var(--st-brd-md));
    background:
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        var(--card-bg-image, url('/assets/images/anasayfa.webp'));
    background-size: cover;
    background-position: center;
}

/* ── İkon rozeti — düz/mat, parlama halkası yok ── */
.jp-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--st-elevated);
    border: 1px solid color-mix(in srgb, var(--jp-accent) 38%, var(--st-brd-md));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.jp-icon img { width: 24px; height: 24px; object-fit: contain; display: block; }
.jp-icon .jp-suit-glyph {
    font-size: 22px;
    line-height: 1;
    color: var(--jp-accent);
    font-family: 'Times New Roman', Georgia, serif;
}

.jp-body { min-width: 0; flex: 1; }

.jp-label {
    font-family: var(--z-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--st-text-2);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.jp-label .jp-label-symbol { color: var(--jp-accent); font-size: 12px; }

.jp-amount {
    font-family: var(--z-font);
    font-size: 19px;
    font-weight: 800;
    color: var(--st-text-1);
    letter-spacing: -0.2px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.jp-amount .jp-currency { font-size: 11.5px; font-weight: 600; color: var(--st-text-2); margin-left: 3px; }

.jp-minbet {
    font-size: 10px;
    color: var(--st-text-3);
    margin-top: 4px;
    white-space: nowrap;
}

/* ── Sağlayıcı imzası (Amusnet vb.) — kartın altında, sessiz/soluk ── */
.jp-provider {
    position: absolute;
    right: 12px;
    bottom: 9px;
    opacity: .45;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.jp-provider svg { width: 46px; height: auto; display: block; }

/* Sunucudan gelen gerçek değere ulaşıldığı an — ince bir parıltı, sonra durur */
.jp-amount.jp-sync { animation: jp-sync-flash 1.1s ease; }
@keyframes jp-sync-flash {
    0%   { color: var(--jp-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--jp-accent) 55%, transparent); }
    100% { color: var(--st-text-1); text-shadow: none; }
}
/* Jackpot birine ödendi ve havuz sıfırlandı — belirgin "reset" vurgusu */
.jp-amount.jp-reset { animation: jp-reset-flash .9s ease; }
@keyframes jp-reset-flash {
    0%   { color: #ef4444; text-shadow: 0 0 16px rgba(239,100,100,.55); transform: scale(1.04); }
    100% { color: var(--st-text-1); text-shadow: none; transform: scale(1); }
}

/* ── Tablet / Mobil: yatay kaydırmalı, kompakt kartlar ── */
@media (max-width: 991px) {
    .jp-row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 6px 20px;
        scroll-padding-left: 20px; /* snap her zaman sitenin standart 20px kenar boşluğuna hizalanır */
        gap: 12px;
        scrollbar-width: none;
    }
    .jp-row::-webkit-scrollbar { display: none; }
    .jp-card {
        flex: 0 0 auto;
        /* Sabit bir "bir sonraki kart" ipucu bırakır — cihaz genişliğinden
           bağımsız, her zaman aynı ölçüde ve kenara yapışmadan. */
        width: calc(100% - 64px);
        max-width: 300px;
        scroll-snap-align: start;
    }
}

@media (max-width: 480px) {
    .jp-section { padding: 12px 0 6px; }
    .jp-card { width: calc(100% - 72px); max-width: 258px; padding: 10px 11px; gap: 9px; min-height: 62px; border-radius: 12px; }
    .jp-icon { width: 34px; height: 34px; }
    .jp-icon img { width: 19px; height: 19px; }
    .jp-icon .jp-suit-glyph { font-size: 16px; }
    .jp-amount { font-size: 14.5px; }
    .jp-label { font-size: 8.5px; letter-spacing: .8px; margin-bottom: 2px; }
    .jp-minbet { font-size: 9px; margin-top: 2px; }
    .jp-provider svg { width: 30px; }
    .jp-provider { right: 8px; bottom: 6px; }
}

/* ================================================================
   HOVER / TAP POPOVER — "kazananlar" hızlı bakış paneli
   ----------------------------------------------------------------
   Masaüstü: karta hover'da kısa gecikmeyle açılan, karta yaslı,
   ok işaretli küçük panel (jp-pop-float).
   Mobil (≤560px): ekranın altından yükselen sabit bir "sheet" olarak
   açılır (jp-pop-sheet) — hangi karta dokunulduğundan bağımsız olarak
   her zaman aynı, tutarlı biçimde.
   ================================================================ */
.jp-popover {
    --jp-accent: var(--st-green-hi);
    position: fixed;
    z-index: 9980;
    width: min(320px, calc(100vw - 24px));
    background: var(--st-elevated);
    border: 1px solid var(--st-brd-md);
    border-radius: 16px;
    padding: 16px 16px 14px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(6px) scale(.97);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.jp-popover.jp-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.jp-popover::before {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background: inherit;
    border: inherit;
}
.jp-popover.jp-pop-below::before { top: -6px; left: var(--jp-arrow-left, 24px); transform: rotate(45deg); border-right: none; border-bottom: none; }
.jp-popover.jp-pop-above::before { bottom: -6px; left: var(--jp-arrow-left, 24px); transform: rotate(45deg); border-left: none; border-top: none; }

.jp-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.jp-pop-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--z-font);
    font-weight: 700;
    font-size: 13px;
    color: var(--st-text-1);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.jp-pop-title .jp-pop-symbol { color: var(--jp-accent); font-size: 15px; }
/* Kapatma tuşu — giriş modalındaki gibi arkasında kutu/kare olmadan,
   sade bir ikon. */
.jp-pop-close {
    width: 26px; height: 26px; flex-shrink: 0;
    background: transparent; border: none;
    color: var(--st-text-2); display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 15px; line-height: 1;
    transition: color .2s ease, transform .3s ease;
}
.jp-pop-close:hover { color: var(--st-text-1); transform: rotate(90deg); }

.jp-pop-current {
    display: flex; align-items: baseline; gap: 8px;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--st-brd);
}
.jp-pop-current .jp-pop-amount {
    font-family: var(--z-font); font-weight: 800; font-size: 22px;
    color: var(--jp-accent); font-variant-numeric: tabular-nums;
}
.jp-pop-current .jp-pop-currency { font-size: 12px; color: var(--st-text-2); font-weight: 600; }

.jp-pop-total {
    font-size: 11.5px;
    color: var(--st-text-2);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.jp-pop-total b { color: var(--st-text-1); font-size: 12.5px; }

.jp-pop-row + .jp-pop-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--st-brd); }
.jp-pop-row-label { font-size: 10.5px; color: var(--st-text-3); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.jp-pop-row-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jp-pop-row-amount { font-family: var(--z-font); font-weight: 800; font-size: 15px; color: #4ade80; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jp-pop-row-meta { font-size: 10.5px; color: var(--st-text-3); text-align: right; white-space: nowrap; line-height: 1.5; }

.jp-pop-empty { font-size: 11.5px; color: var(--st-text-3); text-align: center; padding: 6px 0; }

/* Dokunmatik cihazda sheet açıkken arkayı hafifçe kararan zemin */
.jp-pop-scrim {
    position: fixed; inset: 0; z-index: 9975;
    background: rgba(4,5,7,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.jp-pop-scrim.jp-visible { opacity: 1; pointer-events: auto; }

/* ── Mobil: gerçek "bottom sheet" — konum her zaman sabit, karttan bağımsız ── */
@media (max-width: 560px) {
    .jp-popover {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto !important;
        width: auto;
        max-height: 78vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.32,.72,.35,1), opacity .2s ease;
        box-shadow: 0 -18px 40px rgba(0,0,0,0.5);
    }
    .jp-popover.jp-visible { transform: translateY(0); }
    .jp-popover::before { display: none; }
    .jp-pop-handle {
        width: 36px; height: 4px; border-radius: 3px;
        background: var(--st-brd);
        margin: 0 auto 14px;
    }
}

/* ================================================================
   TOAST — "Bir oyuncu MINI Jackpot'tan X kazandı" (herkese, anonim)
   ================================================================ */
.jp-toast-wrap {
    position: fixed; left: 50%; top: 74px; transform: translateX(-50%);
    z-index: 9995; display: flex; flex-direction: column; gap: 8px;
    width: min(360px, 92vw); pointer-events: none;
}
.jp-toast {
    background: linear-gradient(135deg, var(--st-elevated), var(--st-surface));
    border: 1px solid rgba(198,164,106,0.35);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.4);
    font-size: 12.5px; color: var(--st-text-1);
    opacity: 0; transform: translateY(-8px);
    animation: jp-toast-in .25s ease forwards, jp-toast-out .3s ease forwards 4.2s;
}
.jp-toast .jp-toast-ico { font-size: 16px; }
.jp-toast b { color: var(--st-green-hi); }
@keyframes jp-toast-in { to { opacity: 1; transform: translateY(0); } }
@keyframes jp-toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* ================================================================
   KUTLAMA POP-UP — kazanan kullanıcının kendisine
   ================================================================ */
.jp-celebrate-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(4,5,7,0.82);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
.jp-celebrate-overlay.open { opacity: 1; pointer-events: auto; }
.jp-celebrate-box {
    text-align: center;
    max-width: 380px;
    background: linear-gradient(165deg, var(--st-elevated), var(--st-bg));
    border: 1px solid rgba(198,164,106,0.4);
    border-radius: 20px;
    padding: 36px 26px;
    transform: scale(.9);
    transition: transform .25s ease;
}
.jp-celebrate-overlay.open .jp-celebrate-box { transform: scale(1); }
.jp-celebrate-box .jp-c-icon { font-size: 46px; margin-bottom: 10px; }
.jp-celebrate-box .jp-c-title { font-family: var(--z-font); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--st-text-2); margin-bottom: 6px; }
.jp-celebrate-box .jp-c-amount { font-family: var(--z-font); font-weight: 800; font-size: 34px; color: var(--st-green-hi); margin-bottom: 18px; }
.jp-celebrate-box .jp-c-btn {
    display: inline-block; padding: 11px 28px; border-radius: 10px;
    background: linear-gradient(135deg, var(--st-green), var(--st-green-hi));
    color: #14100a; font-weight: 700; font-size: 13px; cursor: pointer; border: none;
}


/* ── jackpot-showcase.css ──────────────────────────────────────── */
/* ================================================================
   JACKPOT VİTRİNİ — slots.php ve live-casino.php içinde kullanılır
   ----------------------------------------------------------------
   Renkler sitenin gerçek/aktif tema sistemi olan --st-* değişkenlerinden
   gelir (bkz. css/mor-tema.css) — header, butonlar, sidebar ile aynı
   palet. Oyun kartları (.jps-card) kasıtlı olarak slots.php'deki
   .sp-card ile AYNI tarifi kullanır (aspect-ratio, veil, hover) —
   böylece vitrin, sayfanın geri kalanıyla aynı hissi verir, ayrı bir
   bileşen gibi durmaz.
   ================================================================ */

.jps-section {
    padding: 26px 0 8px;
}

.jps-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.jps-head-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--z-font);
    font-size: 19px;
    font-weight: 800;
    color: var(--st-text-1);
    letter-spacing: .2px;
}
.jps-head-icon {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--st-green-dim);
    border: 1px solid var(--st-green-brd);
    color: var(--st-green-hi);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}

/* ── Sağlayıcı sekmeleri ── */
.jps-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}
.jps-tabs::-webkit-scrollbar { display: none; }
.jps-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--st-surface);
    border: 1px solid var(--st-brd-md);
    color: var(--st-text-2);
    font-family: var(--z-font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .2px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.jps-tab:hover { color: var(--st-text-1); border-color: var(--st-brd-hi); }
.jps-tab.active {
    background: var(--st-green-hi);
    border-color: var(--st-green-hi);
    color: #14100a;
}

/* ── MEGA hero kartı ── */
.jps-hero {
    position: relative;
    max-width: 460px;
    margin: 0 auto 14px;
    text-align: center;
    background: var(--st-surface);
    border: 1px solid var(--st-brd-md);
    border-radius: 18px;
    padding: 26px 24px 24px;
    overflow: hidden;
}
.jps-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(220px 140px at 50% -20%, var(--st-green-dim), transparent 70%);
    pointer-events: none;
}
.jps-hero.jps-disabled { opacity: .45; }

.jps-hero-icon {
    width: 52px; height: 52px; margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--st-elevated);
    border: 1px solid var(--st-green-brd);
    display: flex; align-items: center; justify-content: center;
}
.jps-hero-symbol { font-size: 26px; color: var(--st-green-hi); font-family: Georgia, 'Times New Roman', serif; }

.jps-hero-label {
    font-family: var(--z-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--st-text-2);
    margin-bottom: 6px;
}
.jps-hero-amount {
    font-family: var(--z-font);
    font-size: 36px;
    font-weight: 800;
    color: var(--st-green-hi);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.jps-hero-amount span { font-size: 16px; font-weight: 700; color: var(--st-text-2); margin-left: 4px; }

/* ── MAJOR / MINOR / MINI ── */
.jps-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 900px;
    margin: 0 auto 8px;
}
.jps-tier-card {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--st-surface);
    border: 1px solid var(--st-brd-md);
    border-radius: 14px;
    padding: 13px 14px;
}
.jps-tier-card.jps-disabled { opacity: .45; }
.jps-tier-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--st-elevated);
    border: 1px solid var(--st-brd-hi);
    display: flex; align-items: center; justify-content: center;
    color: var(--st-green-hi);
    font-size: 17px;
    font-family: Georgia, 'Times New Roman', serif;
}
.jps-tier-body { min-width: 0; }
.jps-tier-label {
    font-family: var(--z-font);
    font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: var(--st-text-2);
    margin-bottom: 2px;
}
.jps-tier-amount {
    font-family: var(--z-font);
    font-size: 16px; font-weight: 800; color: var(--st-text-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.jps-tier-amount span { font-size: 10.5px; font-weight: 600; color: var(--st-text-2); margin-left: 2px; }
.jps-tier-minbet { font-size: 9.5px; color: var(--st-text-3); margin-top: 2px; white-space: nowrap; }

@media (max-width: 640px) {
    .jps-tiers { grid-template-columns: 1fr; max-width: 460px; }
    .jps-hero-amount { font-size: 30px; }
}

/* ── Oyun ızgarası — slots.php .sp-card ile aynı tarif ── */
.jps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 24px;
}
@media (max-width: 768px) { .jps-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 480px) { .jps-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.jps-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4/3;
    background: var(--st-bg);
    border: 1px solid var(--st-brd);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease;
    opacity: 0;
    transform: translateY(10px) scale(.97);
    animation: jps-card-in .4s cubic-bezier(.25,.46,.45,.94) forwards;
    animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes jps-card-in { to { opacity: 1; transform: translateY(0) scale(1); } }

.jps-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 0 0 1px var(--st-brd-hi), 0 16px 48px rgba(0,0,0,.7);
    border-color: var(--st-brd-hi);
    z-index: 3;
}

.jps-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.jps-card:hover .jps-card-img { transform: scale(1.07); }

.jps-card-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.45) 65%, rgba(0,0,0,.92) 100%);
    transition: background .3s;
}
.jps-card:hover .jps-card-veil {
    background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.95) 100%);
}

.jps-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 12px 10px; z-index: 2; }
.jps-card-name {
    font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.jps-card-prov { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.5); }

.jps-card-badge {
    position: absolute; top: 8px; left: 8px; z-index: 6;
    font-size: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    padding: 3px 7px; border-radius: 4px; line-height: 1.4;
    background: var(--st-green-hi); color: #14100a;
}

.jps-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.6);
    opacity: 0; z-index: 10;
    width: 44px; height: 44px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.08); color: var(--text-primary, #e7e9ec);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer;
    transition: all .28s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
.jps-play i { margin-left: 2px; }
.jps-card:hover .jps-play { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

@media (hover: none) {
    .jps-play { opacity: 0; transform: translate(-50%, -50%) scale(.8); width: 36px; height: 36px; font-size: 12px; }
    .jps-card:hover { transform: none; box-shadow: none; border-color: var(--st-brd); z-index: auto; }
    .jps-card:hover .jps-card-img { transform: none; }
    .jps-card:active { transform: scale(.97); transition: transform .1s ease; }
}

.jps-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 16px;
    color: var(--st-text-3);
    font-size: 13px;
}


/* ── notification.css ──────────────────────────────────────── */
/* Notification System Styles */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    pointer-events: none;
}

.notification {
    background: rgba(13, 15, 19, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    pointer-events: auto;
    animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-in 2.7s;
    position: relative;
    overflow: hidden;
}

.notification::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: currentColor;
    animation: progressBar 3s linear;
}

@keyframes progressBar {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(400px);
    }
}

.notification-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.notification-content {
    flex: 1;
    color: #f8fafc;
}

.notification-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.notification-message {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.4;
}

.notification-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-size: 18px;
    transition: color 0.2s;
}

.notification-close:hover {
    color: #f8fafc;
}

/* Notification Types */
.notification.success {
    border-left: 4px solid var(--success, #10b981);
    color: var(--success, #10b981);
}

.notification.error {
    border-left: 4px solid var(--error, #ef4444);
    color: var(--error, #ef4444);
}

.notification.warning {
    border-left: 4px solid var(--warning, #f59e0b);
    color: var(--warning, #f59e0b);
}

.notification.info {
    border-left: 4px solid var(--info, #3b82f6);
    color: var(--info, #3b82f6);
}

@media (max-width: 768px) {
    #notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .notification {
        min-width: auto;
    }
}


/* ============================================================
   SAYFALARA GÖMÜLÜ SATIR İÇİ <style> BLOKLARI (birleştirildi)
   Sayfaya özel olanlar body[data-page="dosya.php"] ile kapsandı,
   böylece farklı sayfalardaki aynı class isimleri (örn. .active,
   .error, .container) birbirine karışmıyor.
   ============================================================ */
/* ── bahis-kuponlarim.php (satır içi <style>, sadece bu sayfada — body[data-page="bahis-kuponlarim.php"] ile kapsandı) ── */
/* ── Bahis Kuponlarım — Gold & Black Luxury Theme ── */
body[data-page="bahis-kuponlarim.php"] * { margin:0; padding:0; box-sizing:border-box; }
body[data-page="bahis-kuponlarim.php"] { font-family:'Outfit','Segoe UI',sans-serif; background:#0b0c10; color:#fff; min-height:100vh; }
body[data-page="bahis-kuponlarim.php"] {
    --gold:#9aa4b0; --gold-l:#c9a97d;
    --green:#22c55e; --red:#ef4444; --amber:#f59e0b; --blue:#3b82f6;
    --card-bg:rgba(255,255,255,0.02); --card-border:rgba(154,164,176,0.1);
}
body[data-page="bahis-kuponlarim.php"] .kp-page { max-width:960px; margin:0 auto; padding:120px 20px 80px; }
/* ── Header ── */
body[data-page="bahis-kuponlarim.php"] .kp-header {
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:24px; padding-bottom:18px;
    border-bottom:1px solid var(--card-border);
    flex-wrap:wrap; gap:12px;
}
body[data-page="bahis-kuponlarim.php"] .kp-title {
    font-size:22px; font-weight:800;
    background:linear-gradient(135deg,#c9a97d,var(--primary, #ac895e),#9aa4b0);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    display:flex; align-items:center; gap:10px;
}
body[data-page="bahis-kuponlarim.php"] .kp-title svg { -webkit-text-fill-color:initial; opacity:.7; }
body[data-page="bahis-kuponlarim.php"] .kp-subtitle { color:rgba(154,164,176,0.45); font-size:13px; margin-top:4px; }
body[data-page="bahis-kuponlarim.php"] .kp-live { display:flex; align-items:center; gap:7px; color:rgba(154,164,176,0.5); font-size:12px; font-weight:600; }
body[data-page="bahis-kuponlarim.php"] .kp-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:kp-pulse__bahis_kuponlarim_php_0 2s infinite; }
@keyframes kp-pulse__bahis_kuponlarim_php_0 { 0%,100%{opacity:1} 50%{opacity:.35} }
/* ── Stats Grid ── */
body[data-page="bahis-kuponlarim.php"] .kp-stats {
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;
}
body[data-page="bahis-kuponlarim.php"] .kp-stat {
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:14px; padding:18px;
    display:flex; flex-direction:column; gap:4px;
    position:relative; overflow:hidden;
    transition:border-color .2s;
}
body[data-page="bahis-kuponlarim.php"] .kp-stat:hover { border-color:rgba(154,164,176,0.22); }
body[data-page="bahis-kuponlarim.php"] .kp-stat::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(154,164,176,0.2),transparent);
}
body[data-page="bahis-kuponlarim.php"] .kp-stat-icon {
    position:absolute; right:14px; top:14px;
    width:32px; height:32px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    opacity:0.85;
}
body[data-page="bahis-kuponlarim.php"] .kp-stat-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(154,164,176,0.45); margin-bottom:6px; }
body[data-page="bahis-kuponlarim.php"] .kp-stat-val { font-size:24px; font-weight:900; color:#fff; line-height:1; }
body[data-page="bahis-kuponlarim.php"] .kp-stat-val.g { color:var(--green); }
body[data-page="bahis-kuponlarim.php"] .kp-stat-val.r { color:var(--red); }
body[data-page="bahis-kuponlarim.php"] .kp-stat-val.gold { color:var(--gold-l); }
body[data-page="bahis-kuponlarim.php"] .kp-stat-sub { font-size:12px; color:rgba(154,164,176,0.4); margin-top:4px; }
/* ── Filters ── */
body[data-page="bahis-kuponlarim.php"] .kp-filters { display:flex; gap:7px; margin-bottom:20px; flex-wrap:wrap; }
body[data-page="bahis-kuponlarim.php"] .kp-flt {
    padding:8px 16px; border-radius:8px;
    border:1px solid var(--card-border); background:var(--card-bg);
    color:rgba(154,164,176,0.5); font-size:12px; font-weight:700;
    cursor:pointer; transition:all .18s; text-decoration:none;
    display:inline-flex; align-items:center; gap:6px;
    font-family:inherit;
}
body[data-page="bahis-kuponlarim.php"] .kp-flt:hover { background:rgba(154,164,176,0.08); color:#C8A84B; border-color:rgba(154,164,176,0.25); }
body[data-page="bahis-kuponlarim.php"] .kp-flt.active {
    background:linear-gradient(135deg,rgba(154,164,176,0.18),rgba(201,169,125,0.1));
    color:#c9a97d; border-color:rgba(201,169,125,0.4);
    box-shadow:0 0 10px rgba(201,169,125,0.08);
}
/* ── Coupon Card ── */
body[data-page="bahis-kuponlarim.php"] .kp-card {
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:14px; margin-bottom:10px; overflow:hidden;
    transition:border-color .2s, transform .15s; position:relative;
}
body[data-page="bahis-kuponlarim.php"] .kp-card:hover { border-color:rgba(154,164,176,0.22); transform:translateY(-1px); }
body[data-page="bahis-kuponlarim.php"] .kp-stripe {
    position:absolute; top:0; left:0; bottom:0; width:3px; border-radius:3px 0 0 3px;
}
body[data-page="bahis-kuponlarim.php"] .kp-card.won      .kp-stripe { background:linear-gradient(180deg,#22c55e,rgba(34,197,94,0.1)); }
body[data-page="bahis-kuponlarim.php"] .kp-card.lost     .kp-stripe { background:linear-gradient(180deg,#ef4444,rgba(239,68,68,0.1)); }
body[data-page="bahis-kuponlarim.php"] .kp-card.pending  .kp-stripe { background:linear-gradient(180deg,#f59e0b,rgba(245,158,11,0.1)); }
body[data-page="bahis-kuponlarim.php"] .kp-card.cancelled, body[data-page="bahis-kuponlarim.php"] .kp-card.void { }
body[data-page="bahis-kuponlarim.php"] .kp-card.cancelled .kp-stripe, body[data-page="bahis-kuponlarim.php"] .kp-card.void .kp-stripe { background:linear-gradient(180deg,#64748b,rgba(91,98,108,0.1)); }
/* Card Head */
body[data-page="bahis-kuponlarim.php"] .kp-card-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:13px 16px 13px 20px; gap:10px; flex-wrap:wrap;
}
body[data-page="bahis-kuponlarim.php"] .kp-head-left { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
body[data-page="bahis-kuponlarim.php"] .kp-kupon-no { font-size:10px; font-weight:700; color:rgba(154,164,176,0.45); letter-spacing:.05em; text-transform:uppercase; }
body[data-page="bahis-kuponlarim.php"] .kp-type-pill {
    font-size:10px; font-weight:700; letter-spacing:.04em;
    padding:3px 8px; border-radius:5px; text-transform:uppercase;
    background:rgba(154,164,176,0.08); border:1px solid rgba(154,164,176,0.15);
    color:rgba(154,164,176,0.6);
}
body[data-page="bahis-kuponlarim.php"] .kp-date { font-size:11px; color:rgba(154,164,176,0.35); display:flex; align-items:center; gap:4px; }
/* Status Badges */
body[data-page="bahis-kuponlarim.php"] .kp-badge {
    font-size:10px; font-weight:800; letter-spacing:.05em;
    padding:4px 10px; border-radius:5px; text-transform:uppercase; white-space:nowrap;
}
body[data-page="bahis-kuponlarim.php"] .kp-badge.won { background:rgba(34,197,94,.12);  color:#4ade80; border:1px solid rgba(34,197,94,.25); }
body[data-page="bahis-kuponlarim.php"] .kp-badge.lost { background:rgba(239,68,68,.12);  color:#f87171; border:1px solid rgba(239,68,68,.25); }
body[data-page="bahis-kuponlarim.php"] .kp-badge.pending { background:rgba(245,158,11,.12); color:#fcd34d; border:1px solid rgba(245,158,11,.25); }
body[data-page="bahis-kuponlarim.php"] .kp-badge.cancelled, body[data-page="bahis-kuponlarim.php"] .kp-badge.void { background:rgba(91,98,108,.12); color:#94a3b8; border:1px solid rgba(91,98,108,.25); }
body[data-page="bahis-kuponlarim.php"] .kp-divider { height:1px; background:var(--card-border); margin:0 16px; }
/* Selections */
body[data-page="bahis-kuponlarim.php"] .kp-selections { padding:14px 16px 14px 20px; }
body[data-page="bahis-kuponlarim.php"] .kp-sel-title {
    display:flex; align-items:center; gap:7px;
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:rgba(154,164,176,0.4);
    margin-bottom:10px;
}
body[data-page="bahis-kuponlarim.php"] .kp-sel-title::after { content:''; flex:1; height:1px; background:rgba(154,164,176,0.08); }
body[data-page="bahis-kuponlarim.php"] .kp-sel {
    background:rgba(154,164,176,0.03); border:1px solid rgba(154,164,176,0.08);
    border-radius:9px; padding:10px 13px; margin-bottom:6px;
    display:flex; justify-content:space-between; align-items:center;
    gap:12px; flex-wrap:wrap;
}
body[data-page="bahis-kuponlarim.php"] .kp-sel-info { flex:1; min-width:0; }
body[data-page="bahis-kuponlarim.php"] .kp-sel-match { font-size:12px; font-weight:700; color:rgba(255,255,255,0.85); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body[data-page="bahis-kuponlarim.php"] .kp-sel-market { font-size:10px; color:rgba(154,164,176,0.4); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
body[data-page="bahis-kuponlarim.php"] .kp-sel-noid { display:flex; align-items:center; gap:8px; flex:1; }
body[data-page="bahis-kuponlarim.php"] .kp-sel-noid-icon { color:rgba(154,164,176,0.4); font-size:14px; flex-shrink:0; }
body[data-page="bahis-kuponlarim.php"] .kp-sel-noid-text { font-size:12px; font-weight:700; color:rgba(255,255,255,0.7); }
body[data-page="bahis-kuponlarim.php"] .kp-sel-noid-sub { font-size:10px; color:rgba(154,164,176,0.35); margin-top:2px; font-family:monospace; }
body[data-page="bahis-kuponlarim.php"] .kp-sel-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
body[data-page="bahis-kuponlarim.php"] .kp-sel-pick { font-size:11px; font-weight:700; color:rgba(255,255,255,0.6); padding:2px 7px; background:rgba(255,255,255,0.05); border-radius:4px; }
body[data-page="bahis-kuponlarim.php"] .kp-sel-odds { font-size:14px; font-weight:800; color:#c9a97d; }
/* Card Footer */
body[data-page="bahis-kuponlarim.php"] .kp-card-foot { padding:12px 16px 14px 20px; }
body[data-page="bahis-kuponlarim.php"] .kp-foot-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
body[data-page="bahis-kuponlarim.php"] .kp-foot-item { }
body[data-page="bahis-kuponlarim.php"] .kp-foot-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:rgba(154,164,176,0.4); margin-bottom:5px; }
body[data-page="bahis-kuponlarim.php"] .kp-foot-val { font-size:17px; font-weight:800; color:#fff; }
body[data-page="bahis-kuponlarim.php"] .kp-foot-val.g { color:var(--green); }
body[data-page="bahis-kuponlarim.php"] .kp-foot-val.r { color:var(--red); }
body[data-page="bahis-kuponlarim.php"] .kp-foot-val.a { color:var(--amber); }
body[data-page="bahis-kuponlarim.php"] .kp-foot-val.muted { color:rgba(255,255,255,0.35); }
body[data-page="bahis-kuponlarim.php"] .kp-foot-sub { font-size:11px; color:rgba(154,164,176,0.4); margin-top:3px; }
/* Empty */
body[data-page="bahis-kuponlarim.php"] .kp-empty { text-align:center; padding:56px 20px; }
body[data-page="bahis-kuponlarim.php"] .kp-empty-icon {
    width:64px; height:64px; border-radius:50%;
    border:1px solid rgba(154,164,176,0.2);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px;
    background:rgba(154,164,176,0.05);
}
body[data-page="bahis-kuponlarim.php"] .kp-empty-title {
    font-size:18px; font-weight:800;
    background:linear-gradient(135deg,#c9a97d,#9aa4b0);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:10px;
}
body[data-page="bahis-kuponlarim.php"] .kp-empty-desc {
    font-size:13px; color:rgba(154,164,176,0.45);
    max-width:320px; margin:0 auto 22px; line-height:1.6;
}
body[data-page="bahis-kuponlarim.php"] .kp-empty-btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:11px 24px; border-radius:10px;
    background:linear-gradient(135deg,#9aa4b0,#c9a97d);
    color:#0b0c10; font-size:13px; font-weight:800;
    text-decoration:none; letter-spacing:.02em;
    transition:all .2s; border:none; cursor:pointer;
    font-family:inherit;
}
body[data-page="bahis-kuponlarim.php"] .kp-empty-btn:hover {
    box-shadow:0 6px 20px rgba(201,169,125,0.3);
    transform:translateY(-2px);
}
/* Pagination */
body[data-page="bahis-kuponlarim.php"] .kp-pagination { display:flex; justify-content:center; gap:6px; margin-top:22px; flex-wrap:wrap; }
body[data-page="bahis-kuponlarim.php"] .kp-page-btn {
    padding:7px 13px; background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:7px; color:rgba(154,164,176,0.5); font-size:12px; font-weight:700;
    text-decoration:none; cursor:pointer; transition:all .18s; font-family:inherit;
}
body[data-page="bahis-kuponlarim.php"] .kp-page-btn:hover { background:rgba(154,164,176,0.08); color:#C8A84B; }
body[data-page="bahis-kuponlarim.php"] .kp-page-btn.active { background:linear-gradient(135deg,#9aa4b0,#c9a97d); border-color:transparent; color:#000; font-weight:800; }
@media (max-width:768px) {
body[data-page="bahis-kuponlarim.php"] .kp-page { padding:100px 12px 60px; }
body[data-page="bahis-kuponlarim.php"] .kp-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
body[data-page="bahis-kuponlarim.php"] .kp-foot-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
body[data-page="bahis-kuponlarim.php"] .kp-stats { grid-template-columns:1fr 1fr; }
body[data-page="bahis-kuponlarim.php"] .kp-card-head { flex-direction:column; align-items:flex-start; }
}


/* ── turnuvalar.php (satır içi <style>, sadece bu sayfada — body[data-page="turnuvalar.php"] ile kapsandı) ── */
body[data-page="turnuvalar.php"] .tv-page { padding: 20px 0 50px; }
body[data-page="turnuvalar.php"] .tv-head { display:flex; align-items:center; gap:9px; margin-bottom: 16px; }
body[data-page="turnuvalar.php"] .tv-head h1 { font-size: 19px; font-weight: 800; color: var(--st-text-1); margin: 0; }
body[data-page="turnuvalar.php"] .tv-head .tv-head-icon { color: var(--st-green-hi); font-size: 17px; }
body[data-page="turnuvalar.php"] .tv-tabs { display:flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }
body[data-page="turnuvalar.php"] .tv-tab { padding: 8px 16px; border-radius: 999px; background: var(--st-surface); border: 1px solid var(--st-brd-md); color: var(--st-text-2); font-weight: 700; font-size: 12.5px; text-decoration: none; transition: all .15s ease; }
body[data-page="turnuvalar.php"] .tv-tab:hover { color: var(--st-text-1); border-color: var(--st-brd-hi); }
body[data-page="turnuvalar.php"] .tv-tab.active { background: var(--st-green-hi); border-color: var(--st-green-hi); color: #14100a; }
body[data-page="turnuvalar.php"] .tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
body[data-page="turnuvalar.php"] .tv-card { position: relative; background: var(--st-surface); border: 1px solid var(--st-brd-md); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease; }
body[data-page="turnuvalar.php"] .tv-card:hover { transform: translateY(-2px); border-color: var(--st-brd-hi); }
body[data-page="turnuvalar.php"] .tv-cover { position: relative; width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--st-elevated) 0%, var(--st-surface) 60%); overflow: hidden; }
body[data-page="turnuvalar.php"] .tv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page="turnuvalar.php"] .tv-cover-fallback {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--st-green-hi) 14%, transparent), transparent 60%),
        linear-gradient(135deg, var(--st-elevated), var(--st-surface));
}
body[data-page="turnuvalar.php"] .tv-cover-fallback i { font-size: 26px; color: var(--st-green-hi); opacity: .55; }
body[data-page="turnuvalar.php"] .tv-status-badge { position: absolute; top: 9px; left: 9px; padding: 3px 10px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; z-index: 2; }
body[data-page="turnuvalar.php"] .tv-status-badge.active { background: #39B980; color: #06210f; }
body[data-page="turnuvalar.php"] .tv-status-badge.scheduled { background: #4FA8E0; color: #06172a; }
body[data-page="turnuvalar.php"] .tv-status-badge.ended { background: rgba(255,255,255,.15); color: #fff; }
body[data-page="turnuvalar.php"] .tv-countdown { position: absolute; bottom: 9px; right: 9px; background: rgba(6,7,10,0.82); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 7px; font-size: 10.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; z-index: 2; }
body[data-page="turnuvalar.php"] .tv-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
body[data-page="turnuvalar.php"] .tv-name { font-size: 14px; font-weight: 800; color: var(--st-text-1); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
body[data-page="turnuvalar.php"] .tv-dates { font-size: 10.5px; color: var(--st-text-3); }
body[data-page="turnuvalar.php"] .tv-stats-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--st-brd); border-bottom: 1px solid var(--st-brd); }
body[data-page="turnuvalar.php"] .tv-stat { text-align: center; flex: 1; }
body[data-page="turnuvalar.php"] .tv-stat-label { font-size: 8.5px; color: var(--st-text-3); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
body[data-page="turnuvalar.php"] .tv-stat-value { font-size: 12.5px; font-weight: 800; color: var(--st-green-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-page="turnuvalar.php"] .tv-cta { display: block; text-align: center; padding: 9px; border-radius: 8px; background: var(--st-green-hi); color: #14100a; font-weight: 700; font-size: 12.5px; text-decoration: none; margin-top: auto; transition: filter .15s ease; }
body[data-page="turnuvalar.php"] .tv-cta:hover { filter: brightness(1.08); }
body[data-page="turnuvalar.php"] .tv-empty { grid-column: 1 / -1; text-align: center; padding: 44px 20px; color: var(--st-text-3); font-size: 12.5px; }
body[data-page="turnuvalar.php"] .tv-empty i { font-size: 32px; margin-bottom: 12px; display: block; opacity: .35; }
@media (max-width: 480px) {
body[data-page="turnuvalar.php"] .tv-page { padding: 14px 0 40px; }
body[data-page="turnuvalar.php"] .tv-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
body[data-page="turnuvalar.php"] .tv-body { padding: 10px 10px 11px; gap: 6px; }
body[data-page="turnuvalar.php"] .tv-name { font-size: 12.5px; }
body[data-page="turnuvalar.php"] .tv-dates { font-size: 9.5px; }
body[data-page="turnuvalar.php"] .tv-stat-value { font-size: 11px; }
body[data-page="turnuvalar.php"] .tv-cta { padding: 8px; font-size: 11.5px; }
body[data-page="turnuvalar.php"] .tv-status-badge { font-size: 8.5px; padding: 2px 8px; }
body[data-page="turnuvalar.php"] .tv-countdown { font-size: 9px; padding: 3px 7px; }
}


/* ── promotions.php (satır içi <style>, sadece bu sayfada — body[data-page="promotions.php"] ile kapsandı) ── */
/* ============================================================
   PROMOTIONS PAGE — slots.php ile aynı yapı
   ============================================================ */
body[data-page="promotions.php"] .prp-page {
    padding-top: 0;
    margin-top: 0;
}
/* ============================================================
   COMMAND BAR
   ============================================================ */
body[data-page="promotions.php"] .prp-command {
    position: sticky;
    top: var(--top-bar-h, 62px);
    z-index: 200;
    background: var(--header-background, rgba(6,7,10,0.97));
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
body[data-page="promotions.php"] .prp-command-inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 58px;
}
/* Bonus Kodu Input */
body[data-page="promotions.php"] .prp-code-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}
/* Search-style wrapper for the input+icon */
body[data-page="promotions.php"] .prp-code-field {
    position: relative;
    width: 260px;
    flex-shrink: 0;
}
body[data-page="promotions.php"] .prp-code-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--st-text-3, #5b626c);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s;
}
body[data-page="promotions.php"] .prp-code-input {
    width: 100%;
    height: 38px;
    background: var(--st-elevated, #15171c) !important;
    border: 1px solid var(--st-brd-md, rgba(255,255,255,0.10)) !important;
    border-radius: 8px;
    padding: 0 14px 0 36px;
    color: var(--st-text-1, var(--text-primary, #e7e9ec)) !important;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-shadow: none !important;
}
body[data-page="promotions.php"] .prp-code-input::placeholder { color: var(--st-text-2, #9aa1ab) !important; opacity: 1 !important; }
body[data-page="promotions.php"] .prp-code-input::-webkit-input-placeholder { color: var(--st-text-2, #9aa1ab) !important; opacity: 1 !important; }
body[data-page="promotions.php"] .prp-code-input::-moz-placeholder { color: var(--st-text-2, #9aa1ab) !important; opacity: 1 !important; }
body[data-page="promotions.php"] .prp-code-input:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    background: var(--st-hover, #1f2228) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.08) !important;
}
body[data-page="promotions.php"] .prp-code-field:focus-within .prp-code-ico { color: var(--primary, #ac895e) !important; }
body[data-page="promotions.php"] .prp-code-btn {
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    background: var(--primary, #ac895e);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
body[data-page="promotions.php"] .prp-code-btn:hover { background: #c9a97d; transform: none; box-shadow: none; }
body[data-page="promotions.php"] .prp-code-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
body[data-page="promotions.php"] .prp-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.05);
    flex-shrink: 0;
}
/* Filter tabs */
body[data-page="promotions.php"] .prp-tabs-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
body[data-page="promotions.php"] .prp-tabs-wrap::before, body[data-page="promotions.php"] .prp-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 48px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.2s;
}
body[data-page="promotions.php"] .prp-tabs-wrap::before { left: 32px; background: linear-gradient(90deg, var(--header-background, rgba(6,7,10,0.97)), transparent); }
body[data-page="promotions.php"] .prp-tabs-wrap::after { right: 32px; background: linear-gradient(270deg, var(--header-background, rgba(6,7,10,0.97)), transparent); }
body[data-page="promotions.php"] .prp-tabs-wrap.at-start::before { opacity: 0; }
body[data-page="promotions.php"] .prp-tabs-wrap.at-end::after { opacity: 0; }
body[data-page="promotions.php"] .prp-arrow {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.14);
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.18s;
    z-index: 3; user-select: none;
}
body[data-page="promotions.php"] .prp-arrow:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); color: var(--text-primary, #e7e9ec); }
body[data-page="promotions.php"] .prp-arrow:active { transform: scale(0.92); }
body[data-page="promotions.php"] .prp-arrow.disabled { opacity: 0.25; pointer-events: none; }
body[data-page="promotions.php"] .prp-tabs {
    display: flex; align-items: center; gap: 4px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    flex: 1; min-width: 0;
    padding: 4px 6px;
    scroll-behavior: smooth;
}
body[data-page="promotions.php"] .prp-tabs::-webkit-scrollbar { display: none; }
body[data-page="promotions.php"] .prp-tab {
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 14px;
    border-radius: 6px; border: 1px solid var(--st-brd, rgba(255,255,255,0.06));
    background: var(--st-elevated, #15171c);
    color: var(--st-text-2, #9aa1ab);
    font-size: 12px; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap; cursor: pointer;
    text-decoration: none;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
    flex-shrink: 0;
}
body[data-page="promotions.php"] .prp-tab:hover {
    background: var(--st-hover, #1f2228) !important;
    color: var(--st-text-1, var(--text-primary, #e7e9ec)) !important;
    border-color: var(--st-brd-hi, rgba(255,255,255,0.17)) !important;
}
body[data-page="promotions.php"] .prp-tab.active {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.10) !important;
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.30) !important;
    color: var(--primary, #ac895e) !important;
    font-weight: 700;
    box-shadow: none;
}
/* ============================================================
   HERO
   ============================================================ */
body[data-page="promotions.php"] .prp-hero {
    position: relative;
    padding: 48px 24px 20px;
    max-width: 1380px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
body[data-page="promotions.php"] .prp-hero-eyebrow {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
}
body[data-page="promotions.php"] .prp-hero-line { width: 28px; height: 2px; background: rgba(255,255,255,0.15); border-radius: 2px; }
body[data-page="promotions.php"] .prp-hero-eyebrow-text { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.40); }
body[data-page="promotions.php"] .prp-hero-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 8px;
}
body[data-page="promotions.php"] .prp-hero-heading span {  color: var(--primary, #ac895e); }
body[data-page="promotions.php"] .prp-hero-sub { font-size: 14px; color: rgba(180,180,180,0.5); font-weight: 400; }
body[data-page="promotions.php"] .prp-hero-stats { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-bottom: 4px; }
body[data-page="promotions.php"] .prp-stat { text-align: right; }
body[data-page="promotions.php"] .prp-stat-num {
    display: block; font-family: 'Poppins', sans-serif;
    font-size: clamp(24px, 3vw, 38px); font-weight: 800;
    color: var(--text-primary, #e7e9ec); letter-spacing: -0.04em; line-height: 1;
    text-shadow: 0 0 24px rgba(255,255,255,0.09);
}
body[data-page="promotions.php"] .prp-stat-lbl { display: block; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(180,180,180,0.4); margin-top: 3px; }
body[data-page="promotions.php"] .prp-hero-rule { max-width: 1380px; margin: 0 auto; padding: 0 24px; }
body[data-page="promotions.php"] .prp-hero-rule hr { border: none; height: 1px; background: var(--border, rgba(255,255,255,0.08)); }
/* ============================================================
   ACTIVE BONUS STRIP
   ============================================================ */
body[data-page="promotions.php"] .prp-active-strip {
    max-width: 1380px;
    margin: 20px auto 0;
    padding: 0 24px;
}
body[data-page="promotions.php"] .prp-active-inner {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(90deg, rgba(var(--primary-rgb, 172, 137, 94),0.08), rgba(var(--primary-rgb, 172, 137, 94),0.04));
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);
    border-radius: 12px; padding: 14px 18px;
}
body[data-page="promotions.php"] .prp-active-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary, #ac895e); font-size: 15px;
}
body[data-page="promotions.php"] .prp-active-info { flex: 1; min-width: 0; }
body[data-page="promotions.php"] .prp-active-label { font-size: 9px; font-weight: 700; color: var(--primary, #ac895e); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 2px; }
body[data-page="promotions.php"] .prp-active-name { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 6px; }
body[data-page="promotions.php"] .prp-wager-track { background: var(--border, rgba(255,255,255,0.08)); border-radius: 99px; height: 5px; overflow: hidden; margin-bottom: 3px; }
body[data-page="promotions.php"] .prp-wager-fill { height: 100%; background: linear-gradient(90deg, var(--primary, #ac895e), #c9a97d); border-radius: 99px; transition: width 1s ease; }
body[data-page="promotions.php"] .prp-wager-nums { display: flex; justify-content: space-between; font-size: 10px; color: rgba(160,160,160,0.45); }
/* ============================================================
   BONUS CARDS GRID
   ============================================================ */
body[data-page="promotions.php"] .prp-grid-wrap {
    max-width: 1380px;
    margin: 0 auto;
    padding: 20px 24px 48px;
}
body[data-page="promotions.php"] .prp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: stretch;
}
/* ---- BONUS CARD ---- */
body[data-page="promotions.php"] .prp-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.03);
    background: rgba(255,255,255,0.02);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
body[data-page="promotions.php"] .prp-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 24px rgba(255,255,255,0.02);
}
/* Card top accent */
body[data-page="promotions.php"] .prp-card-accent {
    height: 2px;
    flex-shrink: 0;
    background: linear-gradient(90deg, transparent, var(--text-primary, #e7e9ec), transparent);
}
/* Banner image */
body[data-page="promotions.php"] .prp-card-img-wrap {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    background: #101114;
    line-height: 0;
    overflow: visible;
}
body[data-page="promotions.php"] .prp-card-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}
body[data-page="promotions.php"] .prp-card:hover .prp-card-img { transform: scale(1.04); }
body[data-page="promotions.php"] .prp-card-badge {
    position: absolute; top: 10px; left: 10px; z-index: 5;
    font-size: 11px; font-weight: 800; letter-spacing: 0.8px;
    text-transform: uppercase; padding: 5px 12px; border-radius: 6px;
}
/* No-image fallback band */
body[data-page="promotions.php"] .prp-card-band {
    width: 100%; height: 100%;
    display: flex; align-items: center;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
}
body[data-page="promotions.php"] .prp-card-band::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 90% at 15% 50%, rgba(255,255,255,0.05), transparent 70%);
}
body[data-page="promotions.php"] .prp-card-band-pct {
    font-family: 'Poppins', sans-serif;
    font-size: 52px; font-weight: 900;
    line-height: 1; letter-spacing: -2px;
    color: var(--text-primary, #e7e9ec);
    position: relative; z-index: 1;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
body[data-page="promotions.php"] .prp-card-band-sub {
    font-size: 12px; color: rgba(255,255,255,0.4);
    margin-top: 4px; font-weight: 600; letter-spacing: 0.3px;
    position: relative; z-index: 1;
}
body[data-page="promotions.php"] .prp-card-band-icon {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-size: 48px; color: rgba(255,255,255,0.05); z-index: 1;
}
/* Card body */
body[data-page="promotions.php"] .prp-card-body {
    flex: 1; display: flex; flex-direction: column;
    padding: 16px 16px 0;
}
body[data-page="promotions.php"] .prp-card-name {
    font-size: 15px; font-weight: 800; color: #fff;
    line-height: 1.3; margin-bottom: 6px;
}
body[data-page="promotions.php"] .prp-card-desc {
    font-size: 12px; color: rgba(160,160,160,0.5);
    line-height: 1.6; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Stats row */
body[data-page="promotions.php"] .prp-card-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; margin-bottom: 12px; flex-shrink: 0;
}
body[data-page="promotions.php"] .prp-card-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 7px 4px 6px; text-align: center;
}
body[data-page="promotions.php"] .prp-card-stat-val { font-size: 13px; font-weight: 800; color: var(--text-primary, #e7e9ec); line-height: 1; }
body[data-page="promotions.php"] .prp-card-stat-lbl { font-size: 8px; color: rgba(140,140,140,0.5); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }
/* Accordion */
body[data-page="promotions.php"] .prp-card-accs { flex: 1; display: flex; flex-direction: column; gap: 5px; padding-bottom: 10px; }
body[data-page="promotions.php"] .prp-acc { border-radius: 8px; overflow: hidden; }
body[data-page="promotions.php"] .prp-acc-trigger {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 11px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer; font-size: 11px; font-weight: 600;
    color: rgba(190,190,190,0.65); gap: 6px; border-radius: 8px;
    transition: background 0.2s, border-color 0.2s, color 0.2s; user-select: none;
}
body[data-page="promotions.php"] .prp-acc-trigger:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.14); }
body[data-page="promotions.php"] .prp-acc-trigger i:first-child { color: rgba(255,255,255,0.14); font-size: 10px; flex-shrink: 0; }
body[data-page="promotions.php"] .prp-acc-arrow { font-size: 9px; flex-shrink: 0; transition: transform 0.3s ease; }
body[data-page="promotions.php"] .prp-acc.open .prp-acc-trigger { border-radius: 8px 8px 0 0; }
body[data-page="promotions.php"] .prp-acc.open .prp-acc-arrow { transform: rotate(180deg); }
body[data-page="promotions.php"] .prp-acc-panel {
    max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.06); border-top: none; border-radius: 0 0 8px 8px;
}
body[data-page="promotions.php"] .prp-acc.open .prp-acc-panel { max-height: 400px; }
body[data-page="promotions.php"] .prp-acc.open .prp-acc-panel .prp-acc-inner {
    max-height: 380px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
body[data-page="promotions.php"] .prp-acc-inner { padding: 9px 11px; }
body[data-page="promotions.php"] .prp-terms-text { font-size: 11px; color: rgba(140,140,140,0.55); line-height: 1.6; white-space: pre-line; word-break: break-word; }
body[data-page="promotions.php"] .prp-acc-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); gap: 8px;
}
body[data-page="promotions.php"] .prp-acc-row:last-child { border-bottom: none; }
body[data-page="promotions.php"] .prp-acc-row-lbl { font-size: 11px; color: rgba(140,140,140,0.55); display: flex; align-items: center; gap: 5px; }
body[data-page="promotions.php"] .prp-acc-row-lbl i { color: rgba(255,255,255,0.14); width: 11px; font-size: 10px; }
body[data-page="promotions.php"] .prp-acc-row-val { font-size: 11px; font-weight: 700; color: #e0e0e0; white-space: nowrap; }
body[data-page="promotions.php"] .prp-terms-text { font-size: 11px; color: rgba(140,140,140,0.55); line-height: 1.6; white-space: pre-line; }
/* CTA */
body[data-page="promotions.php"] .prp-card-cta {
    padding: 0 0 14px;
    flex-shrink: 0; display: flex; gap: 7px;
}
body[data-page="promotions.php"] .prp-btn {
    flex: 1; padding: 11px 10px; border-radius: 10px; border: none;
    font-size: 12px; font-weight: 800; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: inherit; text-decoration: none; text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.2px;
}
body[data-page="promotions.php"] .prp-btn-gold {
    background: var(--primary, #ac895e);
    color: #fff;
    font-weight: 800;
    box-shadow: none;
}
body[data-page="promotions.php"] .prp-btn-gold:hover { background: #c9a97d; box-shadow: none; transform: none; }
body[data-page="promotions.php"] .prp-btn-outline {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); color: var(--st-text-1, var(--text-primary, #e7e9ec));
}
body[data-page="promotions.php"] .prp-btn-outline:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.26); color: #fff; }
body[data-page="promotions.php"] .prp-btn-green { background: var(--primary, #ac895e); border: 1px solid var(--primary, #ac895e); color: #fff; font-weight: 800; }
body[data-page="promotions.php"] .prp-btn-green:hover { background: #c9a97d; border-color: #c9a97d; color: #fff; transform: none; box-shadow: none; }
body[data-page="promotions.php"] .prp-btn-claimed { background: rgba(var(--primary-rgb, 172, 137, 94),0.08); border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20); color: var(--primary, #ac895e); cursor: default; }
body[data-page="promotions.php"] .prp-btn-locked { background: rgba(255,255,255,0.04); border: 1px solid var(--border, rgba(255,255,255,0.08)); color: rgba(120,120,120,0.5); cursor: not-allowed; }
body[data-page="promotions.php"] .prp-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
/* ---- Tema renkleri ---- */
body[data-page="promotions.php"] .prp-theme-free { --accent: #f59e0b; --band-bg: linear-gradient(135deg, #1f1400, #0d0900); --pct-color: #fbbf24; }
body[data-page="promotions.php"] .prp-theme-welcome { --accent: #10b981; --band-bg: linear-gradient(135deg, #001a10, #000d08); --pct-color: #34d399; }
body[data-page="promotions.php"] .prp-theme-deposit { --accent: #3b82f6; --band-bg: linear-gradient(135deg, #0a1220, #05070f); --pct-color: #60a5fa; }
body[data-page="promotions.php"] .prp-theme-crypto { --accent: #06b6d4; --band-bg: linear-gradient(135deg, #001a1a, #000d0d); --pct-color: #22d3ee; }
body[data-page="promotions.php"] .prp-theme-default { --accent: #5b626c; --band-bg: linear-gradient(135deg, #110f00, #101114); --pct-color: var(--text-primary, #e7e9ec); }
/* Badge renkleri — bonus tipine göre ayrı renk */
body[data-page="promotions.php"] .prp-card-badge {
    position: absolute; top: 12px; left: 12px; z-index: 5;
    font-size: 11px; font-weight: 900; letter-spacing: 1.2px;
    text-transform: uppercase; padding: 5px 14px; border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
body[data-page="promotions.php"] .prp-badge-free { background: #f59e0b; color: #1f1400; }
body[data-page="promotions.php"] .prp-badge-welcome { background: #10b981; color: #fff; }
body[data-page="promotions.php"] .prp-badge-deposit { background: #3b82f6; color: #fff; }
body[data-page="promotions.php"] .prp-badge-crypto { background: #06b6d4; color: #04222a; }
body[data-page="promotions.php"] .prp-badge-default { background: #5b626c; color: #fff; }
/* ---- Guide ---- */
body[data-page="promotions.php"] .prp-guide {
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 12px; overflow: hidden;
    margin-top: 4px;
    background: rgba(255,255,255,0.015);
}
body[data-page="promotions.php"] .prp-guide-trigger {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; cursor: pointer; transition: background 0.2s;
}
body[data-page="promotions.php"] .prp-guide-trigger:hover { background: rgba(255,255,255,0.01); }
body[data-page="promotions.php"] .prp-guide-left { display: flex; align-items: center; gap: 12px; }
body[data-page="promotions.php"] .prp-guide-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    color: #5b626c; font-size: 14px;
}
body[data-page="promotions.php"] .prp-guide-title { font-size: 13px; font-weight: 700; color: rgba(230,230,230,0.85); }
body[data-page="promotions.php"] .prp-guide-arrow { color: rgba(255,255,255,0.14); font-size: 12px; transition: transform 0.3s; }
body[data-page="promotions.php"] .prp-guide.open .prp-guide-arrow { transform: rotate(180deg); }
body[data-page="promotions.php"] .prp-guide-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
body[data-page="promotions.php"] .prp-guide.open .prp-guide-body { max-height: 600px; }
body[data-page="promotions.php"] .prp-guide-inner { padding: 18px 20px; border-top: 1px solid rgba(255,255,255,0.03); }
body[data-page="promotions.php"] .prp-guide-inner p { font-size: 13px; color: rgba(160,160,160,0.6); line-height: 1.7; margin-bottom: 8px; }
body[data-page="promotions.php"] .prp-guide-inner strong { color: rgba(255,255,255,0.14); }
body[data-page="promotions.php"] .prp-guide-list { list-style: none; padding: 0; margin: 0 0 12px; }
body[data-page="promotions.php"] .prp-guide-list li { font-size: 12px; color: rgba(150,150,150,0.6); padding: 4px 0 4px 16px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.04); }
body[data-page="promotions.php"] .prp-guide-list li:last-child { border-bottom: none; }
body[data-page="promotions.php"] .prp-guide-list li::before { content: '›'; position: absolute; left: 0; color: rgba(255,255,255,0.14); font-weight: 700; font-size: 14px; line-height: 1.3; }
/* ---- Empty ---- */
body[data-page="promotions.php"] .prp-empty { text-align: center; padding: 80px 24px; display: flex; flex-direction: column; align-items: center; }
body[data-page="promotions.php"] .prp-empty-ring {
    width: 72px; height: 72px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: rgba(255,255,255,0.10); margin-bottom: 20px;
    background: rgba(255,255,255,0.01);
}
body[data-page="promotions.php"] .prp-empty h3 { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
body[data-page="promotions.php"] .prp-empty p { font-size: 13px; color: rgba(180,180,180,0.4); }
/* ---- Toast ---- */
body[data-page="promotions.php"] .prp-toasts { position: fixed; bottom: 100px; right: 18px; z-index: 2147483647; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
body[data-page="promotions.php"] .prp-toast {
    max-width: 320px; padding: 12px 16px; border-radius: 12px;
    font-size: 13px; font-weight: 600; color: #fff;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5); pointer-events: auto;
    animation: prp-toast-in__promotions_php_0 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes prp-toast-in__promotions_php_0 { from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:none} }
@keyframes prp-toast-out__promotions_php_0 { from{opacity:1;transform:none} to{opacity:0;transform:translateX(50px)} }
body[data-page="promotions.php"] .prp-toast.success { background: linear-gradient(135deg, rgba(var(--primary-rgb, 172, 137, 94),.95), rgba(var(--primary-rgb, 172, 137, 94),.95)); border:1px solid rgba(var(--primary-rgb, 172, 137, 94),.4); }
body[data-page="promotions.php"] .prp-toast.error { background: linear-gradient(135deg, rgba(220,38,38,.95), rgba(185,28,28,.95));  border:1px solid rgba(220,38,38,.4); }
@media(max-width:600px) {
body[data-page="promotions.php"] .prp-toasts { bottom: 90px; right: 12px; left: 12px; }
body[data-page="promotions.php"] .prp-toast { max-width: 100%; }
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
body[data-page="promotions.php"] .prp-command-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
body[data-page="promotions.php"] .prp-code-wrap { width: 100%; }
body[data-page="promotions.php"] .prp-code-field { width: 100%; flex: 1; }
body[data-page="promotions.php"] .prp-divider { display: none; }
body[data-page="promotions.php"] .prp-tabs-wrap { width: 100%; }
body[data-page="promotions.php"] .prp-arrow { display: none; }
body[data-page="promotions.php"] .prp-tabs { padding: 0; scroll-behavior: smooth; }
body[data-page="promotions.php"] .prp-tabs-wrap::before, body[data-page="promotions.php"] .prp-tabs-wrap::after { display: none; }
body[data-page="promotions.php"] .prp-hero { padding: 36px 16px 28px; flex-direction: column; align-items: flex-start; gap: 20px; }
body[data-page="promotions.php"] .prp-hero-stats { align-items: flex-start; gap: 28px; }
body[data-page="promotions.php"] .prp-stat { text-align: left; }
body[data-page="promotions.php"] .prp-hero-rule, body[data-page="promotions.php"] .prp-active-strip, body[data-page="promotions.php"] .prp-grid-wrap { padding-left: 16px; padding-right: 16px; }
body[data-page="promotions.php"] .prp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
body[data-page="promotions.php"] .prp-grid { grid-template-columns: 1fr; }
body[data-page="promotions.php"] .prp-hero-heading { font-size: 28px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
body[data-page="promotions.php"] .prp-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ── gizlilik.php (satır içi <style>, sadece bu sayfada — body[data-page="gizlilik.php"] ile kapsandı) ── */
body[data-page="gizlilik.php"] .privacy-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(var(--primary-rgb, 172, 137, 94), 0.1) 100%);
    padding: 80px 0 60px;
    margin-bottom: 40px;
}
body[data-page="gizlilik.php"] .privacy-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
body[data-page="gizlilik.php"] .privacy-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 20px;
    line-height: 1.2;
}
body[data-page="gizlilik.php"] .privacy-hero p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.6;
}
body[data-page="gizlilik.php"] .privacy-section {
    padding: 40px 0;
}
body[data-page="gizlilik.php"] .privacy-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body[data-page="gizlilik.php"] .privacy-text h2 {
    color: #3b82f6;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 40px 0 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.3);
}
body[data-page="gizlilik.php"] .privacy-text h2:first-child {
    margin-top: 0;
}
body[data-page="gizlilik.php"] .privacy-text h4 {
    color: #f8fafc;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
body[data-page="gizlilik.php"] .privacy-text p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}
body[data-page="gizlilik.php"] .privacy-text a {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.3s;
}
body[data-page="gizlilik.php"] .privacy-text a:hover {
    color: #60a5fa;
}
body[data-page="gizlilik.php"] .intro-section, body[data-page="gizlilik.php"] .privacy-section-block {
    margin-bottom: 40px;
}
body[data-page="gizlilik.php"] .data-types, body[data-page="gizlilik.php"] .usage-purposes {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}
body[data-page="gizlilik.php"] .data-type-item, body[data-page="gizlilik.php"] .purpose-item {
    background: rgba(6, 7, 10, 0.6);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}
body[data-page="gizlilik.php"] .data-type-item:hover, body[data-page="gizlilik.php"] .purpose-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
body[data-page="gizlilik.php"] .data-type-item i, body[data-page="gizlilik.php"] .purpose-item i {
    font-size: 2rem;
    color: #3b82f6;
    min-width: 40px;
}
body[data-page="gizlilik.php"] .security-features, body[data-page="gizlilik.php"] .rights-list {
    display: grid;
    gap: 15px;
    margin: 20px 0;
}
body[data-page="gizlilik.php"] .security-item, body[data-page="gizlilik.php"] .right-item {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid #10b981;
    padding: 15px 20px;
    border-radius: 8px;
}
body[data-page="gizlilik.php"] .security-item h4, body[data-page="gizlilik.php"] .right-item h4 {
    color: #10b981;
    margin-bottom: 8px;
}
body[data-page="gizlilik.php"] .highlight-box {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}
body[data-page="gizlilik.php"] .highlight-box p {
    margin-bottom: 0;
}
@media (max-width: 768px) {
body[data-page="gizlilik.php"] .privacy-hero {
        padding: 60px 0 40px;
    }
body[data-page="gizlilik.php"] .privacy-hero h1 {
        font-size: 2rem;
    }
body[data-page="gizlilik.php"] .privacy-content {
        padding: 30px 20px;
    }
body[data-page="gizlilik.php"] .privacy-text h2 {
        font-size: 1.5rem;
    }
}
/* İçerik Yönetimi (Backoffice > İçerik) — admin bu sayfayı ham HTML olarak
   düzenlerse kullanılan genel kapsayıcı. Sayfanın kendi orijinal tasarımından
   bağımsız, site temasıyla uyumlu sade bir kart. */
body[data-page="gizlilik.php"] .cms-override-wrap { padding: 70px 0; }
body[data-page="gizlilik.php"] .cms-override-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #cbd5e1;
    line-height: 1.8;
}
body[data-page="gizlilik.php"] .cms-override-title {
    color: #f8fafc;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}
body[data-page="gizlilik.php"] .cms-override-content h1, body[data-page="gizlilik.php"] .cms-override-content h2, body[data-page="gizlilik.php"] .cms-override-content h3 {
    color: #f8fafc;
    margin: 28px 0 14px;
}
body[data-page="gizlilik.php"] .cms-override-content h2 { font-size: 1.5rem; }
body[data-page="gizlilik.php"] .cms-override-content h3 { font-size: 1.2rem; }
body[data-page="gizlilik.php"] .cms-override-content p { margin-bottom: 14px; }
body[data-page="gizlilik.php"] .cms-override-content ul, body[data-page="gizlilik.php"] .cms-override-content ol { margin: 0 0 14px 22px; }
body[data-page="gizlilik.php"] .cms-override-content li { margin-bottom: 6px; }
body[data-page="gizlilik.php"] .cms-override-content a { color: var(--primary, #ac895e); text-decoration: underline; }
body[data-page="gizlilik.php"] .cms-override-content img { max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 767px) {
body[data-page="gizlilik.php"] .cms-override-content { padding: 26px; }
body[data-page="gizlilik.php"] .cms-override-title { font-size: 1.5rem; }
}


/* ── turnuva.php (satır içi <style>, sadece bu sayfada — body[data-page="turnuva.php"] ile kapsandı) ── */
body[data-page="turnuva.php"] .tvd-page { padding: 20px 0 50px; }
body[data-page="turnuva.php"] .tvd-hero { position: relative; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--st-elevated), var(--st-surface)); border: 1px solid var(--st-brd-md); margin-bottom: 18px; }
body[data-page="turnuva.php"] .tvd-hero img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
body[data-page="turnuva.php"] .tvd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,7,10,.94), rgba(6,7,10,.25)); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; }
body[data-page="turnuva.php"] .tvd-hero-title { font-size: 21px; font-weight: 800; color: #fff; margin-bottom: 4px; line-height: 1.25; }
body[data-page="turnuva.php"] .tvd-hero-dates { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 10px; }
body[data-page="turnuva.php"] .tvd-countdown { display: flex; gap: 8px; }
body[data-page="turnuva.php"] .tvd-countdown-box { background: rgba(6,7,10,.75); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 6px 10px; text-align: center; min-width: 52px; }
body[data-page="turnuva.php"] .tvd-countdown-box .n { font-size: 17px; font-weight: 800; color: var(--st-green-hi); font-variant-numeric: tabular-nums; line-height: 1.1; }
body[data-page="turnuva.php"] .tvd-countdown-box .l { font-size: 8.5px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; }
body[data-page="turnuva.php"] .tvd-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) {
body[data-page="turnuva.php"] .tvd-grid { grid-template-columns: 1fr; }
}
body[data-page="turnuva.php"] .tvd-prizepool { background: linear-gradient(135deg, color-mix(in srgb, var(--st-green-hi) 14%, var(--st-surface)), var(--st-surface)); border: 1px solid color-mix(in srgb, var(--st-green-hi) 35%, var(--st-brd-md)); border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; }
body[data-page="turnuva.php"] .tvd-prizepool-label { font-size: 10px; color: var(--st-text-3); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
body[data-page="turnuva.php"] .tvd-prizepool-amount { font-size: 19px; font-weight: 800; color: var(--st-green-hi); display: flex; align-items: center; gap: 8px; }
body[data-page="turnuva.php"] .tvd-sidebar-scroll { max-height: 280px; overflow-y: auto; }
body[data-page="turnuva.php"] .tvd-card { background: var(--st-surface); border: 1px solid var(--st-brd-md); border-radius: 12px; padding: 15px; margin-bottom: 14px; }
body[data-page="turnuva.php"] .tvd-card h3 { font-size: 13px; font-weight: 800; color: var(--st-text-1); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; }
body[data-page="turnuva.php"] .tvd-card h3 i { color: var(--st-green-hi); }
body[data-page="turnuva.php"] .tvd-card p { color: var(--st-text-2); font-size: 12.5px; line-height: 1.65; white-space: pre-line; }
body[data-page="turnuva.php"] .tvd-info-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--st-brd); font-size: 12px; gap: 10px; }
body[data-page="turnuva.php"] .tvd-info-row:last-child { border-bottom: none; }
body[data-page="turnuva.php"] .tvd-info-row span:first-child { color: var(--st-text-3); flex-shrink: 0; }
body[data-page="turnuva.php"] .tvd-info-row span:last-child { color: var(--st-text-1); font-weight: 700; text-align: right; }
body[data-page="turnuva.php"] .tvd-standing { background: linear-gradient(135deg, var(--st-elevated), var(--st-surface)); border: 1px solid var(--st-green-hi); border-radius: 12px; padding: 15px; margin-bottom: 14px; }
body[data-page="turnuva.php"] .tvd-standing-rank { font-size: 28px; font-weight: 800; color: var(--st-green-hi); }
body[data-page="turnuva.php"] .tvd-standing-label { font-size: 10px; color: var(--st-text-3); text-transform: uppercase; letter-spacing: .4px; }
body[data-page="turnuva.php"] .tvd-standing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
body[data-page="turnuva.php"] .tvd-join-btn { display: block; width: 100%; text-align: center; padding: 12px; border-radius: 9px; background: var(--st-green-hi); color: #14100a; font-weight: 800; font-size: 13px; border: none; cursor: pointer; }
body[data-page="turnuva.php"] .tvd-join-btn:disabled { opacity: .5; cursor: default; }
body[data-page="turnuva.php"] .tvd-lb-table { width: 100%; border-collapse: collapse; }
body[data-page="turnuva.php"] .tvd-lb-table th { text-align: left; font-size: 10px; text-transform: uppercase; color: var(--st-text-3); padding: 7px 8px; border-bottom: 1px solid var(--st-brd-md); }
body[data-page="turnuva.php"] .tvd-lb-table td { padding: 9px 8px; font-size: 12.5px; color: var(--st-text-1); border-bottom: 1px solid var(--st-brd); }
body[data-page="turnuva.php"] .tvd-lb-table tr.me { background: color-mix(in srgb, var(--st-green-hi) 10%, transparent); }
body[data-page="turnuva.php"] .tvd-lb-rank { font-weight: 800; color: var(--st-text-2); width: 36px; }
body[data-page="turnuva.php"] .tvd-lb-rank.top1 { color: #ffd75e; }
body[data-page="turnuva.php"] .tvd-lb-rank.top2 { color: #d8d8d8; }
body[data-page="turnuva.php"] .tvd-lb-rank.top3 { color: #cd8a4d; }
body[data-page="turnuva.php"] .tvd-lb-scroll { overflow-x: auto; }
body[data-page="turnuva.php"] .tvd-empty { text-align: center; padding: 26px; color: var(--st-text-3); font-size: 12.5px; }
/* Katılım Oyunları */
body[data-page="turnuva.php"] .tvd-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 9px; }
body[data-page="turnuva.php"] .tvd-game-card { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 3/4; background: var(--st-bg); border: 1px solid var(--st-brd); }
body[data-page="turnuva.php"] .tvd-game-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page="turnuva.php"] .tvd-game-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.85) 100%); }
body[data-page="turnuva.php"] .tvd-game-name { position: absolute; bottom: 5px; left: 6px; right: 6px; font-size: 9.5px; font-weight: 700; color: #fff; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Kurallar modalı */
body[data-page="turnuva.php"] .tvd-modal-overlay { position: fixed; inset: 0; background: rgba(4,5,7,.75); z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
body[data-page="turnuva.php"] .tvd-modal-overlay.open { opacity: 1; pointer-events: auto; }
body[data-page="turnuva.php"] .tvd-modal { width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; background: var(--st-surface); border: 1px solid var(--st-brd-md); border-radius: 16px; padding: 22px; }
body[data-page="turnuva.php"] .tvd-modal h3 { font-size: 16px; color: var(--st-text-1); margin-bottom: 12px; }
body[data-page="turnuva.php"] .tvd-modal p { font-size: 12.5px; color: var(--st-text-2); line-height: 1.7; white-space: pre-line; margin-bottom: 16px; }
body[data-page="turnuva.php"] .tvd-modal label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--st-text-2); margin-bottom: 16px; }
@media (max-width: 480px) {
body[data-page="turnuva.php"] .tvd-page { padding: 12px 0 40px; }
body[data-page="turnuva.php"] .tvd-hero img { max-height: 160px; }
body[data-page="turnuva.php"] .tvd-hero-overlay { padding: 12px; }
body[data-page="turnuva.php"] .tvd-hero-title { font-size: 16px; }
body[data-page="turnuva.php"] .tvd-hero-dates { font-size: 10.5px; margin-bottom: 8px; }
body[data-page="turnuva.php"] .tvd-countdown-box { padding: 5px 7px; min-width: 42px; }
body[data-page="turnuva.php"] .tvd-countdown-box .n { font-size: 14px; }
body[data-page="turnuva.php"] .tvd-countdown-box .l { font-size: 7.5px; }
body[data-page="turnuva.php"] .tvd-card { padding: 12px; margin-bottom: 10px; }
body[data-page="turnuva.php"] .tvd-card h3 { font-size: 12px; }
body[data-page="turnuva.php"] .tvd-card p { font-size: 11.5px; }
body[data-page="turnuva.php"] .tvd-games-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
body[data-page="turnuva.php"] .tvd-game-name { font-size: 8.5px; }
body[data-page="turnuva.php"] .tvd-lb-table th, body[data-page="turnuva.php"] .tvd-lb-table td { padding: 7px 6px; font-size: 11px; }
}


/* ── vip-club.php (satır içi <style>, sadece bu sayfada — body[data-page="vip-club.php"] ile kapsandı) ── */
/* ── Genel ── */
body[data-page="vip-club.php"] .vip-page { padding: 44px 0 72px; }
body[data-page="vip-club.php"] .vip-wrap { max-width: 1100px; margin: 0 auto; }
/* ── Hero ── */
body[data-page="vip-club.php"] .vip-hero {
    text-align: center; padding: 20px 20px 40px; position: relative;
}
body[data-page="vip-club.php"] .vip-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
    color: #f5c518; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    padding: 6px 16px; border-radius: 20px; margin-bottom: 22px;
}
body[data-page="vip-club.php"] .vip-hero-title { font-size: 38px; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin-bottom: 16px; letter-spacing: -.5px; }
body[data-page="vip-club.php"] .vip-hero-title span { background: linear-gradient(135deg,#f6e2b6,#c9a97d 55%,#a9760a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
body[data-page="vip-club.php"] .vip-hero-desc { font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 620px; margin: 0 auto; }
@media (max-width: 640px) {
body[data-page="vip-club.php"] .vip-hero-title { font-size: 28px; }
}
/* ── Benim VIP Durumum ── */
body[data-page="vip-club.php"] .my-vip-card {
    background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-xl);
    padding: 30px 28px; margin: 0 0 46px; position: relative; overflow: hidden;
}
body[data-page="vip-club.php"] .my-vip-card::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 15% -10%, rgba(201,169,125,0.16), transparent 60%); pointer-events:none; }
body[data-page="vip-club.php"] .my-vip-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: relative; }
body[data-page="vip-club.php"] .my-vip-badge {
    width: 68px; height: 68px; border-radius: 18px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 32px;
    background: radial-gradient(circle at 32% 24%, rgba(201,169,125,.3), rgba(201,169,125,.06));
    border: 1px solid rgba(201,169,125,.4); box-shadow: inset 0 2px 5px rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.35);
    overflow: hidden;
}
body[data-page="vip-club.php"] .my-vip-badge img { width:100%; height:100%; object-fit:cover; }
body[data-page="vip-club.php"] .my-vip-level-name { font-size: 22px; font-weight: 800; color: var(--text-primary); }
body[data-page="vip-club.php"] .my-vip-level-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
body[data-page="vip-club.php"] .my-vip-total { margin-left: auto; text-align: right; }
body[data-page="vip-club.php"] .my-vip-total .amt { font-size: 22px; font-weight: 800; color: #c9a97d; }
body[data-page="vip-club.php"] .my-vip-total .lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
body[data-page="vip-club.php"] .my-vip-progress-wrap { margin-top: 22px; position: relative; }
body[data-page="vip-club.php"] .my-vip-progress-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
body[data-page="vip-club.php"] .my-vip-progress-track { height: 10px; border-radius: 6px; background: rgba(13,15,19,.6); overflow: hidden; }
body[data-page="vip-club.php"] .my-vip-progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg,#c9a97d,#f59e0b); transition: width .4s; }
body[data-page="vip-club.php"] .my-vip-maxed { text-align: center; padding: 6px 0 2px; color: #34d399; font-size: 13px; font-weight: 700; }
/* ── Bölüm başlığı ── */
body[data-page="vip-club.php"] .vip-section-title { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; text-align: center; }
body[data-page="vip-club.php"] .vip-section-lead { font-size: 13.5px; color: var(--text-secondary); text-align: center; max-width: 640px; margin: 0 auto 34px; line-height: 1.7; }
/* ── Karşılaştırma tablosu (masaüstü) ── */
body[data-page="vip-club.php"] .vip-table-wrap { overflow-x: auto; margin-bottom: 56px; border-radius: 16px; }
body[data-page="vip-club.php"] .vip-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; }
body[data-page="vip-club.php"] .vip-table th, body[data-page="vip-club.php"] .vip-table td { padding: 16px 18px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); }
body[data-page="vip-club.php"] .vip-table th:first-child, body[data-page="vip-club.php"] .vip-table td:first-child { text-align: left; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; width: 220px; }
body[data-page="vip-club.php"] .vip-table thead th { border-bottom: 1px solid rgba(255,255,255,.1); padding-top: 22px; padding-bottom: 18px; }
body[data-page="vip-club.php"] .vip-table tbody tr:last-child td { border-bottom: none; }
body[data-page="vip-club.php"] .vip-table tbody tr:hover { background: rgba(255,255,255,.02); }
body[data-page="vip-club.php"] .vip-tier-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
body[data-page="vip-club.php"] .vip-tier-badge { width: 42px; height: 42px; border-radius: 12px; display:flex; align-items:center; justify-content:center; font-size: 20px; overflow:hidden; }
body[data-page="vip-club.php"] .vip-tier-badge img { width:100%; height:100%; object-fit:cover; }
body[data-page="vip-club.php"] .vip-tier-head .tname { font-size: 13px; font-weight: 800; color: var(--text-primary); letter-spacing: .3px; }
body[data-page="vip-club.php"] .vip-table .gold-val { color: #c9a97d; font-weight: 700; }
body[data-page="vip-club.php"] .vip-table .mark { display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; font-size:11px; }
body[data-page="vip-club.php"] .vip-table .mark.ok { background: rgba(52,211,153,.15); color:#34d399; }
body[data-page="vip-club.php"] .vip-table .mark.no { background: rgba(148,163,184,.12); color:#64748b; }
/* ── Mobil sekmeler + kaydırmalı kart dizisi ── */
body[data-page="vip-club.php"] .vip-mobile { display: none; margin-bottom: 56px; }
@media (max-width: 860px) {
body[data-page="vip-club.php"] .vip-table-wrap { display: none; }
body[data-page="vip-club.php"] .vip-mobile { display: block; }
}
body[data-page="vip-club.php"] .vip-tabs {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin-bottom: 16px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
}
body[data-page="vip-club.php"] .vip-tabs::-webkit-scrollbar { display: none; height: 0; }
body[data-page="vip-club.php"] .vip-tab-btn {
    flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 7px; padding: 8px 14px 8px 8px; border-radius: 30px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(13,15,19,.5); color: var(--text-secondary);
    font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s;
}
body[data-page="vip-club.php"] .vip-tab-btn.active { background: linear-gradient(135deg,#d9bc8e,var(--primary, #ac895e)); color: #14100a; border-color: transparent; }
body[data-page="vip-club.php"] .vip-tab-badge {
    width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    background: rgba(255,255,255,.08);
}
body[data-page="vip-club.php"] .vip-tab-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page="vip-club.php"] .vip-slider-viewport {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none; border-radius: 16px;
}
body[data-page="vip-club.php"] .vip-slider-viewport::-webkit-scrollbar { display: none; height: 0; }
body[data-page="vip-club.php"] .vip-panel {
    flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
    background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 16px; padding: 22px;
    box-sizing: border-box; margin-right: 14px;
}
body[data-page="vip-club.php"] .vip-panel:last-child { margin-right: 0; }
body[data-page="vip-club.php"] .vip-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
body[data-page="vip-club.php"] .vip-panel-head .vip-tier-badge { width: 44px; height: 44px; }
body[data-page="vip-club.php"] .vip-panel-head .tname { font-size: 16px; font-weight: 800; color: var(--text-primary); }
body[data-page="vip-club.php"] .vip-panel .list { list-style: none; margin: 0; padding: 0; }
body[data-page="vip-club.php"] .vip-panel .list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.07); font-size: 13px; }
body[data-page="vip-club.php"] .vip-panel .list li:last-child { border-bottom: none; }
body[data-page="vip-club.php"] .vip-panel .list .k { color: var(--text-secondary); }
body[data-page="vip-club.php"] .vip-panel .list .v { color: var(--text-primary); font-weight: 700; }
body[data-page="vip-club.php"] .vip-slider-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
body[data-page="vip-club.php"] .vip-slider-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); transition: background .2s, width .2s; }
body[data-page="vip-club.php"] .vip-slider-dot.active { background: #c9a97d; width: 18px; border-radius: 4px; }
/* ── Ayrıcalık kartları (özellik + açıklama) ── */
body[data-page="vip-club.php"] .vip-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 18px; margin-bottom: 50px; }
body[data-page="vip-club.php"] .vip-feature-card { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 16px; padding: 24px 20px; transition: border-color .2s, transform .2s; }
body[data-page="vip-club.php"] .vip-feature-card:hover { border-color: rgba(201,169,125,.35); transform: translateY(-3px); }
body[data-page="vip-club.php"] .vip-feature-icon { width: 46px; height: 46px; border-radius: 12px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom: 14px; background: radial-gradient(circle at 32% 24%, rgba(201,169,125,.28), rgba(201,169,125,.05)); border: 1px solid rgba(201,169,125,.3); color: #d9bc8e; }
body[data-page="vip-club.php"] .vip-feature-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
body[data-page="vip-club.php"] .vip-feature-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
/* ── Seviyeye özel ek ayrıcalıklar listesi ── */
body[data-page="vip-club.php"] .vip-perk-pills { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:4px; }
body[data-page="vip-club.php"] .vip-perk-pill { font-size:10.5px; padding:3px 9px; border-radius:20px; background:rgba(201,169,125,.1); border:1px solid rgba(201,169,125,.25); color:#d9bc8e; }
/* ── CTA ── */
body[data-page="vip-club.php"] .vip-cta { text-align: center; padding: 40px 20px; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 20px; }
body[data-page="vip-club.php"] .vip-cta h3 { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
body[data-page="vip-club.php"] .vip-cta p { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 22px; }
body[data-page="vip-club.php"] .vip-cta-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 34px; border-radius: 12px; border: none;
    background: linear-gradient(135deg,#d9bc8e,var(--primary, #ac895e)); color: #14100a; font-weight: 800; font-size: 14px; cursor: pointer;
    box-shadow: 0 8px 20px rgba(201,169,125,.28), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s, box-shadow .15s; text-decoration: none;
}
body[data-page="vip-club.php"] .vip-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(201,169,125,.4), inset 0 1px 0 rgba(255,255,255,.35); color:#14100a; }
body[data-page="vip-club.php"] .vip-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
/* ── VIP Kuralları ── */
body[data-page="vip-club.php"] .vip-rules-card { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 16px; padding: 28px 30px; margin-bottom: 50px; }
body[data-page="vip-club.php"] .vip-rules-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
body[data-page="vip-club.php"] .vip-rules-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
body[data-page="vip-club.php"] .vip-rules-list li i { color: #c9a97d; font-size: 12px; margin-top: 3px; flex-shrink: 0; }


/* ── kurallar.php (satır içi <style>, sadece bu sayfada — body[data-page="kurallar.php"] ile kapsandı) ── */
body[data-page="kurallar.php"] .rules-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}
body[data-page="kurallar.php"] .rules-header {
    text-align: center;
    margin-bottom: 40px;
}
body[data-page="kurallar.php"] .rules-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
body[data-page="kurallar.php"] .rules-subtitle {
    color: var(--text-secondary);
    font-size: 16px;
}
body[data-page="kurallar.php"] .rules-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 25px;
}
body[data-page="kurallar.php"] .rule-section {
    margin-bottom: 30px;
}
body[data-page="kurallar.php"] .rule-section:last-child {
    margin-bottom: 0;
}
body[data-page="kurallar.php"] .rule-section h3 {
    color: var(--primary, #ac895e);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body[data-page="kurallar.php"] .rule-section h3 i {
    font-size: 22px;
}
body[data-page="kurallar.php"] .rule-list {
    list-style: none;
    padding: 0;
}
body[data-page="kurallar.php"] .rule-list li {
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 15px;
}
body[data-page="kurallar.php"] .rule-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary, #ac895e);
    font-weight: bold;
    font-size: 18px;
}
body[data-page="kurallar.php"] .faq-section {
    margin-top: 40px;
}
body[data-page="kurallar.php"] .faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}
body[data-page="kurallar.php"] .faq-question {
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}
body[data-page="kurallar.php"] .faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
}
body[data-page="kurallar.php"] .faq-question h4 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    flex: 1;
}
body[data-page="kurallar.php"] .faq-question i {
    color: var(--primary, #ac895e);
    transition: transform 0.3s ease;
}
body[data-page="kurallar.php"] .faq-question.active i {
    transform: rotate(180deg);
}
body[data-page="kurallar.php"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
body[data-page="kurallar.php"] .faq-answer-content {
    padding: 0 20px 20px 20px;
    color: var(--text-secondary);
    line-height: 1.7;
}
body[data-page="kurallar.php"] .rules-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 30px 0;
}
@media (max-width: 768px) {
body[data-page="kurallar.php"] .rules-page {
        padding: 15px;
    }
body[data-page="kurallar.php"] .rules-card {
        padding: 20px;
    }
body[data-page="kurallar.php"] .rules-title {
        font-size: 26px;
    }
}
/* İçerik Yönetimi (Backoffice > İçerik) — admin bu sayfayı ham HTML olarak
   düzenlerse kullanılan genel kapsayıcı. Sayfanın kendi orijinal tasarımından
   bağımsız, site temasıyla uyumlu sade bir kart. */
body[data-page="kurallar.php"] .cms-override-wrap { padding: 70px 0; }
body[data-page="kurallar.php"] .cms-override-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #cbd5e1;
    line-height: 1.8;
}
body[data-page="kurallar.php"] .cms-override-title {
    color: #f8fafc;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}
body[data-page="kurallar.php"] .cms-override-content h1, body[data-page="kurallar.php"] .cms-override-content h2, body[data-page="kurallar.php"] .cms-override-content h3 {
    color: #f8fafc;
    margin: 28px 0 14px;
}
body[data-page="kurallar.php"] .cms-override-content h2 { font-size: 1.5rem; }
body[data-page="kurallar.php"] .cms-override-content h3 { font-size: 1.2rem; }
body[data-page="kurallar.php"] .cms-override-content p { margin-bottom: 14px; }
body[data-page="kurallar.php"] .cms-override-content ul, body[data-page="kurallar.php"] .cms-override-content ol { margin: 0 0 14px 22px; }
body[data-page="kurallar.php"] .cms-override-content li { margin-bottom: 6px; }
body[data-page="kurallar.php"] .cms-override-content a { color: var(--primary, #ac895e); text-decoration: underline; }
body[data-page="kurallar.php"] .cms-override-content img { max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 767px) {
body[data-page="kurallar.php"] .cms-override-content { padding: 26px; }
body[data-page="kurallar.php"] .cms-override-title { font-size: 1.5rem; }
}


/* ── slider.php (satır içi <style>, sadece bu sayfada — body[data-page="slider.php"] ile kapsandı) ── */
body[data-page="slider.php"] .slider-preview {
            width: 200px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
body[data-page="slider.php"] .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 8px;
            font-weight: 500;
        }
body[data-page="slider.php"] .alert-success {
            background: rgba(0, 255, 136, 0.15);
            border: 1px solid rgba(0, 255, 136, 0.3);
            color: #00ff88;
        }
body[data-page="slider.php"] .alert-danger {
            background: rgba(255, 51, 102, 0.15);
            border: 1px solid rgba(255, 51, 102, 0.3);
            color: #ff3366;
        }
body[data-page="slider.php"] .badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
body[data-page="slider.php"] .badge-success {
            background: rgba(0, 255, 136, 0.2);
            color: #00ff88;
        }
body[data-page="slider.php"] .badge-danger {
            background: rgba(255, 51, 102, 0.2);
            color: #ff3366;
        }


/* ── index.php (satır içi <style>, sadece bu sayfada — body[data-page="index.php"] ile kapsandı) ── */
/* ── HOMEPAGE LAYOUT OVERRIDE ── */
/* Slider — orijinal hali */
/* Promo banners — eşit 4 sütun, tam genişlik */
body[data-page="index.php"] .promo-banners-section {
    padding: 16px 20px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}
body[data-page="index.php"] .promo-banners-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    max-width: 100% !important;
}
body[data-page="index.php"] .promo-banner-item {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: transform 0.4s ease !important;
}
body[data-page="index.php"] .promo-banner-item:hover {
    transform: scale(1.07) !important;
}
body[data-page="index.php"] .promo-banner-link {
    display: block !important;
}
body[data-page="index.php"] .promo-banner-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    aspect-ratio: unset !important;
}
body[data-page="index.php"] .promo-banner-item:hover .promo-banner-image {
    transform: none !important;
}
/* Mobil — 2x2 grid */
@media (max-width: 700px) {
body[data-page="index.php"] .promo-banners-section { padding: 12px 16px !important; }
body[data-page="index.php"] .promo-banners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
body[data-page="index.php"] .promo-banner-item {
        border-radius: 12px !important;
        height: 96px !important;
    }
body[data-page="index.php"] .promo-banner-link {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
body[data-page="index.php"] .promo-banner-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: auto !important;
    }
/* Oyun kartları mobilde 2 sütun */
body[data-page="index.php"] .games-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
/* Tek kalan son kart gizle */
body[data-page="index.php"] .games-grid .game-card:last-child:nth-child(odd) {
        display: none !important;
    }
}
/* ══════════════════════════════════════════════════
   HOMEPAGE LIVE BETS TABLE
══════════════════════════════════════════════════ */
body[data-page="index.php"] .hp-bets-section {
    padding: 4px 0 28px;
}
body[data-page="index.php"] .hp-bets-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
/* ── tabs row ── */
body[data-page="index.php"] .hp-bets-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
body[data-page="index.php"] .hp-bets-tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    user-select: none;
}
body[data-page="index.php"] .hp-bets-tab.active-casino {
    color: #fff;
    border-color: #22c55e;
}
body[data-page="index.php"] .hp-bets-tab.active-sports {
    color: #fff;
    border-color: #22c55e;
}
body[data-page="index.php"] .hp-bets-tab:hover:not(.active-casino):not(.active-sports) {
    color: rgba(255,255,255,0.75);
}
/* ── table ── */
body[data-page="index.php"] .hp-bets-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
body[data-page="index.php"] .hp-bets-table-wrap::-webkit-scrollbar { height: 3px; }
body[data-page="index.php"] .hp-bets-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
body[data-page="index.php"] .hp-bets-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}
body[data-page="index.php"] .hp-bets-table thead tr {
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
body[data-page="index.php"] .hp-bets-table thead th {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.38);
    text-align: left;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
}
body[data-page="index.php"] .hp-bets-table thead th:last-child, body[data-page="index.php"] .hp-bets-table thead th:nth-last-child(2) {
    text-align: right;
}
body[data-page="index.php"] .hp-bets-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.12s;
}
body[data-page="index.php"] .hp-bets-table tbody tr:last-child { border-bottom: none; }
body[data-page="index.php"] .hp-bets-table tbody tr:hover { background: rgba(255,255,255,0.025); }
body[data-page="index.php"] .hp-bets-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
}
/* game cell */
body[data-page="index.php"] .hp-bets-game {
    display: flex;
    align-items: center;
    gap: 10px;
}
body[data-page="index.php"] .hp-bets-game-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}
body[data-page="index.php"] .hp-bets-game-provider {
    font-size: 10.5px;
    color: rgba(255,255,255,0.35);
    margin-top: 1px;
}
/* player cell */
body[data-page="index.php"] .hp-bets-player {
    display: flex;
    align-items: center;
    gap: 8px;
}
body[data-page="index.php"] .hp-bets-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(198,163,101,0.13), rgba(198,163,101,0.24));
    border: 1px solid rgba(198,163,101,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C6A365;
    flex-shrink: 0;
}
body[data-page="index.php"] .hp-bets-avatar svg {
    width: 55%;
    height: 55%;
}
/* time */
body[data-page="index.php"] .hp-bets-time {
    color: rgba(255,255,255,0.38);
    font-size: 12px;
}
/* amount */
body[data-page="index.php"] .hp-bets-amount {
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    text-align: right;
}
body[data-page="index.php"] .hp-bets-amount-unit {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    margin-left: 3px;
}
/* multiplier */
body[data-page="index.php"] .hp-bets-mult {
    text-align: right;
    font-weight: 600;
    font-size: 13px;
}
body[data-page="index.php"] .hp-bets-mult--win { color: #4ade80; }
body[data-page="index.php"] .hp-bets-mult--loss { color: rgba(255,255,255,0.35); }
/* payout */
body[data-page="index.php"] .hp-bets-pay {
    text-align: right;
    font-weight: 600;
}
body[data-page="index.php"] .hp-bets-pay--win { color: #4ade80; }
body[data-page="index.php"] .hp-bets-pay--loss { color: rgba(255,255,255,0.35); }
/* sports-specific */
body[data-page="index.php"] .hp-bets-sport-match {
    font-size: 11px;
    color: rgba(255,255,255,0.38);
    margin-top: 1px;
}
body[data-page="index.php"] .hp-bets-bet-type {
    font-size: 12px;
    font-weight: 600;
}
body[data-page="index.php"] .hp-bets-bet-type--kombine { color: #fbbf24; }
body[data-page="index.php"] .hp-bets-bet-type--tekli { color: #60a5fa; }
body[data-page="index.php"] .hp-bets-odds {
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
/* panel toggle */
body[data-page="index.php"] .hp-bets-panel { display: none; }
body[data-page="index.php"] .hp-bets-panel.active { display: block; }
/* row entry animation */
@keyframes hp-row-in__index_php_0 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hp-row-slide-in__index_php_0 {
    from { opacity: 0; background: rgba(34,197,94,0.08); transform: translateY(-8px); }
    to   { opacity: 1; background: transparent;          transform: translateY(0); }
}
body[data-page="index.php"] .hp-bets-table tbody tr {
    animation: hp-row-in__index_php_0 0.25s ease both;
}
body[data-page="index.php"] .hp-bets-new-row {
    animation: hp-row-slide-in__index_php_0 0.4s cubic-bezier(0.22,1,0.36,1) both !important;
}
/* ── game icon with image ── */
body[data-page="index.php"] .hp-bets-game-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--border, rgba(255,255,255,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    overflow: hidden;
}
body[data-page="index.php"] .hp-bets-game-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
/* ════════════════════════════════════
   MOBİL — KART LAYOUT (≤ 767px)
════════════════════════════════════ */
@media (max-width: 767px) {
body[data-page="index.php"] .hp-bets-container { padding: 0 10px; }
body[data-page="index.php"] .hp-bets-tab { padding: 9px 14px; font-size: 12.5px; }
/* Masaüstü tablosunu gizle */
body[data-page="index.php"] .hp-bets-table-wrap { display: none; }
/* Kart listesi */
body[data-page="index.php"] .hp-bets-cards {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
body[data-page="index.php"] .hp-bets-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        background: transparent;
        transition: background 0.12s;
    }
body[data-page="index.php"] .hp-bets-card.hp-bets-new-row {
        animation: hp-row-slide-in__index_php_0 0.4s cubic-bezier(0.22,1,0.36,1) both;
    }
body[data-page="index.php"] .hp-bets-card:last-child { border-bottom: none; }
body[data-page="index.php"] .hp-bets-card-icon {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        background: var(--border, rgba(255,255,255,0.08));
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 17px;
        overflow: hidden;
    }
body[data-page="index.php"] .hp-bets-card-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 9px;
        display: block;
    }
body[data-page="index.php"] .hp-bets-card-body {
        flex: 1;
        min-width: 0;
    }
body[data-page="index.php"] .hp-bets-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }
body[data-page="index.php"] .hp-bets-card-game {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }
body[data-page="index.php"] .hp-bets-card-pay {
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
    }
body[data-page="index.php"] .hp-bets-card-pay--win { color: #4ade80; }
body[data-page="index.php"] .hp-bets-card-pay--loss { color: rgba(255,255,255,0.35); }
body[data-page="index.php"] .hp-bets-card-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 3px;
        gap: 6px;
    }
body[data-page="index.php"] .hp-bets-card-meta {
        font-size: 11px;
        color: rgba(255,255,255,0.38);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
body[data-page="index.php"] .hp-bets-card-mult {
        font-size: 11.5px;
        font-weight: 600;
        flex-shrink: 0;
    }
body[data-page="index.php"] .hp-bets-card-mult--win { color: #4ade80; }
body[data-page="index.php"] .hp-bets-card-mult--loss { color: rgba(255,255,255,0.35); }
/* Avatar küçük */
body[data-page="index.php"] .hp-bets-avatar {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }
/* Sport card meta */
body[data-page="index.php"] .hp-bets-card-match {
        font-size: 11px;
        color: rgba(255,255,255,0.38);
    }
body[data-page="index.php"] .hp-bets-card-odds-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}
/* Desktop: kart listeleri gizli */
@media (min-width: 768px) {
body[data-page="index.php"] .hp-bets-cards { display: none; }
}


/* ── index.php (satır içi <style>, sadece bu sayfada — body[data-page="index.php"] ile kapsandı) ── */
body[data-page="index.php"] #feSection { margin:0; padding:24px 0 20px; }
/* ── Sekmeler ── */
body[data-page="index.php"] .fe-tabs-wrap { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; margin-bottom:14px; }
body[data-page="index.php"] .fe-tabs-wrap::-webkit-scrollbar { display:none; }
body[data-page="index.php"] .fe-tabs { display:flex; gap:4px; width:max-content; padding:2px 0; }
body[data-page="index.php"] .fe-tab {
    display:flex; align-items:center; gap:5px;
    padding:6px 14px;
    border-radius:5px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.10);
    color:rgba(255,255,255,0.52);
    font-size:12px; font-weight:600;
    cursor:pointer; white-space:nowrap;
    transition:border-color .15s, color .15s, background .15s;
    font-family:inherit;
}
body[data-page="index.php"] .fe-tab:hover { border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.8); }
body[data-page="index.php"] .fe-tab.active {
    background:#171c24;
    border-color:#C6A46A;
    color:#F4F5F7;
}
body[data-page="index.php"] .fe-tab-ico { display:flex; align-items:center; line-height:1; }
body[data-page="index.php"] .fe-tab-lbl { font-size:12px; }
/* ── Scroll ── */
body[data-page="index.php"] .fe-scroll-wrap { overflow-x:scroll; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; margin:0 -20px; padding-left:20px; padding-right:20px; }
body[data-page="index.php"] .fe-scroll-wrap::-webkit-scrollbar { display:none; }
body[data-page="index.php"] .fe-scroll-wrap:active { cursor:grabbing; }
body[data-page="index.php"] .fe-cards-row { display:flex; gap:8px; width:max-content; }
body[data-page="index.php"] .fe-skel { height:128px; border-radius:6px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
/* ── Kart ── */
body[data-page="index.php"] .fe-card {
    width: 300px;
    border-radius:6px;
    overflow:hidden;
    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        var(--card-bg-image, url('/assets/images/anasayfa.webp'));
    background-size: cover;
    background-position: center;
    border:1px solid rgba(255,255,255,0.14);
    display:flex; flex-direction:column;
    cursor:pointer; position:relative; user-select:none;
    transition:border-color .15s, background .2s;
}
body[data-page="index.php"] .fe-card::before { display:none; }
body[data-page="index.php"] .fe-card:hover {
    border-color:rgba(255,255,255,0.14);
    background:
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        var(--card-bg-image, url('/assets/images/anasayfa.webp'));
    background-size: cover;
    background-position: center;
}
/* ── Üst bar: lig + canlı badge ── */
body[data-page="index.php"] .fe-card-top {
    display:flex; align-items:center; gap:5px;
    padding:7px 10px;
    border-bottom:1px solid rgba(255,255,255,0.05);
    background:rgba(0,0,0,0.25);
}
body[data-page="index.php"] .fe-c-sport { font-size:12px; flex-shrink:0; line-height:1; color:rgba(255,255,255,0.5); }
body[data-page="index.php"] .fe-c-flag { width:14px; height:10px; object-fit:cover; border-radius:1px; flex-shrink:0; display:inline-block; opacity:.85; }
body[data-page="index.php"] .fe-c-comp { font-size:10px; font-weight:600; color:rgba(255,255,255,0.38); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; letter-spacing:.2px; }
body[data-page="index.php"] .fe-c-date { font-size:10px; color:rgba(255,255,255,0.32); font-weight:500; flex-shrink:0; }
body[data-page="index.php"] .fe-c-live {
    flex-shrink:0; font-size:9px; font-weight:800; letter-spacing:.6px;
    color:#0a1a0a; background:#C6A46A;
    padding:2px 7px; border-radius:3px;
}
/* ── Orta: takımlar + skor ── */
body[data-page="index.php"] .fe-card-mid { display:flex; align-items:center; flex:1; padding:14px 12px 12px; gap:6px; }
body[data-page="index.php"] .fe-team { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; }
body[data-page="index.php"] .fe-team-name {
    font-size:12px; font-weight:600;
    color:rgba(255,255,255,0.85);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%; text-align:center;
}
body[data-page="index.php"] .fe-vs-col {
    flex-shrink:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; padding:0 10px;
}
body[data-page="index.php"] .fe-vs-time { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); white-space:nowrap; }
body[data-page="index.php"] .fe-vs-score { font-size:20px; font-weight:800; letter-spacing:2px; color:#fff; line-height:1.1; }
body[data-page="index.php"] .fe-vs-label { font-size:9px; color:rgba(255,255,255,0.18); font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
body[data-page="index.php"] .fe-vs-minute { font-size:11px; font-weight:700; color:var(--primary, #ac895e); letter-spacing:.3px; margin-bottom:1px; }
/* ── Oran butonları ── */
body[data-page="index.php"] .fe-card-odds {
    display:flex;
    border-top:1px solid rgba(255,255,255,0.05);
    background:rgba(0,0,0,0.2);
}
body[data-page="index.php"] .fe-odd-btn {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:8px 4px 9px;
    border-right:1px solid rgba(255,255,255,0.05);
    cursor:pointer;
    transition:background .12s;
}
body[data-page="index.php"] .fe-odd-btn:last-child { border-right:none; }
body[data-page="index.php"] .fe-odd-btn:hover { background:rgba(255,255,255,0.04); }
body[data-page="index.php"] .fe-odd-btn:hover .fe-odd-val { color:#fff; }
body[data-page="index.php"] .fe-odd-btn.fe-odd-loading { opacity:.45; pointer-events:none; animation:fe-odd-pulse__index_php_1 1s ease-in-out infinite; }
@keyframes fe-odd-pulse__index_php_1 { 0%,100%{opacity:.45;} 50%{opacity:.8;} }
body[data-page="index.php"] .fe-odd-label { font-size:9px; color:rgba(255,255,255,0.25); font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
body[data-page="index.php"] .fe-odd-val { font-size:13px; font-weight:700; color:var(--primary, #ac895e); transition:color .12s; }
body[data-page="index.php"] .fe-empty { padding:28px; text-align:center; color:rgba(255,255,255,0.2); font-size:12px; }
/* ── Tümünü gör linki ── */
body[data-page="index.php"] .fe-all-link {
    display:inline-flex; align-items:center; gap:5px;
    font-size:12px; font-weight:600; text-decoration:none;
    padding:7px 18px; border-radius:5px;
    border:1px solid rgba(255,255,255,0.10);
    color:rgba(255,255,255,0.38);
    transition:all .18s;
}
body[data-page="index.php"] .fe-all-link:hover { border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.7); }
@media (max-width:560px) {
body[data-page="index.php"] .fe-card { width:272px; }
body[data-page="index.php"] .fe-team-name { font-size:11px; }
body[data-page="index.php"] .fe-vs-score { font-size:17px; }
body[data-page="index.php"] .fe-vs-time { font-size:11px; }
body[data-page="index.php"] .fe-odd-val { font-size:12.5px; }
body[data-page="index.php"] .fe-tab { padding:6px 11px; }
}


/* ── index.php (satır içi <style>, sadece bu sayfada — body[data-page="index.php"] ile kapsandı) ── */
/* ── STAKE OYUN SCROLLBAR ── */
body[data-page="index.php"] .sk-section { padding: 24px 0 4px; }
body[data-page="index.php"] .sk-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0;
}
body[data-page="index.php"] .sk-section-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
body[data-page="index.php"] .sk-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #e7e9ec);
    margin: 0;
    line-height: 1;
}
body[data-page="index.php"] .sk-live-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.35);
    color: #ff5c5c;
    padding: 2px 6px;
    border-radius: 3px;
    animation: sk-live-pulse__index_php_2 2s ease-in-out infinite;
}
@keyframes sk-live-pulse__index_php_2 { 0%,100%{opacity:1} 50%{opacity:.6} }
body[data-page="index.php"] .sk-sec-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--primary, #ac895e);
    opacity: 0.90;
}
body[data-page="index.php"] .sk-section-title { font-size: 15px; }
@media (max-width: 768px) {
body[data-page="index.php"] .sk-section-title { font-size: 13px; }
}
/* ── YATAY SCROLL CONTAINER ── */
body[data-page="index.php"] .sk-scroll-wrap {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 10px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
body[data-page="index.php"] .sk-scroll-wrap:active { cursor: grabbing; }
body[data-page="index.php"] .sk-scroll-wrap::-webkit-scrollbar { display: none; }
body[data-page="index.php"] .sk-scroll-row {
    display: flex;
    gap: 10px;
    width: max-content;
    padding: 4px 2px;
}
/* KART — sabit genişlik, tam görsel kart */
body[data-page="index.php"] .sk-game-card {
    position: relative;
    cursor: pointer;
    width: 210px;
    flex-shrink: 0;
    border-radius: 0;
    overflow: visible;
    transition: transform .2s ease, box-shadow .2s ease;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    background: transparent;
}
body[data-page="index.php"] .sk-game-card:hover { transform: translateY(-4px); box-shadow: none; }
@media (max-width: 768px) {
body[data-page="index.php"] .sk-game-card { width: 168px; }
}
@media (max-width: 480px) {
body[data-page="index.php"] .sk-game-card { width: 148px; }
}
/* THUMB — tam kart dolduran görsel */
body[data-page="index.php"] .sk-game-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
}
body[data-page="index.php"] .sk-game-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform .35s ease;
    border-radius: 0;
}
body[data-page="index.php"] .sk-game-card:hover .sk-game-thumb img { transform: scale(1.05); }
/* Video kart desteği */
body[data-page="index.php"] .sk-game-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 0;
    transition: transform .35s ease;
}
body[data-page="index.php"] .sk-game-card:hover .sk-game-video { transform: scale(1.05); }
/* Görseli sürüklemeyi engelle */
body[data-page="index.php"] .sk-game-card img, body[data-page="index.php"] .sk-game-thumb img, body[data-page="index.php"] .sk-game-video {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
body[data-page="index.php"] .sk-online-count {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,0.45);
    padding: 2px 7px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
body[data-page="index.php"] .sk-online-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: sk-dot-pulse__index_php_2 3s ease-in-out infinite;
}
@keyframes sk-dot-pulse__index_php_2 { 0%,100%{opacity:1} 50%{opacity:.35} }
/* META — kart altı (isim + online) artık kart içinde, bu wrapper boş kalabilir */
body[data-page="index.php"] .sk-game-meta { display: none; }
/* Drag scroll JS */


/* ── slots.php (satır içi <style>, sadece bu sayfada — body[data-page="slots.php"] ile kapsandı) ── */
/* ============================================================
   SLOTS PAGE — SHARP EDITORIAL CASINO
   Keskin, magazine-grade, gerçek pro casino hissi
   ============================================================ */
/* --- Page Base --- */
body[data-page="slots.php"] .sp-page {
    padding-top: 0;
    margin-top: -85px;
}
@media (max-width: 768px) {
body[data-page="slots.php"] .sp-page {
        margin-top: 0;
    }
}
/* ============================================================
   COMMAND BAR — sticky arama + filtre
   ============================================================ */
body[data-page="slots.php"] .sp-command {
    position: fixed;
    top: var(--top-bar-h, 62px);
    left: var(--sb-width, 232px);
    right: 0;
    z-index: 200;
    background: var(--header-background, rgba(6,7,10,0.97));
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
/* .sp-command artık normal akıştan çıktığı (fixed) için, altındaki
   içerik yukarı kaymasın diye onun yerini tutan boşluk — yüksekliği
   JS ile gerçek zamanlı ölçülüyor (mobilde arama+sekmeler alt alta
   sarabildiği için sabit bir piksel değeri güvenilir olmaz). */
body[data-page="slots.php"] .sp-command-spacer { width: 100%; min-height: 58px; }
@media (max-width: 768px) {
body[data-page="slots.php"] .sp-command-spacer { min-height: 108px; }
}
body[data-page="slots.php"] .sp-command-inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 58px;
}
/* Search */
body[data-page="slots.php"] .sp-search {
    position: relative;
    flex-shrink: 0;
    width: 260px;
}
@media (max-width: 600px) {
body[data-page="slots.php"] .sp-search { width: 100%; }
}
body[data-page="slots.php"] .sp-search-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.25);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s;
}
body[data-page="slots.php"] .sp-search-input {
    width: 100%;
    height: 38px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 0 14px 0 36px;
    color: #fff;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
body[data-page="slots.php"] .sp-search-input::placeholder { color: rgba(180,180,180,0.35); }
body[data-page="slots.php"] .sp-search-input:focus {
    border-color: rgba(255,255,255,0.20);
    background: rgba(255,255,255,0.06);
    box-shadow: none;
}
body[data-page="slots.php"] .sp-search-input:focus ~ .sp-search-ico, body[data-page="slots.php"] .sp-search:focus-within .sp-search-ico { color: rgba(255,255,255,0.45); }
/* Divider */
body[data-page="slots.php"] .sp-divider {
    width: 1px;
    height: 24px;
    background: var(--border, rgba(255,255,255,0.08));
    flex-shrink: 0;
}
/* Provider Scroll Wrapper — ok butonları ile */
body[data-page="slots.php"] .sp-tabs-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
/* Fade kenarlar */
body[data-page="slots.php"] .sp-tabs-wrap::before, body[data-page="slots.php"] .sp-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.2s;
}
body[data-page="slots.php"] .sp-tabs-wrap::before {
    left: 32px;
    background: linear-gradient(90deg, rgba(6,7,10,0.98), transparent);
}
body[data-page="slots.php"] .sp-tabs-wrap::after {
    right: 32px;
    background: linear-gradient(270deg, rgba(6,7,10,0.98), transparent);
}
body[data-page="slots.php"] .sp-tabs-wrap.at-start::before { opacity: 0; }
body[data-page="slots.php"] .sp-tabs-wrap.at-end::after { opacity: 0; }
/* Ok Butonları */
body[data-page="slots.php"] .sp-arrow {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.35);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s;
    z-index: 3;
    user-select: none;
}
body[data-page="slots.php"] .sp-arrow:hover {
    background: var(--border, rgba(255,255,255,0.08));
    border-color: rgba(255,255,255,0.18);
    color: var(--text-primary, #e7e9ec);
}
body[data-page="slots.php"] .sp-arrow:active { transform: scale(0.92); }
body[data-page="slots.php"] .sp-arrow.disabled {
    opacity: 0.25;
    pointer-events: none;
}
/* Tab List */
body[data-page="slots.php"] .sp-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    scroll-behavior: smooth;
}
body[data-page="slots.php"] .sp-tabs::-webkit-scrollbar { display: none; }
body[data-page="slots.php"] .sp-tab {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(180,180,180,0.55);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
    flex-shrink: 0;
}
body[data-page="slots.php"] .sp-tab:hover {
    color: var(--text-primary, #e7e9ec);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
body[data-page="slots.php"] .sp-tab.active {
    color: #fff;
    background: var(--primary, #ac895e);
    border-color: transparent;
    font-weight: 700;
    box-shadow: none;
}
body[data-page="slots.php"] .sp-tab--logo {
    padding: 0 12px;
}
body[data-page="slots.php"] .sp-tab--logo img {
    height: 22px;
    width: 68px;
    object-fit: contain;
    display: block;
}
/* Clear */
body[data-page="slots.php"] .sp-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid rgba(239,68,68,0.25);
    background: transparent;
    color: rgba(239,68,68,0.7);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.18s;
}
body[data-page="slots.php"] .sp-clear:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.5);
    color: #ef4444;
}
/* ============================================================
   HERO STRIP — minimal, typographic
   ============================================================ */
body[data-page="slots.php"] .sp-hero {
    position: relative;
    padding: 48px 24px 32px;
    max-width: 1380px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
body[data-page="slots.php"] .sp-hero--compact { padding: 32px 24px 24px; }
body[data-page="slots.php"] .sp-hero-left {}
body[data-page="slots.php"] .sp-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
body[data-page="slots.php"] .sp-hero-line {
    width: 28px;
    height: 2px;
    background: rgba(6,7,10,0.99);
    border-radius: 2px;
}
body[data-page="slots.php"] .sp-hero-eyebrow-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #5b626c;
}
body[data-page="slots.php"] .sp-hero-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 8px;
}
body[data-page="slots.php"] .sp-hero-heading span {
    color: var(--text-primary, #e7e9ec);
}
body[data-page="slots.php"] .sp-hero-sub {
    font-size: 14px;
    color: rgba(180,180,180,0.5);
    font-weight: 400;
    letter-spacing: 0.01em;
}
body[data-page="slots.php"] .sp-hero-stats {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
    padding-bottom: 4px;
}
body[data-page="slots.php"] .sp-stat {
    text-align: right;
}
body[data-page="slots.php"] .sp-stat-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.04em;
    line-height: 1;
    text-shadow: none;
}
body[data-page="slots.php"] .sp-stat-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(180,180,180,0.4);
    margin-top: 3px;
}
/* Hero divider line */
body[data-page="slots.php"] .sp-hero-rule {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
}
body[data-page="slots.php"] .sp-hero-rule hr {
    border: none;
    height: 1px;
    background: transparent;
    margin: 0;
}
/* ============================================================
   RESULTS META BAR
   ============================================================ */
body[data-page="slots.php"] .sp-meta {
    max-width: 1380px;
    margin: 0 auto;
    padding: 16px 24px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
body[data-page="slots.php"] .sp-meta-count {
    font-size: 12px;
    color: rgba(180,180,180,0.45);
    font-weight: 500;
}
body[data-page="slots.php"] .sp-meta-count strong {
    color: #5b626c;
    font-weight: 700;
}
body[data-page="slots.php"] .sp-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    background: var(--border, rgba(255,255,255,0.08));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.09);
    font-weight: 600;
}
/* ============================================================
   GAMES GRID
   ============================================================ */
body[data-page="slots.php"] .sp-grid-wrap {
    max-width: 1380px;
    margin: 0 auto;
    padding: 20px 24px 64px;
}
body[data-page="slots.php"] .sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
@media (max-width: 768px) {
body[data-page="slots.php"] .sp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
body[data-page="slots.php"] .sp-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
/* ---- Game Card ---- */
body[data-page="slots.php"] .sp-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3/4;
    background: var(--surface-elevated, #06070a);
    border: 1px solid rgba(255,255,255,0.05);
    transition:
        transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    animation: sp-card-in__slots_php_0 0.4s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes sp-card-in__slots_php_0 {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
body[data-page="slots.php"] .sp-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.09),
        0 16px 48px rgba(0,0,0,0.8),
        0 0 32px rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.12);
    z-index: 5;
}
body[data-page="slots.php"] .sp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
body[data-page="slots.php"] .sp-card:hover .sp-card-img {
    transform: scale(1.07);
}
/* Dark gradient overlay */
body[data-page="slots.php"] .sp-card-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            transparent 40%,
            rgba(0,0,0,0.45) 65%,
            rgba(0,0,0,0.92) 100%
        );
    transition: background 0.3s;
}
body[data-page="slots.php"] .sp-card:hover .sp-card-veil {
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.1) 0%,
            rgba(0,0,0,0.5) 55%,
            rgba(0,0,0,0.95) 100%
        );
}
/* Card Bottom Info */
body[data-page="slots.php"] .sp-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 12px 10px;
    z-index: 2;
}
body[data-page="slots.php"] .sp-card-name {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
body[data-page="slots.php"] .sp-card-prov {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(180,180,180,0.5);
}
/* Play Button */
body[data-page="slots.php"] .sp-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--border, rgba(255,255,255,0.08));
    color: var(--text-primary, #e7e9ec);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: none;
    pointer-events: none;
}
body[data-page="slots.php"] .sp-play i { margin-left: 2px; }
body[data-page="slots.php"] .sp-card:hover .sp-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
body[data-page="slots.php"] .sp-play:hover {
    background: var(--border, rgba(255,255,255,0.08));
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%) scale(1.1) !important;
}
/* Mobile: always show small play hint */
@media (hover: none) {
body[data-page="slots.php"] .sp-play {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        pointer-events: auto;
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
/* Dokunmatik ekranlarda kart efektini kapat */
body[data-page="slots.php"] .sp-card:hover {
        transform: none;
        box-shadow: none;
        border-color: rgba(255,255,255,0.05);
        z-index: auto;
    }
body[data-page="slots.php"] .sp-card:hover .sp-card-img {
        transform: none;
    }
/* Hafif dokunma geri bildirimi */
body[data-page="slots.php"] .sp-card:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }
}
/* Badge */
body[data-page="slots.php"] .sp-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    line-height: 1.4;
}
body[data-page="slots.php"] .sp-badge.hot {
    background: #ef4444;
    color: #fff;
}
body[data-page="slots.php"] .sp-badge.new {
    background: var(--border, rgba(255,255,255,0.08));
    color: var(--page-background, #080808);
}
/* ============================================================
   EMPTY STATE
   ============================================================ */
body[data-page="slots.php"] .sp-empty {
    text-align: center;
    padding: 100px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
body[data-page="slots.php"] .sp-empty-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: rgba(200,200,200,0.25);
    margin-bottom: 24px;
    background: rgba(200,200,200,0.03);
}
body[data-page="slots.php"] .sp-empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}
body[data-page="slots.php"] .sp-empty p {
    font-size: 13px;
    color: rgba(180,180,180,0.4);
    margin-bottom: 32px;
    max-width: 320px;
}
body[data-page="slots.php"] .sp-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 22px;
    background: rgba(13,15,19,0.95);
    color: var(--page-background, #080808);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}
body[data-page="slots.php"] .sp-empty-btn:hover {
    box-shadow: 0 6px 20px rgba(255,255,255,0.03);
    transform: translateY(-1px);
}
/* ── Daha Fazla Oyun Butonu ── */
body[data-page="slots.php"] .sp-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 32px 0 8px;
}
body[data-page="slots.php"] .sp-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    background: var(--border, rgba(255,255,255,0.08));
    color: #5b626c;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
}
body[data-page="slots.php"] .sp-load-more:hover {
    background: var(--border, rgba(255,255,255,0.08));
    border-color: rgba(255,255,255,0.12);
    color: var(--text-primary, #e7e9ec);
    transform: translateY(-1px);
}
body[data-page="slots.php"] .sp-load-more:active { transform: scale(0.97); }
body[data-page="slots.php"] .sp-load-more.loading { opacity: 0.6; pointer-events: none; }
body[data-page="slots.php"] .sp-load-more.hidden { display: none; }
body[data-page="slots.php"] .sp-load-more-wrap.hidden { display: none; }
body[data-page="slots.php"] .sp-load-more i { font-size: 14px; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
body[data-page="slots.php"] .sp-command { left: 0; }
body[data-page="slots.php"] .sp-command-inner {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 16px;
        gap: 10px;
    }
body[data-page="slots.php"] .sp-search { width: 100%; }
body[data-page="slots.php"] .sp-divider { display: none; }
body[data-page="slots.php"] .sp-tabs-wrap { width: 100%; }
body[data-page="slots.php"] .sp-arrow { display: none; }
body[data-page="slots.php"] .sp-tabs { padding: 0; scroll-behavior: smooth; }
body[data-page="slots.php"] .sp-tabs-wrap::before, body[data-page="slots.php"] .sp-tabs-wrap::after { display: none; }
body[data-page="slots.php"] .sp-hero { padding: 36px 16px 28px; flex-direction: column; align-items: flex-start; gap: 20px; }
body[data-page="slots.php"] .sp-hero-stats { align-items: flex-start; gap: 28px; }
body[data-page="slots.php"] .sp-stat { text-align: left; }
body[data-page="slots.php"] .sp-grid-wrap { padding: 16px 16px 48px; }
body[data-page="slots.php"] .sp-hero-rule, body[data-page="slots.php"] .sp-meta { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
body[data-page="slots.php"] .sp-hero-heading { font-size: 28px; }
}


/* ── kullanim-sartlari.php (satır içi <style>, sadece bu sayfada — body[data-page="kullanim-sartlari.php"] ile kapsandı) ── */
body[data-page="kullanim-sartlari.php"] .terms-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(var(--primary-rgb, 172, 137, 94), 0.1) 100%);
    padding: 80px 0 60px;
    margin-bottom: 40px;
}
body[data-page="kullanim-sartlari.php"] .terms-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
body[data-page="kullanim-sartlari.php"] .terms-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 20px;
}
body[data-page="kullanim-sartlari.php"] .terms-hero p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.6;
}
body[data-page="kullanim-sartlari.php"] .terms-section {
    padding: 40px 0;
}
body[data-page="kullanim-sartlari.php"] .terms-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body[data-page="kullanim-sartlari.php"] .terms-text h2 {
    color: #3b82f6;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 40px 0 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.3);
}
body[data-page="kullanim-sartlari.php"] .terms-text h2:first-child {
    margin-top: 0;
}
body[data-page="kullanim-sartlari.php"] .terms-text h3 {
    color: #f8fafc;
    font-size: 1.3rem;
    margin: 25px 0 15px;
}
body[data-page="kullanim-sartlari.php"] .terms-text p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}
body[data-page="kullanim-sartlari.php"] .terms-text ul, body[data-page="kullanim-sartlari.php"] .terms-text ol {
    color: #cbd5e1;
    margin: 15px 0 15px 30px;
    line-height: 1.8;
}
body[data-page="kullanim-sartlari.php"] .terms-text li {
    margin-bottom: 10px;
}
body[data-page="kullanim-sartlari.php"] .terms-text strong {
    color: #f8fafc;
}
body[data-page="kullanim-sartlari.php"] .warning-box {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
}
body[data-page="kullanim-sartlari.php"] .warning-box p {
    margin-bottom: 0;
    color: #fca5a5;
}
body[data-page="kullanim-sartlari.php"] .info-box {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
}
@media (max-width: 768px) {
body[data-page="kullanim-sartlari.php"] .terms-hero {
        padding: 60px 0 40px;
    }
body[data-page="kullanim-sartlari.php"] .terms-hero h1 {
        font-size: 2rem;
    }
body[data-page="kullanim-sartlari.php"] .terms-content {
        padding: 30px 20px;
    }
body[data-page="kullanim-sartlari.php"] .terms-text h2 {
        font-size: 1.5rem;
    }
}
/* İçerik Yönetimi (Backoffice > İçerik) — admin bu sayfayı ham HTML olarak
   düzenlerse kullanılan genel kapsayıcı. Sayfanın kendi orijinal tasarımından
   bağımsız, site temasıyla uyumlu sade bir kart. */
body[data-page="kullanim-sartlari.php"] .cms-override-wrap { padding: 70px 0; }
body[data-page="kullanim-sartlari.php"] .cms-override-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #cbd5e1;
    line-height: 1.8;
}
body[data-page="kullanim-sartlari.php"] .cms-override-title {
    color: #f8fafc;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}
body[data-page="kullanim-sartlari.php"] .cms-override-content h1, body[data-page="kullanim-sartlari.php"] .cms-override-content h2, body[data-page="kullanim-sartlari.php"] .cms-override-content h3 {
    color: #f8fafc;
    margin: 28px 0 14px;
}
body[data-page="kullanim-sartlari.php"] .cms-override-content h2 { font-size: 1.5rem; }
body[data-page="kullanim-sartlari.php"] .cms-override-content h3 { font-size: 1.2rem; }
body[data-page="kullanim-sartlari.php"] .cms-override-content p { margin-bottom: 14px; }
body[data-page="kullanim-sartlari.php"] .cms-override-content ul, body[data-page="kullanim-sartlari.php"] .cms-override-content ol { margin: 0 0 14px 22px; }
body[data-page="kullanim-sartlari.php"] .cms-override-content li { margin-bottom: 6px; }
body[data-page="kullanim-sartlari.php"] .cms-override-content a { color: var(--primary, #ac895e); text-decoration: underline; }
body[data-page="kullanim-sartlari.php"] .cms-override-content img { max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 767px) {
body[data-page="kullanim-sartlari.php"] .cms-override-content { padding: 26px; }
body[data-page="kullanim-sartlari.php"] .cms-override-title { font-size: 1.5rem; }
}


/* ── iletisim.php (satır içi <style>, sadece bu sayfada — body[data-page="iletisim.php"] ile kapsandı) ── */
/* Contact Hero */
body[data-page="iletisim.php"] .contact-hero {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    padding: 80px 0 60px;
    margin-bottom: 40px;
}
body[data-page="iletisim.php"] .contact-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
body[data-page="iletisim.php"] .contact-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
body[data-page="iletisim.php"] .contact-hero h1 i {
    color: #3b82f6;
}
body[data-page="iletisim.php"] .contact-hero p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.6;
}
/* Quick Support Section */
body[data-page="iletisim.php"] .quick-support-section {
    padding: 40px 0;
    margin-top: -20px;
}
body[data-page="iletisim.php"] .quick-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}
body[data-page="iletisim.php"] .support-card {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 35px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
body[data-page="iletisim.php"] .support-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}
body[data-page="iletisim.php"] .telegram-card::before {
    background: linear-gradient(90deg, #0088cc, #229ED9);
}
body[data-page="iletisim.php"] .live-support-card::before {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}
body[data-page="iletisim.php"] .email-card::before {
    background: linear-gradient(90deg, #EA4335, #FBBC04);
}
body[data-page="iletisim.php"] .support-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}
body[data-page="iletisim.php"] .support-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    transition: all 0.3s ease;
}
body[data-page="iletisim.php"] .telegram-card .support-icon {
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.2), rgba(34, 158, 217, 0.2));
    color: #229ED9;
}
body[data-page="iletisim.php"] .live-support-card .support-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
    color: #3b82f6;
}
body[data-page="iletisim.php"] .email-card .support-icon {
    background: linear-gradient(135deg, rgba(234, 67, 53, 0.2), rgba(251, 188, 4, 0.2));
    color: #EA4335;
}
body[data-page="iletisim.php"] .support-card:hover .support-icon {
    transform: scale(1.1) rotate(5deg);
}
body[data-page="iletisim.php"] .support-content h3 {
    color: #f8fafc;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}
body[data-page="iletisim.php"] .support-content p {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 20px;
}
body[data-page="iletisim.php"] .support-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
body[data-page="iletisim.php"] .telegram-btn {
    background: linear-gradient(135deg, #0088cc, #229ED9);
    color: white;
}
body[data-page="iletisim.php"] .telegram-btn:hover {
    background: linear-gradient(135deg, #006699, #1a7cb8);
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(34, 158, 217, 0.4);
}
body[data-page="iletisim.php"] .live-support-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}
body[data-page="iletisim.php"] .live-support-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
body[data-page="iletisim.php"] .email-btn {
    background: linear-gradient(135deg, #EA4335, #FBBC04);
    color: white;
}
body[data-page="iletisim.php"] .email-btn:hover {
    background: linear-gradient(135deg, #c53929, #f9ab00);
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(234, 67, 53, 0.4);
}
/* FAQ Section */
body[data-page="iletisim.php"] .faq-section {
    padding: 40px 0;
}
body[data-page="iletisim.php"] .faq-container {
    max-width: 900px;
    margin: 0 auto;
}
body[data-page="iletisim.php"] .faq-header {
    text-align: center;
    margin-bottom: 40px;
}
body[data-page="iletisim.php"] .faq-header h2 {
    color: #f8fafc;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}
body[data-page="iletisim.php"] .faq-header p {
    color: #94a3b8;
    font-size: 1rem;
}
body[data-page="iletisim.php"] .faq-items {
    display: grid;
    gap: 15px;
}
body[data-page="iletisim.php"] .faq-item {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}
body[data-page="iletisim.php"] .faq-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
}
body[data-page="iletisim.php"] .faq-question {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}
body[data-page="iletisim.php"] .faq-question:hover {
    background: rgba(59, 130, 246, 0.05);
}
body[data-page="iletisim.php"] .faq-question h4 {
    color: #f8fafc;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
body[data-page="iletisim.php"] .faq-icon {
    font-size: 1.2rem;
    color: #3b82f6;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
body[data-page="iletisim.php"] .faq-item.active .faq-icon {
    transform: rotate(180deg);
}
body[data-page="iletisim.php"] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
body[data-page="iletisim.php"] .faq-answer-content {
    padding: 0 25px 20px;
    color: #cbd5e1;
    line-height: 1.8;
}
body[data-page="iletisim.php"] .faq-item.active .faq-answer {
    max-height: 500px;
}
/* Contact Info Box */
body[data-page="iletisim.php"] .contact-info-box {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 30px;
    margin-top: 40px;
    text-align: center;
}
body[data-page="iletisim.php"] .contact-info-box h3 {
    color: #10b981;
    font-size: 1.5rem;
    margin-bottom: 15px;
}
body[data-page="iletisim.php"] .contact-info-box p {
    color: #cbd5e1;
    margin-bottom: 20px;
}
body[data-page="iletisim.php"] .contact-methods {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
body[data-page="iletisim.php"] .contact-method {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
    font-weight: 600;
}
body[data-page="iletisim.php"] .contact-method i {
    font-size: 1.2rem;
}
/* Responsive */
@media (max-width: 768px) {
body[data-page="iletisim.php"] .contact-hero {
        padding: 60px 0 40px;
    }
body[data-page="iletisim.php"] .contact-hero h1 {
        font-size: 2rem;
        flex-direction: column;
    }
body[data-page="iletisim.php"] .quick-support-grid {
        grid-template-columns: 1fr;
    }
body[data-page="iletisim.php"] .support-card {
        padding: 25px;
    }
body[data-page="iletisim.php"] .faq-question {
        padding: 15px 20px;
    }
body[data-page="iletisim.php"] .faq-question h4 {
        font-size: 1rem;
    }
body[data-page="iletisim.php"] .contact-methods {
        flex-direction: column;
        align-items: center;
    }
}
/* İçerik Yönetimi (Backoffice > İçerik) — admin bu sayfayı ham HTML olarak
   düzenlerse kullanılan genel kapsayıcı. Sayfanın kendi orijinal tasarımından
   bağımsız, site temasıyla uyumlu sade bir kart. */
body[data-page="iletisim.php"] .cms-override-wrap { padding: 70px 0; }
body[data-page="iletisim.php"] .cms-override-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #cbd5e1;
    line-height: 1.8;
}
body[data-page="iletisim.php"] .cms-override-title {
    color: #f8fafc;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}
body[data-page="iletisim.php"] .cms-override-content h1, body[data-page="iletisim.php"] .cms-override-content h2, body[data-page="iletisim.php"] .cms-override-content h3 {
    color: #f8fafc;
    margin: 28px 0 14px;
}
body[data-page="iletisim.php"] .cms-override-content h2 { font-size: 1.5rem; }
body[data-page="iletisim.php"] .cms-override-content h3 { font-size: 1.2rem; }
body[data-page="iletisim.php"] .cms-override-content p { margin-bottom: 14px; }
body[data-page="iletisim.php"] .cms-override-content ul, body[data-page="iletisim.php"] .cms-override-content ol { margin: 0 0 14px 22px; }
body[data-page="iletisim.php"] .cms-override-content li { margin-bottom: 6px; }
body[data-page="iletisim.php"] .cms-override-content a { color: var(--primary, #ac895e); text-decoration: underline; }
body[data-page="iletisim.php"] .cms-override-content img { max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 767px) {
body[data-page="iletisim.php"] .cms-override-content { padding: 26px; }
body[data-page="iletisim.php"] .cms-override-title { font-size: 1.5rem; }
}


/* ── 404.php (satır içi <style>, sadece bu sayfada — body[data-page="404.php"] ile kapsandı) ── */
body[data-page="404.php"] .error-container {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
body[data-page="404.php"] .error-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
body[data-page="404.php"] .error-code {
    font-size: 10rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #c9a97d 0%, #FFA500 50%, #c9a97d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-shadow: 0 10px 40px rgba(201,169,125, 0.4);
    animation: float__404_php_0 3s ease-in-out infinite;
    position: relative;
}
@keyframes float__404_php_0 {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}
body[data-page="404.php"] .error-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}
body[data-page="404.php"] .error-message {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    line-height: 1.6;
}
body[data-page="404.php"] .error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
body[data-page="404.php"] .btn-home {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, rgba(201,169,125, 0.15), rgba(255, 165, 0, 0.15));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(201,169,125, 0.4);
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
body[data-page="404.php"] .btn-home:hover {
    background: linear-gradient(135deg, rgba(201,169,125, 0.25), rgba(255, 165, 0, 0.25));
    border-color: rgba(201,169,125, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(201,169,125, 0.4);
}
body[data-page="404.php"] .btn-back {
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
body[data-page="404.php"] .btn-back:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}
@media (max-width: 768px) {
body[data-page="404.php"] .error-code {
        font-size: 6rem;
    }
body[data-page="404.php"] .error-title {
        font-size: 2rem;
    }
body[data-page="404.php"] .error-message {
        font-size: 1rem;
    }
body[data-page="404.php"] .error-actions {
        flex-direction: column;
    }
body[data-page="404.php"] .btn-home, body[data-page="404.php"] .btn-back {
        width: 100%;
        justify-content: center;
    }
}


/* ── deposit.php (satır içi <style>, sadece bu sayfada — body[data-page="deposit.php"] ile kapsandı) ── */
/* ═══════════════════════════════════════════════════════════
   DEPOSIT — BASE
═══════════════════════════════════════════════════════════ */
body[data-page="deposit.php"] .main-content * {margin:0;padding:0;box-sizing:border-box}
body[data-page="deposit.php"] .main-content {
  --bg:var(--surface-elevated, #06070a);
  --card:var(--surface, #0d0f13);
  --card2:#15171c;
  --border:var(--border, rgba(255,255,255,0.08));

  --text1:#ffffff;
  --text2:rgba(255,255,255,0.65);
  --text3:rgba(255,255,255,0.38);
  --green:var(--primary, #ac895e);
  --blue:#9aa4b0;
  --red:#ef4444;
  --orange: #c9a97d;
}
body[data-page="deposit.php"] .main-content {font-family:'Manrope','Inter',-apple-system,sans-serif;color:var(--text1);min-height:100vh}
/* ── Container ── */
body[data-page="deposit.php"] .dp-wrap {max-width:1280px;margin:0 auto;padding:28px 24px 60px}
body[data-page="deposit.php"] .dp-wrap.centered {display:flex;align-items:flex-start;justify-content:center;padding-top:24px}
body[data-page="deposit.php"] .dp-wrap.centered>.dp-center {width:100%;max-width:680px}
/* ── Page header ── */
body[data-page="deposit.php"] .dp-page-header {margin-bottom:32px}
body[data-page="deposit.php"] .dp-page-title {font-size:26px;font-weight:800;color:var(--text1);margin-bottom:6px}
body[data-page="deposit.php"] .dp-page-sub {font-size:14px;color:var(--text2)}
/* ── Tabs ── */
body[data-page="deposit.php"] .dp-tabs {display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
body[data-page="deposit.php"] .dp-tab {padding:9px 22px;border-radius:6px;border:1px solid var(--border);font-size:13px;font-weight:600;cursor:pointer;color:var(--text3);background:transparent;transition:all .2s;display:flex;align-items:center;gap:7px}
body[data-page="deposit.php"] .dp-tab.active {background:#15171c;border-color:rgba(255,255,255,0.18);color:var(--text-primary, #e7e9ec)}
body[data-page="deposit.php"] .dp-tab:not(.active):hover {border-color:rgba(255,255,255,0.18);color:var(--text-primary, #e7e9ec)}
/* ══════════════════════════════════════════════════════════
   STEP 0 — Yöntem Listesi (Görsel referansa uygun)
══════════════════════════════════════════════════════════ */
body[data-page="deposit.php"] .pm-list {display:flex;flex-direction:column;gap:0}
body[data-page="deposit.php"] .pm-item {
  display:grid;
  /* DÜZELTME: "1fr" (isim/info kolonu) kapsayıcının (.dp-wrap, 1280px'e
     kadar) TÜM boş alanını yutuyordu — metin kısa olduğu için isim ile
     sağdaki İşlem Süresi/Min/Maks kolonları arasında dev bir boşluk
     oluşuyordu (ekran görüntülerindeki "bozuk" görünümün asıl sebebi
     buydu, seçici/kapsam sorunu değildi). Artık sınırlı bir genişlik
     aralığı (minmax) kullanılıyor, taşan boşluk satırın SONUNDA kalıyor. */
  grid-template-columns:100px minmax(180px,340px) 150px 130px 130px;
  justify-content:start;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background:var(--card);
  border:1px solid var(--border);
  border-top:none;
  transition:background .2s, border-color .2s;
  cursor:pointer;
  text-decoration:none;
}
body[data-page="deposit.php"] .pm-item:first-child {border-top:1px solid var(--border);border-radius:10px 10px 0 0}
body[data-page="deposit.php"] .pm-item:last-child {border-radius:0 0 10px 10px}
body[data-page="deposit.php"] .pm-item:only-child {border-radius:10px;border-top:1px solid var(--border)}
body[data-page="deposit.php"] .pm-item:hover {background:var(--card2);border-color:rgba(255,255,255,0.14)}
/* Logo hücresi */
body[data-page="deposit.php"] .pm-logo-box {width:100px;height:52px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
body[data-page="deposit.php"] .pm-logo-box img {max-width:100%;max-height:100%;object-fit:contain}
body[data-page="deposit.php"] .pm-logo-box i {font-size:22px;color:var(--text3)}
/* İnfo kolonları */
body[data-page="deposit.php"] .pm-col-label {font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
body[data-page="deposit.php"] .pm-col-value {font-size:13px;font-weight:600;color:var(--text1)}
body[data-page="deposit.php"] .pm-col-value.gold {color:var(--text1)}
body[data-page="deposit.php"] .pm-max-mobile {display:none}
/* sadece mobilde görünür */
/* Detaylar butonu */
body[data-page="deposit.php"] .pm-detail-btn {padding:10px 20px;background:var(--card2);border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:rgba(255,255,255,0.55);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;text-align:center;transition:all .2s;white-space:nowrap}
body[data-page="deposit.php"] .pm-detail-btn:hover {background:rgba(var(--primary-rgb, 172, 137, 94),0.12);border-color:rgba(var(--primary-rgb, 172, 137, 94),0.35);color:var(--text-primary, #e7e9ec)}
/* Bölüm başlığı */
body[data-page="deposit.php"] .pm-section-head {font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin:24px 0 10px;display:flex;align-items:center;gap:8px}
body[data-page="deposit.php"] .pm-section-head::before, body[data-page="deposit.php"] .pm-section-head::after {content:'';flex:1;height:1px;background:var(--border)}
/* Boş durum */
body[data-page="deposit.php"] .pm-empty {padding:56px 20px;text-align:center;color:var(--text3);border:1px solid var(--border);border-radius:10px;background:var(--card)}
body[data-page="deposit.php"] .pm-empty i {font-size:40px;margin-bottom:14px;display:block;color: rgba(255,255,255,0.12)}
body[data-page="deposit.php"] .pm-empty p {font-size:14px}
/* ══════════════════════════════════════════════════════════
   STEP 1/2/3 — Ortak kart
══════════════════════════════════════════════════════════ */
body[data-page="deposit.php"] .dp-card {background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:20px}
body[data-page="deposit.php"] .dp-card-head {padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.03)}
body[data-page="deposit.php"] .dp-card-head-icon {width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
body[data-page="deposit.php"] .dp-card-head-icon.bank {background:rgba(var(--primary-rgb, 172, 137, 94),0.12);color:var(--green)}
body[data-page="deposit.php"] .dp-card-head-icon.crypto {background:rgba(255,255,255,0.06);color:var(--text-primary, #e7e9ec)}
body[data-page="deposit.php"] .dp-card-head-icon.info {background:rgba(var(--primary-rgb, 172, 137, 94),0.12);color:var(--blue)}
body[data-page="deposit.php"] .dp-card-head-icon.success {background:rgba(var(--primary-rgb, 172, 137, 94),0.12);color:var(--green)}
body[data-page="deposit.php"] .dp-card-head h3 {font-size:15px;font-weight:700;color:var(--text1)}
body[data-page="deposit.php"] .dp-card-head p {font-size:12px;color:var(--text2);margin-top:2px}
body[data-page="deposit.php"] .dp-card-body {padding:22px}
/* Info rows */
body[data-page="deposit.php"] .dp-info-row {display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
body[data-page="deposit.php"] .dp-info-row:last-child {border-bottom:none}
body[data-page="deposit.php"] .dp-info-label {font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
body[data-page="deposit.php"] .dp-info-value {font-size:14px;font-weight:600;color:var(--text1);display:flex;align-items:center;gap:8px;word-break:break-all;text-align:right;max-width:70%}
body[data-page="deposit.php"] .dp-info-value.mono {font-family:'Courier New',monospace;font-size:13px}
body[data-page="deposit.php"] .dp-info-value.big {font-size:20px;color:var(--green)}
body[data-page="deposit.php"] .dp-info-value.gold {color:var(--primary, #ac895e)}
/* Copy button */
body[data-page="deposit.php"] .dp-copy-btn {width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.55);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .2s;flex-shrink:0}
body[data-page="deposit.php"] .dp-copy-btn:hover {border-color:rgba(var(--primary-rgb, 172, 137, 94),0.35);color:var(--text-primary, #e7e9ec);background:rgba(var(--primary-rgb, 172, 137, 94),0.08)}
/* Warning / Notice box */
body[data-page="deposit.php"] .dp-notice {display:flex;gap:12px;padding:14px 16px;border-radius:10px;margin-bottom:16px;font-size:13px;line-height:1.6}
body[data-page="deposit.php"] .dp-notice.warn {background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.25);color:rgba(251,191,36,0.85)}
body[data-page="deposit.php"] .dp-notice.error {background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:rgba(239,68,68,0.9)}
body[data-page="deposit.php"] .dp-notice.info {background:rgba(var(--primary-rgb, 172, 137, 94),0.08);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.18);color:rgba(157,242,157,.9)}
body[data-page="deposit.php"] .dp-notice i {font-size:16px;flex-shrink:0;margin-top:1px}
/* Amount input */
body[data-page="deposit.php"] .dp-amount-wrap {position:relative}
body[data-page="deposit.php"] .dp-amount-input {width:100%;padding:18px 60px 18px 20px;border-radius:10px;border:2px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:var(--text1);font-size:28px;font-weight:700;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s;text-align:center}
body[data-page="deposit.php"] .dp-amount-input:focus {border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.06)}
body[data-page="deposit.php"] .dp-amount-suffix {position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:18px;font-weight:700;color:var(--text3)}
body[data-page="deposit.php"] .dp-amount-limits {display:flex;justify-content:center;gap:24px;margin-top:10px;font-size:12px;color:var(--text3)}
body[data-page="deposit.php"] .dp-amount-limits span {display:flex;gap:4px;align-items:center}
body[data-page="deposit.php"] .dp-amount-limits b {color:var(--text2)}
/* Quick amounts */
body[data-page="deposit.php"] .dp-quick-amounts {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
body[data-page="deposit.php"] .dp-quick-btn {padding:9px 4px;border-radius:8px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.55);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
body[data-page="deposit.php"] .dp-quick-btn:hover, body[data-page="deposit.php"] .dp-quick-btn.active {border-color:rgba(255,255,255,0.20);background:#15171c;color:var(--text-primary, #e7e9ec)}
/* QR code */
body[data-page="deposit.php"] .dp-qr {text-align:center;padding:20px 0}
body[data-page="deposit.php"] .dp-qr img {max-width:180px;border-radius:12px;border:2px solid var(--border);padding:8px;background:#fff}
body[data-page="deposit.php"] .dp-qr-hint {font-size:12px;color:var(--text3);margin-top:10px}
/* Summary box */
body[data-page="deposit.php"] .dp-summary {background:rgba(var(--primary-rgb, 172, 137, 94),0.05);border:1px solid rgba(16,185,129,0.15);border-radius:10px;padding:16px 20px;margin-bottom:18px}
body[data-page="deposit.php"] .dp-summary-row {display:flex;justify-content:space-between;align-items:center;padding:5px 0}
body[data-page="deposit.php"] .dp-summary-row:not(:last-child) {border-bottom: 1px solid rgba(255,255,255,0.07)}
body[data-page="deposit.php"] .dp-summary-label {font-size:12px;color:var(--text3)}
body[data-page="deposit.php"] .dp-summary-value {font-size:14px;font-weight:600;color:var(--text1)}
/* Step indicator */
body[data-page="deposit.php"] .dp-steps {display:flex;align-items:center;margin-bottom:30px;gap:0}
body[data-page="deposit.php"] .dp-step {display:flex;align-items:center;gap:8px;flex:1}
body[data-page="deposit.php"] .dp-step-num {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;transition:all .3s}
body[data-page="deposit.php"] .dp-step-num.done {background:var(--green);color:#fff}
body[data-page="deposit.php"] .dp-step-num.active {background:var(--primary, #ac895e);color:#fff}
body[data-page="deposit.php"] .dp-step-num.pending {background:var(--border, rgba(255,255,255,0.08));color:rgba(255,255,255,0.06)}
body[data-page="deposit.php"] .dp-step-label {font-size:12px;font-weight:600}
body[data-page="deposit.php"] .dp-step-label.active {color:var(--text-primary, #e7e9ec)}
body[data-page="deposit.php"] .dp-step-label.done {color:var(--green)}
body[data-page="deposit.php"] .dp-step-label.pending {color:var(--text3)}
body[data-page="deposit.php"] .dp-step-line {flex:1;height:2px;background:var(--border, rgba(255,255,255,0.08));margin:0 8px}
body[data-page="deposit.php"] .dp-step-line.done {background:var(--green)}
/* Bonus seçim */
body[data-page="deposit.php"] .bonus-sel-label {font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
body[data-page="deposit.php"] .bonus-sel-item {display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;border:2px solid var(--border);background:rgba(255,255,255,0.02);cursor:pointer;transition:all .2s;margin-bottom:8px;user-select:none}
body[data-page="deposit.php"] .bonus-sel-item:last-child {margin-bottom:0}
body[data-page="deposit.php"] .bonus-sel-item:hover {border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.03)}
body[data-page="deposit.php"] .bonus-sel-item.bsel-active {border-color:rgba(255,255,255,0.20);background:rgba(255,255,255,0.06)}
body[data-page="deposit.php"] .bonus-sel-radio {width:18px;height:18px;border-radius:50%;border:2px solid var(--text3);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}
body[data-page="deposit.php"] .bonus-sel-item.bsel-active .bonus-sel-radio {border-color:var(--primary, #ac895e);background:var(--primary, #ac895e)}
body[data-page="deposit.php"] .bonus-sel-item.bsel-active .bonus-sel-radio::after {content:'';width:7px;height:7px;border-radius:50%;background:#fff;display:block}
body[data-page="deposit.php"] .bonus-sel-name {font-size:13px;font-weight:700;color:var(--text1)}
body[data-page="deposit.php"] .bonus-sel-desc {font-size:11px;color:var(--text3);margin-top:2px}
body[data-page="deposit.php"] .bonus-sel-pct {margin-left:auto;font-size:18px;font-weight:800;color:var(--primary, #ac895e);flex-shrink:0}
/* Buttons */
body[data-page="deposit.php"] .dp-btn-row {display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:20px}
body[data-page="deposit.php"] .dp-btn {padding:14px 20px;border-radius:10px;border:none;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;text-decoration:none;font-family:'Inter',sans-serif}
body[data-page="deposit.php"] .dp-btn-back {background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);color:rgba(255,255,255,0.7)}
body[data-page="deposit.php"] .dp-btn-back:hover {background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.26);color:#fff}
body[data-page="deposit.php"] .dp-btn-primary {background:var(--primary, #ac895e);border:none;color:#fff!important;font-weight:800}
body[data-page="deposit.php"] .dp-btn-primary:hover {background:#c9a97d}
body[data-page="deposit.php"] .dp-btn-primary:disabled {opacity:.45;cursor:not-allowed}
body[data-page="deposit.php"] .dp-btn-full {grid-column:1/-1}
body[data-page="deposit.php"] .dp-btn-green {background:var(--primary, #ac895e);border:none;color:#fff!important;font-weight:800}
body[data-page="deposit.php"] .dp-btn-green:hover {background:#c9a97d}
/* Success icon */
body[data-page="deposit.php"] .dp-success-icon {width:70px;height:70px;border-radius:50%;background:rgba(var(--primary-rgb, 172, 137, 94),0.12);border:2px solid rgba(var(--primary-rgb, 172, 137, 94),0.25);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:28px;color:var(--green)}
/* Status badge */
body[data-page="deposit.php"] .dp-badge {display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
body[data-page="deposit.php"] .dp-badge.pending {background:rgba(251,191,36,0.10);border:1px solid rgba(251,191,36,0.20);color:rgba(251,191,36,0.8)}
body[data-page="deposit.php"] .dp-badge.approved {background:rgba(var(--primary-rgb, 172, 137, 94),0.12);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);color:var(--green)}
/* Responsive */
@media(max-width:900px) {
body[data-page="deposit.php"] .pm-item {grid-template-columns:80px minmax(140px,260px) 140px 110px;justify-content:start}
body[data-page="deposit.php"] .pm-item>*:nth-child(n+5) {display:none}
body[data-page="deposit.php"] .pm-max-desktop {display:none!important}
}
/* Mobile min/max row — gizli desktop'ta */
body[data-page="deposit.php"] .pm-minmax-row {display:none}
@media(max-width:640px) {
body[data-page="deposit.php"] .dp-wrap {padding:16px 14px 50px}
body[data-page="deposit.php"] .dp-quick-amounts {grid-template-columns:repeat(2,1fr)}
body[data-page="deposit.php"] .dp-tabs {gap:6px}
body[data-page="deposit.php"] .dp-tab {padding:8px 14px;font-size:12px}
body[data-page="deposit.php"] .pm-item {
    display:flex;align-items:center;
    gap:10px;padding:11px 14px;
  }
/* Logo */
body[data-page="deposit.php"] .pm-logo-box {flex-shrink:0;width:52px!important;height:40px!important}
/* Info blok (isim + min/max) */
body[data-page="deposit.php"] .pm-info {flex:1;min-width:0}
body[data-page="deposit.php"] .pm-info .pm-col-label {display:none}
body[data-page="deposit.php"] .pm-info .pm-col-value {
    font-size:13px;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    margin-bottom:3px;
  }
/* Min/max satırı */
body[data-page="deposit.php"] .pm-minmax-row {
    display:flex!important;align-items:center;
    gap:0;flex-wrap:nowrap;
  }
body[data-page="deposit.php"] .pm-mm-label {
    font-size:10px;font-weight:600;color: rgba(255,255,255,0.30);
    text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
  }
body[data-page="deposit.php"] .pm-mm-val {
    font-size:11px;font-weight:700;color:rgba(255,255,255,0.60);
    margin-left:3px;white-space:nowrap;
  }
body[data-page="deposit.php"] .pm-mm-sep {color: rgba(255,255,255,0.12);margin:0 6px;font-size:10px}
/* Diğer kolonları gizle */
body[data-page="deposit.php"] .pm-item>*:nth-child(3), body[data-page="deposit.php"] .pm-item>*:nth-child(4), body[data-page="deposit.php"] .pm-item>*:nth-child(5), body[data-page="deposit.php"] .pm-max-desktop {display:none!important}
/* Detaylar butonu */
body[data-page="deposit.php"] .pm-item>*:last-child {flex-shrink:0}
body[data-page="deposit.php"] .pm-detail-btn {padding:7px 11px;font-size:10px;white-space:nowrap}
}
/* ══════════════════════════════════════════════════════════
   HERO BANNER (promotions.php benzeri)
══════════════════════════════════════════════════════════ */
body[data-page="deposit.php"] .dp-hero {
    position: relative;
    background: var(--surface-elevated, #06070a);
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 0;
    /* Cancel main-content padding so hero touches navbar */
    margin-top: -85px;
    padding-top: 0;
}
/* With ticker banner, body gets extra padding - compensate */
body[data-page="deposit.php"].has-ticker .dp-hero {
    margin-top: -117px;
    padding-top: 32px;
}
body[data-page="deposit.php"] .dp-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 24px 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 2;
}
body[data-page="deposit.php"] .dp-hero-left { flex: 1; }
body[data-page="deposit.php"] .dp-hero-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -1px;
}
body[data-page="deposit.php"] .dp-hero-title .t-white { color: #fff; }
body[data-page="deposit.php"] .dp-hero-title .t-gold {color: var(--primary, #ac895e); font-style: italic;}
body[data-page="deposit.php"] .dp-hero-sub {
    font-size: 14px;
    color: var(--text3);
    max-width: 480px;
    line-height: 1.6;
}
body[data-page="deposit.php"] .dp-hero-right {
    display: flex;
    gap: 32px;
    align-items: flex-end;
    flex-shrink: 0;
}
body[data-page="deposit.php"] .dp-hero-stat { text-align: center; }
body[data-page="deposit.php"] .dp-hero-stat-num {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary, #e7e9ec);
    line-height: 1;
    letter-spacing: -1px;
}
body[data-page="deposit.php"] .dp-hero-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text3);
    margin-top: 4px;
}
body[data-page="deposit.php"] .dp-hero-nav {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    position: relative;
    z-index: 2;
}
body[data-page="deposit.php"] .dp-hero-nav-btn {
    padding: 13px 24px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    background: transparent;
    color: rgba(255,255,255,0.45);
    border-bottom: 3px solid transparent;
    transition: all .2s;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    letter-spacing: .01em;
}
body[data-page="deposit.php"] .dp-hero-nav-btn.active {
    color: var(--primary, #ac895e);
    border-bottom-color: var(--primary, #ac895e);
    background: transparent;
}
body[data-page="deposit.php"] .dp-hero-nav-btn:hover:not(.active) {
    color: rgba(255,255,255,0.75);
    border-bottom-color: rgba(255,255,255,0.2);
}
/* Glow bg */
body[data-page="deposit.php"] .dp-hero::before {
    content: '';
    position: absolute;
    right: -100px;
    top: -60px;
    width: 500px;
    height: 300px;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}
@media(max-width:768px) {
body[data-page="deposit.php"] .dp-hero-title { font-size: 32px; }
body[data-page="deposit.php"] .dp-hero-stat-num { font-size: 28px; }
body[data-page="deposit.php"] .dp-hero-inner { padding: 32px 16px 24px; flex-direction: column; align-items: flex-start; }
body[data-page="deposit.php"] .dp-hero-right { gap: 20px; }
body[data-page="deposit.php"] .dp-hero-nav { padding: 0 16px; overflow-x: auto; }
body[data-page="deposit.php"] .dp-wrap { padding: 24px 14px 50px; }
}


/* ── sorumlu-oyun.php (satır içi <style>, sadece bu sayfada — body[data-page="sorumlu-oyun.php"] ile kapsandı) ── */
body[data-page="sorumlu-oyun.php"] .responsible-hero {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
    padding: 80px 0 60px;
    margin-bottom: 40px;
}
body[data-page="sorumlu-oyun.php"] .responsible-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
body[data-page="sorumlu-oyun.php"] .responsible-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 20px;
}
body[data-page="sorumlu-oyun.php"] .responsible-hero p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.6;
}
body[data-page="sorumlu-oyun.php"] .responsible-section {
    padding: 40px 0;
}
body[data-page="sorumlu-oyun.php"] .responsible-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body[data-page="sorumlu-oyun.php"] .responsible-text h2 {
    color: #f59e0b;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 40px 0 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(245, 158, 11, 0.3);
}
body[data-page="sorumlu-oyun.php"] .responsible-text h2:first-child {
    margin-top: 0;
}
body[data-page="sorumlu-oyun.php"] .responsible-text h3 {
    color: #f8fafc;
    font-size: 1.3rem;
    margin: 25px 0 15px;
}
body[data-page="sorumlu-oyun.php"] .responsible-text p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}
body[data-page="sorumlu-oyun.php"] .responsible-text ul {
    color: #cbd5e1;
    margin: 15px 0 15px 30px;
    line-height: 1.8;
}
body[data-page="sorumlu-oyun.php"] .responsible-text li {
    margin-bottom: 10px;
}
body[data-page="sorumlu-oyun.php"] .warning-signs {
    display: grid;
    gap: 15px;
    margin: 30px 0;
}
body[data-page="sorumlu-oyun.php"] .warning-sign {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
    padding: 15px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
}
body[data-page="sorumlu-oyun.php"] .warning-sign i {
    font-size: 1.5rem;
    color: #ef4444;
    min-width: 30px;
}
body[data-page="sorumlu-oyun.php"] .tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
body[data-page="sorumlu-oyun.php"] .tool-card {
    background: rgba(6, 7, 10, 0.6);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    transition: all 0.3s ease;
}
body[data-page="sorumlu-oyun.php"] .tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.5);
}
body[data-page="sorumlu-oyun.php"] .tool-card i {
    font-size: 2.5rem;
    color: #f59e0b;
    margin-bottom: 15px;
}
body[data-page="sorumlu-oyun.php"] .tool-card h4 {
    color: #f59e0b;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
body[data-page="sorumlu-oyun.php"] .tool-card p {
    margin-bottom: 0;
    font-size: 0.95rem;
}
body[data-page="sorumlu-oyun.php"] .help-organizations {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
}
body[data-page="sorumlu-oyun.php"] .help-organizations h4 {
    color: #3b82f6;
    margin-bottom: 20px;
}
body[data-page="sorumlu-oyun.php"] .org-list {
    display: grid;
    gap: 15px;
}
body[data-page="sorumlu-oyun.php"] .org-item {
    background: rgba(6, 7, 10, 0.6);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
body[data-page="sorumlu-oyun.php"] .org-info h5 {
    color: #f8fafc;
    margin-bottom: 5px;
}
body[data-page="sorumlu-oyun.php"] .org-info p {
    margin-bottom: 0;
    font-size: 0.9rem;
}
body[data-page="sorumlu-oyun.php"] .org-link {
    background: #3b82f6;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}
body[data-page="sorumlu-oyun.php"] .org-link:hover {
    background: #2563eb;
    transform: scale(1.05);
}
body[data-page="sorumlu-oyun.php"] .emergency-box {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
    text-align: center;
}
body[data-page="sorumlu-oyun.php"] .emergency-box h3 {
    color: #ef4444;
    font-size: 1.5rem;
    margin-bottom: 15px;
}
body[data-page="sorumlu-oyun.php"] .emergency-box p {
    font-size: 1.1rem;
    margin-bottom: 0;
}
@media (max-width: 768px) {
body[data-page="sorumlu-oyun.php"] .responsible-hero {
        padding: 60px 0 40px;
    }
body[data-page="sorumlu-oyun.php"] .responsible-hero h1 {
        font-size: 2rem;
    }
body[data-page="sorumlu-oyun.php"] .responsible-content {
        padding: 30px 20px;
    }
body[data-page="sorumlu-oyun.php"] .responsible-text h2 {
        font-size: 1.5rem;
    }
body[data-page="sorumlu-oyun.php"] .tools-grid {
        grid-template-columns: 1fr;
    }
body[data-page="sorumlu-oyun.php"] .org-item {
        flex-direction: column;
        text-align: center;
    }
}
/* İçerik Yönetimi (Backoffice > İçerik) — admin bu sayfayı ham HTML olarak
   düzenlerse kullanılan genel kapsayıcı. Sayfanın kendi orijinal tasarımından
   bağımsız, site temasıyla uyumlu sade bir kart. */
body[data-page="sorumlu-oyun.php"] .cms-override-wrap { padding: 70px 0; }
body[data-page="sorumlu-oyun.php"] .cms-override-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #cbd5e1;
    line-height: 1.8;
}
body[data-page="sorumlu-oyun.php"] .cms-override-title {
    color: #f8fafc;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}
body[data-page="sorumlu-oyun.php"] .cms-override-content h1, body[data-page="sorumlu-oyun.php"] .cms-override-content h2, body[data-page="sorumlu-oyun.php"] .cms-override-content h3 {
    color: #f8fafc;
    margin: 28px 0 14px;
}
body[data-page="sorumlu-oyun.php"] .cms-override-content h2 { font-size: 1.5rem; }
body[data-page="sorumlu-oyun.php"] .cms-override-content h3 { font-size: 1.2rem; }
body[data-page="sorumlu-oyun.php"] .cms-override-content p { margin-bottom: 14px; }
body[data-page="sorumlu-oyun.php"] .cms-override-content ul, body[data-page="sorumlu-oyun.php"] .cms-override-content ol { margin: 0 0 14px 22px; }
body[data-page="sorumlu-oyun.php"] .cms-override-content li { margin-bottom: 6px; }
body[data-page="sorumlu-oyun.php"] .cms-override-content a { color: var(--primary, #ac895e); text-decoration: underline; }
body[data-page="sorumlu-oyun.php"] .cms-override-content img { max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 767px) {
body[data-page="sorumlu-oyun.php"] .cms-override-content { padding: 26px; }
body[data-page="sorumlu-oyun.php"] .cms-override-title { font-size: 1.5rem; }
}


/* ── withdrawal.php (satır içi <style>, sadece bu sayfada — body[data-page="withdrawal.php"] ile kapsandı) ── */
body[data-page="withdrawal.php"] .main-content * {margin:0;padding:0;box-sizing:border-box}
body[data-page="withdrawal.php"] .main-content {
  --bg:var(--surface-elevated, #06070a);--card:var(--surface, #0d0f13);--card2:#15171c;
  --border:var(--border, rgba(255,255,255,0.08));--border-md:rgba(255,255,255,0.12);
  --text1:#ffffff;--text2:rgba(255,255,255,0.65);--text3:rgba(255,255,255,0.38);
  --green:var(--primary, #ac895e);--blue:#9aa4b0;--red:#ef4444;--orange:#f59e0b;
  --accent:var(--text-primary, #e7e9ec);
}
body[data-page="withdrawal.php"] .main-content {font-family:'Manrope','Inter',-apple-system,sans-serif;color:var(--text1);min-height:100vh}
/* ── HERO (deposit ile aynı) ── */
body[data-page="withdrawal.php"] .wd-hero {position:relative;background:var(--surface-elevated, #06070a);overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.07);margin-top:-85px;padding-top:0}
body[data-page="withdrawal.php"].has-ticker .wd-hero {margin-top:-117px;padding-top:32px}
body[data-page="withdrawal.php"] .wd-hero-inner {max-width:1280px;margin:0 auto;padding:36px 24px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;position:relative;z-index:2}
body[data-page="withdrawal.php"] .wd-hero-left {flex:1}
body[data-page="withdrawal.php"] .wd-hero-title {font-size:48px;font-weight:900;line-height:1.1;margin-bottom:12px;letter-spacing:-1px}
body[data-page="withdrawal.php"] .wd-hero-title .t-white {color:#fff}
body[data-page="withdrawal.php"] .wd-hero-title .t-gold {color:var(--primary, #ac895e);font-style:italic}
body[data-page="withdrawal.php"] .wd-hero-title .t-gold {color:var(--primary, #ac895e);font-style:italic}
body[data-page="withdrawal.php"] .wd-hero-sub {font-size:14px;color:var(--text3);max-width:480px;line-height:1.6}
body[data-page="withdrawal.php"] .wd-hero-right {display:flex;gap:32px;align-items:flex-end;flex-shrink:0}
body[data-page="withdrawal.php"] .wd-hero-stat {text-align:center}
body[data-page="withdrawal.php"] .wd-hero-stat-num {font-size:42px;font-weight:900;color:var(--accent);line-height:1;letter-spacing:-1px}
body[data-page="withdrawal.php"] .wd-hero-stat-label {font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-top:4px}
body[data-page="withdrawal.php"] .wd-hero-nav {max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:0;border-top:1px solid var(--border-md);position:relative;z-index:2}
body[data-page="withdrawal.php"] .wd-nav-btn {padding:13px 24px;font-size:13px;font-weight:700;border:none;cursor:pointer;background:transparent;color:rgba(255,255,255,0.45);border-bottom:3px solid transparent;transition:all .2s;text-decoration:none;display:inline-block;white-space:nowrap;letter-spacing:.01em}
body[data-page="withdrawal.php"] .wd-nav-btn.active {color:var(--primary, #ac895e);border-bottom-color:var(--primary, #ac895e);background:transparent}
body[data-page="withdrawal.php"] .wd-nav-btn:hover:not(.active) {color:rgba(255,255,255,0.75);border-bottom-color:rgba(255,255,255,0.2)}
/* ── Wrap ── */
body[data-page="withdrawal.php"] .wd-wrap {max-width:1280px;margin:0 auto;padding:28px 24px 60px}
body[data-page="withdrawal.php"] .wd-wrap.narrow {max-width:680px;padding-top:24px}
/* ── Page header ── */
body[data-page="withdrawal.php"] .wd-page-title {font-size:24px;font-weight:800;margin-bottom:6px}
body[data-page="withdrawal.php"] .wd-page-sub {font-size:14px;color:var(--text2);margin-bottom:24px}
/* ── Tabs ── */
body[data-page="withdrawal.php"] .wd-tabs {display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
body[data-page="withdrawal.php"] .wd-tab {padding:9px 22px;border-radius:6px;border:1px solid var(--border);font-size:13px;font-weight:600;cursor:pointer;color:var(--text3);background:transparent;transition:all .2s;display:flex;align-items:center;gap:7px}
body[data-page="withdrawal.php"] .wd-tab.active {background:rgba(var(--primary-rgb, 172, 137, 94),0.12);border-color:rgba(var(--primary-rgb, 172, 137, 94),0.35);color:var(--accent)}
body[data-page="withdrawal.php"] .wd-tab:not(.active):hover {border-color:var(--border-md);color:var(--accent)}
/* ── Balance row ── */
body[data-page="withdrawal.php"] .wd-balance-row {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
body[data-page="withdrawal.php"] .wd-balance-box {background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:14px}
body[data-page="withdrawal.php"] .wd-balance-icon {width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
body[data-page="withdrawal.php"] .wd-balance-label {font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
body[data-page="withdrawal.php"] .wd-balance-amt {font-size:20px;font-weight:800;color:var(--text1)}
body[data-page="withdrawal.php"] .wd-balance-amt.withdrawable {color:var(--green)}
/* ── Method list (deposit ile aynı) ── */
body[data-page="withdrawal.php"] .wd-list {display:flex;flex-direction:column;gap:0}
body[data-page="withdrawal.php"] .wd-item {display:grid;grid-template-columns:100px minmax(180px,340px) 150px 130px 130px;justify-content:start;align-items:center;gap:16px;padding:16px 20px;background:var(--card);border:1px solid var(--border);border-top:none;transition:background .2s,border-color .2s;cursor:pointer;text-decoration:none}
body[data-page="withdrawal.php"] .wd-item:first-child {border-top:1px solid var(--border);border-radius:10px 10px 0 0}
body[data-page="withdrawal.php"] .wd-item:last-child {border-radius:0 0 10px 10px}
body[data-page="withdrawal.php"] .wd-item:only-child {border-radius:10px;border-top:1px solid var(--border)}
body[data-page="withdrawal.php"] .wd-item:hover {background:var(--card2);border-color:rgba(255,255,255,0.14)}
body[data-page="withdrawal.php"] .wd-item-minmax {display:none}
body[data-page="withdrawal.php"] .wd-item-info .wd-col-label {font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
body[data-page="withdrawal.php"] .wd-logo-box {width:100px;height:52px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
body[data-page="withdrawal.php"] .wd-logo-box img {max-width:100%;max-height:100%;object-fit:contain}
body[data-page="withdrawal.php"] .wd-logo-box i {font-size:22px;color:var(--text3)}
body[data-page="withdrawal.php"] .wd-col-label {font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
body[data-page="withdrawal.php"] .wd-col-value {font-size:13px;font-weight:600;color:var(--text1)}
body[data-page="withdrawal.php"] .wd-col-value.accent {color:var(--accent)}
body[data-page="withdrawal.php"] .wd-empty {padding:56px 20px;text-align:center;color:var(--text3);border:1px solid var(--border);border-radius:10px;background:var(--card)}
body[data-page="withdrawal.php"] .wd-empty i {font-size:40px;margin-bottom:14px;display:block;color:rgba(255,255,255,0.06)}
/* ── Card (form ekranı) ── */
body[data-page="withdrawal.php"] .wd-card {background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:20px}
body[data-page="withdrawal.php"] .wd-card-head {padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.03)}
body[data-page="withdrawal.php"] .wd-card-head-icon {width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
body[data-page="withdrawal.php"] .wd-card-head h3 {font-size:15px;font-weight:700;color:var(--text1)}
body[data-page="withdrawal.php"] .wd-card-head p {font-size:12px;color:var(--text2);margin-top:2px}
body[data-page="withdrawal.php"] .wd-card-body {padding:22px}
/* ── Info rows ── */
body[data-page="withdrawal.php"] .wd-info-row {display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
body[data-page="withdrawal.php"] .wd-info-row:last-child {border-bottom:none}
body[data-page="withdrawal.php"] .wd-info-label {font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
body[data-page="withdrawal.php"] .wd-info-value {font-size:14px;font-weight:600;color:var(--text1);display:flex;align-items:center;gap:8px;word-break:break-all;text-align:right;max-width:70%}
body[data-page="withdrawal.php"] .wd-info-value.big {font-size:20px;color:var(--green)}
body[data-page="withdrawal.php"] .wd-info-value.accent {color:var(--accent)}
body[data-page="withdrawal.php"] .wd-info-value.mono {font-family:'Courier New',monospace;font-size:13px}
/* ── Notice ── */
body[data-page="withdrawal.php"] .wd-notice {display:flex;gap:12px;padding:14px 16px;border-radius:10px;margin-bottom:16px;font-size:13px;line-height:1.6}
body[data-page="withdrawal.php"] .wd-notice.warn {background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.25);color:rgba(251,191,36,0.85)}
body[data-page="withdrawal.php"] .wd-notice.error {background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:rgba(239,68,68,0.9)}
body[data-page="withdrawal.php"] .wd-notice.info {background:rgba(var(--primary-rgb, 172, 137, 94),0.08);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.18);color:rgba(157,242,157,.9)}
body[data-page="withdrawal.php"] .wd-notice.success {background:rgba(var(--primary-rgb, 172, 137, 94),0.08);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);color:rgba(var(--primary-rgb, 172, 137, 94),.9)}
body[data-page="withdrawal.php"] .wd-notice i {font-size:16px;flex-shrink:0;margin-top:1px}
/* ── Account cards ── */
body[data-page="withdrawal.php"] .wd-account-list {display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
body[data-page="withdrawal.php"] .wd-account-card {display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255,255,255,0.03);border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all .2s}
body[data-page="withdrawal.php"] .wd-account-card:hover {border-color:var(--border-md);background:rgba(255,255,255,0.05)}
body[data-page="withdrawal.php"] .wd-account-card.selected {border-color:var(--primary, #ac895e);background:rgba(var(--primary-rgb, 172, 137, 94),0.08)}
body[data-page="withdrawal.php"] .wd-account-card-icon {width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text2);flex-shrink:0}
body[data-page="withdrawal.php"] .wd-account-card-info {flex:1;min-width:0}
body[data-page="withdrawal.php"] .wd-account-card-name {font-size:14px;font-weight:700;color:var(--text1);margin-bottom:3px}
body[data-page="withdrawal.php"] .wd-account-card-detail {font-size:12px;color:var(--text3);font-family:'Courier New',monospace;word-break:break-all}
body[data-page="withdrawal.php"] .wd-account-card-del {padding:6px 10px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);border-radius:6px;color:rgba(239,68,68,0.75);cursor:pointer;font-size:12px;flex-shrink:0;transition:all .2s}
body[data-page="withdrawal.php"] .wd-account-card-del:hover {background:rgba(239,68,68,0.18);color:#ef4444}
body[data-page="withdrawal.php"] .wd-add-account-btn {width:100%;padding:14px;background:transparent;border:2px dashed rgba(16,185,129,0.3);border-radius:10px;color:rgba(16,185,129,0.7);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
body[data-page="withdrawal.php"] .wd-add-account-btn:hover {border-color:var(--primary, #ac895e);color:var(--primary, #ac895e);background:rgba(var(--primary-rgb, 172, 137, 94),0.08)}
/* ── Amount input ── */
body[data-page="withdrawal.php"] .wd-amount-wrap {position:relative}
body[data-page="withdrawal.php"] .wd-amount-input {width:100%;padding:18px 60px 18px 20px;border-radius:10px;border:2px solid var(--border-md);background:rgba(255,255,255,0.04);color:var(--text1);font-size:28px;font-weight:700;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s;text-align:center}
body[data-page="withdrawal.php"] .wd-amount-input:focus {border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.06)}
body[data-page="withdrawal.php"] .wd-amount-suffix {position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:18px;font-weight:700;color:var(--text3)}
body[data-page="withdrawal.php"] .wd-amount-limits {display:flex;justify-content:center;gap:24px;margin-top:10px;font-size:12px;color:var(--text3)}
body[data-page="withdrawal.php"] .wd-amount-limits b {color:var(--text2)}
body[data-page="withdrawal.php"] .wd-quick-amounts {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
body[data-page="withdrawal.php"] .wd-quick-btn {padding:9px 4px;border-radius:8px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.55);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
body[data-page="withdrawal.php"] .wd-quick-btn:hover, body[data-page="withdrawal.php"] .wd-quick-btn.active {border-color:rgba(var(--primary-rgb, 172, 137, 94),0.35);background:rgba(var(--primary-rgb, 172, 137, 94),0.12);color:var(--accent)}
/* ── Crypto kur kutusu ── */
body[data-page="withdrawal.php"] .wd-rate-box {background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-top:14px;display:none}
body[data-page="withdrawal.php"] .wd-rate-box.visible {display:block}
body[data-page="withdrawal.php"] .wd-rate-label {font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;text-align:center}
body[data-page="withdrawal.php"] .wd-rate-amount {font-size:26px;font-weight:800;color:var(--accent);text-align:center;margin-bottom:12px;letter-spacing:-1px}
body[data-page="withdrawal.php"] .wd-rate-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px}
body[data-page="withdrawal.php"] .wd-rate-item {background:rgba(255,255,255,0.03);border-radius:8px;padding:8px 12px}
body[data-page="withdrawal.php"] .wd-rate-item-label {font-size:10px;color:var(--text3);margin-bottom:2px}
body[data-page="withdrawal.php"] .wd-rate-item-value {font-size:12px;font-weight:600;color:var(--text2)}
/* ── Buttons ── */
body[data-page="withdrawal.php"] .wd-btn-row {display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:20px}
body[data-page="withdrawal.php"] .wd-btn {padding:14px 20px;border-radius:10px;border:none;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;text-decoration:none;font-family:'Inter',sans-serif}
body[data-page="withdrawal.php"] .wd-btn-back {background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);color:rgba(255,255,255,0.7)}
body[data-page="withdrawal.php"] .wd-btn-back:hover {background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.26);color:#fff}
body[data-page="withdrawal.php"] .wd-btn-primary {background:var(--primary, #ac895e);border:none;color:#fff!important;font-weight:800}
body[data-page="withdrawal.php"] .wd-btn-primary:hover {background:#c9a97d}
body[data-page="withdrawal.php"] .wd-btn-primary:disabled {opacity:.45;cursor:not-allowed}
body[data-page="withdrawal.php"] .wd-btn-full {grid-column:1/-1}
body[data-page="withdrawal.php"] .wd-btn-danger {background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.25);color:rgba(239,68,68,0.9)}
body[data-page="withdrawal.php"] .wd-btn-danger:hover {background:rgba(239,68,68,0.2)}
/* ── Confirmation table ── */
body[data-page="withdrawal.php"] .wd-confirm-summary {background:rgba(var(--primary-rgb, 172, 137, 94),0.05);border:1px solid rgba(16,185,129,0.15);border-radius:10px;padding:16px 20px;margin-bottom:18px}
body[data-page="withdrawal.php"] .wd-confirm-row {display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.07)}
body[data-page="withdrawal.php"] .wd-confirm-row:last-child {border-bottom:none}
body[data-page="withdrawal.php"] .wd-confirm-label {font-size:12px;color:var(--text3)}
body[data-page="withdrawal.php"] .wd-confirm-value {font-size:14px;font-weight:600;color:var(--text1)}
/* ── Modal ── */
body[data-page="withdrawal.php"] .wd-modal-overlay {display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:9999;align-items:center;justify-content:center}
body[data-page="withdrawal.php"] .wd-modal-overlay.open {display:flex}
body[data-page="withdrawal.php"] .wd-modal {background:#15171c;border:1px solid var(--border-md);border-radius:16px;padding:28px;max-width:480px;width:90%;max-height:90vh;overflow-y:auto}
body[data-page="withdrawal.php"] .wd-modal-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
body[data-page="withdrawal.php"] .wd-modal-head h3 {font-size:18px;font-weight:800}
body[data-page="withdrawal.php"] .wd-modal-close {background:none;border:none;color:var(--text3);font-size:22px;cursor:pointer;padding:0;line-height:1;transition:color .2s}
body[data-page="withdrawal.php"] .wd-modal-close:hover {color:var(--text1)}
body[data-page="withdrawal.php"] .wd-modal label,
body[data-page="deposit.php"] .dp-card-body > label,
body[data-page="withdrawal.php"] .wd-card-body > label {display:block;font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;margin-top:16px}
body[data-page="withdrawal.php"] .wd-modal label:first-of-type,
body[data-page="deposit.php"] .dp-card-body > label:first-of-type,
body[data-page="withdrawal.php"] .wd-card-body > label:first-of-type {margin-top:0}
body[data-page="withdrawal.php"] .wd-modal select,
body[data-page="withdrawal.php"] .wd-modal input[type=text],
body[data-page="deposit.php"] .dp-card-body select,
body[data-page="deposit.php"] .dp-card-body input[type=text],
body[data-page="withdrawal.php"] .wd-card-body select,
body[data-page="withdrawal.php"] .wd-card-body input[type=text] {width:100%;padding:12px 14px;background:rgba(255,255,255,0.05);border:1px solid var(--border-md);border-radius:8px;color:var(--text1);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s}
body[data-page="withdrawal.php"] .wd-modal select,
body[data-page="deposit.php"] .dp-card-body select,
body[data-page="withdrawal.php"] .wd-card-body select {cursor:pointer}
body[data-page="withdrawal.php"] .wd-modal select option,
body[data-page="deposit.php"] .dp-card-body select option,
body[data-page="withdrawal.php"] .wd-card-body select option {background:var(--surface, #0d0f13);color:#fff}
body[data-page="withdrawal.php"] .wd-modal input:focus,
body[data-page="withdrawal.php"] .wd-modal select:focus,
body[data-page="deposit.php"] .dp-card-body input:focus,
body[data-page="deposit.php"] .dp-card-body select:focus,
body[data-page="withdrawal.php"] .wd-card-body input:focus,
body[data-page="withdrawal.php"] .wd-card-body select:focus {border-color:rgba(var(--primary-rgb, 172, 137, 94),0.40);background:rgba(var(--primary-rgb, 172, 137, 94),0.06)}
body[data-page="withdrawal.php"] .wd-modal-hint {font-size:11px;color:var(--text3);margin-top:6px}
body[data-page="withdrawal.php"] .wd-modal-error {background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);border-radius:8px;padding:10px 14px;font-size:12px;color:rgba(239,68,68,0.9);margin-bottom:14px;display:none}
body[data-page="withdrawal.php"] .wd-modal-save-btn {width:100%;padding:13px;background:var(--green);border:none;border-radius:10px;color:#0c0e13;font-size:14px;font-weight:800;cursor:pointer;margin-top:20px;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
body[data-page="withdrawal.php"] .wd-modal-save-btn:hover {background:#c9a97d}
body[data-page="withdrawal.php"] .wd-modal-del-btn {width:100%;padding:13px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.25);border-radius:10px;color:rgba(239,68,68,0.9);font-size:14px;font-weight:800;cursor:pointer;margin-top:12px;transition:all .2s}
body[data-page="withdrawal.php"] .wd-modal-del-btn:hover {background:rgba(239,68,68,0.2);color:#ef4444}
/* ── Success ── */
body[data-page="withdrawal.php"] .wd-success-icon {width:70px;height:70px;border-radius:50%;background:rgba(var(--primary-rgb, 172, 137, 94),0.12);border:2px solid rgba(var(--primary-rgb, 172, 137, 94),0.25);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:28px;color:var(--green)}
/* ── Toast ── */
body[data-page="withdrawal.php"] .wd-toast-wrap {position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:90%;max-width:420px}
body[data-page="withdrawal.php"] .wd-toast {padding:14px 18px;border-radius:12px;font-size:13px;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;pointer-events:auto;box-shadow:0 8px 32px rgba(0,0,0,.5)}
body[data-page="withdrawal.php"] .wd-toast.success {background:linear-gradient(135deg,rgba(var(--primary-rgb, 172, 137, 94),.95),rgba(var(--primary-rgb, 172, 137, 94),.95));border:1px solid rgba(var(--primary-rgb, 172, 137, 94),.4)}
body[data-page="withdrawal.php"] .wd-toast.error {background:linear-gradient(135deg,rgba(220,38,38,.95),rgba(185,28,28,.95));border:1px solid rgba(220,38,38,.4)}
/* ── Mobile ── */
@media(max-width:900px) {
body[data-page="withdrawal.php"] .wd-item {grid-template-columns:80px minmax(140px,260px) 140px 110px;justify-content:start}
body[data-page="withdrawal.php"] .wd-item>div:nth-child(n+5) {display:none}
body[data-page="withdrawal.php"] .wd-item>*:nth-child(n+5) {display:none}
body[data-page="withdrawal.php"] .wd-hero-title {font-size:32px}
body[data-page="withdrawal.php"] .wd-hero-stat-num {font-size:28px}
body[data-page="withdrawal.php"] .wd-hero-inner {flex-direction:column;align-items:flex-start;padding:32px 16px 24px}
body[data-page="withdrawal.php"] .wd-hero-right {gap:20px}
body[data-page="withdrawal.php"] .wd-hero-nav {padding:0 16px;overflow-x:auto}
body[data-page="withdrawal.php"] .wd-balance-row {grid-template-columns:1fr}
}
@media(max-width:640px) {
body[data-page="withdrawal.php"] .wd-wrap {padding:20px 14px 60px}
body[data-page="withdrawal.php"] .wd-item {display:flex;align-items:center;gap:10px;padding:11px 14px}
body[data-page="withdrawal.php"] .wd-logo-box {flex-shrink:0;width:52px!important;height:40px!important}
body[data-page="withdrawal.php"] .wd-item-info {flex:1;min-width:0}
body[data-page="withdrawal.php"] .wd-col-label {display:none}
body[data-page="withdrawal.php"] .wd-item>div:nth-child(n+3) {display:none}
body[data-page="withdrawal.php"] .wd-item-info .wd-col-value {font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
body[data-page="withdrawal.php"] .wd-item-minmax {display:flex!important;align-items:center;gap:0;flex-wrap:nowrap}
body[data-page="withdrawal.php"] .wd-mm-label {font-size:10px;font-weight:600;color:rgba(255,255,255,0.30);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
body[data-page="withdrawal.php"] .wd-mm-val {font-size:11px;font-weight:700;color:rgba(255,255,255,0.60);margin-left:3px;white-space:nowrap}
body[data-page="withdrawal.php"] .wd-mm-sep {color:rgba(255,255,255,0.12);margin:0 6px;font-size:10px}
body[data-page="withdrawal.php"] .wd-quick-amounts {grid-template-columns:repeat(2,1fr)}
body[data-page="withdrawal.php"] .wd-tabs {gap:6px}
body[data-page="withdrawal.php"] .wd-tab {padding:8px 14px;font-size:12px}
}


/* ── mobil-uygulama.php (satır içi <style>, sadece bu sayfada — body[data-page="mobil-uygulama.php"] ile kapsandı) ── */
/* ═══════════════════════════════════════════
   MOBIL UYGULAMA — GOLD DARK PREMIUM
═══════════════════════════════════════════ */
body[data-page="mobil-uygulama.php"] {
    --gold: var(--primary, #ac895e);
    --gold-l: #c9a97d;
    --gold-dim: rgba(var(--primary-rgb, 172, 137, 94),0.45);
    --gold-deep: #15171c;
    --dark-1:     var(--surface-elevated, #06070a);
    --dark-2:     var(--surface, #0d0f13);
    --dark-3:     #15171c;
    --dark-card:  rgba(13,15,19, 0.92);
    --border-g:   rgba(var(--primary-rgb, 172, 137, 94),0.14);
    --border-gh:  rgba(var(--primary-rgb, 172, 137, 94),0.20);
    --text-muted: rgba(200, 200, 220, 0.55);
}
/* ── HERO ── */
body[data-page="mobil-uygulama.php"] .mb-hero {
    position: relative;
    background: var(--dark-1);
    overflow: hidden;
    border-bottom: 1px solid var(--border-g);
    margin-top: -85px;
    padding-top: 0;
}
body[data-page="mobil-uygulama.php"].has-ticker .mb-hero {
    margin-top: -117px;
    padding-top: 32px;
}
body[data-page="mobil-uygulama.php"] .mb-hero__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 90px 32px 0;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}
/* Altın ışık efektleri */
body[data-page="mobil-uygulama.php"] .mb-hero::before {
    content: '';
    position: absolute;
    top: -120px;
    right: 200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.06) 40%,
        transparent 70%);
    pointer-events: none;
}
body[data-page="mobil-uygulama.php"] .mb-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 50%, transparent) 50%,
        rgba(255,255,255,0.12) 70%, transparent);
}
body[data-page="mobil-uygulama.php"] .mb-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    padding: 5px 14px 5px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 22px;
}
body[data-page="mobil-uygulama.php"] .mb-hero__tag-dot {
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    animation: blink__mobil_uygulama_php_0 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes blink__mobil_uygulama_php_0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
body[data-page="mobil-uygulama.php"] .mb-hero__title {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    margin-bottom: 18px;
}
body[data-page="mobil-uygulama.php"] .mb-hero__title span {
    background: linear-gradient(135deg, var(--primary, #ac895e), #c9a97d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}
body[data-page="mobil-uygulama.php"] .mb-hero__sub {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 520px;
    margin-bottom: 36px;
    font-family: 'Poppins', sans-serif;
}
body[data-page="mobil-uygulama.php"] .mb-hero__platforms {
    display: flex;
    gap: 12px;
    padding-bottom: 48px;
}
body[data-page="mobil-uygulama.php"] .mb-platform-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
body[data-page="mobil-uygulama.php"] .mb-platform-btn--ios {
    background: var(--primary, #ac895e);
    color: #fff;
    box-shadow: none;
}
body[data-page="mobil-uygulama.php"] .mb-platform-btn--ios:hover {
    background: #c9a97d;
    box-shadow: none;
    transform: none;
    color: #fff;
}
body[data-page="mobil-uygulama.php"] .mb-platform-btn--android {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.08);
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.25);
    color: rgba(255,255,255,0.90);
}
body[data-page="mobil-uygulama.php"] .mb-platform-btn--android:hover {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.15);
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35);
    color: var(--text-primary, #e7e9ec);
    transform: translateY(-2px);
}
body[data-page="mobil-uygulama.php"] .mb-platform-btn i {
    font-size: 18px;
}
/* ── TELEFON MOCKUP ── */
body[data-page="mobil-uygulama.php"] .mb-phone-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 0;
    position: relative;
}
body[data-page="mobil-uygulama.php"] .mb-phone {
    width: 220px;
    height: 430px;
    background: linear-gradient(145deg, var(--surface-elevated, #06070a), #101114);
    border-radius: 36px;
    border: 2px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        0 -4px 60px rgba(255,255,255,0.12),
        0 20px 80px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transform: perspective(800px) rotateY(-8deg) rotateX(2deg);
}
/* Telefon notch */
body[data-page="mobil-uygulama.php"] .mb-phone__notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 22px;
    background: var(--surface-elevated, #06070a);
    border-radius: 14px;
    z-index: 10;
    border: 1.5px solid rgba(var(--primary-rgb, 172, 137, 94),0.10);
}
body[data-page="mobil-uygulama.php"] .mb-phone__screen {
    position: absolute;
    inset: 0;
    background: var(--dark-1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Telefon içi mini UI */
body[data-page="mobil-uygulama.php"] .mb-phone__header {
    height: 52px;
    background: var(--header-background, rgba(6,7,10,0.97));
    border-bottom: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-phone__logo {
    font-size: 11px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary, #ac895e), #c9a97d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
    font-family: 'Poppins', sans-serif;
}
body[data-page="mobil-uygulama.php"] .mb-phone__header-dots {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}
body[data-page="mobil-uygulama.php"] .mb-phone__header-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
}
body[data-page="mobil-uygulama.php"] .mb-phone__banner {
    height: 100px;
    background: linear-gradient(135deg,
        rgba(180,140,20,0.22) 0%,
        rgba(120,90,10,0.18) 60%,
        rgba(80,60,5,0.12) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
body[data-page="mobil-uygulama.php"] .mb-phone__banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.12) 8px,
        rgba(255,255,255,0.12) 16px
    );
}
body[data-page="mobil-uygulama.php"] .mb-phone__banner-num {
    font-size: 28px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary, #ac895e), #c9a97d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}
body[data-page="mobil-uygulama.php"] .mb-phone__banner-txt {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.50);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}
body[data-page="mobil-uygulama.php"] .mb-phone__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px 8px;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-phone__card {
    background: rgba(13,15,19,0.90);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
}
body[data-page="mobil-uygulama.php"] .mb-phone__card-icon {
    font-size: 16px;
    margin-bottom: 3px;
    display: block;
}
body[data-page="mobil-uygulama.php"] .mb-phone__card-txt {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255,255,255,0.50);
    letter-spacing: 0.5px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}
body[data-page="mobil-uygulama.php"] .mb-phone__games {
    padding: 6px 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-phone__game {
    aspect-ratio: 1;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
body[data-page="mobil-uygulama.php"] .mb-phone__bottom-nav {
    margin-top: auto;
    height: 44px;
    background: rgba(6,7,10,0.98);
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-phone__nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
body[data-page="mobil-uygulama.php"] .mb-phone__nav-icon {
    font-size: 12px;
    color: rgba(255,255,255,0.40);
}
body[data-page="mobil-uygulama.php"] .mb-phone__nav-icon.active {
    color: var(--text-primary, #e7e9ec);
}
body[data-page="mobil-uygulama.php"] .mb-phone__nav-label {
    font-size: 7px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
}
body[data-page="mobil-uygulama.php"] .mb-phone__nav-label.active {
    color: rgba(255,255,255,0.50);
}
/* Telefon altın parıltı */
body[data-page="mobil-uygulama.php"] .mb-phone__glow {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 40px;
    background: radial-gradient(ellipse, rgba(var(--primary-rgb, 172, 137, 94),0.15) 0%, transparent 70%);
    filter: blur(12px);
    pointer-events: none;
}
/* ═══════════════════════════════════════════
   NEDEN MOBİL
═══════════════════════════════════════════ */
body[data-page="mobil-uygulama.php"] .mb-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 72px 32px;
    border-bottom: 1px solid var(--border-g);
}
body[data-page="mobil-uygulama.php"] .mb-section-head {
    max-width: 580px;
    margin-bottom: 48px;
}
body[data-page="mobil-uygulama.php"] .mb-section-title {
    font-size: 30px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    letter-spacing: -0.6px;
    line-height: 1.25;
    margin: 0 0 10px;
}
body[data-page="mobil-uygulama.php"] .mb-section-sub {
    font-size: 14px;
    color: var(--text-muted);
    font-family: 'Poppins', sans-serif;
    line-height: 1.65;
}
body[data-page="mobil-uygulama.php"] .mb-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: 40px;
}
body[data-page="mobil-uygulama.php"] .mb-benefit__icon {
    color: var(--gold-l);
    font-size: 20px;
    margin-bottom: 16px;
    display: block;
}
body[data-page="mobil-uygulama.php"] .mb-benefit__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 8px;
}
body[data-page="mobil-uygulama.php"] .mb-benefit__desc {
    font-size: 13.5px;
    color: var(--text-muted);
    font-family: 'Poppins', sans-serif;
    line-height: 1.65;
    max-width: 440px;
}
/* ═══════════════════════════════════════════
   INSTALL SECTIONS
═══════════════════════════════════════════ */
body[data-page="mobil-uygulama.php"] .mb-install-wrap {
    background: rgba(6,7,10,0.5);
    border-top: 1px solid var(--border-g);
    border-bottom: 1px solid var(--border-g);
    padding: 0;
}
body[data-page="mobil-uygulama.php"] .mb-install-tabs {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}
body[data-page="mobil-uygulama.php"] .mb-tab-header {
    display: flex;
    border-bottom: 1px solid var(--border-g);
    gap: 0;
}
body[data-page="mobil-uygulama.php"] .mb-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 32px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all 0.2s;
}
body[data-page="mobil-uygulama.php"] .mb-tab-btn i { font-size: 20px; }
body[data-page="mobil-uygulama.php"] .mb-tab-btn:hover {
    color: rgba(255,255,255,0.75);
}
body[data-page="mobil-uygulama.php"] .mb-tab-btn.active {
    color: var(--text-primary, #e7e9ec);
    border-bottom-color: rgba(255,255,255,0.45);
}
body[data-page="mobil-uygulama.php"] .mb-tab-content {
    display: none;
    padding: 48px 0;
}
body[data-page="mobil-uygulama.php"] .mb-tab-content.active { display: block; }
body[data-page="mobil-uygulama.php"] .mb-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}
body[data-page="mobil-uygulama.php"] .mb-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 24px;
    position: relative;
    padding-bottom: 32px;
}
body[data-page="mobil-uygulama.php"] .mb-step:last-child { padding-bottom: 0; }
/* Connecting line */
body[data-page="mobil-uygulama.php"] .mb-step:not(:last-child) .mb-step__num::after {
    content: '';
    position: absolute;
    left: 27px;
    top: 56px;
    width: 1px;
    height: calc(100% - 24px);
    background: linear-gradient(180deg,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.10) 100%);
}
body[data-page="mobil-uygulama.php"] .mb-step__num {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: rgba(255,255,255,0.45);
    font-family: 'Poppins', sans-serif;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
}
body[data-page="mobil-uygulama.php"] .mb-step:hover .mb-step__num {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.15);
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35);
    color: var(--text-primary, #e7e9ec);
}
body[data-page="mobil-uygulama.php"] .mb-step__body {
    padding-top: 14px;
}
body[data-page="mobil-uygulama.php"] .mb-step__title {
    font-size: 16px;
    font-weight: 700;
    color: #e8e8f0;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 8px;
}
body[data-page="mobil-uygulama.php"] .mb-step__desc {
    font-size: 13.5px;
    color: var(--text-muted);
    font-family: 'Poppins', sans-serif;
    line-height: 1.65;
}
body[data-page="mobil-uygulama.php"] .mb-step__desc strong {
    color: rgba(255,255,255,0.50);
    font-weight: 600;
}
body[data-page="mobil-uygulama.php"] .mb-step__tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    padding: 7px 12px;
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.50);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
body[data-page="mobil-uygulama.php"] .mb-step__tip i { font-size: 11px; color: rgba(255,255,255,0.45); }
/* Layout: steps left, phone right */
body[data-page="mobil-uygulama.php"] .mb-install-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 60px;
    align-items: center;
}
/* Floating platform badge */
body[data-page="mobil-uygulama.php"] .mb-platform-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--dark-card);
    border: 1px solid var(--border-g);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 36px;
}
body[data-page="mobil-uygulama.php"] .mb-platform-badge__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-platform-badge__icon--ios {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
}
body[data-page="mobil-uygulama.php"] .mb-platform-badge__icon--android {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.10);
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);
    color: #3ddc84;
}
body[data-page="mobil-uygulama.php"] .mb-platform-badge__name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 2px;
}
body[data-page="mobil-uygulama.php"] .mb-platform-badge__sub {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'Poppins', sans-serif;
}
/* Visual phone in install sections */
body[data-page="mobil-uygulama.php"] .mb-install-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
body[data-page="mobil-uygulama.php"] .mb-install-phone {
    width: 200px;
    height: 360px;
    background: linear-gradient(145deg, #131320, var(--surface-elevated, #06070a));
    border-radius: 30px;
    border: 1.5px solid rgba(255,255,255,0.04);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.75),
        0 0 0 1px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
body[data-page="mobil-uygulama.php"] .mb-install-phone__notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 16px;
    background: var(--surface-elevated, #06070a);
    border-radius: 10px;
    z-index: 3;
    border: 1px solid rgba(255,255,255,0.04);
}
/* Safari share icon illustration */
body[data-page="mobil-uygulama.php"] .mb-install-phone__ui {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 36px;
    position: relative;
}
body[data-page="mobil-uygulama.php"] .mb-install-phone__browser {
    height: 40px;
    background: rgba(6,7,10,0.98);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 6px;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-browser-bar {
    flex: 1;
    height: 22px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 5px;
}
body[data-page="mobil-uygulama.php"] .mb-browser-bar span {
    font-size: 8px;
    color: rgba(255,255,255,0.50);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
}
body[data-page="mobil-uygulama.php"] .mb-browser-lock {
    width: 7px;
    height: 7px;
    border: 1.5px solid rgba(var(--primary-rgb, 172, 137, 94),0.18);
    border-radius: 50% 50% 45% 45%;
    position: relative;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-browser-lock::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 4px;
    background: rgba(255,255,255,0.10);
    border-radius: 1px;
}
body[data-page="mobil-uygulama.php"] .mb-install-phone__content {
    flex: 1;
    background: var(--dark-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    gap: 8px;
}
/* Share icon */
body[data-page="mobil-uygulama.php"] .mb-share-icon {
    width: 44px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    animation: float__mobil_uygulama_php_0 3s ease-in-out infinite;
}
@keyframes float__mobil_uygulama_php_0 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
body[data-page="mobil-uygulama.php"] .mb-share-icon i {
    font-size: 28px;
    color: rgba(255,255,255,0.50);
    filter: drop-shadow(0 0 12px var(--border, rgba(255,255,255,0.08)));
}
body[data-page="mobil-uygulama.php"] .mb-share-label {
    font-size: 9px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: rgba(255,255,255,0.50);
    letter-spacing: 0.5px;
}
/* Action sheet menu */
body[data-page="mobil-uygulama.php"] .mb-action-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(6,7,10,0.98);
    border-top: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px 14px 0 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body[data-page="mobil-uygulama.php"] .mb-action-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}
body[data-page="mobil-uygulama.php"] .mb-action-item.highlight {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.04);
}
body[data-page="mobil-uygulama.php"] .mb-action-item i {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-action-item span {
    font-size: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
}
body[data-page="mobil-uygulama.php"] .mb-action-item.highlight span { color: var(--text-primary, #e7e9ec); }
/* Bottom bar */
body[data-page="mobil-uygulama.php"] .mb-install-phone__bottom-bar {
    height: 38px;
    background: var(--header-background, rgba(6,7,10,0.97));
    border-top: 1px solid rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-install-phone__bottom-bar i {
    font-size: 13px;
    color: rgba(255,255,255,0.40);
}
/* ═══════════════════════════════════════════
   CTA BOTTOM
═══════════════════════════════════════════ */
body[data-page="mobil-uygulama.php"] .mb-cta {
    background: rgba(6,7,10,0.80);
    border-top: 1px solid var(--border-g);
}
body[data-page="mobil-uygulama.php"] .mb-cta__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
body[data-page="mobil-uygulama.php"] .mb-cta__text h2 {
    font-size: 28px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}
body[data-page="mobil-uygulama.php"] .mb-cta__text p {
    font-size: 14px;
    color: var(--text-muted);
    font-family: 'Poppins', sans-serif;
    margin: 0;
}
body[data-page="mobil-uygulama.php"] .mb-cta__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
body[data-page="mobil-uygulama.php"] .mb-cta-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}
body[data-page="mobil-uygulama.php"] .mb-cta-btn--primary {
    background: var(--primary, #ac895e);
    color: #fff;
    box-shadow: none;
}
body[data-page="mobil-uygulama.php"] .mb-cta-btn--primary:hover {
    box-shadow: 0 6px 36px rgba(255,255,255,0.12);
    transform: translateY(-2px);
    color: #fff;
}
body[data-page="mobil-uygulama.php"] .mb-cta-btn--ghost {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-g);
    color: rgba(255,255,255,0.7);
}
body[data-page="mobil-uygulama.php"] .mb-cta-btn--ghost:hover {
    border-color: var(--border-gh);
    color: var(--text-primary, #e7e9ec);
    background: rgba(255,255,255,0.10);
    transform: translateY(-1px);
}
/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 960px) {
body[data-page="mobil-uygulama.php"] .mb-hero__inner {
        grid-template-columns: 1fr;
        padding: 80px 24px 0;
        gap: 40px;
    }
body[data-page="mobil-uygulama.php"] .mb-phone-wrap { justify-content: flex-start; padding-bottom: 32px; }
body[data-page="mobil-uygulama.php"] .mb-hero__title { font-size: 36px; }
body[data-page="mobil-uygulama.php"] .mb-install-layout { grid-template-columns: 1fr; }
body[data-page="mobil-uygulama.php"] .mb-install-visual { display: none; }
}
@media (max-width: 640px) {
body[data-page="mobil-uygulama.php"] .mb-hero__inner { padding: 72px 20px 0; }
body[data-page="mobil-uygulama.php"] .mb-hero__title { font-size: 30px; letter-spacing: -0.8px; }
body[data-page="mobil-uygulama.php"] .mb-hero__platforms { flex-direction: column; gap: 10px; }
body[data-page="mobil-uygulama.php"] .mb-platform-btn { justify-content: center; }
body[data-page="mobil-uygulama.php"] .mb-section { padding: 48px 20px; }
body[data-page="mobil-uygulama.php"] .mb-benefits { grid-template-columns: 1fr; row-gap: 32px; }
body[data-page="mobil-uygulama.php"] .mb-install-tabs { padding: 0 20px; }
body[data-page="mobil-uygulama.php"] .mb-tab-btn { padding: 16px 18px; font-size: 13px; }
body[data-page="mobil-uygulama.php"] .mb-cta__inner { flex-direction: column; text-align: center; }
body[data-page="mobil-uygulama.php"] .mb-cta__actions { justify-content: center; flex-wrap: wrap; }
body[data-page="mobil-uygulama.php"] .mb-section-title { font-size: 24px; }
}


/* ── messages.php (satır içi <style>, sadece bu sayfada — body[data-page="messages.php"] ile kapsandı) ── */
/* ============================================================
   MESSAGES PAGE — same design DNA as profile.php
   ============================================================ */
body[data-page="messages.php"] .msg-page {
    margin-top: -85px;
    padding-top: 0;
    min-height: 100vh;
}
/* ---- HERO ---- */
body[data-page="messages.php"] .msg-hero {
    position: relative;
    overflow: hidden;
    padding: 100px 24px 0;
    background: linear-gradient(180deg, rgba(var(--primary-rgb, 172, 137, 94),0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
body[data-page="messages.php"] .msg-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    padding-bottom: 32px;
    flex-wrap: wrap;
}
body[data-page="messages.php"] .msg-avatar-wrap { position: relative; flex-shrink: 0; }
body[data-page="messages.php"] .msg-avatar {
    width: 88px; height: 88px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--surface-elevated, #06070a), var(--surface, #0d0f13));
    border: 2px solid rgba(var(--primary-rgb, 172, 137, 94),0.30);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    color: var(--primary, #ac895e);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 172, 137, 94),0.08), 0 16px 40px rgba(0,0,0,0.5);
}
body[data-page="messages.php"] .msg-hero-info { flex: 1; min-width: 0; }
body[data-page="messages.php"] .msg-hero-eyebrow {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 8px;
}
body[data-page="messages.php"] .msg-hero-line { width: 20px; height: 2px; background: linear-gradient(90deg, var(--primary, #ac895e), #c9a97d); border-radius: 2px; }
body[data-page="messages.php"] .msg-hero-eyebrow-txt { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(var(--primary-rgb, 172, 137, 94),0.75); }
body[data-page="messages.php"] .msg-hero-name {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(22px,4vw,34px);
    font-weight: 800; line-height: 1; letter-spacing: -0.03em;
    color: #fff; margin-bottom: 6px;
}
body[data-page="messages.php"] .msg-hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body[data-page="messages.php"] .msg-hero-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(180,180,180,0.7);
}
body[data-page="messages.php"] .msg-hero-chip i { font-size: 9px; }
body[data-page="messages.php"] .msg-unread-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); color: #fbbf24;
}
body[data-page="messages.php"] .msg-stat-card {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 172, 137, 94),0.08), rgba(var(--primary-rgb, 172, 137, 94),0.03));
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);
    border-radius: 16px;
    padding: 18px 24px;
    min-width: 180px;
    flex-shrink: 0;
}
body[data-page="messages.php"] .msg-stat-lbl { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(var(--primary-rgb, 172, 137, 94),0.65); margin-bottom: 6px; }
body[data-page="messages.php"] .msg-stat-val {
    font-family: 'Poppins', sans-serif;
    font-size: 28px; font-weight: 900; line-height: 1;
    color: var(--primary, #ac895e); letter-spacing: -0.04em;
    text-shadow: 0 0 24px rgba(var(--primary-rgb, 172, 137, 94),0.20);
}
/* ---- TOOLBAR ---- */
body[data-page="messages.php"] .msg-toolbar-bar {
    background: var(--header-background, rgba(6,7,10,0.97));
    border-bottom: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.10);
    position: sticky; top: 64px; z-index: 100;
}
body[data-page="messages.php"] .msg-toolbar {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    overflow-x: auto; scrollbar-width: none;
    padding: 0 24px;
    gap: 12px;
}
body[data-page="messages.php"] .msg-toolbar::-webkit-scrollbar { display: none; }
body[data-page="messages.php"] .msg-filter-tabs { display: flex; align-items: center; }
body[data-page="messages.php"] .msg-filter-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 14px 16px;
    font-size: 12px; font-weight: 600;
    color: rgba(160,160,160,0.5);
    border: none; background: none; cursor: pointer;
    position: relative; white-space: nowrap;
    transition: color 0.2s; font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
}
body[data-page="messages.php"] .msg-filter-tab i { font-size: 11px; }
body[data-page="messages.php"] .msg-filter-tab:hover { color: rgba(255,255,255,0.14); }
body[data-page="messages.php"] .msg-filter-tab.active { color: var(--primary, #ac895e); border-bottom-color: var(--primary, #ac895e); }
body[data-page="messages.php"] .msg-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
body[data-page="messages.php"] .msg-btn-markall {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 9px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.10); border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);
    color: #c9a97d; cursor: pointer; font-family: inherit;
    text-decoration: none; transition: all 0.2s; white-space: nowrap;
}
body[data-page="messages.php"] .msg-btn-markall:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.18); border-color: rgba(var(--primary-rgb, 172, 137, 94),0.40); }
/* ---- CONTENT ---- */
body[data-page="messages.php"] .msg-content {
    max-width: 1100px; margin: 0 auto;
    padding: 32px 24px 64px;
}
/* ---- DATE FILTER CARD ---- */
body[data-page="messages.php"] .msg-filter-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
    display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
body[data-page="messages.php"] .msg-filter-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; }
body[data-page="messages.php"] .msg-filter-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(160,160,160,0.5); }
body[data-page="messages.php"] .msg-filter-inp {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 9px; padding: 10px 13px;
    color: #fff; font-size: 12.5px; font-family: inherit;
    outline: none; transition: border-color 0.2s;
    color-scheme: dark;
}
body[data-page="messages.php"] .msg-filter-inp:focus { border-color: rgba(255,255,255,0.14); }
body[data-page="messages.php"] .msg-filter-actions { display: flex; gap: 8px; align-items: flex-end; }
body[data-page="messages.php"] .msg-btn-filter {
    padding: 10px 16px; border-radius: 9px; border: none;
    font-size: 12px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; transition: all 0.2s;
}
body[data-page="messages.php"] .msg-btn-filter-primary {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.12);
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.30);
    color: var(--text-primary, #e7e9ec);
}
body[data-page="messages.php"] .msg-btn-filter-primary:hover { box-shadow: 0 4px 16px rgba(255,255,255,0.14); transform: translateY(-1px); }
body[data-page="messages.php"] .msg-btn-filter-ghost {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border, rgba(255,255,255,0.08)); color: rgba(180,180,180,0.6);
    text-decoration: none;
}
body[data-page="messages.php"] .msg-btn-filter-ghost:hover { background: rgba(255,255,255,0.07); color: rgba(200,200,200,0.8); }
/* ---- MESSAGE LIST ---- */
body[data-page="messages.php"] .msg-list { display: flex; flex-direction: column; gap: 12px; }
/* ---- MESSAGE CARD ---- */
body[data-page="messages.php"] .msg-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.25s;
    position: relative;
}
body[data-page="messages.php"] .msg-card:hover { border-color: rgba(255,255,255,0.14); }
body[data-page="messages.php"] .msg-card.unread {
    background: linear-gradient(90deg, rgba(var(--primary-rgb, 172, 137, 94),0.04) 0%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.20);
}
body[data-page="messages.php"] .msg-card.unread::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #9aa4b0, #c9a97d);
    border-radius: 3px 0 0 3px;
}
/* Card header row — always visible */
body[data-page="messages.php"] .msg-card-header {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
body[data-page="messages.php"] .msg-card-header:hover .msg-card-arrow { color: rgba(255,255,255,0.14); }
/* Type icon */
body[data-page="messages.php"] .msg-type-icon {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; position: relative;
}
body[data-page="messages.php"] .msg-type-icon.deposit { background: rgba(var(--primary-rgb, 172, 137, 94),0.10);  border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.22); color: #c9a97d; }
body[data-page="messages.php"] .msg-type-icon.withdrawal { background: rgba(var(--primary-rgb, 172, 137, 94),0.10);  border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.22); color: var(--primary, #ac895e); }
body[data-page="messages.php"] .msg-type-icon.admin { background: rgba(var(--primary-rgb, 172, 137, 94),0.1);  border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.22); color: var(--primary, #ac895e); }
body[data-page="messages.php"] .msg-type-icon.system { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.22); color: #fbbf24; }
body[data-page="messages.php"] .msg-type-icon.bonus { background: rgba(236,72,153,0.1);  border: 1px solid rgba(236,72,153,0.22); color: #f472b6; }
body[data-page="messages.php"] .msg-type-icon.kyc { background: rgba(20,184,166,0.1);  border: 1px solid rgba(20,184,166,0.22); color: var(--primary, #ac895e); }
/* Header info */
body[data-page="messages.php"] .msg-card-info { flex: 1; min-width: 0; }
body[data-page="messages.php"] .msg-card-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
body[data-page="messages.php"] .msg-card-title {
    font-size: 14px; font-weight: 700; color: rgba(220,220,220,0.9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 340px;
}
body[data-page="messages.php"] .msg-badge-new {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px;
    font-size: 9px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
    background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3); color: #fbbf24;
    flex-shrink: 0;
}
body[data-page="messages.php"] .msg-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body[data-page="messages.php"] .msg-meta-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: rgba(140,140,140,0.6);
}
body[data-page="messages.php"] .msg-meta-item i { font-size: 9px; color: rgba(255,255,255,0.14); }
body[data-page="messages.php"] .msg-type-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px;
    font-size: 10px; font-weight: 700;
}
body[data-page="messages.php"] .msg-card-arrow {
    color: rgba(255,255,255,0.14); font-size: 11px; flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1), color 0.2s;
}
body[data-page="messages.php"] .msg-card.open .msg-card-arrow { transform: rotate(180deg); color: rgba(255,255,255,0.14); }
/* Preview (collapsed) — desktop only */
body[data-page="messages.php"] .msg-preview {
    padding: 0 20px 16px 80px;
    font-size: 12.5px; color: rgba(130,130,130,0.6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Accordion body */
body[data-page="messages.php"] .msg-card-body-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(.4,0,.2,1);
}
body[data-page="messages.php"] .msg-card.open .msg-card-body-wrap { max-height: 600px; }
body[data-page="messages.php"] .msg-card-divider { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.14), transparent); margin: 0 20px; }
body[data-page="messages.php"] .msg-card-body {
    padding: 20px;
    color: rgba(200,200,200,0.8);
    font-size: 14px; line-height: 1.75;
}
body[data-page="messages.php"] .msg-card-actions {
    padding: 14px 20px 18px;
    display: flex; gap: 10px; flex-wrap: wrap;
}
body[data-page="messages.php"] .msg-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 9px;
    font-size: 12px; font-weight: 700; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: all 0.2s; border: 1px solid transparent;
}
body[data-page="messages.php"] .msg-action-btn-read { background: rgba(var(--primary-rgb, 172, 137, 94),0.10);  border-color: rgba(var(--primary-rgb, 172, 137, 94),0.20);  color: #c9a97d; }
body[data-page="messages.php"] .msg-action-btn-read:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.18); border-color: rgba(var(--primary-rgb, 172, 137, 94),0.45); }
body[data-page="messages.php"] .msg-action-btn-view { background: rgba(var(--primary-rgb, 172, 137, 94),0.10);  border-color: rgba(var(--primary-rgb, 172, 137, 94),0.20);  color: var(--primary, #ac895e); }
body[data-page="messages.php"] .msg-action-btn-view:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.18); border-color: rgba(59,130,246,0.45); }
body[data-page="messages.php"] .msg-action-btn-delete { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.18); color: rgba(248,113,113,0.8); }
body[data-page="messages.php"] .msg-action-btn-delete:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #f87171; }
/* ---- TYPE BADGE COLORS ---- */
body[data-page="messages.php"] .msg-type-badge.deposit { background: rgba(var(--primary-rgb, 172, 137, 94),0.10);  color: #c9a97d; }
body[data-page="messages.php"] .msg-type-badge.withdrawal { background: rgba(var(--primary-rgb, 172, 137, 94),0.10);  color: var(--primary, #ac895e); }
body[data-page="messages.php"] .msg-type-badge.admin { background: rgba(var(--primary-rgb, 172, 137, 94),0.1);  color: var(--primary, #ac895e); }
body[data-page="messages.php"] .msg-type-badge.system { background: rgba(245,158,11,0.1);  color: #fbbf24; }
body[data-page="messages.php"] .msg-type-badge.bonus { background: rgba(236,72,153,0.1);  color: #f472b6; }
body[data-page="messages.php"] .msg-type-badge.kyc { background: rgba(20,184,166,0.1);  color: var(--primary, #ac895e); }
/* ---- PAGINATION ---- */
body[data-page="messages.php"] .msg-pagination-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin-top: 32px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px; padding: 22px 20px;
}
body[data-page="messages.php"] .msg-pagination { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
body[data-page="messages.php"] .msg-pagination a, body[data-page="messages.php"] .msg-pagination span {
    min-width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; transition: all 0.2s; text-decoration: none;
}
body[data-page="messages.php"] .msg-pagination a {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border, rgba(255,255,255,0.08)); color: rgba(180,180,180,0.7);
}
body[data-page="messages.php"] .msg-pagination a:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.12); border-color: rgba(var(--primary-rgb, 172, 137, 94),0.30); color: var(--text-primary, #e7e9ec); }
body[data-page="messages.php"] .msg-pagination span.current {
    background: linear-gradient(135deg, var(--surface, #0d0f13), #1f2228); color: var(--page-background, #080808); font-weight: 800;
}
body[data-page="messages.php"] .msg-pagination .dots { background: none; border: none; color: rgba(140,140,140,0.4); cursor: default; }
body[data-page="messages.php"] .msg-pagination-info { font-size: 12px; color: rgba(140,140,140,0.5); font-weight: 600; }
/* ---- EMPTY ---- */
body[data-page="messages.php"] .msg-empty {
    text-align: center; padding: 80px 24px;
    background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
}
body[data-page="messages.php"] .msg-empty-icon { font-size: 64px; color: rgba(255,255,255,0.14); margin-bottom: 20px; }
body[data-page="messages.php"] .msg-empty h3 { font-size: 22px; font-weight: 800; color: rgba(220,220,220,0.7); margin-bottom: 8px; }
body[data-page="messages.php"] .msg-empty p { font-size: 13.5px; color: rgba(140,140,140,0.55); line-height: 1.6; }
/* ---- CONFIRM MODAL ---- */
body[data-page="messages.php"] .msg-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.8); backdrop-filter: blur(6px);
    z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: msg-fade-in__messages_php_0 0.18s ease;
}
@keyframes msg-fade-in__messages_php_0 { from { opacity: 0; } to { opacity: 1; } }
body[data-page="messages.php"] .msg-confirm-box {
    background: var(--surface, #0d0f13); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px; padding: 28px 24px; max-width: 360px; width: 100%;
    animation: msg-slide-up__messages_php_0 0.22s ease;
}
@keyframes msg-slide-up__messages_php_0 { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
body[data-page="messages.php"] .msg-confirm-ico {
    width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px;
    background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25);
    display: flex; align-items: center; justify-content: center;
    color: #f87171; font-size: 20px;
}
body[data-page="messages.php"] .msg-confirm-title { font-size: 17px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 8px; }
body[data-page="messages.php"] .msg-confirm-sub { font-size: 13px; color: rgba(140,140,140,0.6); text-align: center; margin-bottom: 22px; line-height: 1.5; }
body[data-page="messages.php"] .msg-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body[data-page="messages.php"] .msg-confirm-btn {
    padding: 12px; border-radius: 10px; border: none; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: all 0.18s;
}
body[data-page="messages.php"] .msg-confirm-cancel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(180,180,180,0.8); }
body[data-page="messages.php"] .msg-confirm-cancel:hover { background: rgba(255,255,255,0.09); }
body[data-page="messages.php"] .msg-confirm-delete { background: linear-gradient(135deg,#dc2626,#ef4444); color: #fff; }
body[data-page="messages.php"] .msg-confirm-delete:hover { box-shadow: 0 4px 16px rgba(239,68,68,0.35); transform: translateY(-1px); }
/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
body[data-page="messages.php"] .msg-page { margin-top: -85px; }
body[data-page="messages.php"] .msg-hero { padding: 100px 16px 0; }
body[data-page="messages.php"] .msg-hero-inner { gap: 18px; padding-bottom: 24px; }
body[data-page="messages.php"] .msg-avatar { width: 68px; height: 68px; font-size: 24px; border-radius: 17px; }
body[data-page="messages.php"] .msg-stat-card { width: 100%; min-width: 0; }
body[data-page="messages.php"] .msg-toolbar { padding: 0 12px; }
body[data-page="messages.php"] .msg-filter-tab { padding: 13px 12px; font-size: 11px; }
body[data-page="messages.php"] .msg-content { padding: 20px 16px 56px; }
body[data-page="messages.php"] .msg-filter-card { gap: 10px; }
body[data-page="messages.php"] .msg-filter-group { min-width: 120px; }
/* Mobile accordion: hide preview, full-width header */
body[data-page="messages.php"] .msg-preview { display: none; }
body[data-page="messages.php"] .msg-card-title { max-width: 200px; font-size: 13px; }
body[data-page="messages.php"] .msg-card-header { padding: 16px; gap: 12px; }
body[data-page="messages.php"] .msg-type-icon { width: 38px; height: 38px; font-size: 14px; border-radius: 11px; }
body[data-page="messages.php"] .msg-card-body { padding: 16px; font-size: 13.5px; }
body[data-page="messages.php"] .msg-card-actions { padding: 12px 16px 16px; flex-direction: column; }
body[data-page="messages.php"] .msg-action-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
body[data-page="messages.php"] .msg-filter-tab span { display: none; }
body[data-page="messages.php"] .msg-filter-tab { padding: 13px 14px; }
body[data-page="messages.php"] .msg-filter-card { flex-direction: column; }
body[data-page="messages.php"] .msg-filter-group { min-width: 0; width: 100%; }
body[data-page="messages.php"] .msg-filter-actions { width: 100%; }
body[data-page="messages.php"] .msg-btn-filter { flex: 1; justify-content: center; }
body[data-page="messages.php"] .msg-hero-name { font-size: 20px; }
}
/* Desktop: cards fully expanded (no accordion on desktop) */
@media (min-width: 769px) {
body[data-page="messages.php"] .msg-card-body-wrap { max-height: none !important; overflow: visible !important; }
body[data-page="messages.php"] .msg-card-arrow { display: none; }
body[data-page="messages.php"] .msg-card-header { cursor: default; }
body[data-page="messages.php"] .msg-card-header:hover .msg-card-arrow { color: inherit; }
}


/* ── kyc-politikasi.php (satır içi <style>, sadece bu sayfada — body[data-page="kyc-politikasi.php"] ile kapsandı) ── */
body[data-page="kyc-politikasi.php"] .kyc-hero {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    padding: 80px 0 60px;
    margin-bottom: 40px;
}
body[data-page="kyc-politikasi.php"] .kyc-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
body[data-page="kyc-politikasi.php"] .kyc-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 20px;
}
body[data-page="kyc-politikasi.php"] .kyc-hero p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.6;
}
body[data-page="kyc-politikasi.php"] .kyc-section {
    padding: 40px 0;
}
body[data-page="kyc-politikasi.php"] .kyc-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body[data-page="kyc-politikasi.php"] .kyc-text h2 {
    color: #10b981;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 40px 0 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(16, 185, 129, 0.3);
}
body[data-page="kyc-politikasi.php"] .kyc-text h2:first-child {
    margin-top: 0;
}
body[data-page="kyc-politikasi.php"] .kyc-text h3 {
    color: #f8fafc;
    font-size: 1.3rem;
    margin: 25px 0 15px;
}
body[data-page="kyc-politikasi.php"] .kyc-text p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}
body[data-page="kyc-politikasi.php"] .kyc-text ul, body[data-page="kyc-politikasi.php"] .kyc-text ol {
    color: #cbd5e1;
    margin: 15px 0 15px 30px;
    line-height: 1.8;
}
body[data-page="kyc-politikasi.php"] .kyc-text li {
    margin-bottom: 10px;
}
body[data-page="kyc-politikasi.php"] .document-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
body[data-page="kyc-politikasi.php"] .document-card {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
}
body[data-page="kyc-politikasi.php"] .document-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
}
body[data-page="kyc-politikasi.php"] .document-card i {
    font-size: 2.5rem;
    color: #10b981;
    margin-bottom: 15px;
}
body[data-page="kyc-politikasi.php"] .document-card h4 {
    color: #10b981;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
body[data-page="kyc-politikasi.php"] .document-card p {
    margin-bottom: 0;
    font-size: 0.95rem;
}
body[data-page="kyc-politikasi.php"] .process-steps {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}
body[data-page="kyc-politikasi.php"] .step-item {
    background: rgba(6, 7, 10, 0.6);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-left: 4px solid #3b82f6;
}
body[data-page="kyc-politikasi.php"] .step-number {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
body[data-page="kyc-politikasi.php"] .step-content h4 {
    color: #f8fafc;
    margin-bottom: 10px;
}
body[data-page="kyc-politikasi.php"] .step-content p {
    margin-bottom: 0;
}
body[data-page="kyc-politikasi.php"] .tips-box {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
}
body[data-page="kyc-politikasi.php"] .tips-box h4 {
    color: #3b82f6;
    margin-bottom: 15px;
}
body[data-page="kyc-politikasi.php"] .tips-box ul {
    margin: 0;
}
@media (max-width: 768px) {
body[data-page="kyc-politikasi.php"] .kyc-hero {
        padding: 60px 0 40px;
    }
body[data-page="kyc-politikasi.php"] .kyc-hero h1 {
        font-size: 2rem;
    }
body[data-page="kyc-politikasi.php"] .kyc-content {
        padding: 30px 20px;
    }
body[data-page="kyc-politikasi.php"] .kyc-text h2 {
        font-size: 1.5rem;
    }
body[data-page="kyc-politikasi.php"] .document-types {
        grid-template-columns: 1fr;
    }
}
/* İçerik Yönetimi (Backoffice > İçerik) — admin bu sayfayı ham HTML olarak
   düzenlerse kullanılan genel kapsayıcı. Sayfanın kendi orijinal tasarımından
   bağımsız, site temasıyla uyumlu sade bir kart. */
body[data-page="kyc-politikasi.php"] .cms-override-wrap { padding: 70px 0; }
body[data-page="kyc-politikasi.php"] .cms-override-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #cbd5e1;
    line-height: 1.8;
}
body[data-page="kyc-politikasi.php"] .cms-override-title {
    color: #f8fafc;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}
body[data-page="kyc-politikasi.php"] .cms-override-content h1, body[data-page="kyc-politikasi.php"] .cms-override-content h2, body[data-page="kyc-politikasi.php"] .cms-override-content h3 {
    color: #f8fafc;
    margin: 28px 0 14px;
}
body[data-page="kyc-politikasi.php"] .cms-override-content h2 { font-size: 1.5rem; }
body[data-page="kyc-politikasi.php"] .cms-override-content h3 { font-size: 1.2rem; }
body[data-page="kyc-politikasi.php"] .cms-override-content p { margin-bottom: 14px; }
body[data-page="kyc-politikasi.php"] .cms-override-content ul, body[data-page="kyc-politikasi.php"] .cms-override-content ol { margin: 0 0 14px 22px; }
body[data-page="kyc-politikasi.php"] .cms-override-content li { margin-bottom: 6px; }
body[data-page="kyc-politikasi.php"] .cms-override-content a { color: var(--primary, #ac895e); text-decoration: underline; }
body[data-page="kyc-politikasi.php"] .cms-override-content img { max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 767px) {
body[data-page="kyc-politikasi.php"] .cms-override-content { padding: 26px; }
body[data-page="kyc-politikasi.php"] .cms-override-title { font-size: 1.5rem; }
}


/* ── cark.php (satır içi <style>, sadece bu sayfada — body[data-page="cark.php"] ile kapsandı) ── */
/* ── Genel yerleşim: çark ortada, hero olarak; altında aktivite ve
   ödüller tek sütun halinde akar. Masaüstünde okunabilirlik için
   içerik genişliği sınırlanır ve sayfa ortasında hizalanır. ── */
body[data-page="cark.php"] .wheel-page { padding: 44px 0 72px; }
body[data-page="cark.php"] .wheel-hero { display: flex; justify-content: center; margin-bottom: 40px; }
body[data-page="cark.php"] .wheel-activity-section, body[data-page="cark.php"] .prize-strip-section { max-width: 640px; margin-left: auto; margin-right: auto; }
/* ── Çark kartı ── */
body[data-page="cark.php"] .wheel-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 36px 30px 38px;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 520px;
}
@media (max-width: 480px) {
body[data-page="cark.php"] .wheel-card { padding: 28px 16px 30px; }
}
body[data-page="cark.php"] .wheel-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% -10%, rgba(201,169,125,0.18), transparent 62%);
    pointer-events: none;
}
body[data-page="cark.php"] .wheel-card-title {
    font-size: 25px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px;
    letter-spacing: .3px; position: relative;
}
body[data-page="cark.php"] .wheel-card-title::after {
    content: ''; display: block; width: 52px; height: 2px; margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, #c9a97d, transparent);
}
body[data-page="cark.php"] .wheel-card-sub { font-size: 13px; color: var(--text-secondary); margin: 12px 0 30px; position: relative; line-height: 1.5; }
/* ══════════════════════════════════════════════════════════════
   ÇARK — tamamen CSS/JS ile çizilir, harici görsele bağımlı değil.
   Katmanlar (alttan üste): ambiyans halesi → metal çerçeve → ışık
   noktaları → dönen disk (dilimler+rozetler) → sabit cam parlaklığı
   → ibre → merkez SPIN düğmesi. Dönme, düz bir <div> üzerinde
   standart CSS transform ile yapılır — belirsizlik yok, her zaman
   kendi merkezi etrafında döner.
   ══════════════════════════════════════════════════════════════ */
body[data-page="cark.php"] .wheel-stage { position: relative; width: 400px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto 30px; }
body[data-page="cark.php"] .wheel-stage::before {
    content: '';
    position: absolute; inset: -22px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(245,158,11,0) 0%, rgba(245,158,11,.55) 6%, rgba(245,158,11,0) 16%, rgba(245,158,11,0) 100%);
    filter: blur(14px); opacity: .7; z-index: 0; pointer-events: none;
    animation: wheelAuraSpin__cark_php_0 7s linear infinite;
}
@keyframes wheelAuraSpin__cark_php_0 { to { transform: rotate(360deg); } }
body[data-page="cark.php"] .wheel-ring {
    position: absolute; inset: 0; border-radius: 50%; z-index: 1;
    background: radial-gradient(circle at 30% 24%, #6d5228 0%, #2b2011 44%, #100b05 100%);
    box-shadow:
        0 18px 40px rgba(0,0,0,.6),
        inset 0 0 0 2px rgba(255,222,150,.38),
        inset 0 3px 9px rgba(255,222,150,.14),
        inset 0 -12px 24px rgba(0,0,0,.65);
}
body[data-page="cark.php"] .wheel-ring::after {
    content: '';
    position: absolute; inset: 6px; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0deg 2deg, rgba(0,0,0,.05) 2deg 4deg);
    opacity: .5; mix-blend-mode: overlay; pointer-events: none;
}
body[data-page="cark.php"] .wheel-lights { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
body[data-page="cark.php"] .wheel-light-dot {
    position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6d8, #f5c518 55%, #a9760a 100%);
    box-shadow: 0 0 5px rgba(245,197,24,.75);
    opacity: .3;
    animation: lightChase__cark_php_0 2.6s linear infinite;
}
@keyframes lightChase__cark_php_0 { 0%, 88%, 100% { opacity: .28; transform: scale(1); } 4% { opacity: 1; transform: scale(1.35); } }
/* Disk ve cam parlaklığı, sahnenin GERÇEK render boyutunun yüzdesi olarak
   tanımlanır — bu sayede tek bir sabit piksel kırılım noktasına gerek
   kalmadan, herhangi bir ekran genişliğinde otomatik ve orantılı ölçeklenir. */
body[data-page="cark.php"] .wheel-disc-rotor {
    position: absolute; top: 50%; left: 50%;
    width: 89.5%; height: 89.5%; border-radius: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0ms;
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.5), inset 0 0 22px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.5);
    overflow: hidden; z-index: 2;
}
body[data-page="cark.php"] .wheel-spoke {
    position: absolute; top: 50%; left: 50%; width: 2px; margin-left: -1px;
    background: linear-gradient(to bottom, rgba(255,226,150,.8), rgba(255,226,150,.1) 65%, transparent);
    transform-origin: top center; pointer-events: none;
}
body[data-page="cark.php"] .wheel-glass-sheen {
    position: absolute; top: 50%; left: 50%;
    width: 89.5%; height: 89.5%; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.26), rgba(255,255,255,0) 55%);
    z-index: 4; pointer-events: none;
}
body[data-page="cark.php"] .wheel-badge {
    position: absolute; top: 0; left: 0;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13,15,19,0.42); border: 1.4px solid rgba(255,255,255,0.6);
    box-shadow: 0 2px 5px rgba(0,0,0,0.45);
    font-size: 17px; line-height: 1; overflow: hidden;
}
body[data-page="cark.php"] .wheel-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page="cark.php"] .wheel-pointer-2 {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; z-index: 5;
    border-left: 14px solid transparent; border-right: 14px solid transparent;
    border-top: 28px solid #f5c518;
    filter: drop-shadow(0 3px 8px rgba(245,197,24,.65));
}
body[data-page="cark.php"] .wheel-pointer-2::after {
    content: '';
    position: absolute; top: -34px; left: -6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6db, #f5c518 60%, #a9760a 100%);
    box-shadow: 0 0 9px rgba(245,197,24,.85);
}
/* ── Merkez SPIN düğmesi ── */
body[data-page="cark.php"] .wheel-hub-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 130px; height: 130px; border-radius: 50%; z-index: 6; cursor: pointer;
    border: 3px solid rgba(255,255,255,0.24);
    background: radial-gradient(circle at 34% 26%, #f6e2b6 0%, #c9a97d 46%, #8f6c40 100%);
    box-shadow:
        0 12px 28px rgba(0,0,0,.55),
        inset 0 2px 5px rgba(255,255,255,.55),
        inset 0 -7px 12px rgba(0,0,0,.35),
        0 0 0 6px rgba(201,169,125,.14);
    display: flex; align-items: center; justify-content: center;
    color: #14100a; font-weight: 900; font-size: 16px; letter-spacing: .4px; text-transform: uppercase;
    transition: transform .15s, box-shadow .15s, filter .2s;
    font-family: inherit;
}
body[data-page="cark.php"] .wheel-hub-btn:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.045);
    box-shadow: 0 16px 34px rgba(0,0,0,.6), inset 0 2px 5px rgba(255,255,255,.6), inset 0 -7px 12px rgba(0,0,0,.35), 0 0 0 8px rgba(201,169,125,.24);
}
body[data-page="cark.php"] .wheel-hub-btn:active:not(:disabled) { transform: translate(-50%, -50%) scale(.97); }
body[data-page="cark.php"] .wheel-hub-btn:disabled { filter: grayscale(.3) brightness(.78); cursor: not-allowed; }
body[data-page="cark.php"] .wheel-hub-btn.spinning { animation: whbPulse__cark_php_0 .85s ease-in-out infinite; }
@keyframes whbPulse__cark_php_0 {
    0%, 100% { box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 2px 5px rgba(255,255,255,.55), inset 0 -7px 12px rgba(0,0,0,.35), 0 0 0 6px rgba(201,169,125,.14); }
    50% { box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 2px 5px rgba(255,255,255,.55), inset 0 -7px 12px rgba(0,0,0,.35), 0 0 0 13px rgba(201,169,125,.05); }
}
body[data-page="cark.php"] .wheel-hub-btn.is-guest {
    background: radial-gradient(circle at 34% 26%, #a9cbff 0%, #3b82f6 48%, #1d4ed8 100%);
    color: #fff;
}
body[data-page="cark.php"] .wheel-hub-btn.whb-long { font-size: 12.5px; }
@media (max-width: 540px) {
body[data-page="cark.php"] .wheel-hub-btn { width: 100px; height: 100px; font-size: 13.5px; }
body[data-page="cark.php"] .wheel-hub-btn.whb-long { font-size: 10.5px; }
}
body[data-page="cark.php"] .wheel-empty { padding: 46px 10px; color: var(--text-secondary); font-size: 14px; }
/* ── Hak / bilgi kartları ── */
body[data-page="cark.php"] .rights-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 6px 0 8px; padding: 14px 17px; background: rgba(13,15,19,0.5); border: 1px solid rgba(255,255,255,0.07); border-radius: 13px; position: relative; }
body[data-page="cark.php"] .rights-count { font-size: 27px; font-weight: 800; color: var(--text-primary); line-height: 1; }
body[data-page="cark.php"] .rights-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
body[data-page="cark.php"] .rights-countdown { font-size: 12px; color: var(--text-secondary); }
body[data-page="cark.php"] .rights-countdown b { color: #63b3ff; font-variant-numeric: tabular-nums; }
body[data-page="cark.php"] .rights-list { text-align: left; margin-top: 10px; max-height: 130px; overflow-y: auto; position: relative; }
body[data-page="cark.php"] .rights-list-item { display:flex; justify-content:space-between; font-size: 12.5px; color: var(--text-secondary); padding: 7px 4px; border-bottom: 1px dashed rgba(255,255,255,0.06); }
body[data-page="cark.php"] .rights-list-item:last-child { border-bottom: none; }
body[data-page="cark.php"] .rights-list-item .tag { color: #c9a97d; font-weight: 600; }
body[data-page="cark.php"] .promo-row { display:flex; gap:8px; margin-top: 15px; position: relative; }
body[data-page="cark.php"] .promo-row input { flex:1; background: rgba(13,15,19,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 12px 13px; color: var(--text-primary); font-size: 13px; text-transform: uppercase; transition: border-color .15s; }
body[data-page="cark.php"] .promo-row input:focus { outline: none; border-color: rgba(var(--primary-rgb, 172, 137, 94),0.55); }
body[data-page="cark.php"] .promo-row button {
    padding: 0 22px; border-radius: 10px; border: none; cursor: pointer; white-space: nowrap;
    background: linear-gradient(135deg, #d9bc8e, var(--primary, #ac895e)); color: #14100a;
    font-weight: 800; font-size: 12.5px; letter-spacing: .2px;
    box-shadow: 0 4px 12px rgba(201,169,125,.28), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .15s, box-shadow .15s;
}
body[data-page="cark.php"] .promo-row button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(201,169,125,.38), inset 0 1px 0 rgba(255,255,255,.35); }
body[data-page="cark.php"] .promo-row button:active { transform: translateY(0); }
body[data-page="cark.php"] .promo-row button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
body[data-page="cark.php"] .rules-link-btn { margin-top: 15px; display: inline-flex; align-items:center; gap:6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; position: relative; transition: color .15s; }
body[data-page="cark.php"] .rules-link-btn:hover { color: #c9a97d; }
body[data-page="cark.php"] .eligibility-note { margin-top: 15px; padding: 11px 13px; border-radius: 10px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; font-size: 12.5px; text-align: left; position: relative; }
/* ── Son Kazananlar / Çark Geçmişim: segmentli sekme kontrolü ── */
body[data-page="cark.php"] .wheel-side-tabs {
    display: flex; width: fit-content; gap: 4px; margin: 0 auto 22px; padding: 5px;
    background: rgba(13,15,19,0.55); border: 1px solid rgba(255,255,255,0.07); border-radius: 13px;
}
body[data-page="cark.php"] .wst-btn {
    padding: 10px 20px; border-radius: 9px; border: none; background: transparent;
    color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    transition: color .2s, background .2s;
}
body[data-page="cark.php"] .wst-btn i { font-size: 12px; opacity: .75; }
body[data-page="cark.php"] .wst-btn:hover { color: var(--text-secondary); }
body[data-page="cark.php"] .wst-btn.active {
    background: linear-gradient(135deg, #d9bc8e, var(--primary, #ac895e));
    color: #14100a;
    box-shadow: 0 4px 14px rgba(201,169,125,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
body[data-page="cark.php"] .wst-btn.active i { opacity: 1; }
body[data-page="cark.php"] .wst-panel { display: none; }
body[data-page="cark.php"] .wst-panel.active { display: block; }
body[data-page="cark.php"] .winners-list { display: flex; flex-direction: column; gap: 8px; }
body[data-page="cark.php"] .winner-row { display:flex; align-items:center; gap: 12px; padding: 12px 15px; background: rgba(13,15,19,0.45); border: 1px solid rgba(255,255,255,0.06); border-radius: 11px; font-size: 13px; transition: border-color .15s; }
body[data-page="cark.php"] .winner-row:hover { border-color: rgba(201,169,125,0.25); }
body[data-page="cark.php"] .winner-row .wr-badge {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: rgba(201,169,125,0.12); border: 1px solid rgba(201,169,125,0.3);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
body[data-page="cark.php"] .winner-row .wr-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page="cark.php"] .winner-row .wr-info { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
body[data-page="cark.php"] .winner-row .wu { color: var(--text-primary); font-weight: 600; }
body[data-page="cark.php"] .winner-row .wp { color: #34d399; font-weight: 700; }
body[data-page="cark.php"] .winner-row .wt { color: var(--text-muted); font-size: 11px; }
body[data-page="cark.php"] .history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
body[data-page="cark.php"] .history-table th { text-align: left; padding: 10px 10px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
body[data-page="cark.php"] .history-table td { padding: 12px 10px; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.05); }
body[data-page="cark.php"] .history-table tr:last-child td { border-bottom: none; }
body[data-page="cark.php"] .status-pill { display:inline-block; padding: 3px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 700; }
body[data-page="cark.php"] .status-pill.active { background: rgba(16,185,129,0.15); color: #34d399; }
body[data-page="cark.php"] .status-pill.used { background: rgba(99,179,255,0.15); color: #63b3ff; }
body[data-page="cark.php"] .status-pill.expired { background: rgba(107,114,128,0.15); color: #9ca3af; }
body[data-page="cark.php"] .status-pill.voided { background: rgba(239,68,68,0.15); color: #fca5a5; }
body[data-page="cark.php"] .empty-state { text-align:center; padding: 42px 20px; color: var(--text-muted); font-size: 13px; }
body[data-page="cark.php"] .winners-empty { padding: 40px 20px; }
body[data-page="cark.php"] .winners-empty i { font-size: 32px; color: rgba(201,169,125,0.55); margin-bottom: 13px; display: block; }
body[data-page="cark.php"] .winners-empty-title { font-size: 14.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
body[data-page="cark.php"] .winners-empty-sub { font-size: 12.5px; color: var(--text-muted); }
/* ── Alt bölüm: Ödüller vitrini (ok butonlu kaydırma) ── */
body[data-page="cark.php"] .prize-strip-section { margin-top: 38px; }
body[data-page="cark.php"] .prize-strip-head { display:flex; align-items:center; gap:10px; margin-bottom: 17px; }
body[data-page="cark.php"] .prize-strip-head i { color: #c9a97d; font-size: 18px; }
body[data-page="cark.php"] .prize-strip-head h3 { font-size: 17px; font-weight: 800; color: var(--text-primary); margin: 0; }
body[data-page="cark.php"] .prize-strip-wrap { display: flex; align-items: center; gap: 10px; }
body[data-page="cark.php"] .prize-strip-track {
    flex: 1; min-width: 0;
    display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
    padding: 4px 4px 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body[data-page="cark.php"] .prize-strip-track::-webkit-scrollbar { display: none; }
body[data-page="cark.php"] .prize-nav {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(155deg, rgba(38,32,20,.9), rgba(15,13,9,.9));
    border: 1px solid rgba(201,169,125,0.32); color: #d9bc8e; font-size: 13px; cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
    transition: background .2s, border-color .2s, transform .15s, opacity .2s, color .2s;
}
body[data-page="cark.php"] .prize-nav:hover:not(:disabled) { background: linear-gradient(155deg, rgba(201,169,125,.28), rgba(var(--primary-rgb, 172, 137, 94),.2)); border-color: rgba(201,169,125,.6); color: #f6e2b6; transform: scale(1.07); }
body[data-page="cark.php"] .prize-nav:active:not(:disabled) { transform: scale(.95); }
body[data-page="cark.php"] .prize-nav:disabled { opacity: .22; cursor: default; }
@media (max-width: 640px) {
body[data-page="cark.php"] .prize-nav { width: 34px; height: 34px; font-size: 11.5px; }
}
body[data-page="cark.php"] .prize-strip-card {
    flex: 0 0 auto; width: 118px; scroll-snap-align: start;
    background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 16px;
    padding: 17px 10px 15px; text-align: center; transition: border-color .2s, transform .2s, box-shadow .2s;
}
body[data-page="cark.php"] .prize-strip-card:hover { border-color: rgba(201,169,125,0.4); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.35); }
body[data-page="cark.php"] .prize-strip-badge {
    width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 10px; overflow: hidden;
    display:flex; align-items:center; justify-content:center; font-size: 26px;
    background: radial-gradient(circle at 34% 26%, rgba(201,169,125,0.28), rgba(201,169,125,0.05));
    border: 1px solid rgba(201,169,125,0.3);
    box-shadow: inset 0 2px 4px var(--border, rgba(255,255,255,0.08)), 0 4px 10px rgba(0,0,0,0.3);
}
body[data-page="cark.php"] .prize-strip-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page="cark.php"] .prize-strip-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 3px; }
body[data-page="cark.php"] .prize-strip-desc { font-size: 10.5px; color: var(--text-muted); line-height: 1.3; }
/* ── Modallar ── */
body[data-page="cark.php"] .wm-overlay { display:none; position: fixed; inset:0; background: rgba(6,7,10,0.82); backdrop-filter: blur(6px); z-index: 10000; align-items:center; justify-content:center; padding: 20px; }
body[data-page="cark.php"] .wm-overlay.open { display: flex; }
body[data-page="cark.php"] .wm-box { background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); max-width: 460px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 28px 26px; position: relative; box-shadow: var(--shadow-lg); }
body[data-page="cark.php"] .wm-overlay.open .wm-box { animation: wmBoxIn__cark_php_0 .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes wmBoxIn__cark_php_0 {
    0% { opacity: 0; transform: scale(.92) translateY(14px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
body[data-page="cark.php"] .wm-close {
    position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border, rgba(255,255,255,0.08));
    color: var(--text-secondary); cursor:pointer; font-size: 14px;
    display:flex; align-items:center; justify-content:center;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
body[data-page="cark.php"] .wm-close:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.16); color:#fff; transform: rotate(90deg); }
body[data-page="cark.php"] .result-box.is-win { border-color: rgba(201,169,125,0.35); box-shadow: var(--shadow-lg), 0 0 46px rgba(245,158,11,0.14); }
body[data-page="cark.php"] .result-icon-big { position: relative; width: 96px; height: 96px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 50px; line-height: 1; }
body[data-page="cark.php"] .result-icon-big::before {
    content: ''; position: absolute; inset: -12px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,0.4), rgba(245,158,11,0) 72%);
    filter: blur(7px); z-index: -1; opacity: 0;
}
body[data-page="cark.php"] .result-box.is-win .result-icon-big::before { opacity: 1; animation: resultGlowPulse__cark_php_0 1.9s ease-in-out infinite; }
body[data-page="cark.php"] .result-box.is-lose .result-icon-big::before { background: radial-gradient(circle, rgba(148,163,184,0.22), rgba(148,163,184,0) 72%); opacity: 1; }
@keyframes resultGlowPulse__cark_php_0 { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }
body[data-page="cark.php"] .result-icon-big img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto; display:block; border: 2px solid rgba(201,169,125,0.55); box-shadow: 0 8px 20px rgba(0,0,0,0.45); }
body[data-page="cark.php"] .result-title { text-align:center; font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
body[data-page="cark.php"] .result-title.is-win-title { background: linear-gradient(135deg,#f6e2b6,#c9a97d 55%,#a9760a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
body[data-page="cark.php"] .result-sub { text-align:center; font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
body[data-page="cark.php"] .result-amount { text-align:center; font-size: 33px; font-weight: 800; background: linear-gradient(135deg,#c9a97d,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom: 18px; animation: resultAmountPop__cark_php_0 .38s .08s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes resultAmountPop__cark_php_0 { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: scale(1); } }
body[data-page="cark.php"] .result-details { background: rgba(13,15,19,0.5); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 14px 16px; }
body[data-page="cark.php"] .rd-row { display:flex; justify-content:space-between; font-size: 12.5px; padding: 6px 0; color: var(--text-secondary); border-bottom: 1px dashed rgba(255,255,255,0.06); }
body[data-page="cark.php"] .rd-row:last-child { border-bottom: none; }
body[data-page="cark.php"] .rd-row b { color: var(--text-primary); font-weight: 600; }
body[data-page="cark.php"] .result-ok-btn {
    margin-top: 20px; width:100%; padding: 14px; border-radius: 12px; border:none; cursor:pointer;
    background: linear-gradient(135deg,#d9bc8e,var(--primary, #ac895e)); color:#14100a; font-weight:800; font-size: 14px; letter-spacing: .2px;
    box-shadow: 0 6px 18px rgba(201,169,125,.28), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .15s, box-shadow .15s;
}
body[data-page="cark.php"] .result-ok-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(201,169,125,.4), inset 0 1px 0 rgba(255,255,255,.35); }
body[data-page="cark.php"] .result-ok-btn:active { transform: translateY(0); }
body[data-page="cark.php"] .rules-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.8; white-space: pre-line; }
body[data-page="cark.php"] .rules-body h4 { color: var(--text-primary); margin: 14px 0 6px; }
body[data-page="cark.php"] .responsible-note { margin-top:16px; padding: 12px 14px; border-radius:10px; background: rgba(59,130,246,0.08); border:1px solid rgba(59,130,246,0.2); font-size:12px; color:#93c5fd; }
/* ── Konfeti (hafif, kazanç anı) ── */
body[data-page="cark.php"] .wheel-confetti-piece {
    position: fixed; top: -12px; width: 8px; height: 12px; z-index: 10001;
    pointer-events: none; opacity: 0.95;
    animation: confettiFall__cark_php_0 linear forwards;
}
@keyframes confettiFall__cark_php_0 {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(540deg); opacity: 0; }
}
@media (max-width: 540px) {
body[data-page="cark.php"] .prize-strip-card { width: 100px; }
body[data-page="cark.php"] .prize-strip-badge { width: 48px; height: 48px; font-size: 22px; }
}


/* ── transactions.php (satır içi <style>, sadece bu sayfada — body[data-page="transactions.php"] ile kapsandı) ──
   NOT: reset ".container *" ile SINIRLI tutulur — sidebar ve footer da aynı
   <body> içinde ama bu sayfanın kendi içeriği DEĞİL; "body[...] *" (sınırsız)
   kullanılırsa onların da margin/padding'i sıfırlanır (footer'ın ortalaması
   ve sidebar'ın iç boşlukları bozulur).
   NOT 2: Görsel dil messages.php (.msg-*) ile birebir eşleşecek şekilde
   yeniden tasarlandı — hero/toolbar/liste kartı aynı renk/boşluk/tipografi
   değerlerini kullanır, sadece transactions.php'ye özgü (tablo, durum
   rozetleri, iptal modalı) kısımlar kendi adlarını korur. */
body[data-page="transactions.php"] .container * { margin:0; padding:0; box-sizing:border-box; }
body[data-page="transactions.php"] {
    font-family: 'Outfit', 'Segoe UI', sans-serif;
    background: var(--surface-elevated, #06070a);
    color: #fff;
    min-height: 100vh;
}
body[data-page="transactions.php"] .tx-page { margin-top: -85px; padding-top: 0; min-height: 100vh; }
/* ---- HERO (messages.php .msg-hero ile birebir aynı dil) ---- */
body[data-page="transactions.php"] .tx-hero {
    position: relative;
    overflow: hidden;
    padding: 100px 24px 0;
    background: linear-gradient(180deg, rgba(var(--primary-rgb, 172, 137, 94),0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
body[data-page="transactions.php"] .tx-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    padding-bottom: 32px;
    flex-wrap: wrap;
}
body[data-page="transactions.php"] .tx-avatar-wrap { position: relative; flex-shrink: 0; }
body[data-page="transactions.php"] .tx-avatar {
    width: 88px; height: 88px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--surface-elevated, #06070a), var(--surface, #0d0f13));
    border: 2px solid rgba(var(--primary-rgb, 172, 137, 94),0.30);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    color: var(--primary, #ac895e);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 172, 137, 94),0.08), 0 16px 40px rgba(0,0,0,0.5);
}
body[data-page="transactions.php"] .tx-hero-info { flex: 1; min-width: 0; }
body[data-page="transactions.php"] .tx-hero-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
body[data-page="transactions.php"] .tx-hero-line { width: 20px; height: 2px; background: linear-gradient(90deg, var(--primary, #ac895e), #c9a97d); border-radius: 2px; }
body[data-page="transactions.php"] .tx-hero-eyebrow-txt { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(var(--primary-rgb, 172, 137, 94),0.75); }
body[data-page="transactions.php"] .tx-hero-name {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(22px,4vw,34px);
    font-weight: 800; line-height: 1; letter-spacing: -0.03em;
    color: #fff; margin-bottom: 6px;
}
body[data-page="transactions.php"] .tx-hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body[data-page="transactions.php"] .tx-hero-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(180,180,180,0.7);
}
body[data-page="transactions.php"] .tx-hero-chip i { font-size: 9px; }
body[data-page="transactions.php"] .tx-pending-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); color: #fbbf24;
}
body[data-page="transactions.php"] .tx-stat-card {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 172, 137, 94),0.08), rgba(var(--primary-rgb, 172, 137, 94),0.03));
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);
    border-radius: 16px;
    padding: 18px 24px;
    min-width: 180px;
    flex-shrink: 0;
}
body[data-page="transactions.php"] .tx-stat-lbl { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(var(--primary-rgb, 172, 137, 94),0.65); margin-bottom: 6px; }
body[data-page="transactions.php"] .tx-stat-val {
    font-family: 'Poppins', sans-serif;
    font-size: 28px; font-weight: 900; line-height: 1;
    color: var(--primary, #ac895e); letter-spacing: -0.04em;
    text-shadow: 0 0 24px rgba(var(--primary-rgb, 172, 137, 94),0.20);
}
/* ---- TOOLBAR ---- */
body[data-page="transactions.php"] .tx-toolbar-bar {
    background: var(--header-background, rgba(6,7,10,0.97));
    border-bottom: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.10);
    position: sticky; top: 64px; z-index: 100;
}
body[data-page="transactions.php"] .tx-toolbar {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center;
    overflow-x: auto; scrollbar-width: none;
    padding: 0 24px;
}
body[data-page="transactions.php"] .tx-toolbar::-webkit-scrollbar { display: none; }
/* ── Filter Tabs (messages.php .msg-filter-tab ile aynı: alt çizgili sekme) ── */
body[data-page="transactions.php"] .filter-tabs { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
body[data-page="transactions.php"] .filter-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 14px 16px;
    font-size: 12px; font-weight: 600;
    color: rgba(160,160,160,0.5);
    border: none; background: none;
    position: relative; white-space: nowrap;
    transition: color 0.2s; font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    border-radius: 0;
}
body[data-page="transactions.php"] .filter-tab i { font-size: 11px; }
body[data-page="transactions.php"] .filter-tab:hover { color: rgba(220,220,220,0.8); border-color: transparent; background: none; }
body[data-page="transactions.php"] .filter-tab.active { color: var(--primary, #ac895e); border-bottom-color: var(--primary, #ac895e); background: none; box-shadow: none; }
/* ---- CONTENT ---- */
body[data-page="transactions.php"] .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}
/* ── Stats ── */
body[data-page="transactions.php"] .stats-compact { display: none; }
body[data-page="transactions.php"] .stat-compact {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    padding: 14px 12px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
body[data-page="transactions.php"] .stat-compact-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
body[data-page="transactions.php"] .stat-compact-label {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}
body[data-page="transactions.php"] .stat-compact-value { font-size: 17px; font-weight: 800; }
body[data-page="transactions.php"] .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px !important;
}
body[data-page="transactions.php"] .stat-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 18px 20px !important;
    transition: border-color 0.2s;
}
body[data-page="transactions.php"] .stat-card:hover { border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35); }
body[data-page="transactions.php"] .stat-label {
    color: rgba(160,160,160,0.5);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px !important;
}
body[data-page="transactions.php"] .stat-value {
    font-size: 26px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
body[data-page="transactions.php"] .stat-icon { font-size: 18px; }
/* ── Liste kartı (messages.php .msg-list/.msg-filter-card çerçevesiyle aynı) ── */
body[data-page="transactions.php"] .tx-list {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    overflow: hidden;
    padding: 8px !important;
}
/* ── Table ── */
body[data-page="transactions.php"] .desktop-table { display: block; }
body[data-page="transactions.php"] .table-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 14px;
    overflow: hidden;
}
body[data-page="transactions.php"] table { width: 100%; border-collapse: collapse; }
body[data-page="transactions.php"] thead { background: rgba(255,255,255,0.035); }
body[data-page="transactions.php"] th {
    padding: 18px 22px !important;
    text-align: left;
    font-weight: 700;
    color: rgba(160,160,160,0.55);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
body[data-page="transactions.php"] td {
    padding: 20px 22px !important;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
}
body[data-page="transactions.php"] tr:hover td { background: rgba(255,255,255,0.02); }
/* ── Mobile Cards ── */
body[data-page="transactions.php"] .mobile-cards { display: none; }
body[data-page="transactions.php"] .desktop-table, body[data-page="transactions.php"] .mobile-cards { background: transparent !important; }
body[data-page="transactions.php"] .mobile-cards { padding: 10px !important; }
body[data-page="transactions.php"] .transaction-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    margin-bottom: 8px !important;
    overflow: hidden;
    transition: border-color 0.25s;
}
body[data-page="transactions.php"] .transaction-card:hover { border-color: rgba(255,255,255,0.14); }
body[data-page="transactions.php"] .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px !important;
    cursor: pointer;
    user-select: none;
}
body[data-page="transactions.php"] .card-header-left { display: flex; align-items: center; gap: 12px; }
body[data-page="transactions.php"] .card-type-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
body[data-page="transactions.php"] .type-deposit .card-type-icon { background: rgba(var(--primary-rgb, 172, 137, 94),0.10); border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.22); color: #c9a97d; }
body[data-page="transactions.php"] .type-withdrawal .card-type-icon { background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.22); color: #ef4444; }
body[data-page="transactions.php"] .card-type-text { font-size: 14px; font-weight: 700; color: rgba(220,220,220,0.9); }
body[data-page="transactions.php"] .card-amount { font-size: 17px; font-weight: 800; }
body[data-page="transactions.php"] .amount-positive { color: #c9a97d; }
body[data-page="transactions.php"] .amount-negative { color: #ef4444; }
body[data-page="transactions.php"] .card-expand-icon {
    margin-left: 8px !important;
    font-size: 11px;
    color: rgba(255,255,255,0.14);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}
body[data-page="transactions.php"] .transaction-card.expanded .card-expand-icon { transform: rotate(180deg); }
body[data-page="transactions.php"] .card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(.4,0,.2,1);
}
body[data-page="transactions.php"] .transaction-card.expanded .card-body { max-height: 500px; }
body[data-page="transactions.php"] .card-body-content { padding: 0 18px 16px !important; }
body[data-page="transactions.php"] .card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0 !important;
    font-size: 12px;
}
body[data-page="transactions.php"] .card-label { color: rgba(140,140,140,0.6); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
body[data-page="transactions.php"] .card-value { color: rgba(220,220,220,0.9); font-weight: 600; text-align: right; }
body[data-page="transactions.php"] .card-footer {
    padding: 14px 18px 18px !important;
}
/* ── Status Badges ── */
body[data-page="transactions.php"] .status-badge {
    padding: 4px 9px !important;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}
body[data-page="transactions.php"] .status-pending { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
body[data-page="transactions.php"] .status-approved { background: rgba(var(--primary-rgb, 172, 137, 94),0.15); color: var(--primary, #ac895e); border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.30); }
body[data-page="transactions.php"] .status-rejected { background: rgba(239,68,68,0.15);  color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
body[data-page="transactions.php"] .status-cancelled { background: rgba(91,98,108,0.15); color: #9aa1ab; border: 1px solid rgba(91,98,108,0.2); }
/* ── Buttons ── */
body[data-page="transactions.php"] .btn-cancel-withdrawal, body[data-page="transactions.php"] .btn-cancel-desktop {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.18); border-radius: 9px; color: rgba(248,113,113,0.8);
    font-size: 12px; font-weight: 700; cursor: pointer;
    transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
}
body[data-page="transactions.php"] .btn-cancel-withdrawal { width: 100%; padding: 10px !important; justify-content: center; }
body[data-page="transactions.php"] .btn-cancel-desktop { padding: 7px 14px !important; }
body[data-page="transactions.php"] .btn-cancel-withdrawal:hover,
body[data-page="transactions.php"] .btn-cancel-desktop:hover {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.4);
    color: #f87171;
}
/* ── Modal ── */
body[data-page="transactions.php"] .modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.8); backdrop-filter: blur(6px);
    z-index: 9999; align-items: center; justify-content: center; padding: 20px !important;
}
body[data-page="transactions.php"] .modal-overlay.active { display: flex; }
body[data-page="transactions.php"] .modal-content {
    background: var(--surface, #0d0f13);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    max-width: 440px; width: 100%;
    padding: 28px !important;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8), 0 0 30px rgba(255,255,255,0.09);
}
body[data-page="transactions.php"] .modal-icon {
    width: 56px; height: 56px;
    background: rgba(239,68,68,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px !important;
}
body[data-page="transactions.php"] .modal-icon i { font-size: 26px; color: #ef4444; }
body[data-page="transactions.php"] .modal-title { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 8px !important; }
body[data-page="transactions.php"] .modal-message { color: rgba(255,255,255,0.55); text-align: center; line-height: 1.6; margin-bottom: 22px !important; font-size: 13px; }
body[data-page="transactions.php"] .modal-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body[data-page="transactions.php"] .modal-btn { padding: 13px !important; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
body[data-page="transactions.php"] .modal-btn-cancel { background: rgba(var(--primary-rgb, 172, 137, 94),0.08); border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.25); color: var(--primary, #ac895e); }
body[data-page="transactions.php"] .modal-btn-cancel:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.15); }
body[data-page="transactions.php"] .modal-btn-confirm { background: #dc2626; color: white; }
body[data-page="transactions.php"] .modal-btn-confirm:hover { background: #b91c1c; }
/* ── Empty State (messages.php .msg-empty ile aynı çerçeve) ── */
body[data-page="transactions.php"] .empty-icon { font-size: 48px; color: rgba(var(--primary-rgb, 172, 137, 94),0.25); margin-bottom: 16px !important; }
body[data-page="transactions.php"] .empty-text { color: rgba(255,255,255,0.45); font-size: 14px; }
body[data-page="transactions.php"] .empty-state {
    text-align: center;
    background: transparent;
    padding: 80px 24px !important;
    margin: 0 !important;
}
/* ── Responsive ── */
@media (max-width: 768px) {
body[data-page="transactions.php"] .tx-hero { padding: 88px 16px 0; }
body[data-page="transactions.php"] .tx-hero-inner { gap: 16px; padding-bottom: 22px; }
body[data-page="transactions.php"] .tx-avatar { width: 64px; height: 64px; font-size: 24px; border-radius: 16px; }
body[data-page="transactions.php"] .tx-stat-card { min-width: 0; padding: 14px 18px; }
body[data-page="transactions.php"] .container { padding: 24px 12px 40px; }
body[data-page="transactions.php"] .filter-tab { padding: 12px 12px; font-size: 11px; }
body[data-page="transactions.php"] .stats-compact { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 18px !important; }
body[data-page="transactions.php"] .stats-grid { display: none; }
body[data-page="transactions.php"] .desktop-table { display: none; }
body[data-page="transactions.php"] .mobile-cards { display: block; }
body[data-page="transactions.php"] .modal-content { padding: 22px; }
body[data-page="transactions.php"] .modal-title { font-size: 18px; }
}
@keyframes fadeIn__transactions_php_0 { from{opacity:0} to{opacity:1} }
@keyframes slideUp__transactions_php_0 { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
body[data-page="transactions.php"] .modal-overlay { animation: fadeIn__transactions_php_0 0.25s; }
body[data-page="transactions.php"] .modal-content { animation: slideUp__transactions_php_0 0.25s; }
@keyframes slideIn__transactions_php_0 { from{opacity:0;transform:translateX(80px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideOut__transactions_php_0 { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(80px)} }


/* ── bet-history.php (satır içi <style>, sadece bu sayfada — body[data-page="bet-history.php"] ile kapsandı) ── */
/* ── Bet History — Gold & Black Luxury Theme ── */
body[data-page="bet-history.php"] .bet-history-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}
body[data-page="bet-history.php"] .bet-history-card {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.05);
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.15);
    border-radius: 16px;
    padding: 24px;
}
body[data-page="bet-history.php"] .bet-history-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
body[data-page="bet-history.php"] .bet-history-title {
    font-size: 20px; font-weight: 800;
    color: #fff;
    display: flex; align-items: center; gap: 10px;
}
/* ── Filter Section ── */
body[data-page="bet-history.php"] .filter-section {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
}
body[data-page="bet-history.php"] .filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
body[data-page="bet-history.php"] .filter-group { display: flex; flex-direction: column; gap: 6px; }
body[data-page="bet-history.php"] .filter-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.5);
}
body[data-page="bet-history.php"] .filter-input, body[data-page="bet-history.php"] .filter-select {
    padding: 9px 13px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important; font-family: inherit !important;
    outline: none !important; transition: border-color 0.2s !important;
    width: 100% !important;
    box-shadow: none !important;
}
body[data-page="bet-history.php"] .filter-input:focus, body[data-page="bet-history.php"] .filter-select:focus { border-color: rgba(var(--primary-rgb, 172, 137, 94),0.50) !important; box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 172, 137, 94),0.08) !important; outline: none !important; }
body[data-page="bet-history.php"] .filter-input::placeholder { color: rgba(255,255,255,0.25); }
body[data-page="bet-history.php"] .filter-select option { background: var(--surface-elevated, #06070a); color: var(--text-primary, #e7e9ec); }
body[data-page="bet-history.php"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
body[data-page="bet-history.php"] .filter-actions { display: flex; gap: 8px; justify-content: flex-end; }
body[data-page="bet-history.php"] .btn-filter {
    padding: 9px 20px; border-radius: 8px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; border: none;
}
body[data-page="bet-history.php"] .btn-gold {
    background: var(--primary, #ac895e) !important;
    color: #fff !important;
    border: none !important;
}
body[data-page="bet-history.php"] .btn-gold:hover { background: #c9a97d !important; box-shadow: 0 4px 14px rgba(var(--primary-rgb, 172, 137, 94),0.30) !important; transform: translateY(-1px); }
body[data-page="bet-history.php"] .btn-clear {
    background: var(--border, rgba(255,255,255,0.08));
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.7);
}
body[data-page="bet-history.php"] .btn-clear:hover { background: rgba(255,255,255,0.12); }
/* ── Stats Grid ── */
body[data-page="bet-history.php"] .stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 20px;
}
body[data-page="bet-history.php"] .stat-card {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.07);
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.15);
    border-radius: 12px;
    padding: 16px;
    display: flex; align-items: center; gap: 14px;
    transition: border-color 0.2s;
}
body[data-page="bet-history.php"] .stat-card:hover { border-color: rgba(var(--primary-rgb, 172, 137, 94),0.40); }
body[data-page="bet-history.php"] .stat-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
body[data-page="bet-history.php"] .stat-icon.total { background: rgba(var(--primary-rgb, 172, 137, 94),0.10); color: var(--primary, #ac895e); }
body[data-page="bet-history.php"] .stat-icon.profit { background: rgba(var(--primary-rgb, 172, 137, 94),0.10);   color: #c9a97d; }
body[data-page="bet-history.php"] .stat-icon.loss { background: rgba(239,68,68,0.1);   color: #ef4444; }
body[data-page="bet-history.php"] .stat-icon.count { background: rgba(var(--primary-rgb, 172, 137, 94),0.10);  color: #9aa4b0; }
body[data-page="bet-history.php"] .stat-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
body[data-page="bet-history.php"] .stat-value { font-size: 18px; font-weight: 800; color: #fff; }
/* ── Table ── */
body[data-page="bet-history.php"] .bet-table-container {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
}
body[data-page="bet-history.php"] .bet-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; min-width: 700px;
}
body[data-page="bet-history.php"] .bet-table thead tr {
    background: rgba(var(--primary-rgb, 172, 137, 94),0.10);
    border-bottom: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.15);
}
body[data-page="bet-history.php"] .bet-table th {
    padding: 12px 14px;
    text-align: left;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}
body[data-page="bet-history.php"] .bet-table td {
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.8);
    vertical-align: middle;
}
body[data-page="bet-history.php"] .bet-table tbody tr:hover td { background: rgba(var(--primary-rgb, 172, 137, 94),0.03); }
body[data-page="bet-history.php"] .bet-date { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; }
body[data-page="bet-history.php"] .bet-game { font-weight: 600; color: #fff; }
body[data-page="bet-history.php"] .bet-provider {
    display: inline-block;
    padding: 2px 8px; border-radius: 20px;
    background: var(--border, rgba(255,255,255,0.08)); color: rgba(255,255,255,0.7);
    font-size: 10px; font-weight: 700;
}
body[data-page="bet-history.php"] .amount { font-family: monospace; font-weight: 600; text-align: right; }
body[data-page="bet-history.php"] .profit { color: #c9a97d !important; }
body[data-page="bet-history.php"] .loss { color: #ef4444 !important; }
body[data-page="bet-history.php"] .neutral { color: rgba(255,255,255,0.5) !important; }
/* ── Empty / Loading ── */
body[data-page="bet-history.php"] .empty-state {
    text-align: center; padding: 56px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    background: transparent;
}
body[data-page="bet-history.php"] .empty-icon { font-size: 40px; color: rgba(255,255,255,0.1); }
body[data-page="bet-history.php"] .empty-text { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.3); }
body[data-page="bet-history.php"] .empty-subtext { font-size: 12px; color: rgba(255,255,255,0.2); max-width: 340px; }
body[data-page="bet-history.php"] .loading {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding: 48px 20px;
    color: rgba(255,255,255,0.3); font-size: 14px;
}
body[data-page="bet-history.php"] .spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--border, rgba(255,255,255,0.08));
    border-top-color: var(--primary, #ac895e);
    border-radius: 50%;
    animation: spin__bet_history_php_0 0.8s linear infinite;
}
@keyframes spin__bet_history_php_0 { to { transform: rotate(360deg); } }
/* ── Pagination ── */
body[data-page="bet-history.php"] .pagination {
    display: flex; justify-content: center;
    gap: 6px; padding: 16px 0 4px; flex-wrap: wrap;
}
body[data-page="bet-history.php"] .pagination:empty { display: none; }
body[data-page="bet-history.php"] .page-btn {
    padding: 7px 13px; border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6);
    font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all 0.2s;
}
body[data-page="bet-history.php"] .page-btn:hover { background: rgba(var(--primary-rgb, 172, 137, 94),0.10); color: var(--primary, #ac895e); }
body[data-page="bet-history.php"] .page-btn.active {
    background: var(--primary, #ac895e);
    color: #fff; border-color: transparent;
    font-weight: 800;
}
body[data-page="bet-history.php"] .page-dots { padding: 7px 4px; color: rgba(255,255,255,0.2); font-size: 12px; }
@media (max-width: 768px) {
body[data-page="bet-history.php"] .stats-grid { grid-template-columns: repeat(2,1fr); }
body[data-page="bet-history.php"] .bet-history-card { padding: 14px; }
}
@media (max-width: 480px) {
body[data-page="bet-history.php"] .stats-grid { grid-template-columns: 1fr; }
body[data-page="bet-history.php"] .filter-grid { grid-template-columns: 1fr; }
}
/* ── ID-level overrides — dış CSS'leri ezer ── */
body[data-page="bet-history.php"] #btn-search, body[data-page="bet-history.php"] #btn-search:hover, body[data-page="bet-history.php"] #btn-search:focus, body[data-page="bet-history.php"] #btn-search:active {
    background: var(--primary, #ac895e) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
}
body[data-page="bet-history.php"] #btn-search:hover { background: #c9a97d !important; box-shadow: 0 4px 14px rgba(var(--primary-rgb, 172, 137, 94),0.30) !important; }
body[data-page="bet-history.php"] #btn-search::after { display: none !important; }
body[data-page="bet-history.php"] #start_date, body[data-page="bet-history.php"] #end_date, body[data-page="bet-history.php"] #game_name, body[data-page="bet-history.php"] #provider {
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.85) !important;
    outline: none !important;
}
body[data-page="bet-history.php"] #start_date:focus, body[data-page="bet-history.php"] #end_date:focus, body[data-page="bet-history.php"] #game_name:focus, body[data-page="bet-history.php"] #provider:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.50) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 172, 137, 94),0.08) !important;
}


/* ── sayfa.php (satır içi <style>, sadece bu sayfada — body[data-page="sayfa.php"] ile kapsandı) ── */
body[data-page="sayfa.php"] .cms-override-wrap { padding: 70px 0; }
body[data-page="sayfa.php"] .cms-override-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #cbd5e1;
    line-height: 1.8;
}
body[data-page="sayfa.php"] .cms-override-title {
    color: #f8fafc;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}
body[data-page="sayfa.php"] .cms-override-content h1, body[data-page="sayfa.php"] .cms-override-content h2, body[data-page="sayfa.php"] .cms-override-content h3 {
    color: #f8fafc;
    margin: 28px 0 14px;
}
body[data-page="sayfa.php"] .cms-override-content h2 { font-size: 1.5rem; }
body[data-page="sayfa.php"] .cms-override-content h3 { font-size: 1.2rem; }
body[data-page="sayfa.php"] .cms-override-content p { margin-bottom: 14px; }
body[data-page="sayfa.php"] .cms-override-content ul, body[data-page="sayfa.php"] .cms-override-content ol { margin: 0 0 14px 22px; }
body[data-page="sayfa.php"] .cms-override-content li { margin-bottom: 6px; }
body[data-page="sayfa.php"] .cms-override-content a { color: var(--primary, #ac895e); text-decoration: underline; }
body[data-page="sayfa.php"] .cms-override-content img { max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 767px) {
body[data-page="sayfa.php"] .cms-override-content { padding: 26px; }
body[data-page="sayfa.php"] .cms-override-title { font-size: 1.5rem; }
}


/* ── cerez-politikasi.php (satır içi <style>, sadece bu sayfada — body[data-page="cerez-politikasi.php"] ile kapsandı) ── */
body[data-page="cerez-politikasi.php"] .cookie-hero {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 172, 137, 94), 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    padding: 80px 0 60px;
    margin-bottom: 40px;
}
body[data-page="cerez-politikasi.php"] .cookie-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
body[data-page="cerez-politikasi.php"] .cookie-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 20px;
}
body[data-page="cerez-politikasi.php"] .cookie-hero p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.6;
}
body[data-page="cerez-politikasi.php"] .cookie-section {
    padding: 40px 0;
}
body[data-page="cerez-politikasi.php"] .cookie-content {
    background: rgba(13, 15, 19, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body[data-page="cerez-politikasi.php"] .cookie-text h2 {
    color: #c9a97d;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 40px 0 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(var(--primary-rgb, 172, 137, 94), 0.3);
}
body[data-page="cerez-politikasi.php"] .cookie-text h2:first-child {
    margin-top: 0;
}
body[data-page="cerez-politikasi.php"] .cookie-text h3 {
    color: #f8fafc;
    font-size: 1.3rem;
    margin: 25px 0 15px;
}
body[data-page="cerez-politikasi.php"] .cookie-text p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}
body[data-page="cerez-politikasi.php"] .cookie-text ul {
    color: #cbd5e1;
    margin: 15px 0 15px 30px;
    line-height: 1.8;
}
body[data-page="cerez-politikasi.php"] .cookie-text li {
    margin-bottom: 10px;
}
body[data-page="cerez-politikasi.php"] .cookie-types {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}
body[data-page="cerez-politikasi.php"] .cookie-type-card {
    background: rgba(6, 7, 10, 0.6);
    border-radius: 12px;
    padding: 25px;
    border-left: 4px solid #c9a97d;
    transition: all 0.3s ease;
}
body[data-page="cerez-politikasi.php"] .cookie-type-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 172, 137, 94), 0.2);
}
body[data-page="cerez-politikasi.php"] .cookie-type-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
body[data-page="cerez-politikasi.php"] .cookie-type-header i {
    font-size: 2rem;
    color: #c9a97d;
}
body[data-page="cerez-politikasi.php"] .cookie-type-header h4 {
    color: #c9a97d;
    font-size: 1.2rem;
    margin: 0;
}
body[data-page="cerez-politikasi.php"] .cookie-type-card p {
    margin-bottom: 10px;
}
body[data-page="cerez-politikasi.php"] .cookie-type-card ul {
    margin: 10px 0 0 20px;
}
body[data-page="cerez-politikasi.php"] .cookie-table {
    width: 100%;
    margin: 30px 0;
    border-collapse: collapse;
    background: rgba(6, 7, 10, 0.6);
    border-radius: 12px;
    overflow: hidden;
}
body[data-page="cerez-politikasi.php"] .cookie-table th {
    background: rgba(var(--primary-rgb, 172, 137, 94), 0.2);
    color: #c9a97d;
    padding: 15px;
    text-align: left;
    font-weight: 600;
}
body[data-page="cerez-politikasi.php"] .cookie-table td {
    padding: 15px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
body[data-page="cerez-politikasi.php"] .cookie-table tr:last-child td {
    border-bottom: none;
}
body[data-page="cerez-politikasi.php"] .cookie-table tr:hover {
    background: rgba(var(--primary-rgb, 172, 137, 94), 0.05);
}
body[data-page="cerez-politikasi.php"] .control-methods {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
}
body[data-page="cerez-politikasi.php"] .control-methods h4 {
    color: #3b82f6;
    margin-bottom: 20px;
}
body[data-page="cerez-politikasi.php"] .browser-list {
    display: grid;
    gap: 15px;
}
body[data-page="cerez-politikasi.php"] .browser-item {
    background: rgba(6, 7, 10, 0.6);
    padding: 15px 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
body[data-page="cerez-politikasi.php"] .browser-item i {
    font-size: 1.5rem;
    color: #3b82f6;
}
body[data-page="cerez-politikasi.php"] .browser-info h5 {
    color: #f8fafc;
    margin-bottom: 5px;
}
body[data-page="cerez-politikasi.php"] .browser-info p {
    margin-bottom: 0;
    font-size: 0.9rem;
}
@media (max-width: 768px) {
body[data-page="cerez-politikasi.php"] .cookie-hero {
        padding: 60px 0 40px;
    }
body[data-page="cerez-politikasi.php"] .cookie-hero h1 {
        font-size: 2rem;
    }
body[data-page="cerez-politikasi.php"] .cookie-content {
        padding: 30px 20px;
    }
body[data-page="cerez-politikasi.php"] .cookie-text h2 {
        font-size: 1.5rem;
    }
body[data-page="cerez-politikasi.php"] .cookie-table {
        font-size: 0.9rem;
    }
body[data-page="cerez-politikasi.php"] .cookie-table th, body[data-page="cerez-politikasi.php"] .cookie-table td {
        padding: 10px;
    }
body[data-page="cerez-politikasi.php"] .browser-item {
        flex-direction: column;
        text-align: center;
    }
}


/* ── sportsbook.php (satır içi <style>, sadece bu sayfada — body[data-page="sportsbook.php"] ile kapsandı) ── */
body[data-page="sportsbook.php"] html, body[data-page="sportsbook.php"] { overflow: hidden !important; margin: 0; padding: 0; }
body[data-page="sportsbook.php"] footer, body[data-page="sportsbook.php"] .footer-wrap, body[data-page="sportsbook.php"] .footer { display: none !important; }
body[data-page="sportsbook.php"] .sb-wrapper { position:fixed; left:0; right:0; background:var(--surface-elevated, #06070a); z-index:999; }
body[data-page="sportsbook.php"] .sb-container { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; }
body[data-page="sportsbook.php"] .sb-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; background:var(--surface-elevated, #06070a); }
/* Yükleme ekranı */
body[data-page="sportsbook.php"] .sb-loading { position:fixed; left:0; right:0; background:var(--surface-elevated, #06070a); display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity .5s; }
body[data-page="sportsbook.php"] .sb-loading.hidden { opacity:0; pointer-events:none; }
body[data-page="sportsbook.php"] .sb-spinner { width:56px; height:56px; border:3px solid rgba(var(--primary-rgb, 172, 137, 94),0.15); border-top:2px solid var(--primary, #ac895e); border-radius:50%; animation:spin__sportsbook_php_0 1s linear infinite; margin:0 auto 14px; }
body[data-page="sportsbook.php"] .sb-loading-text { color: rgba(255,255,255,0.5); font-size: 15px; font-weight: 600; text-align: center; letter-spacing: .3px; }
@keyframes spin__sportsbook_php_0 { to { transform:rotate(360deg); } }
/* Mobil navigasyon toggle */
body[data-page="sportsbook.php"] #sb-nav-toggle { display:none; position:fixed; right:12px; z-index:1100; width:36px; height:22px; background:rgba(13,15,19,0.92); border:1px solid rgba(255,255,255,0.12); border-radius:10px 10px 0 0; cursor:pointer; align-items:center; justify-content:center; transition:bottom .3s ease; }
body[data-page="sportsbook.php"] #sb-nav-toggle svg { width:16px; height:16px; fill:none; stroke:rgba(255,255,255,0.55); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease; }
body[data-page="sportsbook.php"] #sb-nav-toggle.nav-hidden svg { transform:rotate(180deg); }
@media(max-width:767px) {
body[data-page="sportsbook.php"] #sb-nav-toggle { display:flex; }
}
/* Giriş uyarısı */
body[data-page="sportsbook.php"] .sb-login-prompt { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#ccc; text-align:center; gap:16px; padding:24px; }
body[data-page="sportsbook.php"] .sb-login-prompt .icon { font-size:48px; }
body[data-page="sportsbook.php"] .sb-login-prompt h2 { font-size:20px; font-weight:700; color:var(--text-primary, #e7e9ec); margin:0; }
body[data-page="sportsbook.php"] .sb-login-prompt p { font-size:14px; color:#888; margin:0; max-width:360px; }
body[data-page="sportsbook.php"] .sb-login-prompt .btn-login { background: #15171c; border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.35); color: var(--text-primary, #e7e9ec); font-weight: 700; padding: 12px 32px; border-radius: 8px; text-decoration: none; font-size: 15px; transition: background .18s ease, border-color .18s ease, color .18s ease; }
body[data-page="sportsbook.php"] .sb-login-prompt .btn-login:hover { background: var(--primary, #ac895e); border-color: var(--primary, #ac895e); color: #101114; }


/* ── live-casino.php (satır içi <style>, sadece bu sayfada — body[data-page="live-casino.php"] ile kapsandı) ── */
/* ============================================================
   LIVE CASINO PAGE — SHARP EDITORIAL CASINO
   Slots.php ile aynı yapı, canlı casino teması
   ============================================================ */
/* --- Page Base --- */
body[data-page="live-casino.php"] .lcp-page {
    padding-top: 0;
    margin-top: -85px;
}
@media (max-width: 768px) {
body[data-page="live-casino.php"] .lcp-page {
        margin-top: 0;
    }
}
/* ============================================================
   COMMAND BAR
   ============================================================ */
body[data-page="live-casino.php"] .lcp-command {
    position: fixed;
    top: var(--top-bar-h, 62px);
    left: var(--sb-width, 232px);
    right: 0;
    z-index: 200;
    background: var(--header-background, rgba(6,7,10,0.97));
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
body[data-page="live-casino.php"] .lcp-command-spacer { width: 100%; min-height: 58px; }
@media (max-width: 768px) {
body[data-page="live-casino.php"] .lcp-command-spacer { min-height: 108px; }
}
body[data-page="live-casino.php"] .lcp-command-inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 58px;
}
/* Search */
body[data-page="live-casino.php"] .lcp-search {
    position: relative;
    flex-shrink: 0;
    width: 260px;
}
body[data-page="live-casino.php"] .lcp-search-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.25);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s;
}
body[data-page="live-casino.php"] .lcp-search-input {
    width: 100%;
    height: 38px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 0 14px 0 36px;
    color: #fff;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
body[data-page="live-casino.php"] .lcp-search-input::placeholder { color: rgba(180,180,180,0.35); }
body[data-page="live-casino.php"] .lcp-search-input:focus {
    border-color: rgba(255,255,255,0.20);
    background: rgba(255,255,255,0.06);
    box-shadow: none;
}
body[data-page="live-casino.php"] .lcp-search:focus-within .lcp-search-ico { color: rgba(255,255,255,0.45); }
/* Divider */
body[data-page="live-casino.php"] .lcp-divider {
    width: 1px;
    height: 24px;
    background: var(--border, rgba(255,255,255,0.08));
    flex-shrink: 0;
}
/* Provider Scroll Wrapper */
body[data-page="live-casino.php"] .lcp-tabs-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
body[data-page="live-casino.php"] .lcp-tabs-wrap::before, body[data-page="live-casino.php"] .lcp-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.2s;
}
body[data-page="live-casino.php"] .lcp-tabs-wrap::before {
    left: 32px;
    background: linear-gradient(90deg, rgba(6,7,10,0.98), transparent);
}
body[data-page="live-casino.php"] .lcp-tabs-wrap::after {
    right: 32px;
    background: linear-gradient(270deg, rgba(6,7,10,0.98), transparent);
}
body[data-page="live-casino.php"] .lcp-tabs-wrap.at-start::before { opacity: 0; }
body[data-page="live-casino.php"] .lcp-tabs-wrap.at-end::after { opacity: 0; }
/* Ok Butonları */
body[data-page="live-casino.php"] .lcp-arrow {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.35);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s;
    z-index: 3;
    user-select: none;
}
body[data-page="live-casino.php"] .lcp-arrow:hover {
    background: var(--border, rgba(255,255,255,0.08));
    border-color: rgba(255,255,255,0.12);
    color: var(--text-primary, #e7e9ec);
}
body[data-page="live-casino.php"] .lcp-arrow:active { transform: scale(0.92); }
body[data-page="live-casino.php"] .lcp-arrow.disabled {
    opacity: 0.25;
    pointer-events: none;
}
/* Tab List */
body[data-page="live-casino.php"] .lcp-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    scroll-behavior: smooth;
}
body[data-page="live-casino.php"] .lcp-tabs::-webkit-scrollbar { display: none; }
body[data-page="live-casino.php"] .lcp-tab {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(180,180,180,0.55);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
    flex-shrink: 0;
}
body[data-page="live-casino.php"] .lcp-tab:hover {
    color: var(--text-primary, #e7e9ec);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
body[data-page="live-casino.php"] .lcp-tab.active {
    color: #fff;
    background: var(--primary, #ac895e);
    border-color: transparent;
    font-weight: 700;
    box-shadow: none;
}
body[data-page="live-casino.php"] .lcp-tab--logo {
    padding: 0 12px;
}
body[data-page="live-casino.php"] .lcp-tab--logo img {
    height: 22px;
    width: 68px;
    object-fit: contain;
    display: block;
}
/* Clear */
body[data-page="live-casino.php"] .lcp-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid rgba(239,68,68,0.25);
    background: transparent;
    color: rgba(239,68,68,0.7);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.18s;
}
body[data-page="live-casino.php"] .lcp-clear:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.5);
    color: #ef4444;
}
/* ============================================================
   HERO STRIP
   ============================================================ */
body[data-page="live-casino.php"] .lcp-hero {
    position: relative;
    padding: 48px 24px 32px;
    max-width: 1380px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
body[data-page="live-casino.php"] .lcp-hero--compact { padding: 32px 24px 24px; }
body[data-page="live-casino.php"] .lcp-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
body[data-page="live-casino.php"] .lcp-hero-line {
    width: 28px;
    height: 2px;
    background: rgba(6,7,10,0.99);
    border-radius: 2px;
}
body[data-page="live-casino.php"] .lcp-hero-eyebrow-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #5b626c;
}
body[data-page="live-casino.php"] .lcp-hero-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 8px;
}
body[data-page="live-casino.php"] .lcp-hero-heading span {
    color: var(--text-primary, #e7e9ec);
}
body[data-page="live-casino.php"] .lcp-hero-sub {
    font-size: 14px;
    color: rgba(180,180,180,0.5);
    font-weight: 400;
}
/* Live indicator */
body[data-page="live-casino.php"] .lcp-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 12px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #f87171;
    margin-bottom: 16px;
}
body[data-page="live-casino.php"] .lcp-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
    animation: lcp-pulse__live_casino_php_0 1.2s infinite;
}
@keyframes lcp-pulse__live_casino_php_0 {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
    70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
body[data-page="live-casino.php"] .lcp-hero-stats {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
    padding-bottom: 4px;
}
body[data-page="live-casino.php"] .lcp-stat { text-align: right; }
body[data-page="live-casino.php"] .lcp-stat-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800;
    color: var(--text-primary, #e7e9ec);
    letter-spacing: -0.04em;
    line-height: 1;
    text-shadow: none;
}
body[data-page="live-casino.php"] .lcp-stat-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(180,180,180,0.4);
    margin-top: 3px;
}
/* Hero rule */
body[data-page="live-casino.php"] .lcp-hero-rule {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
}
body[data-page="live-casino.php"] .lcp-hero-rule hr {
    border: none;
    height: 1px;
    background: transparent;
    margin: 0;
}
/* ============================================================
   RESULTS META BAR
   ============================================================ */
body[data-page="live-casino.php"] .lcp-meta {
    max-width: 1380px;
    margin: 0 auto;
    padding: 16px 24px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
body[data-page="live-casino.php"] .lcp-meta-count {
    font-size: 12px;
    color: rgba(255,255,255,0.09);
    font-weight: 500;
}
body[data-page="live-casino.php"] .lcp-meta-count strong { color: #5b626c; font-weight: 700; }
body[data-page="live-casino.php"] .lcp-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    background: var(--border, rgba(255,255,255,0.08));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.09);
    font-weight: 600;
}
/* ============================================================
   GAMES GRID
   ============================================================ */
body[data-page="live-casino.php"] .lcp-grid-wrap {
    max-width: 1380px;
    margin: 0 auto;
    padding: 20px 24px 64px;
}
body[data-page="live-casino.php"] .lcp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
/* ---- Game Card ---- */
body[data-page="live-casino.php"] .lcp-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3/4;
    background: var(--surface-elevated, #06070a);
    border: 1px solid rgba(255,255,255,0.05);
    transition:
        transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    animation: lcp-card-in__live_casino_php_0 0.4s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes lcp-card-in__live_casino_php_0 {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
body[data-page="live-casino.php"] .lcp-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.09),
        0 16px 48px rgba(0,0,0,0.8),
        0 0 32px rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.12);
    z-index: 5;
}
body[data-page="live-casino.php"] .lcp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
body[data-page="live-casino.php"] .lcp-card:hover .lcp-card-img { transform: scale(1.07); }
body[data-page="live-casino.php"] .lcp-card-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 35%,
        rgba(0,0,0,0.45) 65%,
        rgba(0,0,0,0.92) 100%
    );
    transition: background 0.3s;
}
body[data-page="live-casino.php"] .lcp-card:hover .lcp-card-veil {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0.5) 55%,
        rgba(0,0,0,0.95) 100%
    );
}
/* CANLI badge */
body[data-page="live-casino.php"] .lcp-card-live {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(220,38,38,0.88);
    border: 1px solid rgba(239,68,68,0.5);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
}
body[data-page="live-casino.php"] .lcp-card-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    animation: lcp-blink__live_casino_php_0 1.2s infinite;
}
@keyframes lcp-blink__live_casino_php_0 {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
body[data-page="live-casino.php"] .lcp-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 12px 10px;
    z-index: 2;
}
body[data-page="live-casino.php"] .lcp-card-name {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
body[data-page="live-casino.php"] .lcp-card-prov {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
}
/* Play Button */
body[data-page="live-casino.php"] .lcp-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--border, rgba(255,255,255,0.08));
    color: var(--text-primary, #e7e9ec);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: none;
    pointer-events: none;
}
body[data-page="live-casino.php"] .lcp-play i { margin-left: 2px; }
body[data-page="live-casino.php"] .lcp-card:hover .lcp-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
body[data-page="live-casino.php"] .lcp-play:hover {
    background: var(--border, rgba(255,255,255,0.08));
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%) scale(1.1) !important;
}
@media (hover: none) {
body[data-page="live-casino.php"] .lcp-play {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        pointer-events: auto;
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}
/* ============================================================
   EMPTY STATE
   ============================================================ */
body[data-page="live-casino.php"] .lcp-empty {
    text-align: center;
    padding: 100px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
body[data-page="live-casino.php"] .lcp-empty-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: rgba(255,255,255,0.04);
    margin-bottom: 24px;
    background: rgba(255,255,255,0.07);
}
body[data-page="live-casino.php"] .lcp-empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}
body[data-page="live-casino.php"] .lcp-empty p {
    font-size: 13px;
    color: rgba(180,180,180,0.4);
    margin-bottom: 32px;
    max-width: 320px;
}
body[data-page="live-casino.php"] .lcp-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 22px;
    background: rgba(13,15,19,0.95);
    color: var(--page-background, #080808);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}
body[data-page="live-casino.php"] .lcp-empty-btn:hover {
    box-shadow: 0 6px 20px rgba(255,255,255,0.04);
    transform: translateY(-1px);
}
/* -- Daha Fazla Oyun Butonu -- */
body[data-page="live-casino.php"] .lcp-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 32px 0 8px;
}
body[data-page="live-casino.php"] .lcp-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    background: var(--border, rgba(255,255,255,0.08));
    color: #5b626c;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
}
body[data-page="live-casino.php"] .lcp-load-more:hover {
    background: var(--border, rgba(255,255,255,0.08));
    border-color: rgba(255,255,255,0.12);
    color: var(--text-primary, #e7e9ec);
    transform: translateY(-1px);
}
body[data-page="live-casino.php"] .lcp-load-more:active { transform: scale(0.97); }
body[data-page="live-casino.php"] .lcp-load-more.loading { opacity: 0.6; pointer-events: none; }
body[data-page="live-casino.php"] .lcp-load-more.hidden { display: none; }
body[data-page="live-casino.php"] .lcp-load-more-wrap.hidden { display: none; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
body[data-page="live-casino.php"] .lcp-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
}
@media (max-width: 768px) {
body[data-page="live-casino.php"] .lcp-command { left: 0; }
body[data-page="live-casino.php"] .lcp-command-inner {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 16px;
        gap: 10px;
    }
body[data-page="live-casino.php"] .lcp-search { width: 100%; }
body[data-page="live-casino.php"] .lcp-divider { display: none; }
body[data-page="live-casino.php"] .lcp-tabs-wrap { width: 100%; }
body[data-page="live-casino.php"] .lcp-arrow { display: none; }
body[data-page="live-casino.php"] .lcp-tabs { padding: 0; scroll-behavior: smooth; }
body[data-page="live-casino.php"] .lcp-tabs-wrap::before, body[data-page="live-casino.php"] .lcp-tabs-wrap::after { display: none; }
body[data-page="live-casino.php"] .lcp-hero { padding: 36px 16px 28px; flex-direction: column; align-items: flex-start; gap: 20px; }
body[data-page="live-casino.php"] .lcp-hero-stats { align-items: flex-start; gap: 28px; }
body[data-page="live-casino.php"] .lcp-stat { text-align: left; }
body[data-page="live-casino.php"] .lcp-grid-wrap { padding: 16px 16px 48px; }
body[data-page="live-casino.php"] .lcp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
body[data-page="live-casino.php"] .lcp-hero-rule, body[data-page="live-casino.php"] .lcp-meta { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
body[data-page="live-casino.php"] .lcp-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
body[data-page="live-casino.php"] .lcp-hero-heading { font-size: 28px; }
}


/* NOT: Mobil tam-ekran oynatma şablonu (play.php'nin $isMobile dalı) ve
   mobil hata sayfası KENDİ bağımsız <style> bloklarını play.php içinde
   taşır (theme.css'i hiç yüklemezler) — bu yüzden burada tekrar
   tanımlanmalarına gerek yok. Önceden buradaki iki blok yanlışlıkla
   body[data-page="play.php"] ile scope'lanmıştı: mobil sayfaların <body>
   etiketi bu attribute'u HİÇ almadığı için (header.php içermiyorlar) o
   bloklar mobilde zaten çalışmıyordu — ama data-page="play.php" GERÇEKTEN
   ayarlanan tek yer olan MASAÜSTÜ sayfasına yanlışlıkla uygulanıp <body>'yi
   position:fixed + display:flex yapıyor, bu da sidebar/footer/oyun
   kutusunun tamamen bozulmasına yol açıyordu. Kaldırıldı. */


/* ── play.php (satır içi <style>, sadece bu sayfada — body[data-page="play.php"] ile kapsandı) ── */
body[data-page="play.php"] .main-content {
    display: block !important;
    width: auto !important;
}
body[data-page="play.php"] .game-play-container {
    width: 100% !important;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    display: block !important;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
}
body[data-page="play.php"] .game-play-wrapper {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box;
}
body[data-page="play.php"] .game-header {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body[data-page="play.php"] .game-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
body[data-page="play.php"] .game-title i {
    color: var(--accent);
}
body[data-page="play.php"] .game-title .mode-badge {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 10px;
}
body[data-page="play.php"] .game-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
body[data-page="play.php"] .switch-mode-btn {
    background: linear-gradient(135deg, #c9a97d, #c9a97d);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
}
body[data-page="play.php"] .switch-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
}
body[data-page="play.php"] .game-control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    text-decoration: none !important;
}
body[data-page="play.php"] .game-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}
body[data-page="play.php"] .game-control-btn.close-btn {
    background: rgba(255, 51, 102, 0.2);
    border-color: rgba(255, 51, 102, 0.4);
}
body[data-page="play.php"] .game-control-btn.close-btn:hover {
    background: rgba(255, 51, 102, 0.4);
}
body[data-page="play.php"] .game-iframe-container {
    position: relative;
    width: 100% !important;
    padding-bottom: 56.25%;
    min-height: 600px;
    background: #000;
    display: block !important;
    box-sizing: border-box;
}
body[data-page="play.php"] .game-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
body[data-page="play.php"] .game-error-container {
    padding: 60px 20px;
    text-align: center;
}
body[data-page="play.php"] .game-error-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.6;
}
body[data-page="play.php"] .game-error-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--accent);
}
body[data-page="play.php"] .game-error-message {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background: rgba(255, 51, 102, 0.1);
    border-radius: 15px;
    border-left: 4px solid var(--accent);
}
body[data-page="play.php"] .game-error-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Deneme bonusu overlay — iframe üzerinde */
body[data-page="play.php"] .free-bonus-overlay-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    min-height: 600px;
    background: var(--surface-elevated, #06070a);
}
body[data-page="play.php"] .free-bonus-overlay-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
    pointer-events: none;
    filter: brightness(0.3);
}
body[data-page="play.php"] .free-bonus-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 10;
}
body[data-page="play.php"] .free-bonus-overlay-msg {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    background: rgba(6,7,10, 0.80);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 14px 24px;
    text-align: center;
    max-width: 380px;
    line-height: 1.5;
}
/* Geri Dön butonu — efektsiz, sade */
body[data-page="play.php"] .free-bonus-overlay .btn {
    background: var(--border, rgba(255,255,255,0.08));
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.80);
    box-shadow: none;
}
body[data-page="play.php"] .free-bonus-overlay .btn:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
    box-shadow: none;
    transform: none;
}
body[data-page="play.php"] .free-bonus-overlay .btn::before {
    display: none;
}
@media (max-width: 768px) {
body[data-page="play.php"] .game-play-container {
        padding: 10px;
    }
body[data-page="play.php"] .game-header {
        padding: 10px 15px;
    }
body[data-page="play.php"] .game-title {
        font-size: 14px;
    }
body[data-page="play.php"] .game-control-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
body[data-page="play.php"] .game-iframe-container {
        min-height: 400px;
    }
}


/* ── profile.php (satır içi <style>, sadece bu sayfada — body[data-page="profile.php"] ile kapsandı) ── */
/* ============================================================
   PROFILE PAGE — same design DNA as slots / promotions
   ============================================================ */
body[data-page="profile.php"] .prf-page {
    margin-top: -85px;
    padding-top: 0;
    min-height: 100vh;
}
/* ---- HERO STRIP ---- */
body[data-page="profile.php"] .prf-hero {
    position: relative;
    overflow: hidden;
    padding: 100px 24px 0;
    background: var(--surface-elevated, #06070a);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
body[data-page="profile.php"] .prf-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    padding-bottom: 32px;
    flex-wrap: wrap;
}
/* Avatar */
body[data-page="profile.php"] .prf-avatar-wrap { position: relative; flex-shrink: 0; }
body[data-page="profile.php"] .prf-avatar {
    width: 88px; height: 88px;
    border-radius: 22px;
    background: rgba(13,15,19,0.9);
    border: 2px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 900;
    color: var(--text-primary, #e7e9ec);
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    position: relative;
}
body[data-page="profile.php"] .prf-avatar-status {
    position: absolute; bottom: -4px; right: -4px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary, #ac895e);
    border: 3px solid var(--page-background, #080808);
    box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
    animation: prf-ping__profile_php_0 2.5s ease-in-out infinite;
}
@keyframes prf-ping__profile_php_0 {
    0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
/* Hero info */
body[data-page="profile.php"] .prf-hero-info { flex: 1; min-width: 0; }
body[data-page="profile.php"] .prf-hero-eyebrow {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 8px;
}
body[data-page="profile.php"] .prf-hero-line { width: 20px; height: 2px; background: rgba(255,255,255,0.12); border-radius: 2px; }
body[data-page="profile.php"] .prf-hero-eyebrow-txt { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.45); }
body[data-page="profile.php"] .prf-hero-name {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(22px,4vw,36px);
    font-weight: 800; line-height: 1; letter-spacing: -0.03em;
    color: #fff; margin-bottom: 6px;
}
body[data-page="profile.php"] .prf-hero-meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
body[data-page="profile.php"] .prf-hero-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(180,180,180,0.6);
}
body[data-page="profile.php"] .prf-hero-chip i { font-size: 9px; }
/* KYC chip */
body[data-page="profile.php"] .prf-kyc-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
}
body[data-page="profile.php"] .prf-kyc-approved { background: rgba(var(--primary-rgb, 172, 137, 94),0.12); border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.25); color: var(--primary, #ac895e); }
body[data-page="profile.php"] .prf-kyc-pending { background: rgba(245,158,11,0.12);  border: 1px solid rgba(245,158,11,0.25);  color: #fbbf24; }
body[data-page="profile.php"] .prf-kyc-rejected { background: rgba(239,68,68,0.12);   border: 1px solid rgba(239,68,68,0.25);   color: #f87171; }
body[data-page="profile.php"] .prf-kyc-none { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: rgba(200,200,200,0.7); }
/* Hero right — balance card */
body[data-page="profile.php"] .prf-balance-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 18px 24px;
    min-width: 180px;
    flex-shrink: 0;
}
body[data-page="profile.php"] .prf-balance-lbl { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.50); margin-bottom: 6px; }
body[data-page="profile.php"] .prf-balance-val {
    font-family: 'Poppins', sans-serif;
    font-size: 28px; font-weight: 900; line-height: 1;
    color: var(--text-primary, #e7e9ec); letter-spacing: -0.04em;

}
/* ---- TABS ---- */
body[data-page="profile.php"] .prf-tabs-bar {
    background: var(--header-background, rgba(6,7,10,0.97));
    border-bottom: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.10);
    position: sticky; top: var(--top-bar-h, 62px); z-index: 100;
}
body[data-page="profile.php"] .prf-tabs {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center;
    overflow-x: auto; scrollbar-width: none;
    padding: 0 24px;
}
body[data-page="profile.php"] .prf-tabs::-webkit-scrollbar { display: none; }
body[data-page="profile.php"] .prf-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 14px 20px;
    font-size: 13px; font-weight: 600;
    color: rgba(160,160,160,0.5);
    border: none; background: none; cursor: pointer;
    position: relative; white-space: nowrap;
    transition: color 0.2s; font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
body[data-page="profile.php"] .prf-tab i { font-size: 12px; }
body[data-page="profile.php"] .prf-tab:hover { color: rgba(255,255,255,0.75); }
body[data-page="profile.php"] .prf-tab.active {
    color: var(--primary, #ac895e);
    border-bottom-color: var(--primary, #ac895e);
}
body[data-page="profile.php"] .prf-tab-badge {
    width: 7px; height: 7px; border-radius: 50%;
    background: #f59e0b; flex-shrink: 0;
}
body[data-page="profile.php"] .prf-tab-badge.green { background: var(--primary, #ac895e); }
body[data-page="profile.php"] .prf-tab-badge.red { background: #ef4444; }
/* ---- MODAL KAPATMA TUŞU (giriş/kayıt modalındaki .am-close ile aynı dil) ---- */
.prf-modal-close {
    background: none !important;
    border: none !important;
    color: #c7ccd3 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    width: 28px; height: 28px;
    padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .16s ease, transform .16s ease !important;
}
.prf-modal-close:hover { background: none !important; border: none !important; color: #C6A365 !important; transform: rotate(90deg); }
.prf-modal-close:active { transform: rotate(90deg) scale(0.9); }
@media (prefers-reduced-motion: reduce) {
    .prf-modal-close:hover, .prf-modal-close:active { transform: none; }
}
/* ---- CONTENT AREA ---- */
body[data-page="profile.php"] .prf-content {
    max-width: 1100px; margin: 0 auto;
    padding: 32px 24px 64px;
}
/* Section toggle */
body[data-page="profile.php"] .prf-section { display: none; }
body[data-page="profile.php"] .prf-section.active { display: block; }
/* ---- GRID ---- */
body[data-page="profile.php"] .prf-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
body[data-page="profile.php"] .prf-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
/* ---- CARD ---- */
body[data-page="profile.php"] .prf-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s;
}
body[data-page="profile.php"] .prf-card:hover { border-color: rgba(255,255,255,0.14); }
body[data-page="profile.php"] .prf-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 20px 0;
    margin-bottom: 16px;
}
body[data-page="profile.php"] .prf-card-head-icon {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
body[data-page="profile.php"] .prf-card-head h3 {
    font-size: 13px; font-weight: 700; color: var(--text-primary, #e7e9ec);
    margin: 0; letter-spacing: 0.1px;
}
body[data-page="profile.php"] .prf-card-body { padding: 0 20px 20px; }
/* ---- INFO ROWS ---- */
body[data-page="profile.php"] .prf-info-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    gap: 12px;
}
body[data-page="profile.php"] .prf-info-row:last-child { border-bottom: none; }
body[data-page="profile.php"] .prf-info-lbl {
    font-size: 12px; color: rgba(255,255,255,0.38);
    display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
body[data-page="profile.php"] .prf-info-lbl i { color: rgba(255,255,255,0.35); width: 12px; font-size: 11px; }
body[data-page="profile.php"] .prf-info-val {
    font-size: 13px; font-weight: 600; color: var(--text-primary, #e7e9ec);
    text-align: right; word-break: break-all;
}
/* ---- DIVIDER ---- */
body[data-page="profile.php"] .prf-divider {
    height: 1px;
    background: linear-gradient(90deg, var(--border, rgba(255,255,255,0.08)), transparent);
    margin: 0 20px 16px;
}
/* ---- FORM ---- */
body[data-page="profile.php"] .prf-form-group { margin-bottom: 14px; }
body[data-page="profile.php"] .prf-form-lbl {
    display: block; font-size: 11px; font-weight: 700;
    color: rgba(160,160,160,0.55); text-transform: uppercase;
    letter-spacing: 0.6px; margin-bottom: 7px;
}
body[data-page="profile.php"] .prf-form-wrap { position: relative; }
body[data-page="profile.php"] .prf-form-ico {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: rgba(180,180,180,0.3); font-size: 13px; pointer-events: none;
}
body[data-page="profile.php"] .prf-form-inp {
    width: 100%; padding: 11px 14px 11px 40px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px; color: #fff; font-size: 13px;
    font-family: inherit; outline: none; box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
body[data-page="profile.php"] .prf-form-inp::placeholder { color: rgba(180,180,180,0.25); }
body[data-page="profile.php"] .prf-form-inp:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.30);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.07);
}
body[data-page="profile.php"] .prf-form-inp[readonly] {
    opacity: 0.45; cursor: not-allowed;
}
body[data-page="profile.php"] .prf-form-eye {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(180,180,180,0.35);
    cursor: pointer; padding: 6px; border-radius: 6px; transition: color 0.2s;
    font-size: 13px;
}
body[data-page="profile.php"] .prf-form-eye:hover { color: var(--text-primary, #e7e9ec); }
/* Alert */
body[data-page="profile.php"] .prf-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 10px;
    font-size: 12.5px; font-weight: 600; margin-bottom: 14px;
}
body[data-page="profile.php"] .prf-alert i { font-size: 14px; flex-shrink: 0; }
body[data-page="profile.php"] .prf-alert-err { background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.2);  color: #f87171; }
body[data-page="profile.php"] .prf-alert-ok { background: rgba(var(--primary-rgb, 172, 137, 94),0.10); border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20); color: #c9a97d; }
body[data-page="profile.php"] .prf-alert-info { background: rgba(var(--primary-rgb, 172, 137, 94),0.08); border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.18); color: rgba(157,242,157,0.9); }
/* Submit button */
body[data-page="profile.php"] .prf-btn-submit {
    width: 100%; padding: 13px 20px;
    background: var(--primary, #ac895e);
    border: none; border-radius: 10px;
    color: #fff; font-size: 13px; font-weight: 800;
    font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.2s;
    margin-top: 6px;
}
body[data-page="profile.php"] .prf-btn-submit:hover { background: #c9a97d; }
/* ---- QUICK ACTION LINKS ---- */
body[data-page="profile.php"] .prf-action-list { display: flex; flex-direction: column; gap: 8px; }
body[data-page="profile.php"] .prf-action {
    display: flex; align-items: center;
    padding: 14px 16px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    text-decoration: none; gap: 14px;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
body[data-page="profile.php"] .prf-action:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
body[data-page="profile.php"] .prf-action-ico {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; transition: transform 0.2s;
}
body[data-page="profile.php"] .prf-action:hover .prf-action-ico { }
body[data-page="profile.php"] .prf-action-txt { flex: 1; min-width: 0; }
body[data-page="profile.php"] .prf-action-title { font-size: 13px; font-weight: 700; color: var(--text-primary, #e7e9ec); line-height: 1.2; }
body[data-page="profile.php"] .prf-action-sub { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }
body[data-page="profile.php"] .prf-action-arr { color: rgba(255,255,255,0.30); font-size: 12px; flex-shrink: 0; transition: color 0.2s; }
body[data-page="profile.php"] .prf-action:hover .prf-action-arr { color: var(--text-primary, #e7e9ec); }
/* ---- KYC ---- */
body[data-page="profile.php"] .prf-kyc-status-bar {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 18px; border-radius: 12px; margin-bottom: 20px;
    font-size: 13px; font-weight: 700;
}
body[data-page="profile.php"] .prf-kyc-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px; margin-bottom: 16px;
}
body[data-page="profile.php"] .prf-kyc-doc {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px; padding: 16px;
    cursor: pointer; position: relative;
    transition: all 0.22s;
}
body[data-page="profile.php"] .prf-kyc-doc:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
}
body[data-page="profile.php"] .prf-kyc-doc-icon {
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #9aa1ab; margin-bottom: 12px;
}
body[data-page="profile.php"] .prf-kyc-doc h4 { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 3px; }
body[data-page="profile.php"] .prf-kyc-doc p { font-size: 11px; color: rgba(160,160,160,0.5); margin: 0; }
body[data-page="profile.php"] .prf-kyc-check {
    position: absolute; top: 12px; right: 12px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.15);
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.30);
    display: flex; align-items: center; justify-content: center;
    color: #c9a97d; font-size: 10px;
}
body[data-page="profile.php"] .prf-kyc-submit {
    width: 100%; padding: 13px;
    background: var(--primary, #ac895e);
    border: none; border-radius: 10px; color: #fff;
    font-size: 13px; font-weight: 800; font-family: inherit;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: 8px;
    transition: background 0.2s;
}
body[data-page="profile.php"] .prf-kyc-submit:hover { background: #c9a97d; }
/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
body[data-page="profile.php"] .prf-page { margin-top: -85px; }
body[data-page="profile.php"] .prf-hero { padding: 100px 16px 0; }
body[data-page="profile.php"] .prf-hero-inner { gap: 18px; padding-bottom: 24px; }
body[data-page="profile.php"] .prf-avatar { width: 68px; height: 68px; font-size: 22px; border-radius: 17px; }
body[data-page="profile.php"] .prf-balance-card { width: 100%; min-width: 0; }
body[data-page="profile.php"] .prf-tabs { padding: 0 12px; }
body[data-page="profile.php"] .prf-tab { padding: 13px 14px; font-size: 12px; }
body[data-page="profile.php"] .prf-content { padding: 20px 16px 56px; }
body[data-page="profile.php"] .prf-grid-2 { grid-template-columns: 1fr; }
body[data-page="profile.php"] .prf-grid-3 { grid-template-columns: 1fr 1fr; }
body[data-page="profile.php"] .prf-kyc-doc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
body[data-page="profile.php"] .prf-grid-3 { grid-template-columns: 1fr; }
body[data-page="profile.php"] .prf-kyc-doc-grid { grid-template-columns: 1fr; }
body[data-page="profile.php"] .prf-hero-name { font-size: 20px; }
body[data-page="profile.php"] .prf-tab span { display: none; }
body[data-page="profile.php"] .prf-tab { padding: 13px 16px; }
}


/* ── loss-bonus-rules.php (satır içi <style>, sadece bu sayfada — body[data-page="loss-bonus-rules.php"] ile kapsandı) ── */
body[data-page="loss-bonus-rules.php"] .rules-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}
body[data-page="loss-bonus-rules.php"] .rules-header {
    text-align: center;
    margin-bottom: 40px;
}
body[data-page="loss-bonus-rules.php"] .rules-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
body[data-page="loss-bonus-rules.php"] .rules-subtitle {
    color: var(--text-secondary);
    font-size: 16px;
}
body[data-page="loss-bonus-rules.php"] .rules-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 25px;
}
body[data-page="loss-bonus-rules.php"] .rule-section { margin-bottom: 30px; }
body[data-page="loss-bonus-rules.php"] .rule-section:last-child { margin-bottom: 0; }
body[data-page="loss-bonus-rules.php"] .rule-section h3 {
    color: var(--accent);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body[data-page="loss-bonus-rules.php"] .rule-section h3 i { font-size: 22px; }
body[data-page="loss-bonus-rules.php"] .rule-list { list-style: none; padding: 0; }
body[data-page="loss-bonus-rules.php"] .rule-list li {
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 15px;
}
body[data-page="loss-bonus-rules.php"] .rule-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
    font-size: 18px;
}
body[data-page="loss-bonus-rules.php"] .highlight-box {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(255, 107, 0, 0.05));
    border-left: 4px solid var(--accent);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}
body[data-page="loss-bonus-rules.php"] .highlight-box strong { color: var(--accent); }
/* Periyot bilgi kutusu */
body[data-page="loss-bonus-rules.php"] .lb-period-info-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.10);
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.28);
    border-radius: 10px;
    padding: 10px 18px;
    margin-bottom: 18px;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}
body[data-page="loss-bonus-rules.php"] .lb-period-info-box strong { color: var(--primary, #ac895e); }
body[data-page="loss-bonus-rules.php"] .lb-period-info-box i { color: var(--primary, #ac895e); font-size: 16px; }
body[data-page="loss-bonus-rules.php"] .faq-section { margin-top: 40px; }
body[data-page="loss-bonus-rules.php"] .faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}
body[data-page="loss-bonus-rules.php"] .faq-question {
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}
body[data-page="loss-bonus-rules.php"] .faq-question:hover { background: rgba(255, 255, 255, 0.05); }
body[data-page="loss-bonus-rules.php"] .faq-question h4 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    flex: 1;
}
body[data-page="loss-bonus-rules.php"] .faq-question i { color: var(--accent); transition: transform 0.3s ease; }
body[data-page="loss-bonus-rules.php"] .faq-question.active i { transform: rotate(180deg); }
body[data-page="loss-bonus-rules.php"] .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
body[data-page="loss-bonus-rules.php"] .faq-answer-content {
    padding: 0 20px 20px 20px;
    color: var(--text-secondary);
    line-height: 1.7;
}
body[data-page="loss-bonus-rules.php"] .back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
    margin-top: 30px;
}
body[data-page="loss-bonus-rules.php"] .back-button:hover { background: #c9a97d; transform: translateX(-3px); }
@media (max-width: 768px) {
body[data-page="loss-bonus-rules.php"] .rules-page { padding: 15px; }
body[data-page="loss-bonus-rules.php"] .rules-card { padding: 20px; }
body[data-page="loss-bonus-rules.php"] .rules-title { font-size: 26px; }
}


/* ── loss-bonus.php (satır içi <style>, sadece bu sayfada — body[data-page="loss-bonus.php"] ile kapsandı) ── */
body[data-page="loss-bonus.php"] * {box-sizing:border-box}
body[data-page="loss-bonus.php"] {
  --bg:var(--surface-elevated, #06070a);--card:var(--surface, #0d0f13);--card2:#15171c;
  --border:var(--border, rgba(255,255,255,0.08));--border-md:rgba(255,255,255,0.12);
  --text1:#fff;--text2:rgba(255,255,255,0.65);--text3:rgba(255,255,255,0.38);
  --green:var(--primary, #ac895e);--blue:#9aa4b0;--red:#ef4444;--orange:#f59e0b;--accent:var(--text-primary, #e7e9ec);
}
body[data-page="loss-bonus.php"] {font-family:'Inter',-apple-system,sans-serif}
/* ── HERO ── */
body[data-page="loss-bonus.php"] .lb-hero {position:relative;background:var(--surface-elevated, #06070a);overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.07);margin-top:-85px;padding-top:0}
body[data-page="loss-bonus.php"].has-ticker .lb-hero {margin-top:-117px;padding-top:32px}
body[data-page="loss-bonus.php"] .lb-hero-inner {max-width:1280px;margin:0 auto;padding:36px 24px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;position:relative;z-index:2}
body[data-page="loss-bonus.php"] .lb-hero-left {flex:1}
body[data-page="loss-bonus.php"] .lb-hero-title {font-size:48px;font-weight:900;line-height:1.1;margin-bottom:12px;letter-spacing:-1px}
body[data-page="loss-bonus.php"] .lb-hero-title .t-white {color:#fff}
body[data-page="loss-bonus.php"] .lb-hero-title .t-gold {color:var(--primary, #ac895e);font-style:italic}
body[data-page="loss-bonus.php"] .lb-hero-sub {font-size:14px;color:var(--text3);max-width:480px;line-height:1.6}
body[data-page="loss-bonus.php"] .lb-hero-right {display:flex;gap:32px;align-items:flex-end;flex-shrink:0}
body[data-page="loss-bonus.php"] .lb-hero-stat {text-align:center}
body[data-page="loss-bonus.php"] .lb-hero-stat-num {font-size:42px;font-weight:900;color:var(--accent);line-height:1;letter-spacing:-1px}
body[data-page="loss-bonus.php"] .lb-hero-stat-label {font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-top:4px}
body[data-page="loss-bonus.php"] .lb-hero-nav {max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:0;border-top:1px solid var(--border-md);position:relative;z-index:2;overflow-x:auto;scrollbar-width:none}
body[data-page="loss-bonus.php"] .lb-hero-nav::-webkit-scrollbar {display:none}
body[data-page="loss-bonus.php"] .lb-nav-btn {padding:13px 24px;font-size:13px;font-weight:700;border:none;cursor:pointer;background:transparent;color:rgba(255,255,255,0.45);border-bottom:3px solid transparent;transition:all .2s;text-decoration:none;display:inline-block;white-space:nowrap;letter-spacing:.01em}
body[data-page="loss-bonus.php"] .lb-nav-btn.active {color:var(--primary, #ac895e);border-bottom-color:var(--primary, #ac895e)}
body[data-page="loss-bonus.php"] .lb-nav-btn:hover:not(.active) {color:rgba(255,255,255,0.75);border-bottom-color:rgba(255,255,255,0.2)}
/* ── Wrap & Grid ── */
body[data-page="loss-bonus.php"] .lb-wrap {max-width:1280px;margin:0 auto;padding:20px 14px 60px;overflow-x:hidden;box-sizing:border-box}
body[data-page="loss-bonus.php"] .lb-grid {display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
/* ── Card shell ── */
body[data-page="loss-bonus.php"] .lb-card {background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
/* Card head */
body[data-page="loss-bonus.php"] .lb-card-head {padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.03)}
body[data-page="loss-bonus.php"] .lb-card-head-icon {width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
body[data-page="loss-bonus.php"] .lb-card-head h3 {font-size:14px;font-weight:700;color:var(--text1)}
body[data-page="loss-bonus.php"] .lb-card-head p {font-size:11px;color:var(--text2);margin-top:2px}
body[data-page="loss-bonus.php"] .lb-card-head-right {margin-left:auto;font-size:11px;color:var(--text3)}
/* Card body — single wrapper for all content */
body[data-page="loss-bonus.php"] .lb-card-body {padding:16px}
/* ── Amount display ── */
body[data-page="loss-bonus.php"] .lb-amount-center {text-align:center;padding:8px 0 12px}
body[data-page="loss-bonus.php"] .lb-amount-label {font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
body[data-page="loss-bonus.php"] .lb-amount-num {font-size:44px;font-weight:900;letter-spacing:-2px;color:#fff;line-height:1;margin-bottom:6px}
body[data-page="loss-bonus.php"] .lb-amount-sub {font-size:12px;color:var(--text3)}
/* ── Progress ── */
body[data-page="loss-bonus.php"] .lb-progress {margin-bottom:12px}
body[data-page="loss-bonus.php"] .lb-progress-labels {display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-bottom:6px}
body[data-page="loss-bonus.php"] .lb-progress-labels b {color:var(--text2)}
body[data-page="loss-bonus.php"] .lb-progress-track {height:5px;background:var(--border, rgba(255,255,255,0.08));border-radius:3px;overflow:hidden}
body[data-page="loss-bonus.php"] .lb-progress-fill {height:100%;border-radius:3px;background:linear-gradient(90deg,var(--primary, #ac895e),#c9a97d);transition:width .5s}
/* ── Notice ── */
body[data-page="loss-bonus.php"] .lb-notice {display:flex;gap:8px;padding:10px 12px;border-radius:8px;margin-bottom:8px;font-size:12px;line-height:1.45}
body[data-page="loss-bonus.php"] .lb-notice i {font-size:12px;flex-shrink:0;margin-top:1px}
body[data-page="loss-bonus.php"] .lb-notice.warn {background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);color:rgba(245,158,11,0.9)}
body[data-page="loss-bonus.php"] .lb-notice.error {background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:rgba(239,68,68,0.85)}
body[data-page="loss-bonus.php"] .lb-notice.info {background:rgba(var(--primary-rgb, 172, 137, 94),0.08);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.18);color:rgba(157,242,157,.9)}
body[data-page="loss-bonus.php"] .lb-notice.success {background:rgba(var(--primary-rgb, 172, 137, 94),0.08);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);color:rgba(var(--primary-rgb, 172, 137, 94),.9)}
/* ── Claim alert ── */
body[data-page="loss-bonus.php"] .lb-alert {display:flex;gap:8px;padding:10px 12px;border-radius:8px;margin-bottom:8px;font-size:12px;line-height:1.45}
body[data-page="loss-bonus.php"] .lb-alert i {font-size:12px;flex-shrink:0;margin-top:1px}
body[data-page="loss-bonus.php"] .lb-alert.ok {background:rgba(var(--primary-rgb, 172, 137, 94),0.08);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);color:rgba(var(--primary-rgb, 172, 137, 94),.9)}
body[data-page="loss-bonus.php"] .lb-alert.err {background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:rgba(239,68,68,.85)}
/* ── Claim button ── */
body[data-page="loss-bonus.php"] .lb-claim-btn {width:100%;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s;font-family:inherit;border:1px solid rgba(255,255,255,0.12);background:var(--card2);color:var(--accent);margin-bottom:4px}
body[data-page="loss-bonus.php"] .lb-claim-btn:hover:not(:disabled) {background:#15171c}
body[data-page="loss-bonus.php"] .lb-claim-btn:disabled {background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.25);border-color:transparent;cursor:not-allowed}
body[data-page="loss-bonus.php"] .lb-countdown {font-size:11px;color:var(--text3);text-align:center;padding:4px 0 8px}
body[data-page="loss-bonus.php"] .lb-countdown span {color:#fff;font-weight:700}
body[data-page="loss-bonus.php"] .lb-rules-link {display:flex;align-items:center;justify-content:center;gap:6px;padding-top:8px;font-size:12px;color:var(--text3);text-decoration:none;transition:color .2s}
body[data-page="loss-bonus.php"] .lb-rules-link:hover {color:var(--accent)}
/* ── History card ── */
body[data-page="loss-bonus.php"] .lb-date-filter {display:flex;gap:6px;align-items:center;padding:10px 14px;border-top:1px solid var(--border)}
body[data-page="loss-bonus.php"] .lb-date-input {flex:1;min-width:0;padding:6px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:7px;color:var(--text1);font-size:12px;font-family:inherit;outline:none;-webkit-appearance:none;appearance:none;color-scheme:dark}
body[data-page="loss-bonus.php"] .lb-date-input::-webkit-calendar-picker-indicator {filter:invert(1);opacity:.35;cursor:pointer}
body[data-page="loss-bonus.php"] .lb-date-input:focus {border-color:rgba(var(--primary-rgb, 172, 137, 94),0.30);box-shadow:0 0 0 2px rgba(var(--primary-rgb, 172, 137, 94),0.07)}
body[data-page="loss-bonus.php"] .lb-filter-btn {padding:6px 12px;border-radius:7px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.7);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0}
body[data-page="loss-bonus.php"] .lb-filter-btn:hover {background:rgba(255,255,255,0.12);color:#fff}
body[data-page="loss-bonus.php"] .lb-table-wrap {overflow-x:auto;-webkit-overflow-scrolling:touch}
body[data-page="loss-bonus.php"] .lb-table {width:100%;border-collapse:collapse;min-width:480px}
body[data-page="loss-bonus.php"] .lb-table th {padding:9px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);background:rgba(255,255,255,0.04);text-align:left;white-space:nowrap}
body[data-page="loss-bonus.php"] .lb-table td {padding:11px 12px;font-size:12px;color:var(--text2);border-top:1px solid var(--border)}
body[data-page="loss-bonus.php"] .lb-table tr:hover td {background:rgba(255,255,255,0.02)}
body[data-page="loss-bonus.php"] .lb-badge {display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;background:rgba(var(--primary-rgb, 172, 137, 94),0.12);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.20);color:var(--green)}
body[data-page="loss-bonus.php"] .lb-empty-hist {padding:36px 16px;text-align:center;color:var(--text3)}
body[data-page="loss-bonus.php"] .lb-empty-hist i {font-size:28px;margin-bottom:10px;display:block;opacity:.15}
body[data-page="loss-bonus.php"] .lb-empty-hist p {font-size:12px}
/* ── Right col: stats ── */
body[data-page="loss-bonus.php"] .lb-stat-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
body[data-page="loss-bonus.php"] .lb-stat-box {background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:12px}
body[data-page="loss-bonus.php"] .lb-stat-label {font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
body[data-page="loss-bonus.php"] .lb-stat-value {font-size:16px;font-weight:700;color:var(--text1)}
body[data-page="loss-bonus.php"] .lb-stat-value.accent {color:var(--accent)}
body[data-page="loss-bonus.php"] .lb-stat-value.green {color:var(--green)}
body[data-page="loss-bonus.php"] .lb-stat-value.red {color:var(--red)}
body[data-page="loss-bonus.php"] .lb-period-row {display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
body[data-page="loss-bonus.php"] .lb-period-row:last-child {border-bottom:none}
body[data-page="loss-bonus.php"] .lb-period-label {color:var(--text3)}
body[data-page="loss-bonus.php"] .lb-period-value {font-weight:600;color:var(--text1)}
/* ── Rules ── */
body[data-page="loss-bonus.php"] .lb-rules-list {display:flex;flex-direction:column;gap:8px}
body[data-page="loss-bonus.php"] .lb-rule {display:flex;gap:10px;font-size:12px;color:var(--text2);line-height:1.55}
body[data-page="loss-bonus.php"] .lb-rule-dot {width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;margin-top:1px;background:rgba(255,255,255,0.06);color:var(--text3)}
body[data-page="loss-bonus.php"] .lb-rule-dot.green {background:rgba(var(--primary-rgb, 172, 137, 94),0.12);color:var(--green)}
body[data-page="loss-bonus.php"] .lb-rule-dot.red {background:rgba(239,68,68,0.12);color:var(--red)}
/* ── Responsive ── */
@media(max-width:1000px) {
body[data-page="loss-bonus.php"] .lb-grid {grid-template-columns:1fr}
}
@media(max-width:900px) {
body[data-page="loss-bonus.php"] .lb-hero-title {font-size:32px}
body[data-page="loss-bonus.php"] .lb-hero-stat-num {font-size:28px}
body[data-page="loss-bonus.php"] .lb-hero-inner {flex-direction:column;align-items:flex-start;padding:32px 16px 24px}
body[data-page="loss-bonus.php"] .lb-hero-right {gap:20px}
body[data-page="loss-bonus.php"] .lb-hero-nav {padding:0 16px;overflow-x:auto}
}
@media(max-width:480px) {
body[data-page="loss-bonus.php"] .lb-wrap {padding:8px 8px 60px}
body[data-page="loss-bonus.php"] .lb-card-body {padding:10px}
body[data-page="loss-bonus.php"] .lb-amount-num {font-size:28px}
body[data-page="loss-bonus.php"] .lb-claim-btn {font-size:12px;padding:11px}
body[data-page="loss-bonus.php"] .lb-stat-grid {grid-template-columns:1fr 1fr;gap:6px}
body[data-page="loss-bonus.php"] .lb-stat-box {padding:8px 10px}
body[data-page="loss-bonus.php"] .lb-stat-value {font-size:13px}
body[data-page="loss-bonus.php"] .lb-stat-label {font-size:9px}
}
@media(max-width:360px) {
body[data-page="loss-bonus.php"] .lb-wrap {padding:6px 6px 60px}
body[data-page="loss-bonus.php"] .lb-card {border-radius:8px}
body[data-page="loss-bonus.php"] .lb-card-head {padding:10px 12px}
body[data-page="loss-bonus.php"] .lb-card-body {padding:8px}
body[data-page="loss-bonus.php"] .lb-amount-num {font-size:26px}
body[data-page="loss-bonus.php"] .lb-notice {font-size:10px;padding:8px 10px}
body[data-page="loss-bonus.php"] .lb-claim-btn {font-size:12px;padding:10px}
body[data-page="loss-bonus.php"] .lb-stat-grid {gap:5px}
body[data-page="loss-bonus.php"] .lb-date-input {font-size:10px;padding:4px 6px}
body[data-page="loss-bonus.php"] .lb-filter-btn {font-size:9px;padding:4px 8px}
}
@media(max-width:640px) {
body[data-page="loss-bonus.php"] .lb-wrap {padding:8px 8px 60px}
body[data-page="loss-bonus.php"] .lb-grid {gap:8px}
body[data-page="loss-bonus.php"] .lb-card {border-radius:10px}
body[data-page="loss-bonus.php"] .lb-card-head {padding:11px 14px}
body[data-page="loss-bonus.php"] .lb-card-head h3 {font-size:13px}
body[data-page="loss-bonus.php"] .lb-card-head p {font-size:10px}
body[data-page="loss-bonus.php"] .lb-card-body {padding:12px}
body[data-page="loss-bonus.php"] .lb-amount-num {font-size:32px}
body[data-page="loss-bonus.php"] .lb-amount-sub {font-size:11px}
body[data-page="loss-bonus.php"] .lb-notice {font-size:11px;padding:9px 10px}
body[data-page="loss-bonus.php"] .lb-claim-btn {font-size:13px;padding:12px}
body[data-page="loss-bonus.php"] .lb-rules-link {font-size:11px}
body[data-page="loss-bonus.php"] .lb-stat-grid {gap:6px}
body[data-page="loss-bonus.php"] .lb-stat-box {padding:10px}
body[data-page="loss-bonus.php"] .lb-stat-value {font-size:14px}
body[data-page="loss-bonus.php"] .lb-period-row {font-size:11px}
body[data-page="loss-bonus.php"] .lb-date-filter {padding:8px 10px}
body[data-page="loss-bonus.php"] .lb-date-input {font-size:11px;padding:5px 7px}
body[data-page="loss-bonus.php"] .lb-filter-btn {font-size:10px;padding:5px 9px}
body[data-page="loss-bonus.php"] .lb-table th, body[data-page="loss-bonus.php"] .lb-table td {padding:8px 10px;font-size:11px}
body[data-page="loss-bonus.php"] .lb-rules-list {gap:6px}
body[data-page="loss-bonus.php"] .lb-rule {font-size:11px}
}
@media(max-width:380px) {
body[data-page="loss-bonus.php"] .lb-wrap {padding:8px 8px 60px}
body[data-page="loss-bonus.php"] .lb-amount-num {font-size:28px}
body[data-page="loss-bonus.php"] .lb-card-body {padding:10px}
}


/* ── includes/announcement-popup.php (satır içi <style>, global) ── */

.ann-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.82);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ann-overlay.open { display: flex; animation: annFadeIn .2s ease; }
@keyframes annFadeIn { from{opacity:0} to{opacity:1} }

.ann-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.95);
    animation: annUp .22s cubic-bezier(0.22,1,0.36,1);
    background: #111820;
}
@keyframes annUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Kapat — sağ üst, minimal */
.ann-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    transition: all .15s;
}
.ann-close:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }

/* Görsel */
.ann-img-link { display: block; line-height: 0; }
.ann-img { width: 100%; display: block; object-fit: cover; }

/* Footer */
.ann-footer {
    padding: 12px 14px 14px;
    background: #111820;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* CTA butonu — site temasıyla uyumlu yeşil/altın */
.ann-btn-action {
    display: block;
    width: 100%;
    height: 46px;
    background: linear-gradient(135deg, var(--primary, #ac895e) 0%, #17e619 50%, #0fcf10 100%);
    border: none;
    border-radius: 6px;
    color: #101114;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 46px;
    transition: all .18s ease;
    font-family: inherit;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb, 172, 137, 94),0.45);
}
.ann-btn-action::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 60%);
    pointer-events: none;
}
.ann-btn-action:hover {
    background: linear-gradient(135deg, #c9a97d 0%, var(--primary, #ac895e) 50%, #17e619 100%);
    color: #101114;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(var(--primary-rgb, 172, 137, 94),0.6);
}
.ann-btn-action:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(var(--primary-rgb, 172, 137, 94),0.4); }

/* "Bir daha gösterme" satırı */
.ann-dismiss-row {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    justify-content: center;
}
.ann-dismiss-row input[type="checkbox"] {
    width: 13px; height: 13px;
    accent-color: var(--primary, #ac895e);
    cursor: pointer;
    flex-shrink: 0;
}
.ann-dismiss-row span {
    font-size: 11px;
    color: rgba(255,255,255,0.32);
    user-select: none;
}
.ann-dismiss-row:hover span { color: rgba(255,255,255,0.55); }

@media (max-width: 480px) {
    .ann-btn-action { height: 43px; line-height: 43px; font-size: 13px; }
}



/* ── includes/footer.php (satır içi <style>, global) ── */

/* Comm100 bubble loading screen süresince gizle */
body.is-loading [id*="comm100"],
body.is-loading [class*="comm100"],
body.is-loading iframe[src*="comm100"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}



/* ── includes/footer.php (satır içi <style>, global) ── */

    /* ══════════════════════════════════════════════
       NEW FOOTER — Misty Casino referans düzeni
       ══════════════════════════════════════════════ */
    .nft-footer {
        background: var(--footer-background, rgba(6,7,10,0.99)) !important;
        font-family: inherit;
        color: var(--text-primary, #e7e9ec);
        padding-bottom: 0;
    }
    .nft-container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 24px;
    }
    .nft-divider {
        border-top: 1px solid rgba(255,255,255,0.07);
    }

    /* ── LİNK KOLONLARI — Desktop ── */
    .nft-links-section {
        padding: 40px 0 32px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nft-cols {
        display: flex;
        justify-content: center;
        gap: 0 64px;
    }
    .nft-col { min-width: 130px; }
    .nft-col-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: none;
        padding: 0 0 14px;
        cursor: default;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.38);
        font-family: inherit;
    }
    .nft-arr { display: none; width: 14px; height: 14px; flex-shrink: 0; }
    .nft-col-list {
        list-style: none;
        margin: 0; padding: 0;
        display: flex;
        flex-direction: column;
        gap: 9px;
    }
    .nft-col-list a {
        font-size: 13px;
        color: rgba(255,255,255,0.5);
        text-decoration: none;
        transition: color .14s;
        display: inline-block;
    }
    .nft-col-list a:hover { color: var(--text-primary, #e7e9ec); }

    /* ── ÖDEME YÖNTEMLERİ ── */
    .nft-pay-section {
        padding: 24px 0 20px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        /*
         * mix-blend-mode: screen'in doğru çalışması için
         * isolation: isolate ekle (parent containment)
         */
        isolation: isolate;
    }
    .nft-pay-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 28px;
    }
    .nft-pay-fiat {
        margin-bottom: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .nft-pay-fiat img {
        height: 22px;
        width: auto;
        opacity: 0.65;
        /* SVG'ler fill="white" ile geldiği için filter gerekmez */
        filter: none;
        -webkit-filter: none;
        transition: opacity .18s;
    }
    .nft-pay-fiat img:hover { opacity: 1; }

    /* Kripto — üst üste binen coin stili */
    .nft-pay-crypto {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0;
        padding: 4px 0;
    }
    .nft-pay-crypto img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-left: -10px;
        border: 2px solid #0a1520;
        box-sizing: border-box;
        transition: transform .18s, z-index .18s;
        position: relative;
        z-index: 1;
        opacity: 0.9;
    }
    .nft-pay-crypto img:first-child { margin-left: 0; }
    .nft-pay-crypto img:hover { transform: translateY(-4px) scale(1.12); z-index: 10; opacity: 1; }

    /* ── LİSANS METNİ ── */
    .nft-license-section {
        padding: 18px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .nft-license-text {
        font-size: 10.5px;
        color: rgba(255,255,255,0.22);
        line-height: 1.8;
        text-align: center;
        max-width: 960px;
        margin: 0 auto;
        /* iOS Safari'nin veri algılayıcı linklerini (telefon, email) gizle */
        -webkit-touch-callout: none;
    }
    /* iOS Safari'nin otomatik linkleri (data detectors) footer metin rengiyle örtüş */
    .nft-license-text a,
    .nft-license-text a:link,
    .nft-license-text a:visited,
    .nft-license-text a:hover,
    .nft-license-text a:active {
        color: rgba(255,255,255,0.22) !important;
        text-decoration: none !important;
        pointer-events: none;
        cursor: default;
    }

    /* ── ALT BAR ── */
    .nft-bottom {
        padding: 22px 0 20px;
    }
    .nft-bottom-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
    }
    .nft-bottom-badges {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }
    .nft-badges-aware {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12px;
    }
    .nft-badge-aware {
        height: 28px;
        width: auto;
        opacity: 0.7;
        /*
         * gambleaware.svg zaten fill="#ffffff" (beyaz) geliyor.
         * brightness(0) filter beyaz SVG'yi siyaha çeviriyordu!
         * Filter tamamen kaldırıldı — iOS dahil her platformda düzgün görünür.
         */
        filter: none;
        -webkit-filter: none;
    }
    .nft-badge-18 {
        height: 36px;
        width: auto;
        opacity: 0.75;
    }
    .nft-anj-link { display: inline-flex; align-items: center; }
    .nft-badge-anj { height: 58px; width: auto; opacity: 1; filter: none; }
    .nft-bottom-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .nft-logo-img  { height: 30px; width: auto; opacity: 0.6; }
    .nft-logo-text { font-size: 16px; font-weight: 800; color: rgba(255,255,255,0.5); }
    .nft-copy {
        font-size: 11px;
        color: rgba(255,255,255,0.22);
        margin: 0;
        text-align: center;
    }

    /* ══════════════════════════════════════
       MOBİL — max-width: 768px
       ══════════════════════════════════════ */
    @media (max-width: 768px) {
        .nft-container { padding: 0 16px; }
        .nft-footer { padding-bottom: 0 !important; }
        .nft-bottom { padding-bottom: 2px !important; }

        /* Linkler — accordion */
        .nft-links-section { padding: 0; }
        .nft-cols {
            flex-direction: column;
            gap: 0;
        }
        .nft-col {
            min-width: unset;
            width: 100%;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .nft-col-head {
            padding: 15px 0;
            cursor: pointer;
            font-size: 12px;
            color: rgba(255,255,255,0.6);
            letter-spacing: 0;
            text-transform: none;
            font-weight: 500;
        }
        .nft-arr { display: block; color: rgba(255,255,255,0.3); transition: transform .25s; }
        .nft-col.open .nft-arr { transform: rotate(180deg); }

        .nft-col-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease, padding .3s ease;
            gap: 0;
        }
        .nft-col.open .nft-col-list {
            max-height: 400px;
            padding-bottom: 10px;
        }
        .nft-col-list li { padding-top: 8px; }
        .nft-col-list a  { font-size: 13px; color: rgba(255,255,255,0.45); }

        /* Ödeme */
        .nft-pay-section { padding: 18px 0 14px; }
        .nft-pay-fiat {
            flex-wrap: wrap !important;
            justify-content: center !important;
            gap: 10px 20px !important;
        }
        .nft-pay-fiat img {
            height: 18px !important;
            flex-shrink: 0 !important;
            filter: none !important;
            -webkit-filter: none !important;
            opacity: 0.70 !important;
        }
        .nft-pay-crypto {
            flex-wrap: nowrap !important;
            gap: 0 !important;
            justify-content: center !important;
            padding-left: 0 !important;
        }
        .nft-pay-crypto img {
            width: 34px !important;
            height: 34px !important;
            min-width: 34px !important;
            margin-left: -10px !important;
            border: 2px solid #0a1520 !important;
            border-radius: 50% !important;
            box-sizing: border-box !important;
            position: relative !important;
            z-index: 1 !important;
        }
        .nft-pay-crypto img:first-child { margin-left: 0 !important; }
        .nft-pay-row { gap: 8px 18px; }
        .nft-pay-fiat { margin-bottom: 12px; padding-bottom: 12px; }

        /* Alt bar */
        .nft-bottom { padding: 14px 0 4px; }
        .nft-badge-aware {
            height: 24px !important;
            filter: none !important;
            -webkit-filter: none !important;
            opacity: 0.75 !important;
        }
        .nft-badge-18    { height: 32px; }
        .nft-badge-anj   { height: 48px; }
        .nft-logo-img    { height: 26px; }
    }

    @media (min-width: 769px) and (max-width: 1100px) {
        .nft-cols { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
    }
    


/* ── includes/footer.php (satır içi <style>, global) ── */

.footer-badges {
    display: flex;
    align-items: center;
    gap: 10px;
}
.badge-18 {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.anj-seal-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.badge-anj {
    width: 68px;
    height: auto;
    display: block;
}



/* ── includes/footer.php (satır içi <style>, global) ── */

/* Active state — JS classList.add('active') ile tetiklenir.
   NOT: display:none/block ARTIK KULLANILMIYOR — display değişimi CSS
   transition ile animasyonlanamadığı için modal önceden "pat diye"
   beliriyor/kayboluyordu. Artık opacity + visibility + transform
   üzerinden yumuşak geçiş yapıyor. */
#gameModal.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
}
#gameModalOverlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Demo buton — tarayıcı default + global CSS override'larına karşı tam koruma */
#gameModal #playGameFunBtn,
#gameModal #playGameFunBtnGuest,
#playGameFunBtn,
#playGameFunBtnGuest {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: var(--border, rgba(255,255,255,0.08)) !important;
    background-color: var(--border, rgba(255,255,255,0.08)) !important;
    background-image: none !important;
    color: var(--text-primary, #e7e9ec) !important;
    border: 2px solid rgba(255,255,255,0.20) !important;
    border-radius: 10px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 15px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
    box-shadow: none !important;
    outline: none !important;
    text-shadow: none !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
}
#gameModal #playGameFunBtn:hover,
#gameModal #playGameFunBtnGuest:hover,
#playGameFunBtn:hover,
#playGameFunBtnGuest:hover {
    background: rgba(255,255,255,0.15) !important;
    background-color: rgba(255,255,255,0.15) !important;
    background-image: none !important;
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.35) !important;
    color: #ffffff !important;
}
#playGameFunBtn i,
#playGameFunBtnGuest i,
#playGameFunBtn .fa-gamepad,
#playGameFunBtnGuest .fa-gamepad {
    color: var(--primary, #ac895e) !important;
    font-size: 16px !important;
}
#playGameFunBtn span,
#playGameFunBtnGuest span {
    color: inherit !important;
}



/* ── includes/popups.php (satır içi <style>, global) ── */

.pu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.82);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.pu-overlay.open { display: flex; animation: puFadeIn .2s ease; }
@keyframes puFadeIn { from{opacity:0} to{opacity:1} }

.pu-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.95);
    animation: puUp .22s cubic-bezier(0.22,1,0.36,1);
    line-height: 0;
}
@keyframes puUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

.pu-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    transition: all .15s;
}
.pu-close:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }

.pu-img { width: 100%; display: block; object-fit: cover; cursor: pointer; }






/* ── includes/header.php (satır içi <style>, global) ── */

    /* Affiliate & Beni Ara görsel butonları */
    .header-img-btns {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .header-img-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        transition: transform 0.15s ease, opacity 0.15s ease !important;
        line-height: 0 !important;
    }
    .header-img-btn img {
        height: 28px !important;
        width: auto !important;
        display: block !important;
        border-radius: 20px !important;
        object-fit: contain !important;
    }
    .header-img-btn:hover {
        transform: translateY(-1px) scale(1.04) !important;
        opacity: 0.92 !important;
    }
    .header-img-btn:active {
        transform: scale(0.97) !important;
    }
    @media (max-width: 768px) {
        .header-img-btn img {
            height: 22px !important;
        }
        .header-img-btns { gap: 4px !important; }
    }
    @media (max-width: 400px) {
        .header-img-btn img {
            height: 20px !important;
        }
    }

    /* Para Yatır Butonu — navbar tasarımına uyumlu */
    .header-deposit-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 7px 16px !important;
        background: var(--primary, #ac895e) !important;
        border: none !important;
        border-radius: 8px !important;
        color: #101114 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        font-family: 'Inter', 'Poppins', sans-serif !important;
        letter-spacing: 0.01em !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: background 0.15s ease, transform 0.15s ease !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }
    .header-deposit-btn:hover {
        background: #c9a97d !important;
        opacity: 1 !important;
        transform: none !important;
        box-shadow: none !important;
        color: #101114 !important;
    }
    .header-deposit-btn:active {
        transform: scale(0.97) !important;
    }
    .header-deposit-icon {
        font-size: 12px !important;
        color: #101114 !important;
    }
    @media (max-width: 768px) {
        .header-deposit-text { display: none !important; }
        .header-deposit-icon { display: inline !important; }
        .header-deposit-btn {
            padding: 7px 11px !important;
            border-radius: 8px !important;
        }
    }
    @keyframes pulse-glow {
        0%, 100% {
            box-shadow: 0 0 30px rgba(239, 68, 68, 0.7), 0 5px 20px rgba(239, 68, 68, 0.5), inset 0 0 20px rgba(239, 68, 68, 0.4), inset 0 3px 8px rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1);
            border-color: #ef4444;
        }
        50% {
            box-shadow: 0 0 40px rgba(239, 68, 68, 0.9), 0 7px 25px rgba(239, 68, 68, 0.6), inset 0 0 25px rgba(239, 68, 68, 0.5), inset 0 3px 10px rgba(255, 255, 255, 0.4);
            transform: translateY(-50%) scale(1.1);
            border-color: #ff5555;
        }
    }
    .dropdown-item { position: relative; }

    /* VIP Kulübü — dropdown başlığının doğal bir devamı (ayrı kutu değil,
       aynı altın degrade header kartının içinde akar) */
    .dropdown-vip-inline {
        display: block;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(201,169,125,0.2);
        text-decoration: none;
        position: relative;
        z-index: 1;
    }
    .dropdown-vip-inline-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 5px;
    }
    .dropdown-vip-inline-icon {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        line-height: 1;
        flex-shrink: 0;
        overflow: hidden;
    }
    .dropdown-vip-inline-icon img { width: 100%; height: 100%; object-fit: cover; }
    .dropdown-vip-inline-name {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--gold-light, #FFF4CC);
        text-shadow: 0 0 8px rgba(201,169,125,0.3);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dropdown-vip-inline-pct {
        font-size: 10px;
        font-weight: 800;
        color: var(--gold-primary, #c9a97d);
        flex-shrink: 0;
    }
    .dropdown-vip-inline-track {
        display: block;
        height: 4px;
        border-radius: 2px;
        background: rgba(0,0,0,0.35);
        overflow: hidden;
    }
    .dropdown-vip-inline-fill {
        display: block;
        height: 100%;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--gold-accent, var(--primary, #ac895e)), var(--gold-primary, #c9a97d));
    }

    /* Çarkıfelek + VIP Lottie butonları */
    .navbar,
    .navbar .container,
    .nav-brand {
        overflow: visible !important;
    }

    .nav-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        z-index: 1300;
    }

    .brand-logo {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }

    .spin-wheel-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        flex-shrink: 0;
        position: relative;
        z-index: 1302;
    }

    .spin-wheel-gif {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 2px solid rgba(154,164,176,0.35);
        transition: border-color .2s, transform .2s;
        display: block;
    }

    .spin-wheel-btn:hover .spin-wheel-gif {
        border-color: #9aa4b0;
        transform: scale(1.08);
    }

    .vip-header-wrap {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 42px !important;
        margin-left: 5px !important;
        margin-right: 7px !important;
        margin-top: 0 !important;
        flex: 0 0 46px !important;
        position: relative !important;
        z-index: 1303 !important;
        overflow: visible !important;
    }

    .lottie-vip-animation-container {
        cursor: pointer !important;
        width: 44px !important;
        height: 32px !important;
        display: block !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #vip-lottie {
        width: 44px !important;
        height: 32px !important;
        display: block !important;
        overflow: visible !important;
        pointer-events: none;
    }

    #vip-lottie svg {
        width: 46px !important;
        height: 46px !important;
        display: block !important;
        overflow: visible !important;
        transform: translate(-1px, -6px) !important;
    }

    .vip-header-label {
        padding: 0 !important;
        height: 10px !important;
        line-height: 10px !important;
        margin: -4px 0 0 0 !important;
        color: #d9b75e !important;
        font-weight: 900 !important;
        font-size: 10px !important;
        font-family: 'Poppins', sans-serif !important;
        text-decoration: none !important;
        text-align: center !important;
        letter-spacing: 0.2px !important;
        display: block !important;
    }

    .vip-header-label:hover {
        color: #9aa4b0 !important;
        text-decoration: none !important;
    }

    @media (max-width: 480px) {
        .spin-wheel-gif { width: 36px; height: 36px; }
        .vip-header-wrap {
            width: 42px !important;
            height: 38px !important;
            flex-basis: 42px !important;
            margin-left: 3px !important;
            margin-right: 4px !important;
            margin-top: 0 !important;
        }
        .lottie-vip-animation-container,
        #vip-lottie {
            width: 40px !important;
            height: 29px !important;
        }
        #vip-lottie svg {
            width: 42px !important;
            height: 42px !important;
            transform: translate(-1px, -6px) !important;
        }
        .vip-header-label {
            font-size: 9px !important;
            margin-top: -4px !important;
        }
    }


    


/* ── includes/header.php (satır içi <style>, global) ── */
.sb-tab{display:flex!important;align-items:center;justify-content:flex-start!important}


/* ── includes/header.php (satır içi <style>, global) ── */
/* ================================================================
   SMS / E-POSTA DOĞRULAMA MODALI — v2 (site tasarımıyla birleştirildi)
   ----------------------------------------------------------------
   Eskiden bu modal kendi başına lacivert/petrol tonlarında bir
   degrade (#0d1a22 → #132330) ve mavimsi gri metin renkleri
   (#e2ecf4 / #4a6478 / #5a7a8a) kullanıyordu — sitenin geri kalanının
   temel yüzey rengi (html,body arka planı: #06070a, bkz. bu dosyada
   "html,body{background:#06070a}") ve giriş/kayıt modallarının
   (.auth-modal / .am-* — bkz. "EYlgAACTP9gy.css" ve "auth-modals.css"
   blokları) nötr antrasit + sıcak altın aksan paletiyle hiç
   örtüşmüyordu. Aşağıda AYNI renk/token seti kullanılıyor:
     - Yüzey: var(--surface-elevated) / var(--surface) (nötr antrasit)
     - Başlık/metin: var(--text-primary), #8fa8b8 (am-head p ile aynı)
     - Vurgu: var(--primary) / --primary-rgb (siteye özel altın rengi)
     - Buton: .auth-modal .am-btn ile BİREBİR aynı metalik degrade
   ================================================================ */

    /* Not: #smsVerifyOverlay'in arka plan/blur değerleri includes/header.php içindeki
       inline style="..." özniteliğinde tanımlı (aynı bu değerlerle güncellendi) — burada
       AYRICA tanımlamıyoruz, tek kaynak karışıklığını önlemek için. */
    #smsVerifyBox { background:linear-gradient(145deg, var(--surface-elevated, #06070a) 0%, var(--surface, #0d0f13) 100%); border:1px solid rgba(255,255,255,0.08); border-radius:var(--z-radius-modal, 18px); padding:40px 36px 32px; max-width:420px; width:92%; box-shadow:0 32px 80px rgba(0,0,0,0.85),0 0 0 1px rgba(255,255,255,0.04); position:relative; }
    #smsVerifyBox .sv-icon-wrap { width:64px;height:64px;background:rgba(var(--primary-rgb, 172, 137, 94),0.1);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px; }
    #smsVerifyBox h3 { color:var(--text-primary, #e7e9ec);font-size:19px;font-weight:700;margin:0 0 8px;letter-spacing:-0.2px;text-transform:uppercase;letter-spacing:0.04em; }
    #smsVerifyBox .sv-sub { color:#8fa8b8;font-size:13px;line-height:1.5;margin:0; }
    #smsVerifyBox .sv-desc { color:#8fa8b8;font-size:12.5px;text-align:center;margin:0 0 16px;line-height:1.5; }
    #smsVerifyBox .sv-desc strong { color:var(--text-primary, #e7e9ec);font-weight:600; }
    #smsVerifyBox .sv-otp-wrap { display:flex;gap:8px;justify-content:center;margin:20px 0 10px; }
    #smsVerifyBox .sv-otp { width:42px;height:52px;text-align:center;font-size:22px;font-weight:700;border:1.5px solid rgba(var(--primary-rgb, 172, 137, 94),0.3);background:rgba(var(--primary-rgb, 172, 137, 94),0.07);color:var(--text-primary, #e7e9ec);border-radius:10px;outline:none;transition:border-color .15s,background .15s;font-family:inherit; }
    #smsVerifyBox .sv-otp:focus { border-color:rgba(var(--primary-rgb, 172, 137, 94),0.7);background:rgba(var(--primary-rgb, 172, 137, 94),0.1); }
    #smsVerifyBox .sv-otp.err { border-color:rgba(239,100,100,0.6); }
    #smsVerifyBox .sv-bottom-row { display:flex;align-items:center;justify-content:flex-end;margin-top:4px;gap:16px; }
    #smsVerifyBox .sv-resend-btn { background:none;border:none;color:#8fa8b8;font-size:12.5px;cursor:pointer;font-family:inherit;padding:0;transition:color 0.15s; }
    #smsVerifyBox .sv-resend-btn:not(:disabled):hover { color:var(--primary, #ac895e); }
    #smsVerifyBox .sv-resend-btn:disabled { opacity:0.45;cursor:not-allowed; }
    #smsVerifyBox .sv-change-link { background:none;border:none;color:#8fa8b8;font-size:12.5px;cursor:pointer;font-family:inherit;padding:0;transition:color 0.15s;text-decoration:underline;text-underline-offset:2px; }
    #smsVerifyBox .sv-change-link:hover { color:var(--text-primary, #e7e9ec); }
    #smsVerifyAlert { display:none;padding:11px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;line-height:1.4; }
    #smsVerifyStatus { font-size:12.5px;text-align:center;min-height:18px;margin-bottom:6px; }
    #smsChangePhoneBlock { display:none;margin-top:18px;border-top:1px solid rgba(255,255,255,0.07);padding-top:16px; }
    #smsChangePhoneBlock .sv-cp-label { font-size:11px;color:#8fa8b8;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px; }
    #smsChangePhoneBlock .sv-cp-btn { width:100%;height:42px;background:linear-gradient(180deg, var(--button-primary-hover, #D5B67D) 0%, var(--button-primary-bg, #C6975A) 55%, var(--primary-active, #B8934F) 100%);border:none;border-radius:6px;color:var(--button-primary-text, #0A0B0D);font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;margin-top:10px;transition:box-shadow 0.18s,filter 0.18s;letter-spacing:0.1px;box-shadow:0 2px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22); }
    #smsChangePhoneBlock .sv-cp-btn:hover { filter:brightness(1.05);box-shadow:0 4px 14px rgba(var(--primary-rgb, 172, 137, 94),0.35), inset 0 1px 0 rgba(255,255,255,0.28); }
    #smsChangePhoneBlock .sv-cp-btn:disabled { opacity:0.45;cursor:not-allowed;filter:none;box-shadow:none; }
    #smsChangePhoneBlock .sv-cp-cancel { width:100%;background:none;border:none;color:#5b626c;font-size:12px;cursor:pointer;font-family:inherit;margin-top:6px;padding:4px 0;transition:color 0.15s; }
    #smsChangePhoneBlock .sv-cp-cancel:hover { color:#9aa1ab; }



/* ── includes/header.php (satır içi <style>, global) ── */
/* 2FA (giriş anı) doğrulama overlay'i — SMS/E-posta modalıyla AYNI
   nötr antrasit + altın aksan paleti (bkz. yukarıdaki not). */

#tfaVerifyOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:99999; align-items:center; justify-content:center; }
#tfaVerifyBox { background:linear-gradient(145deg, var(--surface-elevated, #06070a) 0%, var(--surface, #0d0f13) 100%); border:1px solid rgba(255,255,255,0.08); border-radius:var(--z-radius-modal, 18px); padding:40px 36px 32px; max-width:400px; width:92%; box-shadow:0 32px 80px rgba(0,0,0,0.85),0 0 0 1px rgba(255,255,255,0.04); position:relative; }
#tfaVerifyBox .tfa-icon-wrap { width:64px;height:64px;background:rgba(var(--primary-rgb, 172, 137, 94),0.1);border:1px solid rgba(var(--primary-rgb, 172, 137, 94),0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px; }
#tfaVerifyBox h3 { color:var(--text-primary, #e7e9ec);font-size:19px;font-weight:700;margin:0 0 8px;text-transform:uppercase;letter-spacing:0.04em; }
#tfaVerifyBox .tfa-sub { color:#8fa8b8;font-size:13px;line-height:1.5;margin:0;text-align:center; }
#tfaVerifyAlert { display:none;padding:11px 14px;border-radius:8px;font-size:13px;margin:16px 0 0;line-height:1.4; }
#tfaVerifyBox .tfa-otp-wrap { display:flex;gap:8px;justify-content:center;margin:20px 0 10px; }
#tfaVerifyBox .tfa-otp-box { width:42px;height:52px;text-align:center;font-size:22px;font-weight:700;border:1.5px solid rgba(var(--primary-rgb, 172, 137, 94),0.3);background:rgba(var(--primary-rgb, 172, 137, 94),0.07);color:var(--text-primary, #e7e9ec);border-radius:10px;outline:none;transition:border-color .15s,background .15s;font-family:inherit; }
#tfaVerifyBox .tfa-otp-box:focus { border-color:rgba(var(--primary-rgb, 172, 137, 94),0.7);background:rgba(var(--primary-rgb, 172, 137, 94),0.1); }
#tfaVerifyBox .tfa-otp-box.err { border-color:rgba(239,100,100,0.6); }
#tfaVerifyStatus { font-size:12.5px;text-align:center;min-height:18px;margin:2px 0 6px; color:#8fa8b8; }
#tfaVerifyBox .tfa-link-row { display:flex;align-items:center;justify-content:center;margin-top:6px; }
#tfaVerifyBox .tfa-link-btn { background:none;border:none;color:#8fa8b8;font-size:12.5px;cursor:pointer;font-family:inherit;padding:0;transition:color 0.15s;text-decoration:underline;text-underline-offset:2px; }
#tfaVerifyBox .tfa-link-btn:hover { color:var(--text-primary, #e7e9ec); }
#tfaVerifyBox .tfa-backup-input { width:100%;text-align:center;font-size:16px;letter-spacing:2px;text-transform:uppercase;padding:13px;border-radius:10px;border:1.5px solid rgba(var(--primary-rgb, 172, 137, 94),0.3);background:rgba(var(--primary-rgb, 172, 137, 94),0.07);color:var(--text-primary, #e7e9ec);outline:none;font-family:inherit;margin:20px 0 14px; }
#tfaVerifyBox .tfa-backup-input:focus { border-color:rgba(var(--primary-rgb, 172, 137, 94),0.7); }
#tfaVerifyBox .tfa-submit-btn { width:100%;height:44px;background:linear-gradient(180deg, var(--button-primary-hover, #D5B67D) 0%, var(--button-primary-bg, #C6975A) 55%, var(--primary-active, #B8934F) 100%);border:none;border-radius:8px;color:var(--button-primary-text, #0A0B0D);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:box-shadow 0.18s,filter 0.18s;box-shadow:0 2px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22); }
#tfaVerifyBox .tfa-submit-btn:hover { filter:brightness(1.05);box-shadow:0 4px 14px rgba(var(--primary-rgb, 172, 137, 94),0.35), inset 0 1px 0 rgba(255,255,255,0.28); }
#tfaVerifyBox .tfa-submit-btn:disabled { opacity:0.5;cursor:not-allowed;filter:none;box-shadow:none; }



/* ── includes/header.php (satır içi <style>, global) ── */

#beniAraBox {
    background: linear-gradient(145deg, var(--surface, #0d0f13), var(--surface-elevated, #06070a));
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.18);
    border-radius: 20px;
    padding: 36px 32px 28px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 40px 100px rgba(0,0,0,0.85), 0 0 0 1px rgba(var(--primary-rgb, 172, 137, 94),0.08);
    position: relative;
    animation: baSlideIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes baSlideIn {
    from { opacity:0; transform:translateY(24px) scale(0.96); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
#beniAraBox .ba-close {
    position: absolute;
    top: 8px; right: 8px;
    background: none;
    border: none;
    border-radius: 0;
    width: auto; height: auto;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #c7ccd3;
    font-size: 22px;
    padding: 6px;
    transition: color 0.16s ease, transform 0.16s ease;
}
#beniAraBox .ba-close:hover { background: none; color: #C6A365; transform: rotate(90deg); }
#beniAraBox .ba-icon {
    width: 58px; height: 58px;
    background: rgba(var(--primary-rgb, 172, 137, 94),0.10);
    border: 1px solid rgba(var(--primary-rgb, 172, 137, 94),0.22);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
#beniAraBox .ba-icon i { font-size: 22px; color: var(--primary, #ac895e); }
#beniAraBox h3 {
    color: var(--text-primary, #e7e9ec);
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 6px;
    text-align: center;
    letter-spacing: -0.3px;
}
#beniAraBox .ba-sub {
    color: #5b626c;
    font-size: 13px;
    text-align: center;
    margin: 0 0 22px;
    line-height: 1.5;
}
#beniAraBox .ba-field { margin-bottom: 12px; }
#beniAraBox .ba-label {
    display: block;
    font-size: 11.5px;
    color: #9aa1ab;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#beniAraBox .ba-input,
#beniAraBox .ba-select {
    width: 100%;
    height: 42px;
    background: var(--surface, #0d0f13);
    border: 1.5px solid rgba(255,255,255,0.14);
    border-radius: 9px;
    color: var(--text-primary, #e7e9ec);
    font-size: 13.5px;
    font-family: inherit;
    padding: 0 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
/* iOS: font-size < 16px → zoom → kasma */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px) {
    #beniAraBox .ba-input,
    #beniAraBox .ba-select,
    #beniAraBox .ba-phone-input {
        font-size: 16px;
    }
}
#beniAraBox .ba-select {
    background-color: var(--surface, #0d0f13);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e8a9a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
    cursor: pointer;
    color-scheme: dark;
}
#beniAraBox .ba-select option,
#beniAraBox .ba-select optgroup {
    background-color: var(--surface, #0d0f13) !important;
    background: var(--surface, #0d0f13) !important;
    color: var(--text-primary, #e7e9ec) !important;
    font-size: 13.5px;
}
#beniAraBox .ba-input:focus,
#beniAraBox .ba-select:focus {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.42);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.09);
}
#beniAraBox .ba-input::placeholder { color: rgba(255,255,255,0.22); }
#beniAraBox .ba-input.ba-err,
#beniAraBox .ba-select.ba-err { border-color: rgba(255,80,80,0.55) !important; }
#beniAraBox .ba-submit {
    width: 100%;
    height: 44px;
    background: var(--primary, #ac895e);
    border: none;
    border-radius: 10px;
    color: #101114;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-top: 18px;
    transition: background 0.15s, transform 0.15s;
    letter-spacing: 0.1px;
}
#beniAraBox .ba-submit:hover { background: #c9a97d; }
#beniAraBox .ba-submit:active { transform: scale(0.98); }
#beniAraBox .ba-submit:disabled { opacity: 0.5; cursor: not-allowed; }
#beniAraBox #baAlert {
    display: none;
    padding: 10px 13px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.4;
}
#beniAraBox .ba-phone-row {
    display: flex;
    align-items: center;
    height: 42px;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.14);
    border-radius: 9px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#beniAraBox .ba-phone-row:focus-within {
    border-color: rgba(var(--primary-rgb, 172, 137, 94),0.42);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 172, 137, 94),0.09);
}
#beniAraBox .ba-phone-prefix {
    padding: 0 10px;
    color: #9aa1ab;
    font-size: 13px;
    font-weight: 600;
    border-right: 1px solid rgba(255,255,255,0.14);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
}
#beniAraBox .ba-phone-input {
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    color: var(--text-primary, #e7e9ec);
    font-size: 13.5px;
    font-family: inherit;
    padding: 0 12px;
    outline: none;
    min-width: 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px) {
    #beniAraBox .ba-phone-input { font-size: 16px; }
}
#beniAraBox .ba-phone-input::placeholder { color: rgba(255,255,255,0.22); }
#beniAraBox .ba-phone-row.ba-err { border-color: rgba(255,80,80,0.55) !important; }
@media (max-width: 480px) {
    #beniAraBox { padding: 28px 18px 22px; border-radius: 16px; }
    #beniAraBox h3 { font-size: 17px; }
}
/* Giriş gerektiren uyarı */
#beniAraLoginWarn {
    text-align: center;
    padding: 10px 0;
}
#beniAraLoginWarn .ba-warn-icon {
    font-size: 36px;
    color: var(--primary, #ac895e);
    margin-bottom: 12px;
}
#beniAraLoginWarn p {
    color: #9aa1ab;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 18px;
}
#beniAraLoginWarn .ba-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 22px;
    background: var(--primary, #ac895e);
    border: none;
    border-radius: 9px;
    color: #101114;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
#beniAraLoginWarn .ba-login-btn:hover { background: #c9a97d; }

/* One card contract across home carousels, slots, live casino and crash. */
:root { --cabrio-game-card-width: 165.4px; }
body[data-page="index.php"] .sk-game-card {
    width: var(--cabrio-game-card-width);
    aspect-ratio: 3 / 4;
}
body[data-page="slots.php"] .sp-grid,
body[data-page="live-casino.php"] .lcp-grid {
    grid-template-columns: repeat(auto-fill, var(--cabrio-game-card-width));
}
body[data-page="slots.php"] .sp-card,
body[data-page="live-casino.php"] .lcp-card {
    width: var(--cabrio-game-card-width);
    aspect-ratio: 3 / 4;
}
@media (max-width: 768px) {
    :root { --cabrio-game-card-width: min(165.4px, calc((100vw - 56px) / 3)); }
}