/* ===== Araf Bdix Playlist — style2675.css ===== */

:root{
  --bg: #05070a;
  --bg-glow-blue: #1c3a8f;
  --bg-glow-grey: #2b303a;
  --glass: rgba(255,255,255,0.045);
  --glass-border: rgba(255,255,255,0.09);
  --glass-strong: rgba(255,255,255,0.07);
  --text: #eef1f6;
  --text-dim: #93a0b3;
  --text-faint: #5b6576;
  --accent: #3B7BFF;
  --accent-soft: #7fa6ff;
  --accent-grey: #6b7280;
  --danger-live: #ff4d5e;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-display: 'Playfair Display', serif;
  --font-head: 'Syne', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

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

html{scroll-behavior:smooth;}

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

/* ambient glow backdrop */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(60% 40% at 18% 8%, rgba(59,123,255,0.16), transparent 60%),
    radial-gradient(50% 35% at 85% 12%, rgba(107,114,128,0.14), transparent 65%),
    radial-gradient(70% 50% at 50% 100%, rgba(59,123,255,0.10), transparent 60%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;
}

.wrap{max-width:640px;margin:0 auto;padding:0 22px;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(5,7,10,0.55);
  border-bottom:1px solid var(--glass-border);
}
.nav-inner{
  max-width:640px;margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);}
.brand img{width:30px;height:30px;display:block;}
.brand-name{font-family:var(--font-head);font-weight:700;letter-spacing:0.02em;font-size:15px;}
.brand-name span{color:var(--accent-soft);}
.nav-link{
  font-family:var(--font-head);font-size:12.5px;letter-spacing:0.08em;
  color:var(--text-dim);text-decoration:none;
  border:1px solid var(--glass-border);
  padding:8px 14px;border-radius:100px;
  transition:all .25s ease;
  white-space:nowrap;
}
.nav-link:hover{color:var(--text);border-color:rgba(59,123,255,0.5);background:rgba(59,123,255,0.08);}

/* ---------- HERO ---------- */
.hero{padding:56px 0 30px;text-align:center;position:relative;}
.live-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 18px;border-radius:100px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  font-family:var(--font-head);font-size:11.5px;letter-spacing:0.16em;
  color:var(--text-dim);
  backdrop-filter:blur(10px);
}
.live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--danger-live);
  box-shadow:0 0 0 0 rgba(255,77,94,.6);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,77,94,.55);}
  70%{box-shadow:0 0 0 9px rgba(255,77,94,0);}
  100%{box-shadow:0 0 0 0 rgba(255,77,94,0);}
}

.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(42px,11vw,64px);
  letter-spacing:-0.01em;
  margin:22px 0 10px;
  line-height:1.02;
}
.hero h1 .hl{
  color:var(--accent-soft);
  background:linear-gradient(120deg,#7fa6ff,#3B7BFF 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.tag{
  font-size:15px;color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);
}
.tag .bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px;}
.tag .bars i{width:3px;background:var(--accent);display:block;border-radius:2px;animation:eq 1.1s ease-in-out infinite;}
.tag .bars i:nth-child(1){height:5px;animation-delay:.1s;}
.tag .bars i:nth-child(2){height:11px;animation-delay:.3s;}
.tag .bars i:nth-child(3){height:8px;animation-delay:.5s;}
@keyframes eq{0%,100%{transform:scaleY(0.5);}50%{transform:scaleY(1);}}

/* ---------- SECTION LABEL ---------- */
.section{padding:26px 0;}
.section-label{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-head);font-size:12px;letter-spacing:0.22em;
  color:var(--accent-soft);
  margin-bottom:16px;
}
.section-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg, var(--glass-border), transparent);}

/* ---------- GLASS CARD ---------- */
.glass-card{
  background: var(--glass);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding:22px;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
}
.glass-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}

/* link row */
.link-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:14px 16px;
}
.link-row code{
  flex:1;
  font-family:'SF Mono','JetBrains Mono',monospace;
  font-size:13px;
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.copy-btn{
  display:flex;align-items:center;gap:7px;
  background:var(--accent);
  color:#fff;border:none;
  padding:10px 16px;border-radius:10px;
  font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:0.05em;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease;
  white-space:nowrap;
}
.copy-btn:hover{background:#2f68e6;}
.copy-btn:active{transform:scale(0.95);}
.copy-btn.copied{background:#22c55e;}
.copy-btn svg{width:15px;height:15px;}

.hint{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:14px;color:var(--text-dim);font-size:13.5px;line-height:1.5;
}
.hint svg{flex-shrink:0;margin-top:2px;width:16px;height:16px;color:var(--accent-soft);}

/* ---------- PLAYER CARD ---------- */
.player-card{text-align:center;}
.player-icon{
  width:82px;height:82px;border-radius:22px;
  margin:4px auto 18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.player-icon img{width:100%;height:100%;object-fit:cover;display:block;}
.player-card h3{
  font-family:var(--font-head);font-weight:700;font-size:21px;
  margin-bottom:8px;
}
.meta-row{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-bottom:22px;
}
.ver-badge{
  background:rgba(59,123,255,0.15);
  color:var(--accent-soft);
  border:1px solid rgba(59,123,255,0.3);
  font-family:var(--font-head);font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:8px;
}
.meta-row span.desc{color:var(--text-faint);font-size:13px;}

.btn-stack{display:flex;flex-direction:column;gap:10px;}
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 20px;border-radius:14px;
  font-family:var(--font-head);font-weight:700;font-size:14.5px;letter-spacing:0.02em;
  text-decoration:none;
  transition:transform .18s ease, opacity .2s ease;
}
.btn:active{transform:scale(0.97);}
.btn svg{width:17px;height:17px;}
.btn-primary{
  background:#eef1f6;color:#0a0c10;
}
.btn-primary:hover{opacity:0.92;}
.btn-outline{
  background:transparent;
  border:1px solid var(--glass-border);
  color:var(--text);
}
.btn-outline:hover{border-color:rgba(59,123,255,0.5);background:rgba(59,123,255,0.07);}

/* ---------- SOCIAL ---------- */
.social-list{display:flex;flex-direction:column;gap:10px;}
.social-item{
  display:flex;align-items:center;gap:14px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:16px 18px;
  text-decoration:none;color:var(--text);
  backdrop-filter:blur(18px);
  transition:all .22s ease;
}
.social-item:hover{border-color:rgba(59,123,255,0.4);background:rgba(59,123,255,0.06);transform:translateX(3px);}
.social-item .icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);
  flex-shrink:0;
}
.social-item .icon svg{width:19px;height:19px;}
.social-item .label{font-family:var(--font-head);font-weight:700;font-size:14.5px;flex:1;}
.social-item .arrow{color:var(--text-faint);width:16px;height:16px;}

/* ---------- FOOTER ---------- */
footer{
  padding:44px 0 60px;
  text-align:center;
  border-top:1px solid var(--glass-border);
  margin-top:20px;
}
.footer-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;}
.footer-logo img{width:24px;height:24px;}
.footer-logo span{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--text-dim);}
footer .credit{color:var(--text-faint);font-size:12.5px;line-height:1.8;}
footer .credit a{color:var(--accent-soft);text-decoration:none;}
footer .credit a:hover{text-decoration:underline;}
footer .brands{
  display:flex;gap:8px;justify-content:center;margin:12px 0 14px;flex-wrap:wrap;
}
footer .brands span{
  font-family:var(--font-head);font-size:10.5px;letter-spacing:0.1em;
  color:var(--text-faint);
  border:1px solid var(--glass-border);
  padding:5px 10px;border-radius:100px;
}

@media (min-width:520px){
  .btn-stack{flex-direction:row;}
}