/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
img,picture,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

/* ============================================================
   VARIABLES
   ============================================================ */
:root{
  /* Palet dari logo */
  --c-navy:#1a1f5c;
  --c-navy-2:#252d78;
  --c-navy-hover:#0f1444;
  --c-violet:#6c63ff;
  --c-violet-hover:#5a50f0;
  --c-violet-soft:#efeeff;
  --c-cyan:#4dd8e8;
  --c-cyan-soft:#e6fafc;

  /* Neutrals */
  --c-bg:#ffffff;
  --c-bg-soft:#f8f9fb;
  --c-bg-alt:#f2f4f7;
  --c-border:#e9ebf0;
  --c-border-soft:#f0f1f5;

  /* Text */
  --c-text:#0d1230;
  --c-text-soft:#4b5168;
  --c-muted:#8b90a3;
  --c-muted-2:#b0b4c4;

  /* Semantic */
  --c-accent:var(--c-violet);
  --c-danger:#ef4444;
  --c-success:#10b981;
  --c-warning:#f59e0b;

  /* Badge */
  --c-badge-limited:#ef4444;
  --c-badge-presale:var(--c-violet);
  --c-badge-ready:#10b981;
  --c-badge-sold:#94a3b8;

  /* Typography */
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Menlo,monospace;

  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:16px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-2xl:28px;
  --fs-3xl:36px;
  --fs-4xl:44px;

  /* Layout */
  --container:1280px;
  --gap:16px;
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* Shadows — soft, clean */
  --shadow-xs:0 1px 2px rgba(13,18,48,.04);
  --shadow-sm:0 1px 3px rgba(13,18,48,.06),0 1px 2px rgba(13,18,48,.04);
  --shadow:0 4px 12px rgba(13,18,48,.06),0 2px 4px rgba(13,18,48,.04);
  --shadow-md:0 12px 24px rgba(13,18,48,.08),0 4px 8px rgba(13,18,48,.04);
  --shadow-lg:0 24px 48px rgba(13,18,48,.1),0 8px 16px rgba(13,18,48,.05);
  --shadow-accent:0 8px 24px rgba(108,99,255,.2);

  --t-fast:.15s cubic-bezier(.4,0,.2,1);
  --t:.25s cubic-bezier(.4,0,.2,1);
  --t-slow:.4s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   BASE
   ============================================================ */
body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{overflow:hidden}

h1,h2,h3,h4,h5{
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--c-text);
}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}

p{line-height:1.65}
.icon{flex-shrink:0;display:inline-block;vertical-align:middle}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;background:var(--c-violet);color:#fff;padding:10px 16px;border-radius:var(--radius);z-index:9999}

/* ============================================================
   BUTTON — clean, pill
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;
  background:var(--c-navy);
  color:#fff;
  border:0;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:var(--fs-sm);
  letter-spacing:.01em;
  cursor:pointer;
  transition:all var(--t-fast);
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.btn:hover{
  background:var(--c-navy-hover);
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn-block{width:100%}
.btn-outline{
  background:transparent;
  color:var(--c-navy);
  border:1.5px solid var(--c-border);
  box-shadow:none;
}
.btn-outline:hover{
  background:var(--c-bg-soft);
  border-color:var(--c-navy);
  color:var(--c-navy);
  box-shadow:var(--shadow-sm);
}
.btn-accent{
  background:var(--c-violet);
  box-shadow:var(--shadow-accent);
}
.btn-accent:hover{
  background:var(--c-violet-hover);
  box-shadow:0 12px 32px rgba(108,99,255,.28);
}
.btn-sm{padding:9px 18px;font-size:var(--fs-xs)}
.btn-lg{padding:15px 32px;font-size:var(--fs-base)}

/* ============================================================
   FORM
   ============================================================ */
input[type=text],input[type=email],input[type=search],input[type=tel],input[type=number],input[type=password],select,textarea{
  width:100%;padding:13px 16px;
  background:var(--c-bg);
  border:1.5px solid var(--c-border);
  border-radius:var(--radius);
  font-size:var(--fs-base);
  font-family:inherit;
  transition:all var(--t-fast);
  color:var(--c-text);
}
input::placeholder,textarea::placeholder{color:var(--c-muted-2)}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--c-violet);
  box-shadow:0 0 0 4px var(--c-violet-soft);
}
label{
  display:block;
  font-size:var(--fs-sm);
  font-weight:600;
  margin-bottom:8px;
  color:var(--c-text-soft);
  letter-spacing:-.005em;
}

/* ============================================================
   PRODUCT CARD — soft, modern
   ============================================================ */
.product-card{
  position:relative;
  background:var(--c-bg);
  display:flex;flex-direction:column;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.product-card:hover{
  border-color:transparent;
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.product-thumb{
  position:relative;display:block;
  aspect-ratio:1/1;
  background:var(--c-bg-alt);
  overflow:hidden;
  margin:0;
}
.product-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow);
}
.product-card:hover .product-thumb img{transform:scale(1.06)}
.thumb-placeholder{
  width:100%;height:100%;
  background:linear-gradient(135deg,#f1f3f8 0%,#e4e8f0 100%);
}

.product-badge{
  position:absolute;top:12px;left:12px;
  padding:5px 12px;
  font-size:10px;font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  border-radius:var(--radius-pill);
  z-index:2;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  backdrop-filter:blur(8px);
}
.badge-limited{background:var(--c-badge-limited)}
.badge-presale{background:var(--c-badge-presale)}
.badge-ready{background:var(--c-badge-ready)}
.badge-sold{background:var(--c-badge-sold)}

.product-title{
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:1.45;
  padding:14px 14px 0;
  margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:3.3em;
  color:var(--c-text);
  letter-spacing:-.005em;
}
.product-title a{transition:color var(--t-fast)}
.product-title a:hover{color:var(--c-violet)}

.product-price{
  font-size:var(--fs-base);
  font-weight:800;
  color:var(--c-navy);
  padding:0 14px 16px;
  margin-top:auto;
  letter-spacing:-.02em;
}
.product-price .price-old{
  color:var(--c-muted-2);
  text-decoration:line-through;
  font-weight:500;
  margin-right:6px;
  font-size:var(--fs-xs);
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-drawer-backdrop{
  position:fixed;inset:0;
  background:rgba(13,18,48,.45);
  opacity:0;visibility:hidden;
  transition:opacity var(--t),visibility var(--t);
  z-index:999;
  backdrop-filter:blur(4px);
}
.cart-drawer-backdrop.is-open{opacity:1;visibility:visible}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:100%;max-width:440px;
  background:var(--c-bg);
  z-index:1000;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-24px 0 64px rgba(13,18,48,.15);
}
.cart-drawer.is-open{transform:translateX(0)}
.cart-drawer-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 24px;
  border-bottom:1px solid var(--c-border);
}
.cart-drawer-header h2{
  font-size:var(--fs-lg);
  font-weight:700;
  letter-spacing:-.02em;
}
.cart-drawer-close{
  width:38px;height:38px;
  border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--c-text-soft);
  transition:all var(--t-fast);
  background:var(--c-bg-alt);
}
.cart-drawer-close:hover{
  background:var(--c-navy);
  color:#fff;
  transform:rotate(90deg);
}
.cart-drawer-body{flex:1;overflow-y:auto;padding:24px}
.cart-empty{
  text-align:center;
  color:var(--c-muted);
  padding:60px 0;
  font-size:var(--fs-sm);
}
.cart-drawer-footer{
  border-top:1px solid var(--c-border);
  padding:22px 24px;
  background:var(--c-bg);
}
.cart-drawer-footer .subtotal-row{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:18px;
  font-weight:600;
  font-size:var(--fs-md);
}
.cart-drawer-footer .amount{
  color:var(--c-violet);
  font-size:var(--fs-xl);
  font-weight:800;
  letter-spacing:-.02em;
}
.drawer-actions{display:flex;flex-direction:column;gap:10px}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-header{
  text-align:center;
  margin-bottom:48px;
}
.section-eyebrow{
  display:inline-block;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-violet);
  background:var(--c-violet-soft);
  padding:6px 14px;
  border-radius:var(--radius-pill);
  margin-bottom:16px;
}
.section-title{
  font-size:var(--fs-3xl);
  font-weight:800;
  margin-bottom:12px;
  letter-spacing:-.03em;
  color:var(--c-text);
}
.section-subtitle{
  color:var(--c-muted);
  font-size:var(--fs-base);
  max-width:560px;
  margin:0 auto;
  line-height:1.6;
}

/* ============================================================
   UTILITY
   ============================================================ */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.text-center{text-align:center}
.hidden{display:none!important}

.notice{
  padding:14px 18px;
  border-radius:var(--radius);
  margin-bottom:16px;
  font-size:var(--fs-sm);
  border-left:3px solid;
  font-weight:500;
}
.notice-info{background:var(--c-violet-soft);border-color:var(--c-violet);color:var(--c-navy)}
.notice-success{background:#ecfdf5;border-color:var(--c-success);color:#065f46}
.notice-error{background:#fef2f2;border-color:var(--c-danger);color:#991b1b}

.not-found{text-align:center;padding:80px 20px}
.error-code{
  font-size:7rem;
  line-height:1;
  margin-bottom:16px;
  font-weight:900;
  background:linear-gradient(135deg,var(--c-violet),var(--c-cyan));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.04em;
}
.no-results{text-align:center;padding:60px 0;color:var(--c-muted)}

/* ============================================================
   STICKY FOOTER — biar footer selalu di bawah
   ============================================================ */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main {
  flex: 1 0 auto;
}
.site-footer,
.m-footer {
  flex-shrink: 0;
}