/* login.tpl inline <style> blokları — birebir (spor kartları + popüler maçlar + ekstra) */


/* ============================================
   SPOR KARTLARI - DESKTOP
   Dark Theme - Referans Tasarım
   ============================================ */
.sports-cards-desktop {
  margin: 20px auto 10px auto;
  padding: 0;
  max-width: 1740px;
  width: calc(100% - 20px);
  position: relative;
  box-sizing: border-box;
}

.sports-cards-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Track - yatay scroll */
.sports-cards-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 6px 4px;
  flex: 1;
}
.sports-cards-track::-webkit-scrollbar { display: none; }

/* Nav Arrows */
.sports-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px;
  height: 60px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 28px;
  font-weight: 200;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: color 0.2s ease;
}
.sports-nav-btn:hover {
  background: none;
  color: rgba(255,255,255,0.9);
}
.sports-nav-left { left: -30px; }
.sports-nav-right { right: -30px; }

/* ═══════════════════════════════════
   SPOR MATCH CARD
   ═══════════════════════════════════ */
.sport-card {
  min-width: calc((100% - 20px) / 3);
  max-width: calc((100% - 20px) / 3);
  flex-shrink: 0;
  scroll-snap-align: start;
  background: #ffffff0d;
  border-radius: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.sport-card:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

/* Card Header - Lig */
.sport-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sport-card-league {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sport-card-league .flag-emoji {
  font-size: 14px;
  line-height: 1;
}

/* CANLI Badge */
.sport-canli-badge {
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  animation: canliBlink 1.5s ease-in-out infinite;
}
@keyframes canliBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Card Body - Takımlar */
.sport-card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px 8px 6px;
  gap: 0;
}

.sport-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 6px;
}
.sport-team img {
  width: 60px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  padding: 3px;
}
.sport-team-name {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  line-height: 1.3;
}

/* Tarih/Saat ortada */
.sport-match-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
}
.sport-match-date {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-weight: 400;
  white-space: nowrap;
}
.sport-match-time {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

/* Card Footer - Oranlar */
.sport-card-odds {
  display: flex;
  gap: 6px;
  padding: 6px 14px 8px 14px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.sport-odd-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:rgba(255, 255, 255, .1);
  border-radius: 4px;
  padding: 5px 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.sport-odd-btn:hover {
  background: rgb(from var(--brand) r g b / 0.12);
  border-color: rgb(from var(--brand) r g b / 0.3);
}
.sport-odd-label {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sport-odd-value {
  font-size: 13px;
  color: var(--brand); /* TAM marka rengi — oran sayıları */
  line-height: 1;
}

/* Responsive - 768 altında gizle */
@media (max-width: 768px) {
  .sports-cards-desktop {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .sports-cards-desktop {
    padding: 0 15px;
  }
  .sport-card {
    min-width: calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
  }
}
@media (max-width: 900px) {
  .sport-card {
    min-width: calc((100% - 12px) / 2);
    max-width: calc((100% - 12px) / 2);
  }
}

/* flag-bc bayrak sprite - spor kartlari */
.sport-card-league .flag-bc {
  width: 22px;
  height: 14px;
  flex-shrink: 0;
  background: url(/assets/flags.png) no-repeat 0 0 / 100%;
  display: inline-block;
  vertical-align: middle;
}
.flag-bc.turkey { background-position: 0 91.3494809689%; }
.flag-bc.england { background-position: 0 26.9896193772%; }
.flag-bc.spain { background-position: 0 83.044982699%; }
.flag-bc.france { background-position: 0 29.0657439446%; }
.flag-bc.italy { background-position: 0 46.0207612457%; }
.flag-bc.portugal { background-position: 0 72.3183391003%; }
.flag-bc.netherlands { background-position: 0 63.3217993080%; }
.flag-bc.belgium { background-position: 0 7.6124567474%; }
.flag-bc.brazil { background-position: 0 10.0346020761%; }
.flag-bc.argentina { background-position: 0 2.7681660899%; }
.flag-bc.usa { background-position: 0 92.0415224914%; }
.flag-bc.japan { background-position: 0 47.0588235294%; }
.flag-bc.southkorea { background-position: 0 83.7370242215%; }
.flag-bc.scotland { background-position: 0 78.2006920415%; }
.flag-bc.austria { background-position: 0 3.8062283737%; }
.flag-bc.greece { background-position: 0 35.2941176471%; }
.flag-bc.russia { background-position: 0 76.1245674740%; }
.flag-bc.ukraine { background-position: 0 91.6955017301%; }
.flag-bc.croatia { background-position: 0 18.6851211073%; }
.flag-bc.sweden { background-position: 0 84.7750865052%; }
.flag-bc.norway { background-position: 0 66.7820069204%; }
.flag-bc.denmark { background-position: 0 20.0692041522%; }
.flag-bc.switzerland { background-position: 0 85.4671280277%; }
.flag-bc.czech { background-position: 0 19.3771626297%; }
.flag-bc.poland { background-position: 0 71.2802768166%; }
.flag-bc.romania { background-position: 0 74.7404844291%; }
.flag-bc.serbia { background-position: 0 79.5847750865%; }
.flag-bc.hungary { background-position: 0 40.8304498270%; }
.flag-bc.bulgaria { background-position: 0 11.0726643599%; }
.flag-bc.israel { background-position: 0 44.2906574394%; }
.flag-bc.finland { background-position: 0 28.0276816609%; }
.flag-bc.ireland { background-position: 0 43.5986159170%; }
.flag-bc.wales { background-position: 0 94.8096885813%; }
.flag-bc.mexico { background-position: 0 58.8235294118%; }
.flag-bc.australia { background-position: 0 3.4602076125%; }
.flag-bc.china { background-position: 0 15.5709342561%; }
.flag-bc.india { background-position: 0 42.5605536332%; }
.flag-bc.egypt { background-position: 0 24.9134948097%; }
.flag-bc.colombia { background-position: 0 16.2629757785%; }
.flag-bc.chile { background-position: 0 14.8788927336%; }
.flag-bc.international { background-position: 0 47.4048442907%; }
.flag-bc.europe { background-position: 0 27.6816608997%; }


/* ---- */


/* Popüler Bahisler - Renk Paleti */
:root {
  --popular-gold-primary: hsl(from #d4af37 calc(h + var(--brand-h-rot)) calc(s * var(--brand-sat)) l);
  --popular-gold-light: hsl(from #f5d76e calc(h + var(--brand-h-rot)) calc(s * var(--brand-sat)) l);
  --popular-gold-dark: hsl(from #c7a13a calc(h + var(--brand-h-rot)) calc(s * var(--brand-sat)) l);
  
  --popular-bg-header: rgba(0, 0, 0, 0.15);
  --popular-bg-dark: rgba(0, 0, 0, 0.2);
  --popular-bg-darker: rgba(0, 0, 0, 0.15);
  --popular-bg-darkest: rgba(0, 0, 0, 0.1);
  --popular-bg-button: rgba(255, 255, 255, 0.05);
  
  --popular-border-light: rgba(255, 255, 255, 0.08);
  --popular-border-medium: hsl(from rgb(212, 175, 55) calc(h + var(--brand-h-rot)) calc(s * var(--brand-sat)) l / 0.2);
  
  --popular-text-white: #fff;
}

/* Popüler Maçlar Başlık Stili - Game Header ile aynı görünüm */
.popular-matches-title {
  font-size: 1.4em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eaeaea;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 20px;
  margin-top: 12px;
  margin-bottom: 8px;
}

/* Responsive ayarları */
@media (max-width: 768px) {
  .popular-matches-title {
    font-size: 16px;
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 7px;
  }
}

@media (max-width: 600px) {
  .popular-matches-title {
    font-size: 14px;
    margin-left: 12px;
    margin-top: 9px;
    margin-bottom: 6px;
  }
}

@media (max-width: 480px) {
  .popular-matches-title {
    font-size: 12px;
    margin-left: 8px;
    margin-top: 8px;
    margin-bottom: 5px;
  }
}

/* Popüler Bahisler Stilleri */
.popular-matches-mobile {
  margin: 0 0 15px 0;
}

.popular-header {
  background: rgba(255, 255, 255, 0.2) !important; /* SABİT — markayı izlemez */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(15px);
  padding: 5px 10px;
  font-size: 14px;
  color: var(--popular-text-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.popular-header .left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.popular-header .bc-i-Soccer {
  font-size: 12px;
  color: var(--popular-gold-light);
}

.popular-header .right {
  display: flex;
  align-items: center;
}

.popular-header .bc-i-small-arrow-up {
  font-size: 11px;
  color: var(--popular-gold-light);
  transition: transform 0.3s ease;
}

.sub-header {
  background: var(--popular-bg-dark);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 14px;
  display: flex;
  justify-content: flex-end;
  font-size: 12.5px;
  color: #9d9d9d; /* SABİT — W1 X W2 başlıkları markayı izlemez */
  gap: 5px;
  border-bottom: 1px solid var(--popular-border-medium);
}

.sub-header span {
  flex: 1;
  text-align: center;
  max-width: 60px;
}

.match-list {
  width: 100%;
  padding: 4px;
}

.match {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--popular-text-white);
  margin-bottom: 4px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--popular-border-light);
  background: var(--popular-bg-darkest);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.league {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 6px 10px;
  font-size: 12px;
  opacity:0.6;
  border-bottom: 1px solid var(--popular-border-light);
}

.match-row {
  background: var(--popular-bg-darker);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 8px 14px;
}

.match-row .teams {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 400;
  font-size: 13px;
  color: var(--popular-text-white);
  line-height: 1.4;
}

.match-row .odds {
  display: flex;
  justify-content: space-between;
  width: 190px;
  align-items: center;
}

.odd {
  flex: 1;
  text-align: center;
  background: var(--popular-bg-button);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  margin: 0 1px;
  border-radius: 3px;
  padding: 8px 0;
  font-size: 12.5px;
  color: #c4c4c4;
  font-weight: 200;
  transition: all 0.2s ease;
  cursor: pointer;
}

.odd:hover {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--popular-text-white);
}

.time {
  background: var(--popular-bg-dark);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  font-size: 11.5px;
  border-top: 1px solid var(--popular-border-light);
}

.time .left {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity:0.3
}

.time .left .bc-i-prematch {
  font-size: 11px;
  color: var(--popular-gold-primary);
}

.plus {
  color: hsl(from #8b8675 calc(h + var(--brand-h-rot)) calc(s * var(--brand-sat)) l);
  margin: 0 5px;
}

@media (max-width: 600px) {
  .match-row { padding: 7px 10px; }
  .match-row .teams { font-size: 12.5px; }
  .odd { font-size: 12px; padding: 7px 0; }
}

/* Sadece mobilde göster */
@media (min-width: 769px) {
  .popular-matches-mobile {
    display: none;
  }
}

/* Winner Görselleri Stili */
.winner-images-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  margin-bottom: 15px;
}

.winner-images-section a {
  display: block;
  width: 100%;
  text-decoration: none;
}

.winner-images-section img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.winner-images-section img:hover {
  transform: scale(1.05);
}

@media (min-width: 769px) {
  .winner-images-section {
    display: none;
  }
}


/* ---- */