/* Sofra QR menü — tema değişkenleri <head> içinde tanımlanır (--s-*) */

:root {
	--s-line: color-mix(in srgb, var(--s-text) 13%, transparent);
	--s-soft: color-mix(in srgb, var(--s-primary) 9%, var(--s-surface));
	--s-muted-bg: color-mix(in srgb, var(--s-text) 5%, var(--s-bg));
	--s-danger: #B3261E;
	--s-ok: #1E7A45;
	--s-shadow: 0 1px 2px color-mix(in srgb, var(--s-text) 10%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--s-text) 22%, transparent);
	--s-card-shadow: 0 1px 0 color-mix(in srgb, var(--s-text) 5%, transparent), 0 12px 26px -20px color-mix(in srgb, var(--s-text) 45%, transparent);
	--s-sheet-radius: 22px;
	--s-bar-h: 64px;
	--s-safe-b: env(safe-area-inset-bottom, 0px);
	--s-max: 620px;
	--s-stick-top: 0px;
	--s-stick-h: 104px;
	--s-pimg: 104px;
	color-scheme: light;
}
.is-dark { color-scheme: dark; --s-danger: #FF8A80; --s-ok: #7BD89B; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--s-stick-top) + var(--s-stick-h) + 12px); }
body {
	margin: 0;
	background: var(--s-bg);
	color: var(--s-text);
	font-family: var(--s-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--s-accent); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { max-width: var(--s-max); margin: 0 auto; padding-bottom: calc(var(--s-bar-h) + 40px + var(--s-safe-b)); min-height: 100vh; background: var(--s-bg); }
@media (min-width: 700px) {
	body { background: color-mix(in srgb, var(--s-bg) 82%, var(--s-text)); }
	.app { box-shadow: 0 0 0 1px var(--s-line); }
}

/* ---------- Üst çubuk: solda logo, sağda masa, Wi-Fi ve dil ---------------- */
.topbar {
	display: flex; align-items: center; gap: 12px;
	min-height: 64px;
	padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px;
}
.brand { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; font-size: inherit; }
/* Logo okunur büyüklükte: yazılı logolar ve kare logolardaki küçük yazılar da seçilsin. */
.brand__logo { display: block; height: 64px; width: auto; max-width: min(240px, 100%); object-fit: contain; object-position: left center; }
/* Uzun işletme adı kesilmez ("…" yok): iki satıra iner, gerekirse uygulama yazıyı küçültür (fitBrand). */
.brand__name {
	display: block; min-width: 0; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance;
	font-family: var(--s-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em;
}
.topbar__end { display: flex; align-items: center; gap: 8px; flex: none; }
.top-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-text); }
.top-btn svg { width: 19px; height: 19px; }

/* Masa bileti: adisyon koçanı gibi yarım daire çentikli */
.ticket {
	--notch: 6px;
	display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
	min-height: 40px; padding: 4px 14px 5px;
	background: var(--s-primary); color: var(--s-on-primary);
	border-radius: 6px;
	transform: rotate(-2deg);
	-webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
	              radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
	        mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
	              radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket__label { font-size: .66rem; font-weight: 600; opacity: .85; line-height: 1.1; white-space: nowrap; }
.ticket__name { font-family: var(--s-display); font-size: 1.12rem; line-height: 1.05; font-weight: 700; max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.notice {
	margin: 14px 16px 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--s-muted-bg);
	border: 1px solid var(--s-line);
	font-size: .94rem;
	display: flex; gap: 10px; align-items: flex-start;
}
.notice svg { flex: none; margin-top: 2px; }
.notice--warn { background: color-mix(in srgb, var(--s-accent) 16%, var(--s-surface)); border-color: color-mix(in srgb, var(--s-accent) 45%, transparent); }

/* ---------- Sabit arama ve kategori çubuğu ------------------------------ */
.toolbar {
	position: sticky; top: var(--s-stick-top); z-index: 20;
	margin-top: 4px;
	padding: 10px 0 0;
	background: color-mix(in srgb, var(--s-bg) 93%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
	transition: box-shadow .2s;
}
.toolbar.is-stuck { box-shadow: 0 1px 0 var(--s-line), 0 12px 20px -18px color-mix(in srgb, var(--s-text) 60%, transparent); }
.search { display: flex; gap: 8px; padding: 0 16px; }
.search__field { position: relative; flex: 1; }
.search__field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--s-muted); width: 19px; height: 19px; pointer-events: none; }
.search input {
	width: 100%; height: 46px; padding: 0 14px 0 42px;
	border-radius: 14px; border: 1px solid var(--s-line);
	background: var(--s-surface);
	font-size: 16px;
	transition: border-color .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--s-muted); }
.search input:focus { outline: none; border-color: var(--s-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-primary) 22%, transparent); }
.icon-btn {
	flex: none; width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 14px; border: 1px solid var(--s-line); background: var(--s-surface);
	position: relative;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--s-primary); border: 2px solid var(--s-surface); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 12px; scrollbar-width: none; scroll-behavior: smooth; }
.chips::-webkit-scrollbar { display: none; }
.chip {
	flex: none; height: 38px; padding: 0 16px; border-radius: 999px;
	border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-text);
	font-size: .92rem; font-weight: 600; white-space: nowrap;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Ekranda olunan kategori: işletmenin ana rengiyle */
.chip.is-active {
	background: var(--s-primary); color: var(--s-on-primary); border-color: var(--s-primary);
	box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--s-primary) 85%, transparent);
}

/* ---------- Menü --------------------------------------------------------- */
.menu { padding: 0 16px; }
.cat { padding-top: 26px; scroll-margin-top: calc(var(--s-stick-top) + var(--s-stick-h) + 10px); }
.cat:first-child { padding-top: 16px; }
.cat__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cat__title { font-family: var(--s-display); font-size: 1.6rem; line-height: 1.1; font-weight: 700; margin: 0; text-wrap: balance; }
.cat__count { font-size: .82rem; font-weight: 600; color: var(--s-muted); white-space: nowrap; }
.cat__desc { margin: 6px 0 0; color: var(--s-muted); font-size: .95rem; max-width: 60ch; }
.cat__list { display: grid; gap: 12px; margin-top: 14px; }
/* Kategori görseli: geniş fotoğraf şeridi, ad fotoğrafın üstünde */
.cat__banner {
	position: relative; isolation: isolate; overflow: hidden;
	aspect-ratio: 16 / 6; min-height: 112px; max-height: 200px; width: 100%;
	border-radius: calc(var(--s-radius) + 6px);
	background: var(--s-muted-bg);
}
.cat__banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cat__banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(0,0,0,.68) 100%); }
.cat__bannertext { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; color: #fff; }
.cat .cat__banner .cat__title { color: #fff; font-size: 1.8rem; text-align: left; text-shadow: 0 1px 14px rgba(0,0,0,.35); border: 0; padding: 0; }
.cat .cat__banner .cat__title::before, .cat .cat__banner .cat__title::after { display: none; }
.cat__banner .cat__count { color: rgba(255,255,255,.88); }

.product {
	position: relative;
	background: var(--s-surface);
	border: 1px solid var(--s-line);
	border-radius: var(--s-radius);
	box-shadow: var(--s-card-shadow);
	overflow: hidden;
	text-align: left;
	padding: 0;
	width: 100%;
	display: flex;
	color: inherit;
}
.product__img { background: var(--s-muted-bg); flex: none; }
.product__img img { width: 100%; height: 100%; object-fit: cover; }
.product__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.product__name { font-weight: 700; font-size: 1.04rem; line-height: 1.25; margin: 0; }
.product__desc { font-size: .9rem; color: var(--s-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.price { font-weight: 700; font-size: 1.04rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price s { font-weight: 400; color: var(--s-muted); margin-right: 6px; font-size: .9em; }
.product__meta { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--s-soft); color: var(--s-primary); }
.tag--spicy { background: color-mix(in srgb, #D0342C 14%, var(--s-surface)); color: #B42318; }
.is-dark .tag--spicy { color: #FF9A8F; }
.tag--veg { background: color-mix(in srgb, #2E7D32 14%, var(--s-surface)); color: #2E7D32; }
.is-dark .tag--veg { color: #8FD694; }
.kcal { font-size: .8rem; color: var(--s-muted); }
.add-btn {
	flex: none; width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--s-primary); color: var(--s-on-primary);
	border: 0;
	box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--s-primary) 90%, transparent);
	transition: transform .15s ease;
}
.add-btn:active { transform: scale(.9); }
.add-btn svg { width: 19px; height: 19px; stroke-width: 2.2; }
.add-btn .qty { font-weight: 800; font-size: .95rem; }

.product.is-soldout { opacity: .62; }
.product.is-soldout .product__img img { filter: grayscale(1); }
.soldout-label { font-size: .8rem; font-weight: 700; color: var(--s-danger); }
.low-label { font-size: .78rem; font-weight: 600; color: var(--s-accent); }
.product.is-flagged { outline: 2px dashed color-mix(in srgb, var(--s-danger) 60%, transparent); outline-offset: -2px; }
.flag-label { font-size: .78rem; font-weight: 600; color: var(--s-danger); }

/* Liste düzeni: görsel sağda kare */
.layout-list .product { flex-direction: row-reverse; min-height: 118px; }
.layout-list .product__img { width: 112px; }
.layout-list .product__img:empty { display: none; }

/* Izgara düzeni: iki sütun, görsel üstte */
.layout-grid .cat__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-grid .product { flex-direction: column; }
.layout-grid .product__img { aspect-ratio: 4 / 3; width: 100%; }
.layout-grid .product__img:empty { display: none; }
.layout-grid .product__body { padding: 10px 12px 12px; }
.layout-grid .product__name { font-size: .98rem; }
.layout-grid .product__desc { -webkit-line-clamp: 2; font-size: .85rem; }
@media (max-width: 340px) { .layout-grid .cat__list { grid-template-columns: 1fr; } }

/* 1. Liste (varsayılan): görsel kartın içinde sağda, "+" görselin köşesinde */
.ms-list .product { padding: 12px; gap: 14px; min-height: 0; align-items: flex-start; }
.ms-list .product__img { width: var(--s-pimg); height: var(--s-pimg); border-radius: max(8px, calc(var(--s-radius) - 4px)); overflow: hidden; }
.ms-list .product__body { padding: 2px 0 0; }
.ms-list .product:has(.product__img img) .product__body { min-height: var(--s-pimg); }
.ms-list .product:has(.product__img img) .product__foot { padding-right: 0; }
.ms-list .product:has(.product__img img) .add-btn { position: absolute; top: calc(12px + var(--s-pimg) - 31px); right: 5px; box-shadow: 0 0 0 3px var(--s-surface), 0 8px 16px -8px color-mix(in srgb, var(--s-primary) 90%, transparent); }

/* 2. Izgara (varsayılan): görsel kartın içinde üstte, yuvarlatılmış */
.ms-grid .product { padding: 8px; }
.ms-grid .product__img { border-radius: max(8px, calc(var(--s-radius) - 5px)); overflow: hidden; aspect-ratio: 1 / 1; }
.ms-grid .product__body { padding: 10px 4px 2px; }
@media (min-width: 600px) { .ms-grid .product__img { aspect-ratio: 4 / 3; } }

/* ==========================================================================
 * Menü temaları (body.ms-*). Her biri yukarıdaki iki temel düzenden birinin
 * (layout-list / layout-grid) üstüne kurulur; işaretleme aynıdır, yalnızca CSS değişir.
 * ======================================================================== */

/* 3. Büyük kartlar: tek sütun, geniş fotoğraf */
.ms-cards .cat__list { grid-template-columns: 1fr; gap: 16px; }
.ms-cards .product__img { aspect-ratio: 16 / 9; }
.ms-cards .product__body { padding: 14px 16px 16px; }
.ms-cards .product__name { font-size: 1.15rem; }
.ms-cards .product__desc { -webkit-line-clamp: 3; font-size: .92rem; }
.ms-cards .add-btn { width: 42px; height: 42px; }

/* 4. Magazin: her kategorinin ilk ürünü geniş vitrin kartı, diğerleri ızgara */
.ms-magazine .cat__list > .product:first-child { grid-column: 1 / -1; }
/* İki ürünlü kategoride ikinci ürün yarım genişlikte yalnız kalmasın. */
.ms-magazine .cat__list > .product:nth-child(2):last-child { grid-column: 1 / -1; }
.ms-magazine .cat__list > .product:nth-child(2):last-child .product__img { aspect-ratio: 16 / 9; }
.ms-magazine .cat__list > .product:first-child .product__img { aspect-ratio: 16 / 9; }
.ms-magazine .cat__list > .product:first-child .product__name { font-family: var(--s-display); font-size: 1.35rem; }
.ms-magazine .cat__list > .product:first-child .product__desc { -webkit-line-clamp: 3; }
.ms-magazine .cat__title { font-size: 2rem; border-bottom: 3px solid var(--s-primary); padding-bottom: 6px; display: inline-block; }

/* 5. Klasik menü kartı: görselsiz, adla fiyat arasında noktalı çizgi */
.ms-classic .cat__list { gap: 0; }
.ms-classic .product { background: none; border: 0; border-bottom: 1px solid var(--s-line); border-radius: 0; min-height: 0; overflow: visible; }
.ms-classic .product__img { display: none; }
.ms-classic .product__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding: 12px 2px; }
.ms-classic .product__body > * { grid-column: 1 / -1; }
.ms-classic .product__name { grid-column: 1; display: flex; align-items: baseline; gap: 8px; font-size: 1.02rem; }
.ms-classic .product__name::after { content: ""; flex: 1; min-width: 16px; border-bottom: 2px dotted color-mix(in srgb, var(--s-text) 35%, transparent); transform: translateY(-4px); }
.ms-classic .product__foot { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }
.ms-classic .product__desc { font-style: italic; -webkit-line-clamp: 3; }
.ms-classic .cat__title { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-size: 1.25rem; }
.ms-classic .cat__title::after { content: ""; display: block; width: 48px; height: 2px; margin: 8px auto 0; background: var(--s-accent); }
.ms-classic .add-btn { width: 32px; height: 32px; }

/* 6. Yatay şeritler: her kategori sağa kaydırılan bir şerit */
.ms-rows .cat__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 10px; margin: 12px -16px 0; scrollbar-width: none; }
.ms-rows .cat__list::-webkit-scrollbar { display: none; }
.ms-rows .product { flex: 0 0 68%; max-width: 250px; scroll-snap-align: start; }
.ms-rows .product__desc { -webkit-line-clamp: 2; }
.ms-rows .cat__title { font-size: 1.4rem; }

/* 7. Fotoğraf duvarı: fotoğraf kartı kaplar, yazı alttaki gölgenin üstünde */
.ms-photo .cat__list { gap: 10px; }
.ms-photo .product:not(:has(.product__img:empty)) { min-height: 230px; border: 0; background: #111; color: #fff; }
.ms-photo .product:not(:has(.product__img:empty)) .product__img { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.ms-photo .product:not(:has(.product__img:empty)) .product__body { position: relative; margin-top: auto; padding: 46px 12px 12px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.82) 55%); }
.ms-photo .product:not(:has(.product__img:empty)) .product__desc { color: rgba(255,255,255,.82); }
.ms-photo .product:not(:has(.product__img:empty)) .price s { color: rgba(255,255,255,.7); }
.ms-photo .product:not(:has(.product__img:empty)) .kcal { color: rgba(255,255,255,.75); }

/* 8. Kara tahta: tebeşir yazılı, koyu yeşil-siyah tahta */
.ms-chalk .menu { margin: 10px 12px 0; padding: 4px 16px 18px; border-radius: 18px; color: #f2efe4;
	background-color: #1e2a24;
	background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px;
	box-shadow: inset 0 0 0 8px #5b4632, inset 0 0 0 10px #3b2c1f, 0 10px 30px rgba(0,0,0,.25); }
.ms-chalk .cat__title { font-family: 'Caveat', var(--s-display); font-size: 2.2rem; font-weight: 700; color: #fff; text-align: center; }
.ms-chalk .cat__desc { color: rgba(242,239,228,.75); text-align: center; margin-left: auto; margin-right: auto; }
.ms-chalk .product { background: none; border: 0; border-bottom: 1px dashed rgba(242,239,228,.25); border-radius: 0; color: inherit; min-height: 0; }
.ms-chalk .product__img { width: 64px; height: 64px; margin: 12px 0; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.6); }
.ms-chalk .product__name { font-family: 'Caveat', var(--s-body); font-size: 1.45rem; font-weight: 700; }
.ms-chalk .product__desc { color: rgba(242,239,228,.78); }
.ms-chalk .price b { font-family: 'Caveat', var(--s-body); font-size: 1.45rem; color: #ffd98a; }
.ms-chalk .tag { background: rgba(255,255,255,.12); color: #fff; }
.ms-chalk .kcal, .ms-chalk .price s { color: rgba(242,239,228,.7); }
.ms-chalk #s-empty { color: rgba(242,239,228,.8); }

/* 9. Fine dining: ortalı, zarif, görselsiz */
.ms-fine .cat__title { text-align: center; font-weight: 500; font-size: 1.9rem; letter-spacing: .02em; }
.ms-fine .cat__title::before, .ms-fine .cat__title::after { content: "—"; color: var(--s-accent); margin: 0 12px; font-weight: 300; }
.ms-fine .cat__desc { text-align: center; margin-left: auto; margin-right: auto; font-style: italic; }
.ms-fine .cat__list { gap: 0; max-width: 560px; margin-left: auto; margin-right: auto; }
.ms-fine .product { background: none; border: 0; border-radius: 0; min-height: 0; text-align: center; }
.ms-fine .product__img { display: none; }
.ms-fine .product__body { align-items: center; padding: 16px 4px; gap: 6px; }
.ms-fine .product + .product .product__body { border-top: 1px solid var(--s-line); }
.ms-fine .product__name { font-family: var(--s-display); font-weight: 600; font-size: 1.12rem; letter-spacing: .08em; text-transform: uppercase; }
.ms-fine .product__desc { font-style: italic; -webkit-line-clamp: 3; max-width: 44ch; }
.ms-fine .product .product__meta { justify-content: center; }
.ms-fine .product__foot { justify-content: center; gap: 14px; padding-top: 4px; }
.ms-fine .price b { font-weight: 500; color: var(--s-accent); letter-spacing: .04em; }
.ms-fine .add-btn { width: 32px; height: 32px; background: transparent; color: var(--s-primary); border: 1px solid var(--s-primary); }

/* 10. Vintage kağıt: kâğıt doku, çift çerçeve, sepya fotoğraf */
.ms-paper .menu { margin: 10px 12px 0; padding: 4px 16px 18px; border-radius: 6px; color: #3b2f22;
	background-color: #f3e9d2;
	background-image: radial-gradient(circle at 20% 15%, rgba(255,255,255,.55), transparent 40%), radial-gradient(circle at 80% 85%, rgba(120,84,40,.12), transparent 45%), repeating-linear-gradient(0deg, rgba(120,84,40,.025) 0 2px, transparent 2px 4px);
	box-shadow: inset 0 0 0 6px #f3e9d2, inset 0 0 0 7px rgba(120,84,40,.45), inset 0 0 0 11px #f3e9d2, inset 0 0 0 12px rgba(120,84,40,.35), 0 8px 24px rgba(60,40,10,.15); }
.ms-paper .cat__title { text-align: center; font-size: 1.6rem; color: #5a3e22; padding-top: 6px; }
.ms-paper .cat__title::after { content: "❦"; display: block; font-size: 1rem; color: #9a7448; margin-top: 4px; }
.ms-paper .cat__desc { text-align: center; margin-left: auto; margin-right: auto; color: #7a6248; }
.ms-paper .product { background: none; border: 0; border-bottom: 1px dotted rgba(120,84,40,.45); border-radius: 0; color: inherit; min-height: 0; }
.ms-paper .product__img { width: 84px; height: 84px; margin: 12px 0; border-radius: 4px; border: 3px solid #fffaf0; box-shadow: 0 2px 6px rgba(60,40,10,.25); overflow: hidden; }
.ms-paper .product__img img { filter: sepia(.28) saturate(.95); }
.ms-paper .product__name { font-family: var(--s-display); font-size: 1.08rem; }
.ms-paper .product__desc { color: #6e5a44; font-style: italic; }
.ms-paper .price b { color: #7b3f1d; }
.ms-paper .tag { background: rgba(120,84,40,.12); color: #6b4421; }

/* Ortalı başlıklı menü temalarında kategori adı ve ürün sayısı alt alta, ortada */
.ms-classic .cat__head, .ms-fine .cat__head, .ms-chalk .cat__head, .ms-paper .cat__head { flex-direction: column; align-items: center; gap: 2px; }
.ms-classic .cat__desc, .ms-fine .cat__desc { text-align: center; margin-left: auto; margin-right: auto; }
.ms-chalk .cat__count { color: rgba(242,239,228,.7); }
.ms-paper .cat__count { color: #7a6248; }
.ms-classic .product, .ms-chalk .product, .ms-fine .product, .ms-paper .product { box-shadow: none; }
.ms-chalk .cat:first-child, .ms-paper .cat:first-child { padding-top: 22px; }

.empty { text-align: center; color: var(--s-muted); padding: 48px 16px; }

/* ---------- Alt bilgi ---------------------------------------------------- */
.footer { margin: 40px 16px 0; padding: 20px 0 0; border-top: 1px solid var(--s-line); color: var(--s-muted); font-size: .92rem; }
.footer strong { color: var(--s-text); font-family: var(--s-display); font-size: 1.2rem; display: block; margin-bottom: 6px; }
.footer a { color: var(--s-primary); text-decoration: none; font-weight: 600; }
.footer p { margin: 4px 0; }
.footer .branches { display: grid; gap: 8px; margin: 8px 0 10px; }
.footer .branches__t { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.footer .branches p { margin: 0; display: flex; flex-direction: column; gap: 1px; }
.footer .branches b { color: var(--s-text); font-weight: 700; }
.footer .legend { margin-top: 14px; font-size: .82rem; }

/* ---------- Alt çubuk: garson, hesap, siparişler ve sepet ---------------- */
.dock {
	position: fixed; left: 50%; transform: translateX(-50%);
	bottom: calc(10px + var(--s-safe-b));
	width: min(calc(100% - 20px), calc(var(--s-max) - 20px));
	height: var(--s-bar-h);
	z-index: 30;
	display: flex; align-items: center; gap: 4px;
	padding: 6px;
	background: color-mix(in srgb, var(--s-surface) 94%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
	border: 1px solid var(--s-line);
	border-radius: 22px;
	box-shadow: 0 18px 40px -16px rgba(0,0,0,.42), 0 2px 6px -2px rgba(0,0,0,.12);
}
.dock__items { flex: 1; min-width: 0; display: flex; gap: 2px; }
.dock__btn {
	flex: 1 1 0; min-width: 0; height: 52px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	border: 0; border-radius: 16px; background: transparent; color: var(--s-muted);
	font-size: .7rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
	transition: background-color .2s, color .2s;
}
.dock__btn svg { width: 23px; height: 23px; }
.dock__btn:active { background: var(--s-muted-bg); }
.dock__btn.is-on { color: var(--s-primary); background: var(--s-soft); }
.dock__lbl { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock__ico { position: relative; display: grid; place-items: center; }
.dock__badge {
	position: absolute; top: -7px; right: -11px;
	min-width: 19px; height: 19px; padding: 0 5px;
	display: grid; place-items: center;
	border-radius: 999px; background: var(--s-primary); color: var(--s-on-primary);
	font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
	box-shadow: 0 0 0 2px var(--s-surface);
}
.dock__badge.is-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -2px; right: -4px; }
.dock__cart {
	flex: none; min-width: 112px; height: 52px;
	display: flex; align-items: center; gap: 16px;
	padding: 0 16px 0 14px;
	border: 0; border-radius: 17px;
	background: var(--s-primary); color: var(--s-on-primary);
	box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--s-primary) 95%, transparent);
	transition: background-color .25s, color .25s, box-shadow .25s;
}
.dock__cart svg { width: 24px; height: 24px; }
.dock__cart .dock__badge { right: -10px; background: var(--s-on-primary); color: var(--s-primary); box-shadow: 0 0 0 2px var(--s-primary); }
.dock__cartlbl { display: grid; text-align: left; line-height: 1.15; }
.dock__cartlbl b { font-size: .98rem; }
.dock__cartlbl small { font-size: .82rem; font-weight: 600; opacity: .92; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock__cart.is-empty { background: var(--s-soft); color: var(--s-primary); box-shadow: none; }
.dock:not(.has-items) .dock__cart { flex: 1; justify-content: center; }
.dock__badge.is-bump { animation: badge-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.dock__ico.is-catch, .aside-card__ico.is-catch { animation: cart-catch .45s ease; }
@keyframes badge-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes cart-catch { 30% { transform: scale(.82) rotate(-8deg); } 65% { transform: scale(1.14) rotate(5deg); } }
/* Sepete uçan ürün */
.fly { position: fixed; z-index: 95; pointer-events: none; will-change: transform; }
.fly__in {
	width: 100%; height: 100%;
	background: var(--s-primary) center / cover no-repeat;
	border-radius: 22%;
	box-shadow: 0 0 0 3px var(--s-surface), 0 14px 28px -10px rgba(0,0,0,.5);
	will-change: transform;
}
.fly__in.is-dot { border-radius: 50%; }
/* Çerez bildirimi: açık pencerenin düğmelerini kapatmaz, alt çubuğun üstünde durur. */
html.sofra-sheet-open .sofra-cookie { display: none !important; }
html.sofra-has-dock .sofra-cookie { bottom: calc(22px + var(--s-bar-h) + var(--s-safe-b)); }

/* Masaya istek (küllük, oyun, diğer) */
.req-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.req-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-text); text-align: left; }
.req-opt b { font-size: 1.02rem; }
.req-opt span { font-size: .8rem; font-weight: 700; color: var(--s-primary); }
.req-opt.is-on { border-color: var(--s-primary); background: var(--s-soft); }
.req-opt.is-on span { color: var(--s-ok); }

/* ---------- Alt sayfa (sheet) ------------------------------------------- */
.backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(15, 12, 10, .5); opacity: 0; transition: opacity .2s; }
.backdrop.is-open { opacity: 1; }
.sheet {
	position: fixed; left: 50%; bottom: 0; z-index: 41;
	width: min(100%, var(--s-max));
	max-height: calc(100vh - 40px); max-height: calc(100dvh - 24px);
	display: flex; flex-direction: column;
	background: var(--s-surface); color: var(--s-text);
	border-radius: var(--s-sheet-radius) var(--s-sheet-radius) 0 0;
	transform: translate(-50%, 100%);
	transition: transform .28s cubic-bezier(.2,.8,.2,1);
	box-shadow: 0 -10px 40px rgba(0,0,0,.25);
}
.sheet.is-open { transform: translate(-50%, 0); }
.sheet__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px 20px; }
.sheet__title { font-family: var(--s-display); font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin: 0; flex: 1; }
.sheet__close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--s-muted-bg); display: grid; place-items: center; flex: none; }
.sheet__close svg { width: 18px; height: 18px; }
.sheet__body { overflow-y: auto; padding: 4px 20px 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet__foot { padding: 12px 16px calc(12px + var(--s-safe-b)); border-top: 1px solid var(--s-line); background: var(--s-surface); }
.sheet--full .sheet__body { padding: 0 0 20px; }

/* Ürün detay */
.pd__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--s-muted-bg); }
.pd__content { padding: 16px 20px 0; }
.pd__name { font-family: var(--s-display); font-size: 1.9rem; line-height: 1.08; margin: 0 0 6px; font-weight: 700; }
.pd__desc { color: var(--s-muted); margin: 0 0 12px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; color: var(--s-muted); margin: 0 0 14px; padding: 0; list-style: none; }
.facts strong { color: var(--s-text); font-weight: 600; }
.allergen-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.allergen-list li { font-size: .84rem; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--s-line); }
.allergen-list li.is-hit { border-color: var(--s-danger); color: var(--s-danger); font-weight: 600; }
/* İçindekiler ve alerjen bilgisi: alerjen, alkol ve domuz bilgisi diğer metinden ayırt edilebilir (kalın, çerçeveli). */
.pd-info { margin: 0 0 6px; padding: 12px 14px; border: 1px solid var(--s-line); border-radius: 14px; background: var(--s-bg); font-size: .92rem; }
.pd-info .section-label { margin: 0 0 8px; }
.pd-info p { margin: 0 0 6px; line-height: 1.45; }
.pd-info p:last-child { margin-bottom: 0; }
.pd-k { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--s-muted); }
.pd-alg strong { font-weight: 800; }
.pd-info .is-hit { color: var(--s-danger); text-decoration: underline; text-underline-offset: 3px; }
.pd-muted { color: var(--s-muted); font-size: .86rem; }
.pd-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-sel { padding-top: 8px; border-top: 1px dashed var(--s-line); }
.info-flag { display: inline-flex; align-items: center; padding: 1px 7px; border: 1.5px solid currentColor; border-radius: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--s-text); }
.product__info, .cart-line__info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .8rem; line-height: 1.35; color: var(--s-text); }
.info-alg b { font-weight: 800; }
.info-alg.is-opt { color: var(--s-muted); }
.opt__info { display: block; margin-top: 2px; color: var(--s-muted); font-size: .8rem; font-weight: 500; }
.section-label { font-weight: 700; font-size: .95rem; margin: 18px 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
.section-label small { font-weight: 500; color: var(--s-muted); font-size: .82rem; }
.opt-group { border: 0; margin: 0; padding: 0; }
.opt-group.is-error .section-label small { color: var(--s-danger); font-weight: 700; }
.opt {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 2px; border-bottom: 1px solid var(--s-line);
	cursor: pointer;
}
.opt:last-child { border-bottom: 0; }
.opt input { width: 20px; height: 20px; accent-color: var(--s-primary); margin: 0; flex: none; }
.opt span { flex: 1; }
.opt em { font-style: normal; color: var(--s-muted); font-variant-numeric: tabular-nums; }
.field-label { display: block; font-weight: 700; font-size: .95rem; margin: 18px 0 8px; }
.textarea, .input {
	width: 100%; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-bg);
	padding: 12px; font-size: 16px; resize: vertical;
}
.textarea { min-height: 64px; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--s-line); border-radius: 12px; overflow: hidden; background: var(--s-bg); }
.stepper button { width: 44px; height: 48px; border: 0; background: transparent; display: grid; place-items: center; }
.stepper button svg { width: 18px; height: 18px; }
.stepper output { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper--sm button { width: 36px; height: 36px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 20px;
	border-radius: 14px; border: 0;
	background: var(--s-primary); color: var(--s-on-primary);
	font-weight: 700; font-size: 1rem;
}
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--ghost { background: var(--s-muted-bg); color: var(--s-text); }
.btn--line { background: transparent; color: var(--s-text); border: 1px solid var(--s-line); }
.btn .spin { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.row { display: flex; gap: 10px; align-items: center; }
.row > .btn { flex: 1; }
.btn-split { justify-content: space-between; }
.btn-split > span:first-child { white-space: nowrap; }

/* Sepet */
.cart-line { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--s-line); text-align: start; }
.cart-line__img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: calc(var(--s-radius, 14px) * .6); overflow: hidden; background: var(--s-line); }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-line__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cart-line__name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cart-line__opts, .cart-line__note { font-size: .86rem; color: var(--s-muted); line-height: 1.4; }
.cart-line__price { flex: none; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-line__ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.link-btn { border: 0; background: none; padding: 6px 0; color: var(--s-danger); font-weight: 600; font-size: .9rem; }
.changes { border-radius: 12px; padding: 12px 14px; margin: 8px 0 4px; background: color-mix(in srgb, var(--s-danger) 9%, var(--s-surface)); border: 1px solid color-mix(in srgb, var(--s-danger) 35%, transparent); font-size: .92rem; }
.changes strong { display: block; margin-bottom: 4px; }
.changes ul { margin: 0; padding-left: 18px; }
.pay-options { display: grid; gap: 8px; }
.pay-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--s-line); border-radius: 14px; cursor: pointer; }
.pay-opt input { accent-color: var(--s-primary); width: 20px; height: 20px; margin: 0; }
.pay-opt span { flex: 1; }
.pay-opt small { display: block; color: var(--s-muted); font-size: .84rem; }
.pay-opt:has(input:checked) { border-color: var(--s-primary); background: var(--s-soft); }
.totals { display: grid; gap: 6px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-size: 1.2rem; font-weight: 700; }

/* Sipariş takibi */
.track { border: 1px solid var(--s-line); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.track__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.track__no { font-family: var(--s-display); font-weight: 700; font-size: 1.35rem; }
.track__time { color: var(--s-muted); font-size: .88rem; }
.track__status { font-weight: 700; margin: 4px 0 10px; }
.track__status.is-cancelled { color: var(--s-danger); }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.steps span { height: 6px; border-radius: 3px; background: var(--s-line); }
.steps span.is-done { background: var(--s-primary); }
.steps span.is-current { background: var(--s-primary); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.track__items { margin: 10px 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--s-muted); }

/* Adisyon fişi */
.receipt {
	--edge: 10px;
	position: relative;
	margin: 6px 0 18px;
	padding: 22px 18px 24px;
	background: #FFFDF7;
	color: #231F1B;
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: .9rem;
	line-height: 1.55;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,.14));
	-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--edge)) 100%,
	              conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--edge)) 100%;
	-webkit-mask-composite: source-in;
	        mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--edge)) 100%,
	              conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--edge)) 100%;
	        mask-composite: intersect;
}
.receipt__head { text-align: center; margin-bottom: 12px; }
.receipt__head b { display: block; font-size: 1.05rem; }
.receipt__rule { border: 0; border-top: 1px dashed #9A948B; margin: 10px 0; }
.receipt__line { display: flex; gap: 8px; }
.receipt__line span:first-child { flex: 1; }
.receipt__line .opts { display: block; font-size: .8rem; color: #6D675F; }
.receipt__line.is-treat span:last-child { font-weight: 700; }
.receipt__total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem; }
.receipt__row { display: flex; justify-content: space-between; }
.receipt__empty { text-align: center; color: #6D675F; padding: 12px 0; }

/* Wi-Fi */
.wifi { display: grid; gap: 12px; }
.wifi__row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--s-muted-bg); }
.wifi__row div { flex: 1; min-width: 0; }
.wifi__row small { display: block; color: var(--s-muted); font-size: .84rem; }
.wifi__row b { font-size: 1.15rem; word-break: break-all; }

/* Alerjen filtresi */
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--s-line); font-size: .92rem; cursor: pointer; }
.check input { accent-color: var(--s-primary); width: 18px; height: 18px; margin: 0; }
.check:has(input:checked) { border-color: var(--s-danger); background: color-mix(in srgb, var(--s-danger) 7%, var(--s-surface)); }

/* Test ödeme */
.card-form { display: grid; gap: 10px; }
.card-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-form label { font-size: .86rem; font-weight: 600; display: grid; gap: 6px; }
.test-banner { font-size: .86rem; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--s-accent) 18%, var(--s-surface)); margin-bottom: 12px; }
.pay-amount { text-align: center; font-size: 2rem; font-weight: 700; margin: 4px 0 14px; font-variant-numeric: tabular-nums; }

/* Toast */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 60; display: grid; gap: 8px; width: min(calc(100% - 24px), 480px); pointer-events: none; }
.toast { background: var(--s-text); color: var(--s-bg); padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: .94rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); animation: toastIn .25s ease; }
.toast--ok { background: var(--s-ok); color: #fff; }
.toast--err { background: var(--s-danger); color: #fff; }
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } }

/* Siparişiniz hazır (kasa önü) */
.ready {
	position: fixed; inset: 0; z-index: 80;
	display: grid; place-items: center; text-align: center;
	background: var(--s-primary); color: var(--s-on-primary);
	padding: 32px;
}
.ready__no { font-family: var(--s-display); font-size: clamp(4rem, 26vw, 8rem); line-height: 1; font-weight: 700; margin: 10px 0 12px; }
.ready p { font-size: 1.15rem; margin: 0 0 28px; }
.ready .btn { background: var(--s-surface); color: var(--s-text); min-width: 200px; }

.loading { display: grid; place-items: center; min-height: 60vh; color: var(--s-muted); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- JS ile gelen ek bileşenler ------------------------------------ */
.product__open { all: unset; cursor: pointer; }
.product__open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product:has(.product__open:focus-visible) { outline: 3px solid var(--s-accent); outline-offset: 2px; }
.product__foot .add-btn { position: relative; z-index: 2; }
.add-btn.has-qty { background: var(--s-text); color: var(--s-bg); }
.product > .product__body > .soldout-label,
.product > .product__body > .low-label,
.product > .product__body > .flag-label { display: inline-flex; align-items: center; gap: 4px; }
.inline-ico { width: 14px; height: 14px; flex: none; }

.notice > div { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.notice__btn { border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 700; background: var(--s-primary); color: var(--s-on-primary); }
.notice__btn.is-on { background: var(--s-ok); color: #fff; }

.live-list { display: grid; gap: 8px; padding: 12px 16px 0; }
.live {
	display: flex; align-items: center; gap: 12px; width: 100%;
	padding: 12px 14px; border-radius: 14px; text-align: left;
	border: 1px solid color-mix(in srgb, var(--s-primary) 55%, transparent);
	background: var(--s-soft); color: var(--s-text);
}
.live__no { font-family: var(--s-display); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.live__label { flex: 1; font-weight: 600; font-size: .94rem; }
.live .steps { width: 76px; flex: none; }

.sheet { overflow: hidden; }
.sheet--full .sheet__head { position: absolute; top: 0; right: 0; padding: 12px; z-index: 3; }
.sheet--full .sheet__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sheet--full .sheet__close { background: color-mix(in srgb, var(--s-surface) 90%, transparent); box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.pd--noimg .pd__content { padding-top: 22px; }
.pd--noimg .pd__name { padding-right: 52px; }
.pd__price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 1.15rem; }
.pd__tags { margin-bottom: 14px; justify-content: flex-start; }
.pd__hint { color: var(--s-muted); font-size: .92rem; margin: 18px 0 0; }
.section-label small.is-danger { color: var(--s-danger); font-weight: 700; }
.field-label small { font-weight: 500; color: var(--s-muted); }
.sheet__lead { margin: 0 0 14px; color: var(--s-muted); }
.fine { font-size: .82rem; color: var(--s-muted); margin: 14px 0 0; line-height: 1.5; }
.check--wide { margin-top: 12px; }
.stack { display: grid; gap: 8px; }

.empty .btn { margin-top: 12px; }
.empty__ico { width: 40px; height: 40px; opacity: .5; margin: 0 auto 6px; display: block; }
.empty p { margin: 0; }

.done-hero { text-align: center; padding: 8px 0 18px; }
.done-hero__ico { width: 56px; height: 56px; padding: 12px; border-radius: 50%; background: var(--s-ok); color: #fff; stroke-width: 2.4; }
.done-hero__title { font-family: var(--s-display); font-size: 1.6rem; font-weight: 700; margin: 10px 0 4px; }
.done-hero__text { color: var(--s-muted); margin: 0 auto; max-width: 30ch; }

.track.is-new { border-color: var(--s-primary); box-shadow: 0 0 0 1px var(--s-primary) inset; }
.steps-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 6px; font-size: .72rem; color: var(--s-muted); line-height: 1.2; text-align: center; }
.steps-labels span:first-child { text-align: start; }
.steps-labels span:last-child { text-align: end; }
.steps-labels span.is-current { color: var(--s-text); font-weight: 700; }
.track__items span { opacity: .85; }
.track__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--s-line); font-size: .9rem; color: var(--s-muted); }
.track__foot b { color: var(--s-text); font-variant-numeric: tabular-nums; }

.pay-opt svg { width: 22px; height: 22px; color: var(--s-primary); flex: none; }
.pay-sub { text-align: center; color: var(--s-muted); margin: -8px 0 16px; }
.receipt__paid { text-align: center; margin: 10px 0 0; font-weight: 700; }

@media (hover: hover) {
	.product:hover { border-color: color-mix(in srgb, var(--s-primary) 40%, var(--s-line)); }
	.chip:hover { border-color: var(--s-text); }
}

/* Parçalı ödeme */
.split-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.split-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--s-line); border-radius: 14px; cursor: pointer; }
.split-mode input { accent-color: var(--s-primary); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.split-mode b { display: block; font-size: .95rem; }
.split-mode small { display: block; color: var(--s-muted); font-size: .8rem; line-height: 1.3; margin-top: 2px; }
.split-mode:has(input:checked) { border-color: var(--s-primary); background: var(--s-soft); }
.split-detail { margin-top: 12px; }
.split-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.split-note { font-size: .9rem; color: var(--s-muted); margin: 10px 0 0; }
.split-note b { color: var(--s-text); }
.split-items { display: grid; gap: 6px; margin-top: 10px; }
.split-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--s-line); border-radius: 12px; }
.split-item.is-on { border-color: var(--s-primary); background: var(--s-soft); }
.split-item__name { flex: 1; min-width: 0; font-weight: 600; font-size: .94rem; }
.split-item__name small { display: block; font-weight: 400; color: var(--s-muted); font-size: .8rem; }
.split-item__name > small:first-child, .split-item__name small + small { display: block; }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: .92rem; border-radius: 12px; }
.receipt__paidlist { margin: 10px 0 2px; padding: 8px 10px; border: 1px dashed rgba(0,0,0,.18); border-radius: 10px; }
.receipt__paidlist summary { cursor: pointer; font-weight: 700; color: #1E7A45; }
.receipt__paidlist .receipt__line { margin-top: 6px; color: #6D675F; }
.receipt__line.is-paid span:last-child { opacity: .6; }

/* Sanal POS iframe */
.sheet--pay { max-height: 100dvh; height: calc(100dvh - 16px); }
.sheet--pay .sheet__body { display: flex; flex-direction: column; }
.pay-frame { flex: 1; min-height: 460px; border-radius: 14px; overflow: hidden; border: 1px solid var(--s-line); background: #fff; }
.pay-frame iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; }

/* Bildirim kartı */
.push-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 0 0 14px; border-radius: 14px; background: var(--s-soft); border: 1px solid color-mix(in srgb, var(--s-primary) 35%, transparent); }
.push-card > svg { width: 26px; height: 26px; color: var(--s-primary); flex: none; }
.push-card div { flex: 1; min-width: 0; }
.push-card b { display: block; }
.push-card span { font-size: .86rem; color: var(--s-muted); }

/* Stripe ödeme formu */
.stripe-el { min-height: 180px; margin: 6px 0 10px; }
.stripe-err { color: var(--s-danger); font-weight: 600; font-size: .92rem; margin: 6px 0 0; }

/* Dil seçimi */
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-text); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.lang-btn svg { width: 18px; height: 18px; }
.lang-list { display: grid; gap: 8px; }
.lang-opt { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-text); font-size: 1.05rem; text-align: left; }
.lang-opt span { color: var(--s-muted); font-size: .85rem; font-weight: 700; }
.lang-opt.is-on { border-color: var(--s-primary); box-shadow: 0 0 0 1px var(--s-primary) inset; background: var(--s-soft); }
.receipt__row--disc span:last-child { color: var(--s-danger, #b42318); }

/* İşletme kısayolları */
.links { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.links::-webkit-scrollbar { display: none; }
.link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-text); text-decoration: none; font-weight: 700; font-size: .86rem; }
.link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link--review { background: var(--s-primary); color: var(--s-on-primary); border-color: var(--s-primary); }
.link--review svg { fill: currentColor; stroke: none; }
.review-ask { text-align: center; display: grid; gap: 10px; }
.review-ask svg { width: 52px; height: 52px; margin: 0 auto; fill: #f5b301; }
.review-ask p { margin: 0 0 6px; font-size: 1.02rem; }
.credit { margin: 14px 0 0; text-align: center; font-size: .78rem; }
.credit a { color: var(--s-muted); text-decoration: none; }
.credit a:hover { text-decoration: underline; }
.credit a.credit__cta { display: inline-block; margin-top: 4px; color: var(--s-primary); font-weight: 700; }

/* Sadakat kartı */
.link--loyalty { background: var(--s-surface); border-color: var(--s-primary); color: var(--s-text); }
.link--loyalty b { color: var(--s-primary); font-variant-numeric: tabular-nums; }
.loyalty { display: grid; gap: 12px; }
.loyalty__hi { margin: 0; font-weight: 800; font-size: 1.1rem; }
.loyalty__intro { margin: 0; font-size: 1.05rem; font-weight: 700; }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 10px; padding: 14px; border-radius: 18px; background: var(--s-soft, rgba(0,0,0,.04)); }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--s-line); display: grid; place-items: center; font-size: 1.2rem; color: var(--s-muted); }
.stamp.is-on { border: 0; background: var(--s-primary); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }
.stamp.is-gift { border-color: var(--s-primary); color: var(--s-primary); }
.stamp.is-gift.is-on { color: var(--s-on-primary); }
.loyalty__msg { margin: 0; text-align: center; }
.loyalty__code { display: grid; gap: 2px; text-align: center; padding: 12px; border-radius: 14px; border: 1px solid var(--s-line); }
.loyalty__code span { font-size: .85rem; color: var(--s-muted); }
.loyalty__code b { font-size: 1.8rem; letter-spacing: .2em; }
.loyalty__code small { color: var(--s-muted); }
.input--code { font-size: 1.8rem; letter-spacing: .4em; text-align: center; }
.reward-opt { display: flex; gap: 10px; align-items: center; margin: 12px 0 4px; padding: 12px; border-radius: 14px; background: var(--s-soft, rgba(0,0,0,.04)); border: 1px solid var(--s-primary); }
.reward-opt input { width: 20px; height: 20px; }
.reward-join { display: block; width: 100%; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--s-primary); background: transparent; color: var(--s-primary); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.reward-hint { margin: 10px 0 0; color: var(--s-primary); font-weight: 700; }

/* Kampanyalar */
.promo-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.promo-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .01em; }
.promo-badge.is-combo { background: #7c3aed; }
.promo-badge.is-bundle { background: #ea580c; }
.cart-promo { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff7ed; color: #9a3412; font-weight: 700; }
.track__courier { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #eff6ff; color: #1e3a8a; font-weight: 700; }
.track__courier a { color: inherit; }
.track__courier small { color: #64748b; font-weight: 500; }

/* Kampanyalı fiyat: dar kartta taşmasın, "+" düğmesi her zaman görünsün */
.product__foot { min-width: 0; }
.product__foot .price { min-width: 0; }
.product__foot .add-btn { flex: none; }
.price b { font-weight: inherit; }
.price.has-old { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; white-space: normal; }
.price.has-old s { margin: 0; font-size: .8em; white-space: nowrap; }
.price.has-old b { color: var(--s-danger, #dc2626); white-space: nowrap; }
.product .promo-badges { margin: 2px 0 0; }
.pd .promo-badges { margin: 4px 0 6px; }

/* JavaScript’siz menü (arama motorları ve yapay zekâ botları için; uygulama yüklenince değişir) */
.sofra-static { max-width: 760px; margin: 0 auto; padding: 24px 18px 40px; color: var(--s-text); }
.sofra-static h1 { font-family: var(--s-display), serif; margin: 0 0 6px; }
.sofra-static h2 { margin: 26px 0 8px; font-size: 1.15rem; }
.sofra-static ul { list-style: none; margin: 0; padding: 0; }
.sofra-static li { padding: 8px 0; border-bottom: 1px solid var(--s-line); }
.sofra-static small { color: var(--s-muted); }
.sofra-static nav { margin-top: 24px; font-size: .9rem; }
/* Yasal bağlantılar */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 12px 0 0; font-size: .8rem; }
.legal-links a { color: var(--s-muted); text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }

/* ==========================================================================
 * Vitrin: eve sipariş / gel-al (sitenin ana sayfası)
 * Telefonda tek sütun; masaüstünde geniş menü + sağda sabit sepet.
 * ======================================================================== */
.mode-store { --s-max: 640px; }
/* Üst çubuk: solda logo, sağda dil ve hesap; geniş ekranda Menü ve Siparişlerim */
.masthead { position: relative; z-index: 25; background: var(--s-surface); border-bottom: 1px solid var(--s-line); }
.masthead__in { display: flex; align-items: center; gap: 12px; max-width: var(--s-max); margin: 0 auto; min-height: 64px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; }
.masthead__nav { display: none; align-items: center; gap: 4px; }
.masthead__end { display: flex; align-items: center; gap: 8px; flex: none; }
.mh-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--s-text); font-weight: 600; font-size: .95rem; }
.mh-link:hover { background: var(--s-muted-bg); }
.mh-link.is-on { background: var(--s-soft); color: var(--s-primary); }
.mh-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--s-primary); color: var(--s-on-primary); font-size: .74rem; font-weight: 800; }
.acct-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; max-width: 42vw; padding: 0 14px 0 10px; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-text); font-weight: 700; font-size: .88rem; }
.acct-btn svg { width: 18px; height: 18px; flex: none; }
.acct-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dar telefonlar: hesap düğmesi yalnızca simge, alt çubukta sepet yazısı küçük */
@media (max-width: 359px) {
	.acct-btn { padding: 0 10px; }
	.acct-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.topbar, .masthead__in { gap: 8px; }
	.dock__cart.is-empty .dock__cartlbl, .dock__cartlbl b { display: none; }
	.dock__cart { padding: 0 14px; }
}
@media (max-width: 389px) {
	.dock__cart { gap: 13px; padding: 0 12px; min-width: 0; }
	.dock__cartlbl b { font-size: .9rem; }
}

/* İşletme bilgi kartı: ad, semt, açık / kapalı, sipariş türü, adres ve bilgi kutuları */
.info { margin: 12px 16px 0; padding: 14px; display: grid; gap: 12px; border-radius: calc(var(--s-radius) + 8px); background: var(--s-surface); border: 1px solid var(--s-line); box-shadow: var(--s-card-shadow); }
.info > * { min-width: 0; }
.info__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.info__mark { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--s-soft); color: var(--s-primary); }
.info__mark svg { width: 22px; height: 22px; }
.info__id { flex: 1 1 150px; min-width: 0; }
.info__name { margin: 0; font-family: var(--s-display); font-size: 1.3rem; line-height: 1.12; font-weight: 700; overflow-wrap: anywhere; }
.info__area { margin: 2px 0 0; color: var(--s-muted); font-size: .86rem; }
.info__order { display: grid; gap: 10px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--s-muted-bg); }
.seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 0; border-radius: 11px; background: transparent; color: var(--s-muted); font-weight: 700; font-size: .95rem; }
.seg__btn svg { width: 20px; height: 20px; }
.seg__btn.is-on { background: var(--s-surface); color: var(--s-text); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.seg__btn.is-on svg { color: var(--s-primary); }
.seg--block { margin: 0 0 6px; }
.where { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--s-line); border-radius: 14px; background: var(--s-bg); color: var(--s-text); text-align: left; text-decoration: none; }
.where > svg { width: 22px; height: 22px; color: var(--s-primary); flex: none; }
.where span { flex: 1; min-width: 0; display: grid; }
.where small { font-size: .76rem; color: var(--s-muted); font-weight: 600; }
.where b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.where em { font-style: normal; font-weight: 700; font-size: .86rem; color: var(--s-primary); flex: none; }
.where--box { width: 100%; padding: 12px 14px; border: 1px solid var(--s-line); border-radius: 14px; }
.open-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; background: color-mix(in srgb, var(--s-danger) 12%, var(--s-surface)); color: var(--s-danger); }
.open-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.open-pill.is-open { background: color-mix(in srgb, var(--s-ok) 13%, var(--s-surface)); color: var(--s-ok); }
/* Telefonda yan yana kayan kutular: yazılar tek satır, kutular eşit yükseklikte. */
.facts { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 8px; margin: 0 -14px; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 16px; }
.facts::-webkit-scrollbar { display: none; }
.fact { display: flex; align-items: center; gap: 10px; min-width: 148px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--s-muted-bg); color: var(--s-text); text-align: left; scroll-snap-align: start; }
.fact.is-btn { cursor: pointer; }
.fact.is-btn:hover { background: color-mix(in srgb, var(--s-text) 8%, var(--s-bg)); }
.fact__ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--s-surface); color: var(--s-primary); }
.fact__ico svg { width: 18px; height: 18px; }
.fact__txt { display: grid; min-width: 0; line-height: 1.22; }
.fact__txt small { font-size: .74rem; font-weight: 600; color: var(--s-muted); overflow-wrap: anywhere; }
.fact__txt b { font-size: .93rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fact__txt .fact__sub { font-size: .7rem; font-weight: 500; }
@media (max-width: 759px) {
	.fact__txt small, .fact__txt b { white-space: nowrap; overflow-wrap: normal; }
	.fact__txt b { display: block; }
}
.fact__chev { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--s-muted); }
.fact.is-warn .fact__ico { color: var(--s-danger); }
.geo-debug { display: block; margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--s-line); background: var(--s-muted-bg); font-size: .76rem; line-height: 1.45; color: var(--s-muted); overflow-wrap: anywhere; }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--s-line); }
.hours li:last-child { border-bottom: 0; }
.hours li.is-today { font-weight: 700; color: var(--s-primary); }
.hours li[data-off] b { color: var(--s-muted); font-weight: 600; }
.hours small { font-size: .78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--s-soft); }
.hours b { font-variant-numeric: tabular-nums; }

/* Sepet (masaüstü, sağda sabit) */
.store-aside { display: none; }
.aside-card { padding: 20px; border-radius: calc(var(--s-radius) + 8px); background: var(--s-surface); border: 1px solid var(--s-line); box-shadow: var(--s-card-shadow); }
.aside-card__head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.aside-card__ico { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--s-soft); color: var(--s-primary); }
.aside-card__ico svg { width: 23px; height: 23px; }
.aside-card__ico .dock__badge { top: -6px; right: -6px; }
.aside-card__title { font-family: var(--s-display); font-size: 1.35rem; line-height: 1.15; margin: 0; }
.aside-empty { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 22px 10px 12px; color: var(--s-muted); font-size: .9rem; }
.aside-empty b { color: var(--s-text); font-size: 1.05rem; }
.mini-lines { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.mini-lines li { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--s-line); }
.mini-lines li > div:first-child { grid-column: 1 / -1; min-width: 0; }
.mini-lines b { font-size: .93rem; }
.mini-lines small { display: block; font-size: .8rem; color: var(--s-muted); }
.mini-lines .stepper { justify-self: start; }
.mini-lines__p { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.aside-warn { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; font-size: .86rem; background: color-mix(in srgb, var(--s-accent) 16%, var(--s-surface)); }
.aside-card .btn { margin-top: 12px; }
.totals--compact { font-size: .93rem; }
.totals .is-disc span:last-child { color: var(--s-ok); font-weight: 700; }
.totals .is-free { color: var(--s-ok); }
.free-hint { margin: 2px 0 0; font-size: .82rem; color: var(--s-ok); font-weight: 600; }
.min-warn { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--s-accent) 16%, var(--s-surface)); font-weight: 600; font-size: .9rem; }

/* Sepet / sipariş onayı */
.addr-list { display: grid; gap: 8px; }
.addr-opt { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 44px 12px 14px; border: 1px solid var(--s-line); border-radius: 14px; cursor: pointer; }
.addr-opt input { accent-color: var(--s-primary); width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.addr-opt > span { display: grid; gap: 1px; min-width: 0; }
.addr-opt small { color: var(--s-muted); font-size: .85rem; }
.addr-opt em { font-style: normal; color: var(--s-danger); font-weight: 700; font-size: .82rem; }
.addr-opt:has(input:checked) { border-color: var(--s-primary); background: var(--s-soft); }
.addr-opt.is-off { opacity: .75; cursor: default; }
.icon-mini { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--s-muted-bg); display: grid; place-items: center; }
.acct-addrs .icon-mini { position: static; flex: none; }
.icon-mini svg { width: 16px; height: 16px; }
.add-card { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 14px; border: 1.5px dashed var(--s-primary); background: transparent; color: var(--s-primary); font-weight: 700; }
.add-card svg { width: 20px; height: 20px; }
.link-plain { border: 0; background: none; padding: 8px 0; color: var(--s-primary); font-weight: 700; text-align: left; justify-self: start; }
.pickup-box { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--s-line); border-radius: 14px; }
.pickup-box > svg { width: 22px; height: 22px; color: var(--s-primary); flex: none; margin-top: 2px; }
.pickup-box span { display: grid; gap: 2px; }
.pickup-box small { color: var(--s-muted); font-size: .86rem; }
.pickup-box a { color: var(--s-primary); font-weight: 700; font-size: .9rem; text-decoration: none; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row .input { flex: 1; text-transform: uppercase; }
.coupon-row .input::placeholder { text-transform: none; }
.coupon-row .btn { min-height: 48px; }
.coupon-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--s-ok); background: color-mix(in srgb, var(--s-ok) 8%, var(--s-surface)); }
.coupon-chip svg { width: 20px; height: 20px; color: var(--s-ok); }
.coupon-chip > div { flex: 1; min-width: 0; display: grid; }
.coupon-chip b { overflow-wrap: anywhere; letter-spacing: .02em; }
.coupon-chip span { color: var(--s-ok); font-weight: 700; font-size: .9rem; }
.field-err { color: var(--s-danger); font-weight: 600; font-size: .88rem; margin: 6px 0 0; }
.accept { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: .88rem; line-height: 1.45; cursor: pointer; }
.accept input { width: 20px; height: 20px; accent-color: var(--s-primary); margin: 0; flex: none; }
.accept a, .fine a, .check-line a { color: var(--s-primary); font-weight: 700; }
.foot-hint { margin: 0 0 8px; font-size: .85rem; color: var(--s-muted); text-align: center; }
.foot-hint.is-warn { color: var(--s-text); font-weight: 600; }
.sheet__foot .foot-hint:last-child { margin: 8px 0 0; }

/* Formlar (üyelik, adres, profil) */
.form { display: grid; }
.form .btn { margin-top: 16px; }
.form .btn--ghost { margin-top: 8px; }
.form-intro { margin: 0 0 4px; color: var(--s-muted); }
.form > .field-label:first-child { margin-top: 2px; }
.form .field-label { margin: 14px 0 6px; }
select.input { appearance: auto; padding: 11px 12px; }
.three { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.three label { display: grid; }
.check-line { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.check-line input { width: 20px; height: 20px; accent-color: var(--s-primary); margin: 0; flex: none; }
.pass { position: relative; }
.pass .input { padding-right: 48px; }
.pass__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--s-muted); display: grid; place-items: center; }
.pass__eye svg { width: 20px; height: 20px; }
.title-chips { display: flex; gap: 6px; margin: 4px 0 -4px; }
.zone-info { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--s-soft); font-size: .88rem; font-weight: 600; }
.zone-info svg { width: 18px; height: 18px; color: var(--s-primary); flex: none; }
.auth { display: grid; }
.auth .seg { margin-bottom: 8px; }
.g-btn { margin-top: 8px; gap: 10px; }
.g-btn svg { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--s-muted); font-size: .82rem; margin: 14px 0 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--s-line); }
.verify-box { display: flex; gap: 12px; margin: 8px 0 4px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--s-accent) 14%, var(--s-surface)); border: 1px solid color-mix(in srgb, var(--s-accent) 40%, transparent); }
.verify-box > svg { width: 22px; height: 22px; flex: none; color: var(--s-accent); }
.verify-box div { display: grid; gap: 4px; font-size: .9rem; }
.pad { padding: 56px 20px 8px; }

/* Hesabım */
.acct { display: grid; gap: 4px; }
.acct__hi { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.acct__hi > svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--s-soft); color: var(--s-primary); flex: none; }
.acct__hi div { display: grid; min-width: 0; }
.acct__hi span { color: var(--s-muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; }
.acct .btn svg { width: 20px; height: 20px; }
.acct-addrs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acct-addrs li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--s-line); border-radius: 14px; }
.acct-addrs li > div { flex: 1; display: grid; min-width: 0; }
.acct-addrs span { color: var(--s-muted); font-size: .86rem; }
.acct-addrs small { color: var(--s-muted); font-weight: 500; }
.acct-addrs em { font-style: normal; color: var(--s-danger); font-size: .82rem; font-weight: 700; }
.acct-pass { margin: 16px 0 8px; }
.acct-pass summary { cursor: pointer; font-weight: 700; padding: 10px 0; }

/* Sipariş takibi ekleri */
.track__eta { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--s-soft); color: var(--s-primary); font-size: .8rem; font-weight: 700; }
.track__break { margin: 8px 0 0; font-size: .82rem; color: var(--s-muted); font-variant-numeric: tabular-nums; }
.track__addr { display: flex; gap: 8px; margin: 8px 0 0; font-size: .85rem; color: var(--s-muted); white-space: pre-line; }
.track__addr svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.track__again { margin-top: 10px; width: 100%; gap: 8px; }
.track__again svg { width: 18px; height: 18px; }
.staff-link { text-align: center; margin: 14px 0 0; font-size: .8rem; }
.staff-link a { color: var(--s-muted) !important; font-weight: 600; }

/* Masaüstü ve tablet */
@media (min-width: 760px) {
	.mode-store .cat__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mode-store.layout-grid .cat__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mode-store.ms-cards .cat__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mode-store.ms-fine .cat__list { grid-template-columns: 1fr; }
	.mode-store.ms-rows .product { flex-basis: 240px; }
	.mode-store.ms-photo .cat__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mode-store.ms-classic .cat__list, .mode-store.ms-chalk .cat__list, .mode-store.ms-paper .cat__list { column-gap: 32px; }
	.mode-store { --s-max: 860px; }
	.mode-store .info { margin: 18px 20px 0; padding: 18px 20px; }
	.mode-store .info__order { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; }
	.mode-store .info__order:not(:has(> .seg)) { grid-template-columns: 1fr; }
	/* Geniş ekranda satırlara yayılır: 5 kutu 3 + 2, 4 kutu tek satır; tek kalan kutu satırı doldurur, yazılar bölünmez. */
	.mode-store .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; overflow: visible; }
	.mode-store .fact { flex: 1 1 196px; min-width: 0; }
	.mode-store .facts:has(> .fact:nth-child(4):last-child) .fact { flex-basis: 150px; }
	.mode-store .sheet { width: min(100%, 600px); }
}
@media (min-width: 1080px) {
	.mode-store { --s-max: 1240px; }
	html:has(> body.mode-store) { --s-stick-top: 65px; } /* Uygulama gerçek yüksekliği ölçüp yazar. */
	.mode-store .app { max-width: none; box-shadow: none; padding-bottom: 40px; }
	body.mode-store { background: var(--s-bg); }
	.mode-store .masthead { position: sticky; top: 0; }
	.mode-store .masthead__in { padding-left: 32px; padding-right: 32px; }
	.mode-store .masthead__nav { display: flex; margin-left: 12px; }
	.mode-store .masthead .brand { flex: 0 1 auto; }
	.mode-store .masthead__nav + .masthead__end { margin-left: auto; }
	.mode-store .brand__logo { height: 60px; max-width: 280px; }
	.store-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 28px; align-items: start; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
	.mode-store .info { margin: 22px 0 0; }
	.mode-store .links { padding-left: 0; padding-right: 0; margin-top: 12px; }
	.mode-store #s-notices .notice { margin-left: 0; margin-right: 0; }
	.mode-store .live-list { padding-left: 0; padding-right: 0; }
	.store-main .search, .store-main .chips { padding-left: 0; padding-right: 0; }
	.store-main .menu { padding-left: 0; padding-right: 0; }
	.store-aside { display: block; position: sticky; top: calc(var(--s-stick-top) + 22px); margin-top: 22px; }
	.mode-store .dock { display: none; }
	html.sofra-has-dock body.mode-store .sofra-cookie { bottom: calc(12px + var(--s-safe-b)); }
	.mode-store .footer { max-width: 1176px; margin-left: auto; margin-right: auto; }
	/* Alt sayfalar ekranın ortasında pencere olarak açılır. */
	.mode-store .sheet { top: 50%; bottom: auto; max-height: min(88vh, 860px); border-radius: var(--s-sheet-radius); transform: translate(-50%, -46%); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
	.mode-store .sheet.is-open { transform: translate(-50%, -50%); opacity: 1; }
	.mode-store .sheet--pay { height: min(88vh, 860px); }
}

/* ---------- Harita: adres seçimi ve sipariş takibi ---------- */
.addr-map { position: relative; margin: 0 0 6px; border-radius: 14px; overflow: hidden; border: 1px solid var(--s-line); background: var(--s-soft); isolation: isolate; }
.addr-map__canvas { height: 230px; width: 100%; }
.addr-map__pin { position: absolute; left: 50%; top: 50%; z-index: 500; transform: translate(-50%, -100%); pointer-events: none; color: var(--s-primary); filter: drop-shadow(0 3px 3px rgb(0 0 0 / .35)); }
.addr-map__pin svg { width: 40px; height: 40px; fill: var(--s-surface); stroke-width: 2.2; }
.addr-map__locate { position: absolute; left: 10px; bottom: 10px; z-index: 600; gap: 6px; box-shadow: var(--s-shadow); }
.addr-map__locate svg { width: 18px; height: 18px; }
.addr-map__status { margin: 6px 0 12px; font-size: .84rem; color: var(--s-muted); line-height: 1.45; }
.addr-map__status.is-warn { color: var(--s-danger); }
.zone-locate { gap: 8px; margin: 0 0 4px; }
.zone-locate svg { width: 18px; height: 18px; }
.leaflet-container { font: inherit; background: var(--s-soft); }
.leaflet-container a { color: var(--s-primary); }
.leaflet-control-attribution { font-size: 10px; }
.mk { background: none; border: 0; }
.mk__dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; border: 3px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.mk__dot svg { width: 20px; height: 20px; stroke-width: 2; }
.mk--shop .mk__dot { background: var(--s-primary); color: var(--s-on-primary); }
.mk--home .mk__dot { background: #1d4ed8; }
.mk--courier .mk__dot { background: #15803d; position: relative; }
.mk--courier .mk__dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid #15803d; opacity: 0; animation: mk-pulse 2s ease-out infinite; }
@keyframes mk-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
.track__mapbox { margin: 12px 0 4px; }
.track__map { height: 220px; border-radius: 14px; overflow: hidden; border: 1px solid var(--s-line); isolation: isolate; }
.track__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 2px 0; font-size: .8rem; color: var(--s-muted); }
.mk-legend { display: inline-flex; align-items: center; gap: 6px; }
.mk-legend i { width: 10px; height: 10px; border-radius: 50%; }
.mk-legend--shop i { background: var(--s-primary); }
.mk-legend--home i { background: #1d4ed8; }
.mk-legend--courier i { background: #15803d; }
.track__live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 0; font-size: .88rem; font-weight: 700; }
.track__live small { font-weight: 500; color: var(--s-muted); }
.track__live.is-wait { font-weight: 600; color: var(--s-muted); }
.track__pulse { width: 10px; height: 10px; border-radius: 50%; background: #15803d; box-shadow: 0 0 0 0 rgb(21 128 61 / .6); animation: tr-pulse 1.6s infinite; }
@keyframes tr-pulse { 70% { box-shadow: 0 0 0 9px rgb(21 128 61 / 0); } 100% { box-shadow: 0 0 0 0 rgb(21 128 61 / 0); } }
.track__dir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; font-size: .9rem; color: var(--s-primary); }
.track__dir svg { width: 18px; height: 18px; }
.track__courier { background: color-mix(in srgb, #2563eb 12%, var(--s-surface)); color: var(--s-text); align-items: center; }
.track__courier svg { width: 20px; height: 20px; flex: none; color: #2563eb; }
@media (prefers-reduced-motion: reduce) { .mk--courier .mk__dot::after, .track__pulse { animation: none; } }

/* ---------- Değerlendirme (yalnızca işletme görür) ---------- */
.rate { margin: 12px 0 4px; padding: 14px; border-radius: 14px; background: var(--s-soft); border: 1px solid color-mix(in srgb, var(--s-primary) 30%, transparent); }
.rate__q { margin: 0 0 6px; font-weight: 700; font-size: 1.02rem; }
.rate__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin: 0; padding: 0; border: 0; }
.rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate__stars label { cursor: pointer; padding: 2px; line-height: 0; border-radius: 8px; }
.rate__stars svg { width: 34px; height: 34px; fill: transparent; stroke: color-mix(in srgb, var(--s-text) 45%, transparent); stroke-width: 1.6; transition: fill .12s, stroke .12s, transform .12s; }
.rate__stars input:checked ~ label svg,
.rate__stars label:hover svg,
.rate__stars label:hover ~ label svg { fill: #f5b400; stroke: #d99b00; }
.rate__stars input:focus-visible + label { outline: 2px solid var(--s-primary); outline-offset: 2px; }
.rate__stars label:active svg { transform: scale(.9); }
.rate__word { min-height: 1.3em; margin: 2px 0 8px; font-size: .88rem; font-weight: 700; color: var(--s-primary); }
.rate__text { margin-bottom: 10px; }
.rate .fine { margin-top: 8px; }
.rate.is-done { background: transparent; border-style: dashed; }
.rate__done { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-weight: 600; }
.rate__show { color: #f5b400; font-size: 1.2rem; letter-spacing: 2px; }
.rate__comment { margin: 8px 0 0; font-size: .9rem; color: var(--s-muted); white-space: pre-line; }
.rate__google { margin: 10px 0 0; font-size: .88rem; }
.addr-nopin { display: flex !important; align-items: center; gap: 4px; margin-top: 4px; color: var(--s-primary) !important; font-weight: 600; }
.addr-nopin svg { width: 14px; height: 14px; flex: none; }

/* Sağdan sola diller (Arapça, Farsça) */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .dock__cartlbl { text-align: right; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="number"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }

/* Hotmail / Outlook uyarısı (e-posta kutularının altında) */
.mail-warn { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; font-size: .85rem; line-height: 1.4; font-weight: 600; color: var(--s-text); background: color-mix(in srgb, var(--s-accent) 16%, var(--s-surface)); }