/* Müşteri menüsü — mobil öncelikli */
body { padding-bottom: env(safe-area-inset-bottom); }

.hero {
  display: grid; justify-items: center; gap: var(--space-3);
  max-width: 640px; margin: 0 auto;
  padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--page-pad) var(--space-5);
  text-align: center;
}
.hero__brand { display: grid; justify-items: center; gap: var(--space-2); }
.hero__wordmark { margin: 0; line-height: 0; }
.hero__wordmark img { width: min(248px, 70vw); height: auto; }
.hero__logo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  outline: 1px solid rgb(0 0 0 / 0.1); outline-offset: -1px;
}
.hero__name { font-size: var(--text-display); font-weight: 800; letter-spacing: -0.01em; }
.hero__tagline { font-size: var(--text-body); color: var(--color-text-secondary); text-wrap: pretty; }
.hero__status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-ui-sm); font-weight: 700; color: var(--color-text-secondary);
}
.hero__status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brown-400);
}
.hero__status[data-open="true"] { color: var(--color-success-text); }
.hero__status[data-open="true"]::before { background: var(--color-success-text); }
.hero__table {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-bg-subtle); box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: var(--text-ui-sm); font-weight: 700;
}

/* Yapışkan arama + kategori çubuğu */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg-page);
  padding-top: env(safe-area-inset-top);
  transition-property: box-shadow; transition-duration: 150ms;
}
.bar[data-stuck="true"] { box-shadow: 0 1px 0 var(--color-border-subtle), 0 6px 16px rgb(58 35 24 / 0.06); }
.bar__inner { max-width: 640px; margin: 0 auto; padding: var(--space-2) 0 var(--space-2); display: grid; gap: var(--space-2); }

.search { position: relative; margin-inline: var(--page-pad); }
.search__icon {
  position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%;
  display: grid; color: var(--color-text-secondary); pointer-events: none;
}
.search__input {
  width: 100%; height: 44px; padding-inline: 44px var(--space-4);
  font-size: 16px; border: 1px solid var(--color-border-control); border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
}
.search__input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.search__input:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 2px var(--color-focus); }
.search__input::-webkit-search-cancel-button { cursor: pointer; }

.cats { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: var(--page-pad); }
.cats::-webkit-scrollbar { display: none; }
.cats__list {
  display: flex; gap: var(--space-2); list-style: none; margin: 0;
  padding: 4px var(--page-pad);
  width: max-content;
}
.cats__link {
  position: relative; display: inline-flex; align-items: center;
  height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
  font-size: var(--text-ui-sm); font-weight: 700; white-space: nowrap; text-decoration: none;
  color: var(--color-text-primary); background: var(--color-bg-subtle);
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition-property: background-color, color, box-shadow; transition-duration: 150ms;
}
.cats__link::after { content: ""; position: absolute; inset: -4px 0; } /* 44px dokunma alanı */
.cats__link[aria-current="true"] { background: var(--color-accent-solid); color: var(--color-on-accent); box-shadow: none; }
@media (hover: hover) { .cats__link:hover:not([aria-current="true"]) { background: var(--color-bg-hover); } }

/* Menü */
.menu { max-width: 640px; margin: 0 auto; padding: var(--space-3) var(--page-pad) var(--space-6); display: grid; gap: var(--space-6); outline: none; }
.menu__loading { padding: var(--space-6) 0; text-align: center; color: var(--color-text-secondary); }
.cat { scroll-margin-top: 120px; display: grid; gap: var(--space-3); }
.cat[hidden] { display: none; }
.cat__title { font-size: var(--text-title); font-weight: 800; letter-spacing: -0.01em; padding-inline: var(--space-1); }
.cat__list {
  list-style: none; margin: 0; padding: var(--space-1) var(--space-4);
  background: var(--color-bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.cat__list > li + li { border-top: 1px solid var(--color-border-subtle); }
.cat__list > li[hidden] { display: none; }
.cat__list > li[hidden] + li, .cat__list > li:first-child:not([hidden]) { border-top: 0; }

.item {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--space-4);
  width: 100%; padding: var(--space-4) 0; margin: 0;
  background: none; border: 0; text-align: start; cursor: pointer;
  border-radius: var(--radius-sm);
}
.item:focus-visible { outline-offset: 4px; }
.item__text { display: grid; gap: var(--space-1); min-width: 0; }
.item__name { font-size: var(--text-body); font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.item__desc {
  font-size: var(--text-ui-sm); color: var(--color-text-secondary); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: pretty;
}
.item__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); flex-wrap: wrap; }
.item__price { font-size: var(--text-body); font-weight: 800; }
.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: 700; white-space: nowrap;
  background: var(--color-bg-subtle); color: var(--color-text-secondary); box-shadow: inset 0 0 0 1px var(--color-border);
}
.item__photo {
  width: 88px; height: 88px; border-radius: var(--radius-md); object-fit: cover; background: var(--color-bg-subtle);
  outline: 1px solid rgb(0 0 0 / 0.1); outline-offset: -1px;
}
.item[data-soldout="true"] .item__photo { filter: grayscale(1); opacity: 0.6; }
.item[data-soldout="true"] .item__price { color: var(--color-text-secondary); }

.empty { max-width: 640px; margin: 0 auto; padding: var(--space-6) var(--page-pad); display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.empty[hidden] { display: none; }
.empty__title { font-weight: 700; overflow-wrap: anywhere; }

/* Alt bilgi */
.foot {
  max-width: 640px; margin: 0 auto;
  padding: var(--space-5) var(--page-pad) calc(var(--space-7) + env(safe-area-inset-bottom));
  display: grid; gap: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-ui-sm);
}
.foot__note {
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg-subtle);
  color: var(--color-text-primary); font-weight: 600; text-align: center; text-wrap: pretty;
}
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.foot__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.foot__row .icon { color: var(--color-text-secondary); margin-top: 1px; stroke-width: 1.75; }
.foot a { color: var(--color-text-primary); font-weight: 700; text-underline-offset: 3px; text-decoration-thickness: from-font; }

/* Ürün detayı (alt sayfa) */
.sheet {
  width: 100%; max-width: 560px; max-height: min(92dvh, 760px);
  margin: auto auto 0; padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
  border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-bg-surface); color: var(--color-text-primary);
  box-shadow: var(--shadow-raised); overscroll-behavior: contain;
}
.sheet::backdrop { background: rgb(38 22 14 / 0.45); }
.sheet[open] { animation: sheet-in 240ms var(--ease-out); }
.sheet[open]::backdrop { animation: fade-in 240ms var(--ease-out); }
@keyframes sheet-in { from { translate: 0 24px; opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (min-width: 600px) {
  .sheet { margin: auto; border-radius: var(--radius-lg); }
}
.sheet__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md);
  outline: 1px solid rgb(0 0 0 / 0.1); outline-offset: -1px;
}
.sheet__body { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-2) var(--space-1); }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.sheet__title { font-size: var(--text-title); font-weight: 800; }
.sheet__price { font-size: var(--text-lg); font-weight: 800; }
.sheet__desc { color: var(--color-text-secondary); text-wrap: pretty; }
.sheet__desc:empty { display: none; }
.sheet__badge { justify-self: start; }
.sheet form { margin-top: var(--space-2); }