*{box-sizing:border-box}

body{
  font-family:'Segoe UI',sans-serif;
  margin:0;
  color:#fff;
  line-height:1.6;
  background: linear-gradient(-45deg, #252b44, #203a43, #2c5364, #1c1c1c);
  background-size: 400% 400%;
  animation: gradientBG 12s ease infinite;
}


/* animasi background */
@keyframes gradientBG {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}





/* NAV */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  background:#203a43;
  position:sticky;
  top:0;
  z-index:1000;
}
.nav a{
  color:#fff;
  text-decoration:none;
  margin-left:15px;
  opacity:.85;
}
.nav a:hover{opacity:1}

/* HERO */
.hero{
  padding:70px 20px;
  text-align:center;
  background:linear-gradient(135deg,#203a43,#2c5364);
}
.hero h1{
  font-size:1.8em;
  margin-bottom:10px;
}
@media(min-width:768px){
  .hero h1{font-size:1.5em;}
}
.hero p{
  opacity:.9;
  margin-bottom:20px;
}

.btn{
  display:inline-block;
  margin:10px;
  padding:14px 28px;
  border-radius:30px;
  text-decoration:none;
  font-weight:bold;
  transition:all 0.3s ease;
}

/* WA */
.btn-wa{
  background:#00c853;
  color:#fff;
  animation:pulse 2s infinite;
}



.btn-promo{
  background:#ff5722;
  color:#fff;
  animation: promoGabung 1.8s infinite;
  position: relative;
}

@keyframes promoGabung {
  0%   { transform: scale(1) rotate(0deg); }
  15%  { transform: scale(1.1) rotate(-2deg); }
  30%  { transform: scale(1.05) rotate(2deg); }
  45%  { transform: scale(1.1) rotate(-1deg); }
  60%  { transform: scale(1.05) rotate(1deg); }
  75%  { transform: scale(1.08) rotate(-1deg); }
  90%  { transform: scale(1.05) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}



/* HOVER efek (pas disentuh / mouse) */
.btn:hover{
  transform:scale(1.1);
  box-shadow:0 0 20px rgba(0,0,0,0.4);
}

/* ANIMASI HALUS */
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.05)}
  100%{transform:scale(1)}
}

@keyframes pulse2{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

.note{
  font-size:14px;
  opacity:0.7;
}

/* TRUST */
.trust{
  max-width:600px;
  margin:20px auto;
  padding:20px;
  background: rgba(255,255,255,0.04);
  border-radius:12px;
  color:#fff;
  text-align:left;
}

/* tiap poin */
.trust p{
  margin:10px 0;
  padding:10px 12px;
  border-left:3px solid #00ffcc;
  background: rgba(255,255,255,0.03);
  border-radius:6px;
  transition:0.3s;
  .trust p:hover{
    transform: translateX(5px);
  }
}

/* ikon ceklis */
.check{
  color:#00ffcc;
  margin-right:8px;
  font-weight:bold;
}

/* efek halus */
.trust p:hover{
  transform: translateX(5px);
  background: rgba(0,255,200,0.08);
}







/* SECTION tetap */
.section{
  padding:40px 20px;
  text-align:center;
}

/* BOX dasar */
.box{
  position: relative;
  background: rgba(255,255,255,.06);
  margin: 15px auto;
  padding: 20px;
  border-radius: 15px;
  max-width: 600px;
  color:#fff;
  overflow: hidden;
}

/* 🔲 GARIS KELILING (nyala terus) */
.box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:15px;
  padding:2px;

  background: linear-gradient(90deg,#00ffcc,#00aaff,#00ffcc);
  background-size:300%;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;

  animation: borderMuter 4s linear infinite;
}

/* ⚡ PETIR */
.box::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:15px;
  padding:2px;

  background:
    linear-gradient(115deg,
      transparent 45%,
      rgba(255,255,255,0.9) 48%,
      rgba(0,255,255,0.8) 50%,
      rgba(255,255,255,0.9) 52%,
      transparent 55%
    ),
    linear-gradient(65deg,
      transparent 46%,
      rgba(255,255,255,0.7) 49%,
      rgba(0,255,200,0.7) 50%,
      rgba(255,255,255,0.7) 51%,
      transparent 54%
    );

  background-size:300% 100%;
  background-repeat:no-repeat;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;

  filter: blur(0.5px) brightness(1.4);
  opacity:0.6;

  animation: petirJalan 3s linear infinite;
}

/* ✨ saat disentuh → lebih wow */
.box:hover::before{
  animation-duration:1s; /* lebih cepat = lebih hidup */
  filter: brightness(1.8) blur(0.5px);

}

.box:hover::after{
  animation-duration:1s;
  opacity:1;
  filter: blur(1px) brightness(1.8);
}

/* animasi */
@keyframes borderMuter{
  0%{background-position:0%}
  100%{background-position:300%}
}

@keyframes petirJalan{
  0%   {background-position:-200% 50%; opacity:0;}
  10%  {opacity:1;}
  50%  {background-position:100% 50%; opacity:1;}
  100% {background-position:200% 50%; opacity:0;}
}

/* CTA */
.cta{
  background:#ff5722;
  padding:40px 20px;
  text-align:center;
}

/* FLOAT WA */
.wa-float{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#25d366;
  color:rgb(240, 236, 234);
  padding:15px;
  border-radius:50%;
  text-decoration:none;
  font-size:25px;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
}

/* FOOTER */
footer{
  padding:20px;
  text-align:center;
  font-size:.85em;
  opacity:.7;
}


#jam{
  letter-spacing:1px;
  animation:fade 2s infinite;
}

@keyframes fade{
  0%,100%{opacity:0.6}
  50%{opacity:1}
}

.testi{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:10px;
}

.testi img{
  width:120px;
  border-radius:10px;
  cursor:pointer;
  transition:0.3s;
}

.testi img:hover{
  transform:scale(1.1);
}

/* POPUP */
#popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  display:none;
  justify-content:center;
  align-items:center;
}

#popup img{
  max-width:90%;
  max-height:90%;
  border-radius:10px;
}
/* cuaca */
#cuaca img{
  width:100px;
}

/* admin berkedip */
#status-admin.blink {
  animation: kedip 1s infinite;
}

@keyframes kedip {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}

/* ===== LED STATUS PREMIUM ===== */
#status-admin {
  display: flex;
  justify-content: center;  /* ⬅️ bikin ke tengah */
  align-items: center;      /* ⬅️ sejajar vertikal */
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.9;
  text-align: center;
}

/* titik LED */
.led{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#00c853;
  box-shadow:0 0 6px rgba(0,200,83,0.7),
             0 0 12px rgba(0,200,83,0.5);
  transition:all 0.3s ease;
}

/* efek glow berdenyut */
.status.blink .led{
  animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow{
  0%{
    transform:scale(1);
    box-shadow:0 0 6px rgba(0,200,83,0.7),
               0 0 12px rgba(0,200,83,0.5);
  }
  50%{
    transform:scale(1.2);
    box-shadow:0 0 10px rgba(0,255,100,1),
               0 0 20px rgba(0,255,100,0.9);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 6px rgba(0,200,83,0.7),
               0 0 12px rgba(0,200,83,0.5);
  }
}

/* warna status */
.status.hijau .led{
  background:#00c853;
  box-shadow:0 0 6px rgba(0,200,83,0.7),
             0 0 12px rgba(0,200,83,0.5);
}

.status.oranye .led{
  background:orange;
  box-shadow:0 0 6px rgba(255,165,0,0.7),
             0 0 12px rgba(255,165,0,0.5);
}

.status.merah .led{
  background:red;
  box-shadow:0 0 6px rgba(255,0,0,0.7),
             0 0 12px rgba(255,0,0,0.5);
}

/* kontak dan lokasi */
.kontak{
  max-width:600px;
  margin:auto;
  text-align:left;
  
}

/* tiap baris */
.kontak .item{
  display:flex;
  align-items:center;
  gap:10px;

  

  background: rgba(255,255,255,0.04);
  padding:12px 15px;
  margin:10px 0;
  border-radius:10px;

  color:#fff;
  font-size:14px;

  border-left:3px solid #00ffcc;
  transition:0.3s;
}

/* ikon */
.kontak .icon{
  font-size:16px;
}

/* efek halus */
.kontak .item:hover{
  transform: translateX(5px);
  background: rgba(0,255,200,0.08);
}

/* khusus hari libur */
.kontak .tutup{
  border-left:3px solid #ff5252;
  color:#ffb3b3;
}
.kontak a.item{
  text-decoration: none;
  color: #fff;
  display: flex;
}