*{box-sizing:border-box}
:root{
  --bg:#08090d;
  --panel:#11131a;
  --text:#fff;
  --muted:#a9adba;
  --purple:#8b2cff;
  --border:rgba(255,255,255,.12);
  --yellow:#ffbd00;
  --orange:#ff7a00;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 50% -10%,rgba(123,36,255,.18),transparent 35%),
    linear-gradient(180deg,#090a10,#0b0c11);
  font-family:Inter,Arial,sans-serif;
}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,calc(100% - 32px));margin:auto}

.hero{
  min-height:155px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  background:#100b19 center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,7,15,.55),rgba(8,7,15,.05),rgba(8,7,15,.55));
}
.hero-inner{position:relative;z-index:2;text-align:center}
.logo{
  font-size:clamp(34px,6vw,64px);
  line-height:.9;
  font-weight:900;
  font-style:italic;
  letter-spacing:-4px;
  text-transform:uppercase;
  text-shadow:0 0 22px rgba(150,50,255,.45);
}
.logo span{
  background:linear-gradient(90deg,#fff,#d8d8df 45%,#a934ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo small{
  display:block;
  font-size:12px;
  letter-spacing:9px;
  color:#b24dff;
  margin-top:10px;
}
.hero-buttons{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.hero-buttons a{
  padding:8px 18px;border-radius:999px;
  font-size:11px;font-weight:800;
  background:linear-gradient(90deg,#5e1fff,#a72cff);
  box-shadow:0 0 20px rgba(126,35,255,.28);
}

.profile{text-align:center;padding:30px 0 22px}
.avatar{
  width:82px;height:82px;border-radius:50%;
  margin:-62px auto 12px;
  border:4px solid #15161d;
  background:#161820 center/cover no-repeat;
  box-shadow:0 0 0 2px #7c29ff,0 0 28px rgba(131,35,255,.5);
  position:relative;z-index:4;
}
.profile h1{font-size:24px;margin:0 0 10px}
.followers{
  display:inline-flex;align-items:center;gap:7px;
  background:#161a43;color:#9d8dff;
  border:1px solid #3431a5;
  padding:7px 13px;border-radius:999px;
  font-size:13px;font-weight:700;
}

/* ===== SOCIALS ===== */
.socials{
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
  margin-top:19px;
}
.social{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#15171f;
  border:1px solid var(--border);
  transition:.2s ease;
  overflow:visible;
  position:relative;
}
.social img{
  width:25px;
  height:25px;
  object-fit:contain;
}
.social:hover{
  transform:translateY(-4px) scale(1.04);
  border-color:#8d35ff;
  box-shadow:0 8px 24px rgba(132,38,255,.22);
}

/* Red pulsing dot (pojok kanan atas) */
.social.live::after{
  content:"";
  position:absolute;
  top:-3px;
  right:-3px;
  width:13px;
  height:13px;
  background:#ff3b30;
  border:2.5px solid #0f1016;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,59,48,.6);
  animation:live-pulse 1.6s infinite;
  z-index:5;
}

/* Tulisan LIVE (bawah ikon) */
.live-badge{
  display:none;
  position:absolute;
  bottom:-9px;
  left:50%;
  transform:translateX(-50%);
  background:#ff3b30;
  color:#fff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.4px;
  padding:1px 5px;
  border-radius:4px;
  line-height:1.3;
  white-space:nowrap;
  z-index:5;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.social.live .live-badge{
  display:block;
}

@keyframes live-pulse{
  0%{
    transform:scale(.92);
    box-shadow:0 0 0 0 rgba(255,59,48,.65);
  }
  70%{
    transform:scale(1);
    box-shadow:0 0 0 7px rgba(255,59,48,0);
  }
  100%{
    transform:scale(.92);
    box-shadow:0 0 0 0 rgba(255,59,48,0);
  }
}

/* ===== PARTNER BANNER ===== */
.partner{
  display:block;
  margin:14px 0 28px;
  border:1px solid #9c31ff;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 0 28px rgba(133,32,255,.20);
  background:#111;
}
.partner img{display:block;width:100%;height:auto}

.section-title{
  display:flex;align-items:center;gap:10px;
  margin:0 0 16px;
  font-size:20px;font-weight:800;
}
.products{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  padding-bottom:45px;
}
.card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#181a22,#101116);
  border-radius:11px;
  transition:.2s ease;
}
.card:hover{
  transform:translateY(-5px);
  border-color:#9236ff;
  box-shadow:0 14px 32px rgba(0,0,0,.35),0 0 20px rgba(135,39,255,.13);
}
.cover{
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
  background:#171922;
}
.cover img{
  width:100%;height:100%;
  display:block;object-fit:cover;
  transition:transform .25s ease;
}
.card:hover .cover img{transform:scale(1.045)}
.discount{
  position:absolute;top:0;right:0;z-index:2;
  background:var(--orange);color:#fff;
  padding:5px 8px;border-radius:0 0 0 8px;
  font-size:12px;font-weight:800;
}
.info{padding:10px 10px 11px}
.name{font-size:13px;font-weight:700;line-height:1.25;min-height:33px}
.meta{margin-top:8px;font-size:11px;color:var(--muted)}
.rating{color:var(--yellow);font-weight:700}
.divider{opacity:.4;margin:0 5px}

footer{
  text-align:center;color:#777b88;font-size:11px;
  padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.06)
}

@media(max-width:1050px){.products{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){
  .container{width:min(100% - 18px,1200px)}
  .hero{min-height:125px}
  .logo{font-size:38px}
  .logo small{font-size:8px;letter-spacing:6px}
  .products{grid-template-columns:repeat(2,1fr);gap:10px}
  .profile{padding-top:24px}
  .avatar{width:72px;height:72px;margin-top:-48px}
  .profile h1{font-size:21px}
  .socials{gap:9px}
  .social{width:38px;height:38px}
  .social img{width:22px;height:22px}
  .live-badge{font-size:7px;padding:1px 4px;bottom:-8px}
  .partner{border-radius:10px;margin-top:8px}
}