/* From Uiverse.io by SelfMadeSystem */ 
/*
More comprehensive version at shenanigans.shoghisimon.ca/collection/css-rain-bg/
 */

.container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(
    circle at 50% 50%,
    #0000 0,
    #0000 2px,
    hsl(0 0 4%) 2px
  );
  background-size: 8px 8px;
  --f: blur(1em) brightness(6);
  animation: hii 10s linear infinite;
}

@keyframes hii {
  0% {
    backdrop-filter: var(--f) hue-rotate(0deg);
  }
  to {
    backdrop-filter: var(--f) hue-rotate(360deg);
  }
}

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  --c: #09f;
  background-color: #000;
  background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
  background-size:
    300px 235px,
    300px 235px,
    300px 235px,
    300px 252px,
    300px 252px,
    300px 252px,
    300px 150px,
    300px 150px,
    300px 150px,
    300px 253px,
    300px 253px,
    300px 253px,
    300px 204px,
    300px 204px,
    300px 204px,
    300px 134px,
    300px 134px,
    300px 134px,
    300px 179px,
    300px 179px,
    300px 179px,
    300px 299px,
    300px 299px,
    300px 299px,
    300px 215px,
    300px 215px,
    300px 215px,
    300px 281px,
    300px 281px,
    300px 281px,
    300px 158px,
    300px 158px,
    300px 158px,
    300px 210px,
    300px 210px,
    300px 210px;
  animation: hi 150s linear infinite;
  z-index: -1;
}

@keyframes hi {
  0% {
    background-position:
      0px 220px,
      3px 220px,
      151.5px 337.5px,
      25px 24px,
      28px 24px,
      176.5px 150px,
      50px 16px,
      53px 16px,
      201.5px 91px,
      75px 224px,
      78px 224px,
      226.5px 350.5px,
      100px 19px,
      103px 19px,
      251.5px 121px,
      125px 120px,
      128px 120px,
      276.5px 187px,
      150px 31px,
      153px 31px,
      301.5px 120.5px,
      175px 235px,
      178px 235px,
      326.5px 384.5px,
      200px 121px,
      203px 121px,
      351.5px 228.5px,
      225px 224px,
      228px 224px,
      376.5px 364.5px,
      250px 26px,
      253px 26px,
      401.5px 105px,
      275px 75px,
      278px 75px,
      426.5px 180px;
  }

  to {
    background-position:
      0px 6800px,
      3px 6800px,
      151.5px 6917.5px,
      25px 13632px,
      28px 13632px,
      176.5px 13758px,
      50px 5416px,
      53px 5416px,
      201.5px 5491px,
      75px 17175px,
      78px 17175px,
      226.5px 17301.5px,
      100px 5119px,
      103px 5119px,
      251.5px 5221px,
      125px 8428px,
      128px 8428px,
      276.5px 8495px,
      150px 9876px,
      153px 9876px,
      301.5px 9965.5px,
      175px 13391px,
      178px 13391px,
      326.5px 13540.5px,
      200px 14741px,
      203px 14741px,
      351.5px 14848.5px,
      225px 18770px,
      228px 18770px,
      376.5px 18910.5px,
      250px 5082px,
      253px 5082px,
      401.5px 5161px,
      275px 6375px,
      278px 6375px,
      426.5px 6480px;
  }
}

body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #fff;
  position: relative;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: #23242a;
  padding: 0 24px;
  z-index: 900;
  box-shadow: 0 2px 8px #0002;
}
.header-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
}
.header-social {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}
.social-icon img {
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 8px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.social-icon:hover img {
  box-shadow: 0 2px 12px #ff2d2d55;
  transform: scale(1.08) rotate(-6deg);
}
.logo-chip {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  vertical-align: middle;
}
.logo-text {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 1px;
  font-family: 'Segoe UI', Arial, sans-serif;
  text-align: left;
  display: inline-block;
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

.logo-letter {
  font-size: 2.2rem;
  font-weight: 900;
  font-family: 'Arial Black', sans-serif;
  color: #fff;
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 255, 255, 0.4),
    0 0 60px rgba(255, 255, 255, 0.2);
  transform: scale(0);
  opacity: 0;
  animation: letterAppear 4s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
  background: linear-gradient(45deg, #fff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-letter.red-letter {
  color: #ff0000;
  text-shadow: 
    0 0 20px rgba(255, 0, 0, 0.8),
    0 0 40px rgba(255, 0, 0, 0.4),
    0 0 60px rgba(255, 0, 0, 0.2);
  background: linear-gradient(45deg, #ff0000, #ff3333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-letter::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.9), transparent);
  animation: lightSweep 5s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
}

.logo-letter.red-letter::before {
  background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 1), transparent);
  box-shadow: 0 0 40px rgba(255, 0, 0, 0.8);
}

@keyframes letterAppear {
  0% {
    transform: scale(0) rotateY(180deg);
    opacity: 0;
  }
  20% {
    transform: scale(1.3) rotateY(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
  80% {
    transform: scale(1.1) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes lightSweep {
  0% {
    left: -100%;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
.logo-yakup {
  color: #fff;
}
.logo-gul {
  color: #ff2d2d;
}
.hamburger {
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  background-image: url('../img/hamburger.svg');
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  display: none;
  position: absolute;
  left: 16px;
}
.header-actions button {
  margin-left: 12px;
  padding: 8px 18px;
  border-radius: 20px;
  border: none;
  background: #ff8000;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.main-content {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1400px;
}
.global-sponsors {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  max-width: 1400px;
  margin-bottom: 40px;
}
.sponsor-card {
  background: #23242a;
  border-radius: 16px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
  max-width: 220px;
  width: 100%;
  box-shadow: 0 2px 12px #0002;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
  cursor: pointer;
  min-height: 220px;
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.sponsor-card::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0.7);
  width: 80%;
  height: 18px;
  background: radial-gradient(ellipse at center, #fff 0%, #ffe44d 60%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 2;
}
.sponsor-card:hover::after {
  opacity: 0.7;
  animation: sponsor-glow-up 0.7s linear;
}
@keyframes sponsor-glow-up {
  0% {
    opacity: 0.7;
    transform: translateX(-50%) scaleX(0.7) scaleY(0.5);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1) scaleY(1.2);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(1) scaleY(1.5);
  }
}
.sponsor-card img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 12px;
}
.sponsor-info {
  font-weight: bold;
  color: #ffb800;
  text-align: center;
}
.sponsor-card:hover {
  box-shadow: 0 4px 24px #ffb80055, 0 1.5px 8px #0003;
  background: #23242aee;
  transform: translateY(-4px) scale(1.04);
}
.global-sponsors .sponsor-card:nth-child(-n+3) {
  background: linear-gradient(90deg, rgba(255,45,45,0.5) 0%, rgba(255,45,45,0.15) 100%) !important;
  background-color: #111 !important;
  border-right: 1px solid #ff2d2d;
  border-top: 2px solid #ff2d2d33;
  border-bottom: 2px solid #ff2d2d33;
  box-shadow: 0 2px 8px #0008;
  transition: box-shadow 0.2s;
}
.global-sponsors .sponsor-card:nth-child(1) {
  background: linear-gradient(315deg, rgba(0,255,100,0.7) 100%, rgba(0,255,100,0.0) 0%);
}
.global-sponsors .sponsor-card:nth-child(2) {
  background: linear-gradient(90deg, rgba(0,170,255,0.5) 0%, rgba(0,170,255,0.15) 100%) !important;
  background-color: #111 !important;
  border-right: 1px solid #00aaff;
  border-top: 2px solid #00aaff33;
  border-bottom: 2px solid #00aaff33;
  box-shadow: 0 2px 8px #0008;
  transition: box-shadow 0.2s;
}
.global-sponsors .sponsor-card:nth-child(3) {
  background: linear-gradient(90deg, rgba(255,220,0,0.5) 0%, rgba(255,220,0,0.15) 100%) !important;
  background-color: #111 !important;
  border-right: 1px solid #ffdc00;
  border-top: 2px solid #ffdc0033;
  border-bottom: 2px solid #ffdc0033;
  box-shadow: 0 2px 8px #0008;
  transition: box-shadow 0.2s;
}
.preferred {
  margin-top: 32px;
  width: 100%;
  max-width: 1400px;
}
.preferred h2 {
  margin-bottom: 18px;
  font-size: 1.3rem;
  color: #ffb800;
  text-align: center;
}
.preferred-title {
  text-align: center;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
}
.preferred-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
.preferred-card {
  background: linear-gradient(90deg, rgba(180,180,180,0.35) 0%, rgba(80,80,80,0.10) 100%) !important;
  background-color: #18191d !important;
  border-right: 1px solid #b0b0b0;
  border-top: 2px solid #b0b0b033;
  border-bottom: 2px solid #b0b0b033;
  box-shadow: 0 2px 8px #0006;
  transition: box-shadow 0.2s;
  min-width: 140px;
  max-width: 200px;
  padding: 28px 24px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.preferred-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 8px;
}
.preferred-card:hover {
  box-shadow: 0 4px 24px #ffb80055, 0 1.5px 8px #0003;
  background: #23242aee;
  transform: translateY(-4px) scale(1.04);
}
@media (max-width: 1024px) {
  .main-content, .header-logo {
    max-width: 98vw;
  }
  .global-sponsors, .preferred {
    max-width: 98vw;
  }
  .preferred-title {
    max-width: 98vw;
  }
}
@media (max-width: 768px) {
  .header {
    padding: 0 4px;
    height: 56px;
  }
  .header-container {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .header-logo {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
  .header-social {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
  .logo-chip {
    width: 22px;
    height: 22px;
    margin-right: 4px;
  }
  .logo-text {
    font-size: 0.95rem;
  }
  .main-content {
    margin-top: 62px;
    padding: 4px 0;
    max-width: 100vw;
    align-items: stretch;
  }
  .global-sponsors {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100vw;
  }
  .sponsor-card {
    min-width: unset;
    max-width: 98vw;
    padding: 12px 4px;
  }
  .sponsor-card img {
    width: 60px;
    height: 60px;
  }
  .preferred {
    max-width: 100vw;
  }
  .preferred-title {
    font-size: 1rem;
    margin-left: 0;
    max-width: 100vw;
  }
  .preferred-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .preferred-card {
    min-width: unset;
    max-width: 98vw;
    padding: 10px 4px;
  }
  .preferred-card img {
    width: 40px;
    height: 40px;
  }
  .marquee {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-left: 0;
    margin-bottom: 18px;
    margin-top: 10px;
  }
  .banner-chip-bg {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 480px) {
  .header {
    height: 52px;
  }
  .logo-text {
    font-size: 1.1rem;
  }
  .main-content {
    margin-top: 60px;
    padding: 4px 0;
  }
  .sponsor-card, .preferred-card {
    padding: 10px 6px;
    min-width: 80px;
    max-width: 98vw;
  }
  .sponsor-card img, .preferred-card img {
    width: 40px;
    height: 40px;
  }
}

/* Marquee (kayan yazı) */
.marquee {
  display: none;
}
.marquee_header {
  font-size: 35px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
}
.marquee__inner {
  display: flex;
  width: max-content;
  animation: marquee 15s linear infinite;
}
.marquee__group {
  display: flex;
}
.marquee__group span {
  margin: 0 1.5rem;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(255,45,45,0.5) 0%, rgba(255,45,45,0.15) 100%);
  color: #fff;
  padding: 4px 16px 4px 12px;
  border-radius: 6px;
  font-size: 1.2rem;
  border-right: 1px solid #ff2d2d;
  border-top: 2px solid #ff2d2d33;
  border-bottom: 2px solid #ff2d2d33;
  background-color: #111;
  box-shadow: 0 2px 8px #0008;
  transition: box-shadow 0.2s;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.custom-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 40px;
  margin: 0 0 18px 0;
  display: flex;
  align-items: center;
  background: transparent;
}

.custom-marquee-inner {
  display: inline-block;
  white-space: nowrap;
  min-width: 100%;
  will-change: transform;
  animation: custom-marquee-move 12s linear infinite;
}

.custom-marquee-inner span {
  font-size: 1.2rem;
  color: #fff;
  font-weight: 600;
}

@keyframes custom-marquee-move {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.header-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-container,
.main-content,
.marquee,
.preferred,
.global-sponsors {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .header-container,
  .main-content,
  .marquee,
  .preferred,
  .global-sponsors {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.banner-bar {
  width: 100%;
  max-width: 900px;
  margin: 18px auto 24px auto;
  padding: 14px 0;
  background: linear-gradient(315deg, rgba(255,45,45,0.12) 100%, rgba(255,45,45,0.0) 0%);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 2px 12px #0003;
  letter-spacing: 1px;
  border-width: 2px 8px 2px 2px;
  border-style: solid;
  border-image: linear-gradient(90deg, #ff2d2d 0%, #ff2d2d77 60%, #ff2d2d00 100%) 1;
  position: relative;
  overflow: hidden;
}
.banner-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: conic-gradient(from 0deg, #ff2d2d 0%, #fff0 10%, #fff0 60%, #ff2d2d 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
  animation: banner-glow-rotate 2.5s linear infinite;
}
@keyframes banner-glow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.banner-chip-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  opacity: 0.20;
  pointer-events: none;
  z-index: 1;
}
.banner-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}
.banner-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}
.banner-btn {
  background: #ff2d2d;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 8px 22px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  box-shadow: 0 2px 8px #ff2d2d33;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  outline: none;
  cursor: pointer;
  display: inline-block;
}
.banner-btn:hover {
  background: #fff;
  color: #ff2d2d;
  box-shadow: 0 4px 16px #ff2d2d55;
  transform: scale(1.05);
}
@media (max-width: 768px) {
  .banner-content {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .banner-text {
    font-size: 1rem;
    text-align: center;
  }
  .banner-btn {
    width: 100%;
    font-size: 1rem;
    padding: 8px 0;
  }
} 

.sponsor-title {
  width: 100%;
  text-align: center;
  font-size: 2.1rem;
  font-weight: 900;
  color: #ffe44d;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  margin-top: 0;
  text-shadow: 0 2px 8px #0006;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}
@media (max-width: 768px) {
  .sponsor-title {
    font-size: 1.3rem;
    margin-bottom: 6px;
  }
} 

.sponsor-title-inside {
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffe44d;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  margin-top: 0;
  text-shadow: 0 2px 8px #0006;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  display: block;
}
@media (max-width: 768px) {
  .sponsor-title-inside {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }
} 
.sponsor-title-up {
  margin-top: 10px;
}
.sponsor-title-inside {
  color: #fff;
}
.sponsor-card:hover .sponsor-title-inside {
  text-shadow: 0 0 24px #fff, 0 0 32px #ffe44d, 0 0 8px #fff;
  color: #fffbe6;
  transition: text-shadow 0.2s, color 0.2s;
}
.sponsor-subtext {
  margin-top: auto;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffe44d;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px #0006;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
} 

/* From Uiverse.io by dzoshi */ 
.card {
  border-top: 3px solid #ff2222;
  border-bottom: 3px solid #ff2222;
  border-radius: 12px 12px 10px 10px;
  position: relative;
  background: linear-gradient(135deg, #111 60%, #18191d 100%);
  color: #81818144;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 14px;
  gap: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 8px;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, #7a0000 0%, #ff2222 40%, transparent 100%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.45;
  filter: blur(8px);
  box-shadow: 0 0 24px 0 #2a0000cc;
  transition: filter 0.2s;
}

.card::before {
  top: -8px;
  left: 8px;
  right: 8px;
  height: 12px;
  border-radius: 12px 12px 8px 8px;
  background: radial-gradient(ellipse at center, #ff2222 60%, transparent 100%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.7;
  filter: blur(2px);
}

.card::after {
  bottom: -8px;
  left: 8px;
  right: 8px;
  height: 12px;
  border-radius: 0 0 12px 12px;
  background: radial-gradient(ellipse at center, #ff2222 60%, transparent 100%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.7;
  filter: blur(2px);
}

.card:hover::before,
.card:hover::after {
  filter: blur(16px) brightness(1.2);
  opacity: 0.7;
}

.card:hover::before {
  transform: scaleX(1.02) scaleY(1.02);
  box-shadow: 0px 0px 50px 0px hsla(0, 100%, 50%, 0.6);
}

.card-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 32px 0 18px 0;
}
.banner-bar-row {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 24px auto;
  padding: 14px 0;
  background: linear-gradient(90deg, #23242a 0%, #18191d 100%);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 2px 12px #0003;
  letter-spacing: 1px;
}
.card-row-small {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 0 0 32px 0;
}
.card.card-small {
  width: 120px;
  height: 160px;
  min-width: unset;
  max-width: 120px;
  padding: 8px;
  font-size: 0.85rem;
}
.card.card-small .heading {
  font-size: 1rem;
}
.card.card-small p {
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .card-row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .banner-bar-row {
    max-width: 100vw;
    font-size: 1rem;
    padding: 10px 0;
    margin: 12px 0 16px 0;
  }
  .card-row-small {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
} 

.promo-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 32px 0 18px 0;
}
.promo-row-small {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 0 0 32px 0;
}
@media (max-width: 1024px) {
  .promo-row {
    gap: 16px;
  }
  .promo-row-small {
    gap: 8px;
  }
}
@media (max-width: 768px) {
  .promo-row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .promo-row-small {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .card {
    width: 90vw;
    max-width: 300px;
  }
} 

.promo-row > .card, .promo-row > a > .card {
  width: 220px;
  height: 280px;
  min-width: 220px;
  max-width: 220px;
  min-height: 280px;
  max-height: 280px;
}

@media (max-width: 768px) {
  .promo-row > .card, .promo-row > a > .card {
    width: 90vw;
    min-width: 90vw;
    max-width: 98vw;
    height: 220px;
    min-height: 220px;
    max-height: 220px;
  }
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #fff;
  z-index: 1;
  position: relative;
}

.card-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  display: block;
}

.card-title {
  font-size: 26px;
  font-weight: 1000;
  color: #ff2222;
  margin-bottom: 12px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #8b0000, 2px 2px 0px #660000;
  letter-spacing: 1px;
  position: relative;
}

.card:hover .card-title {
  text-shadow: 1px 1px 0px #8b0000, 2px 2px 0px #660000, 0 0 10px #ff2222, 0 0 20px #ff2222;
}

@keyframes flame-glow {
  from {
    text-shadow: 
      2px 2px 0px #8b0000,
      4px 4px 0px #660000,
      6px 6px 0px #400000,
      8px 8px 0px #200000,
      0 0 10px #ff0000,
      0 0 20px #ff0000,
      0 0 30px #ff0000;
  }
  to {
    text-shadow: 
      2px 2px 0px #8b0000,
      4px 4px 0px #660000,
      6px 6px 0px #400000,
      8px 8px 0px #200000,
      0 0 15px #ff0000,
      0 0 25px #ff0000,
      0 0 35px #ff0000,
      0 0 45px #ff0000;
  }
}

@keyframes flame-flicker {
  from {
    opacity: 0.8;
    transform: translateX(-50%) scaleY(1);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.2);
  }
}

.card-bonus {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.card-desc {
  font-size: 14px;
  color: #ccc;
  line-height: 1.3;
} 

.card:hover .card-bonus span {
  animation: letter-glow 2s ease-in-out infinite;
}

.card:hover .card-desc span {
  animation: letter-glow 2s ease-in-out infinite;
}

.card:hover .card-bonus span:nth-child(1) { animation-delay: 0s; }
.card:hover .card-bonus span:nth-child(2) { animation-delay: 0.1s; }
.card:hover .card-bonus span:nth-child(3) { animation-delay: 0.2s; }
.card:hover .card-bonus span:nth-child(4) { animation-delay: 0.3s; }
.card:hover .card-bonus span:nth-child(5) { animation-delay: 0.4s; }
.card:hover .card-bonus span:nth-child(6) { animation-delay: 0.5s; }
.card:hover .card-bonus span:nth-child(7) { animation-delay: 0.6s; }
.card:hover .card-bonus span:nth-child(8) { animation-delay: 0.7s; }
.card:hover .card-bonus span:nth-child(9) { animation-delay: 0.8s; }
.card:hover .card-bonus span:nth-child(10) { animation-delay: 0.9s; }
.card:hover .card-bonus span:nth-child(11) { animation-delay: 1.0s; }
.card:hover .card-bonus span:nth-child(12) { animation-delay: 1.1s; }
.card:hover .card-bonus span:nth-child(13) { animation-delay: 1.2s; }
.card:hover .card-bonus span:nth-child(14) { animation-delay: 1.3s; }
.card:hover .card-bonus span:nth-child(15) { animation-delay: 1.4s; }

.card:hover .card-desc span:nth-child(1) { animation-delay: 0.2s; }
.card:hover .card-desc span:nth-child(2) { animation-delay: 0.3s; }
.card:hover .card-desc span:nth-child(3) { animation-delay: 0.4s; }
.card:hover .card-desc span:nth-child(4) { animation-delay: 0.5s; }
.card:hover .card-desc span:nth-child(5) { animation-delay: 0.6s; }
.card:hover .card-desc span:nth-child(6) { animation-delay: 0.7s; }
.card:hover .card-desc span:nth-child(7) { animation-delay: 0.8s; }
.card:hover .card-desc span:nth-child(8) { animation-delay: 0.9s; }
.card:hover .card-desc span:nth-child(9) { animation-delay: 1.0s; }
.card:hover .card-desc span:nth-child(10) { animation-delay: 1.1s; }
.card:hover .card-desc span:nth-child(11) { animation-delay: 1.2s; }
.card:hover .card-desc span:nth-child(12) { animation-delay: 1.3s; }
.card:hover .card-desc span:nth-child(13) { animation-delay: 1.4s; }
.card:hover .card-desc span:nth-child(14) { animation-delay: 1.5s; }
.card:hover .card-desc span:nth-child(15) { animation-delay: 1.6s; }
.card:hover .card-desc span:nth-child(16) { animation-delay: 1.7s; }
.card:hover .card-desc span:nth-child(18) { animation-delay: 1.9s; }
.card:hover .card-desc span:nth-child(19) { animation-delay: 2.0s; }
.card:hover .card-desc span:nth-child(20) { animation-delay: 2.1s; }
.card:hover .card-desc span:nth-child(22) { animation-delay: 2.3s; }
.card:hover .card-desc span:nth-child(23) { animation-delay: 2.4s; }
.card:hover .card-desc span:nth-child(24) { animation-delay: 2.5s; }
.card:hover .card-desc span:nth-child(26) { animation-delay: 2.7s; }
.card:hover .card-desc span:nth-child(27) { animation-delay: 2.8s; }
.card:hover .card-desc span:nth-child(28) { animation-delay: 2.9s; }
.card:hover .card-desc span:nth-child(29) { animation-delay: 3.0s; }
.card:hover .card-desc span:nth-child(30) { animation-delay: 3.1s; }

@keyframes letter-glow {
  0%, 100% {
    text-shadow: 0 0 0px #fff;
  }
  50% {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
  }
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #ffe44d, 0 0 20px #ffe44d, 0 0 30px #ffe44d;
  }
  to {
    text-shadow: 0 0 15px #ffe44d, 0 0 25px #ffe44d, 0 0 35px #ffe44d, 0 0 45px #ffe44d;
  }
}

@keyframes glow-white {
  from {
    text-shadow: 0 0 8px #fff, 0 0 16px #fff;
  }
  to {
    text-shadow: 0 0 12px #fff, 0 0 20px #fff, 0 0 28px #fff;
  }
} 

@keyframes slide-glow {
  0% {
    text-shadow: 0 0 0px #fff;
  }
  25% {
    text-shadow: 0 0 8px #fff, 0 0 16px #fff;
  }
  50% {
    text-shadow: 0 0 12px #fff, 0 0 20px #fff, 0 0 28px #fff;
  }
  75% {
    text-shadow: 0 0 8px #fff, 0 0 16px #fff;
  }
  100% {
    text-shadow: 0 0 0px #fff;
  }
} 

.banner-bar-glow {
  position: relative;
  margin: 32px auto;
  padding: 18px 0;
  background: linear-gradient(90deg, #2a0a15 0%, #6a1a2e 40%, #1a1a2e 100%);
  border-radius: 32px;
  box-shadow:
    0 0 20px 4px #6a1a2e88,
    0 0 40px 8px #2a0a1588;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 1400px;
  z-index: 10;
  overflow: hidden;
  border: 2px solid #000;
  animation: banner-bg-color-red 12s ease-in-out infinite alternate, banner-glow-shadow-red 8s ease-in-out infinite alternate;
}

@keyframes banner-bg-color-red {
  0% { background: linear-gradient(90deg, #2a0a15 0%, #6a1a2e 40%, #1a1a2e 100%); }
  25% { background: linear-gradient(90deg, #6a1a2e 0%, #2a0a15 60%, #1a1a2e 100%); }
  50% { background: linear-gradient(90deg, #1a1a2e 0%, #6a1a2e 60%, #2a0a15 100%); }
  75% { background: linear-gradient(90deg, #6a1a2e 0%, #2a0a15 40%, #1a1a2e 100%); }
  100% { background: linear-gradient(90deg, #2a0a15 0%, #6a1a2e 40%, #1a1a2e 100%); }
}

@keyframes banner-glow-shadow-red {
  0%, 100% {
    box-shadow: 0 0 20px 4px #6a1a2e88, 0 0 40px 8px #2a0a1588;
  }
  50% {
    box-shadow: 0 0 32px 10px #ff003366, 0 0 64px 18px #6a1a2e66;
  }
}

.banner-bar-glow::before,
.banner-bar-glow::after {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 80%;
  border-radius: 32px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.22;
  background: radial-gradient(ellipse at left, #ff003322 0%, transparent 70%);
  animation: banner-glow-left-red 8s ease-in-out infinite alternate;
}
.banner-bar-glow::after {
  background: radial-gradient(ellipse at right, #ff003322 0%, transparent 70%);
  animation: banner-glow-right-red 8s ease-in-out infinite alternate;
}

@keyframes banner-glow-left-red {
  0% { opacity: 0.12; }
  100% { opacity: 0.28; }
}
@keyframes banner-glow-right-red {
  0% { opacity: 0.28; }
  100% { opacity: 0.12; }
}

.banner-bar-text {
  position: relative;
  z-index: 2;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  text-shadow:
    2px 2px 6px #000,
    0 0 8px #fff,
    0 0 24px #ff0055,
    0 0 32px #ffcc00;
  filter: brightness(1.2);
  white-space: nowrap;
  animation: banner-marquee 16s linear infinite;
  left: 100%;
}

@keyframes banner-marquee {
  0% { left: 100%; }
  100% { left: -100%; }
} 

.promo-row > .card:hover .card-title span,
.promo-row > a:hover > .card .card-title span {
  display: inline-block;
  animation: grow-shrink 1.1s cubic-bezier(.4,2,.6,1) both;
}
.promo-row > .card:hover .card-title span:nth-child(1),
.promo-row > a:hover > .card .card-title span:nth-child(1) { animation-delay: 0s; }
.promo-row > .card:hover .card-title span:nth-child(2),
.promo-row > a:hover > .card .card-title span:nth-child(2) { animation-delay: 0.08s; }
.promo-row > .card:hover .card-title span:nth-child(3),
.promo-row > a:hover > .card .card-title span:nth-child(3) { animation-delay: 0.16s; }
.promo-row > .card:hover .card-title span:nth-child(4),
.promo-row > a:hover > .card .card-title span:nth-child(4) { animation-delay: 0.24s; }
.promo-row > .card:hover .card-title span:nth-child(5),
.promo-row > a:hover > .card .card-title span:nth-child(5) { animation-delay: 0.32s; }
.promo-row > .card:hover .card-title span:nth-child(6),
.promo-row > a:hover > .card .card-title span:nth-child(6) { animation-delay: 0.40s; }
.promo-row > .card:hover .card-title span:nth-child(7),
.promo-row > a:hover > .card .card-title span:nth-child(7) { animation-delay: 0.48s; }
.promo-row > .card:hover .card-title span:nth-child(8),
.promo-row > a:hover > .card .card-title span:nth-child(8) { animation-delay: 0.56s; }
.promo-row > .card:hover .card-title span:nth-child(9),
.promo-row > a:hover > .card .card-title span:nth-child(9) { animation-delay: 0.64s; }
.promo-row > .card:hover .card-title span:nth-child(10),
.promo-row > a:hover > .card .card-title span:nth-child(10) { animation-delay: 0.72s; }
.promo-row > .card:hover .card-title span:nth-child(11),
.promo-row > a:hover > .card .card-title span:nth-child(11) { animation-delay: 0.80s; }
.promo-row > .card:hover .card-title span:nth-child(12),
.promo-row > a:hover > .card .card-title span:nth-child(12) { animation-delay: 0.88s; }

@keyframes grow-shrink {
  0% { transform: scale(1); }
  30% { transform: scale(1.55); }
  60% { transform: scale(0.85); }
  100% { transform: scale(1); }
} 

.promo-row > .card:hover .card-logo {
  animation: logo-grow-shrink 1.1s cubic-bezier(.4,2,.6,1) both;
}

@keyframes logo-grow-shrink {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
} 

.promo-row-small > .card,
.promo-row-small > a > .card {
  width: 160px;
  height: 200px;
  min-width: 160px;
  max-width: 160px;
  min-height: 200px;
  max-height: 200px;
}
@media (max-width: 768px) {
  .promo-row-small > .card,
  .promo-row-small > a > .card {
    width: 90vw;
    min-width: 90vw;
    max-width: 98vw;
    height: 160px;
    min-height: 160px;
    max-height: 160px;
  }
} 

.promo-row-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}