/* KENDİN YAP — ortak tasarım v3 (28 Ekim 2026, Bayoğlu Dijital). app.css'ten SONRA yüklenir, sekiz ürün aynı dosyayı kullanır;
   her ürünün renk kimliği (--zemin, --vurgu, başlık yazı tipi) kendi index.html'inden gelir.
   Referans: Brainy (carte.brainy.ink/atre/build/pizza) — sade üst çubuk, büyük başlık + vurgulu kelime, hap biçimli seçim, yuvarlak malzeme
   düğmeleri (seçilince vurgu halkası + tik), tek geniş "Sipariş ver · tutar" düğmesi, hazırlıkta ilerleme çubuğu. Parlak kart / şablon süsü yok. */
:root{--yazi:#f7f2ec;--yazi2:rgba(247,242,236,.6);--yazi3:rgba(247,242,236,.4);--cizgi:rgba(255,255,255,.075);--yuzey:rgba(255,255,255,.045);--yuzey2:rgba(255,255,255,.08);--egri:cubic-bezier(.2,.9,.25,1)}
body{font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased}
.uyg{background:radial-gradient(110% 60% at 50% 34%, color-mix(in srgb,var(--zemin2) 92%,var(--vurgu)) 0%, var(--zemin) 68%)}

/* üst çubuk: geri · marka · ses/sıfırla; altında büyük başlık */
.ust{display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:40px auto;align-items:center;column-gap:8px;row-gap:2px;padding:8px 12px 0;min-height:0}
.ust .marka{display:contents}
.ust #geri{grid-column:1;grid-row:1}
.ust .ust-btn{grid-column:3;grid-row:1;gap:2px}
.marka b{grid-column:2;grid-row:1;text-align:center;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yazi2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marka span{grid-column:1/-1;grid-row:2;margin:4px 4px 0;font-family:var(--font-baslik);font-weight:700;font-size:29px;line-height:1.05;letter-spacing:-.02em;color:var(--yazi);white-space:normal}
.marka span em{font-style:normal;color:var(--vurgu)}
.ikon-btn{width:40px;height:40px;border-radius:50%;background:transparent;border:0;color:var(--yazi2);transition:background .2s,color .2s,transform .15s,opacity .2s}
.ikon-btn:hover{background:var(--yuzey);color:var(--yazi)}
.ikon-btn:active{transform:scale(.9);background:var(--yuzey2)}
.ikon-btn svg{width:22px;height:22px}

/* seçim (boy, kap, tat, içecek): hap biçimli bölmeli düğme, seçili açık renk */
.secim{padding:10px 16px 0;gap:8px}
.secim-grup{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:999px;padding:3px;gap:2px}
.secim-grup button{height:32px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--yazi2);display:flex;align-items:center;gap:5px}
.secim-grup button[aria-pressed=true]{background:var(--yazi);color:var(--zemin);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.secim-grup small{display:inline;font-size:11px;font-weight:600;opacity:.7}

/* sahne ipucu */
.ipucu{top:auto;bottom:1%;font-size:12.5px;font-weight:500;color:var(--yazi2);background:rgba(0,0,0,.28);border:1px solid var(--cizgi);padding:6px 14px}

/* malzeme ızgarası */
.ray-baslik{padding:4px 18px 2px;font-size:12px;letter-spacing:.02em}
.ray-baslik span:first-child{color:var(--yazi);font-weight:700;font-size:13px}
.ray-baslik span:last-child{color:var(--yazi3)}
.izgara{gap:10px 4px;padding:8px 12px 8px}
.malz{gap:5px}
.malz .yuvarlak{width:62px;height:62px;background:var(--yuzey);border:0;box-shadow:inset 0 0 0 1px var(--cizgi);transition:transform .2s var(--egri),box-shadow .25s,background .25s}
.malz .yuvarlak img{width:48px;height:48px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));transition:transform .25s var(--egri)}
.malz:hover .yuvarlak{background:var(--yuzey2)}
.malz:active .yuvarlak{transform:scale(.9)}
.malz.secili .yuvarlak{background:color-mix(in srgb,var(--vurgu) 12%,transparent);box-shadow:inset 0 0 0 2px var(--vurgu),0 6px 22px -8px color-mix(in srgb,var(--vurgu) 70%,transparent)}
.malz.secili .yuvarlak img{transform:scale(1.06)}
.malz .ad{font-size:11.5px;font-weight:500;color:var(--yazi2);transition:color .2s}
.malz.secili .ad{color:var(--yazi);font-weight:700}
.malz .fiyat{font-size:10.5px;color:var(--yazi3);font-variant-numeric:tabular-nums}
.malz.secili .fiyat{color:var(--vurgu)}
.malz .rozet{top:-3px;right:-3px;min-width:21px;height:21px;border-radius:11px;font-size:11.5px;box-shadow:0 0 0 2.5px var(--zemin)}
.malz .eksi{top:-3px;left:-3px;width:22px;height:22px;background:var(--zemin2);border:1px solid var(--cizgi);color:var(--yazi);box-shadow:0 0 0 2.5px var(--zemin)}
.malz .eksi svg{width:12px;height:12px}

/* alt çubuk: tek geniş düğme — solda "Sipariş ver", sağda tutar. Boşken sönük, dolunca vurgu rengi; hazırlıkta ilerleme çubuğu */
.cubuk{padding:8px 14px calc(14px + var(--alt))}
.siparis{position:relative;overflow:hidden;flex:1;height:58px;border-radius:999px;padding:0 22px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--yuzey2);color:var(--yazi);box-shadow:inset 0 0 0 1px var(--cizgi);font-size:16px;font-weight:700;letter-spacing:-.005em;transition:background .35s,color .35s,box-shadow .35s,transform .15s}
.cubuk.dolu .siparis,.siparis.hazirlaniyor{background:var(--vurgu);color:var(--vurgu-yazi);box-shadow:0 12px 30px -10px color-mix(in srgb,var(--vurgu) 75%,transparent)}
.siparis .s-metin{position:relative;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.siparis .toplam{position:relative;z-index:1;display:block;min-width:0;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
.siparis .s-dolgu{position:absolute;inset:0;background:rgba(255,255,255,.26);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.siparis.bitti .s-metin::before{content:'✓ ';}
.siparis[disabled]{opacity:1}
.siparis:active{transform:scale(.98)}

/* ödeme ekranı (alttan açılan sayfa) */
.perde{background:rgba(0,0,0,.62);backdrop-filter:none}   /* v4: bulanıklık kaldırıldı (yavaş telefonda ödeme açılırken uzun kare) */
.ozet{left:0;right:0;margin:0 auto;transform:translateY(105%);transition:none;border-radius:28px 28px 0 0;padding:10px 18px calc(16px + var(--alt));background:var(--zemin2);box-shadow:0 -24px 70px rgba(0,0,0,.55),inset 0 1px 0 var(--cizgi);max-height:92vh}
.ozet.acik{transform:translateY(0)}
.ozet .tutamac{width:38px;height:4px;background:rgba(255,255,255,.16);margin:0 auto 12px}
.ozet .oz-bas{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex:none;margin-bottom:6px}
.ozet h2{margin:0;font-size:26px;letter-spacing:-.02em}
.ozet .oz-marka{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--yazi3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ozet .oz-liste{border-top:0;max-height:none;overflow:visible;margin:0;padding:2px 0}
.ozet .oz-liste li{padding:7px 0;border-bottom:0;font-size:14px;color:var(--yazi2)}
.ozet .oz-liste li:first-child{color:var(--yazi);font-weight:700;font-size:15px;padding-top:4px}
.ozet .oz-liste li span:last-child{color:var(--yazi3)}
.ozet .oz-liste li:first-child span:last-child{color:var(--yazi2)}
.ozet .satir-toplam{border-top:1px dashed rgba(255,255,255,.14);margin-top:4px;padding:12px 0 6px;font-size:14px;color:var(--yazi2)}
.ozet .satir-toplam b{font-size:26px;color:var(--yazi);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.oz-etiket{flex:none;margin:14px 2px 8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--yazi3)}
.ozet .teslim{margin:0 0 8px;padding:3px;border-radius:999px;background:var(--yuzey);border:1px solid var(--cizgi)}
.ozet .teslim button{height:40px;border-radius:999px;font-size:14px;font-weight:600}
.ozet .teslim button[aria-pressed=true]{background:var(--yazi);color:var(--zemin)}
.ozet .alan{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 0;padding:0 4px 0 6px}
.ozet .alan label{font-size:13.5px;color:var(--yazi2);padding:0}
.ozet .alan input{height:42px;width:150px;flex:none;border-radius:12px;background:var(--yuzey);border:1px solid var(--cizgi);font-size:16px;text-align:center}
.ozet #alan-ad input{width:190px;text-align:left}
.odeme-yol{flex:none;display:flex;flex-direction:column;gap:8px}
.odeme-yol button{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;border-radius:18px;background:var(--yuzey);box-shadow:inset 0 0 0 1px var(--cizgi);text-align:left;transition:box-shadow .2s,background .2s}
.odeme-yol button>svg{width:26px;height:26px;flex:none;color:var(--yazi2);transition:color .2s}
.odeme-yol .oy-metin{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.odeme-yol .oy-metin b{font-size:15px;font-weight:700}
.odeme-yol .oy-metin small{font-size:12.5px;color:var(--yazi2)}
.odeme-yol .radyo{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);transition:box-shadow .2s}
.odeme-yol button[aria-pressed=true]{background:color-mix(in srgb,var(--vurgu) 10%,transparent);box-shadow:inset 0 0 0 2px var(--vurgu)}
.odeme-yol button[aria-pressed=true]>svg{color:var(--vurgu)}
.odeme-yol button[aria-pressed=true] .radyo{box-shadow:inset 0 0 0 7px var(--vurgu)}
.odeme-demo{flex:none;display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:12px 14px;border-radius:14px;background:var(--yuzey);border:1px solid var(--cizgi);font-size:13px;line-height:1.4;color:var(--yazi2)}
.odeme-demo svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--vurgu)}
.odeme-demo b{color:var(--yazi)}
.not-ac{flex:none;align-self:flex-start;margin:12px 2px 0;height:32px;font-size:13.5px;font-weight:600;color:var(--yazi2)}
.ozet .not{margin:10px 0 0}
.ozet .gonder{flex:none;margin-top:14px;height:58px;border-radius:999px;padding:0 20px 0 24px;justify-content:flex-start;gap:10px;font-size:16px;box-shadow:0 14px 34px -12px color-mix(in srgb,var(--vurgu) 80%,transparent)}
.ozet .gonder .g-metin{flex:1;text-align:left}
.ozet .gonder b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.ozet .kapat{margin-top:6px;height:42px}

/* takip */
.takip-kart{border-radius:28px;background:var(--zemin2);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 1px var(--cizgi)}
.takip h2{letter-spacing:-.02em}
.takip-yeni{border-radius:999px;background:var(--yuzey2);border:0}
.adim i{position:relative}   /* tik işareti dairenin içinde dursun (eskiden satırın soluna kayıyordu) */
.adim.oldu i::after{left:7px;top:3px}

/* v4 (28 Ekim akşam): eski siyah zeminli buhar videosu hiç gösterilmez; yerine sahnenin içinde saydam buhar (ürün alanıyla sınırlı) */
.buhar{display:none!important}
.buhar-a{position:absolute;pointer-events:none;z-index:6000;opacity:0;object-fit:contain}
.sahne-kap{overflow:hidden}
/* hazırlık sonrası: pişmiş ürün + içecek */
.icecek-servis{position:absolute;z-index:60;pointer-events:none;will-change:transform}
.icecek-servis .ic-bardak,.icecek-servis .ic-sivi{position:absolute;inset:0;width:100%;height:100%}
.icecek-servis .ic-bardak{object-fit:contain}
.icecek-servis .ic-sivi img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:transform}
.icecek-servis .ic-golge{position:absolute;left:4%;top:9%;width:100%;height:100%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0) 85%);transform-origin:50% 50%}
.siparis.odemeye .s-metin::before{content:none}
.siparis.odemeye .s-metin::after{content:' →'}
/* içecek düğmesi (seçim satırında) + alttan açılan içecek sayfası */
.secim-grup.ic-gizli{display:none!important}
.icecek-btn{flex:none;display:flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 8px;border-radius:999px;background:var(--yuzey);border:1px solid var(--cizgi);color:var(--yazi);font-size:13px;font-weight:700;white-space:nowrap}
.icecek-btn .ic-ikon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--vurgu) 18%,transparent);color:var(--vurgu)}
.icecek-btn .ic-ikon svg{width:15px;height:15px}
.icecek-btn img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.icecek-btn small{font-size:11px;font-weight:600;color:var(--vurgu)}
.icecek-btn.secili{box-shadow:inset 0 0 0 2px var(--vurgu);background:color-mix(in srgb,var(--vurgu) 10%,transparent)}
.ic-perde{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s}
.ic-perde.acik{opacity:1;pointer-events:auto}
.ic-sayfa{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;z-index:81;display:none;flex-direction:column;padding:10px 18px calc(16px + var(--alt,0px));border-radius:28px 28px 0 0;background:var(--zemin2);box-shadow:0 -24px 70px rgba(0,0,0,.55),inset 0 1px 0 var(--cizgi)}
.ic-sayfa.acik{display:flex}
.ic-sayfa .tutamac{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.16);margin:0 auto 12px}
.ic-sayfa h2{margin:0;font-family:var(--font-baslik);font-size:24px;letter-spacing:-.02em;color:var(--yazi)}
.ic-sayfa .ic-alt{margin:4px 0 14px;font-size:13.5px;color:var(--yazi2)}
.ic-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:10px}
.ic-kart{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 10px;border-radius:18px;background:var(--yuzey);box-shadow:inset 0 0 0 1px var(--cizgi);color:var(--yazi)}
.ic-kart img{width:64px;height:64px;object-fit:contain;margin-bottom:4px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.ic-kart b{font-size:13.5px;font-weight:700}
.ic-kart small{font-size:12px;font-weight:600;color:var(--vurgu)}
.ic-kart[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--vurgu);background:color-mix(in srgb,var(--vurgu) 10%,transparent)}
.ic-kart:active{transform:scale(.96)}
.ic-yok{margin-top:12px;height:46px;border-radius:999px;background:transparent;border:1px solid var(--cizgi);color:var(--yazi2);font-size:14px;font-weight:600}

/* kısa ekranlar */
@media (max-height:760px){.marka span{font-size:24px}.izgara{max-height:150px}}
@media (max-height:700px){.marka span{font-size:21px}.siparis{height:52px}}
/* v4 performans: parça kabı tek katman (gizleme yalnız opaklıkla), ödeme sayfasının gölgesi hafif (yavaş telefonda açılırken uzun kare olmasın) */
.parcalar{will-change:opacity;z-index:6}   /* will-change katman bağlamı kurar: tabanın (z 5) üstünde kalsın */
.ozet{box-shadow:0 -10px 30px rgba(0,0,0,.5),inset 0 1px 0 var(--cizgi);will-change:transform}

/* 2 Kasım 2026 (H2/H7/H9 kök çözüm): sahne HER ekranda KARE. Eskiden "aspect-ratio + max-height:100%" kısa ekranlarda (telefon tarayıcı
   çubukları, masaüstü pencere) sahneyi yatay dikdörtgen yapıyordu: taban görseli daire kalırken parçaların yeri yüksekliğe, boyu genişliğe göre
   hesaplandığı için malzemeler pizzanın/lavaşın DIŞINA taşıyordu. Sahne artık kabın hem enine hem boyuna sığan kare (burger v8'deki çözüm). */
.sahne-kap{container-type:size}
.sahne{width:min(100cqw - 12px,100cqh,430px);max-height:none;isolation:isolate}   /* isolation: sahnedeki katların z-index'i içeceğin önüne geçmesin */
/* H6: üstteki seçim satırı (boy + içecek) 390 px'te taşmasın; sığmazsa parmakla düzgün kaysın */
.secim{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-padding:0 16px}
@media (max-width:420px){.secim{gap:6px;padding-left:12px;padding-right:12px}.secim-grup button{padding:0 10px}.icecek-btn{padding:0 11px 0 6px;gap:5px}}
/* H1 (2 Kasım): hiçbir yazı eğik (italik) olmaz */
em,i,cite,address{font-style:normal}

/* ===== 2 Kasım 2026 b ===== */
/* Dokunma hedefleri en az 44 px: üst ikonlar 44, içecek düğmesi 44, seçim düğmeleri 40 görünür + 44 dokunma alanı, malzeme "eksi" rozeti 44 dokunma alanı */
html[data-ky] body .uyg .ust{grid-template-columns:44px 1fr auto;grid-template-rows:44px auto}
html[data-ky] body .uyg .ikon-btn{width:44px;height:44px}
html[data-ky] body .uyg .icecek-btn{height:44px}
html[data-ky] body .uyg .secim-grup{padding:2px}
html[data-ky] body .uyg .secim-grup button{position:relative;height:40px}
html[data-ky] body .uyg .secim-grup button::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
html[data-ky] body .uyg .malz .eksi::after{content:"";position:absolute;inset:-11px;border-radius:50%}
/* hazır tarifler: tek sıra, yatay kayan hap düğmeler (küçük gerçek fotoğraf + ad) */
.tarifler{display:flex;flex:none;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px 14px 2px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding:0 14px}
.tarifler::-webkit-scrollbar{display:none}
.tarifler button{flex:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 15px 0 6px;border-radius:999px;border:0;background:var(--yuzey2);box-shadow:inset 0 0 0 1px var(--cizgi);color:var(--yazi);font-family:var(--font);font-size:13.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.tarifler button img{width:32px;height:32px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.tarifler button[aria-pressed=true]{background:color-mix(in srgb,var(--vurgu) 18%,transparent);box-shadow:inset 0 0 0 2px var(--vurgu)}
.tarifler button:active{transform:scale(.95)}
/* KISA EKRAN (≤760 px yükseklik): ürün sahnesi büyür. Başlık sıkışır, "Üstüne ekle" başlığı gizlenir, malzemeler TEK SIRA yatay kayar
   (sağ kenar yumuşak solar: kaydığı belli olur), alt çubuk incelir. Sahne kare kalır (100cqw/100cqh kuralı). */
@media (max-height:760px){
  html[data-ky] body .uyg .ust{padding-top:2px;row-gap:0}
  html[data-ky] body .uyg .marka span{font-size:23px;margin-top:0;line-height:1.04}
  html[data-ky] body .uyg .secim{padding-top:4px}
  html[data-ky] body .uyg .ray-baslik:not(:has(.secim,.icecek-btn)){display:none}
  html[data-ky] body .uyg .izgara{display:flex;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;overflow-y:hidden;max-height:none;gap:6px;padding:10px 12px 4px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  html[data-ky] body .uyg .izgara::-webkit-scrollbar{display:none}
  html[data-ky] body .uyg .izgara .malz{flex:0 0 70px;min-width:0;scroll-snap-align:start}
  html[data-ky] body .uyg .izgara .malz .yuvarlak{width:56px;height:56px}
  html[data-ky] body .uyg .izgara .malz .yuvarlak img{width:44px;height:44px}
  html[data-ky] body .uyg .tarifler{padding-top:4px}
  html[data-ky] body .uyg .cubuk{padding-top:6px;padding-bottom:calc(10px + var(--alt))}
  html[data-ky] body .uyg .siparis{height:52px}
}
@media (max-height:700px){html[data-ky] body .uyg .marka span{font-size:22px}}