*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;background:#f7f7f8;color:#171717;line-height:1.6}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.wrap{max-width:1120px;margin:auto;padding-left:20px;padding-right:20px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid #e8e8e8}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand img{
  width:62px;
  height:62px;
  object-fit:contain;
  display:block;
}

.brand span{
  color:#111827;
  font-size:25px;
  font-weight:900;
  letter-spacing:-0.8px;
  line-height:1;
  white-space:nowrap;
  font-family:Arial,Helvetica,sans-serif;
  text-shadow:0 1px 2px rgba(0,0,0,.08);
}
.nav-actions{display:flex;align-items:center;gap:24px;font-size:14px}
.nav-actions a:hover{opacity:.55}
.cart-btn{border:0;background:#171717;color:#fff;padding:9px 13px;border-radius:12px;cursor:pointer}
.hero{min-height:560px;display:grid;grid-template-columns:1.3fr .8fr;gap:60px;align-items:center}
.label{font-size:11px;font-weight:900;letter-spacing:2px;opacity:.5;margin-bottom:9px}
h1{font-size:clamp(43px,7vw,76px);line-height:1.02;letter-spacing:-3px}
h1 span{opacity:.45}
.hero-copy>p:not(.label){color:#666;max-width:560px;margin:22px 0 30px}
.primary{display:inline-block;border:0;background:#171717;color:#fff;padding:13px 21px;border-radius:12px;font-weight:800;cursor:pointer;transition:.2s}
.primary:hover{transform:translateY(-2px);opacity:.9}
.hero-art{background:#fff;border:1px solid #e8e8e8;border-radius:30px;padding:55px 30px;text-align:center;box-shadow:0 25px 70px rgba(0,0,0,.07)}
.bubble{font-size:80px;margin-bottom:12px}.hero-art p{color:#777}
.section{padding-top:70px;padding-bottom:80px}
.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:24px}
h2{font-size:38px;line-height:1.1}
#search{width:250px;border:1px solid #ddd;background:#fff;border-radius:12px;padding:11px 14px;outline:none}
.categories{display:flex;gap:9px;overflow:auto;padding-bottom:20px}
.cat{border:1px solid #ddd;background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.cat.active{background:#171717;color:#fff;border-color:#171717}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product{background:#fff;border:1px solid #e9e9e9;border-radius:19px;padding:12px;overflow:hidden}
.product-img{height:190px;border-radius:13px;background:#eee;display:flex;align-items:center;justify-content:center;font-size:64px;margin-bottom:14px}
.product h3{font-size:18px}.product p{font-size:13px;color:#777;min-height:42px}
.price{font-weight:900;font-size:18px;margin:8px 0 13px}
.add{width:100%;border:0;background:#171717;color:#fff;border-radius:10px;padding:10px;cursor:pointer;font-weight:800}
.about{padding-top:75px;padding-bottom:75px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about p:not(.label){color:#666;margin-top:15px}
.features{background:#fff;border:1px solid #e8e8e8;border-radius:20px;padding:25px;display:grid;gap:16px;font-weight:700}
.contact{background:#171717;color:#fff;border-radius:28px;text-align:center;padding-top:65px;padding-bottom:65px;margin-bottom:70px}
.contact p:not(.label){opacity:.65;margin:10px 0 25px}
.contact .label{opacity:.5}
footer{text-align:center;padding:30px;color:#777;font-size:13px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:30}
.hidden{display:none}
.cart{position:fixed;right:0;top:0;height:100%;width:min(410px,94vw);background:#fff;z-index:40;padding:22px;display:flex;flex-direction:column;transform:translateX(100%);transition:.25s}
.cart.open{transform:translateX(0)}
.cart-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:15px}
.cart-head button{border:0;background:#eee;width:34px;height:34px;border-radius:50%;font-size:22px;cursor:pointer}
#cartItems{flex:1;overflow:auto;padding:15px 0}
.cart-item{display:grid;grid-template-columns:55px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #eee}
.thumb{height:55px;width:55px;border-radius:10px;background:#eee;display:flex;align-items:center;justify-content:center;font-size:25px}
.cart-item small{color:#777}
.qty{display:flex;gap:7px;align-items:center;margin-top:5px}
.qty button{border:1px solid #ddd;background:#fff;border-radius:7px;width:25px;height:25px;cursor:pointer}
.remove{border:0;background:transparent;color:#999;cursor:pointer}
.cart-bottom{border-top:1px solid #eee;padding-top:16px}
.total{display:flex;justify-content:space-between;font-size:18px;margin-bottom:15px}
.full{width:100%;text-align:center}
.empty{text-align:center;color:#888;padding:50px 10px}
@media(max-width:850px){.products{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr;padding-top:60px;padding-bottom:60px}.about{grid-template-columns:1fr}}
@media(max-width:560px){.nav-actions a{display:none}.section-head{display:block}.section-head input{width:100%;margin-top:18px}.products{grid-template-columns:1fr 1fr}.product-img{height:150px}.about{padding-top:50px}.hero-art{padding:35px 20px}}
/* =========================
   CHECKOUT MODAL
========================= */

.checkout-modal{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(5px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.checkout-modal.hidden{
  display:none;
}

.checkout-box{
  width:min(900px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:25px;
  box-shadow:0 30px 100px rgba(0,0,0,.2);
}

.checkout-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 28px;
  border-bottom:1px solid #eee;
}

.checkout-head h2{
  font-size:28px;
}

.checkout-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#f1f1f1;
  font-size:25px;
  cursor:pointer;
}

.checkout-content{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:25px;
  padding:28px;
}

.checkout-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.form-group label{
  display:block;
  font-size:13px;
  font-weight:800;
  margin-bottom:7px;
}

.form-group input,
.form-group textarea{
  width:100%;
  border:1px solid #ddd;
  background:#fafafa;
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  resize:vertical;
}

.form-group input:focus,
.form-group textarea:focus{
  background:#fff;
  border-color:#171717;
}

.payment-options{
  display:grid;
  gap:10px;
}

.payment-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid #ddd;
  border-radius:13px;
  cursor:pointer;
  transition:.2s;
}

.payment-option:hover{
  border-color:#171717;
}

.payment-option input{
  width:18px;
  height:18px;
}

.payment-option strong{
  display:block;
}

.payment-option small{
  display:block;
  color:#777;
  margin-top:2px;
}

.checkout-summary{
  background:#f7f7f8;
  border-radius:18px;
  padding:20px;
  height:max-content;
}

.checkout-summary h3{
  margin-bottom:15px;
}

.checkout-item{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:12px 0;
  border-bottom:1px solid #ddd;
  font-size:14px;
}

.checkout-item small{
  color:#777;
}

.checkout-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:20px 0;
  font-size:18px;
}

.checkout-total strong{
  font-size:22px;
}

@media(max-width:700px){

  .checkout-content{
    grid-template-columns:1fr;
    padding:20px;
  }

  .checkout-head{
    padding:20px;
  }

  .checkout-head h2{
    font-size:23px;
  }

}

/* =========================
   ORDER SUCCESS
========================= */

.success-modal{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.success-modal.hidden{
  display:none;
}

.success-box{
  width:min(500px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:28px;
  padding:32px;
  text-align:center;
  box-shadow:0 30px 100px rgba(0,0,0,.25);
}

.success-icon{
  width:70px;
  height:70px;
  margin:0 auto 20px;
  border-radius:50%;
  background:#171717;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  font-weight:900;
}

.success-box h2{
  font-size:32px;
  margin-bottom:10px;
}

.success-text{
  color:#777;
  font-size:14px;
  line-height:1.6;
  margin-bottom:25px;
}

.order-number-box{
  background:#f7f7f8;
  border:1px solid #e8e8e8;
  border-radius:16px;
  padding:17px;
  margin-bottom:18px;
}

.order-number-box span{
  display:block;
  color:#777;
  font-size:12px;
  margin-bottom:5px;
}

.order-number-box strong{
  font-size:22px;
  letter-spacing:1px;
}

.success-info{
  border:1px solid #e8e8e8;
  border-radius:16px;
  overflow:hidden;
  text-align:left;
  margin-bottom:18px;
}

.success-info > div{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:14px 16px;
  border-bottom:1px solid #eee;
}

.success-info > div:last-child{
  border-bottom:0;
}

.success-info span{
  color:#777;
  font-size:13px;
}

.success-info strong{
  font-size:13px;
  text-align:right;
}

.status-badge{
  background:#eee;
  padding:5px 9px;
  border-radius:999px;
}

.payment-info{
  background:#f7f7f8;
  border-radius:16px;
  padding:18px;
  margin-bottom:20px;
  text-align:left;
  font-size:13px;
  line-height:1.7;
}

.payment-info strong{
  display:block;
  margin-bottom:5px;
  font-size:15px;
}

@media(max-width:500px){

  .success-box{
    padding:25px 20px;
  }

  .success-box h2{
    font-size:27px;
  }

}

/* ========================================
   CEK PESANAN BUTTON
======================================== */

.order-btn{
  border:1px solid #ddd;
  background:#fff;
  color:#171717;
  padding:9px 13px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  transition:.2s;
}

.order-btn:hover{
  transform:translateY(-2px);
  background:#f5f5f5;
}


/* ========================================
   ORDER MODAL
======================================== */

.order-modal{
  position:fixed;
  inset:0;
  z-index:150;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(7px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.order-modal.hidden{
  display:none;
}

.order-box{
  position:relative;
  width:min(520px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:28px;
  padding:30px;
  box-shadow:0 30px 100px rgba(0,0,0,.25);
}

.order-close{
  position:absolute;
  right:18px;
  top:18px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#eee;
  font-size:24px;
  cursor:pointer;
}

.order-icon{
  width:65px;
  height:65px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background:#f5f5f5;
  font-size:32px;
  margin-bottom:18px;
}

.order-box h2{
  font-size:32px;
  margin-bottom:7px;
}

.order-description{
  color:#777;
  font-size:14px;
  margin-bottom:25px;
}


/* ========================================
   ORDER NUMBER
======================================== */

.order-number{
  background:#f7f7f8;
  border:1px solid #e8e8e8;
  border-radius:16px;
  padding:16px;
  margin-bottom:25px;
  text-align:center;
}

.order-number span{
  display:block;
  color:#777;
  font-size:12px;
  margin-bottom:5px;
}

.order-number strong{
  font-size:22px;
  letter-spacing:1px;
}


/* ========================================
   TRACKING
======================================== */

.tracking{
  margin:10px 0 25px;
}

.tracking-step{
  display:flex;
  align-items:center;
  gap:14px;
  opacity:.35;
  transition:.3s;
}

.tracking-step.active{
  opacity:1;
}

.tracking-step.completed{
  opacity:1;
}

.tracking-dot{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#eee;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
}

.tracking-step.active .tracking-dot,
.tracking-step.completed .tracking-dot{
  background:#171717;
  color:#fff;
}

.tracking-step strong{
  display:block;
  font-size:14px;
}

.tracking-step small{
  display:block;
  color:#888;
  font-size:12px;
  margin-top:2px;
}

.tracking-line{
  width:2px;
  height:25px;
  background:#eee;
  margin-left:18px;
}


/* ========================================
   DETAIL PESANAN
======================================== */

.order-detail{
  background:#f7f7f8;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:25px;
}

.order-detail > div{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:13px 15px;
  border-bottom:1px solid #e8e8e8;
}

.order-detail > div:last-child{
  border-bottom:0;
}

.order-detail span{
  color:#777;
  font-size:13px;
}

.order-detail strong{
  font-size:13px;
  text-align:right;
}


/* ========================================
   STATUS
======================================== */

.status-pill{
  padding:5px 10px;
  border-radius:999px;
  background:#eee;
}


/* ========================================
   PRODUK PESANAN
======================================== */

.ordered-products h3{
  font-size:17px;
  margin-bottom:10px;
}

.tracking-item{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:12px 0;
  border-bottom:1px solid #eee;
}

.tracking-item:last-child{
  border-bottom:0;
}

.tracking-item small{
  color:#777;
}


/* ========================================
   EMPTY
======================================== */

.order-empty{
  text-align:center;
  padding:25px 10px;
}

.empty-order-icon{
  font-size:55px;
  margin-bottom:10px;
}

.order-empty h3{
  margin-bottom:5px;
}

.order-empty p{
  color:#777;
  font-size:13px;
  margin-bottom:20px;
}


/* ========================================
   LOADING
======================================== */

.order-loading{
  text-align:center;
  padding:35px 10px;
}

.loading-spinner{
  width:35px;
  height:35px;
  margin:0 auto 12px;
  border:4px solid #eee;
  border-top-color:#171717;
  border-radius:50%;
  animation:spin .7s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}


/* ========================================
   REFRESH
======================================== */

.refresh-order{
  width:100%;
  border:1px solid #ddd;
  background:#fff;
  border-radius:12px;
  padding:11px;
  font-weight:800;
  cursor:pointer;
}

.refresh-order:hover{
  background:#f5f5f5;
}


/* ========================================
   SUCCESS MODAL
======================================== */

.success-modal{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.success-modal.hidden{
  display:none;
}

.success-box{
  width:min(500px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:28px;
  padding:32px;
  text-align:center;
  box-shadow:0 30px 100px rgba(0,0,0,.25);
}

.success-icon{
  width:70px;
  height:70px;
  margin:0 auto 20px;
  border-radius:50%;
  background:#171717;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  font-weight:900;
}

.success-box h2{
  font-size:32px;
  margin-bottom:10px;
}

.success-text{
  color:#777;
  font-size:14px;
  margin-bottom:25px;
}

.order-number-box{
  background:#f7f7f8;
  border:1px solid #e8e8e8;
  border-radius:16px;
  padding:17px;
  margin-bottom:18px;
}

.order-number-box span{
  display:block;
  color:#777;
  font-size:12px;
  margin-bottom:5px;
}

.order-number-box strong{
  font-size:22px;
  letter-spacing:1px;
}

.success-info{
  border:1px solid #e8e8e8;
  border-radius:16px;
  overflow:hidden;
  text-align:left;
  margin-bottom:18px;
}

.success-info > div{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:14px 16px;
  border-bottom:1px solid #eee;
}

.success-info > div:last-child{
  border-bottom:0;
}

.success-info span{
  color:#777;
  font-size:13px;
}

.success-info strong{
  font-size:13px;
  text-align:right;
}

.status-badge{
  background:#eee;
  padding:5px 9px;
  border-radius:999px;
}

.payment-info{
  background:#f7f7f8;
  border-radius:16px;
  padding:18px;
  margin-bottom:20px;
  text-align:left;
  font-size:13px;
  line-height:1.7;
}

.payment-info strong{
  display:block;
  margin-bottom:5px;
  font-size:15px;
}

.success-back{
  width:100%;
  border:0;
  background:transparent;
  padding:12px;
  margin-top:5px;
  cursor:pointer;
  color:#777;
  font-weight:700;
}


/* ========================================
   MOBILE
======================================== */

@media(max-width:560px){

  .order-btn{
    padding:8px 10px;
    font-size:12px;
  }

  .order-box{
    padding:25px 20px;
  }

  .order-box h2{
    font-size:28px;
  }

  .success-box{
    padding:25px 20px;
  }

  .success-box h2{
    font-size:27px;
  }

}

/* =========================
   LOGIN BUTTON
========================= */

.login-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:5px;

  border:0;
  background:#171717;
  color:#fff !important;

  padding:9px 14px;
  border-radius:12px;

  cursor:pointer;
  font-weight:800;
  text-decoration:none !important;

  white-space:nowrap;
  flex-shrink:0;

  visibility:visible !important;
  opacity:1 !important;
}


/* =========================
   HP
========================= */

@media(max-width:560px){

  .nav{
    flex-wrap:wrap !important;
  }

  .nav-actions{
    width:100% !important;

    display:flex !important;
    align-items:center;

    gap:7px;

    overflow-x:auto !important;
    overflow-y:hidden;

    flex-wrap:nowrap !important;

    padding:4px 2px 8px;

    scrollbar-width:none;
  }

  .nav-actions::-webkit-scrollbar{
    display:none;
  }

  .nav-actions > *{
    flex-shrink:0 !important;
  }

  /* sembunyikan Produk & Tentang di HP */
  .nav-actions > a[href="#produk"],
  .nav-actions > a[href="#tentang"]{
    display:none !important;
  }

  .order-check-btn{
    display:inline-flex !important;
    flex-shrink:0 !important;
    white-space:nowrap !important;
  }

  .login-btn{
    display:inline-flex !important;
    flex-shrink:0 !important;
    visibility:visible !important;
  }

  .cart-btn{
    display:inline-flex !important;
    flex-shrink:0 !important;
  }

}

/* =========================
   ACCOUNT MENU
========================= */

.account-wrap{
  position:relative;
}

.account-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:190px;
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:10px;
  box-shadow:0 15px 40px rgba(0,0,0,.15);
  z-index:200;
}

.account-menu.hidden{
  display:none;
}

.account-name{
  padding:10px;
  font-size:14px;
  font-weight:800;
  border-bottom:1px solid #eee;
  margin-bottom:6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.logout-btn{
  width:100%;
  border:0;
  background:#fff;
  padding:11px;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
  font-weight:700;
}

.logout-btn:hover{
  background:#f5f5f5;
}

@media(max-width:600px){

  .account-menu{
    right:0;
    width:170px;
  }

}