@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

body{
  margin:0;
  font-family:"Poppins", sans-serif;
  color:#222;
  overflow-x:hidden;
}

/* ================= LOADING ================= */
#preloader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#ffffff;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.spinner{
  width:60px;
  height:60px;
  border:6px solid #00a86b;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

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

/* ================= NAVBAR ================= */
.navbar{
  position:sticky;
  top:0;
  width:100%;
  padding:14px 0;
  text-align:center;
  font-weight:700;
  color:#fff;
  backdrop-filter:blur(12px);
  background:rgba(0,0,0,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  z-index:10;
}

/* ================= PARALLAX ================= */
.parallax{
  position:fixed;
  width:100%;
  height:100%;
  z-index:-1;
}

.layer1{
  width:100%;
  height:100%;
  position:absolute;
  background:linear-gradient(180deg,#dff4ff,#ffffff);
}

.layer2{
  position:absolute;
  width:130%;
  height:130%;
  top:-10%;
  left:-10%;
  background:radial-gradient(circle,#7ed7ff 0%, transparent 60%);
  filter:blur(40px);
  opacity:.6;
}

.layer3{
  position:absolute;
  width:130%;
  height:130%;
  background:
    radial-gradient(circle,#ffe169 0%, transparent 50%) 20% 30% / 260px 260px no-repeat,
    radial-gradient(circle,#ffd23f 0%, transparent 50%) 70% 60% / 300px 300px no-repeat,
    radial-gradient(circle,#fff3b0 0%, transparent 50%) 40% 80% / 240px 240px no-repeat;
  opacity:.9;
}

/* ================= GLASS ================= */
.glass{
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.4);
  border-radius:18px;
}

/* ================= HEADER ================= */
.header{
  text-align:center;
  width:85%;
  margin:90px auto 20px;
  padding:25px;
  box-shadow:0 30px 60px rgba(0,0,0,.2);
}

.logo{
  width:120px;
  border-radius:50%;
  box-shadow:0 15px 30px rgba(0,0,0,.3);
}

/* ================= SECTION ================= */
.section{
  width:85%;
  margin:25px auto;
  padding:20px;
  box-shadow:0 30px 60px rgba(0,0,0,.25);
}

/* BUTTON SOSIAL MEDIA */
.menu{display:flex;flex-direction:column;gap:12px;}
.btn{
  display:block;
  padding:12px;
  border-radius:14px;
  color:white;
  text-decoration:none;
  text-align:center;
  font-weight:700;
  transition:.3s;
}
.btn:hover{
  transform:scale(1.06);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.tiktok{background:#000;}
.youtube{background:#ff0000;}
.instagram{background:linear-gradient(45deg,#ff9d00,#ff008c,#5d00ff);}

/* SUPPORT */
.supportBtn{
  display:block;
  background:#FFD93D;
  padding:12px;
  border-radius:14px;
  text-align:center;
  text-decoration:none;
  color:#000;
  font-weight:700;
}

/* ================= BIBIT ================= */
.bibitBox{border:2px solid #00a86b;}
.bibitLogo{width:130px;display:block;margin:auto;}
.bibitTitle{text-align:center;color:#00a86b;}
.bibitSub{text-align:center;color:#444;}

/* TABLE */
.bibitTable{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:12px;
}
.bibitTable th{
  background:#00a86b;
  color:white;
  padding:8px;
}
.bibitTable td{
  background:white;
  padding:8px;
  border-bottom:1px solid #ddd;
}
.bibitTable tr:hover td{background:#dfffe9;}
.status{color:#00a86b;font-weight:700}

/* CHART */
.chart{
  height:120px;
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:flex-end;
}
.bar{
  width:22%;
  background:#00a86b;
  border-radius:10px;
  transform:scaleY(0);
  transform-origin:bottom;
  transition:1s;
}
.chartTitle{text-align:center;color:#00a86b}

/* ================= BUTTON BIBIT BAWAH ================= */
.bibitButtons{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:15px;
  flex-wrap:wrap;
}
.bibitBtn2{
  padding:12px 18px;
  border-radius:14px;
  text-decoration:none;
  background:rgba(0,168,107,0.8);
  color:white;
  font-weight:700;
  transition:all .3s;
  box-shadow:0 8px 25px rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
}
.bibitBtn2:hover{ transform:scale(1.05); background:rgba(0,168,107,1);}
.bibitBtn2.yellow{background:rgba(255,217,61,0.8); color:#000;}
.bibitBtn2.yellow:hover{background:rgba(255,217,61,1);}

/* ================= SCROLL ANIMATION ================= */
.fadeSlide{opacity:0; transform:translateY(40px); transition:1.1s;}
.fadeSlide.show{opacity:1; transform:translateY(0);}