:root{
  --bg:#000; --card:rgba(10, 30, 50,.8); --card-hover:rgba(15, 45, 75,.95);
  --line:rgba(90, 200, 255,.25); --line-strong:rgba(120, 220, 255,.6);
  --text:#e6f8ff; --muted:#8fb3c7; --blue:#5ac8ff; --blue-light:#a1e8ff; --blue-dark:#1e6a94;
  --red:#ff5a5a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text)}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 50% 0%, rgba(90,200,255,.08), transparent 40%)}
.page{display:none;padding:20px 0 60px;animation:fadeIn .4s}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

#intro{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;transition:1s ease}
#intro.hide{opacity:0;visibility:hidden;pointer-events:none}
.intro-wrap{text-align:center}
.intro-title{font-family: 'Brush Script MT', cursive;font-size:64px;color:#fff;letter-spacing:4px}
.intro-title span{display:inline-block;opacity:0;transform:translateY(20px);animation:muncul 0.6s forwards;text-shadow:0 0 15px rgba(161,232,255,.4)}
.intro-title span:nth-child(1){animation-delay:0.2s}.intro-title span:nth-child(2){animation-delay:0.3s}.intro-title span:nth-child(3){animation-delay:0.4s}
.intro-title span:nth-child(4){animation-delay:0.5s}.intro-title span:nth-child(5){animation-delay:0.6s}.intro-title span:nth-child(6){animation-delay:0.7s}
.intro-title span:nth-child(7){animation-delay:0.8s}.intro-title span:nth-child(8){animation-delay:0.9s}.intro-title span:nth-child(9){animation-delay:1.0s}
.intro-title span:nth-child(10){animation-delay:1.1s}.intro-title span:nth-child(11){animation-delay:1.2s}
.intro-sub{color:var(--blue);font-size:14px;letter-spacing:4px;margin-top:15px;opacity:0;animation:fadeIn 1s 1.4s forwards}
@keyframes muncul{to{opacity:1; transform:translateY(0)}}

header{padding:30px 20px;text-align:center}
header h1{font-family:'Space Grotesk';font-size:32px;background:linear-gradient(90deg, var(--blue-light), var(--text));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer}
header p{color:var(--muted);font-size:13px}

.container{width:min(1000px,95%);margin:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;backdrop-filter:blur(16px);transition:.25s}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.card-icon{width:50px;height:50px;border-radius:14px;object-fit:cover;margin-bottom:10px;border:1px solid var(--line)}
.card h3{font-size:17px;margin-bottom:4px}
.card .desc{color:var(--muted);font-size:12px;margin-bottom:8px;min-height:30px}
.stok{font-size:11px;margin-bottom:12px;font-weight:600}
.stok .ada{color:var(--blue-light)} .stok .habis{color:var(--red)}
.btn{width:100%;padding:12px;border:none;border-radius:12px;background:linear-gradient(90deg,var(--blue-dark),var(--blue));color:#000;font-weight:800;cursor:pointer}
.btn:disabled{background:#333;color:#666;cursor:not-allowed}

/* HALAMAN DETAIL */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(90,200,255,.1);
  border:1px solid var(--line);
  color:var(--blue-light);
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  transition:.2s;
  backdrop-filter:blur(10px);
}
.back-btn:hover{
  background:rgba(90,200,255,.2);
  border-color:var(--line-strong);
  transform:translateX(-3px);
}
.back-btn svg{
  width:18px;
  height:18px;
}
.detail-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:25px;backdrop-filter:blur(20px)}
.detail-header{display:flex;align-items:center;gap:15px;margin-bottom:20px}
.detail-header h2{font-size:24px}
.variant-list{display:grid;gap:12px;margin-bottom:20px}
.variant-item{padding:15px;border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:.2s;display:flex;justify-content:space-between;align-items:center}
.variant-item:hover{border-color:var(--blue);background:rgba(90,200,255,.05)}
.variant-item .nama-paket{font-weight:700}
.variant-item .harga-paket{color:var(--blue-light);font-weight:800}

/* POPUP */
#popup{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:999}
#popup.show{display:flex}
.popup-box{background:var(--card);border:1px solid var(--line);padding:25px;border-radius:20px;width:min(90%,400px);text-align:center;backdrop-filter:blur(20px)}
.popup-btn{display:block;width:100%;padding:12px;border-radius:12px;text-decoration:none;font-weight:700;margin-bottom:10px}
.btn-wa{background:var(--blue);color:#000}
.btn-close{background:transparent;border:1px solid var(--line);color:var(--muted)}
footer{text-align:center;padding:30px;color:#4a6b7a;font-size:12px}

/* =================================
   INTRO EXIT - KERANJANG MELINTAS
================================= */

.cart-exit{
  position:absolute;
  left:-180px;
  top:50%;
  transform:translateY(-50%);
  width:110px;
  height:80px;
  opacity:0;
  z-index:10;
  pointer-events:none;
}

/* Badan keranjang */
.cart-body{
  position:absolute;
  left:20px;
  top:20px;
  width:75px;
  height:42px;
  border:4px solid var(--blue-light);
  border-top:none;
  transform:skew(-8deg);
  box-shadow:
    0 0 10px rgba(90,200,255,.8),
    0 0 25px rgba(90,200,255,.4);
}

/* Pegangan */
.cart-handle{
  position:absolute;
  left:-18px;
  top:-12px;
  width:25px;
  height:22px;
  border-top:4px solid var(--blue-light);
  border-left:4px solid var(--blue-light);
  transform:skew(8deg);
}

/* Garis isi keranjang */
.cart-line{
  position:absolute;
  left:8px;
  width:55px;
  height:2px;
  background:var(--blue-light);
  opacity:.7;
}

.cart-line:nth-child(2){top:12px}
.cart-line:nth-child(3){top:23px}
.cart-line:nth-child(4){top:34px}

/* Roda */
.wheel{
  position:absolute;
  bottom:4px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--blue-light);
  box-shadow:0 0 10px rgba(90,200,255,.8);
}

.wheel-1{left:27px}
.wheel-2{left:78px}

/* Saat intro ditutup */
#intro.exit .cart-exit{
  animation: cartLewat 2.5s cubic-bezier(.65,0,.25,1) forwards;
}

#intro.exit .intro-wrap{
  animation: teksDisapu 2.5s linear forwards;
}

@keyframes teksDisapu{
  0%{
    opacity:1;
    transform:translateX(0);
    filter:blur(0);
  }

  40%{
    opacity:1;
    transform:translateX(0);
    filter:blur(0);
  }

  55%{
    opacity:0;
    transform:translateX(35px);
    filter:blur(8px);
  }

  100%{
    opacity:0;
    transform:translateX(80px);
    filter:blur(15px);
  }
}

/* Keranjang melintas */
@keyframes cartLewat{
  0%{
    left:-180px;
    opacity:0;
  }

  8%{
    opacity:1;
  }

  45%{
    opacity:1;
  }

  100%{
    left:calc(100% + 180px);
    opacity:0;
  }
}

/* Teks menghilang ketika keranjang lewat */
@keyframes teksDisapu{
  0%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }

  35%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }

  65%{
    opacity:0;
    transform:scale(.92) translateX(25px);
    filter:blur(8px);
  }

  100%{
    opacity:0;
    transform:scale(.85) translateX(60px);
    filter:blur(15px);
  }
}

/* Setelah selesai benar-benar hilang */
#intro.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.2s;
}