@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('sans-serif');
 ascent-override: 90%;
 descent-override: 22.43%;
 line-gap-override: 0%;
 size-adjust: 107%;
}
@font-face {
    font-family: 'Bebas Neue Fallback';
    src: local('Arial Narrow'), local('Arial'), local('Impact');
 ascent-override: 100%;
 descent-override: 20%;
 line-gap-override: 0%;
 size-adjust: 87%;
}

.features {
 content-visibility: auto;
 contain-intrinsic-size: 0 500px;
}

.bg-video, .play-btn {
 will-change: transform;
}

.ripple, .wave, .live-dot::after {
 will-change: transform, opacity;
}

body { overflow-x: hidden; }

img[loading="lazy"] { background: #111; }

:root {
 --accent: #ffad1e;
 --accent-dark: #e69a0a;
 --accent-rgb: 255, 173, 30;
 --bg: #0a0a0a;
 --bg-card: #141414;
 --text: #ffffff;
 --text-muted: rgba(255, 255, 255, 0.85);
    --font:         "Inter", "Inter Fallback", system-ui, -apple-system, Arial, sans-serif;
    --font-display: "Bebas Neue", "Bebas Neue Fallback", "Arial Narrow", Arial Black, Arial, sans-serif;
}

*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

html, body, .modal-body, .nav, [class*="scroll"], [style*="overflow"] {
 scrollbar-width: thin;
 scrollbar-color: var(--accent) #1a1a1a;
}

html { scroll-behavior: smooth; }

body {
 font-family: var(--font);
 background: var(--bg);
 color: var(--text);
 overflow-x: hidden;
 min-height: 100vh;
}

.visually-hidden {
 position: absolute;
 width: 1px; height: 1px;
 padding: 0; margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 white-space: nowrap;
 border: 0;
}

.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.25rem;
}

.bg-video-wrap {
 position: fixed;
 inset: 0;
 z-index: -2;
}
.bg-video {
 width: 100%; height: 100%;
 object-fit: cover;
}
.bg-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0.90) 100%);
 z-index: 1;
}

.header {
 position: fixed;
 top: 0; left: 0; right: 0;
 z-index: 100;
 font-size: 14px;
 background: rgba(10,10,10,0.95);
 backdrop-filter: blur(12px);
 border-bottom: 1px solid rgba(var(--accent-rgb),0.15);
}
.header-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0.75rem 1.25rem;
 gap: 1rem;
}

.logo {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 text-decoration: none;
 color: var(--text);
 flex-shrink: 0;
}
.logo-img { height: 30px; width: auto; }
.logo-text { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 1px; }
.logo-accent { color: var(--accent); }

.nav-toggle {
 display: none;
 flex-direction: column;
 gap: 5px;
 background: none;
 border: none;
 cursor: pointer;
 padding: 6px;
 z-index: 1500;
 flex-shrink: 0;
}
.nav-toggle span {
 display: block;
 width: 24px; height: 2px;
 background: var(--text);
 border-radius: 2px;
 transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.nav-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.6);
 backdrop-filter: blur(4px);
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease, visibility 0.3s ease;
 z-index: 1000;
}
.nav-overlay.show {
 opacity: 1;
 visibility: visible;
}

.nav {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 flex: 1;
}

.nav-link {
 color: var(--text-muted);
 text-decoration: none;
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.5px;
 padding: 6px 7px;
 transition: color 0.2s;
 white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
 color: var(--accent);
 text-decoration: underline;
 text-underline-offset: 4px;
}

.btn-live {
 background: var(--accent);
 color: var(--bg) !important;
 padding: 0.4rem 0.85rem;
 border-radius: 8px;
 font-weight: 700;
 font-size: 0.72rem;
 text-decoration: none !important;
 border: none;
 cursor: pointer;
 white-space: nowrap;
 flex-shrink: 0;
 transition: background 0.2s;
 display: inline-block;
}
.btn-live:hover { background: var(--accent-dark); }

.mobile-top { display: none; }
.mobile-logo { height: 28px; width: auto; display: block; }

.nav-social {
 display: none;
 gap: 12px;
 padding-top: 16px;
 margin-top: auto;
 border-top: 1px solid rgba(255,255,255,0.08);
}
.nav-social-link {
 width: 36px; height: 36px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 8px;
 background: rgba(255,255,255,0.06);
 color: var(--text);
 text-decoration: none;
 transition: all 0.3s ease;
}
.nav-social-link:hover {
 background: var(--accent);
 color: #000;
 transform: translateY(-3px);
 box-shadow: 0 5px 15px rgba(var(--accent-rgb),0.4);
}

.hero {
 position: relative;
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 5rem 1.5rem 4rem;
 text-align: center;
}
.hero-inner {
 position: relative;
 z-index: 1;
 max-width: 700px;
 width: 100%;
}
.hero-about,
.hero-contact,
.hero-contact-animated {
 min-height: 35vh;
 padding-top: 6rem;
 padding-bottom: 2rem;
}
.hero-contact-animated { min-height: 40vh; padding-bottom: 3rem; }

.sound-waves {
 position: absolute; inset: 0;
 pointer-events: none; overflow: hidden;
}
.sound-waves .wave {
 position: absolute;
 border: 1.5px solid rgba(var(--accent-rgb),0.35);
 border-radius: 50%;
 opacity: 0.6;
 box-shadow: 0 0 40px rgba(var(--accent-rgb),0.25);
}
.sound-waves .w1 { left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px; }
.sound-waves .w2 { left:50%;top:50%;width:280px;height:280px;margin:-140px 0 0 -140px;animation-delay:.5s; }
.sound-waves .w3 { left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;animation-delay:1s; }
.sound-waves .w4 { left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;animation-delay:1.5s; }
.sound-waves .w5 { left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;animation-delay:2s; }
.sound-waves .w6 { left:50%;top:50%;width:600px;height:600px;margin:-300px 0 0 -300px;animation-delay:2.5s; }
@keyframes wavePulse {
 0% { transform:scale(0.8); opacity:0.6; }
 100% { transform:scale(1.2); opacity:0; }
}

.live-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.4rem 1rem;
 border: 1px solid var(--accent);
 border-radius: 20px;
 font-size: 0.7rem;
 font-weight: 600;
 letter-spacing: 1px;
 margin-bottom: 1.5rem;
}
.live-dot {
 width: 8px; height: 8px;
 background: #ff2b2b;
 border-radius: 50%;
 flex-shrink: 0;
 position: relative;
 animation: liveDotPulse 1.5s infinite;
}

.live-dot::after {
    content: '';
 position: absolute;
 inset: -4px;
 border-radius: 50%;
 background: rgba(255,43,43,0.5);
 animation: liveDotRing 1.5s infinite;
 will-change: transform, opacity;
}
@keyframes liveDotPulse {
 0%,100% { opacity: 1; }
 50% { opacity: 0.75; }
}
@keyframes liveDotRing {
 0% { transform: scale(0.5); opacity: 0.7; }
 70% { transform: scale(2); opacity: 0; }
 100% { transform: scale(0.5); opacity: 0; }
}

.hero-title {
 font-family: var(--font-display);
 font-size: clamp(3.5rem, 12vw, 6rem);
 font-weight: 400;
 letter-spacing: 2px;
 line-height: 1;
}
.hero-accent { color: var(--accent); }
.hero-divider { width:60px; height:3px; background:var(--accent); margin:1rem auto 1.5rem; }
.hero-desc { color:var(--text-muted); font-size:0.95rem; line-height:1.7; margin-bottom:2.5rem; font-family:var(--font); }

.player-zone { position:relative; margin:2rem 0; }
.player-wrap { position:relative; width:220px; height:220px; margin:0 auto 1rem; }

.ripple {
 position: absolute;
 left:50%; top:50%;
 transform: translate(-50%,-50%) scale(0.6);
 width:140px; height:140px;
 border: 2px solid var(--accent);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
}
.ripple.active { animation: ripple 2.5s ease-out infinite; }
.ripple.r2.active { animation-delay: 0.4s; }
.ripple.r3.active { animation-delay: 0.8s; }
.ripple span { font-family:var(--font-display); font-size:0.65rem; color:var(--accent); letter-spacing:1px; }
@keyframes ripple {
 0% { transform:translate(-50%,-50%) scale(0.6); opacity:0.8; }
 100% { transform:translate(-50%,-50%) scale(1.8); opacity:0; }
}

.play-btn {
 position: absolute;
 left:50%; top:50%;
 transform: translate(-50%,-50%);
 width:148px; height:148px;
 border-radius: 50%;
 background: var(--accent);
 border: none; cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 0 50px rgba(var(--accent-rgb),0.5);
 transition: transform 0.2s, box-shadow 0.2s;
 z-index: 5;
}
.play-btn:hover { transform:translate(-50%,-50%) scale(1.05); box-shadow:0 0 60px rgba(var(--accent-rgb),0.6); }
.play-btn.playing .icon-play { display:none; }
.play-btn.playing .icon-pause { display:block !important; }

.scroll-indicator {
 display:inline-flex; flex-direction:column; align-items:center;
 gap:8px; margin-top:60px;
 text-decoration:none;
 font-family:var(--font-display);
 letter-spacing:4px; font-size:18px;
 color:rgba(255,255,255,0.6);
 transition:color 0.2s;
}
.scroll-indicator:hover { color:var(--accent); }
.scroll-label { animation:textGlow 3s infinite ease-in-out; will-change: opacity; }
.scroll-line { width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:lineMove 2.5s infinite; will-change: opacity, transform; }
.scroll-arrow { width:12px; height:12px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); animation:arrowFloat 2s infinite ease-in-out; will-change: transform, opacity; }
@keyframes textGlow {
 0%,100% { opacity:0.4; }
 50% { opacity:1; }
}
@keyframes lineMove {
 0%,100% { opacity:0.3; transform:scaleX(0.6); }
 50% { opacity:1; transform:scaleX(1); }
}
@keyframes arrowFloat {
 0%,100% { transform:rotate(45deg) translateY(0); opacity:0.4; }
 50% { transform:rotate(45deg) translateY(6px); opacity:1; }
}

.features { padding: 4rem 0; }
.section-title {
 font-family: var(--font-display);
 font-size: clamp(1.75rem,4vw,2.25rem);
 text-align: center;
 color: var(--text);
 letter-spacing: 2px;
 margin-bottom: 2.5rem;
}
.section-social-title {
 font-family: var(--font-display);
 font-size: clamp(1.4rem, 4vw, 2.2rem);
 letter-spacing: 3px;
 margin-bottom: 1.5rem;
 display: block;
 text-align: center;
 position: relative;
}
.section-social-title span { color: var(--text-muted); }
.section-social-title strong { color: var(--accent); margin-left: 6px; }
.section-social-title::after {
    content:"";
 display:block;
 width:60%; height:3px;
 margin:8px auto 0;
 background:linear-gradient(90deg,transparent,var(--accent),transparent);
 border-radius:3px;
}
.section-desc { text-align:center; color:var(--text-muted); margin-bottom:2rem; font-size:0.95rem; }

.stats { padding:3rem 0; background:rgba(0,0,0,0.5); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.stat-card {
 background:var(--bg-card);
 border:1px solid rgba(var(--accent-rgb),0.2);
 border-radius:12px; padding:1.5rem;
 text-align:center; transition:all 0.3s;
}
.stat-card:hover { border-color:var(--accent); transform:translateY(-4px); }
.stat-icon { color:var(--text-muted); margin-bottom:0.5rem; display:flex; justify-content:center; }
.stat-value { font-family:var(--font-display); font-size:1.75rem; color:var(--accent); }

.live-main-card { padding: 2rem; }

.live-header {
 display:flex; align-items:center;
 gap:10px; margin-bottom:1.5rem;
 font-weight:600; letter-spacing:1px;
}
.live-text { font-size:14px; }

.live-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 16px;
}

.live-box {
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(var(--accent-rgb),0.25);
 border-radius: 14px;
 padding: 16px;
 transition: transform 0.3s, box-shadow 0.3s;
}
.live-box:hover { transform:translateY(-4px); box-shadow:0 0 18px rgba(var(--accent-rgb),0.35); }

.box-header {
 display:flex; align-items:center;
 gap:8px; color:var(--accent);
 font-weight:600; font-size:13px;
 margin-bottom:10px;
}

.box-value {
 font-size:14px; font-weight:500;
 letter-spacing:0.5px; opacity:0.85;
 transition:opacity 0.3s; margin-top:4px;
}
.box-value:hover { opacity:1; }

.live-history-wrapper { margin-top:20px; }
.history-box { width:100%; }

#song-history { list-style:none; padding:0; margin:0; }
#song-history li {
 padding:5px 0; font-size:13px;
 opacity:0.85; transition:opacity 0.3s; text-align:center;
}
#song-history li:hover { opacity:1; }

.features-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0,1fr));
 gap: 1.5rem;
}

.feature-card {
 background: var(--bg-card);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: 12px;
 padding: 1.5rem;
 text-align: center;
 transition: all 0.3s;
}
.feature-card:hover { border-color:var(--accent); transform:translateY(-4px); }
.feature-icon {
 width:48px; height:48px;
 margin:0 auto 0.75rem;
 padding:10px;
 background:rgba(var(--accent-rgb),0.1);
 border-radius:12px; color:var(--accent);
}
.feature-card h3 { font-size:clamp(0.9rem, 1.5vw, 1rem); font-weight:700; margin-bottom:0.5rem; letter-spacing:0.5px; }
.feature-card p { color:var(--text-muted); font-size:clamp(0.8rem, 1.5vw, 0.88rem); line-height:1.6; }

a.feature-card {
 display: block;
 text-decoration: none;
 color: inherit;
 cursor: pointer;
}

.culture-card[data-popup],
.feature-card[data-popup] { cursor:pointer; }

.feature-popup-link {
 color:var(--accent); font-size:0.85rem; font-weight:600;
 text-decoration:none; display:inline-block;
 margin-top:0.5rem; transition:text-shadow 0.3s;
}
.feature-popup-link:hover { text-shadow:0 0 8px rgba(var(--accent-rgb),0.6); }

.culture { padding:4rem 0; background:rgba(0,0,0,0.4); }
.culture-grid {
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:2rem;
}
.culture-card {
 background:var(--bg-card);
 border:1px solid rgba(var(--accent-rgb),0.2);
 border-radius:12px; padding:2rem;
}
.culture-card[data-modal] { cursor: pointer; }
.feature-card[data-modal] { cursor: pointer; }

.culture-badge {
 display:inline-block;
 background:var(--accent); color:var(--bg);
 padding:0.3rem 0.8rem; border-radius:20px;
 font-size:0.65rem; font-weight:700;
 letter-spacing:1px; margin-bottom:1rem;
 text-transform:uppercase;
}
.culture-card h3 { font-family:var(--font-display); font-size:clamp(1.1rem, 2.5vw, 1.35rem); margin-bottom:1rem; }
.culture-card p { color:var(--text-muted); font-size:clamp(0.82rem, 1.5vw, 0.9rem); line-height:1.7; margin-bottom:0.75rem; }
.culture-card a { color:var(--accent); text-decoration:none; font-weight:600; font-size:0.85rem; }
.culture-card a:hover { text-decoration:underline; }

.neon-card {
 position:relative;
 background:rgba(20,20,20,0.7);
 border:1px solid rgba(var(--accent-rgb),0.3);
 border-radius:16px; padding:2rem;
 overflow:hidden;
 transition:transform 0.3s, box-shadow 0.3s;
}
.neon-card:hover {
 transform:translateY(-6px);
 box-shadow:0 0 20px var(--accent), 0 0 40px rgba(var(--accent-rgb),0.3), 0 0 60px rgba(var(--accent-rgb),0.15);
}
.neon-card::before {
    content:"";
 position:absolute; top:0; left:-75%;
 width:50%; height:100%;
 background:linear-gradient(120deg,rgba(255,255,255,0.06),rgba(255,255,255,0.25),rgba(255,255,255,0.06));
 transform:skewX(-20deg);
 transition:left 0.7s ease;
 pointer-events:none;
}
.neon-card:hover::before { left:125%; }
.neon-card a { color:var(--accent); font-weight:600; transition:text-shadow 0.3s; }
.neon-card a:hover { text-shadow:0 0 10px var(--accent), 0 0 20px rgba(var(--accent-rgb),0.5); }

.song-request { padding:4rem 0; }
.request-form { max-width:600px; margin:0 auto; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.request-form input,
.request-form textarea {
 width:100%; padding:1rem;
 background:var(--bg-card);
 border:1px solid rgba(255,255,255,0.15);
 border-radius:8px; color:var(--text);
 font-family:inherit; font-size:1rem;
}
.request-form textarea { min-height:120px; resize:vertical; margin-bottom:1rem; }
.submit-btn {
 width:100%; padding:1rem;
 background:var(--accent); color:var(--bg);
 border:none; border-radius:8px;
 font-weight:700; cursor:pointer;
 transition:background 0.2s;
}
.submit-btn:hover { background:var(--accent-dark); }

.about-content { padding-top:2rem; }
.about-card {
 background:rgba(255,255,255,0.05);
 padding:3rem; border-radius:16px;
 backdrop-filter:blur(8px);
 margin-bottom:4rem;
}
.about-card h2 { color:var(--accent); margin-bottom:1.2rem; }
.about-card p { color:rgba(255,255,255,0.85); line-height:1.7; margin-bottom:1rem; }

.about-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:25px; margin-bottom:4rem;
}
.about-box {
 background:rgba(255,255,255,0.04);
 padding:2rem; border-radius:14px; transition:0.3s ease;
}
.about-box:hover { background:rgba(var(--accent-rgb),0.08); transform:translateY(-5px); }
.about-box h3 { color:var(--accent); margin-bottom:0.8rem; }
.about-box p { color:rgba(255,255,255,0.8); line-height:1.6; }

.about-highlight {
 text-align:center; padding:3rem;
 background:linear-gradient(135deg,rgba(var(--accent-rgb),0.1),rgba(255,123,0,0.1));
 border-radius:16px;
}
.about-highlight h2 { color:var(--accent); margin-bottom:1rem; }

.contact-section { padding-top:2rem; }
.contact-animated-section { padding:0; }
.contact-animated-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:30px;
}
.contact-animated-card {
 position:relative; overflow:hidden;
 padding:3rem 2rem; border-radius:18px;
 text-decoration:none;
 background:rgba(255,255,255,0.04);
 backdrop-filter:blur(8px);
 transition:0.4s ease;
}
.contact-animated-card h3 { color:var(--accent); margin-bottom:0.5rem; letter-spacing:2px; }
.contact-animated-card p { color:var(--text); font-weight:600; }
.contact-bg {
 position:absolute; width:200%; height:200%;
 background:radial-gradient(circle at center,rgba(var(--accent-rgb),0.3),transparent 60%);
 top:-50%; left:-50%;
 opacity:0; pointer-events:none; transition:opacity 0.5s ease;
}
.contact-animated-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 40px rgba(0,0,0,0.4); }
.contact-animated-card:hover .contact-bg { opacity:1; animation:glowMove 3s linear infinite; }
.contact-animated-card:hover h3,
.contact-animated-card:hover p { text-shadow:0 0 15px rgba(var(--accent-rgb),0.6); }
@keyframes glowMove { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.listeners-section { padding:2rem 0; }
.listeners-card {
 display:flex; align-items:center; justify-content:center;
 gap:1.5rem;
 background:rgba(var(--accent-rgb),0.08);
 border:1px solid rgba(var(--accent-rgb),0.3);
 border-radius:16px; padding:1.5rem 2rem;
 max-width:400px; margin:0 auto;
}
.listeners-icon { color:var(--accent); }
.listeners-label { font-size:0.9rem; color:var(--text-muted); margin-bottom:0.25rem; }
.listeners-count { font-family:var(--font-display); font-size:2.5rem; color:var(--accent); }
.listeners-count .plus { font-size:1.5rem; margin-left:0.1rem; }

.footer {
 padding:4rem 0 2rem;
 background:rgba(0,0,0,0.6);
 border-top:1px solid rgba(var(--accent-rgb),0.15);
}
.footer-grid {
 display:grid;
 grid-template-columns:2fr 1fr 1fr 1fr;
 gap:2rem; margin-bottom:2rem;
}
.footer-logo { font-family:var(--font-display); font-size:1.35rem; margin-bottom:0.5rem; }
.footer-logo span { color:var(--accent); }
.footer h4 { font-size:0.8rem; font-weight:700; margin-bottom:0.75rem; letter-spacing:1px; color:var(--accent); }
.footer-col p { color:var(--text-muted); font-size:0.85rem; line-height:1.6; }
.footer-desc { color:var(--text-muted); font-size:0.85rem; line-height:1.6; margin-top:0.5rem; }

.footer-col a:not(.social-link) {
 display: block;
 color: var(--text);
 text-decoration: none;
 font-size: 0.85rem;
 margin-bottom: 0.4rem;
 transition: all 0.2s;
}
.footer-col a:not(.social-link):hover {
 color: var(--accent);
 text-decoration: underline;
 text-underline-offset: 3px;
}

.social-icons a.social-link,
.footer-col a.social-link {
 display: flex !important;
 width: 44px !important;
 height: 44px !important;
 margin-bottom: 0 !important;
 padding: 0 !important;
 font-size: inherit !important;
 text-decoration: none !important;
 color: var(--text) !important;
}

.footer-email { margin-top:1rem; }
.footer-email h4 { margin-bottom:0.4rem; }

.social-icons {
 display: flex;
 gap: 10px;
 margin-top: 1rem;
 flex-wrap: wrap;
}
.social-link {
 width: 42px !important;
 height: 42px !important;
 border-radius: 10px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 background: rgba(var(--accent-rgb),0.08) !important;
 border: 1px solid rgba(var(--accent-rgb),0.25) !important;
 position: relative;
 overflow: hidden;
 transition: all 0.3s ease;
 text-decoration: none !important;
 margin-bottom: 0 !important;
 padding: 0 !important;
 color: var(--text) !important;
 box-sizing: border-box !important;
 flex-shrink: 0;
}
.social-link svg {
 width: 18px !important;
 height: 18px !important;
 fill: #ffffff !important;
 flex-shrink: 0;
 display: block;
 pointer-events: none;
 position: relative;
 z-index: 1;
}
.social-link:hover {
 border-color: var(--accent) !important;
 transform: translateY(-3px);
 text-decoration: none !important;
}
.social-link.instagram:hover {
 background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af) !important;
 border-color: #dd2a7b !important;
 box-shadow: 0 6px 20px rgba(221,42,123,0.45);
}
.social-link.youtube:hover {
 background: #ff0000 !important;
 border-color: #ff0000 !important;
 box-shadow: 0 6px 20px rgba(255,0,0,0.45);
}
.social-link.tiktok:hover {
 background: #111 !important;
 border-color: #00f0ff !important;
 box-shadow: 0 6px 20px rgba(0,240,255,0.35);
}
.social-link::before {
    content: "";
 position: absolute;
 inset: 0;
 border-radius: 10px;
 background: rgba(var(--accent-rgb),0.06);
 transition: opacity 0.3s;
 z-index: 0;
}
.social-link:hover::before { opacity: 0; }

.feature-card {
 display: block;
 position: relative;
 text-align: center;
 max-width: 300px;
 padding: 1.5rem;
 border-radius: 16px;
 background: rgba(20,20,20,0.7);
 border: 1px solid rgba(var(--accent-rgb),0.3);
 transition: transform 0.3s, box-shadow 0.3s;
 text-decoration: none;
 color: inherit;
}
.feature-card:hover {
 transform: translateY(-6px);
 box-shadow: 0 0 20px var(--accent), 0 0 40px rgba(var(--accent-rgb),0.31), 0 0 60px rgba(var(--accent-rgb),0.19);
}

.feature-popup-link {
 display: inline-block;
 margin-top: 0.5rem;
 font-weight: 600;
 text-decoration: none;
 transition: text-shadow 0.3s, transform 0.2s;
}
.feature-popup-link:hover {
 text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
 transform: scale(1.05);
}
.feature-card:hover .feature-popup-link {
 text-shadow: 0 0 15px currentColor, 0 0 30px currentColor, 0 0 45px currentColor;
}

.card-visit-link {
 display: inline-block;
 margin-top: 0.5rem;
 font-weight: 600;
 text-decoration: none;
 transition: text-shadow 0.3s, transform 0.2s;
 pointer-events: none;
}
.feature-card:hover .card-visit-link {
 text-shadow: 0 0 15px currentColor, 0 0 30px currentColor, 0 0 45px currentColor;
}

@media (max-width: 768px) {
 .features-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 1.5rem;
 justify-content: center;
 }
}

.cookie-icon {
 font-size: 1.8rem;
 flex-shrink: 0;
 line-height: 1;
 filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.5));
}

.footer-bottom { padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.1); }
.footer-copy { text-align:center; color:var(--text-muted); font-size:0.8rem; margin-bottom:0.4rem; }
.footer-seo { text-align:center; font-size:0.8rem; color:rgba(255,255,255,0.80); max-width:600px; margin:0 auto; line-height:1.6; }

.scroll-top {
 position:fixed; right:25px; bottom:25px;
 width:45px; height:45px;
 border-radius:50%;
 display:flex; align-items:center; justify-content:center;
 background:rgba(var(--accent-rgb),0.15);
 border:1px solid rgba(var(--accent-rgb),0.5);
 backdrop-filter:blur(6px);
 color:var(--accent); font-size:18px;
 text-decoration:none; cursor:pointer;
 z-index:9999;
 opacity:0; visibility:hidden; transform:translateY(20px);
 transition:all 0.3s ease;
}
.scroll-top:hover { background:var(--accent); color:#111; box-shadow:0 0 15px rgba(var(--accent-rgb),0.6); }
.scroll-top.show { opacity:1; visibility:visible; transform:translateY(0); }

.cookie-banner {
 position:fixed; bottom:0; left:0; right:0;
 background:rgba(20,20,20,0.98);
 border-top:1px solid rgba(var(--accent-rgb),0.2);
 padding:1rem 1.5rem;
 z-index:1000;
 transform:translateY(100%); transition:transform 0.3s;
}
.cookie-banner.show { transform:translateY(0); }
.cookie-inner {
 max-width:1200px; margin:0 auto;
 display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;
}
.cookie-icon {
 font-size:1.2rem;
 flex-shrink:0;
}
.cookie-text strong { display:block; margin-bottom:0.2rem; font-size:0.9rem; }
.cookie-text p { color:var(--text-muted); font-size:0.85rem; }
.cookie-btns { display:flex; gap:0.5rem; margin-left:auto; flex-shrink:0; }
.btn-reject {
 padding:0.5rem 1rem;
 background:rgba(255,255,255,0.1);
 border:1px solid rgba(255,255,255,0.2);
 border-radius:8px; color:var(--text);
 font-weight:600; font-size:0.8rem; cursor:pointer;
}
.btn-accept {
 padding:0.5rem 1rem;
 background:var(--accent); border:none;
 border-radius:8px; color:var(--bg);
 font-weight:700; font-size:0.8rem; cursor:pointer;
}

.modal-overlay {
 position:fixed; inset:0;
 background:rgba(0,0,0,0.8);
 display:flex; align-items:center; justify-content:center;
 z-index:2000;
 opacity:0; visibility:hidden; transition:all 0.3s;
}
.modal-overlay.active { opacity:1; visibility:visible; }
.modal {
 background:var(--bg-card);
 border:1px solid rgba(var(--accent-rgb),0.3);
 border-radius:12px;
 max-width:560px; width:90%; max-height:80vh;
 overflow:hidden; position:relative;
}
.modal-close {
 position:absolute; top:1rem; right:1rem;
 width:36px; height:36px;
 background:rgba(255,255,255,0.1); border:none;
 color:var(--text); font-size:1.5rem;
 cursor:pointer; border-radius:50%;
 display:flex; align-items:center; justify-content:center;
}
.modal-body { padding:2.5rem; overflow-y:auto; max-height:70vh; }
.modal-body h2 { color:var(--accent); margin-bottom:1rem; }
.modal-body p { color:var(--text-muted); line-height:1.7; }
.modal-content { font-size:0.85rem; line-height:1.6; color:rgba(255,255,255,0.75); }
.modal-content h2 { font-size:1rem; margin-bottom:0.8rem; letter-spacing:1px; color:var(--text); }
.modal-content h3 { font-size:0.85rem; margin:1rem 0 0.4rem; color:var(--accent); }
.modal-content p { margin-bottom:0.6rem; }
.update-date { font-size:0.75rem; opacity:0.5; margin-bottom:1rem; }

.popup-overlay {
 position:fixed; inset:0;
 background:rgba(0,0,0,0.7);
 display:none; justify-content:center; align-items:center;
 z-index:10000;
}
.popup-content {
 background:rgba(20,20,20,0.95);
 border:2px solid var(--accent);
 border-radius:16px; padding:2rem;
 max-width:440px; width:90%;
 color:var(--text); text-align:center;
 position:relative;
 box-shadow:0 0 20px rgba(var(--accent-rgb),0.3), 0 0 40px rgba(var(--accent-rgb),0.15);
 display:none;
 animation:popupAppear 0.3s ease;
}
@keyframes popupAppear {
 from { transform:scale(0.8); opacity:0; }
 to { transform:scale(1); opacity:1; }
}
.popup-icon { font-size:2rem; margin-bottom:0.5rem; }
.popup-content h3 { color:var(--accent); margin-bottom:0.5rem; }
.popup-content p { font-size:0.9rem; line-height:1.5; color:rgba(255,255,255,0.85); }
.popup-close {
 position:absolute; top:10px; right:12px;
 font-size:1.3rem; cursor:pointer;
 color:var(--accent); background:none; border:none;
 line-height:1; transition:text-shadow 0.3s;
}
.popup-close:hover { text-shadow:0 0 10px var(--accent), 0 0 20px rgba(var(--accent-rgb),0.5); }

.page-main { padding-top:0; }

.section-social { text-align:center; margin-top:3rem; }
.section-social-icons { display:flex; justify-content:center; gap:1rem; }
.social-btn {
 width:48px; height:48px; border-radius:12px;
 background:rgba(255,255,255,0.06);
 display:flex; align-items:center; justify-content:center;
 color:var(--text-muted);
 border:1px solid rgba(255,255,255,0.08);
 transition:all 0.3s ease; text-decoration:none;
}
.social-btn svg { width:22px; height:22px; }
.social-btn:hover {
 transform:translateY(-4px); color:var(--accent); border-color:var(--accent);
 box-shadow:0 0 12px rgba(var(--accent-rgb),0.6), 0 0 25px rgba(var(--accent-rgb),0.3);
}

@media (max-width: 900px) {

 .stats-grid { grid-template-columns: repeat(2,1fr); }
 .culture-grid { grid-template-columns: 1fr; }
 .footer-grid { grid-template-columns: 1fr 1fr; }

 .features-grid { grid-template-columns: repeat(2,1fr); }

 .nav-toggle { display: flex; }

 .nav {
 flex: unset !important;
 justify-content: flex-start !important;
 position: fixed;
 top: 0; left: 0;
 width: 78%;
 max-width: 290px;
 height: 100dvh;
 background: rgba(5,5,5,0.98);
 backdrop-filter: blur(16px);
 flex-direction: column !important;
 align-items: flex-start !important;
 padding: 0 0 2rem 0 !important;
 gap: 0 !important;
 transform: translateX(-100%);
 transition: transform 0.35s ease;
 z-index: 1100;
 overflow-y: auto;
 overflow-x: hidden;
 }
 .nav.open { transform: translateX(0); }

 .mobile-top {
 display: block !important;
 width: 100%;
 padding: 1.25rem 1.5rem 1rem;
 border-bottom: 1px solid rgba(var(--accent-rgb),0.15);
 margin-bottom: 0.75rem;
 flex-shrink: 0;
 }
 .mobile-top a {
 display: inline-block;
 text-decoration: none;
 }
 .mobile-top a:hover .mobile-logo {
 opacity: 0.85;
 }

 .nav-link {
 display: block !important;
 width: 100%;
 font-size: 13px !important;
 font-weight: 600 !important;
 letter-spacing: 1px !important;
 padding: 11px 1.5rem !important;
 border-bottom: 1px solid rgba(255,255,255,0.06) !important;
 color: var(--text-muted) !important;
 text-decoration: none !important;
 white-space: normal;
 background: transparent;
 }
 .nav-link:hover,
 .nav-link.active {
 color: var(--accent) !important;
 text-decoration: none !important;
 background: rgba(var(--accent-rgb),0.05) !important;
 }

 .btn-live {
 display: block !important;
 width: calc(100% - 3rem) !important;
 margin: 0.75rem 1.5rem 0 !important;
 padding: 0.75rem 1rem !important;
 text-align: center !important;
 font-size: 0.95rem !important;
 }

 .nav-social {
 display: flex !important;
 padding: 1rem 1.5rem 0 !important;
 margin-top: 1rem !important;
 border-top: 1px solid rgba(255,255,255,0.08) !important;
 gap: 12px;
 }
}

@media (max-width: 768px) {

 .form-row { grid-template-columns: 1fr; }
 .cookie-inner { flex-direction: row; align-items: flex-start; flex-wrap: nowrap; }
 .cookie-text { flex: 1; }
 .cookie-icon { font-size: 1rem; margin-top: 2px; }

 .cookie-btns { margin-left: 0; flex-direction: column-reverse; align-self: center; }

 .player-wrap { width:180px; height:180px; }
 .play-btn { width:110px; height:110px; }
 .ripple { width:120px; height:120px; }
 .sound-waves .w5,
 .sound-waves .w6 { display:none; }

 .live-row {
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 }
 .live-box { padding: 12px 10px; }
 .box-header { font-size: 12px; }
 .box-header span { font-size: 11px; }
 .box-header svg { width:13px; height:13px; }
 .box-value { font-size:12px; }
 .live-history-wrapper { margin-top:12px; }
 #song-history li { font-size:12px; }

 .features-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 480px) {

 .stats-grid { grid-template-columns: 1fr; }
 .footer-grid { grid-template-columns: 1fr; }

 .live-row { grid-template-columns: 1fr; }

 .features-grid { grid-template-columns: 1fr; }

 .culture-grid { grid-template-columns: 1fr; }

 .player-wrap { width:160px; height:160px; }
 .play-btn { width:100px; height:100px; }
 .ripple { width:100px; height:100px; }
 .ripple span { font-size:0.5rem; }

 .listeners-card { flex-direction:column; padding:1.25rem; }
}

@media (min-width: 901px) {

 .nav {
 position: static !important;
 transform: none !important;
 height: auto !important;
 width: auto !important;
 max-width: none !important;
 background: none !important;
 backdrop-filter: none !important;
 box-shadow: none !important;
 flex-direction: row !important;
 align-items: center !important;
 justify-content: center !important;
 flex: 1 !important;
 gap: 10px !important;
 padding: 0 !important;
 overflow: visible !important;
 }

 .nav-link {
 display: inline !important;
 width: auto !important;
 font-size: 11px !important;
 padding: 6px 7px !important;
 border-bottom: none !important;
 background: transparent !important;
 white-space: nowrap;
 }

 .btn-live {
 display: inline-block !important;
 width: auto !important;
 margin: 0 !important;
 padding: 0.4rem 0.85rem !important;
 }

 .nav-overlay,
 .nav-toggle,
 .mobile-top,
 .nav-social { display: none !important; }
}
@media (max-width: 768px) {

 .live-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 }

 .live-box {
 padding: 12px 10px;
 border-radius: 12px;
 min-width: unset;
 }

 .box-header span {
 font-size: 13px;
 }

 .box-header svg {
 width: 15px;
 height: 15px;
 }

 .box-value {
 font-size: 14px;
 margin-top: 6px;
 }

 .live-history-wrapper {
 margin-top: 15px;
 }

 .history-box {
 width: 100%;
 }

 #song-history li {
 font-size: 12.5px;
 padding: 4px 0;
 justify-content: center;
 }

 .history-art {
 width: 16px;
 height: 16px;
 }
}

.volume-control {
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 gap: 6px;
 margin-top: 8px;
 position: relative;
}

.volume-btn {
 background: rgba(var(--accent-rgb),0.12);
 border: 1px solid rgba(var(--accent-rgb),0.35);
 border-radius: 50%;
 width: 36px;
 height: 36px;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 color: var(--accent);
 cursor: pointer;
 -webkit-transition: all 0.2s ease;
 transition: all 0.2s ease;
 flex-shrink: 0;
 padding: 0;
}
.volume-btn:hover {
 background: rgba(var(--accent-rgb),0.25);
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
 box-shadow: 0 0 8px rgba(var(--accent-rgb),0.4);
}
.volume-btn:focus {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}

.volume-slider-wrap {
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 gap: 5px;
 overflow: hidden;
 max-width: 0;
 opacity: 0;
 -webkit-transition: max-width 0.35s ease, opacity 0.3s ease;
 transition: max-width 0.35s ease, opacity 0.3s ease;
 pointer-events: none;
}
.volume-slider-wrap.open {
 max-width: 130px;
 opacity: 1;
 pointer-events: auto;
}

.volume-slider {
 -webkit-appearance: none;
 appearance: none;
 width: 80px;
 height: 3px;
 border-radius: 2px;
 background: rgba(255,255,255,0.2);
 outline: none;
 cursor: pointer;
 -webkit-transition: background 0.2s;
 transition: background 0.2s;
 flex-shrink: 0;
}
.volume-slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 11px;
 height: 11px;
 border-radius: 50%;
 background: var(--accent);
 cursor: pointer;
 box-shadow: 0 0 5px rgba(var(--accent-rgb),0.6);
 -webkit-transition: transform 0.15s ease;
 transition: transform 0.15s ease;
}
.volume-slider::-moz-range-thumb {
 width: 11px;
 height: 11px;
 border-radius: 50%;
 background: var(--accent);
 cursor: pointer;
 border: none;
 box-shadow: 0 0 5px rgba(var(--accent-rgb),0.6);
}
.volume-slider::-webkit-slider-thumb:hover {
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}

.volume-value {
 font-size: 0.58rem;
 color: var(--text-muted);
 font-weight: 600;
 min-width: 24px;
 text-align: right;
 white-space: nowrap;
}

.volume-btn.muted svg path {
 opacity: 0.4;
}

.bg-video-wrap {
 background: linear-gradient(135deg, #0a0a0a 0%, #111 40%, #0f0a00 100%);
}

@supports not (backdrop-filter: blur(1px)) {
 .header { background: rgba(10,10,10,0.98) !important; }
 .nav { background: rgba(5,5,5,0.99) !important; }
 .cookie-banner{ background: rgba(20,20,20,0.99) !important; }
}

@media screen and (min-width: 1920px) {
 body { font-size: 18px; }
 .nav-link { font-size: 13px !important; }
 .hero-title { font-size: clamp(5rem, 10vw, 9rem); }
 .hero-desc { font-size: 1.15rem; }
 .section-social-title { font-size: clamp(1.5rem, 3vw, 2.5rem); }
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}

audio { display: none !important; }

.tp-overlay {
 position: fixed;
 inset: 0;
 z-index: 20000;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0,0,0,0.85);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.35s ease, visibility 0.35s ease;
}
.tp-overlay.tp-visible {
 visibility: visible;
 opacity: 1;
}

.tp-card {
 position: relative;
 width: min(90vw, 360px);
 background: #0e0e0e;
 border-radius: 24px;
 padding: 2.25rem 2rem 1.75rem;
 text-align: center;
 overflow: hidden;

 box-shadow:
 0 0 0 1px rgba(var(--accent-rgb),0.25),
 0 0 80px rgba(var(--accent-rgb),0.1),
 0 40px 80px rgba(0,0,0,0.7);
 transform: scale(0.84) translateY(30px);
 opacity: 0;
 transition:
 transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
 opacity 0.4s ease;
}
.tp-overlay.tp-visible .tp-card {
 transform: scale(1) translateY(0);
 opacity: 1;
}

.tp-card::before {
    content: '';
 position: absolute;
 inset: 0;
 background:
 radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--accent-rgb),0.1) 0%, transparent 60%),
 radial-gradient(ellipse 50% 40% at 50% 100%, rgba(var(--accent-rgb),0.05) 0%, transparent 60%);
 pointer-events: none;
}

.tp-card::after {
    content: '';
 position: absolute;
 top: 0; left: -100%; right: auto;
 width: 100%; height: 2px;
 background: linear-gradient(90deg, transparent, #ffad1e, transparent);
 animation: tp-scanline 2.5s ease-in-out infinite;
}
@keyframes tp-scanline {
 0% { left: -100%; }
 100% { left: 100%; }
}

.tp-close {
 position: absolute;
 top: 0.9rem; right: 0.9rem;
 width: 28px; height: 28px;
 border: 1px solid rgba(255,255,255,0.12);
 border-radius: 50%;
 background: rgba(255,255,255,0.05);
 color: rgba(255,255,255,0.45);
 font-size: 0.7rem;
 cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 transition: background 0.2s, color 0.2s, border-color 0.2s;
 line-height: 1;
 padding: 0;
}
.tp-close:hover {
 background: rgba(var(--accent-rgb),0.15);
 color: #ffad1e;
 border-color: rgba(var(--accent-rgb),0.4);
}

.tp-glow-ring {
 width: 72px; height: 72px;
 margin: 0 auto 1.1rem;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(var(--accent-rgb),0.15) 0%, transparent 70%);
 border: 1.5px solid rgba(var(--accent-rgb),0.3);
 display: flex; align-items: center; justify-content: center;
 position: relative;
 animation: tp-ring-pulse 2.8s ease-in-out infinite;
}
@keyframes tp-ring-pulse {
 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.25); }
 50% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb),0); }
}

.tp-main-icon {
 font-size: 2rem;
 line-height: 1;
 filter: drop-shadow(0 0 8px rgba(var(--accent-rgb),0.6));
}

.tp-live-chip {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 background: rgba(255,60,60,0.12);
 border: 1px solid rgba(255,60,60,0.3);
 color: #ff5f5f;
    font-family: 'Bebas Neue', 'Arial Narrow', Arial Black, Arial, sans-serif;
 font-size: 0.65rem;
 letter-spacing: 2px;
 padding: 0.25rem 0.6rem;
 border-radius: 100px;
 margin-bottom: 1rem;
}
.tp-live-dot {
 width: 6px; height: 6px;
 border-radius: 50%;
 background: #ff5f5f;
 animation: tp-blink 1.1s ease-in-out infinite;
}
@keyframes tp-blink {
 0%,100% { opacity: 1; }
 50% { opacity: 0.2; }
}

.tp-title {
    font-family: 'Bebas Neue', 'Arial Narrow', Arial Black, Arial, sans-serif;
 font-size: 1.7rem;
 letter-spacing: 4px;
 color: #fff;
 margin: 0 0 0.6rem;
 text-shadow: 0 0 25px rgba(var(--accent-rgb),0.2);
}

.tp-text {
 font-size: 0.875rem;
 line-height: 1.75;
 color: rgba(255,255,255,0.6);
 margin: 0 0 1.75rem;
}
.tp-text strong { color: #ffad1e; font-weight: 600; }

.tp-btn {
 display: block;
 width: 100%;
 padding: 0.82rem 1rem;
 border: none;
 border-radius: 14px;
 background: linear-gradient(135deg, #ffad1e 0%, #d98800 100%);
 color: #0a0a0a;
    font-family: 'Bebas Neue', 'Arial Narrow', Arial Black, Arial, sans-serif;
 font-size: 1.05rem;
 letter-spacing: 3px;
 font-weight: 700;
 cursor: pointer;
 position: relative;
 overflow: hidden;
 transition: transform 0.18s, box-shadow 0.2s;
}
.tp-btn-text { position: relative; z-index: 1; }

.tp-btn::before {
    content: '';
 position: absolute;
 top: 0; left: -120%;
 width: 80%; height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
 transition: left 0.45s ease;
}
.tp-btn:hover::before { left: 140%; }
.tp-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 28px rgba(var(--accent-rgb),0.5);
}
.tp-btn:active { transform: translateY(0); box-shadow: none; }

.player-controls-row {
 display: flex;
 align-items: flex-end;
 justify-content: center;
 gap: 12px;
 margin-top: 1.1rem;
}

.volume-control {
 position: relative;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
}

.volume-popup {
 position: absolute;
 bottom: calc(100% + 8px);
 left: 50%;
 transform: translateX(-50%) translateY(6px);
 background: rgba(10,10,10,0.96);
 border: 1px solid rgba(var(--accent-rgb),0.3);
 border-radius: 14px;
 padding: 14px 12px 10px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
 z-index: 300;
 box-shadow: 0 -6px 24px rgba(0,0,0,0.55);
 min-width: 46px;
}
.volume-popup.open {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateX(-50%) translateY(0);
}

#volumeSlider {
 writing-mode: vertical-lr;
 direction: rtl;
 width: 6px;
 height: 72px;
 accent-color: var(--accent);
 cursor: pointer;
 outline: none;
 background: rgba(255,255,255,0.18);
 border-radius: 3px;
}
#volumeSlider::-webkit-slider-thumb {
 -webkit-appearance: none;
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: var(--accent);
 cursor: pointer;
 box-shadow: 0 0 6px rgba(var(--accent-rgb),0.7);
}
#volumeSlider::-moz-range-thumb {
 width: 14px; height: 14px;
 border-radius: 50%;
 background: var(--accent);
 border: none;
 cursor: pointer;
}

.mute-btn.muted {
 background: rgba(255,60,60,0.15) !important;
 border-color: rgba(255,60,60,0.5) !important;
 color: #ff5f5f !important;
}

.share-wrap {
 position: relative;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
}
.share-btn { background: rgba(var(--accent-rgb),0.1); border-color: rgba(var(--accent-rgb),0.3); }
.share-popup {
 position: absolute;
 bottom: calc(100% + 8px);
 left: 50%;
 transform: translateX(-50%) translateY(6px);
 background: rgba(10,10,10,0.97);
 border: 1px solid rgba(var(--accent-rgb),0.25);
 border-radius: 12px;
 padding: 6px;
 min-width: 168px;
 display: flex;
 flex-direction: column;
 gap: 2px;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
 z-index: 300;
 box-shadow: 0 -4px 20px rgba(0,0,0,0.6);
}
.share-popup.open {
 opacity: 1; visibility: visible;
 pointer-events: auto;
 transform: translateX(-50%) translateY(0);
}
.share-item {
 display: flex; align-items: center; gap: 9px;
 padding: 8px 11px; border-radius: 8px;
 color: rgba(255,255,255,0.8); text-decoration: none;
 font-size: 0.78rem; font-weight: 500;
 transition: background .15s, color .15s;
 background: none; border: none; cursor: pointer;
 width: 100%; text-align: left; font-family: inherit;
}
.share-item:hover { background: rgba(var(--accent-rgb),0.12); color: var(--accent); }

.footer-platforms {
 display: flex; flex-wrap: wrap;
 justify-content: center; gap: 8px;
 padding: 1rem 0 0.5rem;
}
.platform-link {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 5px 13px; border-radius: 20px;
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(255,255,255,0.1);
 color: rgba(255,255,255,0.65); text-decoration: none;
 font-size: 0.75rem; font-weight: 500;
 transition: all .2s;
}
.platform-link:hover {
 border-color: var(--accent); color: var(--accent);
 background: rgba(var(--accent-rgb),0.08); transform: translateY(-2px);
}
#platform-spotify:hover { border-color:#1DB954; color:#1DB954; background:rgba(29,185,84,0.1); }
#platform-youtubemusic:hover { border-color:#FF0000; color:#FF0000; background:rgba(255,0,0,0.1); }
#platform-applemusic:hover { border-color:#fc3c44; color:#fc3c44; background:rgba(252,60,68,0.1); }
#platform-deezer:hover { border-color:#a238ff; color:#a238ff; background:rgba(162,56,255,0.1); }
#platform-soundcloud:hover { border-color:#ff5500; color:#ff5500; background:rgba(255,85,0,0.1); }

.footer-backlinks {
 display: flex; flex-wrap: wrap;
 justify-content: center; gap: 6px;
 padding: 0.25rem 0 0.5rem;
}
.footer-backlink-item {
 display: inline-flex; align-items: center;
 padding: 3px 11px; border-radius: 12px;
 background: rgba(255,255,255,0.07);
 border: 1px solid rgba(255,255,255,0.18);
 color: rgba(255,255,255,0.75); text-decoration: none;
 font-size: 0.7rem; transition: all .2s;
}
.footer-backlink-item:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),0.3); }

.bg-overlay {
 position: absolute; inset: 0; z-index: 1;
 background: linear-gradient(180deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0.90) 100%);
}

.broadcast-message {
 margin: 1rem 0;
 padding: 0.85rem 1.25rem;
 background: rgba(255, 173, 30, 0.12);
 border-left: 3px solid var(--accent);
 border-radius: 6px;
 color: var(--text);
 font-size: 0.9rem;
 line-height: 1.6;
 animation: broadcastSlideIn 0.4s ease;
 overflow: hidden;
 transition: opacity 0.3s ease, max-height 0.4s ease;
}
.broadcast-message[style*="display:none"],
.broadcast-message[style*="display: none"] {
 animation: none;
}
@keyframes broadcastSlideIn {
 from { opacity: 0; transform: translateY(-8px); }
 to { opacity: 1; transform: translateY(0); }
}

.btn-pwa-install:hover {
 background: rgba(255, 173, 30, 0.28);
 border-color: var(--accent);
}
.btn-pwa-install svg {
 flex-shrink: 0;
}
@media (max-width: 480px) {
 .btn-pwa-install span { display: none; }

}

@media (max-width: 768px) {
 html.mobile-fullscreen-player .player-zone {
 position: relative;
 }
 html.mobile-fullscreen-player .player-wrap {
 width: 180px;
 height: 180px;
 }
 html.mobile-fullscreen-player .play-btn {
 width: 110px;
 height: 110px;
 }
 html.mobile-fullscreen-player .play-btn svg {
 width: 48px;
 height: 48px;
 }

 html.mobile-fullscreen-player .hero {
 min-height: 100dvh;
 padding-bottom: 2rem;
 }

 html.mobile-fullscreen-player body {
 padding-bottom: env(safe-area-inset-bottom, 0px);
 }
}

@media (max-width: 768px) {
 html.no-mobile-fullscreen .player-wrap {
 width: 90px;
 height: 90px;
 }
 html.no-mobile-fullscreen .play-btn {
 width: 60px;
 height: 60px;
 }
}

@media (display-mode: standalone) {

 body {
 padding-top: env(safe-area-inset-top, 0px);
 }

 .scroll-top {
 display: flex !important;
 opacity: 0.85;
 }

 .footer {
 padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
 }
}

.pwa-banner-inner {
 display: flex;
 align-items: center;
 gap: 12px;
 max-width: 600px;
 margin: 0 auto;
}
.pwa-banner-icon {
 width: 48px;
 height: 48px;
 border-radius: 12px;
 flex-shrink: 0;
}
.pwa-banner-text {
 flex: 1;
 min-width: 0;
}
.pwa-banner-text strong {
 display: block;
 color: #fff;
 font-size: 0.9rem;
 font-weight: 600;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.pwa-banner-text span {
 display: block;
 color: rgba(255,255,255,0.55);
 font-size: 0.78rem;
 margin-top: 1px;
}
.pwa-banner-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}
.pwa-banner-btn-yes {
 background: var(--accent, #ffad1e);
 color: #000;
 border: none;
 border-radius: 8px;
 padding: 8px 16px;
 font-size: 0.8rem;
 font-weight: 700;
 letter-spacing: 0.5px;
 cursor: pointer;
    font-family: var(--font-display, "Bebas Neue", Arial, sans-serif);
 transition: opacity 0.15s;
}
.pwa-banner-btn-yes:hover { opacity: 0.85; }
.pwa-banner-btn-no {
 background: none;
 border: none;
 color: rgba(255,255,255,0.4);
 font-size: 1.1rem;
 cursor: pointer;
 padding: 6px 8px;
 line-height: 1;
 transition: color 0.15s;
}
.pwa-banner-btn-no:hover { color: rgba(255,255,255,0.8); }

.rr-ad-wrap {
 display: block;
 width: 100%;
 text-align: center;
 margin: 1.5rem auto;
 max-width: 970px;
 padding: 0 1rem;
 position: relative;
 clear: both;
}
.rr-ad-wrap .rr-ad-label {
 display: block;
 font-size: 0.6rem;
 color: rgba(255,255,255,0.25);
 letter-spacing: 2px;
 text-transform: uppercase;
 margin-bottom: 4px;
 text-align: center;
    font-family: var(--font-body, 'Inter', sans-serif);
}
.rr-ad-wrap ins.adsbygoogle {
 background: rgba(255,255,255,0.02);
 border-radius: 6px;
 min-height: 90px;
}

.rr-ad-adSlotHero {
 margin-top: 0;
 margin-bottom: 0;
 padding: 1rem;
 background: rgba(0,0,0,0.3);
 border-top: 1px solid rgba(255,255,255,0.04);
 border-bottom: 1px solid rgba(255,255,255,0.04);
}

.rr-ad-adSlotBetweenSections {
 margin: 2rem auto;
 padding: 1.5rem 1rem;
 background: rgba(255,173,30,0.02);
 border-radius: 12px;
 border: 1px solid rgba(255,173,30,0.08);
}

.rr-ad-adSlotSidebarRight {
 max-width: 320px;
 background: rgba(255,255,255,0.02);
 border-radius: 10px;
 padding: 0.5rem;
 border: 1px solid rgba(255,255,255,0.06);
}

.rr-ad-adSlotBeforeFooter {
 margin: 0 auto 0;
 padding: 1.25rem 1rem;
 background: rgba(0,0,0,0.25);
 border-top: 1px solid rgba(255,255,255,0.05);
}

@media (max-width: 768px) {
 .rr-ad-no-mobile { display: none !important; }
 .rr-ad-adSlotSidebarRight { float: none !important; margin: 1rem auto !important; }
}

.request-btn {
 position: relative;
 color: var(--accent);
 border: 1px solid rgba(var(--accent-rgb),0.3);
 background: rgba(var(--accent-rgb),0.08);
 border-radius: 50%;
 width: 38px;
 height: 38px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.request-btn:hover {
 background: rgba(var(--accent-rgb),0.2);
 border-color: rgba(var(--accent-rgb),0.6);
 transform: scale(1.08);
}

.rr-modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.78);
 z-index: 9000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1rem;
 animation: rrFadeIn 0.2s ease;
}
@keyframes rrFadeIn { from { opacity:0; } to { opacity:1; } }

.rr-modal-box {
 background: #141414;
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: 14px;
 width: 100%;
 max-width: 420px;
 box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--accent-rgb),0.15);
 animation: rrSlideUp 0.22s ease;
 overflow: hidden;
}
@keyframes rrSlideUp { from { transform:translateY(16px);opacity:0; } to { transform:none;opacity:1; } }

.rr-modal-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 1.1rem 1.25rem 0.9rem;
 border-bottom: 1px solid rgba(255,255,255,0.07);
 background: rgba(var(--accent-rgb),0.05);
}
.rr-modal-title-wrap {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 color: var(--accent);
}
.rr-modal-title-wrap h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.rr-modal-close {
 background: none;
 border: none;
 color: rgba(255,255,255,0.5);
 font-size: 1.4rem;
 cursor: pointer;
 line-height: 1;
 padding: 0.2rem;
 transition: color 0.15s;
}
.rr-modal-close:hover { color: #fff; }

.rr-modal-body { padding: 1.25rem; }
.rr-modal-desc { font-size: 0.825rem; color: rgba(255,255,255,0.55); margin-bottom: 1.25rem; }

.rr-form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.rr-form-group label { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.4px; }
.rr-req { color: #ef4444; }
.rr-opt { color: rgba(255,255,255,0.3); font-size: 0.7rem; text-transform: none; font-weight: 400; }

.rr-form-group input,
.rr-form-group textarea {
 width: 100%;
 padding: 0.65rem 0.875rem;
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: 8px;
 color: #fff;
 font-size: 0.875rem;
 font-family: inherit;
 transition: border-color 0.2s, box-shadow 0.2s;
 resize: vertical;
}
.rr-form-group input:focus,
.rr-form-group textarea:focus {
 outline: none;
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12);
}

.rr-form-error {
 background: rgba(239,68,68,0.1);
 border: 1px solid rgba(239,68,68,0.25);
 color: #fca5a5;
 padding: 0.6rem 0.875rem;
 border-radius: 7px;
 font-size: 0.825rem;
 margin-bottom: 0.75rem;
}
.rr-form-actions { margin-top: 0.5rem; }
.rr-btn-submit {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 padding: 0.75rem 1rem;
 background: var(--accent);
 color: #000;
 border: none;
 border-radius: 8px;
 font-size: 0.9rem;
 font-weight: 700;
 cursor: pointer;
 transition: background 0.2s, transform 0.1s;
 font-family: inherit;
}
.rr-btn-submit:hover { background: #e69a0a; }
.rr-btn-submit:active { transform: scale(0.98); }
.rr-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.rr-req-success {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.5rem;
 padding: 1.5rem 0;
 text-align: center;
 animation: rrFadeIn 0.25s ease;
}
.rr-success-icon { font-size: 2.5rem; animation: rrBounce 0.4s ease; }
@keyframes rrBounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.rr-req-success h4 { font-size: 1.1rem; font-weight: 700; color: #22c55e; }
.rr-req-success p { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; }

.request-ticker-wrap {
 overflow: hidden;
 background: rgba(var(--accent-rgb),0.04);
 border: 1px solid rgba(var(--accent-rgb),0.2);
 border-radius: 16px;
 padding: 0.55rem 0;
}
.request-ticker {
 display: flex;
 white-space: nowrap;
 animation: tickerScroll 35s linear infinite;
 width: max-content;
}
.request-ticker:hover { animation-play-state: paused; }
.request-ticker-item {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0 2rem;
 font-size: 0.78rem;
 color: rgba(255,255,255,0.55);
}
.request-ticker-item .ticker-name { color: var(--accent); font-weight: 600; }
.request-ticker-item .ticker-note { color: rgba(255,255,255,0.3); font-size: 0.7rem; }
.request-ticker-item .ticker-msg { color: rgba(255,173,30,0.75); font-style: italic; font-size: 0.76rem; }
.request-ticker-sep {
 display: inline-flex;
 align-items: center;
 padding: 0 1rem;
 color: rgba(var(--accent-rgb),0.3);
 font-size: 0.7rem;
}
@keyframes tickerScroll {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
}

#dj-broadcast-info {
 margin-bottom: 1rem;
 padding-bottom: 1rem;
 border-bottom: 1px solid rgba(255,255,255,0.07);
}
.broadcast-info-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
}
.bc-info-item {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 background: rgba(var(--accent-rgb),0.07);
 border: 1px solid rgba(var(--accent-rgb),0.15);
 border-radius: 8px;
 padding: 0.5rem 0.875rem;
 font-size: 0.8rem;
}
.bc-info-label {
 color: var(--accent);
 font-weight: 700;
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}
.bc-info-val { color: rgba(255,255,255,0.85); }

.bc-note {
 margin-top: 0.75rem;
 padding: 0.6rem 0.875rem;
 background: rgba(255,255,255,0.04);
 border-left: 3px solid var(--accent);
 border-radius: 0 6px 6px 0;
 font-size: 0.825rem;
 color: rgba(255,255,255,0.7);
 line-height: 1.6;
}

#djOfflineWarning {
 position: fixed;
 bottom: 1.5rem;
 left: 50%;
 transform: translateX(-50%);
 z-index: 800;
 animation: djOfflineFadeIn .35s ease;
 pointer-events: none;
}
@keyframes djOfflineFadeIn {
 from { opacity: 0; transform: translateX(-50%) translateY(12px); }
 to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.dj-offline-inner {
 display: flex;
 align-items: center;
 gap: .75rem;
 background: rgba(15,15,20,.95);
 border: 1px solid rgba(239,100,50,.35);
 border-radius: 12px;
 padding: .75rem 1.25rem;
 font-size: .82rem;
 color: rgba(255,200,150,.9);
 backdrop-filter: blur(12px);
 box-shadow: 0 4px 24px rgba(0,0,0,.4);
 white-space: nowrap;
}
.dj-offline-inner svg {
 color: rgba(239,130,60,.85);
 flex-shrink: 0;
}
@media (max-width: 600px) {
 .dj-offline-inner { white-space: normal; font-size: .78rem; }
}

.bc-info-link {
 color: inherit;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 3px;
 transition: color .15s;
}
.bc-info-link:hover { color: var(--accent); }
.bc-info-link svg { opacity: .6; flex-shrink: 0; }

#request-ticker-section {
 margin-bottom: 0.75rem;
 border-radius: 16px;
 overflow: hidden;
}

/* ============================================================
   BİLDİRİM İZİN PROMPT
   ============================================================ */
#notif-prompt {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 9000;
    width: min(420px, calc(100vw - 2rem));
    background: var(--bg-card, #1a1a1a);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.55);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
    opacity: 0;
}
#notif-prompt.notif-prompt-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.notif-prompt-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
}
.notif-prompt-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
}
.notif-prompt-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.notif-prompt-text strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    word-break: break-word;
}
.notif-prompt-text span {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
    word-break: break-word;
}
.notif-prompt-btns {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    justify-content: flex-end;
}
.notif-btn {
    padding: 0.45rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.notif-btn:hover { opacity: 0.85; }
.notif-btn-deny {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.65);
}
.notif-btn-allow {
    background: var(--accent, #ffad1e);
    color: #000;
}