:root{
  --bg:#0a0a0a;
  --panel:#141414;
  --panel2:#101010;
  --line:#232323;
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.5);
  --yellow:#d4af37;
}

html,body{height:100%}
html,body{overflow-x:hidden}
body.app{
  background: radial-gradient(1200px 600px at 30% 0%, rgba(212,175,55,.12), transparent 60%),
              linear-gradient(#050505, #0a0a0a 35%);
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.text-muted-2{color:var(--muted2)}
.fw-black{font-weight:900}

/* Announcement Bar */
.announcement-bar{
  background: #272727;
  border-bottom:1px solid rgba(0,0,0,.1);
  position:relative;
}
.announcement-bar .container-fluid{
  position:relative;
  padding:0;
}
.announcement-marquee-container{
 overflow: hidden;
    width: 100%;
    padding: .75rem 0;
    border-top: solid 2px #f5df16;
    margin-top: 4px;
    border-radius: 5px;
}
.announcement-marquee{
  display:inline-block;
  animation:marqueeRTL 15s linear infinite;
  white-space:nowrap;
  color:#fff;
  font-size:12px;
  font-weight:400;
}
@keyframes marqueeRTL{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}
.announcement-close{
  position:absolute;
  top:50%;
  right:1rem;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:#fff;
  font-size:1rem;
  cursor:pointer;
  padding:.5rem;
  z-index:10;
  transition:all .2s;
  opacity:.7;
}
.announcement-close:hover{
  opacity:1;
  transform:translateY(-50%) scale(1.1);
}
.text-darkx{
  color:var(--yellow) !important;
}
.py-2x {
    padding-top: 1rem !important;
    padding-bottom: .5rem !important;
}
/* Main Header */
.main-header{
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brand-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 4px rgba(212,175,55,.18);
}
.brand-logo{
  height:32px;
  width:auto;
}
.header-divider{
  width:1px;
  height:22px;
  background:rgba(255,255,255,.15);
}
.user-avatar-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#dc2626;
  font-size:1.1rem;
  box-shadow:0 0 12px 2px rgba(220,38,38,.55);
  text-decoration:none;
  transition:box-shadow .2s;
  flex-shrink:0;
}
.user-avatar-icon:hover{
  box-shadow:0 0 16px 4px rgba(220,38,38,.8);
  color:#b91c1c;
}
.lang-dropdown{
  position:relative;
}
.lang-selector{
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, .05);
    font-size: .85rem;
    color: var(--muted);
    cursor: pointer;
    transition: all .2s;
    padding: 6px 0;
    background: transparent;
    border: none;
    color: #fff;
}
.lang-selector:hover{
  background:rgba(255,255,255,.1);
}
.lang-menu{
  position:absolute;
  top:calc(100% + 5px);
  right:0;
  background:#1d1d1d;
  border:1px solid var(--line);
  border-radius:8px;
  min-width:90px;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:all .3s ease;
  z-index:1000;
}
.lang-menu.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.lang-option{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  color:#fff;
  font-size:.85rem;
  cursor:pointer;
  transition:background .2s;
}
.lang-option:hover{
  background:rgba(255,255,255,.1);
}
.lang-option.active{
  background:rgba(212,175,55,.15);
  color:var(--yellow);
}
.lang-option img{
  width:20px;
  height:14px;
}
.time-display{
  color:var(--muted2);
  font-family:monospace;
  font-size:.9rem;
}
.btn-warnings {
    background: #ffca17 !important;
}
.btn-warnings:hover {
    color: #000 !important;
}
.deposit-btn-coin{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#000;
  color:var(--yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  flex-shrink:0;
}
.btn-outline-lights {
    color: #fff !important;
    text-decoration: underline;
}
/* Navigation Bar */
.nav-bar{
    background: #0a0a0a;
    padding: .5rem 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-bar::-webkit-scrollbar{display:none}
.nav-items{
  display:flex;
  white-space:nowrap;
  min-width:max-content;
  width:100%;
}
.nav-item-link:last-child{
  margin-left:auto;
}
.nav-item-link{
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .5rem 1rem;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .3px;
    transition: all .2s;

}
.nav-item-link i{
  font-size:14px;
}
.nav-item-link:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}
.nav-item-link.active{
  color:var(--yellow);
}
.nav-item-link.active i{
  color:var(--yellow);
}

.hero{
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(120deg, rgba(0,0,0,.45), rgba(0,0,0,.15)),
    radial-gradient(900px 420px at 30% 20%, rgba(212,175,55,.18), transparent 55%),
    linear-gradient(180deg, #161616, #0d0d0d);
  overflow:hidden;
}
.promo-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.promo-card{
  border:1px solid var(--line);
  border-radius:16px;
  background: linear-gradient(180deg, #181818, #101010);
  padding:14px;
  min-height:92px;
}
.promo-title{
  font-weight:800;
  letter-spacing:.2px;
}
.promo-sub{
  color:var(--muted2);
  font-size:.9rem;
}

.jackpot-section{
  background: linear-gradient(135deg, rgba(139,109,0,.25) 0%, rgba(75,60,0,.15) 100%);
  border:2px solid rgba(212,175,55,.4);
  border-radius:20px;
  overflow:hidden;
}
.jackpot-main{
  background: linear-gradient(180deg, rgba(212,175,55,.15), rgba(212,175,55,.05));
  border-bottom:1px solid rgba(212,175,55,.3);
}
.jackpot-title{
  color:var(--yellow);
  font-size:1rem;
  letter-spacing:2px;
  text-shadow:0 0 10px rgba(212,175,55,.5);
}
.jackpot-amount-big{
  font-size:3.5rem;
  font-weight:900;
  line-height:1;
  color:#000;
}
.jackpot-number{
  color:var(--yellow);
}
.jackpot-static{
  display:inline-block;
}
.jackpot-animated{
  display:inline-block;
  position:relative;
}
.jackpot-animated.spinning{
  animation:jackpotSpin .1s linear;
}
@keyframes jackpotSpin{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.jackpot-currency{
  font-size:2rem;
  color:var(--yellow);
  position: relative;
  top: 0;
}
.jackpot-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:0;
}
.jackpot-card{
  background: linear-gradient(135deg, rgba(212,175,55,.12), rgba(139,109,0,.08));
  border-right:1px solid rgba(212,175,55,.2);
  padding:1.5rem 1rem;
  text-align:center;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.jackpot-card:last-child{
  border-right:none;
}
.jackpot-card:hover{
  background: linear-gradient(135deg, rgba(212,175,55,.2), rgba(139,109,0,.15));
  transform:translateY(-2px);
}
.jackpot-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(45deg, transparent, rgba(212,175,55,.1), transparent);
  animation:shimmer 3s infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.jackpot-card-icon{
  font-size:1.8rem;
  color:var(--yellow);
  margin-bottom:.5rem;
  filter:drop-shadow(0 0 8px rgba(212,175,55,.6));
}
.jackpot-card-label{
  font-size:.75rem;
  font-weight:800;
  color:var(--yellow);
  letter-spacing:1.5px;
  margin-bottom:.3rem;
}
.jackpot-card-amount{
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
}
.static-digits{
  color:rgba(255,255,255,.8);
}
.animated-digits{
  display:inline-block;
  color:var(--yellow);
}
.jackpot-card-currency{
  font-size:.9rem;
  color:rgba(255,255,255,.7);
  margin-left:.2rem;
}
@media(max-width:992px){
  .jackpot-cards{
    grid-template-columns:repeat(2,1fr);
  }
  .jackpot-card{
    border-right:none;
    border-bottom:1px solid rgba(212,175,55,.2);
  }
  .jackpot-card:nth-child(odd){
    border-right:1px solid rgba(212,175,55,.2);
  }
  .jackpot-card:last-child{
    border-bottom:none;
  }
  .jackpot-amount-big{
    font-size:2.5rem;
  }
}
.pill{
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:.35rem .7rem;
  color:rgba(255,255,255,.82);
  background: rgba(0,0,0,.2);
  font-size:.9rem;
}

.event-card{
  border:1px solid var(--line);
  border-radius:16px;
  background: linear-gradient(180deg, #151515, #0d0d0d);
  padding:14px;
}
.odd{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:#fff;
  border-radius:12px;
  padding:.55rem .6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
}
.odd span{color:var(--yellow)}
.odd:hover{background: rgba(255,255,255,.07)}

.image-card{
  display:block;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.image-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(212,175,55,.3);
}
.card-img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .3s ease;
} 

.live-scores-wrapper{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.live-scores-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem;
  border-bottom:1px solid var(--line);
  background:var(--panel2);
}
.filter-btn{
  background:transparent;
  border:1px solid var(--line);
  color:rgba(255,255,255,.7);
  padding:.4rem 1rem;
  border-radius:6px;
  font-size:.85rem;
  font-weight:600;
  transition:all .2s;
}
.filter-btn.active{
  background:rgba(255,255,255,.1);
  color:#fff;
}
.live-time-filters{
  display:flex;
  gap:.5rem;
}
.time-filter-btn{
  background:transparent;
  border:1px solid var(--line);
  color:rgba(255,255,255,.6);
  padding:.3rem .8rem;
  border-radius:6px;
  font-size:.75rem;
  transition:all .2s;
}
.time-filter-btn.active{
  background:var(--yellow);
  border-color:var(--yellow);
  color:#000;
  font-weight:700;
}
.live-scores-head{
  display:grid;
  grid-template-columns:180px 1fr 120px 300px;
  padding:.8rem 1rem;
  background:rgba(0,0,0,.3);
  font-size:.75rem;
  font-weight:700;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
}
.live-col-odds{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem;
  text-align:center;
}
.live-match-row{
  display:grid;
  grid-template-columns:180px 1fr 120px 300px;
  padding:1rem;
  border-bottom:1px solid var(--line);
  transition:background .2s;
}
.live-match-row:hover{
  background:rgba(255,255,255,.02);
}
.live-col-time{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  color:var(--muted2);
}
.team-names{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.team-home,.team-away{
  color:#fff;
  font-size:.9rem;
  font-weight:600;
}
.live-col-stats{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.8rem;
  color:var(--muted);
}
.match-stats{
  background:rgba(255,255,255,.05);
  padding:.2rem .5rem;
  border-radius:4px;
  font-size:.8rem;
}
.odd-btn{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.5rem;
  color:var(--yellow);
  font-weight:700;
  font-size:1rem;
  transition:all .2s;
  cursor:pointer;
}
.odd-btn:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-2px);
}
.odd-btn.highlight{
  background:var(--yellow);
  border-color:var(--yellow);
  color:#000;
}
@media(max-width:992px){
  .live-scores-head,.live-match-row{
    grid-template-columns:140px 1fr 100px 240px;
  }
  .live-col-odds{
    gap:.3rem;
  }
  .odd-btn{
    padding:.4rem;
    font-size:.85rem;
  }
}
@media(max-width:768px){
  .live-scores-header{
    flex-wrap:wrap;
    gap:.5rem;
  }
  .live-time-filters{
    flex-wrap:wrap;
  }
  .live-scores-head{
    display:none;
  }
  .live-match-row{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "time stats"
      "teams teams"
      "odds odds";
    row-gap:.6rem;
  }
  .live-col-time{ grid-area:time; }
  .live-col-teams{ grid-area:teams; }
  .live-col-stats{ grid-area:stats; justify-content:flex-end; }
  .live-col-odds{ grid-area:odds; gap:.5rem; }
}

.game-card{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background: linear-gradient(180deg, #121212, #101010);
}
.game-thumb{
  height:120px;
  background:
    radial-gradient(250px 120px at 30% 20%, rgba(212,175,55,.25), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
}
.game-name{
  padding:10px 12px;
  color:rgba(255,255,255,.85);
  font-weight:700;
  font-size:.95rem;
}

.footer{
  border-top:1px solid var(--line);
  background: #050505;
}
.footer-links-grid{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:3rem;
  max-width:1000px;
  margin:0 auto;
}
.footer-column{
  text-align:center;
}
.footer-title{
  color:#fff;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.footer-link{
  display:block;
  color:var(--muted);
  text-decoration:none;
  margin:6px 0;
  font-size:.75rem;
  transition:color .2s;
}
.footer-link:hover{
  color:#fff;
}
@media(max-width:768px){
  .footer-links-grid{
    flex-wrap:wrap;
    gap:2rem;
  }
  .footer-column{
    flex:0 0 45%;
  }
}
.footer-section-title{
  color:rgba(255,255,255,.5);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}
.footer-license-icon{
  height:60px;
  opacity:.7;
}
.payment-methods{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  flex-wrap:wrap;
  max-width:1000px;
  margin:0 auto;
}
.payment-icon{
  width:80px;
  height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.4rem;
  opacity:.7;
  transition:all .2s;
}
.payment-icon:hover{
  opacity:1;
  background:rgba(255,255,255,.06);
  border-color:rgba(212,175,55,.3);
}
.payment-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:2rem;
  margin-top:3rem;
}
.divider{height:1px;background:var(--line)}

.marquee-container{
  overflow:hidden;
  position:relative;
  flex:1;
  max-width:400px;
}
.marquee-content{
  display:inline-block;
  white-space:nowrap;
  animation:marquee 15s linear infinite;
}
@keyframes marquee{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}
.marquee-container:hover .marquee-content{
  animation-play-state:paused;
}

.slider-image{
  height:450px;
  object-fit:cover;
  object-position:center;
}
.carousel-indicators{
  margin-bottom:1.5rem;
}
.carousel-indicators [data-bs-target]{
  width:12px;
  height:12px;
  border-radius:50%;
  background-color:rgba(255,255,255,.4);
  border:0;
}
.carousel-indicators .active{
  background-color:var(--yellow);
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  width:3rem;
  height:3rem;
  background-color:rgba(0,0,0,.5);
  border-radius:50%;
}
@media(max-width:768px){
  .slider-image{
    height:300px;
    object-position:88% center;
  }
}

.trend-slider-wrapper{
  position:relative;
}
.trend-slider{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.5rem;
}
.trend-card{
  position:relative;
  border-radius:5px;
  overflow:hidden;
  cursor:pointer;
}
.trend-img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .3s ease;
}
.trend-card:hover .trend-img{
  transform:scale(1.05);
}

.trend-card-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;
  z-index:5;
}

.trend-card:hover .trend-card-overlay{
  opacity:1;
  visibility:visible;
}

.trend-card-icons{
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  padding:0.75rem;
}

.trend-icon-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1rem;
  transition:all 0.2s;
  cursor:pointer;
}

.trend-icon-btn:hover{
  background:rgba(255,255,255,0.3);
  transform:scale(1.1);
}

.trend-card-title{
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1rem;
    padding: 0 1rem;
}

.trend-play-btn{
    background: #ffca17;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 2rem;
    color: #000;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    padding: 4px 10px;
}

.trend-play-btn:hover{
  background:#ffeb3b;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(250,224,1,0.4);
}
.trend-card--playing{
  grid-column:1 / -1;
  cursor:default;
  padding:0 320px;
}
.trend-card--playing .trend-card-overlay{
  display:none;
}
.trend-card-player{
  position:relative;
  aspect-ratio:16/9;
  z-index:20;
  background:#000;
}
.trend-card-player iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
@media(max-width:1400px){
  .trend-card--playing{
    padding:0 120px;
  }
}
@media(max-width:900px){
  .trend-card--playing{
    padding:0 24px;
  }
}
.trend-card-player-close{
  position:absolute;
  top:8px;
  right:8px;
  z-index:21;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s;
}
.trend-card-player-close:hover{
  background:rgba(212,175,55,.9);
  color:#000;
}
.trend-badge{
  position:absolute;
  top:12px;
  left:12px;
  background:rgba(0,0,0,.85);
  color:#fff;
  padding:.35rem .7rem;
  border-radius:6px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.5px;
  z-index:2;
  border:1px solid rgba(255,255,255,.2);
}
.trend-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:45px;
  height:45px;
  border-radius:50%;
  background:rgba(0,0,0,.7);
  border:1px solid var(--line);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .3s ease;
  z-index:10;
}
.trend-nav:hover{
  background:rgba(212,175,55,.9);
  color:#000;
  border-color:var(--yellow);
}
.trend-nav-prev{
  left:-22px;
}
.trend-nav-next{
  right:-22px;
}
@media(max-width:1200px){
  .trend-slider{
    grid-template-columns:repeat(4,1fr);
  }
  .trend-card:last-child{
    display:none;
  }
}
@media(max-width:992px){
  .trend-slider{
    grid-template-columns:repeat(3,1fr);
  }
  .trend-card:nth-child(4){
    display:none;
  }
}
@media(max-width:768px){
  .trend-slider{
    grid-template-columns:repeat(2,1fr);
  }
  .trend-card:nth-child(3){
    display:none;
  }
  .trend-nav{
    width:35px;
    height:35px;
  }
  .trend-nav-prev{
    left:-8px;
  }
  .trend-nav-next{
    right:-8px;
  }
}

/* Login Modal */
.modal-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  backdrop-filter:blur(3px);
}

.modal-overlay.show{
  display:flex;
}

.modal-container{
  background:#1b1b1b;
  border-radius:8px;
  width:90%;
  max-width:400px;
  padding:1.25rem .75rem;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
  animation:modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn{
  from{
    opacity:0;
    transform:translateY(-30px) scale(0.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.modal-close{
  position:absolute;
  top:1.25rem;
  right:1.25rem;
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.6);
  font-size:1.5rem;
  cursor:pointer;
  padding:0.25rem;
  transition:all 0.2s;
  z-index:10;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal-close:hover{
  color:#fff;
  transform:rotate(90deg);
}

.modal-header-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid rgba(255,255,255,0.1);
}

.modal-body{
  padding:0;
}

.modal-subtitle{
  color:rgba(255,255,255,0.5);
  font-size:0.875rem;
  font-weight:400;
  letter-spacing:0.3px;
}

.modal-title{
  color:#fff;
  font-size:18px;
  font-weight:500;
  letter-spacing:0.5px;
  margin:0;
}

.form-control-custom{
  width:100%;
  background:#3a3a3a;
  border:1px solid #4a4a4a;
  border-radius:4px;
  padding:10px;
  color:#fff;
  font-size:0.9rem;
  transition:all 0.2s;
}

.form-control-custom:focus{
  outline:none;
  border-color:#5a5a5a;
  background:#404040;
}

.form-control-custom::placeholder{
  color:rgba(255,255,255,0.4);
  font-size:0.9rem;
}

.form-check-custom{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.form-check-input-custom{
  width:18px;
  height:18px;
  min-width:18px;
  background:#3a3a3a;
  border:1px solid #5a5a5a;
  border-radius:3px;
  cursor:pointer;
  appearance:none;
  position:relative;
  transition:all 0.2s;
}

.form-check-input-custom:checked{
  background:#fae001;
  border-color:var(--yellow);
}

.form-check-input-custom:checked::after{
  content:'✓';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#000;
  font-size:12px;
  font-weight:bold;
}

.form-check-label-custom{
  color:rgba(255,255,255,0.6);
  font-size:0.875rem;
  cursor:pointer;
  user-select:none;
}
.mr-3{
  margin-right: 3rem !important;
}
.btn-login-submit{
    background: #ffca17;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1.5rem;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.btn-login-submit:hover{
  background:#ffeb3b;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(250,224,1,0.3);
}

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

.forgot-password-link{
  color:var(--yellow);
  font-size:0.875rem;
  text-decoration:none;
  font-weight:500;
  letter-spacing:0.3px;
  transition:all 0.2s;
}

.forgot-password-link:hover{
  color:var(--yellow);
  text-decoration:underline;
}

.support-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:rgba(255,255,255,0.5);
  font-size:0.875rem;
  text-decoration:none;
  transition:all 0.2s;
  letter-spacing:0.3px;
}

.support-link:hover{
  color:rgba(255,255,255,0.8);
}

.support-link i{
  font-size:1rem;
}

@media(max-width:576px){
  .modal-container{
    width:95%;
    padding:2rem 1.5rem;
  }

  .modal-title{
    font-size:1.25rem;
  }
}

/* Register Modal */
.modal-container-register{
  background:#1b1b1b;
  border-radius:8px;
  width:90%;
  max-width:590px;
  height:550px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
  animation:modalSlideIn 0.3s ease;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.register-top-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,0.1);
  flex-shrink:0;
}

.register-content{
  display:flex;
  flex:1;
  overflow:hidden;
}

.register-image-col{
  width:42%;
  flex-shrink:0;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
}

.register-image-col img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.register-form-col{
  flex:1;
  width:58%;
  display:flex;
  flex-direction:column;
  padding:1.25rem 1rem;
  overflow:hidden;
}

.register-form-scroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:0.5rem;
}

.register-form-scroll::-webkit-scrollbar{
  width:6px;
}

.register-form-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.05);
  border-radius:3px;
}

.register-form-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.2);
  border-radius:3px;
}

.register-form-scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.3);
}

@media(max-width:768px){
  .modal-container-register{
    width:95%;
    max-width:500px;
    height:500px;
  }

  .register-image-col{
    width:40%;
  }
}

@media(max-width:576px){
  .modal-container-register{
    height:90vh;
    max-height:600px;
  }

  .register-content{
    flex-direction:column;
  }

  .register-image-col{
    width:100%;
    height:200px;
  }

  .register-image-col img{
    height:200px;
    width:100%;
  }

  .register-form-col{
    width:100%;
  }
}

/* ========== USER CONTROLS (LOGGED IN STATE) ========== */
.btn-deposit {
  background: linear-gradient(135deg, #f5c400 0%, #e6b800 100%);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.btn-deposit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, #ffd700 0%, #f5c400 100%);
}

.btn-deposit i {
  font-size: 16px;
}

.user-balance {
  background: #262f45;
  border-radius: 8px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Courier New', monospace;
}

.balance-amount {
  font-weight: 500;
  font-size: 15px;
  color: #f5c400;
}

.balance-currency {
  font-size: 13px;
  color: var(--muted);
}
.user-profile-btns {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
} 

.user-profile-btn:hover {
  border-color: #f5c400;
  background: rgba(212, 175, 55, 0.1);
}

.user-profile-btn i {
  font-size: 24px;
}

/* ========== DEPOSIT MODAL ========== */
#depositModal.show {
  display: flex !important;
}

/* Auth Prompt Modal */
.auth-prompt-container {
    position: relative;
    width: 90vw;
    max-width: 500px;
    background: #1b1b1b;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid #262f45;
    padding: 40px 30px;
}

.auth-prompt-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-auth-action {
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-auth-register {
  background: linear-gradient(135deg, #f5c400 0%, #e6b800 100%);
  color: #000;
}

.btn-auth-register:hover {
  background: linear-gradient(135deg, #ffeb3b 0%, #f5c400 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.btn-auth-login {
  background: #262f45;
  color: #fff;
  border: 2px solid #333e52;
}

.btn-auth-login:hover {
  background: #2a3548;
  border-color: #f5c400;
  color: #f5c400;
  transform: translateY(-2px);
}

.deposit-modal-container {
  position: relative;
  width: 80vw;
  max-width: 900px;
  height: 80vh;
  max-height: 700px;
  background: linear-gradient(135deg, #1d1d1d 0%, #101010 100%);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #262f45;
}

.deposit-modal-header {
  padding: 24px;
  border-bottom: 1px solid #262f45;
  background: rgba(0, 0, 0, 0.2);
}

.deposit-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.deposit-label {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.deposit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.deposit-input {
  width: 100%;
  background: #262f45;
  border: 2px solid #333e52;
  border-radius: 8px;
  padding: 16px 60px 16px 16px;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  font-family: 'Courier New', monospace;
  transition: all 0.3s ease;
}

.deposit-input:focus {
  outline: none;
  border-color: #f5c400;
  background: #2a3548;
}

.deposit-currency {
  position: absolute;
  right: 16px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 500;
  pointer-events: none;
}

.deposit-quick-amounts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-amount-btn {
  background: #262f45;
  border: 1px solid #333e52;
  border-radius: 6px;
  padding: 8px 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-amount-btn:hover {
  background: #2a3548;
  border-color: #f5c400;
  color: #f5c400;
}

.payment-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.payment-method-card {
  background: #262f45;
  border: 2px solid #333e52;
  border-radius: 8px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--muted);
}

.payment-method-card:hover {
  border-color: #f5c400;
  background: #2a3548;
}

.payment-method-card.active {
  border-color: #f5c400;
  background: rgba(212, 175, 55, 0.1);
  color: #f5c400;
}

.payment-method-card i {
  font-size: 28px;
}

.payment-method-card span {
  font-size: 12px;
  font-weight: 600;
}

.deposit-info-box {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #fff;
}

.deposit-info-box i {
  color: #f5c400;
  font-size: 20px;
  margin-top: 2px;
}

.deposit-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #f5c400 0%, #e6b800 100%);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 16px 24px;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.deposit-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, #ffd700 0%, #f5c400 100%);
}

/* Responsive */
@media (max-width: 768px) {
  .deposit-modal-container {
    width: 95vw;
    height: 90vh;
  }

  .payment-method-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========== NEW DEPOSIT MODAL (1340x648) ========== */
.deposit-modal-container-new {
  position: relative;
  width: 1340px;
  height: 648px;
  max-width: 95vw;
  max-height: 90vh;
  background: #1a1a1a;
  border-radius: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  display: flex;
  overflow: hidden;
  border-radius: 20px;
}

/* Sol Panel */
.deposit-left-panel {
  width: 360px;
  background: #2b2b2b;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid #1a1a1a;
}

.deposit-left-panel > * {
  flex-shrink: 0;
}

/* Kullanıcı Profil */
.deposit-user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0 14px 16px;
  border-bottom: 1px solid #1a1a1a;
}

.deposit-user-avatar {
  width: 48px;
  height: 48px;
  background: #4a4a4a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-initials {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.deposit-user-info {
  flex: 1;
}

.deposit-username {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.deposit-userid {
  color: #888;
  font-size: 12px;
}

/* Hesap Doğrulama Durumu */
.deposit-verification-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(220, 53, 69, 0.1);
  border-bottom: 1px solid #1a1a1a;
  color: #dc3545;
  font-size: 13px;
}

/* Şimdi Doğrula Butonu */
.deposit-verify-btn {
  margin: 16px 20px;
  width: calc(100% - 40px);
  background: #dc3545;
  border: none;
  border-radius: 4px;
  padding: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.deposit-verify-btn:hover {
  background: #c82333;
}

/* Ana Bakiye */
.deposit-main-balance {
  position: relative;
  overflow: hidden;
  margin: 0 20px 16px;
  padding: 16px;
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  border-radius: 12px;
}

.deposit-card-decoration {
  position: absolute;
  top: -14px;
  right: -10px;
  font-size: 90px;
  opacity: .18;
  color: #fff;
  pointer-events: none;
  line-height: 1;
}

.balance-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

.balance-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
}

.balance-value .balance-amount {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.balance-value .balance-currency {
  color: #fff;
  font-size: 20px;
}

.balance-actions {
  display: flex;
  gap: 8px;
}

.balance-action-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 4px;
  padding: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.balance-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

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

/* Toplam Bonus Para */
.deposit-bonus-balance {
  position: relative;
  overflow: hidden;
  margin: 0 20px 16px;
  padding: 16px;
  background: linear-gradient(135deg, #d4af37 0%, #a9790a 100%);
  border-radius: 12px;
}

.bonus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.bonus-label {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.bonus-header i {
  color: #fff;
  font-size: 16px;
}

.bonus-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 2px;
}

.bonus-amount {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.bonus-currency {
  color: #fff;
  font-size: 20px;
}

.bonus-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 12px;
  color: #fff;
}

.bonus-detail-amount {
  font-weight: 600;
}

/* Sadakat Puanları */
.deposit-loyalty-points {
  margin: 0 20px 16px;
  padding: 16px;
  background: linear-gradient(135deg, #cd7f32 0%, #a86a2a 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.deposit-loyalty-points:hover {
  transform: translateY(-2px);
}

.loyalty-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loyalty-icon i {
  font-size: 20px;
}

/* Bakiye Yönetimi */
.deposit-balance-management {
  margin: 0 20px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1a1a1a;
}

.management-toggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.management-toggle:hover {
  color: var(--yellow);
}
.management-toggle .bi-chevron-down{
  transition: transform .2s;
}
.management-toggle.open .bi-chevron-down{
  transform: rotate(180deg);
}

.management-toggle i:first-child {
  font-size: 16px;
}

.management-toggle span {
  flex: 1;
  text-align: left;
}

.management-toggle i:last-child {
  font-size: 14px;
}

/* Mobil Hızlı Panel Geçişi */
.deposit-mobile-quicknav {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  overflow-x: auto;
  border-bottom: 1px solid #1a1a1a;
}
.deposit-quicknav-btn {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 10px 12px;
  color: #ccc;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.deposit-quicknav-btn.active {
  background: #ffca17;
  border-color: #ffca17;
  color: #000;
}
.deposit-extra-toggle {
  margin: 0 20px 16px;
  padding: 12px 0;
  border-bottom: 1px solid #1a1a1a;
  width: calc(100% - 40px);
}

/* Alt Menü */
.deposit-left-menu {
  padding: 0;
  max-height: 0;
  overflow: hidden;
}
.deposit-left-menu.open {
  padding: 8px 0;
  max-height: 400px;
}

.deposit-menu-item {
  display: block;
  padding: 12px 20px;
  color: #888;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

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

.deposit-menu-item.active {
  background: rgba(250, 224, 1, 0.1);
  border-left-color: var(--yellow);
  color: var(--yellow);
}

.deposit-promo-section{
  display: flex;
  gap: 8px;
  margin: 0 20px 16px;
}
.deposit-promo-section .form-control-custom{
  flex: 1;
}
.deposit-promo-apply{
  background: var(--yellow);
  border: none;
  border-radius: 4px;
  padding: 0 16px;
  color: #000;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.deposit-logout-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 40px);
  margin: 4px 20px 20px;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 12px 16px;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  transition: all .2s;
}
.deposit-logout-btn:hover{
  border-color: #dc2626;
  color: #dc2626;
}

.account-panel{
  display: none;
}
.account-panel.active{
  display: block;
}
.profile-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.profile-field label{
  display: block;
  color: #888;
  font-size: 12px;
  margin-bottom: 6px;
}
@media (max-width: 700px){
  .profile-form-grid{ grid-template-columns: 1fr; }
}

/* Sağ Panel */
.deposit-right-panel {
  flex: 1;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Panel Header */
.deposit-panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid #2b2b2b;
}

.deposit-panel-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* Tab Buttons */
.deposit-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid #2b2b2b;
}

.deposit-tab-btn {
  background: #2b2b2b;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.deposit-tab-btn:hover {
  background: #333;
  color: #fff;
}

.deposit-tab-btn.active {
  background: #ffca17;
  color: #000;
}

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

/* Ödeme Yöntemleri Grid */
.deposit-payment-grid {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 24px;
}

.deposit-payment-card {
    background: #3f3f3b;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.deposit-card-image {
  width: 114px;
}

.deposit-card-image img {
  max-width: 90px;
  width: 100%;
  height: auto;
}

.deposit-payment-card.active {
  border-color: var(--yellow);
}

.payment-card-header {
  background: #333;
  padding: 8px 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.payment-card-body {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.payment-logo {
  max-width: 100%;
  height: auto;
}

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

.crypto-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ödeme Detayları Tablosu */
.deposit-payment-details {
  padding: 0 24px 16px;
}

.payment-details-table {
  width: 520px;
  background: #2b2b2b;
  border-radius: 4px;
  overflow: hidden;
}

.payment-details-table thead th {
  background: #333;
  padding: 10px 12px;
  color: #888;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
}

.payment-details-table tbody td {
  padding: 12px;
  color: #fff;
  font-size: 13px;
  border-top: 1px solid #1a1a1a;
}

/* Bilgilendirme Mesajı */
.deposit-info-message {
    margin: 0 24px 8px;
    padding: 0 0;
    background: #1115;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 12px;
}

.deposit-info-message i {
  color: var(--yellow);
  font-size: 18px;
}

/* Tutar Input */
.deposit-amount-input-section {
  padding: 0 24px 16px;
}

.deposit-input-label {
  display: block;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.deposit-amount-input {
  width: 560px;
  height: 52px;
  max-width: 100%;
  background: #2b2b2b;
  border: 2px solid #333;
  border-radius: 4px;
  padding: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  transition: all 0.3s ease;
  -moz-appearance: textfield;
  box-sizing: border-box;
}

.deposit-amount-input::-webkit-outer-spin-button,
.deposit-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.deposit-amount-input:focus {
  outline: none;
  border-color: var(--yellow);
  background: #333;
}

.deposit-amount-input::placeholder {
  color: #555;
}

/* Para Yatır Butonu */
.deposit-submit-button {
    margin: 0;
    width: calc(45% - 48px);
    background: #d0aa33;
    border: none;
    border-radius: 4px;
    padding: 10px;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    cursor: not-allowed;
    transition: all 0.3s ease;
}

.deposit-submit-button.enabled {
  background: #ffca17;
  color: #000;
  cursor: pointer;
}

.deposit-submit-button.enabled:hover {
  background: #ffeb3b;
  transform: translateY(-2px);
}

/* Kripto Ödeme Akışı */
.deposit-bank-flow,
.deposit-crypto-flow {
  padding: 0 24px 24px;
}
.crypto-address-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.crypto-address-input {
  flex: 1;
  background: #1a2332;
  border: 1px solid #2b3a55;
  border-radius: 6px;
  padding: 10px 12px;
  color: #fff;
  font-size: 0.85rem;
  font-family: monospace;
}
.crypto-copy-btn {
  background: #1a2332;
  border: 1px solid #2b3a55;
  border-radius: 6px;
  color: #fff;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.crypto-copy-btn:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}
.crypto-qr {
  background: #fff;
  border-radius: 6px;
  padding: 4px;
  flex-shrink: 0;
}
.crypto-countdown {
  background: #1a2332;
  border-radius: 6px;
  padding: 10px 14px;
  color: #fff;
  font-weight: 600;
  display: inline-block;
}
.crypto-flow-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.crypto-flow-left {
  flex: 1;
  min-width: 260px;
}
.crypto-flow-right {
  flex-shrink: 0;
}
.crypto-warning-text {
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
  margin-bottom: 6px;
}
.crypto-rate-text {
  color: var(--muted2);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 1400px) {
  .deposit-modal-container-new {
    width: 95vw;
    height: auto;
    max-height: 90vh;
  }
}

@media (max-width: 992px) {
  .deposit-modal-container-new {
    flex-direction: column;
    height: auto;
    max-height: 90vh;
  }

  .deposit-left-panel {
    width: 100%;
  }

}

@media (max-width: 767.98px) {
  /* Doğrulama/bonus/sadakat/alt menüler + promosyon + çıkış: mobilde
     tamamen gizli, sadece masaüstünde görünür kalır. */
  .deposit-extra-toggle,
  .deposit-logout-btn {
    display: none;
  }
  .deposit-extra-panel {
    max-height: 0;
    overflow: hidden;
  }
}

@media (max-width: 576px) {
  .deposit-payment-grid {
    flex-wrap: wrap;
  }

  .payment-details-table {
    width: 100%;
  }
}

/* T Loading Icon (deposit akışı) */
.deposit-loading-wrap {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}
.deposit-loading-icon {
  width: 24px;
  height: 24px;
  animation: tLoadingSpin 0.9s linear infinite;
}

/* Ödeme yöntemi içeriği açılırken gösterilen T icon */
.method-content-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.method-content-loader img {
  animation: tLoadingSpin 0.9s linear infinite;
}

/* Genel sayfa yükleniyor overlay'i (çıkış yap, giriş yap vb.) */
.page-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
.page-loader-icon {
  width: 56px;
  height: 56px;
  animation: tLoadingSpin 0.9s linear infinite;
}
@keyframes tLoadingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Banka Detay Kartı (para yatır akışı - adım 3) */
.deposit-bank-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 560px;
  height: 52px;
  max-width: 100%;
  background: #333333;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 14px;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.deposit-bank-detail-row:last-child {
  margin-bottom: 0;
}
.deposit-bank-detail-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.deposit-bank-detail-label {
  color: #999;
  font-size: 11px;
  font-weight: 500;
}
.deposit-bank-detail-value {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deposit-bank-detail-copy {
  background: none;
  border: none;
  color: #999;
  font-size: 16px;
  flex-shrink: 0;
  padding: 4px 8px;
}
.deposit-bank-detail-copy:hover {
  color: var(--yellow);
}

/* Para Yatırma Başarılı Popup */
#depositSuccessModal {
  z-index: 10000;
}
.deposit-success-box {
  position: relative;
  width: 324px;
  height: 324px;
  background: #161616;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.deposit-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #22c55e;
  color: #22c55e;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.deposit-success-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
.deposit-success-text {
  color: #ccc;
  font-size: 13px;
  margin-bottom: 12px;
}
.deposit-success-home-btn {
  width: 100%;
  background: #ffca17;
  border: none;
  border-radius: 4px;
  padding: 10px;
  color: #000;
  font-size: 13px;
  font-weight: 700;
}
.deposit-success-home-btn:hover {
  background: #ffeb3b;
}
.deposit-success-ok-btn {
  width: 100%;
  background: transparent;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 10px;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
}
.deposit-success-ok-btn:hover {
  border-color: #666;
  color: #fff;
}

/* Canlı Destek Widget */
.support-chat-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--yellow);
  color: #000;
  border: none;
  font-size: 22px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  transition: transform .2s ease;
}
.support-chat-toggle:hover {
  transform: scale(1.06);
}
.support-chat-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  width: 320px;
  max-width: calc(100vw - 32px);
  height: 420px;
  max-height: calc(100vh - 120px);
  background: #161616;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9000;
}
.support-chat-header {
  background: linear-gradient(180deg, #1d1d1d, #161616);
  border-bottom: 1px solid var(--line);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.support-chat-header i {
  color: var(--yellow);
  margin-right: 6px;
}
.support-chat-close {
  background: none;
  border: none;
  color: #999;
  font-size: 14px;
}
.support-chat-close:hover {
  color: #fff;
}
.support-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.support-chat-hint {
  color: var(--muted2);
  font-size: 12.5px;
  line-height: 1.5;
}
.support-chat-bubble {
  align-self: flex-end;
  max-width: 85%;
  background: var(--yellow);
  color: #000;
  border-radius: 10px 10px 2px 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.support-chat-bubble.pending {
  opacity: .6;
}
.support-chat-bubble-reply {
  align-self: flex-start;
  background: #2b2b2b;
  color: #fff;
  border-radius: 10px 10px 10px 2px;
}
.support-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
}
.support-chat-form textarea {
  flex: 1;
  resize: none;
  height: 40px;
  background: #2b2b2b;
  border: 1px solid #333;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 9px 10px;
}
.support-chat-form textarea:focus {
  outline: none;
  border-color: var(--yellow);
}
.support-chat-form button {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--yellow);
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: 15px;
}
.support-chat-form button:disabled {
  opacity: .6;
}