/* ============================================================
   css/02-layout.css  (urutan load 2 dari 8)
   Isi: Header, hero, search bar, tabs, quick filter, grid menu, kartu menu.
   Pecahan dari style.css lama. Urutan file = urutan eksekusi/cascade, jangan ditukar.
   ============================================================ */

/* ─────────── HEADER ─────────── */
header{
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  border-bottom:1px solid var(--border);
  padding:11px 14px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:200;gap:8px;
}
.logo{
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  font-size:16px;font-weight:900;
  color:var(--caramel-light);
  line-height:1.1;
  flex:1;min-width:0;
}
.logo small{
  display:block;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:9.5px;font-weight:500;color:var(--muted);
  letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;
}
.header-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.help-btn{
  height:34px;padding:0 12px;border-radius:20px;
  background:var(--caramel-pale);border:1px solid var(--border-glow);
  color:var(--accent-text);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.4px;white-space:nowrap;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .15s,background .2s;
}
.help-btn:active{transform:scale(.95)}
.cart-btn{
  position:relative;
  background:var(--caramel);color:var(--on-accent);
  border:none;border-radius:30px;
  padding:8px 14px 8px 12px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:background .2s,transform .15s;
}
.cart-btn:active{transform:scale(.95)}
.cart-btn.bump{animation:cartBump .35s ease}
@keyframes cartBump{
  0%{transform:scale(1)}
  40%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
.cart-count{
  background:var(--on-accent);color:var(--caramel-light);
  border-radius:50%;min-width:20px;height:20px;padding:0 5px;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* ─────────── HERO (compact) ─────────── */
.hero{
  position:relative;overflow:hidden;
  padding:36px 20px 32px;
  text-align:center;
  background:
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(90,40,5,0.9) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(50,20,2,0.5) 0%, transparent 60%),
    var(--bg);
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle 1px at 20% 30%, color-mix(in srgb,var(--caramel) 35%,transparent) 0%, transparent 1px),
    radial-gradient(circle 1px at 75% 20%, rgba(240,192,106,.25) 0%, transparent 1px),
    radial-gradient(circle 1px at 55% 65%, color-mix(in srgb,var(--caramel) 20%,transparent) 0%, transparent 1px),
    radial-gradient(circle 1px at 35% 75%, rgba(240,192,106,.15) 0%, transparent 1px),
    radial-gradient(circle 1px at 88% 55%, color-mix(in srgb,var(--caramel) 20%,transparent) 0%, transparent 1px);
  pointer-events:none;z-index:0;
}
.hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--caramel),transparent);
  opacity:.3;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--caramel) 15%,transparent),color-mix(in srgb,var(--caramel) 5%,transparent));
  border:1px solid color-mix(in srgb,var(--caramel) 35%,transparent);
  color:var(--accent-text);
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:5px 14px;border-radius:30px;margin-bottom:18px;
  box-shadow:0 0 20px color-mix(in srgb,var(--caramel) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.05);
  animation:heroBadgePulse 3s ease-in-out infinite;
}
@keyframes heroBadgePulse{
  0%,100%{box-shadow:0 0 20px color-mix(in srgb,var(--caramel) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.05)}
  50%{box-shadow:0 0 30px color-mix(in srgb,var(--caramel) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.05)}
}
.hero h1{
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  font-size:34px;font-weight:900;
  color:var(--caramel-light);
  line-height:1.02;margin-bottom:12px;
  text-shadow:0 2px 20px color-mix(in srgb,var(--caramel) 30%,transparent);
  letter-spacing:-.5px;
}
.hero h1 span{
  color:var(--white);
  background:linear-gradient(135deg,#fff 30%,var(--caramel-light) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero p{font-size:13px;color:var(--cream-dim);max-width:320px;margin:0 auto 18px;line-height:1.65;opacity:.85}
.hero-cta{display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;align-items:stretch;margin:0 auto 16px;max-width:420px}
.hero-btn{
  display:inline-flex;align-items:center;justify-content:center;
  flex:1 1 0;min-width:0;white-space:nowrap;text-align:center;
  min-height:48px;padding:0 10px;border-radius:30px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13px;font-weight:700;
  text-decoration:none;cursor:pointer;
}
@media(max-width:360px){.hero-btn{font-size:12px;padding:0 6px}}
.hero-btn:active{transform:scale(.97)}
.hero-btn:focus-visible{outline:2px solid var(--caramel-light);outline-offset:3px}
.hero-btn-primary{
  background:linear-gradient(135deg,var(--caramel-light),var(--caramel));color:var(--on-accent);border:none;
  box-shadow:0 6px 20px color-mix(in srgb,var(--caramel) 35%,transparent);
}
.hero-btn-ghost{background:transparent;color:var(--cream);border:1.5px solid var(--border-glow)}
.hero-pills{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.pill{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:var(--cream-dim);font-size:11px;font-weight:500;
  padding:5px 11px;border-radius:20px;
  backdrop-filter:blur(4px);
  transition:border-color .2s,background .2s;
}
.pill:hover{background:color-mix(in srgb,var(--caramel) 8%,transparent);border-color:color-mix(in srgb,var(--caramel) 25%,transparent)}
.pill span{color:var(--accent-text);margin-right:3px}

/* ─────────── SEARCH BAR ─────────── */
.search-wrap{
  padding:12px 14px 0;
  position:sticky;top:55px;z-index:160;
  background:var(--bg);
}
.search-box{
  position:relative;
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:12px;
  display:flex;align-items:center;
  transition:border-color .2s;
}
.search-box:focus-within{border-color:var(--caramel)}
.search-ico{
  padding:0 10px 0 14px;
  font-size:14px;opacity:.7;
}
.search-box input{
  flex:1;
  background:transparent;border:none;outline:none;
  padding:11px 0;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;
  color:var(--cream);
}
.search-box input::placeholder{color:var(--muted)}
.search-clear{
  display:none;
  background:var(--card);border:none;
  color:var(--muted);
  width:24px;height:24px;border-radius:50%;
  margin-right:8px;
  font-size:11px;font-weight:700;
  cursor:pointer;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.search-clear.visible{display:flex}
.search-clear:active{background:var(--caramel-pale);color:var(--accent-text)}

/* ─────────── TABS ─────────── */
.tabs-wrap{
  position:sticky;top:114px;z-index:155;
  background:color-mix(in srgb,var(--bg) 97%,transparent);
  border-bottom:1px solid var(--border);
  padding:8px 14px 11px;
  margin-top:12px;
}
.tabs-label{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.tabs-label-text{
  font-size:10.5px;font-weight:700;
  color:var(--muted);letter-spacing:1px;text-transform:uppercase;
}
.tabs-swipe-hint{
  font-size:10px;font-weight:600;color:var(--accent-text);
  opacity:.8;
  animation:hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{opacity:.5;transform:translateX(0)}
  25%{opacity:1;transform:translateX(-3px)}
  75%{opacity:1;transform:translateX(3px)}
}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:none;border:1px solid var(--border);
  border-radius:20px;padding:7px 14px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:12.5px;font-weight:500;
  color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:all .2s;flex-shrink:0;
}
.tab.active{background:var(--caramel);color:var(--on-accent);border-color:var(--caramel);font-weight:700}

/* ─────────── QUICK FILTERS ─────────── */
.qfilter-wrap{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:10px 14px 6px;-webkit-overflow-scrolling:touch;
}
.qfilter-wrap::-webkit-scrollbar{display:none}
.qfilter{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:16px;padding:5px 12px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:11.5px;font-weight:600;
  color:var(--cream-dim);cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:all .15s;
}
.qfilter.active{background:var(--caramel-pale);border-color:var(--caramel);color:var(--caramel-light)}

/* ─────────── MENU ─────────── */
.menu-wrap{padding:8px 14px 140px;max-width:900px;margin:0 auto}
.cat-title{
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;font-size:20px;font-weight:700;
  color:var(--caramel-light);
  margin:24px 0 12px;
  display:flex;align-items:center;gap:10px;
}
.cat-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-glow),transparent)}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

/* ─────────── MENU CARD ─────────── */
.menu-card{
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .18s cubic-bezier(.2,0,.2,1),border-color .18s,background .18s,box-shadow .18s;
  position:relative;
  display:flex;flex-direction:column;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.menu-card:active{
  transform:scale(.97);
}
.menu-card.selected{
  border-color:var(--caramel);
  background:rgba(18,28,30,0.7);
  box-shadow:0 0 0 1px var(--caramel), 0 4px 16px color-mix(in srgb,var(--caramel) 15%,transparent);
}
.menu-card.selected::after{
  content:'✓';
  position:absolute;top:8px;right:8px;
  background:var(--caramel);color:var(--on-accent);
  width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  z-index:3;
  box-shadow:0 2px 6px color-mix(in srgb,var(--caramel) 40%,transparent);
}
.card-emoji{
  height:135px;
  display:flex;align-items:center;justify-content:center;
  font-size:42px;
  background:linear-gradient(160deg, var(--surface2) 0%, rgba(18,10,4,0.9) 100%);
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.card-emoji::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.3) 100%);
  pointer-events:none;
}
.menu-card.selected .card-emoji{background:linear-gradient(160deg,rgba(18,28,30,.9) 0%,rgba(10,16,18,.9) 100%)}
.signature-tag{
  position:absolute;top:8px;left:8px;
  background:var(--caramel);
  color:var(--on-accent);
  font-size:8.5px;font-weight:900;letter-spacing:.6px;
  padding:3px 8px;border-radius:20px;
  text-transform:uppercase;z-index:2;
  box-shadow:0 2px 8px color-mix(in srgb,var(--caramel) 45%,transparent);
}
.new-tag{
  position:absolute;top:7px;left:7px;
  background:linear-gradient(135deg,var(--green),#2D8F4F);
  color:white;
  font-size:9px;font-weight:800;letter-spacing:.5px;
  padding:2px 7px 2px 6px;border-radius:10px;
  text-transform:uppercase;z-index:2;
  box-shadow:0 2px 6px rgba(45,143,79,0.4);
  animation:newPulse 2s ease-in-out infinite;
  display:inline-flex;align-items:center;gap:3.5px;
}
.new-tag svg{
  width:9px;height:9px;flex-shrink:0;
}
@keyframes newPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
.signature-tag + .new-tag{
  /* kalau signature & new nempel bareng di kiri, susun ke bawah biar gak numpuk */
  top:30px;
}
/* Sparkle star icon di tab "Menu Baru" & section header "Menu Baru" */
.tab-newicon{
  width:11px;height:11px;
  vertical-align:-1px;
  color:var(--green);
  margin-right:2px;
}
.tab.active .tab-newicon{
  color:var(--on-accent);
}
.cat-newicon{
  width:18px;height:18px;
  vertical-align:-3px;
  color:var(--green);
  margin-right:4px;
}

/* Highlight section Menu Baru */
.new-section .cat-title{
  background:linear-gradient(135deg, rgba(82,200,122,0.15), transparent);
  padding:8px 12px;border-radius:10px;
  border-left:3px solid var(--green);
}
.card-body{padding:10px 10px 11px;flex:1;display:flex;flex-direction:column;gap:6px}
.card-name{
  font-size:12.5px;font-weight:700;
  color:var(--cream);line-height:1.3;
  min-height:32px;
}
.size-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9px;font-weight:700;
  color:var(--cream-dim);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:2px 7px;border-radius:20px;
  letter-spacing:.3px;
  align-self:flex-start;
  text-transform:uppercase;
}
.size-badge-large{
  background:color-mix(in srgb,var(--caramel) 8%,transparent);
  border-color:color-mix(in srgb,var(--caramel) 30%,transparent);
  color:var(--caramel-light);
}
.price-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:auto}
.price-normal{
  font-size:10px;color:var(--muted);
  text-decoration:line-through;
}
.price-disc{
  font-size:14.5px;font-weight:800;
  color:var(--accent-text);
  letter-spacing:-.2px;
}
.card-add-btn{
  margin-top:7px;
  background:linear-gradient(135deg, var(--caramel-pale), rgba(18,28,30,0.5));
  border:1px solid color-mix(in srgb,var(--caramel) 25%,transparent);
  color:var(--caramel-light);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:11.5px;font-weight:700;
  padding:7px 6px;border-radius:9px;
  cursor:pointer;
  transition:all .15s cubic-bezier(.2,0,.2,1);
  letter-spacing:.2px;
}
.card-add-btn:active{
  background:var(--caramel);
  color:var(--on-accent);
  transform:scale(.95);
  box-shadow:0 2px 8px color-mix(in srgb,var(--caramel) 30%,transparent);
}
.menu-card.selected .card-add-btn{
  background:var(--caramel);color:var(--on-accent);
  border-color:var(--caramel);
  box-shadow:0 2px 8px color-mix(in srgb,var(--caramel) 20%,transparent);
}