* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: url('images/bg2.webp') no-repeat center center fixed;
      background-size: cover;
      background-size: cover;
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    body::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 0;
    }

    .container {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 40px 20px;
      width: 100%;
      max-width: 500px;
    }

    .logo {
      max-width: 300px;
      height: auto;
      margin: 30px auto 20px auto;
      display: block;
    }

    .info-box {
      background-color: rgba(53, 123, 246, 0.1);
border: 1px solid #357bf6;
      color: white;
      font-size: 15px;
      padding: 12px 20px;
      border-radius: 8px;
      margin-bottom: 30px;
      line-height: 1.5;
    }

    .info-box span {
      color: #0a1a2f;
      font-weight: bold;
    }

    .button-container {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 30px;
    }

    .btn {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    
      background-color: #0a1a2f;
      color: black;
      padding: 14px 22px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    
      background-color: #e6c200;
      transform: scale(1.05);
    }

   .footer {
    z-index: 1;
    text-align: center;
    color: #c9dbff;
    padding: 20px;
    font-size: 14px;
    background-color: black;
    width: 100%;
    font-weight: bold;
    text-shadow: 0 0 5px #88b4ff, 0 0 10px #88b4ff;
}


    .footer span {
      color: #0a1a2f;
      font-weight: bold;
      display: block;
      margin-top: 8px;
    }

    @media (max-width: 600px) {
      .btn {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    
        width: 80vw;
      }

      .info-box {
        font-size: 14px;
      }
    }

.social-top {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}
.social-top a {
  color: #c9dbff;
  text-decoration: none;
  margin-right: 10px;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 5px #88b4ff, 0 0 10px #88b4ff;
}


.social-top {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
}
.social-top a {
  color: #c9dbff;
  text-decoration: none;
  margin-right: 10px;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 5px #88b4ff, 0 0 10px #88b4ff;
}


.social-top {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
  text-align: center;
}
.social-top img {
  width: 32px;
  height: 32px;
  margin: 0 6px;
  vertical-align: middle;
}



.social-top {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.social-top .social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.social-top img {
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
}

.social-top .label {
  color: #c9dbff;
  font-size: 10px;
  line-height: 1;
  margin: 0;
  font-weight: bold;
  text-shadow: 0 0 5px #88b4ff, 0 0 10px #88b4ff;
}

.btn {
    background-color: #0d274e;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1em;
    transition: background-color 0.3s ease;
    display: inline-block;
    text-decoration: none;
    margin: 10px;
}
.btn:hover {
    background-color: #357bf6;
    color: #fff;
}
body {
   
}

footer, .footer-text, .social-links a {
    color: #c9dbff !important;
    font-weight: bold;
}

.social-links a {
    color: #c9dbff !important;
    font-weight: bold;
    text-decoration: none;
}

a {
    color: #357bf6 !important;
}
a:hover {
    color: #88b4ff !important;
}

.cookie-consent, .cookie-banner, .cookie-notice {
    background-color: #0a1a2f !important;
    color: #ffffff !important;
    border: 1px solid #357bf6 !important;
}
.cookie-consent a, .cookie-banner a {
    color: #88b4ff !important;
}

.social-links, .social-links a, .social-text, .social-links span {
    color: #c9dbff !important;
    font-weight: bold;
    text-decoration: none;
}

a[href*="primebahis.link"] {
    color: #357bf6 !important;
}
a[href*="primebahis.link"]:hover {
    color: #88b4ff !important;
}

.cookie-consent, .cookie-banner, .cookie-notice, .cookie-bar {
    background-color: #0a1a2f !important;
    color: #c9dbff !important;
    border: 1px solid #357bf6 !important;
}
.cookie-consent a, .cookie-banner a, .cookie-notice a, .cookie-bar a {
    color: #88b4ff !important;
}

.social-links, .social-links a, .social-text, .social-links span {
    color: #c9dbff !important;
    font-weight: bold;
    text-decoration: none;
}

.cookie-consent, .cookie-banner, .cookie-notice, .cookie-bar {
    background-color: #0a1a2f !important;
    color: #c9dbff !important;
    border: 1px solid #357bf6 !important;
}
.cookie-consent a, .cookie-banner a, .cookie-notice a, .cookie-bar a {
    color: #88b4ff !important;
}

a[href*="primebahis.link"] {
    color: #357bf6 !important;
}
a[href*="primebahis.link"]:hover {
    color: #88b4ff !important;
}


/* ==== OPTIMIZED STYLES ==== */

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    background-color: #0d274e;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin: 8px;
}

.btn:hover {
    background-color: #357bf6;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(53, 123, 246, 0.4);
}

/* Mobil uyum */
@media (max-width: 600px) {
    .btn {
        width: 90%;
        padding: 12px 20px;
        font-size: 15px;
    }
    .button-container {
        gap: 8px;
    }
}

/* Sosyal medya linkleri */
.social-top a, .social-top .label {
    color: #c9dbff !important;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 0 5px #88b4ff, 0 0 10px #88b4ff;
}

/* Footer parlak */
.footer {
    z-index: 1;
    text-align: center;
    color: #c9dbff;
    padding: 20px;
    font-size: 14px;
    background-color: black;
    width: 100%;
    font-weight: bold;
    text-shadow: 0 0 5px #88b4ff, 0 0 10px #88b4ff;
}

/* Body font */
body {
    /* Use system fonts to avoid fetching external font files */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* ==== FINAL OPTIMIZED STYLES ==== */

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    background-color: #0d274e;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin: 8px;
}

.btn:hover {
    background-color: #357bf6;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(53, 123, 246, 0.4);
}

/* Mobil uyum */
@media (max-width: 600px) {
    .btn {
        width: 95%;
        padding: 14px 24px;
        font-size: 16px;
    }
    .button-container {
        gap: 8px;
    }
}

/* Sosyal medya linkleri */
.social-top a, .social-top .label {
    color: #c9dbff !important;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 0 5px #88b4ff, 0 0 10px #88b4ff;
}

/* Footer parlak */
.footer {
    z-index: 1;
    text-align: center;
    color: #c9dbff;
    padding: 20px;
    font-size: 14px;
    background-color: black;
    width: 100%;
    font-weight: bold;
    text-shadow: 0 0 5px #88b4ff, 0 0 10px #88b4ff;
}

/* Body font */
body {
    /* Use system fonts to avoid fetching external font files */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button, .button {
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

button:hover, .button:hover {
  background-color: rgba(255,255,255,0.1);
  transform: scale(1.05);
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  h1 {
    font-size: 22px;
    padding: 10px;
    text-align: center;
  }

  button, .button {
    width: 90%;
    font-size: 16px;
  }
}

/* Position the social media icons further down on small screens so they don't overlap
   with the fixed top notice bar. On mobile devices the notice bar occupies
   approximately 40–50px of vertical space at the top of the viewport. By pushing
   the icon container down we ensure that both elements remain readable without
   overlapping. */
@media (max-width: 600px) {
  .social-top {
    /* Place the icons below the announcement bar */
    top: 55px;
    left: 10px;
    right: auto;
    /* Allow icons to wrap onto a new line if the viewport is too narrow */
    flex-wrap: wrap;
    gap: 12px;
  }
}


/* Cookie Bar - Prime Mavi Theme */

#cookieBar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(0, 16, 32, 0.9);
    color: #c9dbff;
    text-align: center;
    padding: 6px 12px;
    font-size: 13px;
    z-index: 9999;
    border-top: 1px solid #357bf6;
    box-shadow: 0 -2px 5px rgba(53, 123, 246, 0.3);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#cookieAccept {
    all: unset;
    display: inline-block;
    margin-left: 8px;
    background: #0a1a2f;
    color: #88b4ff;
    border: 1px solid #357bf6;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}

#cookieAccept:hover {
    background: #357bf6;
    color: #fff;
    border-color: #357bf6;
    transform: scale(1.05);
}