body {margin:0;font-family:'Orbitron',Arial,sans-serif;background:#0b0b0f;color:#eee;line-height:1.6;overflow-x:hidden;}
h1,h2,h3 {font-family:'Orbitron',sans-serif;text-transform:uppercase;}

/* Header */
header {position:relative;text-align:center;color:#fff;overflow:hidden;height:420px;}
header canvas {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
header .overlay {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:1;}
header img.logo {max-width:260px;margin-bottom:20px;filter:drop-shadow(0 0 20px #ffcc00);}
header h1 {font-size:2.5rem;margin:0;color:#ffcc00;text-shadow:0 0 20px #ff8800;}
header p {font-size:1.2rem;color:#00e5ff;text-shadow:0 0 15px #00e5ff;}

/* Breadcrumb */
nav.breadcrumb {max-width:1000px;margin:20px auto;padding:0 20px;font-size:0.9rem;}
nav.breadcrumb a {color:#ffcc00;text-decoration:none;margin-right:5px;}
nav.breadcrumb span {margin-right:5px;color:#777;}

/* CTA */
.cta {text-align:center;margin:60px 20px;}
.btn-gold {display:inline-block;margin:10px;padding:16px 50px;font-size:1.2rem;font-weight:bold;
  color:#fff;text-decoration:none;border:2px solid #ffcc00;border-radius:50px;
  background:rgba(255,204,0,0.1);box-shadow:0 0 20px rgba(255,204,0,0.8);transition:0.3s;}
.btn-gold:hover {color:#000;background:linear-gradient(135deg,#ffcc00,#ff8800);box-shadow:0 0 25px #ffcc00,0 0 50px #ff8800;transform:scale(1.07);}

/* Produk Listing */
.products {display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:50px auto;max-width:1000px;padding:0 20px;}
.card {background:#111;color:#eee;border-radius:12px;padding:30px;flex:1 1 280px;
  box-shadow:0 0 20px rgba(255,204,0,0.3);text-align:center;}
.card h2 {color:#ffcc00;margin:15px 0;}

/* Promo Banner */
.promo-banner {text-align:center;margin:60px auto;padding:40px 20px;max-width:950px;
  border-radius:12px;background:#111;border:2px solid #ffcc00;
  box-shadow:0 0 30px rgba(255,204,0,0.6),0 0 60px rgba(255,136,0,0.4);animation:goldPulse 3s infinite alternate;}
.promo-banner h2 {font-size:2rem;color:#ffcc00;text-shadow:0 0 15px #ff8800;}
.promo-banner p {color:#eee;font-size:1.2rem;}
#countdown {font-size:1.5rem;color:#ffcc00;font-weight:bold;margin:20px 0;text-shadow:0 0 12px #ff8800,0 0 20px #ffcc00;}
@keyframes goldPulse {0%{box-shadow:0 0 20px rgba(255,204,0,0.4);}100%{box-shadow:0 0 40px rgba(255,204,0,0.8),0 0 80px rgba(255,136,0,0.6);}}

.promo-overlay {
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.45);
  border-radius:12px;
  text-align:center;
  padding:20px;
}

/* Animasi fade-in + slide-up */
.fade-in-up {
  opacity:0;
  transform:translateY(30px);
  animation:fadeInUp 1s forwards;
}
.fade-in-up.delay1 {animation-delay:0.3s;}
.fade-in-up.delay2 {animation-delay:0.6s;}
.fade-in-up.delay3 {animation-delay:0.9s;}

@keyframes fadeInUp {
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.promo-overlay h2 {
  color:#ffcc00;
  text-shadow:0 0 15px #ff8800;
  font-size:2rem;
}
.promo-overlay p {
  color:#fff;
  font-size:1.2rem;
  margin:10px 0;
}
#countdown {
  font-size:1.4rem;
  color:#ffcc00;
  font-weight:bold;
  text-shadow:0 0 10px #ff8800;
  margin:15px 0;
}

/* FAQ */
.faq {max-width:800px;margin:60px auto;padding:0 20px;}
.faq h2 {text-align:center;color:#ffcc00;margin-bottom:20px;}
.faq dt {font-weight:bold;margin-top:15px;color:#ff8800;}
.faq dd {margin:0 0 15px 0;}

/* Artikel */
.article {max-width:900px;margin:60px auto;padding:0 20px;}
.article h2,.article h3 {color:#ffcc00;}

/* Livechat */
.livechat {position:fixed;bottom:20px;right:20px;z-index:999;}
.livechat a {display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle,#ffcc00,#ff8800);color:#000;font-size:28px;font-weight:bold;text-decoration:none;
  box-shadow:0 0 20px #ffcc00,0 0 40px #ff8800;animation:pulse 2s infinite;}
@keyframes pulse {0%{box-shadow:0 0 10px #ffcc00;}50%{box-shadow:0 0 30px #ff8800;}100%{box-shadow:0 0 10px #ffcc00;}}

/* Footer */
footer {background:#050505;text-align:center;padding:25px;color:#888;font-size:0.9rem;border-top:1px solid #222;}