@font-face{
  font-family:"Inter";
  src:url("../fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* RESET */
html{
  background:#fff;
    -webkit-text-size-adjust:100%;
    width:100%;
    min-height:100dvh;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Inter", sans-serif;
}


body{
  width:100%;
  min-height:100dvh;
  overflow-x:clip;
  margin:0;
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--bg-gradient1);
}
  
img,
iframe{
  max-width:100%;
  height:auto;
  display:block;
}

input,
select,
textarea,
button{
  font-size:16px;
}

#splash{
  position:fixed;
  inset:0;
  background:#91d3ca;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  transition:opacity .5s ease;
}

.splash-logo{
  width:120px;
  height:auto;
  animation:logoIntro 1s ease;
}

@keyframes logoIntro{
  from{
    opacity:0;
    transform:scale(.8);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* APP */
.app{
position:relative;
width:100%;
max-width:768px;
min-height:100dvh;
margin-inline:auto;
overflow-x:clip;
overflow-y:visible;
}

*{
max-width:100%;
}

/* HEADER */
.header{
    position:sticky !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:1000!important;
width:100%;
max-width:768px;
margin:0 auto;
height:50px;
display:flex;
align-items:center;
justify-content:center;
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:blur(12px);
transition:
transform .35s ease,
opacity .35s ease,
background .35s ease;
}

.header.hide-menu .menu-btn{
    display: none;
}

.menu-btn{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
font-size:30px;
background:none;
border:none;
color:white;
  width:25px;
  height:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  z-index:1001;
}

.menu-btn span{
  display:block;
  height:3px;
  width:100%;
  background:white;
  border-radius:10px;
  transition:all 0.3s ease;
}
.menu-btn.active span{
  background:black;
}

/* jadi X */
.menu-btn.active span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}

.menu-btn.active span:nth-child(2){
  opacity:0;
}

.menu-btn.active span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

/* ===========================
   HOME RELEASE BANNER
=========================== */

.home-banner{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  margin-bottom:28px;
  background:#d9d9d9;
  mmargin-top:-10px;
}

.banner-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.banner-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.38) 35%,
    rgba(0,0,0,.08) 65%,
    rgba(0,0,0,0) 100%
  );
}

.banner-content{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  color:#fff;
}

.banner-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-bottom:8px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  font-size:8px;
  font-weight:700;
  letter-spacing:.5px;
}

.banner-badge .live-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ff3b30;
  animation:livePulse 1.6s ease-in-out infinite;
  box-shadow:0 0 8px rgba(255,59,48,.7);
}

@keyframes livePulse{
  0%,100%{
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 8px rgba(255,59,48,.7);
  }
  50%{
    opacity:.3;
    transform:scale(.8);
    box-shadow:0 0 2px rgba(255,59,48,.2);
  }
}

.banner-content h2{
  font-size:16px;
  font-weight:800;
  line-height:1.05;
  margin-bottom:4px;
}

.banner-content p{
  font-size:10px;
  opacity:.92;
  margin-bottom:8px;
}

.banner-buttons{
  display:flex;
  gap:10px;
}

.banner-btn{
  border:none;
  border-radius:12px;
  padding:6px 10px;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.banner-btn.primary{
  background:#91d3ca;
  color:#fff;
}

.banner-btn.secondary{
  background:rgba(255,255,255,.15);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
}

.banner-btn:active{
  transform:scale(.97);
}

/* TITLE HIDE ON SCROLL */
.title-wrap{
transition:.3s ease;
}

.header.hide-title .title-wrap{
opacity:0;
transform:translateY(-10px);
pointer-events:none;
}

/* SIDEBAR */
.sidebar{
position:fixed;
top:0;
left:-260px;
width:250px;
height:100vh;
background:white;
padding:60px 25px;
transition:.3s ease;
z-index:9999;
display:flex;
flex-direction:column;
gap:10px;
  margin-bottom:10px;
}

.sidebar.show{
left:0;
}

/* GROUP */
.menu-group{
display:flex;
flex-direction:column;
gap:10px;
}
  
/* LINK */
.sidebar a{
text-decoration:none;
font-size:16px;
font-weight:600;
color:#111;
transition:.2s ease;
}

/* HOVER */
.sidebar a:hover{
opacity:.6;
transform:translateX(4px);
}

/* DIVIDER */
.menu-divider{
width:80%;
height:1px;
background:rgba(0,0,0,0.08);
margin:10px;
margin-top:20px;
}

.fanbase-section{
  gap:12px;
}

.fanbase-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-left:0;
  margin-top:0;
}

.fanbase-list a{
  font-size:14px;
  font-weight:600;
  color:#444 !important;
  line-height:1.5;
  letter-spacing:.2px;
}

.overlay{
position:fixed;
inset:0;
background:#111;
opacity:0;
pointer-events:none;
transition:.3s;
z-index:9998;
}

.overlay.show{
opacity:1;
pointer-events:auto;
}

/* PAGES */
.page{
display:none;
padding:var(--page-padding);
}

.page.active{
display:block;
}

.sidebar-submenu{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-left:14px;
  margin-top:10px;
}

.sidebar-submenu a{
  display:block;
  font-size:14px !important;
  font-weight:600;
  color:#555 !important;
  line-height:1.4;
}
  
/* =========================
   OFFICIAL SNS
========================= */
.sidebar-title{
  font-size:16px;
  font-weight:600;
  color:#111;
}

.sns-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.sns-link {
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 3px 12px 3px 7px;
  background: #fff;
  border: 2px solid #9bd9d5;
  border-radius: 20px;
  text-decoration: none;
  color: #111;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.sns-link:hover {
  transform: translateX(4px);
  background: #f8ffff;
  border-color: #72c9c3;
}


/* ICON */

.sns-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}

.sns-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* NAMA PLATFORM */

.sns-link span {
  margin-left: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
}


/* ARROW */

.sns-link b {
  margin-left: auto;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-2px);
}

.sns-chevron {
  width: 28px;
  height: 28px;
  margin-left: auto;
  flex-shrink: 0;
}
  
/* HOME CONTENT */

.global-content{
position:relative;
z-index:5;
min-height:auto;
display:flex;
flex-direction:column;
justify-content:flex-start;
}
  
#home{
position:relative;
min-height:100vh;
overflow:hidden;
}
  
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.18);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  min-width: 140px;
  height: 55px;
  box-sizing: border-box;
  transition: transform 0.15s ease;
}

.btn:active {
  transform: scale(0.92);
}

.btn img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;   /* penting biar icon nggak ilang */
}
  
/* BOX */
.box{
margin-bottom:20px;
}

.label{
font-size:13px;
opacity:.6;
margin-bottom:10px;
}

.grid{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:12px;
width:100%;
}

/* BUTTON */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px;
  width:100%;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  color:white;
  text-decoration:none;
  font-size:13px;
  min-width:0;
  transition:transform .15s ease;
}

.btn:active{
  transform:scale(.92);
}

/* ================= OTHER PAGES ================= */

.card{
background:white;
margin:0;
padding:20px;
border-radius:16px;
}

/* ================= BOTTOM NAV ================= */

.bottom-nav{
    position:fixed;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);

    width:calc(100% - 32px);
    max-width:420px;
    height:60px;

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

    background:#f3f4fa;
    border-radius:25px;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    z-index:999;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.bottom-nav button{
    border:none;
    background:none;
    font-size:11px;

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

    cursor:pointer;
    transition:.25s ease;
}

.bottom-nav button.active{
    color:#5DB7AB;
}

.nav-icon{
    width:22px;
    height:22px;
    display:block;
    margin:0 auto 4px;
    opacity:.4;
    transition:.25s;
}

.bottom-nav button.active .nav-icon{
    opacity:1;
    transform:translateY(-2px);
}

.bottom-nav button.active span{
    color:#5DB7AB;
}

.bottom-nav span{
    margin-top:5px;
    font-size:11px;
    color:#91D3CA;
}

.logo{
height:32px;
width:auto;
display:block;
}

/* =========================
   DESKTOP
========================= */

@media (max-width:1024px){
    .app{
        width:100%;
        max-width:768px;
        margin:0 auto;
    }

    .home-banner{
        width:100%;
        max-width:768px;
    }

    /* HEADER SEJAJAR DENGAN CONTENT */
    .header{
        width:100%;
        max-width:768px;
    }

    /* CONTENT */
    .global-content{
        width:100%;
        max-width:768px;
        margin:0 auto;
    }

}