:root{
  --bg:#070712;
  --accent:#7a6cff;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);

  /* LEBIH TRANSPARAN */
  --cardBg:rgba(255,255,255,.08);
  --playerBg:rgba(255,255,255,.06);

  --border:rgba(255,255,255,.12);
  --softBorder:rgba(255,255,255,.08);

  --btn:rgba(122,108,255,.12);
  --btnHover:rgba(122,108,255,.22);
  --btnBorder:rgba(122,108,255,.30);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);

  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(7,7,18,.45), rgba(7,7,18,.65)),
    var(--bg-image);
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
}

/* WRAP */
.wrap{
  min-height:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:90px 14px 40px;
}

/* CARD */
.card{
  width:min(980px,94vw);
  padding:24px 24px 20px;
  border-radius:22px;
  background:var(--cardBg);
  border:1px solid var(--border);
  box-shadow:0 25px 60px rgba(0,0,0,.45);
  text-align:center;
}

/* TOP */
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:18px;
}

/* SOCIAL */
.social{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:250px;
}

.social__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  font-size:15px;

  background:rgba(122,108,255,.10);
  border:1px solid rgba(122,108,255,.25);
  transition:.15s ease;
}

.social__item:hover{
  transform:translateX(6px);
  background:rgba(122,108,255,.18);
  border-color:rgba(122,108,255,.40);
}

.social__icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(10,10,20,.35);
  border:1px solid var(--softBorder);
  flex:0 0 auto;
}

.social__label{font-weight:500}

/* AVATAR */
.avatar-wrap{position:relative; flex:0 0 auto;}

.avatar-ring{
  width:200px;
  height:200px;
  padding:7px;
  border-radius:999px;
  background:conic-gradient(from 90deg, rgba(122,108,255,.95), rgba(122,108,255,.15), rgba(122,108,255,.95));
  filter:drop-shadow(0 0 18px rgba(122,108,255,.35));
}

.avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
}

.avatar-glow{
  position:absolute;
  inset:-22px;
  border-radius:999px;
  background:radial-gradient(circle at center, rgba(122,108,255,.25), transparent 65%);
  z-index:-1;
}

/* NAME */
.name{
  margin:0 0 10px;
  font-size:clamp(36px,6vw,58px);
  color:var(--accent);
  text-shadow:0 12px 28px rgba(122,108,255,.30);
}

/* GREET */
.greet{
  margin:0 0 24px;
  font-size:19px;
  font-weight:500;
  line-height:1.5;
  color:rgba(255,255,255,.88);
}

.greet__sub{
  display:block;
  font-size:16px;
  margin-top:4px;
  color:rgba(255,255,255,.74);
}

/* PLAYER */
.player{
  width:min(780px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "meta controls"
    "viz  viz"
    "hint hint";
  gap:10px 14px;
  padding:14px 16px;
  border-radius:18px;
  background:var(--playerBg);
  border:1px solid var(--border);
}

.player__meta{
  grid-area:meta;
  text-align:left;
  min-width:0;
}

.player__title{
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.player__sub{
  font-size:12px;
  color:var(--muted);
}

.player__controls{
  grid-area:controls;
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:2;
}

/* BUTTONS */
.pbtn{
  width:38px;
  height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid var(--btnBorder);
  background:var(--btn);
  color:#fff;
  cursor:pointer;
  transition:.15s ease;
}

.pbtn:hover{
  transform:translateY(-1px);
  background:var(--btnHover);
}

.pbtn--play{
  width:44px;
  height:44px;
  background:rgba(122,108,255,.25);
}

/* VIZ */
.player__viz{
  grid-area:viz;
  padding-top:6px;
  position:relative;
  z-index:1;
  pointer-events:none;
}

#viz{
  display:block;
  width:100%;
  height:90px;
  border-radius:14px;

  /* lebih soft, ga terlalu hitam */
  background:rgba(0,0,0,.22);
  border:1px solid var(--softBorder);
}

/* HINT */
.player__hint{
  grid-area:hint;
  text-align:center;
  font-size:15px;
  font-weight:500;
  color:rgba(255,255,255,.78);
  min-height:18px;
  margin-top:4px;
}

/* FOOTER */
.footer{
  position:fixed;
  bottom:12px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
}

.footer__bio{
  padding:10px 16px;
  border-radius:999px;
  font-size:12px;
  background:rgba(0,0,0,.14);
  border:1px solid var(--softBorder);
  color:rgba(255,255,255,.6);
}

/* RESPONSIVE */
@media (max-width:720px){
  .wrap{padding:70px 14px 40px;}
  .top{gap:14px}

  .social{width:min(54vw,190px); gap:10px;}
  .social__item{padding:8px 12px; font-size:13px;}
  .social__icon{width:30px;height:30px;}

  .avatar-ring{width:150px;height:150px;}

  .name{font-size:32px;}
  .greet{font-size:17px;}

  .player{
    grid-template-columns:1fr;
    grid-template-areas:
      "meta"
      "controls"
      "viz"
      "hint";
  }

  .player__controls{justify-content:center;}
  #viz{height:78px;}
}

@media (prefers-reduced-motion: reduce){
  .social__item, .pbtn{transition:none;}
}