/* ===== Base & Theme ===== */
:root{

  --brand:#005BAC;    /* biru khas Budi Luhur */
  --brand-2:#1D75DE;  /* biru terang / gradien */
  --accent:#FF9800;   /* oranye untuk aksen */
  --bg:#0A192F;       /* biru tua untuk background */
  --card:#102542;     /* kartu biru gelap */

      --bg: #5470b1;          /* slate-900 */
      --card: #ffffff;        /* gray-900 */
      --muted: #334155;       /* slate-600 */
      --text: #999292;        /* gray-200 */
      --subtext:#5b6f88; 
      --subtext2:#fd7200;      /* slate-300 */
      --accent:#f59e0b;       /* amber-500 */
      --danger:#ef4444;       /* red-500 */
      --ring: #10b98133;
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }

.banner {
  position:relative;
  border-radius:var(--radius);
  overflow:hidden; /* ⬅ ini potong konten */
}


*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#ffffff, #ffffff 25%, #ada179);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* ===== Layout ===== */
.container{width:min(1200px, 92vw);margin-inline:auto}

header{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.479));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex;gap:14px;align-items:center;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.logo-badge{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 18px rgba(34,197,94,.35)}
.logo-badge span{font-weight:900}

.searchbar{flex:1;display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 12px;transition:.2s}
.searchbar:focus-within{box-shadow:0 0 0 6px var(--ring);border-color:#10b98155}
.searchbar input{flex:1;background:transparent;border:0;outline:none;color:var(--text)}
.searchbar button{border:0;border-radius:999px;padding:8px 14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#06281a;font-weight:700;cursor:pointer}

.badge{position:relative}
.cart-btn{display:flex;align-items:center;gap:10px;border:1px solid rgba(255, 115, 0, 0.1);background:rgba(255, 145, 0, 0.06);padding:8px 12px;border-radius:999px;cursor:pointer}
.cart-count{position:absolute;right:-6px;top:-6px;background:var(--accent);color:#111827;border-radius:999px;font-size:12px;font-weight:800;min-width:20px;height:20px;display:grid;place-items:center;border:2px solid #0f172a}

/* ===== Hero / Banner ===== */
.hero{margin:18px 0 8px;display:grid;grid-template-columns:1.5fr .5fr;gap:14px}
.banner{position:relative;border-radius:var(--radius);overflow:hidden;background:#0b1224;border:1px solid rgba(255,255,255,.06)}
.banner .slides{display:flex;width:300%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.banner .slide{position:relative;min-width:100%;height:220px;display:grid;place-items:center;background:radial-gradient(1200px 300px at 20% -20%, #dfe2e0a8, transparent 60%), radial-gradient(800px 250px at 90% 20%, #06b6d422, transparent 60%)}
.banner .slide h2{font-size:28px;margin:0 16px;text-align:center}
.banner .dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:6px;justify-content:center}
.banner .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35)}
.banner .dot.active{background:#fff}
.side-ad{border-radius:var(--radius);padding:16px;background:linear-gradient(135deg,#1f2937, #0b1224);border:1px solid rgba(255,255,255,.08)}

/* ===== Controls ===== */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 4px}
.chips{display:flex;gap:8px;overflow:auto;padding-bottom:6px}
.chip{white-space:nowrap;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:8px 12px;border-radius:999px;cursor:pointer}
.chip.active{background:linear-gradient(135deg, #22c55e, #06b6d4);color:#082016;border:0}
.sort{margin-left:auto;display:flex;gap:8px;align-items:center}
select{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px}

/* ===== Grid ===== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:8px 0 28px}
.card{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#0b1224,#0f172a);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.card-media{aspect-ratio:4/3;background:#35302a;display:grid;place-items:center}
.card-body{padding:12px}
.title{font-weight:700;margin:0 0 6px}
.meta{display:flex;gap:8px;align-items:center;color:var(--subtext);font-size:14px}
.price{font-size:18px;font-weight:800;color:#ff8800}
.actions{display:flex;gap:8px;margin-top:10px}
.btn{flex:1;border:0;border-radius:12px;padding:10px 12px;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#06281a;font-weight:800}
.btn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text)}

.star{color:#fbbf24}

/* ===== Cart Modal ===== */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.5);z-index:50;padding:20px}
.modal.open{display:grid}
.sheet{width:min(700px, 92vw);background:#0b1224;border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:var(--shadow)}
.sheet header{position:relative;background:transparent;border:0}
.sheet h3{margin:16px 20px}
.sheet .content{padding:0 20px 18px}
.cart-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.qty{display:flex;gap:8px;align-items:center}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}
.total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}

/* ===== Detail Modal (Styles) ===== */
.detail-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.detail-media{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.detail-body h3{margin:0 0 6px}
.detail-meta{display:flex;gap:10px;align-items:center;color:var(--subtext)}
.detail-actions{display:flex;gap:10px;margin-top:12px}
.close-x{position:absolute;right:14px;top:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer}

@media(max-width:720px){
  .detail-grid{grid-template-columns:1fr}
}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:#0b1224;border:1px solid rgba(255,255,255,.12);padding:10px 14px;border-radius:12px;display:none;z-index:60}
.toast.show{display:block;animation:pop .4s ease}
@keyframes pop{from{transform:translate(-50%, 10px);opacity:0}to{transform:translate(-50%, 0);opacity:1}}

footer{border-top:1px solid rgba(255,255,255,.08);color:var(--subtext);padding:18px 0;margin-top:26px}

/* ===== Responsive ===== */
@media (max-width: 1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 720px){
  .nav{gap:10px}
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sort{margin-left:0}
  .searchbar button{display:none}
}
@media (max-width: 480px){.grid{grid-template-columns:1fr}}

/* ===== Banner Baru ===== */
.new-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #1f2937; /* gelap biar teks jelas */
  color: #fff;         /* teks putih */
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  opacity: 0;
  transition: opacity .6s ease;
  text-align: center;
}

.new-slide.active {
  opacity: 1;
}

.new-slide h2 {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  margin: 0;
}

.new-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.new-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
}

.new-dots span.active {
  background: #fff;
}