/* ================================
   GLOBAL AYARLAR + KONTROLLER
   ================================ */
:root{
  /* Header yükseklik ve renkler */
  --header-h: 59px;
  --bg-page: #0c012b;
  --bg-header: #25163f;

  /* Header iç elemanları hızlı oynatmak için */
  --logo-x: -28px;    /* (+) sağa, (-) sola */
  --logo-y: 0px;    /* (+) aşağı, (-) yukarı */
  --right-x: 0px;   /* sağ ikon barı toplu X offset */
  --right-y: 0px;   /* sağ ikon barı toplu Y offset */
  --icon-gap: 7px; /* ikonlar arası boşluk */

  /* Yeşil ikonlar kapsül renkleri */
  --hdr-outer:#24163a;
  --hdr-inner:#2d1c4b;
  --hdr-green:#2f7d3b;
}

html{ background:#12042e; }

body{
  margin:0;
  font-family: "Open Sans", sans-serif;
  color:#fff;
  background: var(--bg-page);
  /* soldaki sidebar için içerikte boşluk bırakıyorsan aşağıyı kullan
     yoksa kaldırabilirsin: */
  margin-left:55px;
}

/* ================================
   HEADER (left | center | right)
   ================================ */
.site-header{
  position: fixed;
  top:0; left:0;
  width:100vw;
  height:var(--header-h);
  background:var(--bg-header);
  z-index:1000;
  box-sizing:border-box;
  padding: 0 10px;
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items:center;
}

/* Kolonlar */
.site-header .left,
.site-header .center,
.site-header .right{
  display:flex; align-items:center;
}

/* LOGO – sadece buradan oynat */
.logo{
  position:relative;
  transform: translate(var(--logo-x), var(--logo-y));
}
.logo img {
  height:36px;
  max-width:100%;
  object-fit:contain;
  display:block;

  /* Buradan hareket ettirebilirsin */
  transform: translateX(0); /* sağa 20px */
  /* transform: translateX(-20px);  sola 20px */
  /* transform: translateY(10px);   aşağı 10px */
  /* transform: translateY(-10px);  yukarı 10px */
}

/* Sağ ikon bar – sadece buradan oynat */
.site-header .right{
  justify-content:flex-end;
  transform: translate(var(--right-x, 200px), var(--right-y, 0px));
  margin-right: 250px;
}
.auth-buttons{
  display:flex;
  align-items:center;
  gap: 10px;        /* butonlar arası boşluk */
  margin-left:auto; /* sağa yapıştırır */
}

.mc-userbar{ display:flex; align-items:center; gap: var(--icon-gap); height:var(--header-h); }

/* Bakiye + Chevron aynı kapsül */
.hdr-balance-pill{
    
  display:flex; align-items:center; gap:25px;
  background:var(--hdr-outer);
  height:35px; padding:0 10px; border-radius:50px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
}
.hdr-mini{
  width:32px; height:32px; border-radius:50%; border:0;
  background:var(--hdr-inner);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
   color: var(--hdr-green); /* burada yeşil rengi veriyoruz */
}

.hdr-balance{ display:flex; align-items:center; gap:-6px; font-weight:400; line-height:1; }
.hdr-balance .amount{
    
    font-size: 13px; /* istediğin boyutu yaz */
  min-width:58px; height:32px; padding:0 40px;
  border-radius:16px; background:var(--hdr-inner);
  display:flex; align-items:center; justify-content:flex-end;
}

/* Yeşil ikon slotları (Search, Wallet, Bell, User) */
.hdr-slot{
  width:35px; height:35px;
  background:var(--hdr-outer);
  border-radius:25px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  box-shadow: inset 0 0 0 0px rgba(255,255,255,.04);
}
.hdr-circle{
  width:25px; height:25px;
  background:var(--hdr-inner); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--hdr-green);
}

/* Bildirim rozeti */
.mc-badge{
  position:absolute; top:-6px; right:-15px;
  min-width:18px; height:18px; line-height:18px;
  font-size:8px; font-weight:500; padding:0 3px;
  background:#ff3b3b; color:#fff; border-radius:25px; text-align:center;
}


/* ================================
   HAMBURGER (sol üst)
   ================================ */
.hamburger-btn{
  font-size:24px; background:none; color:#fff; border:0; cursor:pointer;
}

/* ================================
   SLIDER + SEKTÖR BLOKLARI
   ================================ */
.hero, .game-sections, .site-footer{ background:#1c0f3f; }
.hero{
  padding: 0 12px;              /* 10–14 arası deneyebilirsin */
}
.slider{
  position:relative;
  width:100%; max-width:auto; height: auto;
  aspect-ratio: 16 / 7;
  margin: 15px auto 14px auto; /* header’dan sonra */
  overflow:hidden; border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s; pointer-events:none; }
.slide.active{ opacity:1; pointer-events:auto; }
.slide img{ width:100%; height:100%; object-fit:cover; }

/* Slider dots */
.dots{
  position:absolute; left:0; bottom:10px;
  width:100%; display:flex; justify-content:center; gap:10px; z-index:10;
}
.dot{ width:10px; height:10px; border-radius:50%; background:#bbb; cursor:pointer; }
.dot.active{ background:#0d002b; }

/* ================================
   GAME LIST
   ================================ */
/* Oyun bölümleri: ortala + kenar boşluğu */
.game-sections{
  max-width: 1280px;   /* masaüstü genişlik sınırı */
  margin: 0 auto;      /* ORTALAR */
  padding: 0 16px;     /* sağ/sol nefes */
}
.game-category h2{ margin: 0 0 0; font-size:22px; color:#ffffff; }
.game-list{ display:flex; gap:25px; overflow-x:auto; padding:100px 0; }
.game-item{ flex:0 0 auto; width:154px; }
.game-item img{
  width:100%; height:209px; object-fit:cover; border-radius:8px;
  box-shadow:0 0 8px rgba(0,0,0,.3);
}
/* ===== Providers ===== */
.provider-section{
  max-width: 1280px;
  margin: 32px auto 0;
  padding: 0 16px;
}

.provider-section .section-title{
  display:flex; align-items:center; gap:10px;
  font-size: 20px; font-weight: 700; color:#fff;
  margin: 0 0 14px;
}

.provider-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.provider-item{
  height: 60px;
  background: #2a1d52;                 /* Mol rengine yakın kart */
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  padding: 0 16px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
  text-decoration:none;
}

.provider-item:hover{
  filter: brightness(1.06);
}

.provider-item img{
  max-height: 30px;
  width: auto;
  object-fit: contain;
  /* PNG logon koyuysa beyaza çevirmek için (SVG’de gerekmez): */
  /* filter: invert(1) brightness(1.15); */
}


/* ================================
   FOOTER
   ================================ */
.footer-links a{ color:#ccc; text-decoration:none; }
.footer-links a:hover{ color:#fff; }

/* ================================
   SIDEBAR (sol)
   ================================ */
.sidebar{
  position:fixed; top:0; left:0; height:100%;
  width:55px; background:#25163f;
  padding-top:100px; display:flex; flex-direction:column; align-items:center; z-index:1000;
  border-right: 3px solid #ffa200
}
.sidebar ul{ list-style:none; margin:0; padding:0; width:100%; }
.sidebar li{ width:100%; margin-bottom:8px; }
.sidebar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; text-decoration:none; color:#fff;
  width:48px; height:48px; margin:6px auto;
  background:#55378a; border-radius:10px; transition:background .3s;
}
.sidebar a:hover{ background:#5a2e96; }
.sidebar .icon img{ width:22px; height:25px; display:block; object-fit:contain; margin:0 auto; }
.sidebar .menu-label{
  font-size:12px; color:#fff; font-weight:800; padding:6px 12px 2px 14px; text-align:left;
  letter-spacing:.10px;
}

/* ================================
   MODALS (Login / Register / Wallet)
   ================================ */
.modal{
  position:fixed; inset:0; 
  display:flex; justify-content:center;
  align-items:flex-start; padding: 12px;
  background:rgba(0,0,0,.6); z-index:9999;
  overflow-y: auto;
  
}
.modal.hidden{ 
  display:none;                 /* ← gizleme burada */
}
.modal-frame{ background:linear-gradient(to bottom,#6a3bbd,#381a74);
border-radius:14px; 
padding:16px; width:100%; 
border: 6px solid #5b3c9e; 
max-width:380px; 
box-shadow:0 10px 40px rgba(0,0,0,.35);
background: linear-gradient(180deg,#6a3bbd,#381a74);}


.modal-title{ 
    display:flex; 
align-items:center; 
gap:10px;
margin: 0 0 12px;
font-size:20px; 
font-weight:bold;
justify-content: space-between; /* İkon solda, çarpı sağda */
}
.close-btn {
  font-size: 22px; /* Çarpıyı büyütür */
  cursor: pointer;
  color: white; /* Beyaz yapar */
}
.field-label{
  margin: 8px 0 6px;
  padding-left: 10px; /* Yazıyı hafif sağa kaydırır */
  font-size: 16px;
  font-weight: 450;
  opacity: 1; /* Tam görünür */
  color: #ffffff;
  letter-spacing: 0.3px; /* Harf arası hafif boşluk */
  opacity: .95;
}
 
.title-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  filter: brightness(0) invert(1); /* Beyaz yapar */
}
.title-icon i{
  font-size:12px; background:#fff; 
  color:#5c2cc5; 
  border-radius:50%;
  width:24px; height:24px; 
  display:inline-flex; 
  align-items:center; 
  justify-content:space-between;
}
.modal-content{ background:#1b0f34;; border-radius:3px; padding:30px 20px; color:#fff; }
.modal-inner{ font-family:'Poppins', sans-serif; }
.input-group{ margin-bottom:15px; }
.input-group input, 
.form-row input, 
.form-row select, 
.input-group select{
  width:100%; 
  padding:12px; 
  background:#12082a; 
  border:0px solid #513486; 
  border-radius:6px; 
  color:#fff; 
  font-size:18px; 
  box-sizing:border-box;
}
.input-group input:focus{
  border-color:#845eed;
  box-shadow:0 0 0 3px rgba(132,94,237,.25);
}
.options{ display:flex; justify-content:space-between;
align-items:center; 
font-size:16px; margin-bottom:30px;
gap: 10px;
}
.login-submit{ width:100%;
height: 48px;
padding:12px 0; 
background:#42b225; 
color:#fff; 
border:0; border-radius:6px; 
font-weight:600; 
font-size:16px; 
cursor:pointer; }
.login-submit:hover{ filter:brightness(1.05); }
.register-text{
  text-align:center;
  margin: 10px 0 14px;
}
.register-text a{ color:#42b225; font-weight:500; }
/* Başvurulan çizgi orijinal hissi için */
.modal-content hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.12);
  margin: 8px 0 14px;
}
.live-support{
    
  width:100%;
  height:48px;
  border-radius:8px;
  background:#513486;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  gap: 6px;
  color: #fff;
}
  .support-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  filter: brightness(0) invert(1);
}


/* ================================
   KÜÇÜK DOKUNUŞLAR
   ================================ */
.category-tabs{
  max-width: 1280px;
  margin: 20px auto 0;
  display:flex; justify-content:center; gap:1px; flex-wrap:wrap;
  background:#1b0b3b; border-radius:50px; padding:10px 20px; margin-top:20px;
}
.category-tabs .tab{
  display:flex; align-items:center; gap:6px; color:#ccc; font-weight:600;
  padding:12px 20px; border-radius:25px; text-decoration:none; transition:.2s; font-size:15px;
}
.category-tabs .tab:hover{ background:#2a1d52; color:#fff; }
.category-tabs .tab.active{ background:#2ecc71; color:#fff; }

/* ================================
   YARDIMCI
   ================================ */
.hidden{ display:none; }

/* Parlama animasyonu (register btn) */
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 8px #00ff88; }
  50%{ box-shadow:0 0 18px #00ff88; }
}
@media (max-width: 1024px){
  .game-sections{
    max-width: 100%;
    padding: 0 12px;
  }
}
body { margin-left:0; }

@media (max-width: 768px){

  /* 1) Sidebar’ı mobilde kapat; body’den soldaki boşluğu kaldırır */
  body{ margin-left:0; }                  /* içerik artık tam ekran */
  .sidebar{ display:none; }               /* sol menüyü gizle (ileride hamburgerle açarsın) */

  /* 2) Header daha sıkı ve logo ortada */
  .site-header{ padding:0 10px; height:56px; }
  .logo{ transform:none; }                /* root’taki --logo-x/y etkisini mobilde sıfırla */
  .logo img{ transform:none; margin:0 auto; height:32px; } /* tam ortaya oturur */
  .site-header .right{ transform:none; margin-right:0; }   /* sağ ikon barını resetle */
  .mc-userbar{ gap:8px; }                 /* ikonlar arası boşluk biraz daralsın */

  /* 3) Slider tam genişlik + daha kısa */
  .slider{
    max-width:100%;
    height:200px;                         /* 180–220 arası deneyebilirsin */
    margin: 64px auto 16px auto;          /* header’dan sonra küçük boşluk */
    border-radius:8px;
  }

  /* 4) Kategori çubuğu ortalansın ve sarılsın */
  .category-tabs{
    margin: 8px auto 12px;
    padding: 8px 10px;
    max-width: calc(100% - 20px);
    justify-content:center;
    gap:6px;
  }
  .category-tabs .tab{ padding:8px 12px; font-size:14px; }

  /* 5) Bölüm içleri ortalansın, yanlardan nefes alsın */
  .game-sections{
    padding: 0 10px 24px;                 /* sağ/sol padding */
    max-width: 100%;
    margin: 0 auto;
  }
  .game-category h2{ margin: 12px 0 10px; font-size:18px; }

  /* 6) Kart listesi: satıra sığdır, ortala, 2’li ızgara yap */
  .game-list{
    flex-wrap: wrap;                      /* tek satıra sıkışma */
    justify-content: center;              /* ortala */
    gap: 12px;                            /* kart araları */
    padding: 8px 0 16px;
  }
  .game-item{
    width: calc(50% - 12px);              /* 2 sütun */
    max-width: 220px;                     /* çok geniş ekranlarda taşmasın */
  }
  .game-item img{
    height: 150px;                        /* mobilde daha kısa */
    border-radius:10px;
  }

  /* 7) Providers bölümü mobil 2 sütun */
  .provider-section{ padding: 0 10px; }
  .provider-list{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  .provider-item{ height:56px; }
  .provider-item img{ max-height:24px; }
}
/* =========================
   MOBİL DÜZEN (≤768px)
   ========================= */
@media (max-width: 768px){

  /* 1) Genel boşluklar */
  body{
    margin-left: 0;             /* sol sabit menü telafisini kaldır */
    padding-top: 56px;          /* header sabitse içerik alta insin */
  }

  /* 2) Header */
  .site-header{
    height: 56px;
    padding: 0 12px;
    grid-template-columns: auto 1fr auto; /* solda menü / ortada logo / sağda ikonlar */
  }
  .logo{ transform:none; }                 /* senin var olan offsetlerini sıfırla */
  .logo img{
    height: 30px;
    transform:none;                        /* varsa masaüstü translate’lerini iptal et */
    margin: 0 auto;                        /* ortala */
  }
  .site-header .right{
    transform:none;                        /* masaüstü X/Y offsetlerini iptal et */
    margin-right: 0;
    gap: 6px;
  }

  /* 3) Sidebar (mobilde gizle ya da off-canvas yap) */
  .sidebar{
    display: none;                         /* hızlı çözüm: tamamen gizle */
    /* off-canvas istersen:
    display:flex;
    transform: translateX(-100%);
    transition: transform .3s ease;
    position: fixed; top:0; left:0; height:100vh; z-index: 1200;
    }
    .sidebar.is-open{ transform: translateX(0); }
    */
  }

  /* 4) Slider daha dar ve kısa */
  .slider{
      width: 100%;
    max-width: 100%;
    height: 200px;
    margin: 8px auto 12px;
    border-radius: 8px;
  }

  /* 5) Kategori sekmesi */
 .category-tabs{
    display: flex;
    justify-content: flex-start;   /* ortalamayı bırak, sola hizala */
    flex-wrap: nowrap;              /* >>> ALT ALTA DÜŞMESİN <<< */
    overflow-x: auto;               /* sağa-sola kaydır */
    -webkit-overflow-scrolling: touch; /* iOS için yumuşak scroll */
    gap: 8px;
    padding: 8px 12px;
    width: 100%;
  }
  /* scrollbar gizle (opsiyonel) */
  .category-tabs::-webkit-scrollbar{ display:none; }
  .category-tabs{ scrollbar-width: none; }

  /* Her chip sabit genişlikte bir “öğe” olsun, satır kırmasın */
  .category-tabs .tab{
    flex: 0 0 auto;                 /* shrink etme, satır kırma */
    white-space: nowrap;            /* metni tek satırda tut */
  }
}

  /* 6) “Hot Games / Slots” başlık ve grid */
  .game-sections{ padding: 10px; }
  .game-category h2{ margin: 14px 10px 8px; font-size: 18px; }

  /* Yatay kaydırma yerine 2 kolon kutu görünümü */
  .game-list{
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
    overflow-x: visible;
  }
  .game-item{
    width: calc(50% - 12px);     /* 2 sütun */
  }
  /* Çok dar cihazlarda 1 sütun */
  @media (max-width: 20px){
    .game-item{ width: 100%; }
  }
  .game-item img{
    height: auto;                /* oranı koru; görsel kendi yüksekliğini alsın */
    aspect-ratio: 3 / 4;         /* kart oranını sabitle (isteğe bağlı) */
    object-fit: cover;
  }

  /* 7) Providers (logo satırı) */
  .provider-section{ padding: 0 10px; }
  .provider-section .section-title{ font-size: 18px; }
  .provider-list{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  .provider-item{
    height: 54px;
    border-radius: 10px;
    padding: 0 10px;
  }
  .provider-item img{ max-height: 26px; }


/* Login: link gibi düz beyaz metin */
.login-btn{
  background: transparent;
  border: 0;
  color: #fff;
  height: 36px;
  line-height: 36px;   /* dikey ortalama */
  padding: 6 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  -webkit-appearance: none;
}
.login-btn:hover{ opacity:.100; }

/* Register: yeşil, oval kapsül */
.register-btn{
  background: #2ecc71;
  color:#fff;
  border: 1px solid #1f9a4f;
  height: 36px;
  line-height: 34px;
  padding: 0 14px;
  border-radius: 5px;   /* kapsül */
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -webkit-appearance: none;
}

.register-btn:hover{ filter: brightness(1.07); }
@media (max-width: 480px){
  .site-header .right{ gap:8px; }
  .auth-buttons{ gap:8px; }

  .login-btn{
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    padding: 0 4px;
  }
  .register-btn{
    height: 32px;
    line-height: 30px;
    padding: 0 12px;
    border-radius: 16px;
    font-size: 14px;
  }
}
@media (max-width: 480px){
  .modal-frame{ max-width: 360px; padding:14px; }
  .modal-content{ padding:14px; }
  .modal-title{ font-size:18px; }
  .input-group input{ height:46px; font-size:14px; }
  .login-submit, .live-support{ height:46px; }
}
/* Register modal başlık düzeni */
#registerModal .modal-title{
  display: flex;
  align-items: center;
  justify-content: space-between; /* sol grup + sağda X */
  gap: 10px;
  margin: 0 0 12px;
}

#registerModal .modal-inner .input-group,
#registerModal .modal-inner .form-row,
#registerModal .modal-inner select {
  margin-bottom: 8px;   /* orijinale yakın sık aralık */
}
#registerModal .modal-title .head-left{
  display: flex;
  align-items: center;
  gap: 8px;              /* ikon-yazı arası */
}
#registerModal .form-row {
  display: flex;
  gap: 8px; /* iki kutu arasındaki boşluk */
}

#registerModal .form-row .half {
  flex: 1; /* her biri eşit genişlik */
}

#registerModal .form-row .half input {
  width: 100%;
}
#registerModal .modal-title .title-icon{
  width: 32px;
  height: 25px;
  filter: brightness(0) invert(1); /* beyaz */
}

#registerModal .modal-title .title-text{
  font-weight: 950;
}

/* Başlıktaki büyük X */
#registerModal .modal-title .close-btn{
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 40px;   /* büyüklük */
  line-height: 1;
  cursor: pointer;
  margin-left: auto; /* en sağa yasla */
}
.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background-color: #1c0033;
}

.mh-logo {
  height: 28px;
}

.mh-balance {
  background: #2b0d57;
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
}

.mh-right {
  display: flex;
  gap: 8px;
}

.mh-icon {
  background: #2b0d57;
  border-radius: 50%;
  padding: 6px;
  color: white;
  font-size: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sadece mobilde göster */
@media screen and (max-width: 768px) {
  .mobile-header { display: flex; }
}
@media screen and (min-width: 769px) {
  .mobile-header { display: none; }
}

/* ==== Mobil Alt Menü ==== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #2c085c;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 1000;
}

.mobile-bottom-nav a {
  color: white;
  text-align: center;
  font-size: 12px;
  text-decoration: none;
}

.mobile-bottom-nav i {
  font-size: 18px;
  display: block;
  margin-bottom: 4px;
}

/* ==== Sadece Mobilde Göster ==== */
@media screen and (max-width: 768px) {
  .mobile-header {
    display: flex;
  }
  .mobile-bottom-nav {
    display: flex;
  }
}

/* Masaüstünde Gizle */
@media screen and (min-width: 769px) {
  .mobile-header, .mobile-bottom-nav {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .site-header, .header, .top-header { 
    display: none !important; 
  }
}
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #55378a; /* mor ton */
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 10px 0 8px;
  z-index: 9999;
}
.mobile-bottom-nav .mb-arc{
  position:absolute;
  top:-28px;                 /* kavis ne kadar yukarı çıkacak */
  left:50%;
  transform:translateX(-50%);
  width:72px; height:72px;   /* kavis çapı */
  background:#55378a;        /* bar ile aynı renk */
  border-radius:50%;
  z-index:0;                 /* wallet ikonunun arkasında */
}

.mb-item {
    position:relative;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height:1.1;
  z-index:1;
}
.mb-item img {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto 4px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Beyaz yapar */
}
.mb-item i {
  display: block;
  font-size: 18px;
  margin-bottom: 3px;
}

.mb-item.wallet{
  position:relative;
  z-index:2;                 /* kavisin üstünde */
  padding-top:38px;          /* üstte çembere yer aç */
  background:transparent;    /* önceki daire/renkleri kapat */
  margin-top:0;
}
 .mb-item.wallet::before{
  content:"";
  position:absolute;
  left:50%;
  top:-28px;                 /* kavis ile aynı tepe noktası */
  transform:translateX(-50%);
  width:64px; height:64px;   /* çember çapı (kavisten biraz küçük) */
  border-radius:50%;
  background:#25163f;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
  z-index:1;
} 

/* Wallet için genel filtreyi iptal et ve turuncu yap */
.mb-item.wallet img{
  position:absolute;
  left:50%;
  top:-28px;                 /* çemberin tepesine hizalanır */
  transform:translate(-50%, 19px); /* dikey merkez için küçük offset */
  width:26px; height:26px;
  z-index:2;
  /* turuncu (#ffa200) tonu */
  filter: invert(55%) sepia(92%) saturate(2500%) hue-rotate(-10deg) brightness(100%) contrast(100%) !important;
}

/* Yazı: çemberin altında */
.mb-item.wallet span{
  display:block;
  margin-top:18px;           /* ikon/çember altına boşluk */
}

@media screen and (min-width: 769px) {
  .mobile-bottom-nav {
    display: none;
  }
}
/* ===== Bottom Bar: orijinale yakın düzen ===== */
.mobile-bottom-nav{
  position: fixed;
  left:0; right:0; bottom:0;
  height:64px;
  background:#56368e;                    /* bar rengi */
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px;
  z-index:9999;
  box-shadow:0 -2px 10px rgba(0,0,0,.25);
}

/* Kavis (barın üst kenarında yarım daire kesik) */
.mobile-bottom-nav .mb-arc{
  position:absolute;
  top:-20px;                              /* kavis yüksekliği */
  left:50%; transform:translateX(-50%);
  width:70px; height:70px;                /* kavis çapı */
  background:#56368e;                     /* bar ile aynı */
  border-radius:50%;
  z-index:0;                              /* barın bir parçası */
}

/* Sol/Sağ item’lar */
.mobile-bottom-nav .mb-item{
  width:20%;
  min-width:62px;
  text-align:center;
  color:#fff; text-decoration:none;
  font-size:12px; line-height:1.1;
  position:relative; z-index:1;           /* kavis üstünde kalsın */
}
.mobile-bottom-nav .mb-item img{
  width:22px; height:22px; display:block; margin:0 auto 6px;
  object-fit:contain;
  filter: brightness(0) invert(1);        /* beyaz */
}
.mb-item, .mb-spacer{
  flex:1 1 0;                    /* hepsi eşit bölünsün */
  min-width:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.mb-item{ color:#fff; text-decoration:none; font-size:12px; line-height:1.1; z-index:1; }
.mb-item img{ width:22px; height:22px; margin:0 auto 6px; filter:brightness(0) invert(1); }

/* Merkez FAB (Wallet) */
.mb-fab{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:-25px;                              /* bar üstüne taşma */
  width:65px; height:65px;                /* dış koyu mor daire */
  border-radius:50%;
  background:#2c1b4f;                     /* dış koyu mor çerçeve */
  border:10px solid #56368e;              /* çerçeveyi bar rengine bağla → kavise oturur */
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0px 0px rgba(0,0,0,.35);
  z-index:5;                              /* kavis ve item’ların üstünde */
  padding:0; border-width:10px;
  cursor:pointer;
}
.mb-fab img{
  width:26px; height:26px;
  /* siyah png → #FFA200 turuncu */
  filter: invert(59%) sepia(96%) saturate(2500%) hue-rotate(-8deg) brightness(101%) contrast(102%);
  transform: translateX(-8px); /* 1–3px arası dene */
}

/* FAB yazısı barın içinde, dairenin ALTINDA */
.mb-fab-label{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:12px;                              /* bar tabanından mesafe */
  font-size:12px; col0or:#fff;
  z-index:1;
}

/* Sadece mobilde göster */
@media (min-width: 769px){
  .mobile-bottom-nav{ display:none; }
}
/* alt menü label'larını kaydırmak için ortak ayar */
.mobile-bottom-nav .mb-item span{
  display:block;
  transition: transform .15s; /* akıcı hareket (opsiyonel) */
}

/* Sport yazısını 6px sola kaydır */
.mb-sport img, .mb-sport span{ transform: translateX(-50px); 
}

/* Search yazısını 6px sağa kaydır */
 .mb-search img, .mb-search span{ transform: translateX(-25px); }

 .mb-account {
  transform: translateX(-20px);
}
/* === MOBİL HEADER FIX === */
@media (max-width:768px){
  /* "mobile-header" ı kapat, gerçek header'ı aç */
  .mobile-header{ display:none !important; }

  .site-header{
    display:grid !important;
    position:fixed; top:0; left:0; right:0;
    height:56px;
    background:#25163f;              /* koyu mor çerçeve */
    padding:0 10px;
    grid-template-columns:auto 1fr auto;  /* sol logo | boşluk | sağ ikonlar */
    align-items:center;
    box-shadow:0 2px 0 rgba(0,0,0,.2);
    z-index:1000;
  }

  /* içerik header’ın altından başlasın */
  body{ padding-top:56px; }
}

@media (max-width:768px){
  .logo{ transform:none !important; }
  .logo img{
    height:28px; margin:0; transform:none !important;
  }
  /* sol kolon */
  .site-header .left{ justify-content:flex-start; }
  /* hamburger’ı mobilde gizlemek istersen: */
  .hamburger-btn{ display:none; }
}
@media (max-width:768px){
  .site-header .right{
    transform:none !important;
    margin-right:0 !important;
  }
  .mc-userbar{ gap:8px; }

  /* Bakiye kapsülü */
  .hdr-balance-pill{
    height:34px; padding:0 6px; gap:8px;
  }
  .hdr-mini{ width:30px; height:30px; }
  .hdr-balance .amount{
    font-size:13px; min-width:56px; height:30px; padding:0 12px;
  }

  /* Yeşil ikon slotları */
  .hdr-slot{ width:36px; height:36px; }
  .hdr-circle{ width:26px; height:26px; }

  /* Eğer ikonları <img> ile koyacaksan, yeşil filtre: */
  .hdr-circle img{
    width:22px; height:22px; display:block;
    /* #2f7d3b yakın yeşil */
    filter: invert(42%) sepia(16%) saturate(1292%) hue-rotate(76deg) brightness(92%) contrast(92%);
  }
}
@media (max-width:768px){

  /* Tepe bar */
  .site-header{
    position:fixed; top:0; left:0; right:0;
    height:60px;
    background:#25163f;
    display:grid !important;
    grid-template-columns:auto 1fr auto; /* logo | boşluk | sağ grup */
    align-items:center;
    padding:0 12px;                 /* sağ kenara hafif nefes */
    z-index:1000;
  }
  body{ padding-top:70px; }         /* içerik alta insin */

  /* Logo: sadece mobil versiyonu göster */
  .logo{ transform:none !important; }
  .logo-desktop{ display:none !important; }
  .logo-mobile{ display:block !important; height:40px; margin:0; }

  /* Sağ grubu toparla ve sağdan çok yapışmasın */
  .site-header .right{
    transform:none !important;
    margin-right:15px;               /* istersen 6–8px yapabilirsin */
  }
  .mc-userbar{ gap:8px; }

  
  

  /* Bakiye + chevron kapsülü — sağ gruba yakın */
  .hdr-balance-pill{
    height:34px; padding:0 8px; gap:10px;
    background:var(--hdr-outer);
    border-radius:50px;
    margin-right:2px;               /* ikonlara yaklaşsın */
  }
  .hdr-mini{ width:35px; height:35px; background:var(--hdr-inner); color:var(--hdr-green); }
  .hdr-balance .amount{ height:30px; min-width:56px; padding:0 12px; background:var(--hdr-inner); font-size:13px; }

  /* Yeşil ikon kutuları – dış (#0c012b), iç (#25163f), ikonlar yeşil  */
  .hdr-slot{
    width:36px; height:36px;
    background:var(--hdr-outer);
    border-radius:24px;
  }
  .hdr-circle{
    width:26px; height:26px;
    background:var(--hdr-inner);
    border-radius:50%;
    color:var(--hdr-green);         /* inline SVG'lerde fill="currentColor" ise bu rengi alır */
    display:flex; align-items:center; justify-content:center;
  }
  /* <img> ikon kullanıyorsan yeşile boya */
  .hdr-circle img{
    width:22px; height:22px; display:block;
    filter: invert(42%) sepia(16%) saturate(1292%) hue-rotate(76deg) brightness(92%) contrast(92%);
  }

  /* Mobilde SEARCH ikonunu kaldır */
  .hdr-slot[title="Search"]{ display:none !important; }
}
@media (max-width:768px){
  .site-header{ grid-template-columns:auto 1fr auto; }
  .site-header .right{ margin-right:8px; }      /* sağa çok yapışmasın */
  .mc-userbar{ gap:8px; }                       /* grup aralığı */

  /* Bakiye + chevron kapsülü, ikona yakın dursun */
  .hdr-balance-pill{ background:#0c012b; margin-right:6px; }
  .hdr-mini{ background:#0c012b; color:#2f7d3b; }
  .hdr-balance .amount{ background:#0c012b; }
  
  .hdr-balance-pill{
  background:#0c012b;
  margin-right:6px;
  padding:4px 1px;      /* üst-alt 4, sağ-sol 8 */
  border-radius:17px;   /* köşeler */
}


.hdr-mini{ background:#0c012b; color:#2f7d3b; }
.hdr-balance .amount{ background:#0c012b; }

  /* Sağdaki ikon kapsülleri */
  .hdr-slot{   background:#0c012b; border-radius:24px; }
  .hdr-circle{ background:#25163f; color:#25163f; }
  

  /* Mobilde Search’i kaldır */
  .hdr-slot[title="Search"]{ display:none !important; }
}
/* === MOBİL: Sağdaki 3 ikonu tek koyu mor kapsül gibi göster (HTML'e dokunmadan) === */
@media (max-width:768px){
  /* Search zaten mobilde gizli, geriye Wallet + Bell + Account kalıyor */
  .hdr-slot[title="Search"]{ display:none !important; }

  .mc-userbar{
    position: relative;
    gap: 10px;                 /* ikonlar arası boşluk */
  }

  /* Arka plandaki kapsül (üç ikonu sarar) */
  .mc-userbar::after{
      background: var(--hdr-outer);
  border-radius: 5px;
  padding: 25px -10px; /* buradaki ilk değer üst-alt, ikinci sağ-sol */
    content:"";
    position:absolute;
    right: -9px;                /* sağ kenardan ufak nefes */
    top: 50%;
    transform: translateY(-20px);
    width: 115px; /* Kapsülün uzunluğu */
    height: 38px;
   
    

    /* genişlik = 3 ikon (36*3) + 2 boşluk (10*2) + iç yastık (16px) */
    width: calc(36px * 3 + 10px * 2 + 16px);
    background: #0c012b;   /* #0c012b */
    border-radius: 24px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
    z-index: 0;               /* ikonların arkasında kalsın */
  }

  /* İkon butonlarının kendi koyu kutusunu kaldır, sadece iç daire kalsın */
  .mc-userbar .hdr-slot{
    background: transparent !important;
    box-shadow: none !important;
    width: auto; height: auto;
    padding: 0;
    position: relative;
    z-index: 1;               /* kapsülün üstünde */
  }

  /* İç küçük daire (#25163f) + yeşil ikon */
  .mc-userbar .hdr-circle{
    width: 30px; height: 30px;
    background: var(--hdr-inner);
    border-radius: 50%;
    color: #42b225;
    display:flex; align-items:center; justify-content:center;
  }
.hdr-circle svg {
  width: 22px;      /* Önceden 18-20px ise burayı arttır */
  height: 22px;
  
}
  
  }

  /* Bakiye kapsülünü sağ gruba yaklaştır */
  .hdr-balance-pill{ margin-right: 8px; }

/* KAPSÜLÜN ARKASINDA DURACAK ZEMİN */
.mc-userbar{
  position: relative;              /* 1) ::after buna göre konumlansın */
  padding-right: 6px;              /* sağ kenara nefes (isteğe bağlı) */
}

.mc-userbar::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;                     /* sağa kaydırma */
  transform: translateY(-50%);     /* dikey merkez */
  width: 116px !important;         /* 2) genişlik (görmüyorsa !important koy) */
  height: 45px !important;         /* yükseklik */
  background: #0c012b;
  border-radius: 15px;
  display: block;                  /* 2) inline olmasın */
  z-index: 0;                      /* arkada kalsın */
  pointer-events: none;            /* tıklamayı engellemesin */
}

/* Üstte görünen elemanları öne al */
.hdr-balance-pill,
.hdr-slot{
  position: relative;
  z-index: 1;                      /* kapsülün üstünde kalsınlar */
}
/* === BAKİYE KAPSÜLÜ — kompakt & bölmeli === */
.hdr-balance-pill{
  background:#0c012b;         /* dış koyu mor */
  height:45px;
  padding:0 8px;               /* sağ-sol dar */
  border-radius:20px;
  display:flex; align-items:center; gap:10px;
}

/* Sol yuvarlak (chevron) */
.hdr-mini{
  width:35px; height:35px;
  background:#25163f;          /* iç küçük daire */
  border-radius:50%;
  color:#4dc941;               /* ikon yeşil (SVG currentColor) */
  display:flex; align-items:center; justify-content:center;
  position:relative;
}

/* Chevron’dan sonra ince dikey çizgi */
.hdr-mini::after{
  content:"";
  position:absolute;
  right:-6px;                  /* miktara yaklaştır */
  top:0px; bottom:5px;
  width:1px;
  height:30px;
  background:rgba(255,255,255,.12);
  border-radius:0px;
}

/* Rakam kısmı: min-width’i kaldır, sıkılaştır */
.hdr-balance{ display:flex; align-items:center; gap:8px; }
.hdr-balance .amount{
  min-width:auto;              /* önceki min-width’i iptal et */
  height:28px;
  padding:0 10px;              /* daralt */
  border-radius:14px;
  background:#0c012b;
  font-weight:700;
  font-size:14px;
  line-height:28px;
}

/* Göz ikonu yuvası (sağ uçtaki küçük daire) */
.hdr-balance .eye{
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#25163f; border-radius:50%;
  margin-left:2px;
  filter: invert(100%);        /* PNG ise beyaz yapar; SVG ise kaldırabilirsin */
  opacity:.85;
}
/* Sağdaki ikon kapsülleri için */
.hdr-slot {
  background: var(--hdr-outer);
  border-radius: 24px;
  border: none;
  outline: none;
  box-shadow: none;
}

/* Hover, focus ve active durumlarında da aynı görünüm kalsın */
.hdr-slot:hover,
.hdr-slot:focus,
.hdr-slot:active {
  background: var(--hdr-outer);
  border: none;
  outline: none;
  box-shadow: none;
}
/* Grid: masaüstü 3, mobil 2 sütun */
.wm-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 768px){
  .wm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Daha önce 420px altında 1 kolona düşürüyorduk.
   Artık 420'de de 2 kolon kalsın istiyorsan ya o bloğu sil
   ya da şöyle güncelle: */
@media (max-width: 420px){
  .wm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Kartlar: ikon + başlık dikey hizalı */
.wm-card{
  display:flex;
  flex-direction:column;         /* ikon üstte, yazı altta */
  align-items:center;
  justify-content:center;
  gap:8px;
  height:110px;                  /* mevcut yükseklik korunur */
  background:#4f2376;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  font-weight:500;
  letter-spacing:.3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);
}
.wm-card img{
  width:34px; height:34px;       /* ikon boyu */
  object-fit:contain;
  display:block;
}
.wm-card span{
  font-size:12px;
  text-align:center;
  line-height:1.15;
}

/* İstersen mobilde kartları biraz kısalt */
@media (max-width: 768px){
  .wm-card{ height:10px; }
  .wm-card img{ width:100px; height:30px; }
}
/* Wallet header düzeni */
.wm-header{
    display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;     /* ← kutu yok */
  border-radius:0;
  padding:0;                  /* üstte dış kutu kenarıyla bitişik */
  margin:0 0 10px;            /* altta küçük boşluk */
  color:#E6DBFF;              /* açık mor metin */
}

/* Kapatma butonunu en sağa it */
.wm-close{
  margin-left:auto;
}

/* Başlık + logo yan yana ve daha büyük */
.wm-title{
  display:flex;
  align-items:center;
  gap:10px;              /* logo ile yazı arası */
  font-size:20px;       /* yazıyı büyüt */
  font-weight:100;
  line-height:1.1;
  text-align:left;      /* ortalamayı zorlayan kurallar varsa ezsin */
}

/* Logoyu .wm-title içine koyduysan */
.wm-title img

.wm-title .wm-logo{
  height:50px;          /* logo boyu */
  width:auto;
}
#walletModal .wm-box{ border-color:#6d4cc1 !important; }

#walletModal .wm-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 0 10px !important;
  color:#E6DBFF !important;
}

#walletModal .wm-title{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  font-weight:550 !important;
  font-size:22px !important;
  line-height:1.1 !important;
  color:#E6DBFF !important;
}

#walletModal .wm-title .wm-logo{ height:20px !important; width:auto !important; }

#walletModal .wm-close{
  background:transparent !important;
  border:0 !important;
  color:#E6DBFF !important;
  font-size:28px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.wm-sub {
  font-size: 18px;
  font-weight: 250;
  text-align: center;
  color: #fbfafc;
  margin: 10px 0;
  text-transform: uppercase;
}
.wm-flow{background:#140b23;border-radius:12px;padding:14px;margin-top:10px}
.wm-flow-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:10px}
.wm-back,.wm-next{
  background:#2b1c4d;border:0;border-radius:8px;width:36px;height:36px;
  color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer
}
.wm-flow-note{color:#e6dbff;text-align:center;font-size:14px;opacity:.9}

/* banka başlığı */
.wm-bankbar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,#8b2bff,#d043ff);
  border-radius:10px;color:#fff;font-weight:700;padding:10px 12px;margin-bottom:12px
}
.wm-bankbar .bank-left{display:flex;align-items:center;gap:10px}
.wm-bankbar img{width:22px;height:22px;object-fit:contain}
.wm-bankbar .bank-name{letter-spacing:.4px}
.wm-bankbar .bank-min{font-weight:800;opacity:.95}

/* promosyon listesi */
.wm-promos{background:#1a0f2f;border-radius:10px;padding:8px 6px;margin-bottom:12px}
.wm-promos-title{color:#cfc2ff;padding:8px 8px 6px;font-weight:700}
.wm-radio{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  background:#140a27;border-radius:10px;margin:6px;padding:10px 10px;position:relative
}
.wm-radio input{display:none}
.wm-radio .r-ui{
  width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)
}
.wm-radio input:checked + .r-ui{box-shadow:inset 0 0 0 6px #12d070}
.wm-radio .r-text .r-title{font-weight:700}
.wm-radio .r-text small{opacity:.7}
.wm-radio .r-help{background:#2b1c4d;border:0;border-radius:50%;width:28px;height:28px;color:#fff;cursor:pointer}

/* açıklama alanı ve uyarılar */
.wm-desc{
  width:100%;height:42px;border:0;border-radius:8px;background:#4e3a8a;
  color:#fff; padding:0 12px; margin:8px 0 10px; opacity:.95
}
.wm-alert{border-radius:8px;padding:10px 12px;margin:8px 0;font-size:14px}
.wm-alert--note{background:#ffecc4;color:#4a3900}
.wm-alert--warn{background:#ffd27a;color:#3a2a00}

/* CTA */
.wm-cta{margin-top:12px;width:100%;height:48px;border-radius:10px;border:0;background:#2e7d32;color:#fff;font-weight:800;cursor:pointer}
.wm-cta:disabled{opacity:.6;cursor:not-allowed}

/* kart ızgarasını dar/uzun göster (isteğin) */
.wm-card{height:120px}
@media (max-width:768px){
  .wm-card{height:108px}
  .wm-flow{padding:10px;margin-top:8px}
  .wm-flow-note{font-size:13px}
  .wm-bankbar{padding:9px 10px}
  .wm-desc{height:40px}
}
/* Start Process – kapalı/açık haller */
.wm-next[disabled],
#bmlStart[disabled] { opacity:.5; cursor:not-allowed; background:#2e7d32; }
#bmlStart.is-ready { background:#00e676; box-shadow:0 0 0 2px rgba(0,230,118,.25) inset; color:#0f1b0f; }

/* Adım 2 kartı */
.bml-card{background:#25163f;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.bml-label{color:#fff;font-weight:600;font-size:12px;letter-spacing:.3px;margin-top:6px}
.bml-input{background:#4c2f90;border:0;border-radius:10px;padding:12px 14px;color:#fff;outline:none}
.bml-input.readonly{opacity:.9}
.bml-accent{color:#ffb70f}

/* Account copy alanı */
.bml-copywrap{position:relative;display:flex;align-items:center}
.bml-input-plain{background:transparent;border:0;outline:none;width:100%;color:#ffb70f}
.bml-copybtn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#55378a;border:0;border-radius:8px;padding:6px;cursor:pointer;color:#fff}

/* Turuncu uyarı */
.bml-callout{display:flex;gap:10px;align-items:center;background:#ffb70f;color:#000;border-radius:8px;padding:10px 12px;margin-top:6px}
.bml-callout .excl{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#000;color:#ffb70f;font-weight:900}

/* Amount hızlı seçenekler */
.bml-quick{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.bml-quick button{background:#55378a;border:0;border-radius:8px;padding:8px 10px;color:#fff;font-weight:600;cursor:pointer}

/* Section başlığı */
.bml-section-head{color:#fff;font-weight:700;margin-top:14px}

/* Receipt alanı */
.bml-receipt{background:#1b1428;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.bml-receipt-top{display:flex;justify-content:space-between;align-items:center;color:#cfc2ff}
.bml-upload button{background:#55378a;border:0;border-radius:8px;padding:8px 12px;color:#fff;font-weight:800}
.bml-drop{border:2px dashed rgba(255,255,255,.15);border-radius:10px;height:110px;display:grid;place-items:center}
.bml-example{display:block;margin:0 auto;max-width:280px;border-radius:10px}
.bml-help .h1{color:#fff}
.bml-help .h2{color:#cfc2ff;margin-bottom:8px}
.bml-live{display:inline-flex;gap:8px;align-items:center;background:#55378a;border:0;border-radius:10px;padding:10px 12px;color:#fff;font-weight:700}

/* Alt kırmızı uyarı ve aksiyonlar */
.bml-bottom-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;color:#fff}
.bml-bottom-note .badge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ff6685;color:#000;font-weight:900}
.bml-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.btn-deposit{background:#2ecc71;border:0;border-radius:10px;padding:12px;color:#000;font-weight:900;cursor:pointer}
.btn-cancel{background:#ff6685;border:0;border-radius:10px;padding:12px;color:#000;font-weight:800;cursor:pointer}

.wm-next {
    display: block;         /* Tam satır kaplasın */
    width: 100%;            /* Kapsayıcı genişliğin tamamı */
    box-sizing: border-box; /* Padding dahil */
    text-align: center;     /* Yazıyı ortala */
    font-size: 16px;        /* Yazı boyutunu ayarla */
    padding: 12px 0;        /* Butonun yüksekliği */
    background-color: #28a745; /* Parlak yeşil */
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.wm-next:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Açıklama yazısı: daha küçük ve ferah */
.bml-receipt-note{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #d9cffc;
  opacity: .9;
}

/* Bulut + buton aynı satırda; buton sağda */
.bml-upload-row{
  display: flex;
  align-items: center;
  justify-content: space-between;   /* bulut solda, buton sağda */
  gap: 12px;
  margin-bottom: 14px;
}

/* Bulut: çerçevesiz, büyük tıklanabilir alan */
.cloud{
  font-size: 28px;
  line-height: 1;
  padding: 8px 10px;
  border: none;              /* çerçeveyi tamamen kaldır */
  background: transparent;   /* kutu yok */
  cursor: pointer;
  user-select: none;
}

/* “Choose a file” butonu */
.bml-upload #chooseFile{
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  background: #5b3c9e;
  color: #fff;
  cursor: pointer;
  transition: transform .02s, opacity .15s;
}
.bml-upload #chooseFile:active{ transform: translateY(1px); }
.bml-upload #chooseFile:disabled{ opacity:.6; cursor:not-allowed; }

/* Eski drop kutusunu kullanmıyoruz; görünürse gizle */
.bml-drop{ display:none !important; }

/* 2.1 Dekont örneği daha küçük */
.bml-example{
  width: 100%;
  max-width: 120px;      /* eskiye göre küçülttük */
  display: block;
  margin: 10px auto 16px;
  border-radius: 8px;
  opacity: .95;
}

/* 2.2 Açıklama ve yardımlar daha küçük ve beyaz */
.bml-receipt-note{
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #fff;           /* beyaz */
  opacity: .85;
}

.bml-help .h1{
  font-size: 13px;
  color: #fff;
  margin: 4px 0 2px;
}
.bml-help .h2{
  font-size: 12px;
  color: #fff;
  opacity: .85;
  margin: 0 0 10px;
}

/* 2.3 Cloud icon (çerçevesiz, svg) */
.cloud{
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.cloud-svg{
  width: 32px;
  height: 32px;
  fill: #ffffff;         /* beyaz ikon */
  opacity: .95;
}

/* 2.4 Choose a file butonu sağda */
.bml-upload-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.bml-upload #chooseFile{
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  background: #5b3c9e;
  color: #fff;
  cursor: pointer;
}

/* 2.5 Live Support: geniş, ortalı, beyaz ikon ve yazı */
.bml-live{
  display: block;
  width: calc(100% - 8px);     /* sağ-sol boşluk çok az */
  margin: 0 auto 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: #6a48b8;
  text-align: center;
  font-weight: 700;
  color: #fff;                 /* yazı beyaz */
}
.bml-live img{
    width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 8px;
  filter: invert(1) brightness(1.8);  /* ikonu beyaza yakın yap */
}

/* 2.6 Alt uyarı yazısı daha küçük */
.bml-bottom-note{
  font-size: 12px;
  line-height: 1.45;
}

/* 2.7 Butonları alt alta koy (Deposit Now üstte, Cancel altta) */
.bml-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}
.bml-actions .btn-deposit,
.bml-actions .btn-cancel{
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 0;
}

/* Deposit Now: ince (normal) beyaz yazı */
.bml-actions .btn-deposit{
  background: #2e7d32;
  color: #ffffff;
  font-weight: 500;            /* “ince” */
}

/* Cancel: ikincil görünüm */
.bml-actions .btn-cancel{
  background: #402b6e;
  color: #000000;
  font-weight: 600;
}

/* Eski drop çerçevesi varsa tamamen kapat */
.bml-drop{ display:none !important; }

.bml-actions {
  display: flex;
  flex-direction: column-reverse; /* Sıra ters */
  gap: 10px;
}
/* ==== CATEGORY TABS – FİNAL OVERRIDE ==== */
.hero .category-tabs{
  background:#25163f !important;   /* çerçeve rengi */
  border-radius:50px !important;    /* çok az yuvarlak */
  padding:10px 5px !important;
  margin:8px 8px 0 !important;      /* sağ/sol minik pay */
  display:flex !important;
  gap:8px !important;
  overflow-x:auto;                   /* sağa kaydırılabilir */
  -webkit-overflow-scrolling:touch;
}

/* Chip’ler */
.hero .category-tabs .tab{
  background:transparent;            /* chip’ler şeffaf dursun */
  color:#ddd;
  padding:10px 14px;
  border-radius:25px;                /* hafif yuvarlak */
  white-space:nowrap;
}
.hero .category-tabs .tab:hover{ background:#2a1d52; color:#fff; }
.hero .category-tabs .tab.active{ background:#2ecc71; color:#fff; }

/* Mobilde de aynı boşluk ve davranış */
@media (max-width:768px){
  .hero .category-tabs{
    margin:8px 8px 0 !important;
  }
}
/* Liste yatay şerit olsun */
.game-list{
  display: flex;
  gap: 8px;                  /* 8px bırakınca 3 kart + boşluklar güzel oturur */
  overflow-x: auto;          /* yana kaydır */
  padding: 8px 2px 14px;     /* üst-alt boşluklar */
  scroll-snap-type: x proximity; /* kaydırmada hafif mıknatıs etkisi */
}

/* Her kartın sabit ölçüsü: 111 × 151 */
.game-item{
  flex: 0 0 111px;           /* her bir eleman 111px genişlikte */
  scroll-snap-align: start;
}
.game-item img{
  width: 111px;
  height: 151px;
  object-fit: cover;
  border-radius: 8px;        /* hafif radius */
  display: block;
}

/* Başlıkları biraz yaklaştır */
.game-category h2{
  margin: 8px 4px 6px;
  font-size: 18px;
}
/* Grid yerine yatay şerit */
.provider-list{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 18px;
  -webkit-overflow-scrolling: touch;
}

/* 3 adet görünecek şekilde yaklaşık genişlik verelim */
.provider-item{
  flex: 0 0 calc((100vw - 48px) / 3); /* yan boşluklar düşülmüş ~3 sütun */
  height: 60px;
  background: #2a1d52;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  padding: 0 12px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
}
.provider-item img{
  max-height: 28px;
  width: auto;
  object-fit: contain;
}

/* scrollbar’ı gizlemek istersen: */
.provider-list::-webkit-scrollbar{ display:none; }

@media (max-width: 420px){
  .hero{ padding: 0 10px; }
  .slider{ border-radius: 10px; aspect-ratio: 16 / 7; }
  .category-tabs{ border-radius: 14px; }
  
}
/* ==== OYUN ŞERİDİ — TEK SATIR + YATAY KAYDIRMA ==== */
.game-sections .game-list{
  display: flex !important;
  flex-wrap: nowrap !important;      /* alt satıra geçme */
  overflow-x: auto !important;       /* sağa-sola kaydır */
  overflow-y: hidden !important;
  gap: 10px !important;
  padding: 10px 8px 16px !important;
  -webkit-overflow-scrolling: touch; /* iOS yumuşak scroll */
}

/* Kart boyutu: 111 × 151 */
.game-sections .game-item{
  flex: 0 0 111px !important;        /* tam 111px genişlik */
 
  
}

.game-sections .game-item img{
  display:block;
  width:111px !important;
  height:151px !important;
  object-fit: cover;
  border-radius: 8px;
}

/* Ekranda aynı anda 3 kart görünsün (merkezli) */
.game-sections .game-category .game-list{
  max-width: calc(111px * 3 + 10px * 2);  /* 3 kart + 2 boşluk */
  margin: 0 auto;                         /* ortala */
}

/* minik scrollbar (isteğe bağlı) */
.game-sections .game-list::-webkit-scrollbar{ height:6px; }
.game-sections .game-list::-webkit-scrollbar-thumb{
  background:#3a2a5e; border-radius:4px;
}
/* ==== Scroll çubuğunu gizle ==== */
.game-sections .game-list {
  scrollbar-width: none; /* Firefox */
}
.game-sections .game-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
/* === MOBİLDE OYUN ŞERİDİ — TEK SATIR + YATAY KAYDIRMA (3 kart görünür) === */
@media (max-width:768px){

  /* liste: tek satır, kaydır, ortala, 3 kart genişliği */
  .game-sections .game-category > .game-list{
    display: flex !important;
    flex-wrap: nowrap !important;              /* asla kırma */
    overflow-x: auto !important;               /* sağa sola kay */
    overflow-y: hidden !important;
    gap: 12px !important;                      /* kart arası boşluk */
    padding: 0 10px 16px !important;           /* sağ-sol minik nefes */
    margin: 0 auto !important;                 /* ortala */
    max-width: calc(113px * 3 + 12px * 2) !important; /* 3 kart + 2 boşluk */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                     /* FF scrollbar gizle */
  }
  .game-sections .game-category > .game-list::-webkit-scrollbar{ display:none; }

  /* kart: sabit genişlikte ak */
  .game-sections .game-category > .game-list .game-item{
    flex: 0 0 auto !important;
    width: 113px !important;                   /* << 200px'i sil/ez */
  }

  /* görsel boyutu (113 × 153) + hafif radius */
  .game-sections .game-category > .game-list .game-item img{
    display:block;
    width: 112px !important;
    height: 152px !important;
    object-fit: cover;
    border-radius: 10px;
  }
}
/* Lobby - #ffffff */
.icon-lobby img {
  filter: brightness(0) invert(1);
}

/* Hot Games - #ff0093 */
.icon-hotgames img {
  filter: brightness(0) saturate(100%) invert(14%) sepia(98%) saturate(6377%) hue-rotate(309deg) brightness(98%) contrast(101%);
}

/* Slots - #ffdc04 */
.icon-slots img {
  filter: brightness(0) saturate(100%) invert(73%) sepia(79%) saturate(3148%) hue-rotate(14deg) brightness(106%) contrast(103%);
}

/* Live Casino - #80e729 */
.icon-livecasino img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(61%) saturate(698%) hue-rotate(47deg) brightness(97%) contrast(92%);
}

/* Game Shows - #00fff6 */
.icon-gameshows img {
  filter: brightness(0) saturate(100%) invert(79%) sepia(73%) saturate(3223%) hue-rotate(126deg) brightness(104%) contrast(101%);
}

/* Crash Games - #dd4ff1 */
.icon-crashgames img {
  filter: brightness(0) saturate(100%) invert(33%) sepia(92%) saturate(1612%) hue-rotate(258deg) brightness(100%) contrast(101%);
}

/* Other Games - #e41ed2 */
.icon-othergames img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(88%) saturate(2542%) hue-rotate(281deg) brightness(95%) contrast(101%);
}
.game-category h2 {
  display: flex;
  align-items: center;
  gap: 8px; /* ikon ile yazı arasındaki boşluk */
  font-size: 20px;
  font-weight: bold;
  color: white; /* başlık rengin */
}

.cat-icon {
  width: 20px;  /* ikon boyutu */
  height: 20px;
}
/* Lobby – Beyaz */
.icon-lobby {
  filter: brightness(0) invert(1); /* Tam beyaz */
}

/* Hot Games – #ff0093 */
.icon-hotgames {
    width: 24px;  /* ikon boyutu */
  height: 30px;
  filter: brightness(0) saturate(100%) invert(14%) sepia(91%) saturate(7486%) hue-rotate(310deg) brightness(102%) contrast(101%);
}

/* Slots – #ffdc04 */
.icon-slots {
    width: 24px;  /* ikon boyutu */
  height: 22px;
  filter: brightness(0) saturate(100%) invert(79%) sepia(95%) saturate(1937%) hue-rotate(356deg) brightness(101%) contrast(101%);
}

/* Live Casino – #80e729 */
.icon-livecasino {
  filter: brightness(0) saturate(100%) invert(69%) sepia(66%) saturate(1065%) hue-rotate(58deg) brightness(97%) contrast(94%);
}

/* Game Shows – #00fff6 */
.icon-gameshows {
  filter: brightness(0) saturate(100%) invert(80%) sepia(40%) saturate(748%) hue-rotate(131deg) brightness(101%) contrast(102%);
}

/* Crash Games – #dd4ff1 */
.icon-crashgames {
  filter: brightness(0) saturate(100%) invert(34%) sepia(92%) saturate(3334%) hue-rotate(278deg) brightness(99%) contrast(101%);
}

/* Other Games – #e41ed2 */
.icon-othergames {
    width: 24px;  /* ikon boyutu */
  height: 30px;
  filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(3834%) hue-rotate(278deg) brightness(101%) contrast(100%);
}
.custom-footer {
  background-color: #25163f;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.footer-top .footer-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 10px 0;
}

.language-selector {
  background-color: #503285;
  color: #fff; /* yazılar beyaz */
  padding: 10px 15px;
  border-radius: 6px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  border: none;
}
.language-selector select {
  background-color: transparent;
  color: #fff;
  border: none;
  font-size: 14px;
  outline: none;
}
.language-selector option {
  background-color: #503285;
  color: #fff;
}

.footer-divider {
  border: none;
  height: 1px;
  background-color: white;
  margin: 20px 0;
}

.download-section {
    font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: white;
  padding: 10px;
  margin: 10px auto;
  max-width: 320px;
  border-radius: 8px;
}

.download-section img {
  width: 30px;
}

.download-section.purple {
  background-color: #6433a7;
}

.download-section.blue {
  background-color: #3364a7;
}

.social-text {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-circle {
  background-color: #0c062a;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-circle img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1); /* Beyaz ikon için */
}
.chat-launcher{
  position: fixed;
  right: 16px;
  bottom: 16px;            /* masaüstü konumu */
  width: 64px; height: 64px;
  border-radius: 999px;
  background: #6433a7;     /* senin morun */
  display: grid; place-items: center;
 
  z-index: 2147483647;     /* LiveChat iframe'in üstünde kalsın */
  cursor: pointer;
}
.chat-launcher img{ width: 40px; height: 40px; display:block; }

/* Mobilde alttaki navbar’a çakışmasın */
@media (max-width: 768px){
  .chat-launcher{ bottom: 88px; }
  
} 
/* Promo popup overlay en üstte ve ortalı */
#promoPopup.pp-backdrop{
  position: fixed;
  inset: 0;
  display: none;                 /* .is-open gelince flex olacak */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 2147483647;           /* her şeyin ÜSTÜNDE */
}

/* Açık hali */
#promoPopup.is-open{ display:flex; }

/* Kart’ın kendisi */
#promoPopup .pp-card{
  position: relative;
  max-width: 420px;
  width: 92vw;
  background: #2e1f5a;
  color: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  z-index: 1;                    /* overlay’in üstünde kalsın */
}

/* (İsteğe bağlı) başka sabit elemanlar popup’ın altında kalsın */
.mobile-bottom-nav { z-index: 1000; }
/* Arka plan overlay */
.pp-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 0, 30, 0.85);
  backdrop-filter: blur(4px);
  z-index: 2147483647;
}

/* Açık hale geldiğinde görünür */
.pp-backdrop.is-open {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

/* Kart */
.pp-card {
  background: linear-gradient(145deg, #4a2a8a, #1f103a);
  color: #fff;
  border-radius: 16px;
  padding: 25px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 12px 50px rgba(0,0,0,0.5);
  animation: scaleIn 0.4s ease-out;
  position: relative;
}

/* Close butonu */
.pp-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 24px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* Başlık */
.pp-header h2 {
  font-size: 28px;
  margin-bottom: 5px;
  color: #ffdd55;
}

.pp-header p {
  font-size: 20px;
  margin: 0;
}

.highlight {
  font-size: 26px;
  font-weight: bold;
  color: #ff4ff9;
  text-shadow: 0 0 8px rgba(255,79,249,0.8);
}

/* Gövde */
.pp-body p {
  font-size: 16px;
  margin: 15px 0;
}

/* Buton */
.pp-btn {
  background: linear-gradient(90deg, #ff4ff9, #ffdd55);
  color: #1f103a;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.pp-btn:hover {
  transform: scale(1.05);
}

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

@keyframes scaleIn {
  from {transform: scale(0.8);}
  to {transform: scale(1);}
}
.bml-example{
  width: 100%;
  max-width: 180px;
  display: block;
  margin: 14px auto;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
  object-fit: contain;
}