:root{
  --bg:#0b1220;
  --card:#0e1730;
  --muted:#9fb0c6;
  --text:#e9f0ff;
  --brand:#4ea8ff;
  --brand-2:#4ef1a1;
  --accent:#feb912;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(160deg,#0a0f1d 0%,#0b1220 100%);color:var(--text)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
.container{width:min(1120px,92%);margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem;z-index:9999}

.site-header{position:sticky;top:0;z-index:1000;background:rgba(11,18,32,.75);backdrop-filter:saturate(180%) blur(10px);box-shadow:var(--shadow)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.logo img{height:42px}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{padding:.6rem .9rem;border-radius:1rem;color:var(--text)}
.site-nav a:hover{background:rgba(255,255,255,.06)}

.nav-toggle{display:none}
.burger{display:none;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;transition:.3s}

@media (max-width:900px){
  .site-nav{position:fixed;inset:64px 0 auto 0;background:rgba(11,18,32,.98);flex-direction:column;padding:1rem 0;transform:translateY(-120%);transition:.3s}
  .nav-toggle:checked ~ .site-nav{transform:translateY(0)}
  .burger{display:block}
}

.hero{padding:64px 0 24px;background:radial-gradient(1200px 600px at 80% -10%,rgba(78,168,255,.18),transparent 70%)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero-text h1{font-size:clamp(28px,4vw,48px);line-height:1.1;margin:0 0 .5rem;font-weight:800}
.hero-text p{color:var(--muted);margin:0 0 1rem}
.cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.btn{display:inline-block;border:1px solid transparent;padding:.75rem 1.1rem;border-radius:999px;font-weight:600}
.btn.primary{background:var(--brand);color:#081326}
.btn.outline{border-color:rgba(255,255,255,.25);color:var(--text)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.outline:hover{background:rgba(255,255,255,.08)}
.badges{display:flex;gap:.5rem;list-style:none;padding:0;margin:1rem 0 0}
.badges li{padding:.3rem .7rem;border-radius:999px;background:rgba(255,255,255,.06);color:#c6d4ea;font-size:.9rem}

.hero-media .glass-card{border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.15);box-shadow:var(--shadow)}

.strip{padding:24px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(0deg,rgba(255,255,255,.02),transparent)}
.auto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.strip-item h3{margin:.2rem 0}
.strip-item p{margin:0;color:var(--muted)}

.section-head{text-align:center;margin:48px 0 12px}
.section-head h2{margin:0 0 .3rem;font-size:clamp(22px,3vw,34px)}
.section-head p{margin:0;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:16px 0 40px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);padding:1.1rem;border-radius:1.2rem;box-shadow:var(--shadow);transition:.2s}
.card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}

.page-hero.small{padding:64px 0 16px;background:linear-gradient(160deg,rgba(78,241,161,.12),transparent 40%)}
.prose{color:#d9e6ff}
.prose h2,.prose h3{margin:.2rem 0 .4rem}
.prose p, .prose li{color:#c5d7f2}
.prose ul{padding-left:1.2rem}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.list-check{list-style:none;padding-left:0}
.list-check li{padding-left:1.6rem;position:relative;margin:.4rem 0}
.list-check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand-2)}

.cta-center{text-align:center;margin:20px 0 40px}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.gallery img{border-radius:.8rem;border:1px solid rgba(255,255,255,.08)}

.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem}
.contact-form{display:grid;gap:.6rem}
.contact-form label{display:grid;gap:.3rem}
.contact-form input,.contact-form textarea{padding:.8rem 1rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text)}
.muted{color:var(--muted);font-size:.9rem}
.map-embed{border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.12)}

.site-footer{margin-top:40px;padding:28px 0;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(0deg,rgba(255,255,255,.02),transparent)}
.grid-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.logo img{height:42px}
.soc{display:flex;gap:.8rem;margin-top:.5rem}
.update-list{padding-left:1rem}
.update-list li{margin:.3rem 0}
.copyright{border-top:1px solid rgba(255,255,255,.06);margin-top:20px;padding-top:14px;color:#aac1df;text-align:center}
.by{opacity:.7}

.wa-float{position:fixed;right:18px;bottom:18px;background:#25D366;border-radius:999px;padding:10px;display:grid;place-items:center;box-shadow:var(--shadow)}
.wa-float img{width:28px;height:28px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}

.cards.layanan .card { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; }
.price { font-weight: bold; color: #d32f2f; font-size: 1.2rem; }
.promo { background: #3b3eff; padding: 2rem; text-align: center; border-radius: 12px; margin-top: 2rem; }

/* Kontak Section */
.soc a {
  display: inline-flex;
  align-items: center;
  margin: 5px 10px 5px 0;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.3s ease;
}

.soc a i {
  margin-right: 6px;
  font-size: 18px;
}

/* Warna khusus sosial media */
.soc a[aria-label="Instagram"] {
  color: #E1306C;
}
.soc a[aria-label="Facebook"] {
  color: #1877F2;
}
.soc a[aria-label="YouTube"] {
  color: #FF0000;
}

/* Hover efek */
.soc a:hover {
  opacity: 0.8;
}

/* Nomor telp & email */
p i {
  color: #f5f1f1;
  margin-right: 8px;
}
p a {
  color: #f5f1f1;
  text-decoration: none;
}
p a:hover {
  text-decoration: underline;
}

.update-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.update-list li {
  margin-bottom: 8px;
}

.update-list li a {
  text-decoration: none;
  color: #f5f1f1;
  font-size: 15px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.update-list li a i {
  color: #f0a500; /* warna panah emas */
  margin-right: 8px;
  font-size: 14px;
}

.update-list li a:hover {
  color: #f0a500;
}

/* Parallax effect */
.parallax {
  background: url("../img/bg-parallax.jpg") center/cover no-repeat fixed;
  position: relative;
  color: white;
}

/* Fade in animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}

.fade-in-delay {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.2s ease forwards;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1.5s ease forwards;
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  animation: slideInRight 1.8s ease forwards;
}

/* Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Parallax khusus strip */
.strip-parallax {
  background: url("../img/bg-strip.jpg") center/cover no-repeat fixed;
  padding: 80px 20px;
  color: #fff;
  text-align: center;
}

/* Strip item */
.strip-item {
  background: rgba(0,0,0,0.5);
  border-radius: 15px;
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.strip-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* Animasi masuk */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 1s ease forwards;
}

.fade-in-up.delay-1 {
  animation-delay: 0.3s;
}
.fade-in-up.delay-2 {
  animation-delay: 0.6s;
}

/* Parallax khusus layanan */
.services-parallax {
  background: url("../img/bg-services.jpg") center/cover no-repeat fixed;
  padding: 100px 20px;
  border-radius: 0;
  text-align: center;
  color: #fff;
}

/* Header layanan */
.section-head h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}
.section-head p {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Cards */
.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 40px;
}

.card {
  background: rgba(0,0,0,0.6);
  padding: 30px;
  border-radius: 15px;
  text-align: left;
  color: #fff;
  text-decoration: none;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover */
.card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* Animasi fade-in-up (reuse dari sebelumnya) */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 1s ease forwards;
}
.fade-in-up.delay-1 { animation-delay: 0.3s; }
.fade-in-up.delay-2 { animation-delay: 0.6s; }

/* Parallax background untuk layanan detail */
.services-detail-parallax {
  background: url("../img/bg-services-detail.jpg") center/cover no-repeat fixed;
  padding: 100px 20px;
  color: #fff;
  border-radius: 0;
}

/* Card style khusus detail */
.services-detail .card {
  background: rgba(0,0,0,0.6);
  border-radius: 15px;
  padding: 25px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.services-detail .card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

.price {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 15px;
  color: #ffd700; /* emas biar menonjol */
}

/* Animasi fade-in-up */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 1s ease forwards;
}

.fade-in-up.delay-1 { animation-delay: 0.2s; }
.fade-in-up.delay-2 { animation-delay: 0.4s; }
.fade-in-up.delay-3 { animation-delay: 0.6s; }
.fade-in-up.delay-4 { animation-delay: 0.8s; }
.fade-in-up.delay-5 { animation-delay: 1s; }

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

.services-detail .card h2 i {
  margin-right: 10px;
  color: #ffd700; /* emas biar konsisten sama harga */
}

/* Parallax Hero */
.parallax-interior {
  background: url('https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
  background-attachment: fixed;
  color: white;
  text-align: center;
  padding: 80px 20px;
  position: relative;
}
.parallax-interior::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.parallax-interior .container {
  position: relative;
  z-index: 2;
}

/* Cards */
.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 30px;
}
.card {
  background: #1559ec;
  border-radius: 16px;
  padding: 30px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Icon background di tiap card */
.card .icon-bg {
  font-size: 50px;
  color: rgba(0, 0, 0, 0.05);
  position: absolute;
  right: 10px;
  bottom: 10px;
  pointer-events: none;
}

/* Fade-in animasi */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 1s forwards;
}
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
.delay-3 { animation-delay: 0.9s; }

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

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .auto-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}

.icon {
  display: inline-block;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}