/* Geliyoo: restoranın online sipariş sayfası (müşteri tarafı).
   QR menü v3 ile aynı iskelet (Inter, 560-640 px sütun, alttan açılan
   pencereler), renk Geliyoo logosunun mavisi. Ürün satırı Wolt / Uber Eats
   düzeninde: yazı solda, fotoğraf sağda, üstünde ekle düğmesi. */
:root {
  --brand: #1641ff; --brand-press: #0f33d6; --brand-tint: #edf1ff; --brand-ink: #0b2bb8;
  --ink: #0f1424; --ink-2: #4f5668; --ink-3: #8b91a1;
  --surface: #fff; --ground: #f3f4f7; --line: #e6e8ee; --line-2: #f0f1f5;
  --good: #16794a; --good-tint: #e8f5ee; --warn: #a35a06; --warn-tint: #fdf4e6; --bad: #b42318; --bad-tint: #fdeceb;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 12px; --r-lg: 16px;
  --sh-bar: 0 10px 30px -10px rgba(15, 20, 36, .35);
  --sh-sheet: 0 -16px 48px -16px rgba(15, 20, 36, .35);
  --in: cubic-bezier(.2, 0, 0, 1); --out: cubic-bezier(.3, 0, .8, .15);
  --gut: 16px;
}
@media (min-width: 420px) { :root { --gut: 20px; } }
* { box-sizing: border-box; }
/* Uygulama gibi davranış: çift dokunuşla büyütme yok (touch-action), sayfa
   uçlarda esnemiyor, düğmeye basılı tutunca metin seçimi ya da görsel menüsü
   açılmıyor. İki parmakla yakınlaştırma açık kalıyor (erişilebilirlik). */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; overscroll-behavior-y: none; }
html, body { margin: 0; padding: 0; }
body { background: var(--ground); color: var(--ink); font: 400 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button, a, label { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
/* iPhone Safari 16 pikselden küçük yazı kutusuna dokunulunca sayfayı
   büyütüyor; bütün yazı kutuları en az 16 piksel. */
input, textarea, select { font: inherit; color: inherit; font-size: 16px; }
button, .urun, .teslim-cip, .sepet-cubuk, .kat-serit, .adim, .sekme { -webkit-user-select: none; user-select: none; }
img { -webkit-touch-callout: none; -webkit-user-drag: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.ik { width: 20px; height: 20px; flex: none; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* overflow-x: clip: bir öğe taşsa bile sayfa enine genişlemez (genişleyen
   sayfayı iPhone küçülterek sığdırıyor). clip, hidden'ın aksine kaydırma
   kabı oluşturmuyor; yapışkan başlık ve sekmeler çalışmaya devam ediyor. */
.g { max-width: 640px; margin: 0 auto; min-height: 100dvh; background: var(--surface); position: relative; overflow-x: clip; }
@media (min-width: 680px) { .g { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.g-gorunum { min-height: 100dvh; padding-bottom: 120px; }
/* backwards: animasyon bitince transform kalmıyor. 'both' bitişte kimlik dönüşümünü
   tutuyor ve kapsayıcı, içindeki fixed öğeleri sayfayla birlikte kaydırıyordu. */
.g-gorunum.ileri { animation: gIleri .24s var(--in) backwards; }
.g-gorunum.geri { animation: gGeri .24s var(--in) backwards; }
@keyframes gIleri { from { opacity: 0; transform: translateX(20px); } }
@keyframes gGeri { from { opacity: 0; transform: translateX(-20px); } }

/* Görsel: yüklenince yumuşakça belirir */
.g-img { background: var(--brand-tint); position: relative; overflow: hidden; }
.g-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease-out; }
.g-img img.ok { opacity: 1; }

/* İskelet */
.isk { display: block; border-radius: 8px; background: linear-gradient(90deg, #eef0f4 25%, #f6f7f9 45%, #eef0f4 65%); background-size: 220% 100%; animation: iskP 1.3s ease-in-out infinite; }
@keyframes iskP { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: var(--r); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  transition: background-color .15s ease-out, transform .12s ease-out, opacity .15s ease-out, box-shadow .15s ease-out;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ana { background: var(--brand); color: #fff; }
.btn-ana:hover:not(:disabled) { background: var(--brand-press); }
.btn-ikinci { background: var(--brand-tint); color: var(--brand-ink); }
.btn-ikinci:hover:not(:disabled) { background: #e1e7ff; }
.btn-cizgi { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn-cizgi:hover:not(:disabled) { border-color: #cfd3dc; }
.btn-tam { width: 100%; }
.btn-ana.yukleniyor { pointer-events: none; }
.btn-ana.yukleniyor > span { opacity: .55; }
.btn-ana.yukleniyor::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: don .7s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.ikon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; transition: background-color .15s ease-out, transform .12s ease-out; }
.ikon-btn:active { transform: scale(.92); }
.ikon-btn.yuzen { background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(15,20,36,.16); color: var(--ink); }
.ikon-btn.duz:hover { background: var(--ground); }

/* ---------- Üst çubuk ---------- */
.g-ust {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0; background: rgba(255,255,255,.96); border-bottom: 1px solid transparent;
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.g-ust.golgeli { border-bottom-color: var(--line); }
.g-ust h1, .g-ust h2 { margin: 0; flex: 1; min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ust .ust-ad { opacity: 0; transform: translateY(4px); transition: opacity .2s ease-out, transform .2s ease-out; }
.g-ust.golgeli .ust-ad { opacity: 1; transform: none; }
/* Kapak üstünde saydam, kaydırınca beyaz. Sticky: fixed, animasyonlu kapsayıcı
   içinde sayfayla kayıyordu (iPhone'da sekme şeridinin üstü boş kalıyordu). */
.g-ust-mag { margin-bottom: calc(-56px - env(safe-area-inset-top, 0px)); background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 12px; padding-right: 12px; transition: background-color .2s ease-out, border-color .2s ease-out; }
.g-ust-mag.golgeli { background: rgba(255,255,255,.96); border-bottom-color: var(--line); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }

/* ---------- Mağaza başı ---------- */
/* 2:1: paneldeki kapak kırpma çerçevesiyle aynı oran, kırpılan alan olduğu gibi görünür. */
.mag-kapak { aspect-ratio: 2 / 1; width: 100%; }
.mag-kapak.bos { aspect-ratio: auto; height: 96px; background: linear-gradient(135deg, var(--brand) 0%, #3d63ff 100%); }
.mag-bas { position: relative; padding: 0 var(--gut) 16px; }
.mag-logo { width: 72px; height: 72px; margin-top: -36px; border-radius: 18px; border: 3px solid #fff; background: #fff; box-shadow: 0 4px 16px rgba(15,20,36,.14); display: grid; place-items: center; overflow: hidden; font-size: 26px; font-weight: 600; color: var(--brand); }
.mag-logo img { width: 100%; height: 100%; object-fit: cover; }
.mag-bas h1 { margin: 12px 0 0; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.mag-mutfak { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.mag-aciklama { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.mag-bilgi { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.mag-bilgi li { display: inline-flex; align-items: center; gap: 6px; }
.mag-bilgi b { color: var(--ink); font-weight: 600; }
.mag-bilgi .ik { width: 16px; height: 16px; color: var(--ink-3); }
.durum { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.durum.acik { background: var(--good-tint); color: var(--good); }
.durum.kapali { background: var(--bad-tint); color: var(--bad); }
.durum.bekle { background: var(--warn-tint); color: var(--warn); }
.mag-durum-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--ink-2); }

.teslim-cip {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--gut)); margin: 4px var(--gut) 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: left;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.teslim-cip:hover { border-color: #cfd3dc; }
.teslim-cip.eksik { border-color: var(--brand); background: var(--brand-tint); }
.teslim-cip .cip-ik { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.teslim-cip.eksik .cip-ik { background: #fff; }
.teslim-cip span { display: grid; gap: 1px; min-width: 0; flex: 1; }
.teslim-cip small { font-size: 12px; color: var(--ink-3); }
.teslim-cip b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teslim-cip .ok-ik { color: var(--ink-3); }

.bant { display: flex; gap: 10px; margin: 12px var(--gut) 0; padding: 12px 14px; border-radius: var(--r); font-size: 14px; line-height: 1.45; }
.bant.uyari { background: var(--warn-tint); color: #6b3a03; }
.bant.hata { background: var(--bad-tint); color: #7a1610; }
.bant.bilgi { background: var(--brand-tint); color: var(--brand-ink); }
.bant .ik { width: 18px; height: 18px; margin-top: 1px; }
.bant a { font-weight: 600; }
.aktif-siparis { display: flex; align-items: center; gap: 12px; margin: 12px var(--gut) 0; padding: 12px 14px; border-radius: var(--r); background: var(--ink); color: #fff; text-decoration: none; animation: yuksel .3s var(--in) both; }
.aktif-siparis span { flex: 1; display: grid; gap: 1px; }
.aktif-siparis small { font-size: 12px; opacity: .7; }
.aktif-siparis b { font-size: 14px; font-weight: 600; }
.nabiz { width: 10px; height: 10px; border-radius: 50%; background: #5cf09c; box-shadow: 0 0 0 0 rgba(92,240,156,.6); animation: nabiz 1.6s ease-out infinite; flex: none; }
@keyframes nabiz { to { box-shadow: 0 0 0 10px rgba(92,240,156,0); } }

/* ---------- Kategori sekmeleri ---------- */
.kat-serit { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 15; margin-top: 16px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Çizgi bu kaydırma alanına göre konumlanıyor (position: relative). Eskiden
   şeride göre konumlanıyordu; sondaki kategoride ekranın sağına taşıp sayfayı
   enine genişletiyor, iPhone da sayfayı küçültüyordu. */
/* overscroll: şeridin ucunda kaydırma sayfaya geçmesin, iPhone'da "geri git"
   hareketi ya da sayfanın yana esnemesi tetiklenmesin. Yumuşak kaydırma CSS'te
   değil: elle sürüklerken her konum değişikliği de animasyonlu olup titriyordu;
   kod gerektiğinde scrollTo ile kendisi veriyor.
   touch-action: pan-x: şeritte başlayan dokunuş yalnız yana kaydırır. Hafif
   çapraz sürüklemede sayfa da aşağı yukarı kayıyor, şerit sayfayla birlikte
   oynuyor gibi görünüyordu (uygulamalardaki sekme şeridi davranışı). */
.kat-serit-ic { position: relative; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--gut); }
.kat-serit-ic::-webkit-scrollbar { display: none; }
.kat-serit button { position: relative; flex: none; height: 48px; padding: 0 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color .15s ease-out; }
.kat-serit button[aria-current="true"] { color: var(--ink); font-weight: 600; }
.kat-cizgi { position: absolute; bottom: -1px; left: 0; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--in), width .25s var(--in); }
.ara-kutu { display: flex; align-items: center; gap: 10px; margin: 16px var(--gut) 0; padding: 0 14px; height: 46px; border-radius: var(--r); background: var(--ground); color: var(--ink-3); }
.ara-kutu input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.ara-kutu:focus-within { box-shadow: 0 0 0 2px var(--brand); }

/* ---------- Ürün listesi ---------- */
.kat { padding: 8px 0 0; scroll-margin-top: calc(108px + env(safe-area-inset-top, 0px)); }
.kat h2 { margin: 18px var(--gut) 4px; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.urun {
  position: relative; display: flex; gap: 14px; width: 100%; padding: 14px var(--gut); text-align: left;
  border-bottom: 1px solid var(--line-2); transition: background-color .15s ease-out;
}
.urun:hover { background: #fafbfc; }
.urun:active { background: var(--ground); }
.urun-yazi { flex: 1; min-width: 0; display: grid; align-content: start; gap: 4px; }
.urun-yazi b { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.urun-yazi p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.urun-fiyat { margin-top: 4px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.urun-gorsel { position: relative; flex: none; width: 104px; height: 104px; }
.urun-gorsel .g-img { width: 100%; height: 100%; border-radius: var(--r); }
.urun-ekle {
  position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(15,20,36,.2);
  font-size: 15px; font-weight: 600; transition: transform .15s var(--in), background-color .15s ease-out;
}
.urun-gorsel.gorselsiz { width: 40px; height: auto; align-self: center; }
.urun-gorsel.gorselsiz .urun-ekle { position: static; background: var(--brand-tint); box-shadow: none; }
.urun.sepette .urun-ekle { background: var(--brand); color: #fff; min-width: 34px; width: auto; padding: 0 10px; border-radius: 999px; }
.urun.zipla .urun-ekle { animation: zipla .35s var(--in); }
@keyframes zipla { 40% { transform: scale(1.22); } }
.urun.kapali { opacity: .55; }
.bos-sonuc { padding: 48px var(--gut); text-align: center; color: var(--ink-2); }

/* ---------- Sepet çubuğu ---------- */
.sepet-cubuk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-width: 640px; margin: 0 auto;
  padding: 10px var(--gut) max(12px, env(safe-area-inset-bottom)); pointer-events: none;
}
.sepet-cubuk button {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px 0 10px;
  border-radius: var(--r-lg); background: var(--brand); color: #fff; box-shadow: var(--sh-bar);
  transition: transform .15s ease-out, background-color .15s ease-out;
  animation: yuksel .28s var(--in) both;
}
.sepet-cubuk button:hover { background: var(--brand-press); }
.sepet-cubuk button:active { transform: scale(.985); }
.sepet-cubuk .adet { min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-weight: 600; font-variant-numeric: tabular-nums; }
.sepet-cubuk .adet.zipla { animation: zipla .35s var(--in); }
.sepet-cubuk .yazi { flex: 1; text-align: left; font-weight: 600; }
.sepet-cubuk .tutar { font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes yuksel { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Alttan açılan pencere ---------- */
.perde { position: fixed; inset: 0; z-index: 50; background: rgba(15,20,36,.45); opacity: 0; transition: opacity .22s ease-out; }
.perde.on { opacity: 1; }
.pencere {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-width: 640px; margin: 0 auto; max-height: 92dvh;
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: var(--sh-sheet);
  transform: translateY(100%); transition: transform .28s var(--in);
}
.pencere.on { transform: none; }
.pencere.kapaniyor { transition: transform .2s var(--out); }
.pencere-tut { flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #d9dce3; }
.pencere-bas { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px var(--gut); }
.pencere-bas h2 { margin: 0; flex: 1; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.pencere-govde { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gut) 16px; }
.pencere-alt { flex: none; padding: 12px var(--gut) max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
@media (min-width: 680px) {
  .pencere { bottom: auto; top: 50%; left: 50%; right: auto; width: min(560px, calc(100vw - 48px)); max-height: 86vh; border-radius: 20px; transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform .24s var(--in), opacity .2s ease-out; }
  .pencere.on { transform: translate(-50%, -50%); opacity: 1; }
  .pencere-tut { display: none; }
}

/* Ürün penceresi */
.u-gorsel { margin: 0 calc(-1 * var(--gut)); aspect-ratio: 16 / 10; }
.urun-pencere .pencere-tut { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; background: rgba(255,255,255,.8); }
.u-kapat { position: absolute; top: 14px; right: 14px; z-index: 2; }
.urun-pencere .pencere-govde { padding-top: 0; }
.urun-pencere:not(:has(.u-gorsel)) .u-aciklama { margin-top: 0; }
.u-ad { margin: 16px 0 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.u-aciklama { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.u-fiyat { margin: 10px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.alan { display: grid; gap: 6px; margin-top: 18px; }
.alan > span, .alan-ad { font-size: 13px; font-weight: 600; color: var(--ink); }
.alan small { font-size: 12px; color: var(--ink-3); }
.girdi {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  font-size: 16px; outline: 0; transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
textarea.girdi { resize: vertical; min-height: 84px; line-height: 1.45; }
.girdi:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,65,255,.14); }
.girdi[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(180,35,24,.1); }
select.girdi { appearance: none; padding-right: 40px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b91a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.hata-yazi { font-size: 13px; color: var(--bad); animation: hataGir .18s ease-out; }
@keyframes hataGir { from { opacity: 0; transform: translateY(-2px); } }
.not-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.not-cipler button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); transition: border-color .15s ease-out, background-color .15s ease-out; }
.not-cipler button:hover { border-color: #cfd3dc; }
.not-cipler button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); }

.adim { display: inline-flex; align-items: center; height: 48px; border-radius: var(--r); background: var(--ground); }
.adim button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r); color: var(--ink); transition: background-color .15s ease-out, transform .12s ease-out; }
.adim button:active:not(:disabled) { transform: scale(.9); }
.adim button:disabled { color: var(--ink-3); cursor: not-allowed; }
.adim output { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.adim.kucuk { height: 36px; border-radius: 10px; }
.adim.kucuk button { width: 36px; height: 36px; border-radius: 10px; }
.u-alt { display: flex; gap: 10px; }
.u-alt .btn-ana { flex: 1; justify-content: space-between; }

/* Sepet */
.s-satir { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.s-satir:last-child { border-bottom: 0; }
.s-satir-yazi { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left; }
.s-satir-yazi b { font-size: 15px; font-weight: 600; }
.s-satir-yazi .not { font-size: 13px; color: var(--warn); }
.s-satir-yazi .duzenle { justify-self: start; font-size: 13px; color: var(--brand); font-weight: 500; }
.s-satir-sag { display: grid; justify-items: end; gap: 8px; }
.s-satir-sag b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ilerleme { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r); background: var(--ground); font-size: 13px; color: var(--ink-2); }
.ilerleme b { color: var(--ink); }
.ilerleme-cubuk { height: 6px; margin-top: 8px; border-radius: 3px; background: #e2e5ec; overflow: hidden; }
.ilerleme-cubuk i { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width .35s var(--in); }
.ilerleme.tamam .ilerleme-cubuk i { background: var(--good); }
.dokum { display: grid; gap: 6px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.dokum div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); }
.dokum dt, .dokum dd { margin: 0; }
.dokum .top { margin-top: 4px; font-size: 17px; font-weight: 600; color: var(--ink); }
.dokum .kdv { font-size: 12px; color: var(--ink-3); }
.dokum .ucretsiz { color: var(--good); font-weight: 600; }
.dokum.yukleniyor { opacity: .5; transition: opacity .15s ease-out; }

/* Adres penceresi */
.secim-liste { display: grid; gap: 2px; margin-top: 12px; }
.secim-liste button {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: var(--r); text-align: left; font-size: 15px;
  transition: background-color .15s ease-out;
}
.secim-liste button:hover { background: var(--ground); }
.secim-liste button[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.secim-liste button span { flex: 1; min-width: 0; }
.secim-liste button small { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.sekme { display: flex; padding: 4px; border-radius: var(--r); background: var(--ground); }
.sekme button { flex: 1; min-height: 42px; border-radius: 9px; font-weight: 500; color: var(--ink-2); transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; }
.sekme button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(15,20,36,.12); }

/* ---------- Ödeme ---------- */
.kart { margin: 12px var(--gut) 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.kart h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.kart h2 .sira { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 12px; }
.kart > p { margin: 0; font-size: 13px; color: var(--ink-2); }
.kart .alan:first-of-type { margin-top: 14px; }
.adres-ozet { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--ground); }
.adres-ozet .cip-ik { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--brand); }
.adres-ozet span:not(.cip-ik) { flex: 1; display: grid; gap: 1px; min-width: 0; }
.adres-ozet small { font-size: 12px; color: var(--ink-3); }
.adres-ozet b { font-size: 14px; font-weight: 600; }
.adres-ozet button { color: var(--brand); font-weight: 600; font-size: 14px; min-height: 44px; padding: 0 4px; }
.odeme-sec { display: grid; gap: 8px; margin-top: 14px; }
.odeme-sec label {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.odeme-sec label:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.odeme-sec input { width: 20px; height: 20px; accent-color: var(--brand); }
.odeme-sec span { flex: 1; display: grid; gap: 1px; }
.odeme-sec b { font-size: 15px; font-weight: 600; }
.odeme-sec small { font-size: 12px; color: var(--ink-2); }
.onay { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.onay input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--brand); }
.onay a, .on-bilgi summary { color: var(--brand); font-weight: 500; }
.on-bilgi { margin-top: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.on-bilgi summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
.on-bilgi dl { display: grid; gap: 6px; margin: 8px 0 0; padding: 12px; border-radius: var(--r); background: var(--ground); }
.on-bilgi dl div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.on-bilgi dt { color: var(--ink-3); }
.on-bilgi dd { margin: 0; color: var(--ink); }
.ode-alt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-width: 640px; margin: 0 auto; padding: 12px var(--gut) max(14px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.ode-alt .btn-ana { justify-content: space-between; }
.ode-alt small { display: block; margin-top: 8px; text-align: center; font-size: 12px; color: var(--ink-3); }
.guven { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px var(--gut) 0; font-size: 12px; color: var(--ink-3); }

/* ---------- Takip ---------- */
.takip-bas { padding: 20px var(--gut) 8px; text-align: center; }
.takip-ikon { width: 72px; height: 72px; margin: 4px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.takip-ikon .ik { width: 34px; height: 34px; }
.takip-ikon.iyi { background: var(--good-tint); color: var(--good); }
.takip-ikon.kotu { background: var(--bad-tint); color: var(--bad); }
.takip-ikon.canli { animation: takipNabiz 2s ease-out infinite; }
@keyframes takipNabiz { 0% { box-shadow: 0 0 0 0 rgba(22,65,255,.28); } 70%, 100% { box-shadow: 0 0 0 18px rgba(22,65,255,0); } }
.takip-bas h1 { margin: 16px 0 0; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.takip-bas p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.takip-bas .eta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 14px; border-radius: 999px; background: var(--ground); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Canlı kurye haritası: kurye yoldayken durum kutusunun altında */
.takip-harita-kart { margin: 12px var(--gut) 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.takip-harita { height: 240px; background: var(--ground); }
.takip-harita-alt { margin: 0; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--ink-2); border-top: 1px solid var(--line); }
.th-im { background: none; border: 0; }
.th-kurye { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; box-shadow: 0 2px 10px rgba(22,65,255,.35); border: 2px solid #fff; }
.th-kurye .ik { width: 22px; height: 22px; }
.th-ev { width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; background: var(--ink); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(15,20,36,.3); }
.th-ev .ik { width: 18px; height: 18px; transform: rotate(45deg); }
.adimlar { list-style: none; margin: 8px var(--gut) 0; padding: 4px 0; }
.adimlar li { position: relative; display: flex; gap: 14px; padding: 0 0 22px; }
.adimlar li:last-child { padding-bottom: 4px; }
.adimlar li::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.adimlar li:last-child::before { display: none; }
.adimlar li.bitti::before { background: var(--brand); }
.adim-nokta { position: relative; z-index: 1; width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: #fff; transition: background-color .3s ease-out, border-color .3s ease-out; }
.adimlar li.bitti .adim-nokta { background: var(--brand); border-color: var(--brand); }
.adimlar li.simdi .adim-nokta { border-color: var(--brand); }
.adimlar li.simdi .adim-nokta::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: nabizMavi 1.6s ease-out infinite; }
@keyframes nabizMavi { 0% { box-shadow: 0 0 0 0 rgba(22,65,255,.5); } 100% { box-shadow: 0 0 0 8px rgba(22,65,255,0); } }
.adim-nokta .ik { width: 14px; height: 14px; }
.adimlar li span { display: grid; gap: 1px; padding-top: 3px; }
.adimlar li b { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.adimlar li.bitti b, .adimlar li.simdi b { color: var(--ink); }
.adimlar li small { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.takip-alt { display: grid; gap: 10px; margin: 20px var(--gut) 0; }

.alt-imza { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 28px var(--gut) 8px; font-size: 12px; color: var(--ink-3); text-decoration: none; }
.alt-imza img { width: 20px; height: 20px; border-radius: 6px; }
.tost { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 60; transform: translate(-50%, -12px); max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--r); background: var(--ink); color: #fff; font-size: 14px; box-shadow: var(--sh-bar); opacity: 0; transition: opacity .2s ease-out, transform .2s var(--in); pointer-events: none; }
.tost.on { opacity: 1; transform: translate(-50%, 0); }
.tost.hata { background: var(--bad); }
.sayfa-bos { padding: 96px var(--gut) 40px; text-align: center; }
.sayfa-bos h1 { margin: 16px 0 0; font-size: 22px; font-weight: 600; }
.sayfa-bos p { margin: 8px auto 20px; max-width: 34ch; color: var(--ink-2); }

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

/* ========== Alt menü (Keşfet, Ara, Siparişlerim, Hesabım) ========== */
.g-gorunum.alt-menulu { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.alt-menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 640px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 4px max(6px, env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
}
.alt-menu a {
  display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 0 2px; border-radius: 12px;
  color: var(--ink-3); text-decoration: none; font-size: 11px; font-weight: 500; transition: color .15s ease-out, transform .12s ease-out;
}
.alt-menu a .ik { width: 24px; height: 24px; }
.alt-menu a:active { transform: scale(.94); }
.alt-menu a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.alt-menu a[aria-current="page"] .ik { stroke-width: 2.3; }

/* ========== Keşfet ========== */
.k-bas { display: flex; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top, 0px)) var(--gut) 4px; }
.k-bas img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.k-h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.k-adres { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 6px; text-align: left; min-height: 44px; }
.k-adres small { grid-column: 1; font-size: 12px; color: var(--ink-3); }
.k-adres b { grid-column: 1; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-adres .ik { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--ink-3); transform: rotate(90deg); }
a.ara-kutu { text-decoration: none; }
a.ara-kutu span { font-size: 15px; color: var(--ink-3); }
.k-cipler { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 14px var(--gut) 2px; }
.k-cipler::-webkit-scrollbar { display: none; }
.k-cipler button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.k-cipler button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.k-baslik { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 20px var(--gut) 10px; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.k-baslik small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.r-liste { display: grid; gap: 18px; padding: 0 var(--gut); }
@media (min-width: 560px) { .r-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.r-kart { display: grid; gap: 10px; color: inherit; text-decoration: none; transition: transform .15s ease-out; }
.r-kart:active { transform: scale(.985); }
.r-kapak { position: relative; aspect-ratio: 16 / 8; border-radius: 16px; overflow: hidden; background: var(--brand-tint); }
.r-kapak .g-img { position: absolute; inset: 0; }
.r-kapak-bos { position: absolute; inset: 0; background: linear-gradient(135deg, var(--brand) 0%, #3d63ff 100%); }
.r-logo { position: absolute; left: 12px; bottom: 12px; width: 48px; height: 48px; border-radius: 14px; border: 2px solid #fff; background: #fff; display: grid; place-items: center; overflow: hidden; font-weight: 600; font-size: 18px; color: var(--brand); box-shadow: 0 2px 10px rgba(15,20,36,.18); }
.r-logo img { width: 100%; height: 100%; object-fit: cover; }
.r-kapali { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,20,36,.5); color: #fff; font-weight: 600; font-size: 15px; }
.r-kart.kapali .r-yazi { opacity: .7; }
.r-yazi { display: grid; gap: 3px; }
.r-yazi b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.r-yazi small { font-size: 13px; color: var(--ink-2); }
.r-bilgi { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.r-bilgi i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; }
.r-bilgi .ik { width: 15px; height: 15px; color: var(--ink-3); }
.p-alt { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.p-bos { margin: 0; padding: 40px var(--gut); text-align: center; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.a-isk { display: grid; gap: 12px; padding: 16px var(--gut); }
a.urun { color: inherit; text-decoration: none; }

/* ========== Giriş ve kayıt ========== */
.giris-formu { display: grid; }
.giris-formu .sekme { margin-bottom: 4px; }
.sifre-kutu { position: relative; display: block; }
.sifre-kutu .girdi { padding-right: 52px; }
.sifre-kutu .ikon-btn { position: absolute; right: 2px; top: 2px; color: var(--ink-3); }
.metin-btn { justify-self: start; min-height: 44px; margin-top: 4px; color: var(--brand); font-weight: 600; font-size: 14px; }
.g-alt-baslik { margin: 4px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.hesap-satir { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r); background: var(--ground); }
.hesap-satir .ik { color: var(--ink-3); }
.hesap-satir span { display: grid; gap: 1px; min-width: 0; }
.hesap-satir small { font-size: 12px; color: var(--ink-3); }
.hesap-satir b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.btn-tehlike { background: var(--bad); color: #fff; }
.btn-tehlike:hover:not(:disabled) { background: #93190f; }

/* ========== Siparişlerim ========== */
.s-kart { margin: 12px var(--gut) 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); display: grid; gap: 10px; }
.s-kart-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: inherit; text-decoration: none; }
.s-kart-ust span:first-child { display: grid; gap: 2px; min-width: 0; }
.s-kart-ust b { font-size: 16px; font-weight: 600; }
.s-kart-ust small { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.s-kart-ust .durum { flex: none; }
.s-kart-urun { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-kart-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.s-kart-alt b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.s-kart-alt .btn { min-height: 40px; padding: 0 14px; font-size: 14px; text-decoration: none; }

/* ========== Hesabım ========== */
.profil { display: flex; align-items: center; gap: 14px; margin: 12px var(--gut) 0; padding: 16px; border-radius: var(--r-lg); background: var(--brand-tint); }
.profil-harf { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 20px; font-weight: 600; }
.profil span:last-child { display: grid; gap: 1px; min-width: 0; }
.profil b { font-size: 17px; font-weight: 600; }
.profil small { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.h-menu { display: grid; margin: 14px var(--gut) 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.h-menu > * { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 14px; text-align: left; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; border-top: 1px solid var(--line-2); transition: background-color .15s ease-out; }
.h-menu > *:first-child { border-top: 0; }
.h-menu > *:hover { background: #fafbfc; }
.h-menu > *:active { background: var(--ground); }
.h-menu .ik { color: var(--ink-3); }
.h-menu span { flex: 1; display: grid; gap: 1px; }
.h-menu small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.h-menu .tehlike { color: var(--bad); }
.h-menu .tehlike .ik { color: var(--bad); }
.ad-satir { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.ad-satir:last-child { border-bottom: 0; }
.ad-satir > span:first-child { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.ad-satir > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ad-satir b { font-size: 15px; font-weight: 600; }
.ad-satir small { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.ad-varsayilan { font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--good-tint); color: var(--good); font-size: 11px; font-weight: 600; }
.mag-geri, .g-ust-mag .ikon-btn { flex: none; }

/* Google ile giriş: düğmeyi Google çiziyor, kutu yalnız yer ve bekleme hali */
.g-google { display: flex; justify-content: center; min-height: 44px; margin-top: 16px; transition: opacity .15s ease-out; }
.g-google.bekliyor { opacity: .5; pointer-events: none; }
.g-google-isk { display: block; width: min(400px, 100%); height: 40px; border-radius: 999px; }
.ya-da { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; color: var(--ink-3); font-size: 13px; }
.ya-da::before, .ya-da::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Mahalle listesi açıkken adres penceresi sabit boyda: mahalle aranırken liste kısalsa da pencere
   zıplamıyor. Arama kutusu kaydırırken üstte kalıyor; arkasından geçen satırı
   beyaz bir halka örtüyor. */
.pencere.sabit-boy { height: 88dvh; }
@media (min-width: 680px) { .pencere.sabit-boy { height: min(640px, 86vh); } }
.mah-ara { position: sticky; top: 0; z-index: 1; margin: 16px 0 0; box-shadow: 0 0 0 8px var(--surface); }
.mah-ara:focus-within { box-shadow: 0 0 0 2px var(--brand), 0 0 0 8px var(--surface); }
.mah-bos { padding: 32px 8px; font-size: 14px; }