/* RESET & BASIC */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto', sans-serif; line-height:1.6; scroll-behavior:smooth; transition:0.3s; background:#111; color:#eee; }
a { text-decoration:none; }
ul { list-style:none; }

/* NAVIGATION */
header { position:relative; overflow:hidden; }
nav { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; flex-wrap:wrap; z-index:1000; position:relative; }
nav h1 { font-family:'Press Start 2P', cursive; font-size:2rem; color:#ff0000; text-shadow:2px 2px 10px #000; }
nav ul { display:flex; gap:20px; }
nav ul li a, nav ul li button { color:white; font-weight:bold; background:none; border:none; cursor:pointer; transition:0.3s; }
nav ul li a:hover, nav ul li button:hover { transform:scale(1.1); }

/* 🎵 MUSIC BUTTON STYLE */
#musicToggle {
  font-size: 1.2rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  transition: transform 0.3s;
}
#musicToggle:hover {
  transform: scale(1.2);
}

/* --- 📱 MOBILE NAV FIX --- */
@media (max-width: 768px) {
  nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  nav ul li {
    flex: 1 1 auto;
    text-align: center;
  }

  #musicToggle {
    display: inline-block !important;
  }
}

/* --- 📱 FLOATING MUSIC BUTTON --- */
@media (max-width: 768px) {
  #musicToggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    border-radius: 50%;
  }
}

/* HERO */
.hero { padding:80px 20px; text-align:center; position:relative; overflow:hidden; }
.hero h2 { font-size:2.5rem; margin-bottom:15px; text-shadow:2px 2px 10px #000; animation:fadeIn 1.5s ease forwards; }
.hero p { font-size:1.2rem; margin-bottom:25px; animation:fadeIn 2s ease forwards; }
.subscribe-btn { display:inline-block; padding:15px 30px; font-weight:bold; border-radius:30px; background: linear-gradient(90deg, #ff0000, #ff9900); color:white; box-shadow:0 4px 20px rgba(0,0,0,0.4); transition:0.3s; }
.subscribe-btn:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(0,0,0,0.6); }
.hero-bg { position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at center, rgba(255,0,0,0.2), transparent 70%); animation:rotate 20s linear infinite; z-index:-1; }

/* SECTIONS */
section { padding:60px 20px; max-width:1000px; margin:0 auto; text-align:center; scroll-margin-top:100px; }
h2 { font-size:2rem; color:#ff0000; margin-bottom:30px; text-shadow:1px 1px 10px #000; }

/* FEATURES */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; margin-top:30px; }
.feature { background:#1a1a1a; padding:20px; border-radius:15px; box-shadow:0 4px 15px rgba(0,0,0,0.5); transition:0.3s; }
.feature:hover { transform:translateY(-10px); box-shadow:0 6px 25px rgba(0,0,0,0.6); }
.feature h3 { color:#ff0000; margin-bottom:10px; }
.feature p { color:#eee; }

/* ABOUT & SOCIAL & CONTACT */
#about, #social, #contact { background-color:#1a1a1a; border-radius:15px; padding:30px; box-shadow:0 4px 15px rgba(0,0,0,0.5); margin:20px auto; }
.social-links a { display:inline-block; margin:10px 15px; padding:10px 20px; border-radius:25px; font-weight:bold; background: linear-gradient(90deg,#ff0000,#ff9900); color:white; transition:0.3s; }
.social-links a:hover { transform:scale(1.1); box-shadow:0 6px 15px rgba(0,0,0,0.4); }

/* FOOTER */
footer { background-color:#222; color:white; padding:20px; text-align:center; }

/* DARK / LIGHT MODE */
body.light-mode { background:#111; color:#eee; }
body.light-mode #about, body.light-mode #social, body.light-mode #contact { background-color:#1a1a1a; }
body.dark-mode { background:#eee; color:#111; }
body.dark-mode header { background: linear-gradient(135deg, #333, #555); }
body.dark-mode #about, body.dark-mode #social, body.dark-mode #contact { background-color:#ddd; }
body.dark-mode .subscribe-btn, body.dark-mode .social-links a { background: linear-gradient(90deg, #ff5555,#ffaa00); color:white; }

body.dark-mode #musicToggle {
  color: #111;
}

/* ANIMATION */
@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes rotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* CAROUSEL */
.carousel-container { position: relative; overflow: hidden; margin: 0 auto; max-width: 1000px; }
.carousel-track { display:flex; gap:20px; transition: transform 0.5s ease; }
.carousel-track iframe { min-width:300px; height:220px; border-radius:15px; box-shadow:0 4px 15px rgba(0,0,0,0.3); transition: transform 0.3s; }
.carousel-track iframe:hover { transform:scale(1.05); }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background: rgba(255,0,0,0.8); color:#fff; border:none; padding:10px 15px; cursor:pointer; font-size:1.5rem; border-radius:50%; z-index:10; transition:0.3s; }
.carousel-btn:hover { background: rgba(255,0,0,1); }
.carousel-btn.left { left: 10px; }
.carousel-btn.right { right: 10px; }

/* --- FORCE SHOW MUSIC BUTTON --- */
#musicToggle {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 12px;
  border-radius: 50%;
  font-size: 1.4rem;
  border: none;
}