:root{--max:1200px;--gap:14px;--brand:#111827;--accent:#f59e0b;--bg:#fff;--muted:#6b7280;--ring:#fde68a}
  *{box-sizing:border-box}
  body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#fafafa;color:#111;margin:0}
  .badge{display:inline-flex;align-items:center;gap:6px;background:#111;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px}
  .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
  .hero img{width:100%;height:auto;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
  .h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:8px 0 12px}
  .muted{color:var(--muted)}
  .card{background:#fff;border:1px solid #eee;border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
  .grid{display:grid;gap:var(--gap)}
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
  @media (max-width:960px){.hero{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:1fr}}
  label{display:block;font-weight:600;margin:8px 0 6px}
  input,select,textarea{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
  .price{font-size:clamp(22px,3.5vw,32px);font-weight:800}
  .cta{display:flex;gap:10px;flex-wrap:wrap}
  .cta a,.cta button{border:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:700}
  .btn-primary{background:#111827;color:#fff}
  .btn-ghost{background:#fff;border:1px solid #e5e7eb}

  /* Topbar */
  .topbar{margin-bottom:10px}
  .brandline{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
  .topbar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .cartCount{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:999px;background:#fef3c7;color:#111;font-size:12px;padding:0 6px;margin-left:6px}

  /* Trust */
  .trust{display:flex;gap:10px;flex-wrap:wrap}
  .trustItem{background:#fff;border:1px solid #eee;border-radius:999px;padding:8px 12px;font-weight:600;font-size:13px}

  /* Shop filters */
  .shopFilters{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:14px;align-items:end}
  .toggleWrap{display:flex;flex-direction:column;gap:6px}
  .toggle{display:flex;gap:10px;align-items:center;font-weight:700}
  .toggle input{width:auto}
  @media (max-width:960px){.shopFilters{grid-template-columns:1fr}}

  /* Products */
  .products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media (max-width:1100px){.products{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.products{grid-template-columns:1fr}}
  .pCard{background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04);cursor:pointer}
  .pMedia{position:relative}
  .pMedia img{width:100%;aspect-ratio:1/1.05;object-fit:cover;display:block}
  .pBadge{position:absolute;left:10px;top:10px;background:#111;color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
  .pBody{padding:12px}
  .pTitle{margin:0;font-size:16px}
  .pMeta{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
  .chip{border:1px solid #eee;background:#fff;border-radius:999px;padding:6px 10px;font-size:12px}
  .pActions{display:flex;gap:10px;flex-wrap:wrap}
  .pActions button{flex:1}

  /* Summary row */
  .summaryRow{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:12px;flex-wrap:wrap}

  /* FAQ */
  .faq details{border:1px solid #eee;border-radius:12px;padding:12px}
  .faq summary{cursor:pointer;font-weight:700}

  /* Drawer */
  .drawer{position:fixed;inset:0;display:none}
  .drawer.open{display:block}
  .drawerOverlay{position:absolute;inset:0;background:rgba(0,0,0,.35)}
  .drawerPanel{position:absolute;right:0;top:0;height:100%;width:min(420px,92vw);background:#fff;border-left:1px solid #eee;display:flex;flex-direction:column}
  .drawerHead{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid #eee}
  .xBtn{border:none;background:#fff;cursor:pointer;font-size:18px}
  .drawerBody{padding:14px;overflow:auto;flex:1}
  .drawerFoot{padding:14px;border-top:1px solid #eee}
  .totals{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .cartItems{display:flex;flex-direction:column;gap:10px}
  .cartRow{border:1px solid #eee;border-radius:14px;padding:12px;display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
  .cartRowTitle{font-weight:800}
  .cartRowActions{display:flex;align-items:center;gap:8px}
  .qtyBtn{border:1px solid #eee;background:#fff;border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:18px}
  .qty{min-width:18px;text-align:center;font-weight:800}
  .rmBtn{border:1px solid #fee2e2;background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
</style>
<style>
.pagination .pageBtn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

.pagination .pageBtn.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* 🎀 PEMBE PASTA MAĞAZASI TEMASI */
:root{
  --brand:#ec4899;
  --accent:#fb7185;
  --soft:#fce7f3;
  --bg:#fff5f9;
  --text:#3f1d2b;
  --ring:#fbcfe8;
}

/* Genel */
body{
  background:var(--bg);
  color:var(--text);
}

/* Badge */
.badge{
  background:linear-gradient(135deg,#ec4899,#fb7185);
}

/* Hero */
.hero{
  background:linear-gradient(180deg,#fff 0%,#fce7f3 100%);
  padding:20px;
  border-radius:20px;
}

/* Kartlar */
.card,
.pCard{
  background:#fff;
  border:1px solid #fbcfe8;
  box-shadow:0 8px 24px rgba(236,72,153,.08);
}

/* Ürün etiketi */
.pBadge{
  background:#ec4899;
}

/* Chip */
.chip{
  border-color:#fbcfe8;
  background:#fff0f6;
  color:#9d174d;
}

/* Butonlar */
.btn-primary{
  background:linear-gradient(135deg,#ec4899,#fb7185);
  color:#fff;
}

.btn-primary:hover{
  filter:brightness(1.05);
}

.btn-ghost{
  border:1px solid #fbcfe8;
  background:#fff;
  color:#9d174d;
}

/* Fiyat */
.price{
  color:#be185d;
}

/* Input focus */
input:focus,
select:focus,
textarea:focus{
  border-color:#ec4899;
  box-shadow:0 0 0 4px var(--ring);
}

/* Trust pill */
.trustItem{
  background:#fff;
  border-color:#fbcfe8;
}

/* Sepet */
.drawerPanel{
  background:#fff;
}

.cartRow{
  border-color:#fbcfe8;
}

/* Sepet toplam */
.cartTotal,
#cartTotal{
  color:#be185d;
}

/* Toggle */
.toggle span{
  color:#9d174d;
}

.brandline {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

/* MOBİL */
@media (max-width: 768px) {
  .brandline {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* 👨‍🍳 CHEF SECTION */
.chefSection{
  margin:32px 0;
}

.chefWrap{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:24px;
  background:linear-gradient(180deg,#fff,#fce7f3);
  border:1px solid #fbcfe8;
  border-radius:22px;
  padding:24px;
  box-shadow:0 12px 32px rgba(236,72,153,.08);
}

.chefPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
}

.chefBadge{
  display:inline-block;
  background:linear-gradient(135deg,#ec4899,#fb7185);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:10px;
}

.chefTitle{
  font-size:clamp(22px,3vw,30px);
  margin:6px 0 10px;
}

.chefText{
  color:#7a2947;
  line-height:1.6;
  margin-bottom:12px;
}

.chefList{
  list-style:none;
  padding:0;
  margin:0 0 16px;
}

.chefList li{
  margin-bottom:6px;
  font-weight:600;
  color:#9d174d;
}

.chefCta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Mobil */
@media (max-width: 960px){
  .chefWrap{
    grid-template-columns:1fr;
    text-align:center;
  }
  .chefList{
    text-align:left;
    display:inline-block;
  }
  .chefCta{
    justify-content:center;
  }
}
/* MOBİL ALT NAV ÇAKIŞMA ENGELİ */
@media (max-width: 768px) {
  main {
    padding-bottom: 90px; /* alt nav yüksekliği */
  }
}
#mobileBottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 40;
}
#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}
@media (max-width: 768px) {
  .drawerPanel {
    bottom: 70px; /* alt nav yüksekliği */
    height: calc(100% - 70px);
  }
}
@media (max-width: 768px) {
  .drawerBody {
    padding-bottom: 80px;
  }
}
@media (max-width: 768px) {
  .topbar-actions {
    width: 100%;
    justify-content: center;
  }

  .topbar-actions a,
  .topbar-actions button {
    flex: 1 1 auto;
    min-width: 140px;
    justify-content: center;
  }
}

</style>
<style>
  /* 🎀 PEMBE PASTA MAĞAZASI TEMASI */
  :root{
    --brand:#ec4899;
    --accent:#fb7185;
    --soft:#fce7f3;
    --bg:#fff5f9;
    --text:#3f1d2b;
    --ring:#fbcfe8;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
  }

  .hero {
    background: linear-gradient(180deg, #fff 0%, #fce7f3 100%);
    padding: 20px;
    border-radius: 20px;
  }

  .badge {
    background: linear-gradient(135deg, #ec4899, #fb7185);
    padding: 6px 12px;
    color: white;
    border-radius: 999px;
    font-size: 12px;
  }

  /* Button styles */
  .btn-primary {
    background: linear-gradient(135deg, #ec4899, #fb7185);
    color: white;
    padding: 12px 16px;
    border-radius: 12px;
  }

  .btn-primary:hover {
    filter: brightness(1.05);
  }

  .btn-ghost {
    background: white;
    color: #9d174d;
    border: 1px solid #fbcfe8;
    padding: 12px 16px;
    border-radius: 12px;
  }

  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .hero {
      text-align: center;
    }

    .products {
      grid-template-columns: 1fr;
    }
  }
  header {
    position: relative;
    z-index: 1000;
}
body {
    overflow-x: hidden;
}
@media (max-width: 768px) {
    .header, .footer {
        position: relative;
    }
}
section {
  scroll-margin-top: 120px;
}