/* =========================================================
   Müşteri menüsü
   Renkler: porselen zemin, kobalt mürekkep, işletmenin seçtiği vurgu rengi
   ========================================================= */
:root {
    --accent: #D8321F;
    --accent-ink: #FFFFFF;
    --bg: #F3F6FA;
    --surface: #FFFFFF;
    --surface-2: #E9EEF6;
    --ink: #101B3B;
    --muted: #5A6688;
    --line: #DCE3EF;
    --good: #0E8F6E;
    --bad: #C4321F;
    --gold: #E2A100;
    --shadow: 0 1px 2px rgba(16, 27, 59, .06), 0 10px 30px -12px rgba(16, 27, 59, .18);
    --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
    --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --spring: cubic-bezier(.3, 1.3, .5, 1);
    --dock-h: 72px;
}
[data-theme="dark"] {
    --bg: #0A1022;
    --surface: #131B35;
    --surface-2: #1B2546;
    --ink: #EEF2FB;
    --muted: #98A3C4;
    --line: #242F55;
    --good: #37C9A0;
    --bad: #FF7A66;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -14px rgba(0, 0, 0, .7);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 150px; }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 400 16px/1.5 var(--body);
    -webkit-tap-highlight-color: transparent;
    padding-bottom: calc(var(--dock-h) + 28px + env(safe-area-inset-bottom));
    transition: background-color .4s, color .4s;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.ic { flex: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, var(--ink)); outline-offset: 2px; border-radius: 8px; }
[data-theme="light"] .only-dark, [data-theme="dark"] .only-light { display: none; }

/* ---------- Kapak ---------- */
.cover {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--accent); color: var(--accent-ink);
    padding: calc(14px + env(safe-area-inset-top)) 20px 22px;
    border-radius: 0 0 28px 28px;
}
.cover::before {
    content: ""; position: absolute; inset: -56px; z-index: -1;
    background-image: var(--star); background-size: 56px 56px;
    animation: drift 40s linear infinite;
    -webkit-mask-image: linear-gradient(115deg, transparent 20%, #000 75%); mask-image: linear-gradient(115deg, transparent 20%, #000 75%);
}
@keyframes drift { to { transform: translate(56px, 56px); } }
.cover__top { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.cover__table {
    font: 700 13px/1 var(--body); padding: 9px 14px; border-radius: 99px;
    background: var(--accent-ink); color: var(--accent);
}
.roundbtn {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent-ink) 16%, transparent); color: inherit;
    transition: transform .3s var(--spring), background-color .2s;
}
.roundbtn:active { transform: scale(.9) rotate(-20deg); }
.cover__body { max-width: 1040px; margin: 14px auto 0; }
.cover__logo {
    width: 88px; height: 88px; border-radius: 26px; overflow: hidden;
    background: var(--accent-ink); color: var(--accent);
    display: grid; place-items: center;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-ink) 22%, transparent);
    animation: pop .7s var(--spring) both;
}
.cover__logo img { width: 100%; height: 100%; object-fit: cover; }
.cover__logo span { font: 800 44px/1 var(--display); }
.cover__title {
    font: 800 clamp(34px, 9.5vw, 60px)/.98 var(--display); letter-spacing: -.035em;
    margin-top: 18px; text-wrap: balance;
    animation: rise .7s .08s var(--ease) both;
}
.cover__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 14px; animation: rise .7s .16s var(--ease) both; }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; position: relative; }
.status.is-open i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: ping 1.8s ease-out infinite; }
.status.is-closed { opacity: .75; }
@keyframes ping { to { transform: scale(3); opacity: 0; } }
.cover__rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; }
.cover__rating small { font-weight: 500; opacity: .8; font-size: 13px; }
.cover__address { margin-top: 8px; font-size: 14.5px; opacity: .88; max-width: 46ch; animation: rise .7s .2s var(--ease) both; }
.cover__actions {
    max-width: 1040px; margin: 20px auto 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    animation: rise .7s .26s var(--ease) both;
}
.cover__actions::-webkit-scrollbar { display: none; }
.cover__actions a {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 13px;
    border-radius: 99px; text-decoration: none; color: inherit; font-weight: 600; font-size: 14.5px;
    background: color-mix(in srgb, var(--accent-ink) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
    transition: background-color .2s, transform .2s;
}
.cover__actions a:active { transform: scale(.96); }
@media (hover: hover) { .cover__actions a:hover { background: color-mix(in srgb, var(--accent-ink) 26%, transparent); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }

/* ---------- Duyuru ve bilgi kutuları ---------- */
.announce, .facts, .menu, .foot { max-width: 1080px; margin-inline: auto; }
.announce {
    display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px;
    width: calc(100% - 32px); border-radius: 18px;
    background: color-mix(in srgb, var(--gold) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    font-weight: 500; font-size: 15px;
}
.announce .ic { color: color-mix(in srgb, var(--gold) 70%, var(--ink)); margin-top: 1px; }
.facts { display: flex; gap: 10px; padding: 14px 16px 2px; overflow-x: auto; scrollbar-width: none; }
.facts::-webkit-scrollbar { display: none; }
.fact {
    flex: 1 0 auto; display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
    transition: transform .2s, border-color .2s;
}
button.fact:active { transform: scale(.97); }
@media (hover: hover) { button.fact:hover { border-color: var(--accent); } }
.fact .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--surface-2); color: var(--ink); }
.fact b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.fact small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- Arama ve kategori şeridi ---------- */
.bar {
    position: sticky; top: 0; z-index: 30; margin-top: 12px;
    padding: 10px 0 0; background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
.bar.is-stuck { border-bottom-color: var(--line); box-shadow: 0 10px 24px -20px rgba(16, 27, 59, .5); }
.search {
    display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 16px;
    max-width: 1048px; margin: 0 auto; width: calc(100% - 32px);
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px;
    transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.search .ic { color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; font-weight: 500; }
.search input::placeholder { color: var(--muted); font-weight: 400; }
.search input::-webkit-search-cancel-button { display: none; }
.search button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.tabs {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
    padding: 10px 16px 10px; max-width: 1080px; margin: 0 auto;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 5px;
    border-radius: 99px; font-weight: 600; font-size: 14.5px; color: var(--muted); white-space: nowrap;
    background: var(--surface); border: 1px solid var(--line);
    transition: background-color .25s, color .25s, border-color .25s, transform .2s;
}
.tab:active { transform: scale(.96); }
.tab__thumb {
    width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2) center/cover no-repeat;
    display: grid; place-items: center; font: 800 14px/1 var(--display); color: var(--ink);
}
.tab__thumb--icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---------- Menü gövdesi ---------- */
.menu { padding: 6px 16px 0; }
.featured { margin: 14px -16px 0; }
.featured h2, .group__head h2, .review h2, .empty h2, .sheet__title {
    font-family: var(--display); font-weight: 800; letter-spacing: -.025em; line-height: 1.05;
}
.featured h2 { font-size: 24px; padding: 0 16px; max-width: 16ch; }
.featured__rail {
    display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
    padding: 16px 16px 6px; scroll-padding-left: 16px;
}
.featured__rail::-webkit-scrollbar { display: none; }
.pick { flex: none; width: 148px; text-align: left; scroll-snap-align: start; display: flex; flex-direction: column; }
.pick__img {
    display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--surface-2);
    transition: transform .35s var(--spring);
}
.pick:nth-child(even) .pick__img { border-radius: 22px 22px 22px 60px; }
.pick:nth-child(odd) .pick__img { border-radius: 22px 60px 22px 22px; }
.pick__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pick__img.is-empty { display: grid; place-items: center; background: var(--accent) var(--star); background-size: 56px; color: var(--accent-ink); }
.pick__img em { font: 800 54px/1 var(--display); font-style: normal; }
.pick:active .pick__img { transform: scale(.96); }
@media (hover: hover) { .pick:hover .pick__img img { transform: scale(1.07); } }
.pick__name { font-weight: 700; font-size: 15px; line-height: 1.25; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick__price { font: 700 15px/1 var(--display); color: var(--accent); margin-top: 5px; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .pick__price, [data-theme="dark"] .item__price b { color: color-mix(in srgb, var(--accent) 62%, #fff); }

.group { margin-top: 30px; }
.group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.group__head h2 { font-size: 30px; }
.group__count { font-size: 14px; font-weight: 600; color: var(--muted); flex: none; }
.group__head.has-img {
    position: relative; isolation: isolate; overflow: hidden; align-items: flex-end;
    min-height: 124px; padding: 16px 18px; margin-bottom: 12px; border-radius: 24px; color: #fff;
    background: #101B3B;
}
.group__head.has-img::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img) center/cover; }
.group__head.has-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 13, 32, .86), rgba(8, 13, 32, .1) 75%); }
.group__head.has-img .group__count { color: rgba(255, 255, 255, .85); }

.list { display: grid; gap: 10px; }
@media (min-width: 860px) { .list { grid-template-columns: 1fr 1fr; gap: 14px; } }
.item {
    display: flex; gap: 14px; justify-content: space-between; padding: 14px 14px 14px 16px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
    transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.item:active { transform: scale(.985); }
@media (hover: hover) { .item:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); } }
.item__text { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.item h3 { font: 700 17px/1.25 var(--body); letter-spacing: -.01em; }
.item__desc { overflow-wrap: anywhere; color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item__price { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.item__price b { font: 700 19px/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.item__price s, .ps__price s { color: var(--muted); font-size: 14px; }
.soldout { font-size: 13px; font-weight: 700; color: var(--bad); }
.item__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.tag { font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.tag--pop { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.tag--yeni { background: color-mix(in srgb, #1F45D1 14%, var(--surface)); color: color-mix(in srgb, #1F45D1 70%, var(--ink)); }
.tag--vegan, .tag--vejetaryen { background: color-mix(in srgb, #2F8F3B 16%, var(--surface)); color: color-mix(in srgb, #2F8F3B 72%, var(--ink)); }
.tag--aci { background: color-mix(in srgb, #D8321F 14%, var(--surface)); color: color-mix(in srgb, #D8321F 78%, var(--ink)); }
.tag--sef { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: color-mix(in srgb, var(--gold) 50%, var(--ink)); }
.item__side { position: relative; flex: none; display: flex; align-items: flex-end; }
.item__img { width: 104px; height: 104px; border-radius: 16px; object-fit: cover; background: var(--surface-2); }
.add {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 0 0 3px var(--surface), 0 6px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: transform .3s var(--spring);
}
.item__img + .add { position: absolute; right: -6px; bottom: -6px; }
.add:active { transform: scale(.82); }
.add.is-bump { animation: bump .45s var(--spring); }
@keyframes bump { 40% { transform: scale(1.3) rotate(90deg); } }
.item.is-out { opacity: .62; }
.item.is-out .item__img { filter: grayscale(1); }
.item.is-hit { animation: hit 1.2s var(--ease); }
@keyframes hit { 0%, 40% { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } }

.empty { text-align: center; padding: 56px 20px; }
.empty h2 { font-size: 26px; }
.empty p { color: var(--muted); margin: 8px auto 18px; max-width: 30ch; }

/* ---------- Değerlendirme ---------- */
.review {
    margin-top: 44px; padding: 28px 22px; border-radius: 28px; text-align: center;
    background: var(--ink); color: var(--bg);
}
.review h2 { font-size: 30px; }
.review > p { opacity: .7; font-size: 14.5px; margin-top: 6px; }
.stars { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
.stars button { width: 48px; height: 48px; display: grid; place-items: center; color: inherit; transition: transform .3s var(--spring); }
.stars svg { fill: transparent; stroke: currentColor; stroke-width: 1.4; opacity: .55; transition: fill .2s, opacity .2s, stroke .2s; }
.stars button.is-on svg { fill: var(--gold); stroke: var(--gold); opacity: 1; }
.stars button.is-on { animation: starpop .4s var(--spring); }
.stars button:active { transform: scale(.8); }
@keyframes starpop { 50% { transform: scale(1.3) rotate(12deg); } }
.review__form { display: grid; gap: 10px; margin-top: 18px; animation: rise .4s var(--ease); }
.review__form input, .review__form textarea {
    width: 100%; padding: 13px 15px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--bg) 24%, transparent);
    background: color-mix(in srgb, var(--bg) 9%, transparent); color: inherit; outline: 0; resize: vertical; font-size: 16px;
}
.review__form input::placeholder, .review__form textarea::placeholder { color: color-mix(in srgb, var(--bg) 55%, transparent); }
.review__form input:focus, .review__form textarea:focus { border-color: var(--bg); }
.review__done { margin-top: 18px; font-weight: 600; opacity: 1 !important; animation: rise .4s var(--ease); }

/* ---------- Düğmeler ve alanlar ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 22px;
    border-radius: 16px; font-weight: 700; font-size: 16px; transition: transform .2s, filter .2s, background-color .2s;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) { .btn--accent:hover { filter: brightness(1.08); } }
.btn--ghost { background: var(--surface-2); color: var(--ink); }
.btn--wide { width: 100%; }
.field { display: block; }
.field span { display: block; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field input {
    width: 100%; height: 50px; padding: 0 15px; border-radius: 14px; outline: 0; font-size: 16px; font-weight: 600;
    background: var(--bg); border: 1.5px solid var(--line); transition: border-color .2s;
}
.field input:focus { border-color: var(--accent); }
.field input.is-missing { border-color: var(--bad); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.hint { font-size: 13.5px; color: var(--muted); text-align: center; }
.hint--strong { color: var(--ink); font-weight: 600; font-size: 15px; padding: 6px 0; }

/* ---------- Alt çubuk ---------- */
.foot { text-align: center; padding: 34px 16px 6px; }
.foot a { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.foot__qr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; height: 16px; }
.foot__qr i { background: currentColor; border-radius: 2px; }
.foot__qr i:nth-child(4) { background: var(--accent); }
.totop {
    position: fixed; right: 16px; bottom: calc(var(--dock-h) + 30px + env(safe-area-inset-bottom)); z-index: 35;
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink);
    animation: rise .3s var(--ease);
}
.dock {
    position: fixed; z-index: 40; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%); width: min(520px, calc(100% - 24px));
    display: flex; gap: 8px; padding: 8px; border-radius: 26px;
    background: rgba(16, 27, 59, .95); color: #F3F6FA; border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -14px rgba(8, 13, 32, .55);
    animation: dockin .7s .35s var(--spring) both;
}
@keyframes dockin { from { transform: translate(-50%, 140%); } }
.dock__bell {
    flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 18px; border-radius: 19px;
    background: rgba(255, 255, 255, .13); color: inherit; font-weight: 700; font-size: 15px;
    transition: transform .2s;
}
.dock__bell:only-child { flex: 1; justify-content: center; }
.dock__bell:active, .dock__cart:active { transform: scale(.96); }
.dock__bell .ic { transform-origin: 50% 20%; }
.dock__bell.is-ringing .ic { animation: ring .9s ease-in-out; }
@keyframes ring { 15% { transform: rotate(16deg); } 35% { transform: rotate(-14deg); } 55% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
.dock__cart {
    flex: 1; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 10px; border-radius: 19px;
    background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15.5px; transition: transform .2s;
}
.dock__badge {
    min-width: 36px; height: 36px; padding: 0 8px; border-radius: 13px; display: grid; place-items: center;
    background: var(--accent-ink); color: var(--accent); font: 800 16px/1 var(--display); font-variant-numeric: tabular-nums;
}
.dock__badge.is-bump { animation: bump2 .5s var(--spring); }
@keyframes bump2 { 40% { transform: scale(1.35); } }
.dock__total { margin-left: auto; font: 700 17px/1 var(--display); font-variant-numeric: tabular-nums; }

/* ---------- Açılır paneller ---------- */
.backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(8, 13, 32, .55); opacity: 0; transition: opacity .3s; }
.backdrop.is-on { opacity: 1; }
.sheet {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(560px, 100%);
    max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); color: var(--ink); border-radius: 30px 30px 0 0;
    transform: translateY(104%); transition: transform .5s var(--ease);
    box-shadow: 0 -20px 60px -20px rgba(8, 13, 32, .5);
}
.sheet.is-on { transform: none; }
.sheet::before { content: ""; position: sticky; top: 8px; display: block; width: 44px; height: 5px; margin: 8px auto -13px; border-radius: 9px; background: var(--line); z-index: 3; }
.sheet__close {
    position: sticky; top: 14px; z-index: 4; float: right; margin: 14px 14px -58px 0;
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sheet__body { padding: 30px 20px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 16px; }
.sheet__title { font-size: 28px; padding-right: 54px; }
.sheet__lead { color: var(--muted); margin-top: -8px; }
.sheet__result { padding: 14px 16px; border-radius: 14px; font-weight: 600; background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--good); animation: rise .35s var(--ease); }
.sheet__result.is-bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
@media (min-width: 720px) {
    .sheet { bottom: 50%; border-radius: 30px; transform: translateY(60%) scale(.96); opacity: 0; visibility: hidden; transition: transform .4s var(--ease), opacity .25s, visibility 0s .4s; }
    .sheet.is-on { transform: translateY(50%); opacity: 1; visibility: visible; transition: transform .4s var(--ease), opacity .25s; }
    .sheet::before { display: none; }
}

.sheet--product .ps__media { aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.sheet--product .ps__media img { width: 100%; height: 100%; object-fit: cover; }
.sheet--product .ps__media[hidden] + .sheet__body { padding-top: 34px; }
.sheet--product .sheet__body { padding-top: 20px; gap: 12px; }
.ps__head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.ps__head h2 { font: 800 30px/1.05 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.sheet--product .item__tags { margin: 0; }
.sheet--product .item__tags:empty { display: none; }
.favbtn { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); transition: transform .3s var(--spring); }
.favbtn svg { fill: transparent; transition: fill .2s; }
.favbtn[aria-pressed="true"] { color: #E0245E; animation: starpop .45s var(--spring); }
.favbtn[aria-pressed="true"] svg { fill: currentColor; }
.ps__desc { color: var(--muted); font-size: 16px; line-height: 1.55; }
.ps__desc:empty { display: none; }
.ps__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.ps__facts:empty { display: none; }
.ps__facts li { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 12px; background: var(--bg); font-size: 14px; font-weight: 600; }
.ps__buy { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.ps__price b { font: 800 32px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ps__price s { margin-left: 8px; font-size: 16px; }
.ps__price s:empty { display: none; }
.ps__out { text-align: center; font-weight: 700; color: var(--bad); padding: 12px; }
.stepper { display: inline-flex; align-items: center; background: var(--bg); border: 1.5px solid var(--line); border-radius: 16px; padding: 4px; }
.stepper button { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); transition: transform .2s; }
.stepper button:active { transform: scale(.88); }
.stepper output { min-width: 38px; text-align: center; font: 800 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.stepper--sm { padding: 2px; border-radius: 12px; }
.stepper--sm button { width: 32px; height: 32px; border-radius: 9px; }
.stepper--sm output { min-width: 28px; font-size: 15px; }

/* Adisyon: kasa fişi görünümü */
.receipt {
    position: relative; margin-top: 30px; padding: 22px 18px 20px; color: #1B2030;
    background: #FBFAF4; border-radius: 6px 6px 0 0; font-variant-numeric: tabular-nums;
    filter: drop-shadow(0 8px 14px rgba(8, 13, 32, .16));
}
.receipt::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
    background: linear-gradient(-45deg, transparent 7px, #FBFAF4 0) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 7px, #FBFAF4 0) 0 0 / 14px 10px repeat-x;
    transform: scaleY(-1);
}
.receipt__head { text-align: center; padding-bottom: 14px; border-bottom: 2px dashed #C9C6B8; }
.receipt__head h2 { font: 800 22px/1.1 var(--display); letter-spacing: -.02em; }
.receipt__head p { font-size: 13.5px; color: #6C6A5E; margin-top: 4px; font-weight: 600; }
.receipt__lines li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px dashed #D9D6C8; animation: rise .3s var(--ease); }
.receipt__lines b { font-weight: 700; font-size: 15px; line-height: 1.25; display: block; }
.receipt__lines small { color: #6C6A5E; font-size: 13px; }
.receipt__lines .line__sum { font: 700 16px/1 var(--display); min-width: 62px; text-align: right; }
.receipt .stepper { background: #EFEDE2; border-color: #DDD9C8; }
.receipt .stepper button { background: #FBFAF4; color: #1B2030; }
.receipt__empty { text-align: center; padding: 30px 10px 14px; }
.receipt__empty p { font-weight: 700; font-size: 17px; }
.receipt__empty small { color: #6C6A5E; display: block; margin-top: 6px; }
.receipt__sum { padding-top: 12px; display: grid; gap: 6px; }
.receipt__sum div { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; color: #55534A; }
.receipt__sum .receipt__total { color: #1B2030; font: 800 24px/1.1 var(--display); padding-top: 8px; }
.receipt__sum .receipt__total dd { letter-spacing: -.02em; }
.cart__actions { display: grid; gap: 12px; margin-top: 16px; }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice__btn {
    display: grid; gap: 4px; justify-items: start; text-align: left; padding: 18px 16px; border-radius: 20px;
    background: var(--bg); border: 1.5px solid var(--line); transition: transform .2s, border-color .2s, background-color .2s;
}
.choice__btn .ic { color: var(--accent); margin-bottom: 8px; }
.choice__btn b { font-size: 16.5px; }
.choice__btn small { color: var(--muted); font-size: 13.5px; line-height: 1.3; }
.choice__btn:active { transform: scale(.96); }
.choice__btn[disabled] { opacity: .5; }
@media (hover: hover) { .choice__btn:hover { border-color: var(--accent); } }

.kv { display: grid; gap: 10px; }
.kv div { padding: 14px 16px; border-radius: 16px; background: var(--bg); }
.kv dt { font-size: 13px; font-weight: 600; color: var(--muted); }
.kv dd { font-weight: 700; font-size: 17px; margin-top: 2px; word-break: break-word; }
.kv__big { font: 800 26px/1.2 var(--display) !important; letter-spacing: .01em; }
.kv__iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.toast {
    position: fixed; z-index: 80; left: 50%; top: calc(16px + env(safe-area-inset-top));
    transform: translate(-50%, -160%); padding: 13px 20px; border-radius: 99px; max-width: calc(100% - 32px);
    background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14.5px; text-align: center;
    box-shadow: 0 14px 30px -10px rgba(8, 13, 32, .5); transition: transform .45s var(--spring);
}
.toast.is-on { transform: translate(-50%, 0); }

@media (min-width: 720px) {
    .cover { padding-inline: 32px; padding-bottom: 30px; }
    .featured h2 { max-width: none; font-size: 28px; }
    .pick { width: 176px; }
    .group__head h2 { font-size: 36px; }
}

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