/* Reset + base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
  }
  
  body {
    background: linear-gradient(to bottom, #3b215f, #a362d4);
    color: white;
  }
  
  /* Header */
  #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(90deg, #3b215f, #7f38c7);
  }
  
  #header img {
    height: 32px;
  }
  
  #nav ul {
    display: flex;
    list-style: none;
    gap: 16px;
  }
  
  #nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 14px;
  }
  
  /* Hero */
  #hero {
    text-align: center;
    padding: 80px 16px 40px;
  }
  
  #hero h2 {
    font-size: 20px;
  }
  
  #hero .outline {
        font-family: 'Poppins', sans-serif;
        color: transparent;
        -webkit-text-stroke: 3px #ffdd00;
        padding: 20px 40px;
        border-radius: 24px;
        font-size: 150px;
        line-height: 150px;
        margin-top: 0px;
      }

  #hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  
  #hero h1,
  #hero h2 {
    position: relative;
    z-index: 1;
  }

  #video-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/noise.png');
    background-size: cover;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
  }
  
  
  /* Release */
  #release {
    background-image: url(assets/bgstar.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 32px 16px;
    text-align: center;
    justify-items: center;
  }
  
  .banner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-self: center;
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 24px;
    line-height: 10px;
    max-width: 400px;
  }

  
  .text-filled {
    color: #ffc933;
  }
  
  .release-img img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 16px;
  }
  
  #release-info h2 {
    font-size: 20px;
    color: #ffdd00;
  }
  
  #release-info p {
    margin-bottom: 8px;
  }
  
  .spotify-button,
  .youtube-button {
    padding: 10px 16px;
    border: none;
    margin: 4px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
  }
  
  .spotify-button {
    background-color: #1DB954;
    color: white;
  }
  
  .youtube-button {
    background-color: #FF0000;
    color: white;
  }
  
  /* Info Section */
  #info {
    background-image: url(assets/bglyra.png);
    background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    padding: 40px 16px;
    text-align: center;
  }
  
  #about h1 {
    color: #ffdd00;
    font-size: 24px;
    margin-bottom: 16px;
  }
  
  #about p {
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .more {
    background-color: #ffdd00;
    color: black;
    padding: 10px 16px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  
  .tour-card {
    background-color: rgba(255, 255, 255, 0.2);
    margin: 16px auto;
    padding-top: 40px;
    padding-bottom: 40px;
    border-radius: 12px;
    max-width: 280px;
  }

  .tour-card.sf:hover {
    background-image: url(assets/v-ber.png);
  }

  .tour-card.la:hover {
    background-image: url(assets/v-la.png);
  }
  
  .more-dates {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    margin-top: 1px;
    padding: 10px 100px;
    border: none;
    border-radius: 16px;
  }

  .more-dates a {
    text-decoration: none;
    color: white;
    font-weight: bold;
  }

  .more-dates a:visited {
    text-decoration: none;
    color: white;
    font-weight: bold;
  }

  .more-dates:hover {
    background-color: #ffd700;
  }

  .more-dates a:hover {
    color: #000;
  }
  
  /* Merch */
  #merch {
    padding: 32px 16px;
    background-image: url(assets/bgstar.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
  }
  
  .banner {
    font-size: 24px;
    font-weight: 900;
    color: #ffdd00;
    margin-bottom: 24px;
    justify-self: center;
  }
  
  #merch-products {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .badge {
    position: absolute;
    top: 0px;
    left: 30px;
    background-color: #ffdd00;
    color: black;
    font-weight: 700;
    font-size: 12px;
    padding: 20px 20px;
    border-radius: 0 0 16px 16px;
    z-index: 2;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }

  .badge-sale {
    position: absolute;
    top: 0px;
    left: 30px;
    background-color: #B78DD9;
    color: black;
    font-weight: 700;
    font-size: 12px;
    padding: 20px 20px;
    border-radius: 0 0 16px 16px;
    z-index: 2;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }
  
  .product-card {
    position: relative;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 16px;
    color: white;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }

  .product-card:hover {
    transform: scale(1.03);
  }
  
  .product-card img {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 16px;
  }
  
  .product-card h2 {
    font-size: 24px;
  }

  .product-card h2 span {
    opacity: 50%;
    text-decoration: line-through;
  }

  .product-card p {
    font-size: 24px;
    background-color: #ffd700;
    width: 50px;
    height: 100px;
  }
  
  .product-card button {
    margin-top: 8px;
    background-color: #ffdd00;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
  }

  .product-card button:hover {
    margin-top: 8px;
    background-color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 16px;
    font-weight: 600;
  }
  
  /* Footer */
  footer {
    background-color: #252525;
    padding: 32px 16px;
    text-align: center;
  }
  
  footer img {
    height: 32px;
    margin-bottom: 16px;
  }
  
  #footer-socials ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
  }
  
  #footer-socials ul li img {
    height: 24px;
  }
  
  footer p {
    color: #ccc;
    font-size: 12px;
  }
  
  /* Responsive for tablet */
  @media screen and (min-width: 768px) {

    #info {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    
    #about {
      padding: 20px;
      border-radius: 12px;
      text-align: center;
    }
    
    #about h1 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    
    #about p {
      font-size: 16px;
      margin-bottom: 30px;
      color: #ffd700;
    }
    
    #about button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

    #about button:hover {
      background-color: #ffffff;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    
    #upcoming-tour {
      padding: 20px;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-self: center;
    }
    
    .tour-card {
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      text-align: center;
    }
    
    .more-dates {
      padding: 10px 20px;
      font-size: 16px;
      align-self: center;
    }
    
    .more-dates a {
      text-decoration: none;
      color: black;
    }

    #about-head {
        display: flex;
    }

    #about-head .head-left img {
        width: 100%;
    }

    #about-head .head-right {
        height: 250px;
    }

    .head-right h2 {
        margin-top:  50px;
    }

    .music-player {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap; /* Taşarsa alta geçsin */
        padding: 40px;
        background-image: url(assets/bgstar.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      



    #hero .outline {
        font-family: 'Poppins', sans-serif;
        color: transparent;
        -webkit-text-stroke: 5px #ffdd00;
        padding: 20px 40px;
        border-radius: 24px;
        font-size: 200px;
        line-height: 150px;
        margin-top: -20px;
      }
  
    .banner {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-self: center;
        font-size: 40px;
        font-weight: 900;
        margin-bottom: 40px;
        margin-top: 20px;
        line-height: 20px;
        max-width: 700px;
    }
  
    #merch-products {
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      margin: 50px;
    }
  
    .product-card {
      width: 30%;
    }
  
    #nav ul li a {
      font-size: 16px;
    }
  
    #header img {
      height: 48px;
    }
  
    .tour-card {
      display: inline-block;
      width: 220px;
      margin: 0 12px;text-transform: uppercase;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }
  }
  
  /* Desktop-specific enhancements */
  @media screen and (min-width: 1024px) {
    body {
      font-size: 16px;
    }
  
    #header {
      padding: 24px 64px;
    }
  
    #nav ul {
      gap: 32px;
    }
  
    #hero {
      height: 100vh;
      background-image: url('assets/hero.png');
      background-position: center;
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  
    #hero h2 {
      font-size: 24px;
      color: white;
      text-shadow: 2px 2px 8px #000;
    }
  
    #hero .outline {
        font-family: 'Poppins', sans-serif;
        color: transparent;
        -webkit-text-stroke: 5px #ffdd00;
        padding: 20px 40px;
        border-radius: 24px;
        font-size: 200px;
        line-height: 150px;
        margin-top: 0px;
      }
  
    .banner {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-self: center;
        font-size: 60px;
        font-weight: 900;
        margin-bottom: 60px;
        line-height: 40px;
        max-width: 900px;
      }
  
    #release {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 64px 0;
    }
  
    .release-img img {
      width: 480px;
    }
  
    #release-info {
      margin-top: 16px;
    }
  
    #info {
      padding: 80px 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
    }
  
    #about {
      flex: 1;
      padding-right: 48px;
    }
  
    #about h1 {
      font-size: 36px;
    }
  
    #about p {
      font-size: 18px;
    }
  
    #upcoming-tour {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
    }
  
    .tour-card {
      width: 100%;
      max-width: 300px;
      text-align: left;
    }
  
    .banner {
      font-size: 48px;
      justify-self: center;
    }
  
    #merch-products {
      gap: 48px;
      margin: 40px 200px;
    }
  
    .product-card h2 {
      font-size: 18px;
    }
  
    footer {
      padding: 48px 64px;
    }
  }


  /*ABOUT PAGE STYLES*/

  #about-head {
    background-color: #000;
  }

  .head-left img {
    max-width: 100%;
    height: 300px;
  }
  
  .head-right {
    margin: 50px auto;
    justify-items: center;
  }
  .head-right img {
    max-width: 400px;
    padding-bottom: 30px;
  }

  #about-text {
    background-image: url(assets/bgstar.png);
    margin-top: -50px;
    padding: 50px;
    text-align: center;
    color: #ffd700;
    font-size: 22px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  /*MUSIC PAGE STYLES*/

.music-player {
  margin-top: -50px;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 40px;
  gap: 20px;
  background-image: url(assets/bgstar.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.player {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 24px;
  width: 320px;
  text-align: center;
  color: white;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
}

.cover {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 16px;
}

h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #eee;
}

.seek-bar {
  flex: 1;
  margin: 0 8px;
  accent-color: #ffdd00;
}

.buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

.play-button {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at center, #ffdd00, #caaf00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  /* PLAY görünümü: Üçgen */
  .play-button::before {
    content: "";
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent white;
    position: absolute;
    left: 18px;
  }
  
  /* PAUSE görünümü: İki dikey çizgi */
  .play-button.paused::before {
    content: "";
    width: 6px;
    height: 20px;
    background: white;
    box-shadow: 12px 0 0 white;
    border: none;
    position: absolute;
    left: 14px;
  }

  /*TOUR PAGE STYLES*/

  #tour-list {
    background-image: url(assets/bgstar.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: -50px;
    padding: 50px 20px;
  }

  .card {
    display: flex;
    align-items: center;
    background-color: #252525;
    border-radius: 16px;
    overflow: hidden;
    max-width: 800px;
    margin: 32px auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
  
  .card img {
    width: 50%;
    height: 100%;
    object-fit: cover;
  }
  
  .card .details {
    padding: 40px;
    color: white;
    width: 50%;
    text-align: left;
  }
  
  .card .details h2 {
    font-size: 24px;
    font-weight: 800;
    color: #ffdd00;
    margin-bottom: 8px;
  }
  
  .card .details h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 4px 0;
  }
  
  .card button {
    margin-top: 16px;
    padding: 10px 20px;
    background-color: white;
    color: black;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .card button:hover {
    background-color: #ffdd00;
    color: black;
  }
  
  @media (max-width: 768px) {
    .card {
      flex-direction: column;
    }
  
    .card img,
    .card .details {
      width: 100%;
    }
  
    .card img {
      height: 200px;
    }
  }
  
  .music-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 40px;
    background-image: url(assets/bgstar.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  @media (min-width: 768px) {
    .music-player {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
    }
  
    .player {
      width: 320px;
    }
  }