@media (max-width: 768px) {
    .row.home-page {
        flex-wrap: nowrap !important;
        height: 50px !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        overflow: hidden !important;
        
    }
}

/* Modern UI - ÖNCELIK CSS */
/* Bu dosya dark_header.php'den taşınan CSS'leri içerir */
/* Higher Specificity ile lucybet.css'i override eder */

/* ÖNEMLI: Bu CSS'ler dark_header.php'den taşındığında aşağıdaki gibi kullanın */
/* 
   ÖRNEK KULLANIM:
   1. Orijinal: .modern-frame { ... }
   2. Yeni: html body .modern-frame { ... } --> Higher specificity
   3. veya: .modern-frame { ... !important } --> Force override
*/

/* Modern UI */
:root{
--bg:#0c0f11;
--panel:#171a1e;
--panel-2:#212428;
--divider:#2f353b;
--muted:#9aa3ab;
--text:#e8edf1;
--accent:#22d3ce;
--accent2:#16a085;
--radius:6px;
--gap:1px;
}

.personal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 18, 20, 0.9);
    backdrop-filter: none;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
    padding: 12px;
    overflow: hidden;
}


 /* Lazy Loading Styles - Optimized */
img.lazy {
     opacity: 0.3;  /* Hafif görünür - tamamen gizlemez */
    transition: opacity 0.4s ease-out;
    background: linear-gradient(90deg, #1a1a2e 25%, #2a2a3e 50%, #1a1a2e 75%);
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
    filter: blur(5px);  /* Blur efekti - progressive look */
    }
     
     img.lazy-loaded {
         opacity: 1;
         background: none;
         animation: none;
         filter: none;
         transform: scale(1);
     }
     
     img.lazy-loading {
         opacity: 0.7;
         filter: blur(2px);
         transform: scale(1.02);
     }
     
     @keyframes shimmer {
         0% { background-position: 200% 0; }
         100% { background-position: -200% 0; }
     }
     
     /* Content görselleri için optimize */
     .image-item img.lazy {
         min-height: 180px;
         background-color: #1a1a2e;
         object-fit: cover;
     }

.modern-frame{
    background:rgba(0,0,0,.85);
    border:none;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.6);
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    color: var(--text);
    display: flex;
    flex-direction: column;
}



.modern-close{margin-left:auto; width:28px; height:28px; display:grid; place-items:center; color:#9aa3ab; border-radius:8px; cursor:pointer}
.modern-close:hover{background:#1a1f24; color:#fff}

.modern-close-fixed{
    position: absolute;
    top: 26px;
    right: 20px;
    width: 16px; 
    height: 16px; 
    background: none; 
    border: none;
    color: var(--muted); 
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 0;
}
.modern-close-fixed:hover{
    color: #fff;
    transform: scale(1.2);
}

.modern-app{
    display:grid;
    grid-template-columns: 320px 1fr;
    flex: 1;
    min-height: 0;
}

.modern-aside{
    background:var(--panel);
    border-right:1px solid var(--divider);
    padding:10px;
    display:flex; flex-direction:column; overflow:auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

.modern-aside::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.profile-mini{
    display:flex; align-items:center; color:#000000; opacity:.95
}

.modern-avatar{
    width:30px; height:30px; border-radius:50%;
    background: #686E76; display:grid; place-items:center;
}

/* kartlar hayalet ikon için konumlanabilsin */
.modern-card { 
    position: relative; 
    border-radius: 6px;
    border:1px solid var(--divider);
    padding:14px; box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}

/* Hedefteki mavi degrade (ana bakiye) */
.modern-card.main-balance{
    /* üst-sol daha açık, alt-sağ daha koyu */
    background: linear-gradient(135deg, #1b9eb4 0%, #1587A2 100%);
}

/* Hedefteki yeşil degrade (bonus) */
.modern-card.modern-bonus{
    background: linear-gradient(135deg, #00b852 0%, #1C9A52 100%);
}

/* Sağ üst hayalet ikon */
.modern-card .ghost-icon{
    position:absolute;
    top:-5px; right:-15px;
    width: 100px;
    height: 100px;
    opacity:.12;
    filter: grayscale(1);
    pointer-events:none;
    font-size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
}

/* Kart içi ghost (şeffaf) buton stili – iki buton da aynı görünsün */
.modern-card .modern-actions .modern-btn{
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color:#fff !important;
    box-shadow:none !important;
}
.modern-card .modern-actions .modern-btn:hover{
    filter:brightness(1.08);
}

/* .modern-primary siyaha dönüyor diye aynı ghost stile zorla */
.modern-card .modern-actions .modern-btn.modern-primary{
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color:#fff !important;
}

/* Bonus kartta alt satır (Bonus Bakiyesi) öncesi ince çizgi efekti */
.modern-card.modern-bonus .modern-sub-muted{
    border-top: 1px solid rgba(255,255,255,.20);
    margin-top: 10px;
    padding-top: 8px;
    color: rgba(255,255,255,0.9) !important;
}

/* Başlık ve rakamlar hedefe daha yakın dursun */
.modern-label{ 
    color:#E9F5F8; 
    font-weight:500; 
    font-size: 11px;
}
.modern-value{ 
    font-weight:600;
    font-size:18px; 
    margin:8px 0 2px;
    display: flex; align-items: center; justify-content: space-between;
}

.balance-eye-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
    top: -10px;
    transition: all 0.3s ease;
}

.balance-eye-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}

.modern-sub-muted{color:var(--muted); font-weight:400; font-size: 10px;}

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

/* Modern actions için link desteği */
.modern-actions a.modern-btn {
    text-decoration: none;
    text-align: center;
}

.modern-btn{
    flex:1 1 0;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:9px 10px; border-radius:3px; border:1px solid var(--divider);
    background:#1d2328; color:#eaf3f6; cursor:pointer;
    transition:.15s; font-size: 14px;
}

.modern-btn i{font-size: 14px;}

.modern-btn.modern-primary{background:linear-gradient(90deg, #1E3A8A, #3FA9F5); color:#061012; border:none}
.modern-btn:hover{filter:brightness(1.05)}

    .modern-section{
    background: #171a1e; border:1px solid var(--divider); border-radius:6px;
    padding:12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    margin-bottom: 10px;
    }

.modern-section:first-of-type {
margin-top: 50px;
}

.modern-section.menu-opened {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
}

.modern-left{display:flex; align-items:center; gap:10px; font-weight:200; font-size: 14.5px;}

.modern-left i {
font-size: 14.5px;
}

.modern-chev{
color:var(--muted);
font-size: 10px;
transition: all 0.3s ease;
opacity: 0.5;
}

.modern-subnav{
background:#1c2025; border:1px dashed #2e353c; border-radius:6px;
padding:0; display:flex; flex-direction:column; gap:0; margin-top:-8px;
max-height: 0; overflow: hidden;
border-width: 0;
}

.modern-subnav.open{
max-height: 300px; 
overflow: visible;
border: 1px solid var(--divider);
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.modern-subitem{
padding:12px 20px 12px 20px; 
border-radius:0; 
background:transparent; 
color:#dfe6ea; 
opacity:.9; 
cursor: pointer; 
font-size: 12px; 
position: relative;
transition: all 0.3s ease;
}

.modern-subitem:hover{
background:rgba(255,255,255,0.05);
color:#ffffff;
}

.modern-subitem.active{
background:rgba(34, 211, 206, 0.1); 
color:#22d3ce; 
opacity:1; 
}

.modern-subitem::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #3a4146;
transition: background 0.3s ease;
}

.modern-subitem.active::after {
background:rgb(0, 169, 163);
}

.modern-promo-section{
    background:var(--panel-2); border:1px solid var(--divider); border-radius:6px;
    padding:12px; margin-bottom:10px;
}

.modern-promo-input-group{
    display:flex; gap:8px; margin-top:8px;
}

.modern-promo-input{
    flex:1; font-size:12px; height:36px;
}

.modern-btn-promo{
    min-width:70px; font-size:10px; height:36px;
}

.modern-main{overflow:auto; background: var(--panel); position: relative;}

.modern-main-pad{padding:18px 20px}

.modern-headline{
    display:flex; align-items:center; gap:14px; padding:10px 0 16px;
    border-bottom:1px solid var(--divider); margin-bottom:16px;
}

.modern-headline h2{
    margin:0; font-size:14px; text-transform:uppercase; font-weight:400; color:#e6ebee
}

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

.modern-field{
    padding:4px;
}

.modern-field-label{
    font-size:11px; 
    color:#aeb6bd; 
    margin-bottom:4px; 
    text-transform:none;
    display: block;
}

.modern-input:readonly, .modern-select:disabled, .modern-textarea:readonly {
    opacity: 0.6;
    cursor: not-allowed;
}

.modern-input, .modern-select, .modern-textarea{
    width:100%; background:var(--panel-2); color:#f2f6f9;
    border:1px solid #3a3f45; border-radius:4px; padding:12px 12px; outline:none;
    box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}

.modern-select{
    appearance:none; 
    background-image:linear-gradient(45deg, transparent 50%, #9aa3ab 50%), linear-gradient(135deg, #9aa3ab 50%, transparent 50%);
    background-position:calc(100% - 16px) 50%, calc(100% - 10px) 50%; 
    background-size:6px 6px, 6px 6px; 
    background-repeat:no-repeat
}

.modern-textarea{min-height:92px; resize:vertical}

.modern-actions-row{display:flex; gap:10px; justify-content:flex-end; padding-top:6px}

.modern-btn-ghost{background:transparent; border:1px solid var(--divider); color:#dfe6ea}
.modern-btn-save{background:linear-gradient(180deg,#23d3cf,#13b3ae); color:#061012; border:none}

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

@media (max-width: 1100px){
    .modern-app{grid-template-columns: 280px 1fr}
}

@media (max-width: 900px){
    .modern-app{grid-template-columns: 1fr}
    .modern-aside{position:sticky; top:0; z-index:5}
    .modern-grid{grid-template-columns: 1fr}
}

@media (max-width: 768px) {
    .modern-frame {
        width: 95%;
        max-height: 95vh;
    }
    
    .modern-app {
        grid-template-columns: 1fr;
    }
    
    .modern-aside {
        padding: 12px;
    }
    
    .modern-main-pad {
        padding: 15px;
    }
    
    .modern-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.simple-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.simple-modal-content {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    width: 600px;
    max-width: 90%;
    color: #fff;
}

.simple-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.simple-header h2 {
    margin: 0;
    color: #fff;
    font-size: 18px;
}

.simple-header button {
    background: none;
    border: none;
    color: #999;
    font-size: 24px;
    cursor: pointer;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.method-card {
    background: #0ea5e9;
    border-radius: 8px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.method-card:hover {
    background: #0284c7 !important;
    transform: scale(1.05);
}

.method-icon {
    font-size: 20px;
    margin-bottom: 5px;
}

.method-text div:first-child {
    font-size: 10px;
    opacity: 0.8;
}

.method-text div:last-child {
    font-size: 11px;
    font-weight: bold;
}

.payment-info {
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    font-size: 12px;
}

.payment-info div {
    text-align: center;
}

.payment-info span {
    font-weight: bold;
    color: #0ea5e9;
}

#modalAmount {
    width: 100%;
    padding: 12px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #2a2a2a;
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
}

.pay-btn {
    width: 100%;
    background: #0ea5e9;
    border: none;
    border-radius: 8px;
    padding: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;  
    cursor: pointer;
    transition: background 0.2s;
}

.pay-btn:hover {
    background: #0284c7;
}

@media (max-width: 768px) {
    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .payment-info {
        grid-template-columns: 1fr;
        text-align: left;
    }
    
    .simple-modal-content {
        width: 95%;
        padding: 15px;
    }
}

/* KUTU GÖRÜNÜMLÜ MAVİ KARTLARI -> küçük koyu butonlar */
.pay-row{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap:15px;
  padding: 0; margin-bottom: 20px; margin: 0;
}
.pay-method{
  min-width: 120px;
  height: 70px;
  padding: 8px;
  border-radius: 12px;
  background: #101417;                   /* koyu zemin */
  border: 1px solid #1f2a2f;             /* koyu kenar */
  color:#bfe9ee; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  cursor:pointer; user-select:none;
}
.pay-method i{font-size:16px; opacity:.9}
.pay-method img{width:84px; height:84px; opacity:1; object-fit:contain}
.pay-method:hover{
  background: #1a1f24; 
  border-color: #2a3137;
}
.pay-method.active{
  background: linear-gradient(180deg,#495057,#383e45); /* koyu gri gradyan */
  border-color: #4e555c;
  color:#f8f9fa;
}
.pay-method.active:hover{
  background: linear-gradient(180deg,#5a6268,#424a52);
  border-color: #5c6469;
}

/* "Para Yatırma Yöntemleri" çerçevesini kaldır, header ince çizgi kalsın */
.modern-headline + .pay-wrap{ margin-top: 12px; }
.pay-wrap{ gap:14px }

/* Bilgi çubuğu: tek satır koyu bar */
.pay-info{
  display:grid; grid-template-columns: repeat(5,1fr);
  gap: 14px;
  background:#161b1f;
  border:1px solid #262e35;
  border-radius: 10px;
  padding: 12px;
  color:#dfe6ea;
  margin-top:10px;
}
.pay-info-title{font-size:11px; color:#9aa3ab}
.pay-info-val{font-weight:500; margin-top:3px}
.pay-info a, .pay-info .pay-info-val a{ color:#adb5bd; text-decoration:none; border-bottom:1px dotted #6c757d }

/* Tutar girişi ve buton – ekran görüntüsündeki gibi */
.pay-amount{
  width:100%; height:52px;
  background:#2c2f33; border:1px solid #3a4046;
  border-radius:5px; margin-top:10px; color:#eaf3f6; padding:0 16px;
}
.pay-amount::placeholder{ color:#9aa3ab }

.pay-submit{
  width:100%; height:48px; margin-top:10px;
  border:none; border-radius:10px; cursor:pointer;
  font-weight:900; letter-spacing:.3px;
  background: linear-gradient(90deg,#495057,#343a40);
  color:#fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}
.pay-submit:hover{
  background: linear-gradient(90deg,#5a6268,#3d4349);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.pay-submit:disabled{opacity:.5; cursor:not-allowed}

/* Modern mesaj kutusu */
.payment-message{
  width:100%; margin:10px 0; padding:12px 16px;
  border-radius:12px; font-size:13px; font-weight:400;
  display:flex; align-items:center; gap:10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.1);
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.payment-message.error{
  background: linear-gradient(135deg, rgba(220,53,69,0.1) 0%, rgba(156,39,54,0.1) 100%);
  color: #ff6b6b; border-color: rgba(220,53,69,0.2);
}
.payment-message.success{
  background: linear-gradient(135deg, rgba(40,167,69,0.1) 0%, rgba(21,87,36,0.1) 100%);
  color: #51cf66; border-color: rgba(40,167,69,0.2);
}
.payment-message.info{
  background: linear-gradient(135deg, rgba(23,162,184,0.1) 0%, rgba(28,73,102,0.1) 100%);
  color: #74c0fc; border-color: rgba(23,162,184,0.2);
}
.payment-message::before {
  content: '';
  width: 4px; height: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0; top: 0;
}
.payment-message.error::before { background: #ff6b6b; }
.payment-message.success::before { background: #51cf66; }
.payment-message.info::before { background: #74c0fc; }
.payment-message { position: relative; }

/* Şifre Değiştir Form Stilleri */
.password-change-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    margin-top: 20px;
}

.password-submit-section {
    margin-top: 20px;
}

.password-submit-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg,rgb(35, 39, 39) 0%,rgb(42, 47, 47) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.password-submit-btn:hover {
    background: linear-gradient(135deg,rgb(156, 36, 36) 0%,rgb(106, 55, 55) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 211, 206, 0.3);
}

.password-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Şifre Başarı Modalı Stilleri */
.password-success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 40px 20px;
    color: var(--text);
}

.success-icon {
    font-size: 80px;
    color: #28a745;
    margin-bottom: 20px;
    animation: successPulse 1.5s ease-in-out;
}

.password-success-container h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #28a745;
}

.password-success-container p {
    font-size: 16px;
    color: var(--muted);
    margin: 0 0 30px 0;
    max-width: 400px;
    line-height: 1.5;
}

.countdown-container {
    width: 100%;
    max-width: 300px;
}

.countdown-text {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 15px;
    font-weight: 600;
}

.countdown-text span {
    color: #28a745;
    font-weight: 800;
    font-size: 16px;
}

.countdown-bar {
    width: 100%;
    height: 6px;
    background: var(--panel-2);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--divider);
}

.countdown-progress {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    border-radius: 3px;
    transition: width 1s linear;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
}

@keyframes successPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Para Çekme Stilleri */
.withdraw-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.withdraw-method {
    min-width: 100px;
    height: 100px;
    padding: 8px;
    border-radius: 12px;
    background: #101417;
    border: 1px solid #1f2a2f;
    color: #bfe9ee;
    font-weight: 800;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.withdraw-method img {
    width: 84px;
    height: 84px;
    opacity: 1;
    object-fit: contain;
}

.withdraw-method:hover {
    background: #1a1f24;
    border-color: #2a3137;
}

.withdraw-method.active {
    background: linear-gradient(180deg, #495057, #383e45);
    border-color: #4e555c;
    color: #f8f9fa;
}

.withdraw-method.active:hover {
    background: linear-gradient(180deg, #5a6268, #424a52);
    border-color: #5c6469;
}

.withdraw-form-section {
    margin-top: 20px;
}

.withdraw-form-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.withdraw-input-group {
    margin-bottom: 16px;
}



.withdraw-input {
    width: 100%;
    height: 52px;
    background: #2c2f33;
    border: 1px solid #3a4046;
    border-radius: 5px;
    color: #eaf3f6;
    padding: 0 16px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.withdraw-input::placeholder {
    color: #9aa3ab;
}

.withdraw-input:focus {
    border-color: #8b1016;
    box-shadow: 0 0 0 3px rgba(139, 16, 22, 0.15);
    outline: none;
}

.withdraw-select {
    width: 100%;
    height: 52px;
    background: #2c2f33;
    border: 1px solid #3a4046;
    border-radius: 10px;
    color: #eaf3f6;
    padding: 0 16px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #9aa3ab 50%), linear-gradient(135deg, #9aa3ab 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.withdraw-select option {
    background: #2c2f33;
    color: #eaf3f6;
}

.withdraw-select:focus {
    border-color: #8b1016;
    box-shadow: 0 0 0 3px rgba(139, 16, 22, 0.15);
    outline: none;
}

.withdraw-submit {
    width: 100%;
    height: 48px;
    margin-top: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: 0.3px;
    background: linear-gradient(90deg, #495057, #343a40);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.withdraw-submit:hover {
    background: linear-gradient(90deg, #5a6268, #3d4349);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.withdraw-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.withdraw-info {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    background: #161b1f;
    border: 1px solid #262e35;
    border-radius: 10px;
    padding: 12px;
    color: #dfe6ea;
    margin-bottom: 15px;
}

.withdraw-info-title {
    font-size: 11px;
    color: #9aa3ab;
}

.withdraw-info-val {
    font-weight: 500;
    margin-top: 3px;
}

@media (max-width: 768px) {
    .withdraw-methods {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .withdraw-info {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

/* Görsel ile 1-1 Aynı Tablo Tasarımı */
.history-content {
    min-height: 400px;
}

.pro-table-container {
    background: #1a1a1a;
    border-radius: 0;
    overflow: hidden;
    margin-top: 20px;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.pro-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pro-table thead {
    background:rgb(8, 16, 28);
}

.pro-table th {
    padding: 16px 20px;
    text-align: left;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    border: none;
    letter-spacing: 0.5px;
}

.pro-table tbody tr {
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    transition: background-color 0.2s ease;
}

.pro-table tbody tr:hover {
    background: #222222;
}

.pro-table td {
    padding: 16px 20px;
    color: #ffffff;
    font-size: 14px;
    vertical-align: top;
    border: none;
}

/* Tarih ve ID Sütunu - Görseldeki Gibi */
.datetime {
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.id-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
}

.id-label {
    color: #888888;
    font-weight: 500;
    min-width: 80px;
}

.id-value {
    color: #cccccc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    transition: color 0.2s ease;
}

.id-value:hover {
    color: #ffffff;
}

.copy-icon {
    color: #666666;
    cursor: pointer;
    font-size: 12px;
    transition: color 0.2s ease;
    margin-left: 4px;
}

.copy-icon:hover {
    color: #ffffff;
}

/* İşlem Türü - Beyaz Renk */
.transaction-type {
    font-size: 14px;
    color: #ffffff;
}

/* Tutar - Beyaz Renk ve Bold */
.amount {
    font-size: 14px;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Durum Yazıları - Zarif ve İnce */
.status-badge {
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
    text-transform: uppercase;
    display: inline-block;
}

.status-badge.success {
    color: #2ECC71;
}

.status-badge.pending {
    color: #FFB300;
}

.status-badge.processing {
    color: #3498DB;
}

.status-badge.paid {
    color: #2ECC71;
}

.status-badge.rejected {
    color: #E74C3C;
}

/* Toast Mesaj */
.copy-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #333;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    border: 1px solid #555;
}

.copy-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Kupon Filtreleri - Zarif Tasarım */
.coupon-filters {
    display: flex;
    gap: 8px;
    margin: 24px 0;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.coupon-filter-btn {
    padding: 8px 16px;
    background: transparent;
    color: #cccccc;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.coupon-filter-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.2);
    color: #ffffff;
}

.coupon-filter-btn.active {
    background: rgb(8, 16, 28);
    border-color: rgb(8, 16, 28);
    color: #ffffff;
    font-weight: 600;
}

/* Kupon Tablosu Özel Stilleri - Zarif Tasarım */
.coupon-id {
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.coupon-date {
    font-size: 13px;
    color: #cccccc;
    font-weight: 400;
}

.coupon-type {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
}

.coupon-amount,
.coupon-odds,
.coupon-win {
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.coupon-detail-icon {
    color: #666666;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.coupon-detail-icon:hover {
    color: #ffffff;
    opacity: 1;
    transform: scale(1.1);
}

.coupon-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.coupon-row:hover {
    background: #222222 !important;
}

.coupon-row:hover .coupon-detail-icon {
    color: #ffffff;
    opacity: 1;
}



/* Loading Spinner - Büyük */
.loading-spinner-large {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--accent);
    animation: spin 1s ease-in-out infinite;
}

/* Loading Container */
.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 500;
}

/* Responsive Tasarım - Görsele Uygun */
@media (max-width: 768px) {
    .pro-table-container {
        margin-top: 15px;
        border-radius: 0;
    }

    .pro-table th {
        padding: 12px 15px;
        font-size: 12px;
        font-weight: 500;
    }

    .pro-table td {
        padding: 12px 15px;
        font-size: 13px;
    }

    .datetime {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .id-row {
        font-size: 11px;
        gap: 6px;
        margin-bottom: 3px;
    }

    .id-label {
        min-width: 70px;
        font-size: 11px;
    }

    .amount {
        font-size: 15px;
        font-weight: 700;
    }

    .status-badge {
        padding: 0;
        font-size: 12px;
        font-weight: 500;
    }

    .copy-toast {
        bottom: 15px;
        right: 15px;
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .pro-table-container {
        margin-top: 12px;
        border-radius: 0;
        overflow-x: auto;
    }

    .pro-table {
        min-width: 650px;
    }

    .pro-table th {
        padding: 10px 12px;
        font-size: 11px;
        font-weight: 500;
    }

    .pro-table td {
        padding: 10px 12px;
        font-size: 12px;
    }

    .datetime {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .id-row {
        font-size: 10px;
        gap: 4px;
        margin-bottom: 2px;
    }

    .id-label {
        min-width: 60px;
        font-size: 10px;
    }

    .transaction-type {
        font-size: 12px;
    }

    .amount {
        font-size: 14px;
        font-weight: 700;
    }

    .status-badge {
        padding: 0;
        font-size: 11px;
        font-weight: 500;
    }

    .copy-icon {
        font-size: 11px;
    }

    .copy-toast {
        bottom: 10px;
        right: 10px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .loading-container {
        min-height: 200px;
        font-size: 14px;
    }

    .loading-spinner-large {
        width: 20px;
        height: 20px;
        border-width: 2px;
    }

    /* Kupon Filtreleri Responsive - Zarif */
    .coupon-filters {
        gap: 6px;
        margin: 20px 0;
    }

    .coupon-filter-btn {
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 500;
    }

    .coupon-detail-icon {
        font-size: 14px;
    }

    .coupon-id,
    .coupon-amount,
    .coupon-odds,
    .coupon-win {
        font-size: 13px;
        font-weight: 500;
    }

    .coupon-date {
        font-size: 12px;
    }

    .coupon-type {
        font-size: 13px;
        font-weight: 500;
    }
}

/*Kayan Yazı Bölümü*/
.containers {
    width: 100%;
    position: relative;
    height: 25px;
    border-radius: 5px;
    box-shadow: none;
    padding: 3px 10px;
    box-sizing: border-box;
}

.update-message {
    font-size: 12px;
    white-space: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    color: #a1a1a1;
    height: 100%;
    position: relative;
}

#announcementBar {
    height: 30px;
    width: 100%;
    z-index: 9999;
}

.close-btn {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100%;
    background: none;
    border: none;
    color: #a1a1a1;
    font-size: 16px;
    cursor: pointer;
    padding: 0 5px;
}

.close-btn:hover {
    color: #fff;
}



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

    /* Menü linkleri */
    .nav-link-mobile {
        display: flex;
        align-items: center;
        padding: 6px 10px;
        text-decoration: none;
        color: #ffffff;
        border-radius: 4px;
        transition: background-color 0.3s, color 0.3s, transform 0.4s;
        font-family: 'Arial', sans-serif;
        font-size: 14px;
        margin-bottom: 10px;
        position: relative;
    }
    .nav-link-mobile:hover {
        background-color: #333;
        color: #ffffff;
        transform: translateX(5px);
    }
    .menu-icons {
        margin-right: 6px;
        font-size: 18px;
        color: #ffffff;
        transition: transform 0.3s;
    }
    .nav-link-mobile:hover .menu-icons { 
        transform: scale(1.1) rotate(5deg);
    }
    .nav-link-mobile img {
        margin-right: 6px;  
        width: 20px;
        height: 20px;
    }
    .nav-link-mobile {
        background-color: #222123; 
        border: 1px solid #322c2c; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .nav-link-mobile:hover {
        background-color: #273852; 
        border-color: #555;
    }

    /* Buton görünümlerini yazı gibi yapar */
.link-button {
    background: none;
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 200; /* İncelik: 400 normal, 300 daha da ince olur */
    text-decoration: underline;
    padding: 4px 6px;
    cursor: pointer;
    letter-spacing: 0px; /* Harf aralığını sıfırla */
    transform: translateY(3px);
}

.link-button:hover {
    color: #f1c40f;
}


@keyframes parlama {
0%   { box-shadow: 0 0 8px rgba(44,149,209,0.3); }
50%  { box-shadow: 0 0 18px rgba(44,149,209,0.8); }
100% { box-shadow: 0 0 8px rgba(44,149,209,0.3); }
}


.register-button {
position: relative;
right: 58px;
background: linear-gradient(135deg, #1a6fa5, #2c95d1); /* eski mor yerine mavi degrade */
color: #fff;
font-size: 12px;
font-weight: 200;
padding: 2px 6px;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
margin-left: 60px;
transform: translateY(3px);
animation: parlama 1.2s infinite ease-in-out;
}

.register-button:hover {
background: linear-gradient(135deg, #2c95d1, #1a6fa5); /* hover’da ters mavi degrade */
transform: scale(1.03);
cursor: pointer;
}

    /* CEVRIM BİLGİSİ – Daha Gösterişli */
    .nav-link-mobile.cevrim-info {
        background: linear-gradient(135deg, #6f6666, #202123);
        color: #fff;
        padding: 12px 16px;
        margin-bottom: 10px;
        border-radius: 25px;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
        box-shadow: 0 0 10px rgba(225, 0, 255, 0.5);
        position: relative;
        overflow: hidden;
    }
    .nav-link-mobile.cevrim-info i.menu-icons {
        margin-right: 8px;
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    }
    .nav-link-mobile.cevrim-info::before {
        content: "";
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
        animation: pulseCevirim 3s infinite ease-in-out;
    }
    @keyframes pulseCevirim {
        0% { transform: scale(0.8); opacity: 0.6; }
        50% { transform: scale(1.2); opacity: 1; }
        100% { transform: scale(1.5); opacity: 0; }
    }

    /* Kalan Çevrim Kutusu */

/* KALAN ÇEVRİM */
.account-menu-info.cevrim-info {
    background: linear-gradient(135deg, #6f6666, #202123);
    color: #fff;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    width: 100%;             /* önemli */
    box-sizing: border-box;  /* taşmayı önler */
}

.account-menu-info.cevrim-info i.menu-icons {
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    font-size: 16px;
}

.account-menu-info.cevrim-info::before {
    content: "";
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    animation: pulseCevirim 3s infinite ease-in-out;
}

@keyframes pulseCevirim {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* MENÜ LİNKLERİ */
.account-menu-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(0, 11, 33, 0.6); /* daha koyu şeffaf lacivert */
color: #fff;
text-decoration: none;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
transition: background 0.2s ease;
width: 100%;
box-sizing: border-box;
}

.account-menu-link:hover {
background: rgba(44, 149, 209, 0.7); /* hover’da daha parlak mavi */
color: #fff;
}


.account-menu-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
}

.account-menu-link.logout {
    background:rgb(0, 255, 247);
}

.account-menu-link.logout:hover {
    background:rgb(0, 255, 247);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    transition: opacity 0.3s ease;
}



    /* VIP Modal Tasarımı */
    #vipModal {
        background: radial-gradient(circle at center, #3a2a0a 0%, #211500 100%);
        border: 3px solid #8347ff;
        border-radius: 10px;
        color: #fff;
        text-align: center;
        padding: 20px;
        position: relative;
        box-shadow: 0 0 25px rgb(255 254 250 / 70%);
        animation: vipFadeInDown 0.7s ease;
    }
    @keyframes vipFadeInDown {
        0% { transform: translate3d(0, -50%, 0); opacity: 0; }
        100% { transform: translateZ(0); opacity: 1; }
    }
    #vipModal h2 {
        color: #ffd700;
        font-size: 26px;
        margin-bottom: 15px;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
        position: relative;
    }
    #vipModal h2::after {
        content: "";
        display: block;
        width: 50%;
        height: 2px;
        background-color: #ffd700;
        margin: 10px auto 0 auto;
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }
    #vipModal strong { color: #ffd700; }
    .vip-info {
        font-size: 17px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        position: relative;
    }
    .vip-info::before {
        content: "\f521";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: #ffd700;
        margin-right: 5px;
        text-shadow: 0 0 3px rgba(255, 215, 0, 0.8);
        animation: iconPulse 2s infinite;
    }
    @keyframes iconPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
    #vipModalLevel, #vipModalDeposit, #vipModalBonus, #vipModalNextLevel {
        font-weight: bold;
        font-size: 18px;
        margin-left: 5px;
        text-shadow: 0 0 4px rgba(255, 215, 0, 0.7);
    }
    #vipModal .remodal-close {
        color: #ffd700; 
        font-size: 22px;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
    }
    #vipModal .remodal-confirm {
        background-color: #d6a816;
        color: #000;
        font-weight: bold;
        border-radius: 5px;
        padding: 8px 16px;
        margin-top: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 14px;
        box-shadow: 0 0 5px rgba(214,168,22,0.5);
    }
    #vipModal .remodal-confirm:hover {
        background-color: #ffd700;
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(255,215,0,0.8);
    }

    /* Promosyon Modal */
    #promoModal {
        background: rgb(45 45 45 / 95%);
        border: 2px solid #aaa;
        border-radius: 8px;
        color: #fff;
        text-align: center;
        padding: 20px;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
        animation: fadeInScale 0.5s ease;
    }
    @keyframes fadeInScale {
        0% { transform: scale(0.8); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    #promoModal h2 { margin-bottom: 15px; }
    #promoModal #promoCodeInput {
        width:80%;
        margin-bottom:10px;
        padding:8px;
        font-size:14px;
        border-radius: 4px;
        border:1px solid #666;
        outline: none;
        background-color: #333;
        color: #fff;
    }
    #promoModal #promoCodeInput:focus {
        border-color: #ffd700;
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    }
    #promoModal .remodal-confirm {
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 3px;
        padding: 8px 16px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    #promoModal .remodal-confirm:hover {
        background-color: #0056b3;
        transform: scale(1.05);
    }

    /* Promosyon Confirm Modal (Onay/Reddet) */
    #promoConfirmModal {
        background: rgb(45 45 45 / 95%);
        border: 2px solid #aaa;
        border-radius: 8px;
        color: #fff;
        text-align: center;
        padding: 20px;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
        animation: fadeInScale 0.5s ease;
    }
    #promoConfirmModal h2 { margin-bottom: 15px; }
    #promoConfirmModal .remodal-confirm,
    #promoConfirmModal .remodal-cancel {
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 3px;
        padding: 8px 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 5px;
    }
    #promoConfirmModal .remodal-confirm:hover,
    #promoConfirmModal .remodal-cancel:hover {
        background-color: #0056b3;
        transform: scale(1.05);
    }

    /* Kupon Detay Modal */
    #couponDetailModal {
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        max-width: 800px;
        width: 90%;
    }
    #couponDetailModal h2 {
        color: #2c3e50;
        font-size: 24px;
        margin-bottom: 20px;
        text-align: center;
        border-bottom: 2px solid #3498db;
        padding-bottom: 10px;
    }
    #couponDetailModal .remodal-confirm {
        background-color: #3498db;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        font-weight: bold;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    #couponDetailModal .remodal-confirm:hover {
        background-color: #2980b9;
        transform: scale(1.05);
    }
    #couponDetailModal .remodal-close {
        color: #7f8c8d;
        font-size: 20px;
        transition: color 0.3s ease;
    }
    #couponDetailModal .remodal-close:hover {
        color: #2c3e50;
    }
    
    /* ========================================================
    SOL AÇILIR MENÜ (Slide-out Sidebar)
    ========================================================== */
.bottom-fullscreen-menu {
    position: fixed;
    top: 60px; /* navbar yüksekliği kadar ayarladık */
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #000B21 0%, #0C3D64 100%) !important;
    z-index: 1001;
    display: none;
    flex-direction: column;
    animation: slideUpMenu 0.4s ease;
    padding: 20px;
}


@keyframes slideUpMenu {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #fff;
    border-bottom: 1px solid #333;
    padding: 12px 10px 8px 10px; /* üst:12, alt:8 biraz aşağıya almak için */
    margin-bottom: 10px;
}

.menu-header span {
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    margin-top: 3px; /* yazıyı 3-4px aşağıya indirir */
}

.close-menu {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    margin-left: auto;
    cursor: pointer;
}

.menu-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 55px;

    overflow-y: auto;
    max-height: calc(100vh - 60px); /* Menü yüksekliğini ekran boyuna göre sınırla */
    -webkit-overflow-scrolling: touch; /* iOS için yumuşak scroll */
}


.menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #04101d;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
}

.menu-link i {
    font-size: 15px;
    width: 11px;
    text-align: center;
    margin-right: 6px;
}

/* Kategori başlığı */
.menu-section-title {
    font-size: 12px;
    color: #B4B9C4;
    font-weight: 100;
    margin: 20px 0 6px 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}


/* Tüm cihazlarda önce gizle */
.mobile-horizontal-menu {
display: none;
}

/* Sadece mobilde göster */
@media (max-width: 768px) {
.mobile-horizontal-menu {
    display: flex !important;
    overflow-x: auto;
    border-bottom: 1px solid #505050;
    white-space: nowrap;
    flex-wrap: nowrap;
    margin-top: -9px; /* Yukarı çekmek için */
    margin-bottom: 6px; /* Aşağı çekmek için */
    gap: 12px;
    padding: 4px 10px;
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */
}

.mobile-horizontal-menu::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.mobile-horizontal-menu a {
    font-size: 11px;
    color: #c5c7ce;
    text-decoration: none;
    font-weight: 400;
    flex-shrink: 0;
    padding: 7px;
}

.mobile-horizontal-menu a:hover {
    color: #ffffff;
    text-decoration: underline;
}
}



/* ÜÇ NOKTA */

.mobile-dot-menu {
position: absolute;
top: 12px; /* buton yüksekliğine göre ayarla */
right: 16px;
z-index: 100;
display:none;
}

/* Giriş yapan kullanıcılar için dot menu - Flex item olarak */
.mobile-dot-menu-logged-in {
    position: relative; /* Flex container içinde */
    margin-left: 3px; /* User icon'dan 8px uzak */
    z-index: 100;
    display: none !important; /* Desktop'ta gizle */
}

/* Logged-in dot menu button - guest ile aynı */
.mobile-dot-menu-logged-in button {
    width: 27px;
    height: 27px;
    background: linear-gradient(135deg, #1a6fa5, #2c95d1); /* mavi degrade */
    color: #fff;
    font-size: 18px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transform: translateY(2px);
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 0 6px rgba(44, 149, 209, 0.5); /* hafif glow */
}

.mobile-dot-menu-logged-in button i {
    transition: transform 0.25s ease;
}

/* Logged-in dropdown - guest ile TAMAMEN aynı */
#dotDropdownLoggedIn {
    position: fixed;
    top: 100%;
    left: 94%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #000b21 0%, #0c3d64 50%, #1a6fa5 100%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.7), 0 0 12px rgba(28,111,165,0.4);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 8px;
    z-index: 999;
    width: 44px;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
}

#dotDropdownLoggedIn a {
    color: white;
    text-align: center;
    font-size: 20px;
}

#dotDropdownLoggedIn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-10px) scale(0.8);
}

#dotDropdownLoggedIn .dropdown-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #2a1f1f;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
    z-index: 1000;
}

#dotDropdownLoggedIn.hidden .dropdown-arrow {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
}

/* Active state - logged-in */
.mobile-dot-menu-logged-in .dot-menu-btn.active {
    background: linear-gradient(135deg, #0c3d64 0%, #1a6fa5 100%);
    color: #fff;
    border: 1px solid rgba(44, 149, 209, 0.8);
    box-shadow: 0 0 10px rgba(44, 149, 209, 0.6);
    transition: all 0.2s ease-in-out;
}

.mobile-dot-menu-logged-in .dot-menu-btn.active i {
    transform: rotate(90deg); /* dikey → yatay */
}


.mobile-dot-menu button {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #1a6fa5, #2c95d1); /* mavi degrade */
color: #fff;
font-size: 18px;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transform: translateY(3px);
transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 0 6px rgba(44, 149, 209, 0.5); /* hafif glow */
margin-right: -5px;
margin-top: 1px;
}

.mobile-dot-menu button i {
transition: transform 0.25s ease;
}


.dot-menu-btn.active {
background: linear-gradient(135deg, #0c3d64 0%, #1a6fa5 100%);
color: #fff;
border: 1px solid rgba(44, 149, 209, 0.8);
box-shadow: 0 0 10px rgba(44, 149, 209, 0.6);
transition: all 0.2s ease-in-out;
}


.dot-menu-btn.active i {                                          /* EK */
transform: rotate(90deg);     /* dikey → yatay */
}

#dotDropdown {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #000b21 0%, #0c3d64 50%, #1a6fa5 100%);
box-shadow: 0 4px 15px rgba(0,0,0,0.7), 0 0 12px rgba(28,111,165,0.4);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 8px;
z-index: 999;
width: 44px;
opacity: 1;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: top center;
}



.dropdown-arrow {
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #2a1f1f;
filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
z-index: 1000;
}

.hidden .dropdown-arrow {
opacity: 0;
transform: translateX(-50%) scale(0.8);
}

#dotDropdown a {
color: white;
text-align: center;
font-size: 20px;
}

.hidden {
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(-10px) scale(0.8);
}

/* ESKİ CSS #1 KALDIRILDI - ÇAKIŞMA ÖNLEMİ */

/* Sadece mobilde göster */
@media (max-width: 768px) {
.mobile-dot-menu {
    display: inline-block !important;
}
.mobile-dot-menu-logged-in {
    display: inline-block !important; /* Mobilde zorla göster */
}
}

/* Header Ayıraç Çizgi */
.header-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 10px 0 6px; /* Sol 8px, sağ 6px - çizgiyi 2px sola alır */
    align-self: center;
}

/* Header alignment fix */
.navbar-form.ctrs {
    display: flex;
    align-items: center;
    z-index: 1000 !important;
    position: relative !important;
}

/* Desktop Dot Menu */
.desktop-dot-menu {
    position: relative;
    display: inline-block;
    margin-left: 0;
    margin-right: 15px;
    z-index: 2147483646 !important;
    pointer-events: auto !important;
}

.desktop-dot-menu-btn {
    width: 33px; /* Saat kutusuyla aynı yükseklik */
    height: 33px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: white;
    font-size: 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.desktop-dot-menu-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 1);
}

.desktop-dot-menu-btn.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.desktop-dot-menu-btn.active i {
    transform: rotate(90deg);
}

/* ESKİ CSS #2 KALDIRILDI - ÇAKIŞMA ÖNLEMİ */

/* =================================
   DESKTOP DOT MENU CSS - TEMİZ SİSTEM
   ================================= */

/* Ana dropdown container - GÜZELLEŞTİRİLMİŞ */
#desktopDotDropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #2a1f1f 0%, #1a1a1a 100%) !important;
    border: 2px solid rgba(239, 68, 68, 0.4) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    width: 60px !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(239, 68, 68, 0.1) !important;
    backdrop-filter: blur(5px) !important;
}

/* Hidden state */
#desktopDotDropdown.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-10px) scale(0.8) !important;
    visibility: hidden !important;
}

/* Açık durumda kesinlikle tıklanabilir yap */
#desktopDotDropdown:not(.hidden) {
    pointer-events: all !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Link styling - ULTRA GÜÇLÜ TIKLANABİLİR */
#desktopDotDropdown a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    text-align: center !important;
    font-size: 16px !important;
    padding: 0 !important;
    margin: 2px 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2147483647 !important;
    width: 36px !important;
    height: 36px !important;
    pointer-events: auto !important;
    user-select: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    /* Tıklanabilirliği garantilemek için */
    isolation: isolate !important;
    will-change: transform !important;
}

/* Hover effects - GÜZELLEŞTİRİLMİŞ */
#desktopDotDropdown a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(255, 26, 61, 0.2) 100%) !important;
    border-color: #ef4444 !important;
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
    cursor: pointer !important;
}

#desktopDotDropdown a:hover i {
    color: #ef4444 !important;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
    transform: scale(1.1) !important;
    cursor: pointer !important;
}

/* Active state for links - BASIN EFEKTİ */
#desktopDotDropdown a:active {
    transform: translateY(0px) scale(0.95) !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.4) 0%, rgba(255, 26, 61, 0.3) 100%) !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.6) !important;
}

/* Focus state - TAB ile gezinme için */
#desktopDotDropdown a:focus {
    outline: 2px solid #ef4444 !important;
    outline-offset: 2px !important;
}

/* Icon styling - MÜKEMMEL ORTALANMIŞ */
#desktopDotDropdown i {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    pointer-events: none !important;
    display: block !important;
    text-align: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
}

/* Mobilde desktop menu'yu gizle */
@media (max-width: 768px) {
    .desktop-dot-menu {
        display: none;
    }
}

/* Desktop Sliding Panel */
.desktop-sliding-panel {
    position: fixed;
    top: 0;
    right: -400px; /* Başlangıçta gizli */
    width: 400px;
    height: 100vh;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d1f1f 50%, #1a1a1a 100%);
    z-index: 9999;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
    border-left: 2px solid rgba(239, 68, 68, 0.3);
    overflow-y: auto;
}

.desktop-sliding-panel.open {
    right: 0;
}

.desktop-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.desktop-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.desktop-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.1);
}

.desktop-panel-title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.desktop-panel-close {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.desktop-panel-close:hover {
    background: rgba(239, 68, 68, 0.3);
    transform: rotate(90deg);
}

.desktop-panel-content {
    padding: 25px;
}

/* Mobilde desktop panel'i gizle */
@media (max-width: 768px) {
    .desktop-sliding-panel,
    .desktop-panel-overlay {
        display: none !important;
    }
}



/* BİLDİRİM EKRANI */

.settings-select {
width: 100%;
height: 100%;
padding: 0 14px;
background-color: #2a2a2a;
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-sizing: border-box;
}


.fullscreen {
position: fixed;
inset: 0;
background: #0e0e0e; /* ✔ Siyah, koyu arka plan */
color: white;
z-index: 9999;
display: flex;
flex-direction: column;
opacity: 0;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
font-family: 'Segoe UI', sans-serif;
transform: translateX(100%);
backdrop-filter: blur(5px);
}

.fullscreen.show {
transform: translateX(0%);
opacity: 1;
}

.fullscreen.hidden {
pointer-events: none;
transform: translateX(100%);
opacity: 0;
}

.panel-header {
display: flex;
align-items: center;
padding: 14px 16px;
background-color: #1c1c1c; /* ✔ Menüyle uyumlu üst bar */
border-bottom: 1px solid rgb(9, 119, 229); /* ✔ İnce kırmızı çizgi */
opacity: 0;
transform: translateY(-20px);
transition: all 0.5s ease 0.1s;
}

.fullscreen.show .panel-header {
opacity: 1;
transform: translateY(0);
}

.panel-header span {
font-weight: 200px;
font-size: 16px;
text-transform: uppercase;
}

.panel-header button {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: rgb(163, 161, 161);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
margin-right: 12px;
transition: all 0.3s ease;
}

.panel-header button:hover {
background-color:rgb(9, 119, 229);
transform: scale(1.1);
box-shadow: 0 0 10px rgba(9, 119, 229, 0.4);
}


.panel-content {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: flex-start;
text-align: center;
color: #999;
font-size: 14px;
padding: 0;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease 0.2s;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #c30000 transparent;
}

.panel-content::-webkit-scrollbar {
width: 6px;
}

.panel-content::-webkit-scrollbar-track {
background: transparent;
}

.panel-content::-webkit-scrollbar-thumb {
background-color: #c30000;
border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
background-color: #ff0000;
}

.fullscreen.show .panel-content {
opacity: 1;
transform: translateY(0);
}

/* YILDIZ(FAVORİLER) EKRANI */
.fav-btn {
background: #1c1c1c;
color: #777;
border: none;
padding: 6px 14px;
border-radius: 6px;
font-size: 13px;
}

.fav-btn.selected {
background:rgb(9, 119, 229);
color: white;
}


/* LOGIN SCREEN */

.login-fullscreen {
background-color: #121212; /* Mobil için eski stil */
color: #fff;
font-family: Arial, sans-serif;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
overflow-y: auto;

/* Animasyon için başlangıç durumu */
opacity: 0;
transform: scale(0.9);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(10px);
}

/* Mobilde modal-content wrapper'ını yok say */
@media (max-width: 768px) {
    .login-fullscreen .login-modal-content {
        background: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* Masaüstü için modal container - sadece büyük ekranlarda */
@media (min-width: 769px) {
    .login-fullscreen {
        background-color: transparent !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
        padding: 20px !important;
    }
    
    .login-fullscreen .login-modal-content {
        background-color: #121212 !important;
        border-radius: 10px !important;
        padding: 20px 25px !important;
        max-width: 380px !important;
        width: 80% !important;
        max-height: fit-content !important;
        min-height: auto !important;
        overflow-y: visible !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid #333 !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Masaüstünde güvenlik bildirimini gizle - çok yer kaplıyor */
    .login-fullscreen .login-form > div[style*="background: linear-gradient"] {
        display: none !important;
    }
    
    /* Login form elementlerini optimize et */
    .login-fullscreen .login-form {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .login-fullscreen .login-form input {
        margin-bottom: 6px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    
    .login-fullscreen .btn-login {
        padding: 8px !important;
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    
    .login-fullscreen .login-title {
        margin-bottom: 12px !important;
    }
    
    .login-fullscreen .login-title .subtext {
        font-size: 12px !important;
    }
    
    .login-fullscreen .login-title .maintext {
        font-size: 16px !important;
    }
    
    .login-fullscreen .forgot-password,
    .login-fullscreen .support-link {
        font-size: 10px !important;
        margin-bottom: 5px !important;
    }
    
    .login-fullscreen .remember-me {
        margin-bottom: 6px !important;
        font-size: 11px !important;
    }
    
    /* Login header'ı da küçült */
    .login-fullscreen .login-header {
        margin-bottom: 10px !important;
        padding-bottom: 4px !important;
    }
    
    .login-fullscreen .login-header img {
        width: 110px !important;
    }
    
    /* Register Modal - web'de login modal gibi ortada konumlandır */
    #registerModal.login-fullscreen .login-modal-content {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    /* İçerideki elementleri de ortalayalım */
    .login-fullscreen .login-header,
    .login-fullscreen .login-title,
    .login-fullscreen .login-form {
        width: 100% !important;
        max-width: 380px !important;
    }
}

/* Açık durumda animasyon */
.login-fullscreen.show {
opacity: 1;
transform: scale(1);
}

/* Kapalı durumda gizle */
.login-fullscreen.hidden {
opacity: 0;
transform: scale(0.9);
pointer-events: none;
}

.login-header {
width: 100%;
max-width: 380px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #1A6FA5;
padding-bottom: 6px;
margin-bottom: 20px;

/* Header animasyonu */
opacity: 0;
transform: translateY(-20px);
transition: all 0.6s ease 0.1s;
}

.login-fullscreen.show .login-header {
opacity: 1;
transform: translateY(0);
}


.logo {
height: 30px;
}

.top-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}

.btn-register {
background: linear-gradient(135deg, #000B21 0%, #1875c0 100%) !important;
color: #fff;
padding: 6px 14px;
border-radius: 4px;
font-size: 11px;
text-decoration: none;
font-weight: 200;
transition: all 0.3s ease;
}

.btn-register:hover {
background: linear-gradient(135deg,rgb(1, 52, 153) 0%, #1875c0 100%) !important;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(230, 0, 35, 0.3);
}

.btn-close {
background: transparent;
color: white;
font-size: 18px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 8px;
border-radius: 50%;
}

.btn-close:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: rotate(90deg);
color:rgb(9, 119, 229);
}


.login-title {
text-align: left;
width: 100%;
max-width: 380px;
margin: 5px auto 10px; /* ← üst margin 20px'ti, şimdi 10px yaptık */
line-height: 1.4;

/* Title animasyonu */
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease 0.2s;
}

.login-fullscreen.show .login-title {
opacity: 1;
transform: translateY(0);
}

.login-title .subtext {
font-size: 13px;
color: #a0a6b8;
font-weight: 200; 
}

.login-title .maintext {
font-size: 17px;
color: #ffffff;
font-weight: 350;
display: inline-block; /* veya block */
padding-top: 4px;       /* ← boşluğu kesin verir */
}


.login-form {
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;

/* Form animasyonu */
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease 0.3s;
}

.login-fullscreen.show .login-form {
opacity: 1;
transform: translateY(0);
}

.login-form input {
background-color: #1e1e1e;
border: 1px solid #333;
color: #fff;
border-radius: 4px;
padding: 12px;
margin-bottom: 10px;
font-size: 14px;
transition: all 0.3s ease;
}

.login-form input:hover {
border-color: #555;
background-color: #252525;
}

.login-form input:focus {
outline: none;
border-color:rgb(9, 122, 229);
background-color: #252525;
box-shadow: 0 0 10px rgba(9, 229, 229, 0.3);
}

.login-form input::placeholder {
color: #bfc4d1;
}

.remember-me {
display: flex;
align-items: center;
font-size: 13px;
margin-bottom: 10px;
}

.remember-me input {
margin-right: 6px;
}

/* Custom Checkbox with bc-i-checked icon */
.custom-checkbox-container {
    display: flex;
    align-items: center;
}

.custom-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: normal;
    color: #bfc4d1;
    user-select: none;
    margin-top: 1px;
}

.checkbox-text {
    margin-top: 2px;
}

.checkbox-box {
    position: relative;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.2);
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.checkbox-icon {
    font-size: 12px;
    color: rgb(44, 165, 235);
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

/* Checked state */
input[type="checkbox"]:checked + .custom-checkbox-label .checkbox-box {
    background-color: rgb(44, 165, 235);
    border-color: rgb(44, 165, 235);
    box-shadow: 0 0 10px rgba(44, 165, 235, 0.3);
}

input[type="checkbox"]:checked + .custom-checkbox-label .checkbox-icon {
    opacity: 1;
    transform: scale(1);
    color: #fff;
}

/* Hover effect */
.custom-checkbox-label:hover .checkbox-box {
    border-color: rgb(44, 165, 235);
    box-shadow: 0 0 5px rgba(44, 165, 235, 0.2);
}

.btn-login {
background: linear-gradient(135deg, #0C3D64, #1A6FA5); /* koyudan canlı maviye */
color: #fff;
padding: 12px;
border: none;
border-radius: 4px;
font-weight: bold;
margin-bottom: 14px;
font-size: 15px;
transition: all 0.3s ease;
transform: translateY(0);
box-shadow: 0 0 10px rgba(44, 149, 209, 0.4); /* hafif mavi glow */
}

.btn-login:hover {
background: linear-gradient(135deg, #1A6FA5, #2C95D1); /* hover’da daha parlak */
color: #fff;
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0 0 15px rgba(44, 149, 209, 0.7); /* daha güçlü glow */
}

.btn-login:active {
transform: translateY(0);
box-shadow: 0 0 8px rgba(28, 111, 165, 0.5);
}



.forgot-password {
text-align: center;
font-size: 12px;
color: #aaa;
margin-bottom: 10px;
}

.support-link {
text-align: center;
font-size: 12px;
text-decoration: underline;
color: #bfc4d1;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 320px;
}

/* ==========================================
KAYIT MODAL TASARIMI - Login ile aynı CSS
========================================== */

/* Mobile/Desktop Responsive Classes */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
}

/* Progress Bar - sadece mobilde görünür */
.register-progress {
    width: 100%;
    max-width: 380px;
    margin-bottom: 12px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.25s;
}

.login-fullscreen.show .register-progress {
    opacity: 1;
    transform: translateY(0);
}

.progress-steps {
    display: inline-flex;
    gap: 12px;
    align-items: center;
}

.progress-step {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #444;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #555;
}

.progress-step.active {
    background: linear-gradient(135deg, #1b9eb4 0%, #1587A2 100%);
    color: #fff;
    border-color: #1b9eb4;
    transform: scale(1.1);
}

.progress-step.completed {
    background: linear-gradient(135deg, #23d3cf 0%, #13b3ae 100%);
    color: #fff;
    border-color: #23d3cf;
}

/* Web'de tüm form stepları görünür, mobilde sadece aktif olan */
.register-form-step {
    width: 100%;
    max-width: 380px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease 0.3s;
    margin-bottom: 20px;
}

/* Web'de tüm stepları göster */
@media (min-width: 769px) {
    .register-form-step {
        display: flex !important;
        flex-direction: column;
    }
    
    .login-fullscreen.show .register-form-step {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Web'de progress bar gizle */
    .register-progress {
        display: none;
    }
    
    /* Step 1 uyarısını sadece step 1'de göster */
    .step-1-only {
        display: none !important;
    }
    
    /* Mobil butonları web'de gizle */
    .mobile-only {
        display: none !important;
    }
}

/* Mobilde sadece aktif step görünür */
@media (max-width: 768px) {
    .register-form-step {
        display: none;
    }
    
    .register-form-step.active {
        display: flex;
        flex-direction: column;
    }
    
    .login-fullscreen.show .register-form-step.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Step 1 uyarısını mobilde göster */
    .step-1-only {
        display: block;
    }
}

/* Register form animasyonu - login-form ile tamamen aynı */
.login-fullscreen .login-form {
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;

opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease 0.3s;
}

.login-fullscreen.show .login-form {
opacity: 1;
transform: translateY(0);
}



/* Register form inputs - same as login */
.register-form-step input,
.register-form-step select {
background-color: #1e1e1e;
border: 1px solid #333;
color: #fff;
border-radius: 4px;
padding: 12px;
margin-bottom: 10px;
font-size: 14px;
transition: all 0.3s ease;
box-sizing: border-box;
}

.register-form-step input:hover,
.register-form-step select:hover {
border-color: #555;
background-color: #252525;
}

.register-form-step input:focus,
.register-form-step select:focus {
outline: none;
border-color: #1b9eb4;
background-color: #252525;
box-shadow: 0 0 10px rgba(27, 158, 180, 0.3);
}

.register-form-step input::placeholder {
color: #bfc4d1;
}



/* Date of Birth Row */
.dob-row {
display: flex;
gap: 10px;
}

.dob-row select {
flex: 1;
}

/* Phone Input Row */
.phone-row {
display: flex;
gap: 10px;
}

.phone-row select {
width: 80px;
flex-shrink: 0;
}

.phone-row input {
flex: 1;
}

/* Terms Checkbox */
.register-terms {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 20px 0;
}

.register-terms input[type="checkbox"] {
width: auto;
margin: 0;
}

.register-terms label {
margin: 0;
font-size: 12px;
line-height: 1.4;
}

.register-terms a {
color: #23d3cf;
text-decoration: none;
}

.register-terms a:hover {
text-decoration: underline;
}

/* Register Butonları - Login modal ile birebir aynı */
.register-nav-buttons {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 20px;
width: 100%;
}

.btn-register-nav {
flex: 1;
padding: 12px;
border: none;
border-radius: 4px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
transform: translateY(0);
}

/* Tek buton varsa full width - login modal gibi */
.register-nav-buttons .btn-register-nav:only-child {
width: 100%;
}

/* Register butonları login buton stili ile aynı */
.btn-register-next,
.btn-register-submit {
background: linear-gradient(135deg, #0C3D64, #1A6FA5); /* koyudan açığa mavi degrade */
color: #fff;
padding: 12px;
border: none;
border-radius: 4px;
font-weight: bold;
margin-bottom: 14px;
font-size: 15px;
transition: all 0.3s ease;
transform: translateY(0);
width: 100%;
}

.btn-register-next:hover,
.btn-register-submit:hover {
background: linear-gradient(135deg, #1A6FA5, #2C95D1); /* hover’da daha parlak mavi */
color: #fff;
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(44, 149, 209, 0.5);
}

.btn-register-next:active,
.btn-register-submit:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(28, 111, 165, 0.5);
}

/* Geri butonu – sade bırakıyoruz */
.btn-register-prev {
background-color: transparent;
color: #bfc4d1;
border: 1px solid #555;
padding: 8px 16px;
font-size: 13px;
font-weight: normal;
}

.btn-register-prev:hover {
background-color: #333;
border-color: #777;
color: #fff;
transform: translateY(-1px);
}

/* Error Messages */
.register-error {
color: #ff4444;
font-size: 12px;
margin-top: 5px;
display: none;
}


/* Modal içi mesaj animasyonları */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


.clock-box {
    color: white;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12px; /* Daha küçük yazı */
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.4);
    font-family: 'Poppins', sans-serif; /* Diğer butonlarla aynı font */
    background: rgba(255, 255, 255, 0.1) !important; /* Çok hafif gri transparan */
    border: 2px solid rgba(255, 255, 255, 0.8);
}

    /* ==========================================
    MOBILE SAG MENU
    =========================================== */
    /* Bakiye butonunda doğrudan '₺' kullanımı */
/* ==========================================
MOBILE SAĞ MENU - BAKİYE VE USER BUTONU
========================================== */

.navbar-toggle.rocks-toggle {
    display: inline-flex !important;   /* block genişliği kısıtla */
    align-items: center;               /* içeriği dikey ortala */
    justify-content: center;
    padding: 0 !important;             /* padding kaldır */
    margin: 0 8px;                     /* gerekiyorsa dış boşluk */
    background: none !important;       /* arka plan temizle */
    border: none !important;           /* border temizle */
    width: auto !important;            /* genişlik otomatik */
    min-width: auto !important;        /* min-width otomatik */
    height: 60px !important;           /* Logo ile aynı yükseklik */
    vertical-align: middle;            /* Logo ile aynı hizada */
}

/* Web'de gizlenecek elementler */
@media (min-width: 769px) {
    .link-button, 
    .register-button {
        display: none !important;
    }
    
    /* Reload butonu web'de gizle */
    .btn-reload {
        display: none !important;
    }
    
    /* Mobil bakiye ve user icon container web'de gizle */
    .mobile-balance-user-container {
        display: none !important;
    }
    
    /* Giriş yapan kullanıcılar için dot menu web'de gizle */
    .mobile-dot-menu-logged-in {
        display: none !important;
    }
}


/* ====== MOBİL BAKİYE + USER KONTEYNER ====== */
.mobile-balance-user-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px; /* Logo ile tam aynı yükseklik (img-link height) */
    margin-right: 40px; /* 30px sola çekmek için artırıldı */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    vertical-align: middle; /* Logo ile aynı hizada */
    position: relative; /* Dropdown pozisyonu için */
}

#bakiye-text-mobile {
    color: #fff !important;
    font-weight: normal; /* İnce yazı */
    font-size: 14px;
    margin-right: 6px; /* User iconuna daha yakın */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    vertical-align: middle;
    white-space: nowrap;
    pointer-events: none; /* Balance kısmı tıklanamaz */
    user-select: none; /* Metin seçilemez */
    transform: translateY(3.5px); /* 3px yukarı (5px'den 2px'e) */
    display: inline-block; /* Transform için gerekli */
    letter-spacing: -0.3px; /* TL yazısını rakama yaklaştır */
}

/* Mobil user ikonu - daha güçlü seçici */
.mobile-balance-user-container #user-icon-mobile.bc-i-user {
    opacity: 0.5 !important;
    font-size: 27px !important;
    cursor: pointer;
    pointer-events: auto; /* Icon tıklanabilir */
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border-radius: 50%; /* Daha iyi tıklama alanı */
    padding: 4px; /* Tıklama alanını genişlet */
    transform: translateY(5px); /* Bakiye ile aynı seviyeye */
    display: inline-block; /* Transform için gerekli */
}

.profile-back-btn .bc-i-small-arrow-left:before {
    color: #000 !important;
}


/* Mobil paneldeki modern-input'lar için navbar-menu1 stilini override et */
.mobile-personal-panel .modern-input,
#mobile-fullscreen-drawer .modern-input {
    width: 100% !important;
    background: #111926 !important;
    color: #f2f6f9 !important;
    border: 1px solid #3a3f45 !important;
    border-radius: 4px !important;
    padding: 12px 12px !important;
    outline: none !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.02) inset !important;
    height: auto !important;
    line-height: normal !important;
    font-size: inherit !important;
    opacity: 0.6 !important;
}

.mobile-personal-panel .modern-input:readonly,
#mobile-fullscreen-drawer .modern-input:readonly {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.mobile-balance-user-container #user-icon-mobile.bc-i-user:hover {
    opacity: 1 !important;
    color: #00dbff !important;
    transform: translateY(5px) scale(1.1) !important; /* Hem aşağı kaydır hem büyüt */
    text-shadow: 0 0 8px rgba(0, 219, 255, 0.6) !important;
}

/* Menü overlay */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.menu-open .overlay {
    display: block;
    opacity: 1;
}


/* Eski bakiye butonları (desktop için) */
#bakiyem button {
    background: linear-gradient(135deg, #000B21 0%, #0C3D64 100%) !important;
    border: 1px solid #00dbff;
    color: #fff;
    font-weight: 500;
    padding: 4px 10px;
    font-size: 12px;            /* Küçük ama okunur */
    height: 30px;               /* Sabit yükseklik */
    line-height: 1;
    border-radius: 20px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    vertical-align: middle;     /* Diğer elemanlarla hizalama */
    margin-top: 0;              /* Ekstra boşluk olmasın */
    margin-bottom: 0;
}

#bakiyem button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

/* #bakiyem button::before - Artık gerekmiyor (user ikonu kullanılıyor) */
/*
#bakiyem button::before {
    content: "₺";
    font-family: "Arial", sans-serif;
    font-weight: bold;
    color: #ffd700;
    margin-right: 6px;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}
*/


@media (max-width: 992px) {
    #menu-button-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: -12px;
    }

    .Navtop-account-left {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }
}

@media (max-width: 768px) {
    .mobile-balance-user-container {
        height: 50px; /* Mobilde de logo ile aynı yükseklik */
        margin-right: 40px; /* Sola çekmek için margin korunuyor */
    }
    
    .navbar-toggle.rocks-toggle {
        height: 50px !important; /* Mobilde de logo ile aynı yükseklik */
    }
    
    #bakiye-text-mobile {
        font-size: 12px !important;
        margin-right: 5px; /* Mobilde daha da yakın */
        letter-spacing: -0.4px;
        pointer-events: none; /* Mobilde de balance tıklanamaz */
        user-select: none;
        transform: translateY(3.5px); /* Mobilde de 5px aşağı */
    }
    
    .mobile-balance-user-container #user-icon-mobile.bc-i-user {
        font-size: 24px !important;
        opacity: 0.5 !important;
        pointer-events: auto; /* Mobilde de icon tıklanabilir */
        padding: 3px; /* Mobilde daha küçük padding */
        transform: translateY(5px); /* Mobilde de 5px aşağı */
        margin-bottom: 6px;
    }
}

.icon-bg {
display: flex;
align-items: center;
justify-content: center;
width: 31px;
height: 31px;
border-radius: 5px;   /* köşeleri hafif yuvarlatılmış */
margin-right: 3px;
flex-shrink: 0;
}

.icon-bg i {
color: #fff;
font-size: 17px;
display: block;
line-height: 1;
}

.bg-red {
background: linear-gradient(135deg, #d6006e 0%, #a8005a 100%);
}
.bg-blue {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.bg-green {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.bg-orange {
background: linear-gradient(135deg, #ff8008 0%, #ffc837 100%);
}
.bg-purple {
background: linear-gradient(135deg, #8f00ff 0%, #3a0ca3 100%);
}
.bg-yellow {
background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}z
.bg-cyan {
background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
}
.bg-gray {
background: linear-gradient(135deg, #434343 0%, #262626 100%);
}
.bg-brown {
background: linear-gradient(135deg, #a770ef 0%, #f6d365 100%);
}
.bg-petrol {
background: linear-gradient(135deg, #16222a 0%, #3a6073 100%);
}

/* Page Loading Spinner */
#pageLoader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

#pageLoader.hidden {
opacity: 0;
visibility: hidden;
}

.loader-content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}

.loader-favicon-container {
position: relative;
width: 64px;
height: 64px;
background: transparent;
}

.loader-favicon {
width: 64px;
height: 64px;
position: relative;
z-index: 2;
object-fit: contain;
display: block;
}

.loader-spinner {
position: absolute;
top: -16px;
left: -16px;
width: 96px;
height: 96px;
border: 3px solid transparent;
border-top: 3px solid #60a5fa;
border-right: 3px solid #3b82f6;
border-bottom: 3px solid #1e40af;
border-left: 3px solid #60a5fa;
border-radius: 50%;
animation: spin 1.5s linear infinite;
z-index: 1;
}

.loader-spinner::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
border: 2px solid transparent;
border-top: 2px solid rgba(96, 165, 250, 0.5);
border-radius: 50%;
animation: spin 2s linear infinite reverse;
}

.loader-text {
color: #60a5fa;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
animation: pulse 1.5s ease-in-out infinite;
margin-top: 10px;
}

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

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

/* Mobile responsive */
@media (max-width: 768px) {
.loader-favicon-container {
    width: 48px;
    height: 48px;
    background: transparent;
}

.loader-favicon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.loader-spinner {
    top: -12px;
    left: -12px;
    width: 72px;
    height: 72px;
}

.loader-text {
    font-size: 12px;
}
}

/* ========================================================
   MOBILE FULLSCREEN DRAWER - Web Modal Aynısı
========================================================== */

/* Mobile Container */
#mobile-fullscreen-drawer.mobile-fullscreen-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.15s ease-out, opacity 0s, visibility 0s;
}

#mobile-fullscreen-drawer.mobile-fullscreen-drawer.open {
    transform: translateX(0);
}

/* Mobile Close Button */
.mobile-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Aside */
.mobile-aside {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Mobile Bakiye Yönetimi Ok Boyutu */
#mobile-fullscreen-drawer #mobileManagementArrow {
    width: 10px !important;
    height: 10px !important;
    font-size: 10px !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile Alt Menü Bakiye Yönetimi Sola Bakan Ok */
#mobile-fullscreen-drawer .balance-header .bc-i-small-arrow-left {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 10px !important;
    min-height: 10px !important;
}

/* ========================================================
   MOBILE FULLSCREEN DRAWER - Web Modal Aynısı
========================================================== */

/* Mobile Container - Tamamen Full Ekran */
#mobile-fullscreen-drawer.mobile-fullscreen-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #000B21 0%, #0C3D64 100%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.15s ease-out, opacity 0s, visibility 0s;
}

#mobile-fullscreen-drawer.mobile-fullscreen-drawer.open {
    transform: translateX(0);
}



/* Balance Cards Swiper - Yakın Spacing */
.balance-cards-container {
    margin-bottom: 10px; /* 20px → 10px */
    margin-top: -5px; /* 5px yukarı al */
    position: relative;
    overflow: hidden;
}

.balance-cards-wrapper {
    display: flex;
    transition: transform 0.3s ease;
    width: 200%; /* 2 kart için */
}

.balance-card-slide {
    min-width: 50% !important;
    flex-shrink: 0;
}


/* Mobile'da full ekran override */
@media (max-width: 768px) {
    #mobile-fullscreen-drawer,
    #mobile-fullscreen-drawer.mobile-fullscreen-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10000 !important;
        background: #040D1A !important;
    }
    
    /* Mobile Header */
    .mobile-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 20px !important;
        z-index: 11 !important;
        background: linear-gradient(135deg, #0A192F, #112B3C, #0F1E36);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255,255,255,0.05);
        box-shadow: 0 2px 10px rgba(0, 200, 255, 0.1);
    }
    
    .mobile-logo {
        height: 35px !important;
        width: auto !important;
    }
    
    .mobile-close-btn {
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        font-size: 24px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #mobile-fullscreen-drawer .modern-aside,
    #mobile-fullscreen-drawer aside {
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100% - 60px) !important;
        max-width: none !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
        box-shadow: none !important;
        background: #040D1A !important;
        overflow-y: auto !important;
        color: var(--text) !important;
    }
    
    /* Mobile Profile Section - Kartların Altında */
    .mobile-profile {
        display: flex !important;
        align-items: center !important;
        padding: 10px 0 !important; /* 15px → 10px */
        margin-bottom: 5px !important; /* 10px → 5px */
    }
    
    .mobile-profile .modern-avatar {
        margin-right: 7px !important; /* 15px → 12px */
    }
    
    .user-info-text {
        flex: 1 !important;
    }
    
    /* İsim Soyisim - İnce font */
    .user-info-text .fullname {
        font-size: 12px !important;
        font-weight: 300 !important; /* 600 → 300 (ince) */
        color: var(--text) !important;
        line-height: 1.3 !important;
        letter-spacing: -0.5px !important;
    }
    
    /* User ID Row with Copy Button */
    .userid-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .user-info-text .userid {
        font-size: 10px !important;
        color: var(--muted) !important;
        font-weight: 400 !important;
    }
    
    .copy-userid-btn {
        font-size: 9px !important;
        color: var(--muted) !important;
        cursor: pointer !important;
        transition: color 0.2s ease !important;
        margin-bottom: 1.5px;
    }
    
    .copy-userid-btn:hover {
        color: var(--accent) !important;
    }
    
    .copy-userid-btn.bc-i-checked {
        color: #22c55e !important;
    }
    
    /* Menü section'larını yakınlaştır ve renk ver */
    #mobile-fullscreen-drawer .modern-section {
        margin-bottom: 1px !important;
        padding: 7px !important;
        background: #29313C;
    }
    
    /* Icon kutucukları - Base Color */
    #mobile-fullscreen-drawer .modern-left i {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 12px !important;
        font-size: 16px !important;
        color: white !important;
        background: #6585a1; /* Base renk tüm kutucuklar için */
    }
    
    /* Her icon için farklı renk kutucukları - Base üzerine yazılır */
    #mobile-fullscreen-drawer .bc-i-balance-management {
        background: #38b838 !important; /* Yeşil */
    }
    
    #mobile-fullscreen-drawer .bc-i-user {
        background: #8b928b !important; /* Gri */
    }
    
    #mobile-fullscreen-drawer .bc-i-history {
        background: #68a580  !important; /* Açık yeşil */
    }
    
    #mobile-fullscreen-drawer .bc-i-promotion {
        background: #adb407 !important; /* Sarı */
    }
    
    #mobile-fullscreen-drawer .bc-i-message {
        background: #5280dc !important; /* Mavi */
    }
    
    /* Maintenance Warning */
    .maintenance-warning {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        border: 1px solid rgba(245, 158, 11, 0.3) !important;
        border-radius: 8px !important;
        padding: 12px !important;
        margin-bottom: 15px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        animation: warningPulse 2s ease-in-out infinite !important;
    }
    
    .warning-icon {
        color: white !important;
        font-size: 18px !important;
        margin-top: 2px !important;
    }
    
    .warning-content {
        flex: 1 !important;
    }
    
    .warning-title {
        color: white !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.3px !important;
    }
    
    .warning-text {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
    }
    
    .warning-close {
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        color: white !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        font-size: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }
    
    .warning-close:hover {
        background: rgba(255, 255, 255, 0.3) !important;
    }
    
    @keyframes warningPulse {
        0%, 100% { 
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
        }
        50% { 
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
        }
    }
}

/* Mobile Input Focus Efekti */
#mobile-fullscreen-drawer input:focus {
    border-color: #23415f !important;
    box-shadow: 0 0 0 2px rgba(22, 160, 133, 0.2) !important;
}

/* Mobile Modern-Left Gap'i Kaldır */
#mobile-fullscreen-drawer .modern-left {
    gap: 0 !important;
}

/* Mobile Normal İconlar İçin Boşluk */
#mobile-fullscreen-drawer .modern-left i {
    margin-right: 12px !important;
}

/* Mobile Promo Message Animation - Sadeleştirilmiş */
#mobilePromoMessage {
    overflow: hidden;
    white-space: pre-line;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    transform: translateY(0);
    opacity: 1;
}

/* Balance Toggle Eye Icon Smooth Transition */
.balance-eye-btn i {
    transition: opacity 0.3s ease !important;
}

#mobileBalanceToggleIcon,
#balanceToggleIcon {
    transition: opacity 0.3s ease !important;
}

/* Scrollbar gizleme */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Responsive - Desktop'ta gizle */
@media (min-width: 769px) {
    #mobile-fullscreen-drawer {
        display: none !important;
    }
}

/* Mobile Drawer Açıkken Bottom Menu ve LiveChat Gizle */
body.mobile-drawer-open #bottomMenu,
body.mobile-drawer-open .Bottom,
body.mobile-drawer-open section.Bottom {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.mobile-drawer-open [id*="livechat"],
body.mobile-drawer-open [class*="livechat"],
body.mobile-drawer-open [id*="LiveChat"],
body.mobile-drawer-open [class*="LiveChat"],
body.mobile-drawer-open [id*="lc-"],
body.mobile-drawer-open [class*="lc-"],
body.mobile-drawer-open div[style*="livechat"],
body.mobile-drawer-open iframe[src*="livechat"],
body.mobile-drawer-open div[style*="position: fixed"][style*="bottom"],
body.mobile-drawer-open div[style*="position:fixed"][style*="bottom"] {
    display: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

/* Mobile Profil Tab Sistem Stilleri */
.mobile-profile-tab-header {
    display: flex;
    background: #23415f;
    border-radius: 8px;
    margin: 10px 20px;
    padding: 4px;
    position: relative;
}

.mobile-profile-tab-header .mobile-tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.mobile-profile-tab-header .mobile-tab-item.active {
    background: #1790a9;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(23, 144, 169, 0.3);
}

.mobile-profile-tab-header .mobile-tab-item:not(.active):hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* Mobile Drawer Layout Fix */
#mobile-fullscreen-drawer {
    display: flex;
    flex-direction: column;
}

#mobile-fullscreen-drawer.open {
    display: flex !important;
    flex-direction: column !important;
}

/* Mobile Profile Content Positioning */
.mobile-profile-back {
    position: relative;
    z-index: 10;
    order: 1;
}

.mobile-profile-tab-header {
    order: 2;
}

.mobile-profile-content {
    order: 3;
    background: rgba(0, 0, 0, 0.95);
    border-radius: 8px 8px 0 0;
    margin: 0 !important;
    width: 100% !important;
    padding: 20px !important;
}

.mobile-profile-content h2 {
    margin-top: 0;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600;
}

.mobile-profile-content .modern-field {
    margin-bottom: 12px;
}

.mobile-profile-content .modern-field-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
}

.mobile-profile-content input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Mobile Bakiye Yönetimi Tab Sistem Stilleri */
.mobile-balance-tab-header {
    display: flex;
    background: #23415f;
    border-radius: 8px;
    margin: 10px 20px;
    padding: 4px;
    position: relative;
}

.mobile-balance-tab-header .mobile-tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.mobile-balance-tab-header .mobile-tab-item.active {
    background: #1790a9;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(23, 144, 169, 0.3);
}

.mobile-balance-tab-header .mobile-tab-item:not(.active):hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* Mobile Balance Content Positioning */
.mobile-balance-back {
    position: relative;
    z-index: 10;
    order: 1;
}

.mobile-balance-tab-header {
    order: 2;
}

.mobile-balance-content {
    order: 3;
    background: rgba(0, 0, 0, 0.95);
    border-radius: 8px 8px 0 0;
    margin: 0 !important;
    width: 100% !important;
    padding: 20px !important;
}

.mobile-balance-content h2 {
    margin-top: 0;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600;
}

.mobile-balance-content .modern-field {
    margin-bottom: 12px;
}

.mobile-balance-content .modern-field-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
}

.mobile-balance-content input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Mobile Payment & Withdraw Cards */
.mobile-payment-card, .mobile-withdraw-card {
    background: #1E2631;
    border: 1px solid rgba(71, 85, 105, 0.3);
    border-radius: 5px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100px;
    max-height: 100px;
    position: relative;
}

.mobile-payment-card img, .mobile-withdraw-card img {
    width: 70px !important;
    height: 40px !important;
    object-fit: contain;
    margin-bottom: 8px;
}

.mobile-payment-card::after, .mobile-withdraw-card::after {
    content: '';
    width: 85%;
    height: 1px;
    background: rgba(71, 85, 105, 0.5);
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
}

.mobile-payment-card span, .mobile-withdraw-card span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 500;
    margin-top: 6px;
    line-height: 1.2;
    opacity: 0.6;

}

.mobile-payment-card:hover, .mobile-withdraw-card:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(23, 144, 169, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.mobile-payment-card:hover::after, .mobile-withdraw-card:hover::after {
    background: rgba(23, 144, 169, 0.7);
}

.mobile-payment-card.active, .mobile-withdraw-card.active {
    background: rgba(23, 144, 169, 0.15);
    border-color: #1790a9;
    box-shadow: 0 8px 25px rgba(23, 144, 169, 0.2);
    transform: translateY(-3px);
}

.mobile-payment-card.active::after, .mobile-withdraw-card.active::after {
    background: #1790a9;
}

.mobile-payment-card.active span, .mobile-withdraw-card.active span {
    color: #ffffff;
    font-weight: 450;
    opacity: 0.6;
}

.stories-container {
    padding: 0;
    margin: 0;
    background: transparent;
    display: none; /* Desktop'ta gizli */
}

@media (max-width: 768px) {
    .stories-container {
        display: block;
    }
}

.stories-wrapper {
    display: flex;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stories-wrapper::-webkit-scrollbar {
    display: none;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    min-width: 80px;
    transition: transform 0.2s ease;
}

.story-item:hover {
    transform: scale(1.05);
}

.story-ring {
    width: 70px;
    height: 70px;
    border: 1px solid #1e90ff;
    border-radius: 50%;
    padding: 2px;
    background: #000;
    position: relative;
}

.story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #1a1a1a;
}

.story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-title {
    display: none;
}

/* Stories Viewer - Login Modal CSS'ini override et */
#stories-viewer.login-fullscreen {
    background: rgba(0, 0, 0, 0.98) !important;
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    
    /* Login modal animasyon ayarları */
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
}

/* Stories viewer açık durumu - login modal gibi */
#stories-viewer.login-fullscreen.show {
    opacity: 1;
    transform: scale(1);
}

/* Stories viewer kapalı durumu - login modal gibi */
#stories-viewer.login-fullscreen.hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

/* Stories açıkken bottom menu gizle */
body.stories-open #bottomMenu,
body.stories-open .mobile-horizontal-menu {
    display: none !important;
}


#stories-viewer .stories-content {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.stories-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 999999;
    background: linear-gradient(rgba(0, 0, 0, 0.3), transparent);
}

.stories-progress-bar {
    display: flex;
    gap: 3px;
    margin-bottom: 15px;
}

.progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    flex: 1;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #fff;
    width: 0;
    transition: width linear;
    border-radius: 2px;
}

.stories-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transition: background 0.2s ease;
    z-index: 10002;
}

.stories-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.stories-content {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    
}

.story-image-container img {
    width: 100vh;
    height: 90vh;
    
}

.story-nav-left,
.story-nav-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    cursor: pointer;
    z-index: 999998;
    background: transparent;
}

.story-nav-left {
    left: 0;
}

.story-nav-right {
    right: 0;
}


.stories-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 10001;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}

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

#story-title {
    color: white;
    font-size: 16px;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .stories-container {
        padding: 0;
    }
    
    .story-ring {
        width: 60px;
        height: 60px;
        border: 1px solid #1e90ff;
    }
    
    .story-title {
        font-size: 11px;
    }
    
    .stories-header {
        padding: 15px;
    }
    
    .stories-close {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
}

.banner-swiper { position: relative; width: 100%; height: auto; margin-bottom: 20px; }
.swiper-slide { width: 100%; height: auto; }
.swiper-slide img { width: 100%; height: auto; display: block; }
.banner-counter { 
    position: absolute; 
    right: 10x; 
    background: linear-gradient(135deg, #000B21 0%, #0C3D64 100%) !important;
    color: #ffffff; 
    padding: 4px 8px;
    z-index: 10;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.swiper-pagination-bullet { background: white; opacity: 0.5; }
.swiper-pagination-bullet-active { opacity: 1; }

.carousel-control {
    position: absolute !important;
    top: 50% !important; 
    transform: translateY(-50%) !important; 
    z-index: 1000 !important; 
    color: white !important;
    text-shadow: none !important;
    opacity: 1 !important; 
    font-size: 24px !important; 
    display: block !important;
  }
  .carousel-control.left {
    left: 10px !important;
    z-index: 1001 !important; 
  }
  .carousel-control:hover,
  .carousel-control:focus {
    opacity: 1 !important; 
  }
  .carousel-control.left .glyphicon-chevron-left {
    font-size: 24px !important; 
  }
  .carousel-control.right .glyphicon-chevron-right {
    font-size: 24px !important; 
  }
  
  .modal {
    display: none; 
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 10px;
    overflow-y: hidden;
  }
  .modal-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 90%; 
    background-color: #003E33;
    overflow-y: hidden;
    padding: 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
  }
  .modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow-y: hidden;
  }
  .close {
    position: absolute;
    top: 10px;
    left: 20px; 
    font-size: 32px; 
    cursor: pointer;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 5px 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }
  .fullscreen-btn {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px; 
    z-index: 1000;
  }
  .fullscreen-btn:hover {
    background-color: gray;
  }
  @media only screen and (max-width: 768px) {
    .modal-content {
        width: 100%;
        height: 80%;
        padding: 10px;
    }
    .close {
      font-size: 28px; 
      top: 14px;
      left: 14px; 
      padding: 4px 8px; 
      z-index:9999;
    }
    .fullscreen-btn {
        display: none;
    }
  }
  .content2-image, .content3-image {
    position: relative;
    z-index: 0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .content2-image::before, .content3-image::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        45deg,
        rgba(255, 0, 191, 0.7),
        rgba(0, 150, 255, 0.7),
        rgba(255, 230, 0, 0.7),
        rgba(255, 0, 191, 0.7)
    );
    background-size: 400% 400%;
    z-index: -1;
    filter: blur(12px);
    opacity: 0;
    transition: opacity 0.4s ease, background-position 2.4s linear;
  }
  .content2-image:hover::before, .content3-image:hover::before {
    opacity: 1;
    background-position: 200% center; 
  }
  .content2-image:hover, .content3-image:hover {
    transform: scale(1.07) rotate(1deg);
    box-shadow: 0 12px 24px rgba(0, 255, 255, 0.6);
  }
  
  .game-slider {
      scrollbar-width: thin; 
      scrollbar-color: #064e3b #e0f2f1; 
      -webkit-overflow-scrolling: touch; 
  }
  .game-slider::-webkit-scrollbar {
      width: 8px; 
      height: 8px; 
  }
  .game-slider::-webkit-scrollbar-track {
      background: #e0f2f1; 
      border-radius: 10px; 
  }
  .game-slider::-webkit-scrollbar-thumb {
      background-color: #064e3b; 
      border-radius: 10px; 
      border: 2px solid #e0f2f1; 
  }
  .game-slider::-webkit-scrollbar-thumb:hover {
      background-color: #043927; 
  }
  @media (max-width: 768px) {
      .game-slider::-webkit-scrollbar {
          width: 12px; 
          height: 12px; 
      }
      .game-slider::-webkit-scrollbar-thumb {
          background-color: #064e3b; 
          border-radius: 12px;
          border: 3px solid #e0f2f1; 
      }
  }
  .desktop-banner {
    width: 1180px;
    height: 300px;
    margin: 20px auto;
    margin-right: 50px;
    display: block;
    border: 4px solid none;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }
  .desktop-banner img {
    width: 100%;
    height: 100%;
    display: block;
  }
  @media only screen and (max-width: 1440px) {
    .desktop-banner {
      width: 100%;
      height: auto;
    }
  }
  .game-container {
    position: relative;
    padding: 0 10px;
    margin: 0 auto;
    max-width: 1200px;
    max-height: 1250px;
  }
  
  .game-header {
    font-size: 1.4em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #eaeaea;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .view-more {
    font-size: 12px;
    font-weight: 450;
    letter-spacing: 0;
    color: #ccc;
    margin-left: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }
  
  .view-more::after {
    content: '\203A'; /* › işareti */
    font-size: 30px;   /* Okun boyutu */
    margin-left: 4px;
    margin-bottom: 3px;
    color: #ccc;
  }
  
  
  .view-more:hover {
    color: #ffffff;
    text-decoration: underline;
  }
  
  .mobile-category-menu {
    display: none;
  }
  
  @media (max-width: 768px) {
    .mobile-category-menu {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      padding: 20px 15px;
      border-top: 1px solid #333;
      box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.4);
      border-bottom: 1px solid #333;
    }
  
  .mobile-category-menu .menu-item {
    min-height: 75px;
    background: linear-gradient(135deg, #07283e 0%, #0c3d64 100%);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    text-shadow: 0 0 6px rgba(44, 149, 209, 0.6);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(44, 149, 209, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 6px rgba(28, 111, 165, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .mobile-category-menu .menu-item:hover {
    background: linear-gradient(135deg, #0c3d64 0%, #1a6fa5 100%);
    box-shadow: 0 0 15px rgba(44, 149, 209, 0.8);
    border: 1px solid rgba(44, 149, 209, 0.8);
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
  }
  
  .mobile-category-menu .menu-item img {
    width: 30px;
    height: 30px;
    margin-bottom: 7px;
    filter: drop-shadow(0 0 8px rgba(44, 149, 209, 0.6)) brightness(1.4);
  }
  
   }
  
   /* Mobil Banner Altı Resim */
   .mobile-banner-image {
     display: none;
   }
  
  
  
   @media (max-width: 768px) {
     .mobile-banner-image {
       display: block;
       width: 100vw;
       margin: 0;
       padding: 0;
       position: relative;
       left: 50%;
       right: 50%;
       margin-left: -50vw;
       margin-right: -50vw;
     }
  
     .mobile-banner-image a {
       display: block;
       width: 100%;
       text-decoration: none;
     }
  
     .mobile-banner-image img {
       width: 100%;
       height: auto;
       display: block;
       margin: 0;
       padding: 0;
       margin-top: -15px;
       transition: opacity 0.3s ease;
     }
  
     .mobile-banner-image a:hover img {
       opacity: 0.9;
     }
   }
  
  
  .menu-item i {
      font-size: 28px;      /* İkonun büyüklüğünü ayarla */
      display: block;
      margin-bottom: 6px;   /* Yazı ile arası */
      color: #fff;          /* İkon rengi */
      text-align: center;
  }
  
  .view-all {
    display: flex;
    align-items: center;
  }
  .view-all small {
    margin-right: 0.5em;
    background: linear-gradient(to right, #a8d5ba, #004d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .icon-chevron {
    width: 16px;
    height: 16px;
  }
  #game-list {
    display: flex;
    overflow-x: auto;
    overflow-y:hidden;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 1em;
  }
  .game-slider {
    display: flex;
    gap: 1em;
  }
  .game-card {
    display: flex;
    flex-direction: column;
    width: 190px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .game-image {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    border: 4px solid transparent;
    border-radius: 12px;
    border-image: linear-gradient(135deg, #30C29D, #004d00);
    border-image-slice: 1;
    box-shadow: 0 4px 15px rgba(0, 255, 0, 0.6), 0 0 25px rgba(0, 255, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .game-image:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 255, 0, 1), 0 0 35px rgba(0, 255, 0, 0.6);
  }
  .game-card::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(0, 255, 0, 0.8);
    border-radius: 10px;
    z-index: -1;
    filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .game-card:hover::before {
    opacity: 1;
  }
  .game-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  .game-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 0 0 8px 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .play-now,
  .demo-play {
    display: block;
    font-size: 1.4em;
    font-weight: bold;
    background: linear-gradient(to right, #a8d5ba, #004d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    margin-bottom: 15px;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
    transition: background 0.3s ease, transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  }
  .play-now:hover,
  .demo-play:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  .play-now.selected,
  .demo-play.selected {
    background: #004d00;
    -webkit-background-clip: unset;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  .demo-play {
    margin-bottom: 0;
  }
  .game-card:hover .game-overlay {
    opacity: 1;
  }
  .scroll-button {
    background-color: #333;
    color: white;
    border: none;
    width: 3px;
    height: 3px;
    border-radius: 20%;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .scroll-button.left {
    left: 10px;
  }
  .scroll-button.right {
    right: 10px;
  }
  .cards-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 23px;
    margin: 0 auto;
    max-width: 1320px;
  }
  .card {
    position: relative;
    background-color: rgba(30, 30, 30, 0);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
    width: 171px;
    height: 306px;
    display: flex;
    align-items: center;
    justify-content: center;
    left:20px;
  }
  .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    border: none;
    z-index: 1;
  }
  .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 0;
  }
  .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
    background-color: rgba(30, 30, 30, 0.1);
  }
  @media (max-width: 1440px) {
    .game-container {
      padding: 0 10px;
      margin: 0 auto;
    }
    .game-header {
      font-size: 1.4em;
      margin-bottom: 10px;
      margin-top: 10px;
      margin-left: 30px;
    }
    .view-all small {
      font-size: 0.9em;
    }
    .icon-chevron {
      width: 14px;
      height: 14px;
    }
    #game-list {
      gap: 0.5em;
    }
    .game-card {
      width: 180px;
    }
    .game-image {
      height: 110px;
    }
    .scroll-button {
      width: 35px;
      height: 35px;
      font-size: 14px;
    }
    .game-overlay {
      padding: 15px;
    }
    .play-now,
    .demo-play {
      font-size: 1.2em;
      padding: 7px 20px;
      background: #ff0000a6;
      margin-bottom: 10px;
    }
  }
  @media (max-width: 1024px) {
    .game-container {
      padding: 0 10px;
      margin: 0 auto;
    }
    .game-header {
      font-size: 1.3em;
      margin-bottom: -10px;
    }
    .view-all small {
      font-size: 0.8em;
    }
    .icon-chevron {
      width: 12px;
      height: 12px;
    }
    #game-list {
      gap: 0.5em;
    }
    .game-card {
      width: 160px;
    }
    .game-image {
      height: 100px;
    }
    .scroll-button {
      width: 30px;
      height: 30px;
      font-size: 12px;
    }
  }
  @media (max-width: 768px) {
    .game-overlay {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      padding: 10px;
      border-radius: 0 0 8px 8px;
    }
    .game-card.show-overlay .game-overlay {
      opacity: 1;
      visibility: visible;
    }
    .bgresim {
      margin-top: 30px;
    }
    .game-container {
      padding: 0 5px;
      margin: 0 auto;
    }
    .game-header {
      margin-bottom: -15px;
      margin-top: -15px;
      margin-left: 10px;
    }
    .view-all small {
      font-size: 0.7em;
    }
    .cards-container {
      gap: 13px !important;
      overflow-x: auto; 
      white-space: nowrap; 
    }
    .card-container {
      display: flex;
      width: 100%;
      height: auto;
      overflow-x: auto; 
      gap: 0;
      padding: 0;
      margin: 0;
      margin-left: 100px;
      align-items: center;
      white-space: nowrap; 
    }
    .card {
      width: 114px;
      height: 204px;
      left: 1px;
      flex: 0 0 auto;
    }
    .icon-chevron {
      width: 10px;
      height: 10px;
    }
    #game-list {
      gap: 0.5em;
    }
    .game-card {
      width: 160px;
    }
    .game-image {
      height: 110px;
    }
    .scroll-button {
      width: 25px;
      height: 25px;
      font-size: 10px;
    }
    .dynamic-iframe {
      z-index: 1;
      position: fixed;
      bottom: 70px; 
      right: 0px;
      width: 450px; 
      height: 300px; 
    }
  }
  @media (max-width: 480px) {
    .game-container {
      padding: 0 5px;
      margin: 0 auto;
    }
    .game-header {
      font-size: 1em;
      margin-bottom: -20px;
      margin-top: -30px;
      margin-left: 3px;
    }
  
    .view-all small {
      font-size: 0.6em;
    }
    .icon-chevron {
      width: 8px;
      height: 8px;
    }
    .game-image {
      height: 110px;
    }
    .scroll-button {
      width: 20px;
      height: 20px;
      font-size: 8px;
    }
  }
  /* Mobilde 5 tane yanyana olacak şekilde ayarlama */
  @media (max-width: 768px) {
    .resimler1 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
      padding: 10px;
    }
    .resimler1 a {
      display: block;
      text-align: center;
    }
    .resimler1 img {
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .resimler1 img:hover {
      transform: scale(1.05); 
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }
  }
  @media (min-width: 769px) {
    .resimler1 {
      display: none;
    }
  }

      /* Mobilde 5 tane yanyana */
@media (max-width: 768px) {
    .resimler1 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        padding: 10px;
    }
    .resimler1 a {
        display: block;
        text-align: center;
    }
    .resimler1 img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .resimler1 img:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }
}

/* Masaüstünde gizleme */
@media (min-width: 769px) {
    .resimler1 {
        display: none !important;
    }
}

@media (max-width: 768px) {
  .resimler-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .resimler-scroll::-webkit-scrollbar {
    display: none;
  }

.resimler-scroll a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    text-align: center;
    border-radius: 10px;
    padding: 2px;
    box-shadow: none;            /* İstersen hafif gölge de ekleriz */
    background: transparent;     /* Arkadaki beyazlığı tamamen siler */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resimler-scroll a:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(255, 77, 128, 0.3); /* Pembe hafif gölge */
}

.resimler-scroll img {
    width: 150px;
    height: auto;
    border-radius: 2px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    }
}

@media (min-width: 769px) {
  .resimler-scroll {
    display: none;
  }
}

/* Masaüstünde sadece 3 content görselleri gizle */
.three-images-section {
    display: none;
  }
  
  /* Mobile-only öğeleri masaüstünde gizle */
  .mobile-only {
    display: none;
  }
  
  /* Desktop-only öğeleri mobilde gizle */
  @media (max-width: 768px) {
    .desktop-only {
      display: none !important;
    }
    
    .mobile-only {
      display: block;
    }
  }
  
  /* Premium Ligler Başlığı */
  .premium-header.desktop-only {
    text-align: center;
    padding: 10px 0;
    margin: 10px auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .premium-header.desktop-only h2 {
    background: linear-gradient(135deg, #1e40af, #3b82f6, #60a5fa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #3b82f6;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    letter-spacing: 0.5px;
  }
  
  /* Arttırılmış Oranlar Başlığı */
  .odds-header.desktop-only {
    text-align: center;
    padding: 10px 0;
    margin: 10px auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .odds-header.desktop-only h2 {
    background: linear-gradient(135deg, #1e40af, #3b82f6, #60a5fa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #3b82f6;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    letter-spacing: 0.5px;
  }
  
  /* UEFA kartları masaüstünde görünür */
  .four-images-section.desktop-only {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    padding: 10px 15px;
    margin: 10px 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: scale(0.90);
    transform-origin: center top;
  }
  
  .four-images-section.desktop-only .image-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.3s ease;
  }
  
  .four-images-section.desktop-only .image-item:hover {
    transform: translateY(-3px);
    box-shadow: none;
  }
  
  .four-images-section.desktop-only .image-item a {
    display: block;
    text-decoration: none;
  }
  
  .four-images-section.desktop-only .image-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
  }
  
  .four-images-section.desktop-only .image-item:hover img {
    transform: scale(1.05);
  }
  
  /* Content görselleri masaüstünde görünür */
  .four-content-section.desktop-only {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 10px 15px;
    margin: 10px 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: scale(0.90);
    transform-origin: center top;
  }
  
  .four-content-section.desktop-only .image-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .four-content-section.desktop-only .image-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  }
  
  .four-content-section.desktop-only .image-item a {
    display: block;
    text-decoration: none;
  }
  
  .four-content-section.desktop-only .image-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
  }
  
  .four-content-section.desktop-only .image-item:hover img {
    transform: scale(1.05);
  }
  
  /* Sadece mobilde göster */
  @media (max-width: 768px) {
    .four-images-section.mobile-only {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 15px 20px 10px 20px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
    /* Mobilde son 4 görseli gizle */
    .four-images-section.mobile-only .image-item:nth-child(n+5) {
      display: none;
    }
    
    .four-images-section.mobile-only .image-item {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: none;
      transition: transform 0.3s ease;
    }
  
    .four-images-section.mobile-only .image-item:hover {
      transform: translateY(-3px);
      box-shadow: none;
    }
  
    .four-images-section.mobile-only .image-item a {
      display: block;
      text-decoration: none;
    }
  
    .four-images-section.mobile-only .image-item img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.3s ease;
    }
  
    .four-images-section.mobile-only .image-item:hover img {
      transform: scale(1.05);
    }
    
    .three-images-section {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 10px 20px 15px 20px;
      margin-top: 5px;
    }
    
    /* Mobilde 4. content görselini gizle */
    .three-images-section .image-item:nth-child(4) {
      display: none;
    }
    
    /* Çark görseli mobilde */
    .wheel-section.mobile-only {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px 20px;
      margin-top: 10px;
    }
    
    .wheel-section.mobile-only .wheel-item {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      width: 98%;
      max-width: 450px;
    }
    
    .wheel-section.mobile-only .wheel-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    }
    
    .wheel-section.mobile-only .wheel-item a {
      display: block;
      text-decoration: none;
    }
    
    .wheel-section.mobile-only .wheel-item img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.3s ease;
    }
    
    .wheel-section.mobile-only .wheel-item:hover img {
      transform: scale(1.05);
    }
  
    .image-item {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .four-images-section .image-item {
      box-shadow: none;
      transition: transform 0.3s ease;
    }
  
    .image-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    }
    
    .four-images-section .image-item:hover {
      transform: translateY(-3px);
      box-shadow: none;
    }
  
    .image-item a {
      display: block;
      text-decoration: none;
    }
  
    .image-item img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.3s ease;
    }
  
    .image-item:hover img {
      transform: scale(1.05);
    }
  }
  
  /* Küçük mobilter için */
  @media (max-width: 480px) {
    .four-images-section.mobile-only {
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      padding: 10px 8px 8px 8px;
      margin-bottom: 10px;
    }
    
    /* Küçük mobilde de son 4 görseli gizle */
    .four-images-section.mobile-only .image-item:nth-child(n+5) {
      display: none;
    }
    
    .three-images-section {
      gap: 8px;
      padding: 8px 15px 12px 15px;
    }
    
    /* Küçük mobilde de 4. content görselini gizle */
    .three-images-section .image-item:nth-child(4) {
      display: none;
    }
    
    /* Çark görseli küçük mobilde */
    .wheel-section.mobile-only {
      padding: 12px 15px;
    }
    
    .wheel-section.mobile-only .wheel-item {
      width: 96%;
      max-width: 400px;
    }
  }


  
/* General Card Container Styles */



/* Card Styles */
.cardkart1 {
    flex: 0 0 auto;
    background-color: rgba(30, 30, 30, 0);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
    width: 200px;
    height: 300px;
    display: flex; 
    align-items: center; 
    justify-content: center;
  }
  
  .cardkart1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .cardkart1:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
    background-color: rgba(30, 30, 30, 0.1);
  }
  
  @media (max-width: 1024px) {
    .cards-container {
      gap: 15px;
    }
    .cardkart1 {
      width: 180px;
      height: 250px;
    }
  }
  
  @media (max-width: 480px) {
    .cards-container {
      gap: 5px;
    }
    .cardkart1 {
      width: 120px;
      height: 180px;
    }
  }
  
  ::-webkit-scrollbar {
    width: 5px;
  }
  
  ::-webkit-scrollbar-track {
    background: #2d2d2d;
    border-radius: 10px; 
  }
  
  ::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 5px; 
    transition: background-color 0.3s; 
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #6a6a6a;
  }
  
  .casino-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 0 0px 0; /* Kartlara 5px boşluk */
      padding: 0 10px;
  }
  
  .section-title {
      font-size: 14px;
      color: #ffffff;
      font-weight: bold;
      margin: 0;
  }
  
  .more-link {
      font-size: 13px;
      color: #ccc;
      text-decoration: none;
  }
  
  .desktop-only {
      display: none;
  }
  
  @media (min-width: 992px) {
      .desktop-only {
          display: flex;
      }
  }
  
  .background-div {
    width: auto;
    height: auto; /* İstediğiniz yüksekliği ayarlayabilirsiniz */
}
.casino-provider {
    text-align: center;
}
.casino-provider .header {
    font-size: 24px;
    margin-bottom: 20px;
}
.casino-provider ul {
    list-style: none;
    padding: 0;
}
.casino-provider li {
    display: inline-block;
    margin: 0 15px;
}
.casino-provider img {
    width: 1000px; /* Masaüstü görünümünde resmin maksimum genişliği */
    height: 140px; /* Yüksekliği orantılı olarak ayarlama */
}
@media (max-width: 768px) {
    .casino-provider {
        margin-right:150px;
    }
    .casino-provider .header {
        font-size: 18px;
        margin-bottom: 15px;
    }
    .casino-provider li {
        display: block; /* Mobilde her resmi alt alta göster */
        margin: 10px 0;
    }
    .casino-provider img {
        max-width: 340px; /* Mobil görünümde resmin maksimum genişliği */
        max-height:100px;
    }
}

/* Genel stil */
.footer-menu-r {
    background-color: #000c24; /* Koyu gri arka plan rengi */
    color: #000c24; /* Açık gri metin rengi */
    padding: 20px; /* Padding ekleyerek boşluk oluşturma */
    border-top: 2px solid #000c24; /* Üst kenarda mavi bir çizgi */
    text-align: center; /* Metin ortalamak için */
}
/* Liste stilleri */
.footer-menu-r ul {
    list-style: none; /* Noktasız liste */
    padding: 0; /* Paddingi sıfırla */
    margin: 0; /* Margini sıfırla */
}
.footer-menu-r li {
    margin: 10px 0; /* Her bir liste elemanına dikey boşluk ekleyin */
}
.footer-menu-r a {
    color: #ecf0f1; /* Bağlantı rengi */
    text-decoration: none; /* Alt çizgi kaldır */
    font-size: 16px; /* Yazı boyutu */
    font-weight: 500; /* Yazı kalınlığı */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Geçiş efektleri */
}
.footer-menu-r a:hover {
    color: #3498db; /* Hover durumunda renk değişimi */
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); /* Metin gölgesi efekti */
}
/* Mobil görünüm */
@media (max-width: 768px) {
    .footer-menu-r {
        padding: 15px; /* Mobilde paddingi küçült */
    }
    .footer-menu-r a {
        font-size: 14px; /* Mobilde yazı boyutunu küçült */
    }
}

/* Footer Copyright */
.footer-copyright {
    color: white; /* Açık gri metin rengi */
    padding: 20px; /* Padding ekleyerek boşluk oluşturma */
    text-align: center; /* Metni ortalamak için */
    border-top: 1px solid #2c2c2c; /* Üst kenarda ince bir çizgi */
    margin-bottom:50px;
}
.footer-copyright .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* Elemanlar arasında boşluk */
}
.footer-copyright img {
    vertical-align: middle; /* Resmin metinle hizalanmasını sağlar */
    margin-left: 10px; /* Resim ile metin arasına boşluk ekler */
}
.footer-copyright .theme-copyright {
    margin-top: 10px; /* Alt kısımda boşluk ekler */
    font-size: 14px; /* Yazı boyutu */
    color: #3498db; /* Bağlantı ve tema rengi */
}
.footer-copyright a {
    color: #3498db; /* Bağlantı rengi */
    text-decoration: none; /* Alt çizgi kaldır */
    font-weight: bold; /* Bağlantı metnini kalın yapar */
}
.footer-copyright a:hover {
    text-decoration: underline; /* Hover durumunda alt çizgi ekler */
}

.payment-methods {
    font-family: Arial, sans-serif;
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.payment-title b {
    color: #999999;
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
}
.payment-slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.payment-slider {
    display: flex;
    gap: 10px;
    animation: slide 40s infinite linear;
    transition: transform 0.5s ease-in-out;
    justify-content: center; /* Resimleri ortalamak için */
}
.payment-slide {
    min-width: 80px; /* Resim genişliği */
    height: 50px; /* Resim yüksekliği */
    flex-shrink: 0;
}
.payment-slide img {
    max-width: 100%;
    max-height: 100%;
    border: 2px solid #595454;
    border-radius: 5px;
    transition: transform 0.3s ease;
}
.payment-slide img:hover {
    transform: scale(1.1);
}
/* Otomatik kaydırma animasyonu */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Destek Butonu Stilleri */
.support-button-container {
    text-align: center;
    padding: 30px 0;
}

.support-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 60px;
    border-radius: 4px;
    border: 0.1px solid #686868;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-transform: uppercase;
    min-width: 300px;
}



.support-contact-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
    border-color: #ffffff;
}

.support-contact-btn:active {
    background: rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
    .support-button-container {
        padding: 25px 0;
    }
    
    .support-contact-btn {
        padding: 10px 80px;
        font-size: 12px;
        min-width: 280px;
    }
}

/* Payments Bölümü Stilleri */
.payments-section {
    padding: 40px 0;
    text-align: center;
}

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

.payments-title {
    margin-bottom: 30px;
}

.payments-title {
    margin-bottom: 25px;
    position: relative;
}

.payments-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #404040, transparent);
    z-index: 1;
}

.payments-title span {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid #404040;
    position: relative;
    z-index: 2;
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payments-slider-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 10px 0;
}

.payments-slider {
    display: flex;
    gap: 20px;
    animation: paymentsSlide 20s infinite linear;
    width: calc(200% + 20px);
}

.payment-item {
    flex-shrink: 0;
    width: 100px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    transition: transform 0.3s ease;
}

.payment-item:hover {
    transform: scale(1.05);
}

.payment-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

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

/* Responsive */
@media (max-width: 768px) {
    .payments-section {
        padding: 30px 0;
    }
    
    .payments-container {
        padding: 0 15px;
    }
    
    .payments-title span {
        font-size: 12px;
        padding: 6px 16px;
    }
    
    .payments-title {
        margin-bottom: 20px;
    }
    
    .payment-item {
        width: 80px;
        height: 50px;
    }
    
    .payments-slider {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .payments-section {
        padding: 25px 0;
    }
    
    .payments-title span {
        font-size: 13px;
        padding: 7px 18px;
    }
    
    .payment-item {
        width: 100px;
        height: 45px;
    }
    
    .payments-slider {
        gap: 10px;
    }
}

/* Benzersiz isimlendirme ile stil */
.custom-footer-card {
    font-family: Arial, sans-serif;
    margin: 20px auto;
    text-align: center;
    width: 100%;
    position: relative;
}
.custom-footer-card .custom-head {
    font-size: 18px;
    color: #666666;
    margin-bottom: 15px;
}
.custom-slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 0;
}
.custom-slider {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: custom-slide-animation 40s linear infinite;
}
.custom-slide {
    flex-shrink: 0;
    min-width: 100px; /* Resim genişliği */
    height: 70px; /* Resim yüksekliği */
    display: flex;
    justify-content: center;
    align-items: center;
}
.custom-slide img {
    max-width: 100px;
    height: 37px;
    border: 1px solid #3f4245;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.custom-slide img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Kaydırma animasyonu */
@keyframes custom-slide-animation {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.footer-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px; /* hem sol hem sağ boşluk */
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);

}

.social-icons a {
background: linear-gradient(135deg, #000B21 0%, #0C3D64 100%) !important;
color: #ccc;
padding: 10px;
margin-right: 8px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}

.social-icons a:hover {
background: linear-gradient(135deg, #000B21 0%,rgb(10, 108, 189) 100%) !important;

color: #fff;
}

.social-icons i {
font-size: 16px;
}

.language-select {
display: flex;
align-items: center;
background: linear-gradient(135deg, #000B21 0%, #0C3D64 100%) !important;
padding: 8px 12px;
border-radius: 6px;
color: #fff;
font-size: 14px;
}

.flag-icon {
width: 20px;
height: auto;
margin-right: 6px;
border-radius: 2px;
}

section.Bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, #1f1f1f,rgb(240, 19, 19));
    z-index: 9999;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
    font-family: sans-serif;
}

.Bottom-in {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.Bottom-item {
    flex: 1;
    text-align: center;
    color: #fff;
    text-decoration: none;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 400;
}

.Bottom-item i {
    display: block;
    font-size: 21px;
    margin-bottom: 2px;
    color: #ffffff;
    transition: transform 0.3s, color 0.3s;
}

.Bottom-item:hover i {
    transform: scale(1.1);
    color: #3498db;
}

.Bottom-item span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.5px
}

.Bottom-item.ft-bottom-border:not(:last-child) {
    border-right: 1px solidrgb(255, 0, 0);
}

@media (min-width: 769px) {
    section.Bottom.deskhide {
        display: none !important;
    }
}


.icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;   /* ikon boyutuna göre ayarla */
    height: 16px;
    margin: 0 auto;
}

.icon-wrapper i {
    font-size: 18px;      /* ikon boyutunu biraz küçült */
    line-height: 1;
    display: block;
}

.badge {
    position: absolute;
    top: -7px;
    right: -8px;
    min-width: 14px;
    height: 14px;
    background: linear-gradient(135deg,rgb(0, 76, 229) 0%,rgb(0, 166, 255) 100%) !important;
    color: #fff;
    font-size: 7px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    padding: 0;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    pointer-events: none;
}

.label {
  display: block;
  font-size: 4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  margin-top: 2px;
}

.footer-info {
  padding: 30px 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  color: #ccc;
    display: flex;
  flex-direction: column; /* ALT ALTA getirecek olan satır bu */
  align-items: center;     /* Ortalamak için */
  gap: 30px;               /* Bölümler arası boşluk */
}

.footer-section {
  margin-bottom: 20px;
}

.footer-section h4 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  display: inline-block;
  margin: 0 8px;
  position: relative;
  padding-left: 10px;
}

.footer-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

.footer-section ul li:first-child::before {
  display: none; /* İlk linkte çizgi olmasın */
}

.footer-section ul li a {
  color: rgba(255, 255, 255, 0.5); /* soluk beyaz */
  font-size: 13px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section ul li a:hover {
  color: #ffffff; /* üzerine gelince beyaz ve net olsun */
  text-decoration: underline;
}

.bottom-sheet {
  position: fixed;
  border-radius: 0 !important;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #1a1a1a;
  overflow: hidden;
  transition: height 0.4s ease;
  z-index: 9999;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -2px 15px rgba(0,0,0,0.7);
  color: #fff;
}

.bottom-sheet-content {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.close-btn {
  position: absolute;
  top: -6px;
  right: 20px;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}

#sheetText {
  margin-top: 40px;
  font-size: 14px;
  line-height: 1.6;
}

.Bottom-item {
    position: relative;
}

.Bottom-item .badge {
    position: absolute;
    top: 3px;
    right: calc(50% - 20px);
    min-width: 16px;
    height: 16px;
    padding: 2px 4px;
    font-size: 8px;
    font-weight: 600;
    line-height: 12px;
    color: #fff;
    text-align: center;
    background-color:rgb(255, 111, 111);
    border-radius: 8px;
    z-index: 1;
}