/* ──────────────────────────────────────────────────────────────
   WHITE-LABEL MARKA RENGİ — tek kaynak (single source of truth).
   Tüm gold yüzeyler bu değişkenleri kullanır. VARSAYILAN = mevcut site
   gold'u (birebir, piksel-piksel). Site sahibi panelden tema_brand seçince
   layouts/default.vue `:root:root{…}` enjekte eder (server/utils/brand.ts
   türetir) → tüm yüzeyler otomatik döner. newtheme.css'e DOKUNULMAZ; bu katman
   onu ezer (globals sonra yüklenir + branded öğeler için override blok altta).
   ────────────────────────────────────────────────────────────── */
:root {
  --brand: #e3c565;        /* ana ton: metin/ikon/vurgu + gradyan açık uç */
  --brand-2: #d2b150;      /* ikincil ton (mobil tema tabanı) */
  --brand-mid: #b6922e;    /* gradyan orta ton */
  --brand-dark: #7b6219;   /* gradyan koyu uç */
  --brand-line: #fedd14;   /* parlak ince çizgi (border-image / alt-çizgi) */
  --brand-line2: #f0c030;  /* nav hover/active ince çizgi + ikon (biraz daha mat) */
  --brand-solid: #e3c615;  /* düz dolgu (kayıt btn) */
  --brand-hi: #ffd257;     /* hover gradyan parlak orta */
  --brand-hi2: #ffc400;    /* hover gradyan parlak uç */
  --brand-glow: rgba(227, 197, 101, 0.32); /* çerçeve/gölge glow */
  /* Dekoratif/keyfi gold tonları için hue-rotation: hsl(from <orijinal>
     calc(h + var(--brand-h-rot)) calc(s * var(--brand-sat)) l). Varsayılan 0 → renk BİREBİR (round-trip
     test edildi: piksel-piksel aynı); marka değişince tüm ton ailesi (çark
     jant/göbek/ampul, neon-win, rozet vb.) markanın tonuna döner, açıklık/doygunluk
     yapısı korunur. BİRİMSİZ derece sayısı (relative hsl'de h sayıdır → calc(h + N)).
     brand.ts enjekte eder. */
  --brand-h-rot: 0;
  /* Dekoratif/base-tema hue-rotation'larının DOYGUNLUĞU: hsl(from <orijinal>
     calc(h + var(--brand-h-rot)) calc(s * var(--brand-sat)) l). Varsayılan 1 →
     renk BİREBİR (gold korunur). Marka seçilince brand.ts bunu DÜŞÜK enjekte eder
     (≈0.15) → tüm dekoratif tint/glow NÖTR-griye yaklaşır; marka rengi yalnız
     anahtar yerlerde (token'lı butonlar/nav/link/ikon) tek tutarlı renk olarak kalır. */
  --brand-sat: 1;
}

/* html arkaplanı = body ile AYNI (themeable, fixed bgnews). html'e bg verilince tarayıcı
   onu CANVAS arkaplanı yapar (propagation durur) → içerik/footer altında kalan boşlukta da,
   overscroll bounce'unda da site arkaplanı KESİNTİSİZ devam eder; düz/hardcoded renk YOK.
   (Eski açık-gri varsayılan beyaz şerit olarak görünüyordu.) */
html {
  background: var(--site-bg, url('/images/bgnews.jpeg')) no-repeat center center fixed;
}

/* Footer alt boşluğu: newtheme'in `.footer-copyright{margin-bottom:50px}`'i boşluğu body
   kutusunun DIŞINDA bırakıyordu (margin dış kenarda). body arkaplanı (bgnews) fixed+cover
   olup yalnız body KUTUSUNUN içinde boyandığından, o margin alanında arkaplan basılmaz →
   düz renk/şerit görünür. Çözüm: margin'i her yerde sıfırla; mobil alt-nav (#bottomMenu ~53px)
   clearance'ını PADDING ile ver → boşluk body kutusunun İÇİNDE kalır → bgnews oraya da basılır
   = arkaplan KESİNTİSİZ devam eder (düz renk değil). Web'de alt-nav yok → boşluk yok.
   !important: footer-copyright'taki inline `padding` + newtheme margin'i ezmek için. */
.footer-copyright { margin-bottom: 0 !important; }
@media (max-width: 768px) {
  .footer-copyright { padding-bottom: 73px !important; }
}

/* ──────────────────────────────────────────────────────────────
   İlk yükleme FOUC / layout zıplaması önleme (CSS ilk boyamada hazır)
   ────────────────────────────────────────────────────────────── */

/* Mobil fixed header (#navbar) offset'i: içerik JS beklemeden header altında
   başlasın (JS MobileHeader'da değeri announcement kapanınca ince ayar yapar). */
@media (max-width: 768px) {
  body.welcome-theme {
    /* announce(30)+bar(49)+nav(40) ≈ 120. Nav menü eklenince eski 81 (announce+bar) bayatladı →
       ilk-paint = JS apply() değeri (120) olsun ki form "yukardan aşağı flash" etmesin. JS dinamik ince ayar yapar. */
    padding-top: 120px;
  }
}

/* Banner swiper init olmadan ÖNCE yalnız ilk slayt görünsün — yoksa 4 banner
   bir an yan yana/karışık görünüyor (swiper/react init'te .swiper-initialized ekler). */
.banner-swiper .swiper-wrapper-host:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}
.banner-swiper .swiper-slide img {
  display: block;
  width: 100%;
}

/* ── Site arka plan görseli — lucybet.min.css body bgnews3.jpeg yerine bgnews.jpeg.
   lucybet.min.css'e DOKUNULMAZ; globals sonra yüklendiği için cascade'de kazanır. ── */
body {
  /* --site-bg = ayarlar.site_background (admin-ayarlanabilir, layout :root:root enjekte eder);
      boşsa default bgnews.jpeg'e düşer. */
  background: var(--site-bg, url('/images/bgnews.jpeg')) no-repeat center center fixed !important;
  background-size: cover !important;
}

/* ──────────────────────────────────────────────────────────────
   Login / Register / Stories modalı (.login-fullscreen) açılış animasyonu.
   Orijinal: scale(0.9)→1 zoom + içerikte (.login-header/.login-title/.login-form/
   .register-progress/.register-form-step) kademeli (staggered) translateY slide-up +
   transition: all 0.4s → amatör/yavaş görünüyordu.
   İstenen: "pat" gibi açılsın; yalnız container'da hafif/hızlı (120ms) opacity.
   Scale ve tüm slide-up'lar kaldırıldı; içerik anında gelir.
   ────────────────────────────────────────────────────────────── */
.login-fullscreen {
  transform: none !important;
  transition: opacity 0.12s ease !important;
}
.login-fullscreen.show,
.login-fullscreen.hidden,
#stories-viewer.login-fullscreen.show,
#stories-viewer.login-fullscreen.hidden {
  transform: none !important;
}
.login-fullscreen .login-header,
.login-fullscreen .login-title,
.login-fullscreen .login-form,
.login-fullscreen .register-progress,
.login-fullscreen .register-form-step {
  transform: none !important;
  transition: none !important;
}

/* Mobilde DESTEK linkini fullscreen login ekranının EN ALTINA sabitle —
   ŞİFRENİZİ Mİ UNUTTUNUZ'un altında, ekranın dibinde (referans tasarım).
   #loginModal = .login-fullscreen (position:fixed) → konumlama bağlamı. */
/* ≤768: yalnız TELEFON tam-ekran login; tabletler (≥769) web KART modalını kullanır. */
@media (max-width: 768px) {
  /* 100vh mobil tarayıcı çubukları arkasına taşar → 100dvh = görünür viewport. */
  #loginModal {
    height: 100dvh;
  }
}

/* ============================================================
   CASHWIN LOGIN 1:1 — canlı BetConstruct login popup'undan (m.cashwin1043.com)
   ÇIKARILMIŞ gerçek computed değerler. Font Roboto, yeşil GİRİŞ (#8BC34A),
   yarı saydam+blur kutu, beyaz KAYIT, şeffaf kenarlıksız inputlar.
   ============================================================ */
#loginModal {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}
/* Yarı saydam + blur kutu → arka plan görünür (boş/kaba durmaz, referanstaki gibi).
   ≤768: yalnız telefonda tam-ekran transparan backdrop (tablet web KART kullanır). */
@media (max-width: 768px) {
  #loginModal {
    background-color: rgba(19, 19, 19, 0.46) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }
}
/* Inputlar: şeffaf beyaz dolgu, kenarlıksız, 52px, 4px köşe */
#loginModal .login-form input[type="text"],
#loginModal .login-form input[type="password"] {
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  border-radius: 4px !important;
  height: 52px !important;
  padding: 0 15px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}
#loginModal .login-form input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}
/* GİRİŞ — site teması GOLD GRADIENT (.register-button degrade'i), ince yazı */
#loginModal .btn-login {
  background: linear-gradient(145deg, var(--brand-dark) 0%, var(--brand-mid) 45%, var(--brand) 100%) !important;
  color: #fff !important;
  border-radius: 4px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
}
#loginModal .btn-login:hover {
  background: linear-gradient(145deg, var(--brand-dark) 0%, var(--brand-hi) 45%, var(--brand-hi2) 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}
/* KAYIT — site teması gold gradient, ince yazı, 28px */
#loginModal .btn-register {
  background: linear-gradient(145deg, var(--brand-dark) 0%, var(--brand-mid) 45%, var(--brand) 100%) !important;
  color: #fff !important;
  border-radius: 4px !important;
  height: 28px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}
/* Başlık + alt başlık */
#loginModal .login-title .maintext {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-transform: uppercase !important;
}
#loginModal .login-title .subtext {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
/* Linkler — cashwin: forgot %70, support %50, 14px/500 */
#loginModal .forgot-password {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
#loginModal .support-link {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  /* newtheme'in 160px üst boşluğunu sıfırla — alanı artık promo banner dolduruyor */
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}
#loginModal .checkbox-text {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
}

/* ── WEB + TABLET: cashwin login = ortalanmış 400px yarı saydam blur kart ──
   Orijinal newtheme #121212 / 380px / 10px radius / border / shadow kutusunu
   cashwin'in popup-inner-bc (rgba(19,19,19,0.73) + blur(5px) + 4px radius) kartına çeviriyoruz.
   ≥769: tabletler (iPad) de ortalanmış KART modalını kullanır; tam-ekran yalnız telefonda (≤768). */
@media (min-width: 769px) {
  #loginModal {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
  #loginModal .login-modal-content {
    width: 400px !important;
    max-width: 400px !important;
    background: rgba(19, 19, 19, 0.73) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 15px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  /* 380px iç genişlik sınırını kaldır → kart 400px, içerik 370px */
  #loginModal .login-header,
  #loginModal .login-title,
  #loginModal .login-form {
    max-width: 370px !important;
  }
}

/* ── Promo banner — cashwin login'de forgot ile support arasında 370x228 görsel.
   Bizde eski "boş 160px" alanı bu banner dolduruyor → tombul/kaba görüntü biter. */
#loginModal .login-banner {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
#loginModal .login-banner img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
}
@media (min-width: 769px) {
  #loginModal .login-banner img {
    height: 228px;
  }
}

/* ============================================================
   REGISTER (KAYIT) modal — cashwin "entrance-form-bc registration popup" BİREBİR:
   web'de 720px iki-kolon kart (sol dikey banner + sağ kaydırılabilir form + sabit
   KAYIT footer), mobilde tam ekran tek kolon. Renk = gold tema, gerisi cashwin.
   ============================================================ */
#registerModal {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* Input + select alanları: şeffaf beyaz dolgu, kenarlıksız, 52px, 4px köşe (cashwin) */
#registerModal .login-form input[type="text"],
#registerModal .login-form input[type="email"],
#registerModal .login-form input[type="password"],
#registerModal .login-form select {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  border-radius: 4px !important;
  height: 52px !important;
  padding: 0 15px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}
#registerModal .login-form input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Doğum tarihi: 3 select yan yana */
#registerModal .dob-row {
  display: flex;
  gap: 8px;
}
#registerModal .dob-row select {
  flex: 1;
  min-width: 0;
}
/* Telefon: +90 ön ek + numara */
#registerModal .phone-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
#registerModal .phone-row .phone-prefix {
  flex: 0 0 56px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin-bottom: 12px;
}
#registerModal .phone-row .bc-field {
  flex: 1;
  min-width: 0;
}

/* Şartlar (18+) satırı */
#registerModal .reg-terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  cursor: pointer;
}
#registerModal .reg-terms input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--brand-mid);
  flex: 0 0 auto;
}
#registerModal .reg-terms a {
  color: var(--brand);
  text-decoration: underline;
}

/* Alan hata mesajları */
#registerModal .register-error {
  display: block;
  color: #ff6b6b;
  font-size: 12px;
  margin: -8px 0 8px;
}
#registerModal .register-error-box {
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.4);
  color: #ffb3b3;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  text-align: center;
  font-size: 13px;
}

/* E-posta kodu adımı — mevcut giriş/kayıt formunun sade devamı */
#registerModal .email-verification-form,
#loginModal .email-verification-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 4px 0 0;
}
#registerModal .email-verification-copy,
#loginModal .email-verification-copy {
  padding: 0 0 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
#registerModal .email-verification-copy p,
#loginModal .email-verification-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
}
#registerModal .email-verification-copy p strong,
#loginModal .email-verification-copy p strong {
  color: #fff;
  font-weight: 500;
}
#registerModal .email-verification-copy > span,
#loginModal .email-verification-copy > span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  line-height: 1.4;
}
#registerModal .login-form input.email-code-input,
#loginModal .login-form input.email-code-input {
  width: 100% !important;
  height: 52px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 12px 0 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: 9px !important;
  outline: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#registerModal .login-form input.email-code-input:focus,
#loginModal .login-form input.email-code-input:focus {
  border-color: var(--brand) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}
#registerModal .email-resend-row,
#loginModal .email-resend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding-top: 1px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
}
#registerModal .email-resend-button,
#loginModal .email-resend-button {
  min-width: 74px;
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#registerModal .email-resend-button:not(:disabled):hover,
#loginModal .email-resend-button:not(:disabled):hover {
  color: var(--brand-hi);
}
#registerModal .email-resend-button:disabled,
#loginModal .email-resend-button:disabled {
  background: transparent;
  color: rgba(255, 255, 255, 0.46);
  cursor: default;
  text-decoration: none;
}
#registerModal .email-verification-form p.email-verification-lock,
#loginModal .email-verification-form p.email-verification-lock {
  margin: 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10.5px;
  line-height: 1.4;
  text-align: left;
}

/* KAYIT footer butonu — site teması gold gradient, ince yazı */
#registerModal .btn-register-submit {
  width: 100% !important;
  background: linear-gradient(145deg, var(--brand-dark) 0%, var(--brand-mid) 45%, var(--brand) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  height: 44px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
#registerModal .btn-register-submit:hover {
  background: linear-gradient(145deg, var(--brand-dark) 0%, var(--brand-hi) 45%, var(--brand-hi2) 100%) !important;
  color: #fff !important;
}
#registerModal .btn-register-submit:disabled {
  opacity: 0.7;
  cursor: default;
}
/* Üstteki GİRİŞ geçiş butonu — gold gradient, ince yazı */
#registerModal .btn-register {
  background: linear-gradient(145deg, var(--brand-dark) 0%, var(--brand-mid) 45%, var(--brand) 100%) !important;
  color: #fff !important;
  border-radius: 4px !important;
  height: 28px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}
/* Başlık + alt başlık + linkler */
#registerModal .login-title .maintext {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-transform: uppercase !important;
}
#registerModal .login-title .subtext {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
#registerModal .support-link {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-top: 12px !important;
}

/* ── İki-kolon iskelet ── */
#registerModal .register-cols {
  display: flex;
  width: 100%;
  gap: 16px;
}
#registerModal .register-banner {
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
#registerModal .register-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
#registerModal .register-main {
  min-width: 0;
  width: 100%;
}
#registerModal .register-footer {
  width: 100%;
  margin-top: 12px;
}

/* ── MOBİL (≤768): tam ekran, tek kolon, banner gizli, hepsi akıp kaydırılır (tablet web KART) ── */
@media (max-width: 768px) {
  #registerModal {
    background-color: rgba(19, 19, 19, 0.46) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    height: 100dvh;
    overflow-y: auto !important;
    justify-content: flex-start !important;
  }
  #registerModal .register-banner {
    display: none;
  }
  #registerModal .register-cols {
    flex-direction: column;
    gap: 0;
  }
}

/* ── WEB + TABLET (≥769): cashwin 720px iki-kolon yarı saydam blur kart (iPad dahil) ── */
@media (min-width: 769px) {
  #registerModal {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
  #registerModal .login-modal-content.register-content {
    width: 720px !important;
    max-width: 720px !important;
    background: rgba(19, 19, 19, 0.73) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 15px !important;
    max-height: min(700px, 92vh) !important; /* cashwin ~682; çok uzun ekranda şişmesin */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* header tam genişlik */
  #registerModal .register-content .login-header {
    max-width: none !important;
    width: 100% !important;
  }
  /* iki kolon, eşit yükseklik, içerik sığmazsa sağ kolon kaydırılır */
  #registerModal .register-cols {
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: row;
  }
  #registerModal .register-banner {
    flex: 0 0 330px;
    align-self: stretch;
  }
  #registerModal .register-main {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 6px;
    max-width: none !important;
  }
  /* footer + DESTEK kaydırma alanı dışında, kartın altına sabit */
  #registerModal .register-footer,
  #registerModal .register-content > .support-link {
    flex: 0 0 auto;
    /* KAYIT butonu + DESTEK sol banner'ın altını KAPLAMASIN → form koluyla hizala
       (banner flex 330px + .register-cols gap 16px = 346px). "Buton çok uzun" düzeltmesi:
       butonun genişliği artık form sütununa (~344px) eşit, 720px kartın tamamına değil. */
    padding-left: 346px;
  }
}

/* (TABLET BANDI kaldırıldı — 769-1024px aralığı artık ≥769 web KART kurallarını
   miras alır; tam-ekran transparan görünüm yalnız ≤768 telefonda kalır.
   Kullanıcı isteği: iPad'lerde mobil tam-ekran değil, web login/register modalı.) */

/* ============================================================
   FLOATING LABEL (cashwin "form-control-bc") — login + register inputları.
   Boşken etiket ortada (placeholder gibi); ODAK/YAZINCA küçülüp ÜSTE kayar
   (cashwin'deki sade/hafif görünüm; ortada kalmaz). AppFloatField.vue üretir:
   .bc-field > input[placeholder=" "] + span.bc-label
   ============================================================ */
#loginModal .bc-field,
#registerModal .bc-field {
  position: relative;
  width: 100%;
  margin-bottom: 12px; /* alan boşluğu input'tan .bc-field'e taşındı → etiket inputa göre ortalanır */
}
/* input: tam genişlik + yüzen etikete üstte yer aç + kendi margin'ini sıfırla
   (yüksek özgüllük → eski 0 15px / width yokluğunu ezer; .bc-field içinde input daralmasın) */
#loginModal .login-form .bc-field input[type],
#registerModal .login-form .bc-field input[type] {
  width: 100% !important;
  padding: 17px 15px 1px 15px !important;
  margin-bottom: 0 !important;
}
/* Etiket — dinlenme: input ortasında, ince/soluk (sade, göz yormaz) */
#loginModal .bc-field > .bc-label,
#registerModal .bc-field > .bc-label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
  white-space: nowrap;
  pointer-events: none;
  transition: top 0.13s ease, font-size 0.13s ease, color 0.13s ease, transform 0.13s ease;
}
/* Odak / dolu → etiket küçülüp üste kayar */
#loginModal .bc-field > input:focus ~ .bc-label,
#loginModal .bc-field > input:not(:placeholder-shown) ~ .bc-label,
#registerModal .bc-field > input:focus ~ .bc-label,
#registerModal .bc-field > input:not(:placeholder-shown) ~ .bc-label {
  top: 8px;
  transform: none;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
}

/* ============================================================
   #fullscreenPanel (üç-nokta YENİLİKLER/AYARLAR/FAVORİLER mobil panel):
   panel sağdan kayarken (translateX) header + içerik AYRI bir üst/alt
   animasyonla (translateY -20px / +30px, gecikmeli) geliyordu → gıcık.
   İçerik PANELLE BİRLİKTE gelsin: ayrı translateY/opacity/gecikme kaldırıldı.
   ============================================================ */
#fullscreenPanel .panel-header,
#fullscreenPanel .panel-content,
#fullscreenPanel.show .panel-header,
#fullscreenPanel.show .panel-content {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Mobil dot-menü panelleri (#fullscreenPanel: YENİLİKLER/FAVORİLER/AYARLAR) + bottom menü:
   TAM-EKRAN DEĞİL — header'ın altından (80px) başlasın, header GÖRÜNÜR kalsın (kullanıcı isteği;
   bottom menü nasıl 80px'e açılıp header'ı gösteriyorsa öyle). .fullscreen inset:0 → top 80'e çekildi. */
#fullscreenPanel { top: 80px !important; }
.bottom-fullscreen-menu { top: 80px !important; }

/* ============================================================
   #fullscreenPanel (YENİLİKLER/FAVORİLER/AYARLAR) → AppJackpotDrawer (.jpd-*) RENKLERİ + geri butonu 1:1.
   - Yüzey solid #1d1d1d (jpd), backdrop-blur YOK, z 99999 (jpd seviyesi → üstteki #remodalx/bayrak katmanını örter).
   - Header: solid #1d1d1d, çirkin açık-gri border YOK (jpd'de border yok).
   - Geri butonu: gri daire DEĞİL → jpd .jpd-back (bc-i-small-arrow-left, şeffaf, rgba(255,255,255,.8), 14px).
   - Başlık: jpd .jpd-title (14px / weight 420 / opacity .85).
   ============================================================ */
#fullscreenPanel {
  background: #1d1d1d !important;
  backdrop-filter: none !important;
  z-index: 99999 !important;
}
#fullscreenPanel .panel-content { background: #1d1d1d !important; }
#fullscreenPanel .panel-header {
  background: #1d1d1d !important;
  border-bottom: none !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 8px 8px !important;
}
#panelBackBtn {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  margin: 0 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#panelBackBtn i { display: block; transform: translateY(-1px); }
#panelTitle {
  font-size: 14px !important;
  font-weight: 420 !important;
  opacity: 0.85 !important;
  color: #fff !important;
}

/* ============================================================
   PANEL AÇILINCA: announce bar animasyonlu büzülür → header yukarı kayıp yerini doldurur →
   panel header'ın HEMEN ALTINA (49px = bar yüksekliği) oturur. (kullanıcı isteği)
   Koordinasyon: AppSidePanels açılış/kapanışta body'ye .mobile-panel-open ekler/kaldırır.
   ============================================================ */
#announcementBar {
  overflow: hidden;
  max-height: 40px;
  transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.32s ease, margin 0.32s ease;
}
body.mobile-panel-open #announcementBar {
  max-height: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
}
/* panel: top 80 (announce+bar) → 49 (yalnız bar), announce büzülmesiyle senkron geçiş */
#fullscreenPanel {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease, top 0.3s ease !important;
}
body.mobile-panel-open #fullscreenPanel { top: 49px !important; }

/* ============================================================
   YENİLİKLER (CMS'ten /api/yenilikler) — AppYeniliklerList kart stilleri.
   Orijinal inline kart görünümü class'lara taşındı (mobil + masaüstü panel).
   ============================================================ */
.yenilikler-wrap {
  padding: 15px;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.yenilik-card {
  border-radius: 12px;
  padding: 20px 15px;
  margin-bottom: 15px;
  border: 1px solid #444;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.yenilik-card:last-child {
  margin-bottom: 0;
}
.yenilik-head {
  margin-bottom: 15px;
}
.yenilik-head h3 {
  color: #fff;
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.yenilik-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.yenilik-text {
  color: #bbb;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.yenilik-card .yenilik-btn {
  width: 100%;
  margin-top: 25px;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Boş durum — "Yeni bildiriminiz yok" (masaüstünde ortalı) */
.yenilik-empty {
  width: 100%;
  text-align: center;
  color: #b7b7b7;
  font-size: 12px;
  font-weight: 300;
  padding: 30px 15px;
}
@media (min-width: 769px) {
  #desktopPanelContent .yenilik-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
  }
}

/* ============================================================
   FLOATING LABEL — Hesap modalı (Para Yatır / Çek) AppFloatField'ları.
   Login'deki davranışın aynısı ama KOYU input varyantı (mb-amount ile uyumlu):
   boşken etiket ortada, odak/yazınca küçülüp üste kayar.
   ============================================================ */
#personalDetailsModal .bc-field,
#mobile-fullscreen-drawer .bc-field {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}
#personalDetailsModal .bc-field > input,
#mobile-fullscreen-drawer .bc-field > input {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 17px 16px 1px 16px;
  background: rgba(255, 255, 255, 0.15); /* meybet .form-control-input-bc — beyazımsı kutu */
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}
/* Readonly alanlar (Kişisel Detaylar) — düzenlenebilir görünmesin */
#personalDetailsModal .bc-field > input[readonly],
#mobile-fullscreen-drawer .bc-field > input[readonly] {
  cursor: default;
}
#personalDetailsModal .bc-field > .bc-label,
#mobile-fullscreen-drawer .bc-field > .bc-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  pointer-events: none;
  white-space: nowrap;
  transition: top 0.13s ease, font-size 0.13s ease, color 0.13s ease, transform 0.13s ease;
}
#personalDetailsModal .bc-field > input:focus ~ .bc-label,
#personalDetailsModal .bc-field > input:not(:placeholder-shown) ~ .bc-label,
#mobile-fullscreen-drawer .bc-field > input:focus ~ .bc-label,
#mobile-fullscreen-drawer .bc-field > input:not(:placeholder-shown) ~ .bc-label {
  top: 8px;
  transform: none;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
}

/* KİŞİSEL DETAYLAR — meybet floating-label form-control alanları, 2 sütun.
   .bc-field kendi margin-bottom'ını taşır → grid içinde sıfırla, gap aralığı versin. */
#personalDetailsModal .pd-grid,
#mobile-fullscreen-drawer .pd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 4px;
}
#personalDetailsModal .pd-grid .bc-field,
#mobile-fullscreen-drawer .pd-grid .bc-field {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  #personalDetailsModal .pd-grid,
  #mobile-fullscreen-drawer .pd-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MEYBET468 RE-SKIN — Hesap çekmecesi (#personalDetailsModal)
   newtheme.css'in .modern-* sınıflarını canlı meybet drawer'dan
   çıkarılan GERÇEK computed-CSS değerleriyle ezer. Yalnızca
   #personalDetailsModal'a scope edilmiştir; login/register vb.
   etkilenmez. globals.css newtheme.min.css'ten SONRA yüklenir.
   ============================================================ */

/* Tüm çekmecede Roboto */
#personalDetailsModal,
#personalDetailsModal * {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

/* FRAME — site GOLD temasıyla parlayan kenarlık (meybet yapısı, bizim altın rengi)
   newtheme: bg rgba(18,20,24,.45), blur(16px), border 4px #c5bb00, glow #fff200.
   SABİT YÜKSEKLİK: menüler açılıp kapanınca çerçeve büyüyüp küçülmesin —
   height:90vh (max 820px); aside + main kendi içinde scroll eder. */
#personalDetailsModal .modern-frame {
  background: #1d1d1d !important;
  border-radius: 30px !important;
  border: 4px solid var(--brand) !important;
  box-shadow: 0 -2px 60px var(--brand-glow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: 1340px;
  max-width: 95vw;
  height: 90vh;
  max-height: 820px;
}

/* ASIDE — kayan gold gösterge için konum bağlamı. newtheme'de overflow:auto +
   gizli scrollbar zaten var → sabit yükseklikte yalnızca içeride (aşağı) scroll. */
#personalDetailsModal .modern-aside {
  position: relative;
}

/* Aktif alt-menü imleci — meybet .user-profile-nav-item-cursor::after yapısı,
   bizim GOLD rengimizle: soldan sağa solan hafif degrade ŞERİT + 2px gold sol
   dikey çizgi. Seçilene KAYARAK gider (flash değil). aside scroll bağlamında
   absolute → içerikle kayar; z-index 1 → metin (subitem z-index 2) üstte kalır.
   top/height/width JS'te aktif öğeye göre güncellenir. */
#personalDetailsModal .nav-slider {
  position: absolute;
  border-radius: 4px;
  background-image: linear-gradient(
    to right,
    rgb(from var(--brand) r g b / 0.22),
    rgb(from var(--brand) r g b / 0.04)
  );
  border-left: 2px solid var(--brand);
  pointer-events: none;
  z-index: 1;
  transition:
    top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.2s ease,
    opacity 0.2s ease;
}

/* Ana içerik alanı — frame'in #1d1d1d'si görünsün (newtheme: #121418) */
#personalDetailsModal .modern-main {
  background: transparent !important;
}

/* ANA BAKİYE kartı — düz yeşil (newtheme: #269d57 + blur) */
#personalDetailsModal .modern-card.main-balance {
  background: #109121 !important;
  border-radius: 4px !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* BONUS kartı — düz bronz/altın (newtheme: rgba(222,179,14,.60) + blur) */
#personalDetailsModal .modern-card.modern-bonus {
  background: #AA7F00 !important;
  border-radius: 4px !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Bölüm başlıkları (PROFİLİM / BAKİYE YÖNETİMİ vb.)
   newtheme: bg #212428, border 1px #2f353b, radius 6px */
#personalDetailsModal .modern-section {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 4px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
#personalDetailsModal .modern-section:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Alt menü liste KUTUSU — meybet .user-profile-nav-list: açık/beyazımsı kutu
   rgba(255,255,255,0.1) + 1px açık kenar (newtheme koyu #1c2025 yerine → "beyaz gibi").
   flex-shrink:0 + overflow:visible ZORUNLU: aside artık sabit yükseklikte bir flex
   sütun; overflow:hidden olsaydı min-height:auto→0 olur ve kutu içeriğin altına
   küçülürdü (öğeler sonraki bölümle çakışırdı). Taşmada aside scroll eder. */
#personalDetailsModal .modern-subnav {
  flex-shrink: 0 !important;
}
#personalDetailsModal .modern-subnav.open {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  /* Açık alt-menü AİT OLDUĞU başlığa yapışsın, alttaki gruptan ayrılsın:
     başlığın margin-bottom'unu (10px) negatif margin-top ile yut → üstte ~3px;
     margin-bottom ile alttaki gruptan ~12px ayır. */
  margin-top: -9px !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
}

/* Alt menü öğeleri — normal hal (meybet: color rgba(255,255,255,.6), 12px) */
#personalDetailsModal .modern-subitem {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  opacity: 1 !important;
  z-index: 2; /* kayan gold imleç (z-index 1) ARKADA kalsın, metin üstte */
}
/* Hover — meybet: yalnız beyaza döner, kutu yok */
#personalDetailsModal .modern-subitem:hover {
  background: transparent !important;
  color: #fff !important;
}
/* Aktif — beyaz metin; zemin/aksan kayan .nav-slider'dan gelir (kendi bg YOK,
   gold degrade arkadan görünsün), per-item border YOK (flash olmasın). */
#personalDetailsModal .modern-subitem.active {
  color: #fff !important;
  background: transparent !important;
  border-left: none !important;
  padding-inline-start: 12px !important;
}
/* Gri ray (track) — meybet cursor::before: rgba(255,255,255,.08), 2px.
   Aktif öğede gizli (orada gold imleç var → kesintisiz dikey hat). */
#personalDetailsModal .modern-subitem::after {
  background: rgba(255, 255, 255, 0.08) !important;
  width: 2px !important;
}
#personalDetailsModal .modern-subitem.active::after {
  background: transparent !important;
  width: 0 !important;
}

/* GOLD aksan: açık grup chevron'u + bakiye göz / id-kopya hover */
#personalDetailsModal .modern-section.menu-opened .modern-chev {
  color: var(--brand) !important;
  opacity: 1 !important;
}
#personalDetailsModal .balance-eye-btn:hover i,
#personalDetailsModal .copy-userid-btn:hover {
  color: var(--brand) !important;
}

/* ============================================================
   GEÇMİŞ TABLOLARI (.pro-table) — drawer estetiğine uydur
   ("diğer ekranlara benzesin"): newtheme #1a1a1a + koyu-mavi thead +
   sistem fontu → Roboto + beyazımsı (rgba) kutular. İşlem Geçmişi,
   Bahis/Bonus Geçmişi vb. tüm tablolar tutarlı görünsün.
   ============================================================ */
#personalDetailsModal .pro-table-container,
#mobile-fullscreen-drawer .pro-table-container {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  margin-top: 14px !important;
}
#personalDetailsModal .pro-table,
#mobile-fullscreen-drawer .pro-table {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}
#personalDetailsModal .pro-table thead,
#mobile-fullscreen-drawer .pro-table thead {
  background: rgba(255, 255, 255, 0.05) !important;
}
#personalDetailsModal .pro-table th,
#mobile-fullscreen-drawer .pro-table th {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  letter-spacing: 0.2px !important;
}
#personalDetailsModal .pro-table tbody tr,
#mobile-fullscreen-drawer .pro-table tbody tr {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#personalDetailsModal .pro-table tbody tr:hover,
#mobile-fullscreen-drawer .pro-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
#personalDetailsModal .pro-table td,
#mobile-fullscreen-drawer .pro-table td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 300 !important; /* web'de de İNCE font */
}
/* tablo içeriği (tür/tutar/tarih) ince */
#personalDetailsModal .pro-table .transaction-type,
#personalDetailsModal .pro-table .amount,
#personalDetailsModal .pro-table .datetime {
  font-weight: 300 !important;
}
#personalDetailsModal .pro-table .amount.positive,
#mobile-fullscreen-drawer .pro-table .amount.positive { color: #2ecc71 !important; }
#personalDetailsModal .pro-table .amount.negative,
#mobile-fullscreen-drawer .pro-table .amount.negative { color: #ff6b6b !important; }

/* ============================================================
   PER-FIELD DOĞRULAMA — AppFloatField (cashwin/BetConstruct 1:1)
   required alan blur'da boşsa: input KIRMIZI kenar (#FF3449) +
   altında "Bu alan gerekli" beyaz metin / açık-kırmızı şerit.
   AppFloatField'ın kullanıldığı tüm modaller (login/register/hesap).
   ============================================================ */
#loginModal .bc-field.invalid input,
#registerModal .bc-field.invalid input,
#personalDetailsModal .bc-field.invalid input,
#mobile-fullscreen-drawer .bc-field.invalid input {
  border: 1px solid #ff3449 !important;
}
/* Mesaj AKIŞ DIŞI (absolute) → .bc-field yüksekliği = input yüksekliği kalır,
   böylece floating label'ın top:50% merkezi AŞAĞI KAYMAZ. Input'un hemen altında. */
#loginModal .bc-field-msg,
#registerModal .bc-field-msg,
#personalDetailsModal .bc-field-msg,
#mobile-fullscreen-drawer .bc-field-msg {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 3px;
  padding: 4px 15px;
  border-radius: 4px;
  background: rgba(255, 52, 73, 0.2);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  z-index: 2;
}
/* invalid alan: absolute mesaja yer aç (sonraki alanla çakışmasın) */
#loginModal .bc-field.invalid,
#registerModal .bc-field.invalid,
#personalDetailsModal .bc-field.invalid,
#mobile-fullscreen-drawer .bc-field.invalid {
  margin-bottom: 36px;
}

/* Giriş hatası banner'ı — modal içinde (toast yerine), doğrulama kırmızısıyla uyumlu */
#loginModal .login-error {
  background: rgba(255, 52, 73, 0.2);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* ============================================================
   MOBİL bakiye kartları — YATAY KAYDIRMALI carousel (swipe ile bonus kartı).
   newtheme'in transform tabanlı (width:200%) yapısını scroll-snap'e çevir →
   parmakla kaydırma native çalışır; altta tıklanabilir noktalar (desktop için).
   ============================================================ */
#mobile-fullscreen-drawer .balance-cards-container { overflow: visible; }
#mobile-fullscreen-drawer .balance-cards-wrapper {
  width: 100% !important;
  transform: none !important;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#mobile-fullscreen-drawer .balance-cards-wrapper::-webkit-scrollbar { display: none; }
#mobile-fullscreen-drawer .balance-card-slide {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  scroll-snap-align: center;
}

/* ============================================================
   MOBİL drawer RENKLERİ = WEB (masaüstü hesap modalı) ile 1:1.
   newtheme'in mobil-özel paletini (#040D1A bg, #269d57 yeşil, bronz,
   #29313C bölümler, renkli ikon tile'ları) masaüstü re-skin paletine ezer.
   ============================================================ */
/* Genel zemin: #040D1A → #1d1d1d (web frame'iyle aynı) */
#mobile-fullscreen-drawer,
#mobile-fullscreen-drawer.mobile-fullscreen-drawer,
#mobile-fullscreen-drawer .modern-aside,
#mobile-fullscreen-drawer aside,
#mobile-fullscreen-drawer .mobile-aside,
#mobile-fullscreen-drawer .mobile-balance-panel,
#mobile-fullscreen-drawer .mobile-payment-panel {
  background: #1d1d1d !important;
}
/* Bakiye kartları — web ile aynı yeşil/bronz */
#mobile-fullscreen-drawer .modern-card.main-balance { background: #109121 !important; }
#mobile-fullscreen-drawer .modern-card.modern-bonus { background: #aa7f00 !important; }
/* Menü bölümleri — web: rgba(255,255,255,.05), kenarsız, radius 4 */
#mobile-fullscreen-drawer .modern-section {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 4px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Renkli ikon tile'larını kaldır → web'deki gibi düz ikon */
#mobile-fullscreen-drawer .modern-section .modern-left i {
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Aynı ikonlar section DIŞINDA da (panel içeriği: bonus/mesaj boş-durum) renkli
   tile alıyordu (newtheme: bc-i-history yeşil, bc-i-message mavi). Her yerde kaldır. */
#mobile-fullscreen-drawer .bc-i-history,
#mobile-fullscreen-drawer .bc-i-message {
  background: none !important;
  border-radius: 0 !important;
}

/* Panel başlık/back/tabbar zeminleri — TÜM panellerde (BAKİYE YÖNETİMİ + PROFİLİM
   + diğerleri) kaldırılır. Merkezî: panel-özel scoped stilleri ezer (id + !important). */
#mobile-fullscreen-drawer .mbp-header { background: none !important; }
#mobile-fullscreen-drawer .mbp-back {
  background: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
  /* Beyaz daire kalkınca ok küçük (9px) + glyph kutuda aşağıda kalıyordu →
     başlık yazısıyla aynı hizaya getir: boyutu büyüt + glyph'i tam ortala. */
  font-size: 14px !important;
  width: auto !important;
  height: auto !important;
}
#mobile-fullscreen-drawer .mbp-back i {
  line-height: 1;
  display: block;
  /* glyph optik olarak yazıyla aynı hizaya — çok minik yukarı */
  transform: translateY(-1px);
}
/* Geri = başlık yazısı DA tıklanabilir (küçük ok'a nişan almak zor; tıklama alanı
   başlığı kapsasın → yazıya dokununca da geri çık). Ok görsel boyutu değişmez. */
#mobile-fullscreen-drawer .mbp-title { cursor: pointer; }
#mobile-fullscreen-drawer .mbp-tabbar { background: none !important; }
/* mbp-header SABİT DEĞİL — panel içeriği kaydırılınca header da yukarı kaybolsun
   (sticky değil). Tüm paneller: BAKİYE / PROFİLİM / BAHİS GEÇMİŞİ. */
#mobile-fullscreen-drawer .mbp-header { position: static !important; }

/* ── Native date input (iOS Safari) HİZA — .th-date geçmiş filtreleri (Bonus/İşlem Geçmişi).
   iOS'ta <input type="date"> değeri ::-webkit-date-and-time-value ile render olur ve VARSAYILAN
   ORTALANIR → sol-hizalı floating label ("Başlangıç"/"Bitiş") ile hizasız/çakışık görünüyordu.
   Masaüstü Chrome (devtools) değeri zaten sola hizaladığından orada düzgündü, sorun YALNIZ gerçek
   iPhone'da çıkıyordu. Değeri sola hizala + varsayılan margin'i sıfırla → her platformda label ile
   aynı hizada. Masaüstünde no-op (zaten sola hizalı). */
input.th-date::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* iOS İKİNCİ sorun (DİKEY): iOS <input type=date> DEĞERİ padding-top'ı YOK SAYIP kutunun dikey
   ORTASINA basar → floating label ("BAŞLANGIÇ"/"BİTİŞ") ile üst üste biner. Bilinen kesin çözüm:
   appearance:none → iOS padding'e uyar, değer label'ın ALTINA oturur (masaüstüyle birebir).
   @supports guard'ı YALNIZ iOS'ta geçer (-webkit-touch-callout iOS-only) → masaüstü Chrome'un
   takvim ikonu/görünümü DEĞİŞMEZ. */
@supports (-webkit-touch-callout: none) {
  input.th-date {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Yöntem kartları (yatır/çek) zemini — web kutu rengiyle uyumlu */
#mobile-fullscreen-drawer .mobile-payment-card,
#mobile-fullscreen-drawer .mobile-withdraw-card {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* PROMOSYON KODU (masaüstü modal sol menü) — soft kutu + GOLD UYGULA
   (GÖSTER butonuyla aynı gradient; eski turkuaz kaldırıldı). */
#personalDetailsModal .modern-promo-section {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px !important;
}
#personalDetailsModal .modern-promo-input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  border-radius: 4px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  height: 38px !important;
}
#personalDetailsModal .modern-btn-promo {
  background: linear-gradient(145deg, var(--brand-dark) 0%, var(--brand-mid) 45%, var(--brand) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: filter 0.15s ease;
}
#personalDetailsModal .modern-btn-promo:hover { filter: brightness(1.08); }

/* Kupon filtre çipleri (masaüstü BAHİS GEÇMİŞİ) — newtheme'in lacivert aktifini
   (rgb(8,16,28)) soft temaya çevir: pasif yumuşak kutu, aktif GOLD ghost
   (mobil DETAY butonu esteğiyle birebir). */
#personalDetailsModal .coupon-filters { gap: 8px; margin: 4px 0 16px; }
#personalDetailsModal .coupon-filter-btn {
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#personalDetailsModal .coupon-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
}
#personalDetailsModal .coupon-filter-btn.active {
  background: rgb(from var(--brand) r g b / 0.1);
  border-color: rgb(from var(--brand) r g b / 0.45);
  color: var(--brand);
}

/* 2FA kod-girme input'u — soft kutu. Mobilde newtheme'in
   `#mobile-fullscreen-drawer .modern-input { background:#111926; opacity:0.6 }`
   ID-kuralını ez (eşit specificity, globals sonra yüklenir → kazanır). */
#mobile-fullscreen-drawer .tfa-code,
#personalDetailsModal .tfa-code,
.mobile-personal-panel .tfa-code {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  opacity: 1 !important;
}

/* lucybet base kuralı `.resimler img { margin-top:-55px; margin-left:8px }`
   oyun kartlarını yukarı çekip satırları BİRBİRİNE BİNDİRİYOR ve bölüm
   başlıklarını örtüyordu (masaüstü + tablet). newtheme'in temiz flex grid'i
   (gap, %20'lik kartlar) için margin sıfırlanır. */
.desktop-image .resimler a img {
  margin: 0;
}

/* Casino bölümleri (masaüstü + tablet) — düzen incelikleri:
   kartlar arası biraz daha nefes, iki bölüm arası belirgin boşluk,
   başlık İNCE fontla ve İLK KARTLA AYNI hizada. */
.desktop-image .resimler {
  gap: 12px;
}
/* gap 12px'e göre 5'li satır matematiği: 5×(20% − 9.6px) + 4×12px = 100%.
   flex-grow:0 → satıra sığmayan/eksik kalan kart ASLA tam genişliğe şişmez. */
.desktop-image .resimler a {
  flex: 0 0 calc(20% - 9.6px);
}
.casino-header.desktop-only {
  margin: 22px auto 10px;
}
.casino-header .section-title {
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.9);
  padding-left: 0 !important; /* newtheme 7px içeriden başlatıyordu → kart kenarıyla hizala */
}

/* ════════════════════════════════════════════════════════════════════════
   TABLET BANDI (769-1023): ANASAYFA BÖLÜMLERİ
   Kök neden: lucybet .desktop-image yalnız ≥1024'te, newtheme .desktop-only
   yalnız ≥992'de açılıyor; mobil bölümler ise ≥769'da kapanıyor → bantta
   başlık-var-kart-yok. Masaüstü header 769'da açıldığına göre masaüstü
   bölümler de 769'da açılır; kartsız mobil sarmalayıcılar kapanır.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1023.98px) {
  /* Masaüstü bölümler (spor kartları + casino başlıkları) header'la aynı eşikte */
  .desktop-only { display: flex; }
  /* Masaüstü oyun kartı konteyneri (lucybet taban display:none kırılır;
     newtheme ≥769 .resimler flex grid'i zaten hazır → responsive 5'li satır) */
  .desktop-image { display: block; }
  /* Kartsız kalan mobil bölümler (başlık yığılmasının kaynağı) bu bantta kapalı */
  .mobil-image { display: none; }
  /* lucybet'in ≤991 hayalet 80px body padding'i + işlevsiz fixed boş navbar */
  body.welcome-theme { padding-top: 0; }
  #navbar.navbar { position: static; }
}

/* ── KATEGORİ NAV overflow ("DAHA") — Priority+ deseni ──
   JS (AppHeader recalcFit) sığmayanları gizleyip DAHA'ya taşır; öğeler artık
   hiç taşmadığından newtheme'in gizli-scrollbar'lı overflow-x:auto'su yerine
   dropdown'ın kırpılmaması için overflow:visible. */
#cw-cat-nav.js-fit { overflow: visible; }
/* Kategori menüsü yazı boyutu (kullanıcı isteği) — tüm masaüstü genişliklerinde 14px. */
#cw-cat-nav .cw-nav-item { font-size: 14px; }
/* bc-i glyph'leri em-kutusunun alt kısmında oturuyor → yazıya göre bir tık aşağıda
   görünüyor. Optik olarak yazıyla aynı hizaya getir (hafif yukarı). */
#cw-cat-nav .cw-nav-item > i,
#cw-cat-nav .cw-nav-item > span[class*="bc-i"] {
  position: relative;
  top: -1px;
}
.cw-nav-more-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
/* buton .cw-nav-item görünümünü AYNEN alır (gradient zemin + gold alt-çizgi
   border-image dahil — class kuralları UA button varsayılanlarını ezer).
   Burada hiçbir görsel sıfırlama YAPILMAZ; yalnız native appearance kapatılır. */
.cw-nav-more-btn {
  appearance: none;
  -webkit-appearance: none;
}
.cw-nav-more-btn.active { color: var(--brand); }
.cw-nav-more-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1200;
  min-width: 210px;
  padding: 6px;
  border-radius: 8px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
}
.cw-nav-more-dropdown.hidden { display: none; }
.cw-nav-more-dropdown .cw-badge { margin-left: 6px; }

/* Masaüstü header + kategori menüsü HEP ekranın üstünde (sticky) — kullanıcı isteği.
   Eskiden static'ti → aşağı kaydırınca kayboluyordu. #cashwin-header tüm üst bloğu
   (duyuru + ana bar + #cw-cat-nav) sarar; mobilde display:none → yalnız web etkilenir. */
#cashwin-header { position: sticky; top: 0; z-index: 1000; }
/* Body overflow-x:hidden (base tema) bir scroll-container kurup sticky'yi bozuyordu.
   clip → yatay taşma yine kırpılır AMA scroll-container OLUŞMAZ → sticky çalışır.
   overflow-y'ye dokunulmaz: modal lockScroll'un inline overflow:hidden'ı yine kilitler. */
body { overflow-x: clip !important; }

/* ── TABLET BANDI (769-900): HESAP MODALI ──
   newtheme ≤900'de .modern-app'i tek sütuna düşürüyor (aside+main alt alta) →
   sabit 90vh gold çerçevede içerik kırpılıyor. İki sütunu dar aside ile geri al. */
@media (min-width: 769px) and (max-width: 900px) {
  #personalDetailsModal .modern-app { grid-template-columns: 240px 1fr; }
  /* scroll eden atası olmayan işlevsiz sticky → static (aside kendi içinde kayar) */
  #personalDetailsModal .modern-aside { position: static; }
  /* dar bantta form alanları tek sütun (≤768 kuralıyla aynı) */
  #personalDetailsModal .pd-grid { grid-template-columns: 1fr; }
}

/* ── TABLET ÜST BAR (769-1024): #main-header utility bar iPad'de (820px) taşıyor →
   sağdaki DİL(TUR) / SAAT / 3-NOKTA kesiliyordu. İçerik ~909px, viewport 820 →
   136px taşma. En harcanabilir öğeleri daraltarak ~295px yer açıyoruz:
     • MOBİL OYUNLARA promo rozeti gizli (−77)
     • BONUS TALEP + ÖZEL ORANLAR → ikon-only, etiket gizli (−201; gift/phone ile aynı kutu)
     • sağ grubun fazla sağ boşluğu kısıldı (−17)
   → tüm sağ küme görünür. newtheme.css'e DOKUNULMAZ (override globals'ta). ── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* MOBİL OYUNLARA promo rozeti — tablette gizli */
  #main-header .cw-mobil-btn {
    display: none !important;
  }
  /* sağ kümeyi kenara yaklaştır (newtheme'in 25px sağ boşluğu fazla) + öğe arası
     boşluğu kıs (5→3) → oturum-KAPALI (GİRİŞ+KAYIT, oturum-açıktan ~33px geniş)
     durumunda da 3-nokta kesilmez, tampon kalır. */
  #main-header .cw-header-right {
    margin-right: 8px !important;
    gap: 3px !important;
  }
  /* BONUS TALEP + ÖZEL ORANLAR → ikon-only (32×32 kutu; metin font-size:0 ile gizli,
     ikon <i> kendi inline 12px'inde kalır → glyph görünür). gift/phone ikonlarıyla tutarlı. */
  #main-header .cw-action-btn {
    width: 32px !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
    justify-content: center !important;
    flex-shrink: 0;
  }
  /* ikon boyutunu komşu ikon butonlarla eşitle (inline 12px'i ez) */
  #main-header .cw-action-btn .cw-btn-icon {
    font-size: 15px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   SİTE GENELİ FONT = ROBOTO (cashwin/BetConstruct 1:1)
   cashwin baştan sona Roboto kullanıyor (kök font-family: Roboto; taranan 357
   elemanın HEPSİ Roboto, tek istisna ikon fontları). Bizim tema (lucybet/xll/
   newtheme) Poppins + Montserrat + Inter + Segoe UI + Arial KARIŞIK kullanıyordu
   → "yazılar farklı" hissinin asıl kaynağı buydu. Tüm METNİ Roboto'ya sabitliyoruz.
   İKON FONTLARI HARİÇ TUTULUR (BetConstruct-Icons=bc-i, Font Awesome=fa, swiper-icons,
   icon-*) — aksi halde glyph'ler bozulur. cashwin de kökü Roboto yapıp ikonları
   kendi fontunda bırakıyor. globals.css en son yüklendiği için cascade'de kazanır. */
body {
  font-family: "Roboto", Arial, Helvetica, sans-serif !important;
}
body *:not([class*="bc-i"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="icon"]):not([class*="swiper"]):not(i) {
  font-family: "Roboto", Arial, Helvetica, sans-serif !important;
}

/* ════════════════════════════════════════════════════════════════════════
   FOOTER ÖDEME YÖNTEMLERİ — 2026-09-27 yeniden düzenlendi (kullanıcı isteği):
   (1) başlık site temasıyla uyumlu (footer h4 gibi 14px/700 UPPERCASE), arkadaki düz
       yatay çizgi KALDIRILDI; (2) logolar KESİNTİSİZ yumuşak yatay kayış (marquee) +
       kenarlarda maske ile soft giriş/çıkış, hover'da durur, reduced-motion'da kapalı;
       (3) tek-tip şık kutular (ince kenar, 8px köşe). Şerit AppFooter.vue'da İKİ KEZ
       render edilir (2. kopya aria-hidden) → translateX(-50%) dikişsiz döner.
   globals.css newtheme'den SONRA yüklenir → bu override'lar kazanır.
   ════════════════════════════════════════════════════════════════════════ */
/* Footer background-image'i kaldır (lucybet.min.css `footer{background-image:linear-gradient(to bottom,#202123,#2d2f32)}`).
   lucybet.min.css'e dokunmuyoruz; globals sonra yüklendiği için bu override kazanır. */
footer { background-image: none !important; }

/* Mobil header navbar arka planı → #131313 (kullanıcı isteği; theme'i ezer). */
.navbar-menu1 { background: #131313 !important; }
/* NOT: ilk-paint body padding (flash fix) yukarıdaki `body.welcome-theme` ≤768 kuralında 120px'e çekildi
   (specificity 0,1,1; düz `body` kuralı onu ezemiyordu — bu yüzden o kural güncellendi). */

/* Tema override'ları (kullanıcı isteği; newtheme.css'i ezer) */
.bottom-fullscreen-menu { background: #131313 !important; }   /* eskiden #000 */
.icon-bg { width: 28px !important; height: 28px !important; } /* eskiden 31×31 */
/* dil seçici + sosyal ikonlar: gold gradient yerine soluk kutu */
.language-select,
.social-icons a {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
}

/* Başlık ("ÖDEME YÖNTEMLERİ") → sitenin diğer footer başlıklarıyla (h4) aynı: 14px/700
   UPPERCASE, 1px harf aralığı, beyaz. Arkadaki düz yatay çizgi (newtheme ::before) KALDIRILDI. */
.payments-title::before { display: none !important; }
.payments-title { margin-bottom: 22px !important; }
.payments-title span {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  font-family: "Roboto", Arial, Helvetica, sans-serif !important;
}

/* Kesintisiz yumuşak kayış (marquee). Wrapper taşmayı gizler + kenarlarda maske ile
   logolar yumuşakça belirip kaybolur ("soft" giriş/çıkış). Şerit AppFooter'da iki kez
   render edilir → translateX(-50%) tam bir kopya kaydırır, dikiş görünmez. */
.payments-slider-wrapper {
  overflow: hidden !important;
  padding: 6px 0 !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%) !important;
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%) !important;
}
.payments-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  gap: 0 !important;
  padding: 0 !important;
  animation: paymentsMarquee 45s linear infinite !important;
  will-change: transform;
}
/* Fareyle üstüne gelince dur (dokunmatikte etkisiz — orada sürekli akar). */
.payments-slider:hover { animation-play-state: paused !important; }
@keyframes paymentsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Hareketi azalt tercihinde animasyon kapanır (erişilebilirlik). */
@media (prefers-reduced-motion: reduce) {
  .payments-slider { animation: none !important; }
}
.payment-item {
  flex: 0 0 auto !important;
  width: 84px !important;
  height: 50px !important;
  margin-right: 8px !important;      /* gap yerine margin: son öğede de boşluk kalsın → -50% dikişsiz */
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.payment-logo {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ════════════════════════════════════════════════════════════════════════
   WHITE-LABEL — newtheme.css'te SABİT gold ile tanımlı branded öğeler.
   newtheme'e dokunulmaz; burada marka değişkenleriyle override edilir (globals
   sonra yüklenir → kazanır). Değerler newtheme ile BİREBİR; yalnız gold hex'ler
   var(--brand-*) ile değiştirildi → varsayılanda piksel-piksel aynı, tema_brand
   seçilince hepsi döner. Hepsi @media(min-width:769px) — masaüstü (newtheme parite).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* KAYIT butonu — düz gold dolgu */
  .cw-kayit-btn { background: var(--brand-solid) !important; }
  .cw-kayit-btn:hover { background: var(--brand-hi) !important; }

  /* Bakiye butonu — alt parlak ince çizgi (border-image) */
  .cw-balance-btn {
    border-image: linear-gradient(to left, #13131321 5%, var(--brand-line) 50%, #13131321 95%) 100% 0 100% 0 / 0px 0 1px 0 stretch !important;
  }

  /* Kullanıcı dropdown öğesi — alt parlak ince çizgi */
  .cw-user-dropdown-item {
    border-image: linear-gradient(to left, #13131321 5%, var(--brand-line) 50%, #13131321 95%) 100% 0 100% 0 / 0px 0 1px 0 stretch !important;
  }

  /* Kategori navigasyonu — üst ince gold çizgi */
  #cw-cat-nav {
    border-image: linear-gradient(to left, #13131321 5%, var(--brand-line) 50%, #13131321 95%) 100 0 100 0 / 1px 0 0px 0 stretch;
  }

  /* Nav öğesi — alt gold çizgi (pasif / hover / aktif) + ikon + glow */
  .cw-nav-item {
    border-image: linear-gradient(to left, #13131321 5%, var(--brand-line) 50%, #13131321 95%) 100 0 100 0 / 0px 0 1px 0 stretch;
  }
  .cw-nav-item:hover {
    border-image: linear-gradient(to left, #13131321 5%, var(--brand-line2) 50%, #13131321 95%) 100 0 100 0 / 0px 0 1px 0 stretch;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgb(from var(--brand-line2) r g b / 0.15), 0 1px 3px rgba(0, 0, 0, 0.6);
  }
  .cw-nav-item.active {
    border-image: linear-gradient(to left, #13131321 2%, var(--brand-line2) 50%, #13131321 98%) 100 0 100 0 / 0px 0 2px 0 stretch;
    box-shadow: inset 0 1px 0 rgb(from var(--brand-line2) r g b / 0.1), 0 2px 12px rgb(from var(--brand-line2) r g b / 0.2), 0 1px 3px rgba(0, 0, 0, 0.6);
    text-shadow: 0 0 12px rgb(from var(--brand-line2) r g b / 0.3);
  }
  .cw-nav-item.active svg {
    color: var(--brand-line2);
    filter: drop-shadow(0 0 4px rgb(from var(--brand-line2) r g b / 0.4));
  }
}

/* Mobil kategori menüsü ikonları — DÜZ, TAM marka rengi (kullanıcı: "tam rengi
   olsun"). Gradyan üstte açık/altta koyu yapıp rengi "karartıyordu" → kaldırıldı;
   glyph tam var(--brand) ile dolar, yalnız hafif koyu gölge (glow yok). */
@media (max-width: 768px) {
  .mobile-category-menu .menu-item i {
    background: none !important;
    -webkit-text-fill-color: var(--brand) !important;
    color: var(--brand) !important;
    font-size: 32px !important; /* 42→32: daha dengeli, göze batmasın */
    min-height: 36px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)) !important;
  }
}

/* Bildirim/sayı rozeti — TAM marka rengi 1:1 (kullanıcı isteği). newtheme'in gold
   gradyanını (!important) ez; düz var(--brand), yazı zaten beyaz. */
.badge { background: var(--brand) !important; }

/* Banner sayacı (1/4) — SABİT koyu zemin (kullanıcı isteği). newtheme'in gold
   gradyanını (!important) ez. */
.banner-counter { background: #131313 !important; }
.banner-swiper .swiper-slide img{aspect-ratio:1600/415 !important;height:auto !important;object-fit:cover !important}