:root{
  --primary:#1f67e8;
  --primary-dark:#0b2d6f;
  --text:#111;
  --muted:#666;
  --bg:#f6f8fb;
  --card:#ffffff;
  --radius:24px;
  --shadow:0 20px 50px rgba(0,0,0,0.08);
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Inter, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* =========================
   HEADER
========================= */
.header{
  background: linear-gradient(135deg, #1d4fb8, #2f6de1);
  color: #fff;

  /* Diperkecil agar header lebih tipis */
  padding: 4px 28px;

  /* Ukuran teks logo/header */
  font-size: 2.5rem;

  font-weight: 900;
  letter-spacing: -1px;

  /* Optional: shadow halus agar tetap premium */
  box-shadow: 0 4px 16px rgba(29, 79, 184, 0.15);
}

.header a{
  color: #fff;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.header-right{
  display:flex;
  align-items:center;
  gap:16px;
}

.cart-btn{
  position:relative;

  width:48px;
  height:48px;

  border:none;
  border-radius:50%;

  background:rgba(255,255,255,0.15);

  color:#fff;
  font-size:22px;

  cursor:pointer;

  transition:.2s;
}

.cart-btn:hover{
  background:rgba(255,255,255,0.25);
}

#cartCount{
  position:absolute;

  top:-4px;
  right:-4px;

  width:22px;
  height:22px;

  border-radius:50%;

  background:#ff3b30;

  color:#fff;

  font-size:12px;
  font-weight:700;

  display:flex;
  align-items:center;
  justify-content:center;
}
/* =========================
   PAGE LAYOUT
========================= */
.page-wrapper{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  overflow-x:hidden;
}
.page{
  width:133.333%;
  transform:scale(0.73);
  transform-origin:top center;

  padding:20px;
  box-sizing:border-box;

  min-height:calc(100vh / 0.75 - 58px);
}

.product-layout{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:24px;
  align-items:start;
}

/* =========================
   PRODUCT PREVIEW
========================= */
.preview-card{
  background:#ffffff;
  border-radius:32px;
  padding:24px;              /* sebelumnya 36px */
  box-shadow:0 20px 60px rgba(15,23,42,0.08);
}
.product-preview{
  position: relative;
  width: 100%;
}

.product-preview img{
  display: block;
  width: 100%;
  height: auto;
}

/* =========================
   INFO CARD
========================= */
.info-card{
  background:#fff;
  border-radius:32px;
  padding:40px;
  box-shadow:var(--shadow);
}

.badge{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(31,103,232,0.12);
  color:var(--primary);
  font-size:14px;
  font-weight:700;
  margin-bottom:20px;
}

h1{
  margin:0 0 16px;
  font-size:clamp(36px, 4vw, 56px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-1px;
}

.subtitle{
  font-size:18px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:28px;
}

.price{
  font-size:34px;
  font-weight:800;
  color:var(--primary-dark);
  margin-bottom:28px;
}

/* =========================
   FORM
========================= */
.form-group{
  margin-bottom:24px;
}

label{
  display:block;
  font-size:14px;
  font-weight:700;
  margin-bottom:8px;
  color:#333;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

input[type="text"]{
  width:100%;
  padding:18px 20px;
  border:1px solid #d9dee8;
  border-radius:16px;
  font-size:20px;
  outline:none;
  transition:all 0.25s ease;
}
input[type="text"]:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(31,103,232,0.12);
}
.preview-form input{
  width:100%;
  height:72px;
  padding:0 28px;
  font-size:24px;
  font-weight:700;
  color:#0f172a;
  background:#ffffff;
  border:3px solid #2563eb;
  border-radius:24px;
  outline:none;
  box-shadow:
    0 10px 30px rgba(37,99,235,0.15),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition:all 0.25s ease;
}

.preview-form input::placeholder{
  color:#94a3b8;
  font-weight:500;
  font-size:22px;
}
/* Info karakter */
.preview-form .char-info{
  margin-top:10px;
  padding-left:6px;
  font-size:14px;
  color:#64748b;
  font-weight:500;
}

.char-info{
  margin-top:8px;
  font-size:13px;
  color:#888;
}

/* =========================
   FEATURES
========================= */
.features{
  display:grid;
  gap:10px;
  margin:28px 0;
}

.feature{
  color:#444;
  font-size:15px;
}
.preview-form input:focus{
  border-color:#1d4ed8;
  box-shadow:
    0 14px 36px rgba(37,99,235,0.22),
    0 0 0 6px rgba(37,99,235,0.08);
  transform:translateY(-1px);
}
/* =========================
   BUTTON
========================= */
.add-cart-btn{
  display:block;
  width:100%;
  padding:20px 24px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg, #1d4fb8, #2f6de1);
  color:#fff;
  font-size:22px;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(31,103,232,0.22);
  transition:all 0.25s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(31,103,232,0.28);
}

.note{
  margin-top:14px;
  text-align:center;
  font-size:13px;
  color:#888;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 900px){
  .header{
    padding: 5px 20px;
    text-align:center;
    font-size: 2rem;
  }

  .page{
    padding:24px 16px 48px;
  }

  .product-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  /* Preview di atas, form di bawah */
  .preview-card{
    padding:16px;
    border-radius:24px;
  }
  .product-preview{
    max-width:100%;
    margin-bottom:16px;
  }

  .info-card{
    order:2;
    padding:28px 24px;
    border-radius:24px;
  }

  h1{
    font-size:38px;
  }

  .subtitle{
    font-size:16px;
    line-height:1.7;
  }

  .price{
    font-size:28px;
  }

  .preview-form input{
    height:60px;
    font-size:16px;
    padding:0 22px;
    border-radius:18px;
  }
  .preview-form input::placeholder{
  font-size:14px;
  }
  .preview-form .char-info{
  font-size:13px;
  margin-top:8px;
  }
  .btn{
    font-size:20px;
    padding:18px 20px;
  }
}
.addon-box{
  margin: 24px 0 18px;
  padding: 18px 20px;
  background: #f8fbff;
  border: 1px solid #dbe8ff;
  border-radius: 16px;
}

.addon-option{
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.addon-option input[type="checkbox"]{
  width: 22px;
  height: 22px;
  accent-color: #1d4fb8;
  cursor: pointer;
}

.addon-option span{
  line-height: 1.4;
}

@media (max-width: 768px){
  .addon-box{
    margin: 20px 0 16px;
    padding: 16px;
  }

  .addon-option{
    font-size: 16px;
  }

  .addon-option input[type="checkbox"]{
    width: 20px;
    height: 20px;
  }
}
/* =========================
   VARIANT SAJADAH
========================= */

.variant-section{
  margin:24px 0;
}

.variant-title{
  font-size:14px;
  font-weight:700;
  color:#222;
  margin-bottom:12px;
}

/* Container thumbnail */
.variant-list{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;

  max-height:360px;

  overflow-y:auto;

  padding-right:8px;

  scrollbar-width:thin;

}

/* Chrome scrollbar */
.variant-list::-webkit-scrollbar{
  width:6px;
}

.variant-list::-webkit-scrollbar-thumb{
  background:#c9d8ff;
  border-radius:999px;
}

.variant-list::-webkit-scrollbar-track{
  background:transparent;
}

/* Item */
.variant-item{

  width:100%;

  cursor:pointer;

  border:2px solid transparent;
  border-radius:14px;

  padding:6px;

  background:#fff;

  transition:.2s ease;

}

/* Hover */
.variant-item:hover{
  border-color:#2f6de1;

  transform:translateY(-2px);
}

/* Active */
.variant-item.active{
  border-color:#2f6de1;

  background:#eef4ff;

  box-shadow:
    0 6px 16px rgba(47,109,225,.12);
}

/* Thumbnail image */
.variant-item img{
  width:100%;
  aspect-ratio:1/1;

  object-fit:cover;

  border-radius:10px;

  display:block;
}

/* Label */
.variant-item span{
  display:block;

  margin-top:8px;

  text-align:center;

  font-size:12px;
  font-weight:600;

  line-height:1.3;

  color:#333;
}

/* Mobile */
@media(max-width:768px){
  .variant-list{

  grid-template-columns:
    repeat(3,1fr);

  max-height:300px;

}
  .variant-item{
    width:85px;
  }

  .variant-item span{
    font-size:11px;
  }

}
.qty-control{
  display:flex;
  align-items:center;
  gap:10px;

  margin-top:10px;
}

.qty-control button{
  width:28px;
  height:28px;

  border:none;

  border-radius:8px;

  background:#eef4ff;

  color:#2f6de1;

  font-size:18px;

  cursor:pointer;
}

.qty-control span{
  min-width:24px;
  text-align:center;
  font-weight:700;
}

.item-subtotal{
  margin-top:10px;

  font-weight:700;

  color:#1d4fb8;
}
.cart-footer{

  position:sticky;
  bottom:0;

  background:#fff;

  padding:20px;

  border-top:1px solid #eee;
}

.cart-total{

  display:flex;
  justify-content:space-between;

  margin-bottom:12px;
}

.cart-total strong{
  color:#1d4fb8;
  font-size:20px;
}

#checkoutBtn{

  width:100%;

  border:none;

  padding:16px;

  border-radius:14px;

  background:#1d4fb8;

  color:#fff;

  font-weight:700;

  cursor:pointer;
}
#cartItems{
  overflow-y:auto;
  padding:20px;
  padding-bottom:120px;
}
.cart-drawer{
  position:fixed;

  top:0;
  right:-420px;

  width:400px;
  max-width:100%;

  height:100vh;

  background:#fff;

  box-shadow:-8px 0 30px rgba(0,0,0,0.1);

  z-index:9999;

  transition:.3s ease;
}

.cart-drawer.active{
  right:0;
}

.cart-header{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px;

  border-bottom:1px solid #eee;
}

.cart-items{
  padding:20px;

  height:calc(100vh - 90px);

  overflow-y:auto;
}

.cart-item{
  display:flex;
  gap:14px;

  margin-bottom:20px;
}

.cart-item img{
  width:80px;
  height:80px;

  object-fit:cover;

  border-radius:14px;
}

.cart-item-info h4{
  margin-bottom:6px;
}

.cart-item-info p{
  font-size:14px;
  color:#666;
}
.cart-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:10px;
}

.remove-cart-item{
  border:none;
  background:none;

  font-size:18px;

  color:#999;

  cursor:pointer;

  transition:.2s;
}

.remove-cart-item:hover{
  color:#ff3b30;
}
.toast{
  position:fixed;

  bottom:30px;
  left:50%;

  transform:translateX(-50%) translateY(100px);

  background:#111;

  color:#fff;

  padding:16px 24px;

  border-radius:16px;

  font-weight:600;

  z-index:99999;

  opacity:0;

  transition:.35s ease;
}

.toast.show{
  opacity:1;

  transform:translateX(-50%) translateY(0);
}
.design-badge{

    display:inline-block;

    margin-top:4px;

    padding:3px 8px;

    border-radius:999px;

    background:#eaf2ff;

    color:#2d5bd1;

    font-size:11px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

}

.cart-item a{

    display:block;

}

.cart-item a img{

    transition:.25s;

}

.cart-item a:hover img{

    transform:scale(1.05);

}
.side-selector{

    margin-top:25px;

    text-align:center;

}

.side-title{

    font-weight:600;

    margin-bottom:12px;

}

.side-list{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.side-thumb{

    width:72px;

    cursor:pointer;

    border:2px solid transparent;

    border-radius:14px;

    padding:8px;

    transition:.25s;

}

.side-thumb img{

    width:56px;

    height:56px;

    object-fit:contain;

    display:block;

    margin:auto;

}

.side-thumb span{

    display:block;

    margin-top:8px;

    font-size:13px;

    font-weight:600;

}

.side-thumb:hover{

    transform:translateY(-2px);

}

.side-thumb.active{

    border-color:#2f5fd0;

    background:#eef4ff;

}