/* ============================================================
   css/01-base.css  (urutan load 1 dari 8)
   Isi: Variabel warna (:root), light mode, grain, welcome modal.
   Pecahan dari style.css lama. Urutan file = urutan eksekusi/cascade, jangan ditukar.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0F1315;
  --surface:#161B1E;
  --surface2:#161B1E;
  --card:#1B2124;
  --caramel:#0E7C86;          /* isi aksen (tombol, tab aktif): tosca */
  --caramel-light:#5DD6DE;    /* teks aksen kuat */
  --caramel-pale:#12363A;
  --cream:#EEF2F1;            /* teks utama */
  --cream-dim:#B4BEC2;
  --white:#FFFFFF;
  --muted:#8E9AA0;
  --border:#273036;
  --border-glow:#6F7C84;      /* batas kontrol interaktif */
  --red:#FF8FA3;
  --green:#5FD08A;
  --accent-text:#4CC9D1;
  --on-accent:#FFFFFF;
  --focus:#FFD83D;
  --card-line:#323B40;
  --rule:#323B40;
  --inv-bg:#EEF2F1;
  --inv-fg:#10171A;
  --inv-accent:#0B6670;
  --sticker:#FFD83D;
  --sticker-ink:#14161A;
  --radius:8px;
  --radius-sm:6px;
}
/* ── LIGHT MODE ── */
body.light-mode{
  --bg:#F4F6F5;
  --surface:#E7ECEB;
  --surface2:#E7ECEB;
  --card:#FFFFFF;
  --caramel:#0B6F79;
  --caramel-light:#08545C;
  --caramel-pale:#D8EEF0;
  --cream:#10171A;
  --cream-dim:#40494E;
  --muted:#5A646A;
  --border:#D3DBD9;
  --border-glow:#76848A;
  --red:#B3261E;
  --green:#12703A;
  --accent-text:#0B6F79;
  --on-accent:#FFFFFF;
  --focus:#10171A;
  --card-line:#10171A;
  --rule:#10171A;
  --inv-bg:#10171A;
  --inv-fg:#F4F6F5;
  --inv-accent:#5DD6DE;
}
body.light-mode .cart-drawer,
body.light-mode .item-modal{background:var(--surface)}
body.light-mode .welcome-modal{background:var(--surface)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--cream);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Cegah background scroll saat modal buka — tanpa block scroll dalam modal */
body.modal-open {
  overflow: hidden;
  /* iOS fix: gunakan touch-action bukan overflow */
  position: fixed;
  width: 100%;
}



/* ─────────── WELCOME MODAL ─────────── */
.welcome-overlay{
  display:none;
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(6px);
  align-items:flex-end;justify-content:center;
  animation:fadeIn .25s ease;
}
.welcome-overlay.open{display:flex}
.welcome-modal{
  background:linear-gradient(180deg,#1F1408 0%,var(--surface) 100%);
  border-top:2px solid var(--caramel);
  border-radius:24px 24px 0 0;
  width:100%;max-width:480px;
  padding:28px 22px 32px;
  text-align:center;
  position:relative;
  max-height:92vh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  animation:slideUp .35s cubic-bezier(.4,0,.2,1);
}
.welcome-modal::before{
  content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:44px;height:4px;border-radius:2px;background:var(--border-glow);
}
.welcome-emoji{
  font-size:52px;margin-bottom:12px;
  display:block;
  animation:bounce 1s ease infinite;
}
.welcome-badge{
  display:inline-block;
  background:var(--caramel-pale);border:1px solid var(--border-glow);
  color:var(--caramel-light);font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:5px 14px;border-radius:30px;margin-bottom:14px;
}
.welcome-title{
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;font-size:32px;font-weight:900;
  color:var(--caramel-light);line-height:1.1;
}
.welcome-title span{color:var(--white)}
.welcome-sub{
  font-size:13px;color:var(--cream-dim);
  margin:8px 0 22px;
}
.how-to-list{
  display:flex;flex-direction:column;gap:10px;
  text-align:left;margin-bottom:22px;
}
.how-step{
  display:flex;align-items:center;gap:12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;
}
.how-num{
  flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  background:var(--caramel);color:var(--on-accent);
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;font-weight:900;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
.how-text{font-size:13.5px;color:var(--cream);line-height:1.45}
.how-text small{font-size:11.5px;color:var(--muted);font-weight:400}
.welcome-cta{
  width:100%;
  background:var(--caramel);color:var(--on-accent);
  border:none;border-radius:14px;
  padding:15px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;font-weight:800;
  cursor:pointer;letter-spacing:.3px;
  transition:transform .15s,background .2s;
  box-shadow:0 4px 20px color-mix(in srgb,var(--caramel) 35%,transparent);
}
.welcome-cta:active{transform:scale(.97)}
.outlet-notice{
  background:color-mix(in srgb,var(--caramel) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--caramel) 25%,transparent);
  border-radius:10px;padding:10px 12px;
  font-size:11.5px;color:var(--cream-dim);
  line-height:1.6;text-align:left;
  margin-bottom:14px;
}
.cart-notice{
  background:color-mix(in srgb,var(--caramel) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--caramel) 20%,transparent);
  border-radius:8px;padding:9px 12px;
  font-size:11px;color:var(--muted);
  line-height:1.6;margin-bottom:10px;
}
.welcome-foot{
  font-size:11px;color:var(--muted);margin-top:14px;
  line-height:1.6;text-align:center;
}
.help-inline{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--caramel-pale);color:var(--accent-text);
  font-weight:800;font-size:11px;
  vertical-align:middle;margin:0 1px;
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}