:root {
  --quartz-bahiso-tv-banner-bg: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/q4Zg23T8HtKTm07QbTDF3dFpBpLniqTG/statics/EUVyyNiYs0Z4WTQJN9CLtY5qrjfEQTB9yJmPD3gj.png");
  --quartz-bahiso-tv-banner-bg-mobile: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/q4Zg23T8HtKTm07QbTDF3dFpBpLniqTG/statics/dZO8M2Ou9JTwPmfP6t1n0Lq3rU3JGgLv004SODWy.png");
  --text-light: #ffffff;
  /* left-menu/sidebar.css (.quartz-new-left) ile aynı altın paleti */
  --content-tabs-gold-start: var(--header-gold-start, rgb(196, 147, 55));
  --content-tabs-gold-mid: var(--header-gold-mid, rgb(237, 205, 120));
  --content-tabs-gold-end: var(--header-gold-end, rgb(187, 145, 56));
  --content-tabs-gold-dark: var(--header-gold-dark, rgb(167, 96, 43));
  --gold-gradient: linear-gradient(
    200.59deg,
    var(--content-tabs-gold-start) 18%,
    var(--content-tabs-gold-mid) 36%,
    var(--content-tabs-gold-dark) 60%,
    var(--content-tabs-gold-end) 85%
  );
  /* left-menu/sidebar.css (.quartz-list-box a span) ile aynı gümüş/metalik metin */
  --silver-gradient: linear-gradient(
    149.486deg,
    rgb(122, 150, 172) 25.192%,
    rgb(234, 239, 243) 32.013%,
    rgb(194, 212, 225) 37.128%,
    rgb(255, 255, 255) 43.832%,
    rgb(212, 222, 229) 48.496%,
    rgb(171, 189, 200) 54.937%,
    rgb(188, 202, 215) 61.379%
  );
}

/* Sadece banner alanı içinde box-sizing uygula */
.quartz-promo-banner,
.quartz-promo-banner * {
  box-sizing: border-box;
}

#bahiso-new-center-host {
  width: 100%;
}

/**
 * landing-center flex order: .topbar-image 1, .quartz-promo-banner 2, .bahiso-banner-tv 3...
 * .quartz-promo-banner için order verilmezse (0) üst barın üstünde kalır.
 */
#bahiso-new-center-host .bahiso-landing-center-container > .quartz-promo-banner {
  order: 2 !important;
  width: 100%;
  max-width: 100%;
  margin-top: 30px;
  align-self: stretch;
}

#bahiso-new-center-host .quartz-example-payment-placeholder {
  margin: 0;
  padding: 16px;
  color: #b8c0d4;
  font-size: 14px;
}

.quartz-promo-banner {
  position: relative;
  width: 100%;
  max-width: 1150px;
  min-height: 228px;
  border-radius: 8px;
  overflow: hidden;
  background-image: var(--quartz-bahiso-tv-banner-bg);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.quartz-promo-banner .quartz-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 12, 28, 0.88) 0%, rgba(7, 12, 28, 0.55) 35%, rgba(7, 12, 28, 0.16) 100%);
}

.quartz-promo-banner .quartz-content {
  position: relative;
  z-index: 1;
  min-height: 228px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
}

.quartz-promo-banner .quartz-left-col {
  width: 52%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quartz-promo-banner .quartz-bahiso-logo {
  width: 145px !important;
  height: auto;
  display: block;
}

.quartz-promo-banner .quartz-title {
  margin: 0;
  line-height: 1.05;
  font-size: 56px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.quartz-promo-banner .quartz-subtitle {
  margin: 2px 0 8px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  background: var(--silver-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.quartz-promo-banner .quartz-desc {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.25;
  max-width: 470px;
  background: var(--silver-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.quartz-promo-banner .quartz-cta-btn {
  position: relative;
  z-index: 2;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  background: var(--gold-gradient);
  color: #1a2235;
  -webkit-text-fill-color: #1a2235;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.quartz-promo-banner .quartz-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.42);
}

.quartz-promo-banner .quartz-right-col {
  width: 46%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.quartz-promo-banner .quartz-providers {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* PC: sağ kolon logo hizası */
@media (min-width: 761px) {
  .quartz-promo-banner .quartz-providers {
    margin-left: -80px;
    align-items: center;
  }

  .quartz-promo-banner .quartz-provider-logo.quartz-digiturk {
    width: 58%;
  }

  .quartz-promo-banner .quartz-provider-logo.quartz-sport {
    width: 17%;
  }
}

.quartz-promo-banner .quartz-bein-placeholder {
  background: #ffffff;
  color: #1d2b52;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 22px;
  letter-spacing: 0.2px;
}

.quartz-promo-banner .quartz-provider-logo {
  display: block;
  height: auto;
}

.quartz-promo-banner .quartz-provider-logo.quartz-digiturk {
  width: 175px;
}

.quartz-promo-banner .quartz-provider-logo.quartz-sport {
  width: 39%;
}

@media (max-width: 980px) {
  .quartz-promo-banner .quartz-bahiso-logo {
    width: 119px !important;
    height: auto;
    display: block;
  }

  .quartz-promo-banner .quartz-title {
    font-size: 21px;
  }

  .quartz-promo-banner .quartz-subtitle {
    font-size: 15px;
  }

  .quartz-promo-banner .quartz-desc {
    font-size: 14px;
  }

  .quartz-promo-banner .quartz-cta-btn {
    font-size: 18px;
    padding: 12px 24px;
    width: 143px;
  }

  .quartz-promo-banner .quartz-bein-placeholder {
    font-size: 18px;
  }
}

@media (max-width: 760px) {
  .quartz-promo-banner {
    background-image: var(--quartz-bahiso-tv-banner-bg-mobile);
    background-size: cover;
    background-position: right top;
    min-height: min(315px, 85vh);
    background-position-x: -144px;
  }

  .quartz-promo-banner .quartz-provider-logo.quartz-digiturk {
    width: 100px;
  }

  .quartz-promo-banner .quartz-provider-logo.quartz-sport {
    width: 12%;
  }

  .quartz-promo-banner .quartz-content {
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    gap: 18px;
  }

  .quartz-promo-banner .quartz-left-col,
  .quartz-promo-banner .quartz-right-col {
    width: 91%;
  }

  .quartz-promo-banner .quartz-providers {
    margin-left: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}