[hidden] { display: none !important; }
/* Müşteri menüsü — telefon önce. Renkler işletmenin seçtiği 3 tarz × 3 renk paletinden (ortak.js V.temaUygula). */
:root { --zemin: #FFFFFF; --yazi: #141414; --ikincil: #4D4D4D; --vurgu: #FF4D2E; --vurgu-yazi: #111111;
  --yuzey: color-mix(in srgb, var(--yazi) 5%, var(--zemin)); --yuzey2: color-mix(in srgb, var(--yazi) 9%, var(--zemin)); --cizgi: color-mix(in srgb, var(--yazi) 15%, var(--zemin));
  --r: 18px; --r-s: 12px; --golge: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -14px rgba(0,0,0,.28); --e: cubic-bezier(.2,.8,.2,1); --max: 760px; }
body { background: var(--zemin); color: var(--yazi); min-height: 100vh; }
body[data-tarz="2"] { --r: 8px; --r-s: 6px; --golge: none; }
body[data-tarz="3"] { --r: 4px; --r-s: 4px; --golge: none; }
.yukleniyor { display: flex; gap: 6px; justify-content: center; padding: 40vh 0; }
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--ikincil); animation: nk 1s infinite ease-in-out; } .nokta:nth-child(2) { animation-delay: .15s; } .nokta:nth-child(3) { animation-delay: .3s; }
@keyframes nk { 50% { transform: translateY(-6px); opacity: .5; } }
.kap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: var(--r-s); border: 0; background: var(--vurgu); color: var(--vurgu-yazi); font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .12s var(--e), filter .15s; }
.btn:active { transform: scale(.98); } .btn:hover { filter: brightness(1.05); }
.btn.ikinci { background: var(--yuzey2); color: var(--yazi); }
.btn.cizgili { background: transparent; color: var(--yazi); border: 1.5px solid var(--cizgi); }
.btn.tam { width: 100%; }
.btn.kucuk { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.ikonbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--yuzey); color: var(--yazi); display: inline-grid; place-items: center; }

/* ---------- başlık ---------- */
.ust { padding-top: 18px; padding-bottom: 10px; }
.ust-satir { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.marka { font-size: clamp(26px, 7vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
body[data-tarz="3"] .marka { text-transform: uppercase; font-size: clamp(30px, 9vw, 48px); letter-spacing: -.02em; }
body[data-tarz="2"] .marka { font-size: clamp(22px, 6vw, 30px); font-weight: 700; }
.alt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; color: var(--ikincil); font-size: 14px; }
.durum { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--yuzey); color: var(--yazi); font-weight: 600; font-size: 13px; }
.durum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1E9E5A; box-shadow: 0 0 0 3px color-mix(in srgb, #1E9E5A 25%, transparent); }
.durum.kapali::before { background: #C93A2B; box-shadow: 0 0 0 3px color-mix(in srgb, #C93A2B 25%, transparent); }
.secici { min-height: 40px; border-radius: 99px; border: 1.5px solid var(--cizgi); background: var(--zemin); padding: 4px 12px; font-weight: 600; font-size: 16px; }
.dil { min-height: 40px; padding: 0 12px; border-radius: 99px; border: 1.5px solid var(--cizgi); background: transparent; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.mod { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--yuzey); padding: 4px; border-radius: calc(var(--r-s) + 4px); margin: 12px 0 4px; }
.mod button { min-height: 44px; border: 0; border-radius: var(--r-s); background: transparent; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ikincil); }
.mod button[aria-pressed="true"] { background: var(--zemin); color: var(--yazi); box-shadow: var(--golge); }
body[data-tarz="3"] .mod button[aria-pressed="true"] { background: var(--yazi); color: var(--zemin); }
.masa-bant { margin: 12px 0 4px; padding: 12px 14px; border-radius: var(--r); background: var(--vurgu); color: var(--vurgu-yazi); display: flex; align-items: center; gap: 10px; font-weight: 700; }
.not-bant { margin: 10px 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--yuzey); font-size: 14px; display: flex; gap: 10px; }

/* ---------- arama, filtre, kategori şeridi ---------- */
.ara { position: relative; margin-top: 10px; }
.ara input { width: 100%; min-height: 48px; padding: 10px 14px 10px 44px; border-radius: var(--r-s); border: 1.5px solid var(--cizgi); background: var(--yuzey); }
.ara .ic { position: absolute; left: 14px; top: 14px; color: var(--ikincil); }
.filtre { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.filtre::-webkit-scrollbar { display: none; }
.cip { flex: none; min-height: 38px; padding: 6px 12px; border-radius: 99px; border: 1.5px solid var(--cizgi); background: transparent; font-size: 14px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.cip[aria-pressed="true"] { background: var(--yazi); color: var(--zemin); border-color: var(--yazi); }
.serit { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--zemin) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); }
.concept + #app .serit, body.konsept .serit { top: 28px; }
.serit-ic { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; max-width: var(--max); margin: 0 auto; scrollbar-width: none; }
.serit-ic::-webkit-scrollbar { display: none; }
.serit a { flex: none; min-height: 40px; padding: 8px 14px; border-radius: 99px; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--ikincil); display: inline-flex; align-items: center; gap: 6px; }
.serit a.aktif { background: var(--vurgu); color: var(--vurgu-yazi); }
body[data-tarz="2"] .serit a.aktif { background: transparent; color: var(--yazi); box-shadow: inset 0 -3px 0 var(--vurgu); border-radius: 0; }

/* ---------- menü ---------- */
main { padding-bottom: 120px; }
.kat { padding-top: 22px; scroll-margin-top: 70px; }
.kat-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kat-bas h2 { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
body[data-tarz="3"] .kat-bas h2 { font-size: clamp(28px, 8vw, 40px); text-transform: uppercase; letter-spacing: -.01em; }
body[data-tarz="3"] .kat-bas h2 .ic { width: 30px; height: 30px; stroke-width: 2.2; }
body[data-tarz="2"] .kat-bas h2 { font-size: 18px; text-transform: uppercase; letter-spacing: .06em; color: var(--ikincil); }
.kat-not { font-size: 13px; color: var(--ikincil); font-weight: 600; white-space: nowrap; }
.urunler { display: grid; gap: 12px; }
body[data-tarz="2"] .urunler { gap: 0; }
@media (min-width: 640px) { body[data-tarz="1"] .urunler, body[data-tarz="3"] .urunler { grid-template-columns: 1fr 1fr; } }
.urun { position: relative; display: grid; grid-template-columns: 1fr 96px; gap: 12px; align-items: start; padding: 14px; border-radius: var(--r); background: var(--yuzey); border: 0; text-align: left; width: 100%; color: inherit; box-shadow: var(--golge); }
body[data-tarz="1"] .urun { animation: gir .45s var(--e) both; }
body[data-tarz="2"] .urun { background: transparent; border-bottom: 1px solid var(--cizgi); border-radius: 0; padding: 16px 0; grid-template-columns: 1fr 72px; }
body[data-tarz="3"] .urun { background: var(--zemin); border: 2.5px solid var(--yazi); }
@keyframes gir { from { opacity: 0; transform: translateY(10px); } }
.urun h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
body[data-tarz="3"] .urun h3 { font-size: 18px; font-weight: 800; }
.urun p { font-size: 14px; color: var(--ikincil); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fiyat { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
body[data-tarz="3"] .fiyat { display: inline-block; background: var(--vurgu); color: var(--vurgu-yazi); padding: 2px 8px; }
.gorsel { width: 96px; height: 96px; border-radius: calc(var(--r) - 6px); background: var(--yuzey2); display: grid; place-items: center; overflow: hidden; color: var(--ikincil); }
body[data-tarz="2"] .gorsel { width: 72px; height: 72px; }
body[data-tarz="3"] .gorsel { background: var(--vurgu); color: var(--vurgu-yazi); }
body[data-tarz="1"] .gorsel { background: color-mix(in srgb, var(--vurgu) 16%, var(--zemin)); color: var(--yazi); }
.gorsel img { width: 100%; height: 100%; object-fit: cover; }
.gorsel .ic { width: 40px; height: 40px; stroke-width: 1.4; }
.ekle { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--vurgu); color: var(--vurgu-yazi); display: grid; place-items: center; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); }
body[data-tarz="2"] .ekle { right: 0; bottom: 12px; width: 34px; height: 34px; }
.etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.et { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--yuzey2); color: var(--yazi); display: inline-flex; align-items: center; gap: 4px; }
.et .ic { width: 13px; height: 13px; }
.urun.tukendi, .urun.saatdisi { opacity: .55; }
.rozet { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--yazi); color: var(--zemin); margin-bottom: 6px; }
.bos { padding: 40px 0; text-align: center; color: var(--ikincil); }

/* ---------- sepet çubuğu, masa düğmeleri ---------- */
.alt-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.alt-cubuk > * { pointer-events: auto; }
.sepet-btn { max-width: var(--max); margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 10px 18px; border-radius: calc(var(--r) + 4px); border: 0; background: var(--yazi); color: var(--zemin); font-weight: 800; font-size: 16px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); }
.sepet-btn .say { background: var(--vurgu); color: var(--vurgu-yazi); border-radius: 99px; min-width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0 8px; margin-right: 10px; }
.masa-btns { max-width: var(--max); margin: 0 auto 8px; display: flex; gap: 8px; justify-content: flex-end; }
.masa-btns .btn { min-height: 44px; box-shadow: var(--golge); background: var(--zemin); color: var(--yazi); border: 1.5px solid var(--cizgi); }

/* ---------- alt sayfa (dialog) ---------- */
dialog#sheet { padding: 0; border: 0; width: 100%; max-width: 560px; max-height: 92vh; margin: auto auto 0; border-radius: 22px 22px 0 0; background: var(--zemin); color: var(--yazi); overflow: auto; overscroll-behavior: contain; }
@media (min-width: 720px) { dialog#sheet { margin: auto; border-radius: 22px; } }
dialog#sheet[open] { animation: yukari .28s var(--e); }
dialog::backdrop { background: rgba(10,10,12,.55); }
@keyframes yukari { from { transform: translateY(40px); opacity: .4; } }
.sh-bas { position: sticky; top: 0; z-index: 2; background: var(--zemin); display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--cizgi); }
.sh-bas h2 { font-size: 20px; }
.sh-ic { padding: 14px 16px 18px; }
.sh-alt { position: sticky; bottom: 0; background: var(--zemin); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi); }
.grup { margin: 16px 0; }
.grup h3 { font-size: 15px; display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.grup h3 small { font-weight: 600; color: var(--ikincil); font-size: 12.5px; }
.secim { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 1.5px solid var(--cizgi); border-radius: var(--r-s); margin-bottom: 8px; cursor: pointer; }
.secim:has(input:checked) { border-color: var(--yazi); background: var(--yuzey); }
.secim input { width: 22px; height: 22px; accent-color: var(--yazi); flex: none; margin: 0; }
.secim span { flex: 1; } .secim b { font-variant-numeric: tabular-nums; }
.adet { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--cizgi); border-radius: 99px; padding: 3px; }
.adet button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--yuzey); display: grid; place-items: center; }
.adet output { min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.alan { display: grid; gap: 6px; margin: 12px 0; }
.alan label, .alan .lbl { font-weight: 700; font-size: 14px; }
.alan input, .alan select, .alan textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-s); border: 1.5px solid var(--cizgi); background: var(--yuzey); }
.alan textarea { min-height: 80px; resize: vertical; }
.alan .ipucu { font-size: 13px; color: var(--ikincil); }
.alan input[aria-invalid="true"], .alan select[aria-invalid="true"], .alan textarea[aria-invalid="true"] { border-color: #C93A2B; }
.hata-m { color: #B3261E; font-weight: 700; font-size: 14px; }
body[data-renk="B"] .hata-m { color: #FF9B91; }
body[data-renk="C"] .hata-m { color: inherit; text-decoration: underline; }
.onay { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 14px; }
.onay input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--yazi); flex: none; }
.sat { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-variant-numeric: tabular-nums; }
.sat.toplam { font-weight: 800; font-size: 18px; border-top: 1px solid var(--cizgi); margin-top: 6px; padding-top: 10px; }
.kalem { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.kalem small { color: var(--ikincil); display: block; }
.uyari { padding: 10px 12px; border-radius: var(--r-s); background: color-mix(in srgb, #E8A100 18%, var(--zemin)); font-size: 14px; font-weight: 600; margin: 8px 0; }
.seg { display: grid; grid-auto-flow: column; gap: 6px; }
.seg label { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px; border-radius: var(--r-s); border: 1.5px solid var(--cizgi); font-weight: 700; cursor: pointer; text-align: center; font-size: 14px; }
.seg label:has(input:checked) { border-color: var(--yazi); background: var(--yazi); color: var(--zemin); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--yazi); outline-offset: 2px; }

/* ---------- takip ---------- */
.takip { padding-top: 24px; padding-bottom: 60px; }
.takip h1 { font-size: 28px; font-weight: 800; }
.adimlar { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 0; }
.adimlar li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; min-height: 52px; position: relative; color: var(--ikincil); }
.adimlar li::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: -16px; width: 2px; background: var(--cizgi); }
.adimlar li:last-child::before { display: none; }
.adimlar .yuvarlak { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--cizgi); display: grid; place-items: center; background: var(--zemin); position: relative; z-index: 1; }
.adimlar li.oldu { color: var(--yazi); } .adimlar li.oldu .yuvarlak { background: var(--yazi); color: var(--zemin); border-color: var(--yazi); }
.adimlar li.simdi { color: var(--yazi); font-weight: 800; } .adimlar li.simdi .yuvarlak { border-color: var(--vurgu); background: var(--vurgu); color: var(--vurgu-yazi); animation: nabiz 1.6s infinite; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--vurgu) 20%, transparent); } }
.kutu { background: var(--yuzey); border-radius: var(--r); padding: 16px; margin: 14px 0; }

/* ---------- sadakat kartı ---------- */
.skart { border-radius: 22px; padding: 22px; background: var(--vurgu); color: var(--vurgu-yazi); box-shadow: 0 24px 60px -24px rgba(0,0,0,.5); margin: 18px 0; }
.skart .kod { font-size: 40px; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.damgalar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 6px; }
.damga { aspect-ratio: 1; border-radius: 50%; border: 2px dashed currentColor; display: grid; place-items: center; opacity: .6; }
.damga.dolu { opacity: 1; border-style: solid; background: var(--vurgu-yazi); color: var(--vurgu); }
.bar { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--vurgu-yazi) 25%, transparent); overflow: hidden; margin: 12px 0 6px; }
.bar i { display: block; height: 100%; background: var(--vurgu-yazi); }

/* ---------- yasal ---------- */
.yasal { padding-top: 24px; padding-bottom: 60px; max-width: 680px; }
.yasal h1 { font-size: 26px; margin-bottom: 10px; } .yasal h2 { font-size: 18px; margin: 18px 0 6px; }
.taslak-not { padding: 10px 12px; border-radius: 10px; background: #FFF3D1; color: #4A3700; font-weight: 600; font-size: 14px; margin: 10px 0; }

/* ---------- tablet / kiosk ---------- */
body.kiosk { --max: 1180px; user-select: none; -webkit-user-select: none; }
body.kiosk .urunler { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
body.kiosk .urun { grid-template-columns: 1fr; min-height: 200px; }
body.kiosk .gorsel { width: 100%; height: 120px; order: -1; }
body.kiosk .urun h3 { font-size: 19px; }
body.kiosk .btn, body.kiosk .cip, body.kiosk .serit a { min-height: 56px; font-size: 17px; }
.kiosk-ust { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; }
.kiosk-bos { position: fixed; inset: 0; z-index: 300; background: var(--zemin); display: grid; place-items: center; text-align: center; padding: 24px; }
.kiosk-bos h1 { font-size: clamp(36px, 7vw, 72px); font-weight: 800; letter-spacing: -.03em; }
.altbilgi { padding-top: 30px; padding-bottom: 140px; color: var(--ikincil); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.altbilgi a { color: var(--ikincil); }

/* ================= v1.1 — gösteri kalitesi: kapak, illüstrasyon, akıcı sepet, masa PIN'i, düzeltme penceresi, karanlık mod ================= */
.kapak-alan { position: relative; height: clamp(170px, 34vw, 260px); overflow: clip; background: radial-gradient(120% 120% at 75% 15%, color-mix(in srgb, var(--vurgu) 30%, var(--zemin)), color-mix(in srgb, var(--vurgu) 55%, var(--zemin)) 70%); }
body[data-tarz="2"] .kapak-alan { background: linear-gradient(180deg, color-mix(in srgb, var(--vurgu) 14%, var(--zemin)), color-mix(in srgb, var(--vurgu) 26%, var(--zemin))); height: clamp(140px, 26vw, 200px); }
body[data-tarz="3"] .kapak-alan { background: var(--vurgu); }
.kapak-alan::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, var(--zemin)); pointer-events: none; }
.kapak { position: absolute; inset: 0; max-width: 760px; margin: 0 auto; }
.kapak-isik { position: absolute; inset: 0; background: radial-gradient(60% 50% at 30% 10%, rgba(255,255,255,.45), transparent 70%), repeating-linear-gradient(100deg, rgba(0,0,0,.03) 0 2px, transparent 2px 9px); }
.kapak-y { position: absolute; transform: rotate(var(--r)); filter: drop-shadow(0 14px 14px rgba(0,0,0,.25)); }
.kapak-y .yemek { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) { .kapak-y { animation: suzul 7s ease-in-out infinite alternate; } .kapak-y.k1 { animation-delay: -2s; } .kapak-y.k2 { animation-delay: -4s; } @keyframes suzul { to { transform: rotate(var(--r)) translateY(-6px); } } }
.kapak-ust { position: relative; z-index: 2; display: flex; gap: 8px; align-items: center; padding-top: 12px; }
.bos-yer { flex: 1; }
.cam { min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--yazi) 14%, transparent); background: color-mix(in srgb, var(--zemin) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--yazi); }
.cam.kucuk { min-height: 40px; }
.kapak-alan + .ust { margin-top: -54px; position: relative; z-index: 3; padding-top: 0; }
.kapak-alan + .ust .marka { text-shadow: 0 1px 0 color-mix(in srgb, var(--zemin) 60%, transparent); }
body.kiosk .kapak-alan { height: 150px; }
.gorsel .yemek { width: 88%; height: 88%; transition: transform .35s var(--e); }
.urun:hover .gorsel .yemek, .urun:focus-visible .gorsel .yemek { transform: scale(1.08) rotate(-3deg); }
body[data-tarz="2"] .gorsel .yemek { width: 92%; height: 92%; }
body.kiosk .gorsel { height: 150px; } body.kiosk .gorsel .yemek { width: auto; height: 100%; }
.sh-gorsel { border-radius: calc(var(--r) - 2px); background: color-mix(in srgb, var(--vurgu) 18%, var(--zemin)); display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 12px; overflow: hidden; }
.sh-gorsel .yemek { width: 62%; height: auto; }
.sh-gorsel img { width: 100%; height: 100%; object-fit: cover; }
dialog#sheet[open] .sh-gorsel .yemek { animation: sg-gir .5s var(--e) both; }
@keyframes sg-gir { from { transform: scale(.8) rotate(-8deg); opacity: 0; } }
.sh-adim { list-style: none; margin: 0; padding: 10px 16px 0; display: flex; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ikincil); }
.sh-adim li { flex: 1; display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 3px solid var(--cizgi); }
.sh-adim li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--yuzey2); }
.sh-adim li.oldu, .sh-adim li.simdi { color: var(--yazi); border-color: var(--vurgu); }
.sh-adim li.simdi i, .sh-adim li.oldu i { background: var(--vurgu); color: var(--vurgu-yazi); }
.kalem-ad { display: flex; gap: 10px; align-items: center; }
.kalem-g { width: 48px; height: 48px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--vurgu) 16%, var(--zemin)); display: grid; place-items: center; overflow: hidden; }
.kalem-g .yemek, .kalem-g img { width: 92%; height: 92%; object-fit: cover; }
.bos-durum { text-align: center; padding: 20px 0; color: var(--ikincil); } .bos-durum .yemek { width: 120px; opacity: .8; }
.sepet-btn.zipla { animation: zipla .55s var(--e); }
@keyframes zipla { 30% { transform: translateY(-6px) scale(1.02); } 60% { transform: translateY(1px); } }
.sepet-btn { transition: transform .2s var(--e); }
.masa-bant { flex-wrap: wrap; }
.pin-cip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--vurgu-yazi) 16%, transparent); font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.uyari-bant { background: color-mix(in srgb, #E8A100 20%, var(--zemin)); font-weight: 600; }
.pin-alan input { font-size: 26px; letter-spacing: .5em; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.pin-k { margin: 14px 0; padding: 16px; border-radius: var(--r); background: var(--yazi); color: var(--zemin); display: grid; gap: 2px; text-align: center; }
.pin-k span { display: inline-flex; gap: 6px; justify-content: center; align-items: center; font-weight: 700; font-size: 14px; }
.pin-k b { font-size: 44px; letter-spacing: .3em; font-variant-numeric: tabular-nums; line-height: 1.1; padding-left: .3em; }
.pin-k small { opacity: .8; }
.pin-k.yeni { animation: pin-gir .8s var(--e) both; }
@keyframes pin-gir { from { transform: scale(.9); opacity: 0; } }
.duzelt-k { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; margin: 14px 0; padding: 14px; border-radius: var(--r); background: color-mix(in srgb, var(--vurgu) 14%, var(--zemin)); border: 1.5px solid color-mix(in srgb, var(--vurgu) 50%, var(--zemin)); }
.duzelt-k p { margin: 2px 0 8px; font-size: 14px; color: var(--ikincil); }
.dz-sure { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: conic-gradient(var(--vurgu) calc(var(--p) * 360deg), var(--yuzey2) 0); position: relative; }
.dz-sure::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--zemin); }
.dz-sure b, .dz-sure small { position: relative; line-height: 1; } .dz-sure b { font-size: 24px; font-variant-numeric: tabular-nums; } .dz-sure small { font-size: 11px; color: var(--ikincil); }
.satir-b { display: flex; gap: 8px; flex-wrap: wrap; }
.ipucu-y { color: var(--ikincil); font-size: 14px; margin: 6px 0 0; }
#masaHesapK .sat { font-size: 14px; }
/* tarz 1'de kartlara derinlik, dokunuşta tepki */
body[data-tarz="1"] .urun { transition: transform .2s var(--e), box-shadow .2s; }
body[data-tarz="1"] .urun:active { transform: scale(.985); }
/* karanlık mod: gölgeler ve yüzeyler koyuda da okunur */
body.koyu-mod { --golge: 0 1px 0 rgba(255,255,255,.04), 0 10px 26px -16px rgba(0,0,0,.8); color-scheme: dark; }
body.koyu-mod .uyari { background: color-mix(in srgb, #E8A100 22%, var(--zemin)); }
body.koyu-mod .taslak-not { background: #3A3016; color: #FFE8A3; }
.kapak-alan .kapak { left: 30%; right: -8%; }
@media (min-width: 640px) { .kapak-alan .kapak { left: 38%; right: 0; } }
.kapak-alan .kapak-y.k0 { top: 26% !important; }
.kapak-y.foto img, .kapak .foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; box-shadow: 0 0 0 4px color-mix(in srgb, var(--zemin) 80%, transparent); }
.gorsel img, .kalem-g img { border-radius: inherit; }