/* ==========================================================================
   opaket — vitrin stili  [OPK-005]
   --------------------------------------------------------------------------
   MOBİL ÖNCELİKLİ. Siparişlerin büyük çoğunluğu telefondan gelir; masaüstü
   düzeni buradan GENİŞLETİLİR, tersi değil.

   ⚠️ Bu dosya opaket'in İÇİNDEDİR. `../assets/` (panelin dash-v3'ü) ASLA
      kullanılmaz — opaket kendi alan adına taşınabilir olmalı.

   Tasarım, müşterinin alışık olduğu paket servis kalıbını izler: üstte arama,
   yatay kategori şeridi, kart listesi, altta sabit sepet çubuğu. Amaç yeni bir
   şey öğretmek değil, öğrenmeyi hiç gerektirmemek.
   ========================================================================== */

:root {
  --ana:        #E8552D;   /* opaket kırmızı-turuncu — iştah açan, dikkat çeken */
  --ana-koyu:   #C7401C;
  --ana-soft:   #FDEEE9;
  --yesil:      #1B8A4B;
  --yesil-soft: #E7F5ED;
  --sari:       #F5A623;
  --kirmizi:    #D93025;

  --metin:      #16181D;
  --metin-2:    #5A6270;
  --metin-3:    #8A929E;
  --cizgi:      #E8EAED;
  --zemin:      #FFFFFF;
  --zemin-2:    #F6F7F9;

  --r:    14px;
  --r-sm: 10px;
  --golge:    0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --golge-yr: 0 4px 16px rgba(0,0,0,.10);
  --ust:      56px;   /* sabit başlık yüksekliği */

  /* ======================================================================
     GÜVENLİ KENARLAR — YUVARLATILMIŞ EKRAN KÖŞELERİ  [OPK-020]
     ----------------------------------------------------------------------
     🔴 KURAL: EKRAN KENARINA DEĞEN HER ÖĞE BU DEĞERLERİ KULLANMAK ZORUNDA.
        Tasarımımız DİKDÖRTGEN, telefonlar DEĞİL. Yeni cihazlarda ekranın
        dört köşesi yuvarlatılmış, üstte çentik/ada, altta ana sayfa çubuğu
        var. `viewport-fit=cover` (bkz. opaketUst) içeriği kasten bu
        alanların ALTINA sokar — karşılığında insets'i BİZ uygulamak
        zorundayız. Uygulanmazsa: başlıktaki geri düğmesi çentiğin altında
        kalır, alt sekmelerin kenardakileri köşe kavisiyle kırpılır, yatayda
        metin ekran dışına taşar.
     ⚠️ `env()` masaüstünde ve eski cihazlarda 0 döner → hiçbir şey bozulmaz.
        Yedek değer (`, 0px`) ŞART: env desteklenmeyen tarayıcıda tüm
        `calc()` geçersiz olur ve kural komple düşer.
     ====================================================================== */
  --gk-ust: env(safe-area-inset-top,    0px);
  --gk-alt: env(safe-area-inset-bottom, 0px);
  --gk-sol: env(safe-area-inset-left,   0px);
  --gk-sag: env(safe-area-inset-right,  0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--metin);
  background: var(--zemin-2);
  /* iOS'ta alt sepet çubuğu ev göstergesinin altında kalmasın */
  padding-bottom: var(--gk-alt);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- başlık ------------------------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: 50;
  /* ⚠️ Yükseklik SABİT DEĞİL: çentik payı üstüne eklenir, yoksa geri
     düğmesi ve başlık durum çubuğunun altında kalır. */
  min-height: var(--ust); display: flex; align-items: center; gap: 12px;
  padding: var(--gk-ust) calc(14px + var(--gk-sag)) 0 calc(14px + var(--gk-sol));
  box-sizing: content-box;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}
.logo { font-weight: 800; font-size: 20px; letter-spacing: -.5px; color: var(--ana); }
.logo span { color: var(--metin); }
.ust-geri {
  width: 36px; height: 36px; margin-left: -6px; border: 0; background: transparent;
  border-radius: 50%; font-size: 20px; cursor: pointer; flex: 0 0 auto;
}
.ust-geri:active { background: var(--zemin-2); }
.ust-baslik { font-weight: 700; font-size: 16px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kap {
  max-width: 960px; margin: 0 auto;
  /* ⚠️ Yatay pay ŞART: yan kavisli/yatay moddaki telefonda sol-sağ inset
     30-40px'e çıkıyor ve düz 14px'te metin köşe kavisiyle kırpılıyor. */
  padding: 14px calc(14px + var(--gk-sag)) 14px calc(14px + var(--gk-sol));
}

/* --- arama / filtre ------------------------------------------------------ */
.arama { position: relative; margin-bottom: 12px; }
.arama input {
  width: 100%; height: 44px; padding: 0 14px 0 40px;
  border: 1px solid var(--cizgi); border-radius: var(--r);
  background: var(--zemin); outline: none;
}
.arama input:focus { border-color: var(--ana); }
/* ⚠️ Büyüteç `content:"🔎"` idi. Emoji her platformda başka çiziliyor ve
   `opacity` dışında biçimlendirilemiyor; artık markup'ta gerçek SVG var. */
.arama .arama-ikon {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%); color: var(--metin-3); pointer-events: none;
}

.serit {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 14px; scrollbar-width: none;
}
.serit::-webkit-scrollbar { display: none; }
.cip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: var(--zemin);
  font-size: 14px; font-weight: 600; color: var(--metin-2);
  cursor: pointer; white-space: nowrap;
}
.cip.aktif { background: var(--metin); border-color: var(--metin); color: #fff; }

/* --- restoran kartı ------------------------------------------------------ */
.liste { display: grid; gap: 12px; }
@media (min-width: 720px) { .liste { grid-template-columns: 1fr 1fr; } }

/* Restoran kartı — FOTOĞRAF ÖNCELİKLİ.  [OPK-025]
   Referans uygulamaların (Yemeksepeti, Trendyol Go) ana ekranında kartın
   belirleyici ögesi geniş kapak fotoğrafı; ad/puan/süre altında duruyor.
   Önceki hâlimiz 68px'lik logo + metin satırıydı ve vitrin tamamen emojiydi. */
.kart {
  display: block; background: var(--zemin);
  border-radius: var(--r); box-shadow: var(--golge); overflow: hidden;
  border: 1px solid transparent; transition: border-color .15s, transform .06s;
}
.kart:active { transform: scale(.995); }
.kart:hover { border-color: var(--cizgi); }

.kart-kapak {
  position: relative; width: 100%;
  /* ⚠️ Sabit yükseklik DEĞİL en-boy oranı: kartlar ızgarada aynı hizada durur
     ve fotoğraf inmeden önce de yer kaplar → liste zıplamaz (layout shift). */
  aspect-ratio: 16 / 9;
  background: var(--zemin-2) center/cover no-repeat;
  display: grid; place-items: center;
}
/* ⚠️ <img> kullanılıyor, background-image DEĞİL: arka plan görselleri tarayıcı
   tarafından tembel yüklenemez. object-fit görsel olarak aynı sonucu verir. */
.kart-kapak > .kapak-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.kart-kapak.bos { font-size: 40px; }
.kapak-ikon { opacity: .55; }
/* Kapalı restoran: fotoğrafın üstüne örtü. Rozet gövdede kalsaydı fotoğraf
   "açıkmış" izlenimi verirdi — kapalılık ilk bakışta okunmalı. */
.kapak-kapali {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(20,22,26,.55); color: #fff;
  font-size: 13px; font-weight: 700; text-align: center; padding: 0 12px;
}
/* Marka işareti fotoğrafın sol-alt köşesinde — kapak varken de görünür. */
.kapak-logo {
  position: absolute; left: 10px; bottom: -18px; width: 44px; height: 44px;
  border-radius: 12px; background: var(--zemin) center/cover no-repeat;
  box-shadow: 0 1px 6px rgba(0,0,0,.22); border: 2px solid var(--zemin);
}
.kart-kapak:has(.kapak-logo) + .kart-govde { padding-left: 62px; }

.kart-govde { min-width: 0; padding: 10px 12px 12px; }
.kart-ad { font-weight: 700; font-size: 16px; margin: 0 0 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kart-alt { color: var(--metin-2); font-size: 13px; display: flex;
  flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.puan { color: var(--yesil); font-weight: 700; }
.nokta { color: var(--metin-3); }

.rozet {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.rozet.acik   { background: var(--yesil-soft); color: var(--yesil); }
.rozet.kapali { background: #F1F2F4; color: var(--metin-3); }
.rozet.ind    { background: var(--ana-soft); color: var(--ana-koyu); }

/* --- restoran başlığı ---------------------------------------------------- */
/* Restoran sayfası kapağı — referans uygulamalarda tam genişlik fotoğraf. */
.rest-kapak {
  height: 190px; background: var(--zemin-2) center/cover no-repeat;
  /* ⚠️ Üst çentik alanı: kapak .ust'un ALTINDA olduğu için ayrıca güvenli alan
     eklenmez; eklenirse boşluk iki kez sayılır. */
}
.rest-ust { background: var(--zemin); padding: 16px 14px; border-bottom: 1px solid var(--cizgi); }
/* Kapak varsa sayfa başlığı fotoğrafın üstüne 14px biner — köşe yuvarlaklığı
   fotoğrafla başlığı ayırır, referans uygulamalardaki kart etkisi. */
.rest-ust.kapakli {
  position: relative; margin-top: -14px;
  border-radius: 16px 16px 0 0;
}
.rest-ad { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.rest-meta { color: var(--metin-2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* sekme: gel-al / paket */
.sekme { display: flex; gap: 6px; background: var(--zemin-2); padding: 4px;
  border-radius: var(--r); margin-top: 14px; }
.sekme button {
  flex: 1; height: 40px; border: 0; border-radius: var(--r-sm);
  background: transparent; font-weight: 700; color: var(--metin-2); cursor: pointer;
}
.sekme button.aktif { background: var(--zemin); color: var(--metin); box-shadow: var(--golge); }
.sekme button:disabled { opacity: .4; cursor: not-allowed; }

/* --- ürün ---------------------------------------------------------------- */
.kat-baslik { font-size: 18px; font-weight: 800; margin: 22px 0 10px; }
.urun {
  display: flex; gap: 12px; padding: 12px; background: var(--zemin);
  border-radius: var(--r); box-shadow: var(--golge); margin-bottom: 10px;
  width: 100%; text-align: left; border: 0; cursor: pointer;
}
.urun:disabled { opacity: .55; cursor: not-allowed; }
.urun-govde { flex: 1; min-width: 0; }
.urun-ad { font-weight: 700; margin: 0 0 4px; }
.urun-ack { color: var(--metin-2); font-size: 13px; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.urun-fiyat { font-weight: 800; }
.urun-gorsel {
  width: 88px; height: 88px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: var(--zemin-2) center/cover no-repeat;
  display: grid; place-items: center; font-size: 28px;
  overflow: hidden;   /* köşe yuvarlaklığı <img>'i de kırpsın */
}
.urun-gorsel > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- sepet çubuğu (mobilde sabit) ---------------------------------------- */
.sepet-cubuk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px calc(14px + var(--gk-sag)) calc(10px + var(--gk-alt)) calc(14px + var(--gk-sol));
  background: var(--zemin); border-top: 1px solid var(--cizgi);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.sepet-cubuk .btn { width: 100%; }
.sepet-bos { display: none; }

/* --- butonlar ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border: 0; border-radius: var(--r);
  background: var(--ana); color: #fff; font-weight: 700; font-size: 16px;
  cursor: pointer; transition: background .15s, transform .06s;
}
.btn:hover { background: var(--ana-koyu); }
.btn:active { transform: scale(.985); }
.btn:disabled { background: #C9CDD3; cursor: not-allowed; transform: none; }
.btn-ikincil { background: var(--zemin-2); color: var(--metin); }
.btn-ikincil:hover { background: var(--cizgi); }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: var(--r-sm); }

/* adet seçici */
.adet { display: inline-flex; align-items: center; gap: 4px;
  background: var(--zemin-2); border-radius: 999px; padding: 4px; }
.adet button {
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--zemin);
  font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: var(--golge);
}
.adet button:disabled { opacity: .4; cursor: not-allowed; }
.adet span { min-width: 26px; text-align: center; font-weight: 700; }

/* --- fiyat dökümü -------------------------------------------------------- */
.dokum { background: var(--zemin); border-radius: var(--r); padding: 14px;
  box-shadow: var(--golge); }
.dokum-satir { display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 15px; }
.dokum-satir.ind { color: var(--yesil); font-weight: 600; }
.dokum-satir.toplam {
  border-top: 1px solid var(--cizgi); margin-top: 6px; padding-top: 12px;
  font-size: 18px; font-weight: 800;
}
.dokum-satir .aciklama { display: block; font-size: 12px;
  color: var(--metin-3); font-weight: 400; }

/* --- uyarı / bilgi ------------------------------------------------------- */
.uyari {
  padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px;
  margin-bottom: 12px; border: 1px solid;
}
.uyari.bilgi { background: var(--ana-soft); border-color: #F6D5C9; color: #8A3316; }
.uyari.hata  { background: #FDECEA; border-color: #F5C3BE; color: #8B1F17; }
.uyari.iyi   { background: var(--yesil-soft); border-color: #BFE5CE; color: #10693A; }

.bos-durum { text-align: center; padding: 48px 20px; color: var(--metin-2); }
.bos-durum .ikon { font-size: 46px; margin-bottom: 10px; }

/* --- modal (ürün seçenekleri) -------------------------------------------- */
.modal-fon {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) { .modal-fon { align-items: center; } }
.modal {
  background: var(--zemin); width: 100%; max-width: 520px; max-height: 88vh;
  border-radius: var(--r) var(--r) 0 0; display: flex; flex-direction: column;
  box-shadow: var(--golge-yr);
}
@media (min-width: 640px) { .modal { border-radius: var(--r); } }
.modal-ust { padding: 16px; border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: 10px; }
.modal-ust h2 { margin: 0; font-size: 18px; flex: 1; }
.modal-kapat { width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--zemin-2); font-size: 18px; cursor: pointer; }
.modal-govde { padding: 16px; overflow-y: auto; flex: 1; }
.modal-alt { padding: 14px calc(16px + var(--gk-sag)) calc(14px + var(--gk-alt)) calc(16px + var(--gk-sol));
  border-top: 1px solid var(--cizgi); display: flex; gap: 12px; align-items: center; }

.grup { margin-bottom: 20px; }
.grup-ust { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.grup-ad { font-weight: 700; }
.grup-kural { font-size: 12px; color: var(--metin-3); }
.grup-kural.zorunlu { color: var(--ana); font-weight: 600; }
.secenek {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--zemin-2); cursor: pointer;
}
.secenek:last-child { border-bottom: 0; }
.secenek input { width: 20px; height: 20px; accent-color: var(--ana); flex: 0 0 auto; }
.secenek .ad { flex: 1; }
.secenek .fi { color: var(--metin-2); font-size: 14px; }
.secenek .fi.bedava { color: var(--yesil); font-weight: 600; }

.not-alani {
  width: 100%; min-height: 64px; padding: 10px; resize: vertical;
  border: 1px solid var(--cizgi); border-radius: var(--r-sm); outline: none;
}
.not-alani:focus { border-color: var(--ana); }

/* ==========================================================================
   VİTRİN  [OPK-009]
   --------------------------------------------------------------------------
   Ana sayfa bir LİSTE değil bir VİTRİNDİR. Verilen UX makalesinin bulgusu:
   karar yorgunluğunu azaltan yönlendirme (kampanya + kategori), sonsuz
   listeden çok daha iyi çalışıyor. Sıra bilinçli:
     kampanya (dikkat) → mutfak (niyet) → görünüm seçimi → restoran (karar)
   ========================================================================== */

/* --- kampanya şeridi ----------------------------------------------------- */
.kmp-serit {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 14px 12px;
  margin: 0 -14px; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.kmp-serit::-webkit-scrollbar { display: none; }
.kmp {
  flex: 0 0 auto; width: 280px; min-height: 108px; scroll-snap-align: start;
  border-radius: var(--r); padding: 14px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--ana); box-shadow: var(--golge);
  transition: transform .06s;
}
.kmp:active { transform: scale(.99); }
.kmp-rozet {
  align-self: flex-start; background: rgba(255,255,255,.22);
  padding: 3px 9px; border-radius: 999px; font-size: 11px;
  font-weight: 800; letter-spacing: .4px;
}
.kmp-baslik { font-weight: 800; font-size: 16px; margin: 8px 0 2px; line-height: 1.3; }
.kmp-ack { font-size: 13px; opacity: .92; }

/* --- mutfak kartları ----------------------------------------------------- */
.mutfak-serit {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 14px 10px;
  margin: 0 -14px; scrollbar-width: none;
}
.mutfak-serit::-webkit-scrollbar { display: none; }
.mutfak {
  flex: 0 0 auto; width: 72px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--metin-2);
}
.mutfak .yuvarlak {
  width: 60px; height: 60px; margin: 0 auto 6px; border-radius: 50%;
  background: var(--zemin); box-shadow: var(--golge);
  display: grid; place-items: center; font-size: 28px;
  border: 2px solid transparent; transition: border-color .15s, transform .06s;
}
/* Görselli mutfak kartı — görsel yoksa çizgi ikona düşer (.foto sınıfı yok).
   ⚠️ `object-fit: cover` DEĞİL `contain`: buradaki görseller saydam zeminli
   3D İKON, fotoğraf değil. `cover` ikonun kenarlarını kırpıyor ve nesne
   dairenin dışına taşıyordu. */
.mutfak .yuvarlak.foto { background: var(--zemin); overflow: hidden; padding: 7px; }
.mutfak .yuvarlak.foto > img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.mutfak:active .yuvarlak { transform: scale(.95); }
.mutfak.aktif .yuvarlak { border-color: var(--ana); }
.mutfak.aktif { color: var(--ana); }

/* --- bölüm başlığı + görünüm anahtarı ------------------------------------ */
.bolum-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 20px 0 10px;
}
.bolum-baslik { font-size: 18px; font-weight: 800; margin: 0; }
.gorunum {
  display: inline-flex; background: var(--zemin-2); border-radius: 999px;
  padding: 3px; gap: 2px; flex: 0 0 auto;
}
.gorunum a {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--metin-2); white-space: nowrap;
}
.gorunum a.aktif { background: var(--zemin); color: var(--metin); box-shadow: var(--golge); }

/* --- harita -------------------------------------------------------------- */
#harita {
  height: calc(100vh - var(--ust) - 150px);
  min-height: 340px; border-radius: var(--r);
  background: var(--zemin-2); overflow: hidden; z-index: 1;
}
.harita-yok {
  display: grid; place-items: center; height: 100%; text-align: center;
  padding: 24px; color: var(--metin-2);
}
/* Leaflet baloncuğunun içeriği — restoran kartının küçük hâli */
.pop-ad { font-weight: 800; font-size: 15px; margin: 0 0 3px; }
.pop-alt { color: var(--metin-2); font-size: 13px; margin: 0 0 8px; }
.pop-btn {
  display: block; text-align: center; background: var(--ana); color: #fff;
  padding: 8px 12px; border-radius: var(--r-sm); font-weight: 700; font-size: 14px;
}
.leaflet-popup-content { margin: 12px 14px; min-width: 180px; }
.leaflet-popup-content-wrapper { border-radius: var(--r); }
/* İşaretçi: açık = marka rengi, kapalı = gri (haritada bir bakışta ayrışsın) */
.pin {
  width: 34px; height: 34px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg); display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); border: 2px solid #fff;
  background: var(--ana);
}
.pin span { transform: rotate(45deg); font-size: 16px; line-height: 1; }
.pin.kapali { background: #9AA1AC; }

/* ==========================================================================
   UYGULAMA HİSSİ  [OPK-011]
   --------------------------------------------------------------------------
   ⚠️ alert() yerine toast, tam sayfa yenilenmesi yerine yerinde güncelleme.
   Tarayıcının kendi kutusu akışı kesiyor ve "web sayfası" hissi veriyor.
   ========================================================================== */

.toast-yuva {
  position: fixed; left: var(--gk-sol); right: var(--gk-sag); bottom: calc(84px + var(--gk-alt) + var(--alt-nav));
  z-index: 200; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 0 14px; pointer-events: none;
}
.toast {
  max-width: 460px; width: 100%; padding: 12px 16px; border-radius: var(--r);
  background: var(--metin); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: var(--golge-yr); pointer-events: auto;
  animation: toastGir .22s cubic-bezier(.2,.8,.3,1);
}
.toast.iyi  { background: var(--yesil); }
.toast.hata { background: var(--kirmizi); }
.toast.cikis { animation: toastCik .24s forwards; }
@keyframes toastGir { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes toastCik { to   { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Meşgul buton — çift gönderim korumasının görünen yüzü */
.yukleniyor-btn { position: relative; color: transparent !important; }
.yukleniyor-btn::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: donuyor .6s linear infinite;
}
.btn-ikincil.yukleniyor-btn::after { border-color: rgba(0,0,0,.2); border-top-color: var(--metin); }
@keyframes donuyor { to { transform: rotate(360deg); } }

/* Yerinde güncellenen bölge — değişim fark edilsin ama göz yormasın */
.tazelendi { animation: tazele .5s ease; }
@keyframes tazele { from { background: var(--ana-soft); } to { background: transparent; } }

/* Sayfa geçişlerinde küçük bir yumuşama (destekleyen tarayıcılarda) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* --- sepet satırı -------------------------------------------------------- */
.sp-satir {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--zemin-2);
}
.sp-satir:last-child { border-bottom: 0; }
.sp-govde { flex: 1; min-width: 0; }
.sp-ad { font-weight: 700; }
.sp-secim { font-size: 13px; color: var(--metin-2); }
.sp-not { font-size: 13px; color: var(--metin-3); margin-top: 3px; }
.sp-tutar { font-weight: 700; white-space: nowrap; }

/* --- test modu şeridi ---------------------------------------------------- */
/* ⚠️ Bilerek ÇİRKİN ve göz alıcı: sahte OTP'nin üretimde açık kalması en
   tehlikeli senaryo. Şerit fark edilmeden yayına çıkmamalı. */
.otp-uyari {
  background: repeating-linear-gradient(45deg, #B3261E, #B3261E 10px, #8C1D18 10px, #8C1D18 20px);
  color: #fff; font-size: 12.5px; font-weight: 700; text-align: center;
  /* ⚠️ Sayfanın EN ÜST öğesi bu → çentik payını BU alır. Aynı payı hem
     burada hem `.ust`'te vermek boşluğu ikiye katlardı; şerit varken
     `.ust` payı `body:has()` ile sıfırlanıyor (aşağıda). */
  padding: calc(7px + var(--gk-ust)) calc(12px + var(--gk-sag)) 7px calc(12px + var(--gk-sol));
  line-height: 1.4;
}
/* Şerit varsa çentik payı ONDA — başlık tekrar boşluk bırakmasın. */
body:has(> .otp-uyari) .ust { padding-top: 0; }
.otp-uyari strong { background: rgba(255,255,255,.2); padding: 1px 6px; border-radius: 4px; }

/* --- hesap / OTP --------------------------------------------------------- */
.hs-kap { max-width: 420px; margin: 0 auto; padding: 22px 14px 40px; }
.hs-baslik { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.hs-ack { color: var(--metin-2); margin: 0 0 22px; }
.hs-alan { margin-bottom: 16px; }
.hs-alan label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.hs-girdi {
  width: 100%; height: 52px; padding: 0 14px; font-size: 17px;
  border: 1px solid var(--cizgi); border-radius: var(--r);
  background: var(--zemin); outline: none;
}
.hs-girdi:focus { border-color: var(--ana); }
.hs-girdi.kod { text-align: center; letter-spacing: 10px; font-size: 26px; font-weight: 700; }
.hs-adim { display: none; }
.hs-adim.aktif { display: block; }
.hs-geri { background: none; border: 0; color: var(--metin-2); font-size: 14px;
  padding: 10px 0; cursor: pointer; text-decoration: underline; }
.hs-tekrar { text-align: center; margin-top: 14px; font-size: 14px; color: var(--metin-2); }
.hs-tekrar button { background: none; border: 0; color: var(--ana); font-weight: 700;
  cursor: pointer; font-size: 14px; }
.hs-tekrar button:disabled { color: var(--metin-3); cursor: default; }

/* --- yardımcılar --------------------------------------------------------- */
.gizli { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.merkez { text-align: center; }
.kucuk { font-size: 13px; color: var(--metin-2); }
.yukleniyor { text-align: center; padding: 30px; color: var(--metin-3); }

/* ==========================================================================
   ALT NAVİGASYON  [OPK-018]
   --------------------------------------------------------------------------
   Referans: Yemeksepeti / Trendyol Go alt barı — ikon üstte, etiket altta,
   aktif sekme marka renginde.
   🔴 BEŞ sekme — Trendyol Go ve Yemeksepeti'nin İKİSİ de tam beş kullanıyor.
      Hesabım üst sağda (.ust-hesap). Altıncı sekme eklemek 360px'de sekme
      başına 60px'e düşürüyordu ve iki referansın da yapmadığı şeydi.
   ========================================================================== */
:root { --alt-nav: 60px; }   /* güvenli alan HARİÇ yükseklik */

.alt-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
  /* ⚠️ Yatay pay: köşe kavisi en soldaki/sağdaki sekmeyi kırpar. */
  padding: 0 var(--gk-sag) var(--gk-alt) var(--gk-sol);
  box-shadow: 0 -2px 12px rgba(0,0,0,.05);
}
.an-oge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--alt-nav);
  color: var(--metin-3); text-decoration: none;
  /* ⚠️ min-width:0 ŞART — grid çocuğu varsayılan `auto` ile küçülmez ve
     uzun etiketler barı taşırır (kardeş projede UI-047d'de yaşandı). */
  min-width: 0; padding: 0 2px;
  -webkit-tap-highlight-color: transparent;
}
.an-oge:active { background: var(--zemin-2); }
.an-oge.aktif { color: var(--ana); }

.an-ikon { position: relative; width: 24px; height: 24px; display: block; }
.an-ikon svg { width: 24px; height: 24px; display: block; }

.an-etiket {
  font-size: 10px; font-weight: 600; line-height: 1;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-oge.aktif .an-etiket { font-weight: 700; }

/* Sepet rozeti — Yemeksepeti'ndeki gibi ikonun sağ üstünde. */
.an-rozet {
  position: absolute; top: -5px; left: 13px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--ana); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  border: 2px solid var(--zemin); box-sizing: content-box;
}

/* Çok dar ekran (320px): etiketler sığmazsa küçült, GİZLEME —
   ikonsuz/etiketsiz sekme ne olduğu anlaşılmaz olurdu. */
@media (max-width: 340px) {
  .an-etiket { font-size: 9px; }
  .an-ikon, .an-ikon svg { width: 22px; height: 22px; }
}

/* ⚠️ Sayfa gövdesi barın ARKASINDA kalmasın. Sayfaların kendi
   `padding-bottom` değerleri bunun ÜSTÜNE binebilir. */
body { padding-bottom: calc(var(--alt-nav) + var(--gk-alt)); }

/* ⚠️ Sepet çubuğu alt navigasyonun ÜSTÜNDE durur. İkisi de bottom:0 olsaydı
   üst üste biner ve "Siparişi onayla" butonu sekmelerle çakışırdı. */
.sepet-cubuk { bottom: calc(var(--alt-nav) + var(--gk-alt)); }

/* ==========================================================================
   ALT NAV SAYFALARI  [OPK-018]
   ⚠️ Yeni sınıf UYDURMADAN ÖNCE mevcutlara bak: kampanya kartı `.kmp`,
      rozetler `.rozet`, boş ekran `.bos-durum` zaten var ve YENİDEN KULLANILDI.
   ========================================================================== */
.sayfa-baslik { font-size: 22px; font-weight: 800; margin: 4px 0 12px; }

/* Kampanyalar sayfası: şerit değil ızgara — burası "tümü" ekranı. */
.kmp-izgara { display: grid; gap: 10px; }
.kmp.kmp-genis { width: auto; flex: initial; }
.kmp-restoran { font-size: 12px; opacity: .85; margin-top: 6px; font-weight: 600; }

/* --- favori kalbi -------------------------------------------------------- */
/* ⚠️ Kart `<a>`'sının İÇİNDE değil, sarmalayıcıda mutlak konumlu:
   iç içe tıklanabilir öğe geçersiz HTML ve tıklamayı bozar. */
.kart-sar { position: relative; }
.kart-kalp {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.92);
  color: var(--metin-3); cursor: pointer; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  -webkit-tap-highlight-color: transparent;
}
.kart-kalp svg { width: 21px; height: 21px; fill: none; }
.kart-kalp.dolu { color: var(--ana); }
.kart-kalp.dolu svg { fill: currentColor; }
.kart-kalp:active { transform: scale(.92); }
.kart-kalp[disabled] { opacity: .5; cursor: default; }

/* --- sipariş geçmişi kartı ----------------------------------------------- */
.sip-kart {
  display: block; background: var(--zemin); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 14px; text-decoration: none; color: inherit;
  box-shadow: var(--golge);
}
.sip-kart:active { transform: scale(.995); }
.sip-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sip-restoran { font-weight: 800; font-size: 16px; }
.sip-durum {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.sip-durum.bekle { background: #FFF4E0; color: #9A6400; }
.sip-durum.iyi   { background: var(--ana-soft); color: var(--ana-koyu); }
.sip-durum.tamam { background: var(--yesil-soft); color: var(--yesil); }
.sip-durum.iptal { background: #FCE9E7; color: var(--kirmizi); }
.sip-orta {
  color: var(--metin-2); font-size: 13px; margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
}
.sip-alt {
  margin-top: 10px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.sip-tutar { font-weight: 800; font-size: 17px; }
.rozet.bekle { background: #FFF4E0; color: #9A6400; }

/* Üst sağ "Hesabım" — Yemeksepeti favoriyi, Trendyol Go Asistan/Kuponlar'ı
   buraya koyuyor: ikincil ama her sayfadan erişilmesi gereken eylemlerin yeri. */
.ust-hesap {
  margin-left: auto; flex: 0 0 auto;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 999px; color: var(--metin); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ust-hesap svg { width: 23px; height: 23px; }
.ust-hesap:active { background: var(--zemin-2); }

/* ==========================================================================
   DOKUNMA DAVRANIŞI — "app gibi" hissettiren şey  [OPK-022]
   --------------------------------------------------------------------------
   Ediz: "tıklamalarda mavi seçim oluyor, app deneyimi etkileniyor."
   Tarayıcı varsayılanı web SAYFASI için doğru (metin seçilebilsin), ama biz
   bir uygulama gibi davranmak istiyoruz: butona basınca mavi kutu çıkmamalı,
   uzun basınca "kopyala/çevir" menüsü açılmamalı.
   ========================================================================== */

/* 1) Mavi dokunma parlaması — HER YERDE kapalı.
   ⚠️ Bunu kapatmak geri bildirimi de yok eder; yerine her dokunulabilir öğede
      `:active` durumu var (aşağıdaki kurallar + mevcut .btn/.kart-kalp). */
* { -webkit-tap-highlight-color: transparent; }

/* 2) Metin seçimi: ARAYÜZDE kapalı, İÇERİKTE açık.
   ⚠️ Toptan `body { user-select:none }` YAPILMAZ — müşteri adresini,
      sipariş kodunu ve restoran telefonunu KOPYALAYABİLMELİ. Kapatılan
      yalnız tıklanan/sürüklenen kabuk. */
.alt-nav, .ust, .sepet-cubuk,
button, .btn, .kart, .kmp, .an-oge, .mutfak-kart, .secenek, .adet {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;   /* uzun basınca iOS menüsü çıkmasın */
}

/* 3) İçerik AÇIKÇA seçilebilir kalır — yukarıdaki kural bir üst kaptan
   miras alırsa kopyalanamaz hâle gelirdi. */
.sp-not, .kart-alt .aciklama, .dokum-satir, .sip-orta, .sip-kart .sip-orta,
.hs-girdi, .not-alani, input, textarea, .adres-metin {
  -webkit-user-select: text; user-select: text;
}

/* 4) Çift dokunma yakınlaştırmasını kapat — buton iki kez basılınca sayfa
   zıplıyordu. `touch-action: manipulation` kaydırmayı BOZMAZ, yalnız
   çift-dokunma zoom gecikmesini kaldırır. */
a, button, .btn, .an-oge, .kart, .kart-kalp, .adet button, .secenek {
  touch-action: manipulation;
}


/* ==========================================================================
   İKONLAR  [OPK-027]
   ⚠️ EMOJİ KULLANILMAZ — bkz. parca.php `opaketIkonYolu()` başındaki not.
   ========================================================================== */

/* ⚠️ Satır içi SVG varsayılan olarak metnin TABAN çizgisine oturur ve harfleri
   birkaç piksel aşağı iter. `vertical-align: -.18em` bunu düzeltir; olmadan
   her ikonlu satır hafifçe kayık durur — tek tek fark edilmez, sayfa genelinde
   "özensiz" hissi verir. */
.ikon-svg {
  vertical-align: -.18em;
  flex: 0 0 auto;
  /* İkonla metin arasında nefes payı. ⚠️ `gap` KULLANILAMIYOR: çoğu yerde ikon
     düz metnin yanında duruyor ve ortada flex kap yok. */
  margin-right: 5px;
}
/* Tek başına duran ikonda sağ boşluk İSTENMEZ — yoksa kutusunun içinde sola
   kayık durur.
   🔴 `:only-child` DENENDİ VE YANLIŞ: `<strong><svg/>Kapıda nakit</strong>`
      içinde svg *element* olarak tek çocuktur (metin düğümü sayılmaz), bu
      yüzden kural yanlışlıkla eşleşip ikonla yazıyı BİRBİRİNE YAPIŞTIRDI.
      CSS metin düğümü göremez → ikon-only yerler AÇIKÇA sayılmak zorunda.
   ⚠️ Yeni bir ikon-only düğme eklersen buraya da yaz. Unutulursa belirtisi
      küçüktür (5px fazla boşluk), tersi ise metnin ikona yapışmasıdır. */
.an-ikon .ikon-svg,
.arama-ikon .ikon-svg,
.kapak-ikon .ikon-svg,
.yuvarlak .ikon-svg,
.urun-gorsel .ikon-svg,
.bos-durum .ikon .ikon-svg,
.modal-kapat .ikon-svg,
.adet button .ikon-svg,
.harita-yok .ikon-svg,
.pin .ikon-svg          { margin-right: 0; }

/* Yıldız her zaman puan rengini alır (yeşil) — `fill="currentColor"` sayesinde. */
.puan .ikon-yildiz { vertical-align: -.15em; }

/* Boş ekran ikonu: çizgi SVG soluk, 3D görsel tam renkli. */
.bos-durum .ikon { font-size: 46px; margin-bottom: 10px; color: var(--metin-3); }
.bos-durum .ikon.gorsel { line-height: 0; }
/* ⚠️ `margin: 0 auto` ŞART: sıfırlamada `img { display: block }` var, bu
   yüzden ebeveynin `text-align: center` değeri görseli ortalamıyordu. */
.bos-durum .ikon.gorsel img {
  width: 104px; height: 104px; object-fit: contain; margin: 0 auto;
}

/* Adet düğmeleri artık SVG içeriyor — ortalanmaları için grid. */
.adet button { display: grid; place-items: center; }

/* Harita pin'i: içine SVG giriyor, emoji değil. */
.pin .ikon-svg { color: #fff; }