html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; 
  }

  body { font-family: 'DM Sans', sans-serif; background-color: #171124; color: #F4EFFF; }
/* Bikin semua judul otomatis rapat & elegan */
h1, h2, h3, h4 { 
  font-family: 'DM Serif Display', serif; 
  font-weight: normal; 
  tracking-tighter: -0.05em; /* Tambahkan ini secara manual atau via tailwind */
}

/* Standarisasi deskripsi agar tidak 'bolong-bolong' */
.description-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300; /* font-light */
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 1.625; /* leading-relaxed */
}

  .progress {
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(244,239,255,0.25);
    border-radius: 999px;
    outline: none;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
  }

@media (max-width: 768px) {
  nav .hidden.md\:flex {
    display: flex !important; 
    gap: 12px; /* Jarak antar huruf inisial yang lebih manusiawi */
    font-size: 13px;
    font-weight: 800;
    margin-left: auto; 
    padding-right: 0; /* Biar sejajar dengan margin container */
    align-items: center;
  }
  
  /* Perkecil padding navbar di mobile agar tidak terlalu tebal */
  nav .max-w-7xl {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vinyl-wrapper { perspective: 1000px; }

.vinyl-record {
  transition: transform 0.5s ease;
  box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.05);
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  border-radius: 50%;
}

.vinyl-record::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0,
    transparent 2px,
    rgba(244, 239, 255, 0.04) 3px
  );
  pointer-events: none;
  z-index: 2;
}

.vinyl-image {
  animation: spin 5s linear infinite;
  animation-play-state: paused; 
}

.is-playing .vinyl-image {
  animation-play-state: running; 
}

.vinyl-center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #171124;
  border-radius: 50%;
  z-index: 10;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}



/* ============================================================
   2. BENTO GRID SYSTEM (3 Variasi: Mobile, Tablet, Desktop)
   ============================================================ */
.story-grid {
  display: grid;
  gap: 16px;
  grid-auto-flow: dense;
  /* Default Mobile: 2 Kolom */
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 160px;
}



.story-item {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #111111;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);

box-shadow:
0 30px 80px rgba(0,0,0,.25),
0 0 60px rgba(0,229,255,.15);

border:none;

transition:.35s;

overflow:hidden;

}

/* --- VARIASI 1: MOBILE (Portrait/Asymmetric) --- */
@media (max-width: 639px) {
  .story-grid {
    grid-auto-rows: 120px !important; /* Turunkan dari 160px ke 120px atau 130px */
  }

  .story-item { grid-column: span 1 !important; grid-row: span 1 !important; }
  
  /* Pola Kiri Tall */
  .story-item:nth-child(6n + 1) { grid-row: span 2 !important; }
  /* Pola Kanan Tall */
  .story-item:nth-child(6n + 3) { grid-column: 2 !important; grid-row: span 2 !important; }
}

/* --- VARIASI 2: TABLET (Square/Medium) --- */
@media (min-width: 640px) {
  .story-grid {
    grid-template-columns: repeat(6, 1fr); 
    grid-auto-rows: 180px;
    gap: 20px;
  }
  .story-item.item-xxxlarge { grid-column: span 7 !important; grid-row: span 2 !important; }
  .story-item.item-xxlarge { grid-column: span 7 !important; grid-row: span 2 !important; }
  .story-item.item-xlarge { grid-column: span 4 !important; grid-row: span 2 !important; }
  .story-item.item-large { grid-column: span 3 !important; grid-row: span 2 !important; }
  .story-item.item-tall  { grid-column: span 2 !important; grid-row: span 2 !important; }
  .story-item.item-xtall  { grid-column: span 2 !important; grid-row: span 2 !important; }
  .story-item.item-xwide  { grid-column: span 4 !important; grid-row: span 1 !important; }  
  .story-item.item-wide  { grid-column: span 4 !important; grid-row: span 1 !important; }  
  .story-item.item-medium  { grid-column: span 3 !important; grid-row: span 1 !important; }
  .story-item.item-small { grid-column: span 2 !important; grid-row: span 1 !important; }
  .story-item.item-xsmall { grid-column: span 2 !important; grid-row: span 1 !important; }
}

/* --- VARIASI 3: DESKTOP (Wide/Bento Full) --- */
@media (min-width: 1024px) {
  .story-grid {
    grid-template-columns: repeat(15, 1fr); 
    grid-auto-rows: 220px;
    gap: 24px;
  }
  .story-item.item-xxxlarge { grid-column: span 11 !important; grid-row: span 2 !important; }
  .story-item.item-xxlarge { grid-column: span 9 !important; grid-row: span 2 !important; }
  .story-item.item-xlarge { grid-column: span 8 !important; grid-row: span 2 !important; }
  .story-item.item-large { grid-column: span 6 !important; grid-row: span 2 !important; }
  .story-item.item-tall  { grid-column: span 4 !important; grid-row: span 2 !important; }
  .story-item.item-xtall  { grid-column: span 3 !important; grid-row: span 2 !important; }
  .story-item.item-xwide  { grid-column: span 6 !important; grid-row: span 1 !important; }  
  .story-item.item-wide  { grid-column: span 5 !important; grid-row: span 1 !important; }  
  .story-item.item-medium  { grid-column: span 4 !important; grid-row: span 1 !important; }
  .story-item.item-small { grid-column: span 3 !important; grid-row: span 1 !important; }
  .story-item.item-xsmall { grid-column: span 2 !important; grid-row: span 1 !important; }
}

/* --- GAMBAR & OVERLAY SETTINGS --- */
.story-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Animasi zoom mulus */
}

.story-item .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,17,36,0.9) 0%, transparent 70%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* --- INTERAKSI (HOVER & MOBILE TAP) --- */
.story-item:hover .overlay,
.story-item:focus .overlay,
.story-item:active .overlay,
.story-item:focus-within .overlay {
  opacity: 1;
}

.story-item:hover img,
.story-item:focus img,
.story-item:active img,
.story-item:focus-within img {
  transform: scale(1.08); 
}

.dimmed {
  opacity: 0.75;
  transform: scale(0.985);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.player.is-playing {
  transform: scale(1.03);
  box-shadow: 0 0 50px rgba(255, 51, 101, 0.25);
}

.pulse {
  opacity: 0.25;
  transform: scale(0.985);

transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

}




/* ===== LIQUID GLASS CORE ===== */

.liquid-glass{
  position:relative;

  background:linear-gradient(
    145deg,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.08)
  );

  backdrop-filter:blur(45px) saturate(160%);
  -webkit-backdrop-filter:blur(45px) saturate(160%);

  border:5px solid rgba(255,255,255,0.22);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -2px 10px rgba(255,255,255,0.15);

  border-radius:28px;

  overflow:hidden;
}


/* ===== MOVING LIGHT REFLECTION ===== */

.liquid-glass::before{
  content:"";
  position:absolute;
  inset:-200%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );

  transform:rotate(25deg);
  animation:liquidLight 12s linear infinite;

  opacity:.35;
  pointer-events:none;
}

@keyframes liquidLight{

  0%{
    transform:translateX(-60%) rotate(25deg);
  }

  100%{
    transform:translateX(60%) rotate(25deg);
  }

}


/* ===== NEON PLAYER ===== */

.player {
  background: radial-gradient(circle at 30% 20%, #1e1a46, #0d0a22);
  border-radius: 28px;
  padding:28px;
  max-width: 420px;
  transition: all 0.35s ease;
  /* Shadow baru yang lebih elegan */
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5), 
    0 0 40px rgba(0, 229, 255, 0.1); 
}
position:relative;

background: radial-gradient(
circle at top left,
#1b1638,
#0f0c25
);

border-radius:28px;

padding:28px;

box-shadow:
0 30px 80px rgba(0,0,0,.45),
0 0 60px rgba(0,229,255,.15);

border:none;

transition:.35s;

overflow:hidden;
}



box-shadow:
0 40px 120px rgba(0,0,0,.55),
0 0 80px rgba(0,229,255,.25);
}


/* neon highlight */

.player::after{
content:"";
position:absolute;
inset:0;

background:
radial-gradient(
circle at 30% 30%,
rgba(0,229,255,.15),
transparent 60%
);

pointer-events:none;
}


/* vinyl */

.vinyl-wrapper{

width:96px;
height:96px;

border-radius:50%;

overflow:hidden;

box-shadow:
0 0 20px rgba(0,229,255,.45);

background:#000;
}


/* play button */

.play-icon{

background:#121030;

width:44px;
height:44px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

box-shadow:
0 10px 25px rgba(0,0,0,.5),
0 0 15px rgba(255,51,101,.4);

font-size:14px;
}


/* progress */


.progress::-webkit-slider-thumb{

appearance:none;

width:14px;
height:14px;

border-radius:50%;

background:#00E5FF;

box-shadow:
0 0 10px #00E5FF,
0 0 20px #00E5FF;

cursor:pointer;
}

/* ===== NAVBAR ===== */

nav{

  background:rgba(20,20,35,0.35)!important;

  backdrop-filter:blur(50px) saturate(160%);
  -webkit-backdrop-filter:blur(50px) saturate(160%);

  border-bottom:5px solid rgba(255,255,255,0.08);

}


/* ===== EMAIL INPUT ===== */

#email-input{

  background:rgba(255,255,255,0.35)!important;

  backdrop-filter:blur(40px);

  border:5px solid rgba(255,255,255,0.25)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 15px 40px rgba(0,0,0,0.15);

}


/* ===== SUCCESS BOX ===== */

#success-msg{

  background:rgba(255,255,255,0.40)!important;

  backdrop-filter:blur(60px);

  border:5px solid rgba(255,255,255,0.35)!important;

  box-shadow:
    0 40px 120px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.8);

}

@keyframes slowZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.hero-bg {
  animation: slowZoom 25s ease-in-out infinite alternate;
transform: scale(1.02); 
  transform-origin: bottom;
  background-position: center bottom -2px; /* Geser gambar sedikit ke bawah frame */
}
.player:hover .vinyl-record{
transform:scale(1.05);
}

@keyframes floatGlow {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-40px); }
  100% { transform: translateY(0px); }
}

.glow {
  animation: floatGlow 18s ease-in-out infinite;
}

.nav-link{
  position:relative;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:#00E5FF;
  transition:.3s;
}

.nav-link:hover::after{
  width:100%;
}
.vinyl-wrapper:hover .vinyl-record{
  transform:scale(1.08) rotate(3deg);
}

.vinyl-wrapper:hover .play-icon{
  transform:scale(1.2);
}

.play-icon{
  transition:all .3s ease;
}
.hero-glow{
text-shadow:
0 0 20px rgba(255,255,255,.15),
0 0 40px rgba(255,51,101,.2);
}

iframe{
transition:transform .6s ease;
}

iframe:hover{
transform:scale(1.03);
}
.player:hover{
transform:translateY(-8px) scale(1.02);
}

.hero-bg{
transition:transform 20s ease;
}
.player.is-playing{
box-shadow:
0 0 40px rgba(255,51,101,.4),
0 40px 120px rgba(0,0,0,.35);
}
#loader{
transition:opacity .6s ease;
}

/* ===== AURORA LIGHT HERO ===== */

@keyframes auroraMove {
  0% { transform: translateX(-10%) translateY(0) scale(1); }
  50% { transform: translateX(10%) translateY(-20px) scale(1.1); }
  100% { transform: translateX(-10%) translateY(0) scale(1); }
}

.hero-aurora {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 40%, rgba(0,229,255,0.18), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,51,101,0.18), transparent 45%),
    radial-gradient(circle at 50% 20%, rgba(255,157,0,0.18), transparent 40%);
  filter: blur(120px);
  animation: auroraMove 18s ease-in-out infinite;
}
.hero-aurora {
  filter: blur(160px);
}

/* ===== FROSTED NAVBAR ===== */

.glass-panel {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    }
    .glass-input {
      background: rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(8px);
      border: 1px inset rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    }

.navbar-glass{
position:fixed;
top:0;
left:0;
right:0;
z-index:50;

/* blur glass */
backdrop-filter:blur(24px) saturate(160%);
-webkit-backdrop-filter:blur(24px) saturate(160%);

/* gradient tint seperti gambar */
background:
linear-gradient(
90deg,
rgba(255,51,101,.45),
rgba(255,157,0,.25),
rgba(0,229,255,.15)
);

/* subtle glass border */
border-bottom:1px solid rgba(255,255,255,.15);

/* glow halus */
box-shadow:
0 10px 30px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.35);
}

.navbar-glass::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(
to bottom,
rgba(255,255,255,.35),
transparent 60%
);

opacity:.25;
pointer-events:none;
}

/* Efek Neon & Float untuk Social Icons */
.social-icon {
  display: inline-block;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-icon:hover {
  transform: translateY(-8px) scale(1.15); /* Melayang ke atas & sedikit membesar */
  filter: drop-shadow(0 0 12px #FF3365);   /* Efek cahaya neon pink */
}

@keyframes textShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-shimmer {
  background: linear-gradient(
    90deg, 
    #FF3365 0%, 
    #00E5FF 35%, 
    #FF9D00 70%, 
    #FF3365 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: textShimmer 6s ease infinite;
  
  /* SOLUSI BIAR GAK KEPOTONG */
  display: inline-block;
  padding-right: 0.15em; /* Kasih ruang sedikit di kanan */
  margin-right: -0.1em;  /* Tarik balik biar jarak antar kata gak kejauhan */
}

/* Tambahan: Kasih glow tipis di belakang teks biar makin 'glow long after the lights fade' */
.hero-glow {
  filter: drop-shadow(0 0 15px rgba(255, 51, 101, 0.2));
}
@keyframes borderNeon {
  0% { border-color: #FF3365; box-shadow: 0 0 15px rgba(255, 51, 101, 0.4), inset 0 0 10px rgba(255, 51, 101, 0.2); }
  33% { border-color: #00E5FF; box-shadow: 0 0 15px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 229, 255, 0.2); }
  66% { border-color: #FF9D00; box-shadow: 0 0 15px rgba(255, 157, 0, 0.4), inset 0 0 10px rgba(255, 157, 0, 0.2); }
  100% { border-color: #FF3365; box-shadow: 0 0 15px rgba(255, 51, 101, 0.4), inset 0 0 10px rgba(255, 51, 101, 0.2); }
}

.video-glow-frame {
  border: 4px solid #FF3365;
  animation: borderNeon 8s linear infinite;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-glow-frame:hover {
  transform: scale(1.02) translateY(-5px);
  filter: saturate(1.2);
}

/* --- SCROLL REVEAL CORE --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Variasi Reveal dari Samping (opsional buat judul) */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 768px) {
  nav .hidden.md\:flex {
    display: flex !important; 
    gap: 20px; 
    font-size: 14px;
    font-weight: 800;
  }

  /* Menghilangkan garis bawah di mobile agar hanya warna yang berubah */
  .nav-link::after {
    display: none; 
  }
}

/* Warna default dan transisi */
.nav-link {
  color: rgba(244, 239, 255, 0.7);
  transition: color 0.4s ease;
}

.video-glow-frame {
  border: 4px solid #FF3365;
  border-radius: 32px;
  animation: borderNeon 8s linear infinite;
  /* Tambahkan shadow luar di sini */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); 
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}