@charset "UTF-8";
/* ==========================================================================
   Kavurmacı Celal Usta — QR Menü
   assets/css/qr.css

   Masadaki karekodun açtığı mobil menünün TEK stil dosyasıdır. Bootstrap ya
   da başka bir çatı yüklenmez; sayfa zayıf mobil bağlantıda hızlı açılsın
   diye tüm kurallar burada, dışarıdan yazı tipi çekilmez.

   TASARIM İLKELERİ
   ----------------
   • AÇIK TEMA ESASTIR. Restoranda gündüz, cam kenarında, yaşlı gözle
     okunacak bir menüdür; koyu zemin parlak ışıkta okunmuyordu.
   • YEMEK ÖNCE GELİR. Görseller kutuyu doldurur (`cover`), harf boyu değil
     iştah belirleyicidir.
   • KAYMA YOK. Her görselin oranı önceden ayrılır; yazı tipi yüklenirken
     satır yüksekliği değişmez.
   • DOKUNMA HEDEFİ EN AZ 44 px. Parmakla kullanılır.
   • Renk tek başına anlam taşımaz; durum her zaman yazıyla da belirtilir.

   İÇİNDEKİLER
   1.  Yazı tipleri ve belirteçler
   2.  Temel ve yardımcılar
   3.  İkonlar
   4.  Düğmeler
   5.  Rozet ve etiketler
   6.  Üst çubuk
   7.  Giriş bölümü
   8.  Kategori şeridi ve arama
   9.  Ürün listesi ve kartı
   10. Ürün sayfası / alt sayfa
   11. Sipariş sihirbazı
   12. Seçim biçimleri
   13. Adet, not, öneri
   14. Sepet ve formlar
   15. Ödeme ve yemek kartları
   16. Sipariş takibi ve geçmişi
   17. Bilgi kutuları, boş durum
   18. Alt bilgi ve sabit sepet çubuğu
   19. Bildirim
   20. Koyu tema
   21. Yazdırma
   ========================================================================== */

/* ==========================================================================
   1. Yazı tipleri ve belirteçler
   ========================================================================== */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/montserrat-600.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/oswald-500.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/oswald-700.woff2") format("woff2")}

:root{
  /* --- Zemin ve yüzeyler: sıcak beyaz, nötr gri değil --- */
  --kagit:#FFFCF7;
  --yuzey:#FFFFFF;
  --yuzey-2:#F7F2E8;
  --yuzey-3:#EFE7D8;

  /* --- Metin --- */
  --murekkep:#1B1713;
  --murekkep-2:#5C5248;
  --murekkep-3:#8C8073;

  /* --- Çizgiler --- */
  --cizgi:#EBE3D5;
  --cizgi-2:#DCD1BE;

  /* --- Marka: kor / bakır. Beyaz üstünde AA geçer. --- */
  --marka:#A34A17;
  --marka-koyu:#873B10;
  --marka-acik:#C8763C;
  --marka-yumusak:#FCF1E7;

  /* --- Anlamsal --- */
  --yesil:#1C7540;        --yesil-yumusak:#E8F4EC;
  --amber:#96600B;        --amber-yumusak:#FCF2DF;
  --kirmizi:#AF3527;      --kirmizi-yumusak:#FBEDEB;

  /* --- Gölge katmanları: rol farkını gölge taşır --- */
  --golge-1:0 1px 2px rgba(27,23,19,.05);
  --golge-2:0 1px 3px rgba(27,23,19,.06), 0 8px 20px -12px rgba(27,23,19,.18);
  --golge-3:0 2px 6px rgba(27,23,19,.07), 0 20px 44px -22px rgba(27,23,19,.32);

  /* --- Ölçüler --- */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-tam:999px;
  --kabuk:1120px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --ust-yuk:60px;
  /* Alttaki eylem çubuğunun kapladığı yer. qr.js çubuğu ÖLÇÜP bu değeri
     günceller; buradaki değer JavaScript kapalıyken geçerlidir. */
  --akis-bar-bosluk:100px;

  --f-baslik:"Oswald","Arial Narrow",Impact,sans-serif;
  --f-govde:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  color-scheme:light;
}

/* ==========================================================================
   2. Temel ve yardımcılar
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* `hidden` HER ZAMAN kazanır: aşağıdaki bileşenler `display` tanımladığı
   için tarayıcının kendi kuralını eziyorlardı. */
[hidden]{display:none!important}

body{
  margin:0;background:var(--kagit);color:var(--murekkep);
  font-family:var(--f-govde);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3{font-family:var(--f-baslik);font-weight:700;margin:0;line-height:1.18;text-wrap:balance}
p{margin:0}

:focus-visible{outline:2.5px solid var(--marka);outline-offset:2px;border-radius:6px}
/* Adım değişince başlığa programlı odaklanılır; bu görsel çerçeve çizmemeli. */
[tabindex="-1"]:focus{outline:none}

.kabuk{max-width:var(--kabuk);margin:0 auto;padding:0 16px}
@media (min-width:720px){.kabuk{padding:0 24px}}

.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--marka);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.atla:focus{left:0}

/* ==========================================================================
   3. İkonlar
   ========================================================================== */
.ikon{flex:none;display:block}

/* ==========================================================================
   4. Düğmeler
   ========================================================================== */
.qr-dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 20px;border-radius:var(--r-tam);
  border:1.5px solid transparent;font-weight:600;font-size:15px;
  text-align:center;width:100%;line-height:1.2;
  transition:background-color .15s,border-color .15s,color .15s,transform .08s;
}
.qr-dugme:active{transform:scale(.985)}
.qr-dugme--altin{background:var(--marka);color:#fff}
.qr-dugme--altin:hover{background:var(--marka-koyu)}
.qr-dugme--altin:disabled{background:var(--yuzey-3);color:var(--murekkep-3);cursor:not-allowed}
.qr-dugme--hayalet{background:var(--yuzey);border-color:var(--cizgi-2);color:var(--murekkep)}
.qr-dugme--hayalet:hover{background:var(--yuzey-2);border-color:var(--marka)}
.qr-dugme--yesil{background:var(--yesil);color:#fff}
.qr-dugme--kirmizi{background:var(--yuzey);border-color:color-mix(in srgb,var(--kirmizi) 40%,transparent);color:var(--kirmizi)}
.qr-dugme--kirmizi:hover{background:var(--kirmizi-yumusak)}
.qr-dugme--kucuk{width:auto;min-height:40px;padding:9px 16px;font-size:14px}

/* ==========================================================================
   5. Rozet ve etiketler
   ========================================================================== */
.etiket{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:var(--r-tam);
  background:var(--yuzey-2);color:var(--murekkep-2);border:1px solid var(--cizgi);
  white-space:nowrap;
}
.etiket--sicak{background:var(--kirmizi-yumusak);color:var(--kirmizi);border-color:color-mix(in srgb,var(--kirmizi) 26%,transparent)}
.etiket--yesil{background:var(--yesil-yumusak);color:var(--yesil);border-color:color-mix(in srgb,var(--yesil) 26%,transparent)}
.etiket--notr{background:var(--yuzey-2);color:var(--murekkep-2);border-color:var(--cizgi)}

.rozet-durum{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:var(--r-tam);
  background:var(--yesil-yumusak);color:var(--yesil);
  border:1px solid color-mix(in srgb,var(--yesil) 24%,transparent);white-space:nowrap;
}
.rozet-durum::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.rozet-durum--kapali{background:var(--yuzey-2);color:var(--murekkep-2);border-color:var(--cizgi)}

.bilgi-satir{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bilgi-satir__oge{
  font-size:11.5px;color:var(--murekkep-2);background:var(--yuzey-2);
  border:1px solid var(--cizgi);border-radius:var(--r-xs);padding:3px 8px;
}

/* ==========================================================================
   6. Üst çubuk
   ========================================================================== */
.qr-ust{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--kagit) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--cizgi);
}
.qr-ust__ic{display:flex;align-items:center;gap:12px;min-height:var(--ust-yuk)}
.qr-ust__logo{width:38px;height:38px;object-fit:contain;flex:none;border-radius:var(--r-xs)}
.qr-ust__marka{min-width:0;flex:1}
.qr-ust__ad{
  font-family:var(--f-baslik);font-size:16px;font-weight:700;letter-spacing:.02em;
  line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qr-ust__alt{
  font-size:11.5px;color:var(--murekkep-3);line-height:1.3;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qr-ust__sag{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}

/* Sepet düğmesi: sayı rozetle taşınır */
.qr-sepet-dugme{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  min-height:42px;padding:9px 15px;border-radius:var(--r-tam);
  background:var(--marka);color:#fff;font-weight:600;font-size:14px;
}
.qr-sepet-dugme:hover{background:var(--marka-koyu)}
.qr-sepet-dugme__sayi{
  min-width:21px;height:21px;padding:0 6px;border-radius:var(--r-tam);
  background:#fff;color:var(--marka);font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.qr-geri{
  display:inline-flex;align-items:center;gap:4px;font-size:14.5px;font-weight:600;
  color:var(--murekkep-2);padding:10px 10px 10px 0;margin-left:-2px;
}
.qr-geri:hover{color:var(--marka)}

/* Dar ekranda sıkışma sırası: önce sepet düğmesinin YAZISI, sonra durum
   rozeti düşer. Sepet ikonu ve sayısı her zaman kalır — en kritik öğe odur. */
@media (max-width:399px){
  .qr-sepet-dugme__metin{display:none}
  .qr-sepet-dugme{padding:9px 12px}
}
@media (max-width:479px){.qr-ust__sag .rozet-durum{display:none}}

/* ==========================================================================
   7. Giriş bölümü
   ========================================================================== */
/* DİKKAT: bu öğe `class="kabuk qr-giris"` olarak basılır. Kısayol `padding`
   kullanılırsa `.kabuk`un yan boşluğu silinir ve içerik ekranın soluna
   yapışır — bu yüzden yalnız dikey eksen yazılır. */
.qr-giris{padding-block:22px 4px}
.qr-giris__baslik{font-size:clamp(26px,6vw,36px);letter-spacing:.01em}
.qr-giris__metin{color:var(--murekkep-2);font-size:14.5px;margin:8px 0 0;max-width:60ch}
.qr-giris__satir{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* Açık sipariş şeridi */
.acik-siparis{
  display:flex;align-items:center;gap:12px;padding:13px 15px;margin-bottom:10px;
  border-radius:var(--r);border:1px solid color-mix(in srgb,var(--yesil) 24%,transparent);
  background:var(--yesil-yumusak);box-shadow:var(--golge-1);
}
.acik-siparis__nokta{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--yesil);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--yesil) 55%,transparent);animation:nabiz 2s infinite;
}
@keyframes nabiz{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.acik-siparis__nokta{animation:none}}
.acik-siparis__govde{flex:1;min-width:0}
.acik-siparis__govde strong{display:block;font-size:14.5px;color:var(--yesil)}
.acik-siparis__govde small{display:block;font-size:12.5px;color:var(--murekkep-2)}
.acik-siparis__ok{color:var(--yesil);display:flex}

/* ==========================================================================
   8. Kategori şeridi ve arama
   ========================================================================== */
.qr-katbar{
  position:sticky;top:var(--ust-yuk);z-index:30;
  background:color-mix(in srgb,var(--kagit) 94%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--cizgi);padding:12px 0;
}
.qr-katbar__liste{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:2px;
}
.qr-katbar__liste::-webkit-scrollbar{display:none}
.cip{
  flex:none;padding:9px 16px;border-radius:var(--r-tam);
  border:1.5px solid var(--cizgi-2);background:var(--yuzey);
  color:var(--murekkep-2);font-size:14px;font-weight:600;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s;
}
.cip:hover{border-color:var(--marka);color:var(--marka)}
.cip.etkin{background:var(--marka);border-color:var(--marka);color:#fff}

.qr-ara{position:relative;margin-top:10px;display:flex;align-items:center}
.qr-ara input{
  width:100%;min-height:46px;padding:12px 44px 12px 44px;border-radius:var(--r-tam);
  border:1.5px solid var(--cizgi-2);background:var(--yuzey);color:var(--murekkep);
  font-size:15px;font-family:inherit;
}
.qr-ara input::placeholder{color:var(--murekkep-3)}
.qr-ara input:focus{border-color:var(--marka);outline:none;box-shadow:0 0 0 3px var(--marka-yumusak)}
.qr-ara__ic{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--murekkep-3);pointer-events:none;display:flex;
}
.qr-ara__sil{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;color:var(--murekkep-2);background:var(--yuzey-2);
}
.qr-ara__sil:hover{background:var(--yuzey-3);color:var(--murekkep)}

/* ==========================================================================
   9. Ürün listesi ve kartı
   --------------------------------------------------------------------------
   GÖRSEL KARARI
   Menüde üç farklı oran var: afişler DİKEY (1333×1600), yemek fotoğrafları
   YATAY (600×450), biri 9:16. Afişlerin üstünde ürün adı, "turşu + içecek
   dâhil" bilgisi ve FİYAT basılı; kırpmak bilgi siler. Bu yüzden:

     • hiçbir görsel KIRPILMAZ (`cover` kullanılmaz),
     • her görsel KENDİ oranıyla gösterilir,
     • oran, gerçek `width`/`height` özniteliklerinden tarayıcıya önceden
       bildirilir → yükleme sırasında KAYMA OLMAZ.

   Yerleşim mobilde iki sütundur (Türkiye'deki yemek uygulamalarının alışılmış
   düzeni): afiş 171 px genişlikte okunur kalır, liste de kısa olur.
   ========================================================================== */
.qr-kat{padding:26px 0 6px;scroll-margin-top:calc(var(--ust-yuk) + 78px)}
.qr-kat__baslik{display:flex;align-items:baseline;gap:10px;font-size:21px;letter-spacing:.01em}
.qr-kat__sayi{font-family:var(--f-govde);font-size:12.5px;font-weight:600;color:var(--murekkep-3)}
.qr-kat__aciklama{color:var(--murekkep-2);font-size:13.5px;margin:6px 0 0;max-width:62ch}

.qr-urunler{
  list-style:none;margin:16px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
@media (min-width:720px){.qr-urunler{grid-template-columns:repeat(3,1fr);gap:18px}}
@media (min-width:1040px){.qr-urunler{grid-template-columns:repeat(4,1fr)}}

.qr-urun{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--r);box-shadow:var(--golge-1);overflow:hidden;
  transition:box-shadow .16s,border-color .16s,transform .1s;
}
.qr-urun:hover{box-shadow:var(--golge-2);border-color:var(--cizgi-2)}
.qr-urun:active{transform:scale(.99)}
/* Kartın tamamı tıklanabilir; ekleme düğmesi kaplamanın üstünde durur. */
.qr-urun__ad a::after{content:"";position:absolute;inset:0;z-index:1}
.qr-urun__ekle,.qr-urun form{position:relative;z-index:2}

.qr-urun__ic{display:flex;flex-direction:column;height:100%}

/* GÖRSEL KUTUSU — hepsi AYNI yükseklikte, hiçbiri kırpılmaz.
   --------------------------------------------------------------------------
   Menüde üç farklı oran bir arada: afişler 1333×1600 (0.83), yemek
   fotoğrafları 600×450 (1.33), bir kutu içecek 484×860 (0.56). Her görseli
   KENDİ oranıyla basmak satır yüksekliğini en uzun görsele kilitliyor;
   yanındaki kartlar da o boya uzayıp ortalarında kocaman boşluk kalıyordu.

   Çözüm: kutu sabit orandadır, görsel içine `contain` ile SIĞDIRILIR.
   Böylece hiçbir şey kırpılmaz (afişlerin içindeki fiyat da dâhil) ve
   bütün kartlar aynı hizada durur.

   Oran neden 5/6? Menü afişleri tam 1333/1600 = 0.833. Kutu onlarla
   birebir aynı olunca afişler boşluk bırakmadan, mümkün olan EN BÜYÜK
   boyutta çıkar — menü uzaktan da okunur. Farklı oranlı görseller
   ortalanır, iki yanında nötr bant kalır. */
.qr-urun__gorsel{
  width:100%;aspect-ratio:5 / 6;display:block;
  object-fit:contain;
  /* Zemin BEYAZ: ürün çekimlerinin çoğu beyaz fonludur, bej bir kutuda
     beyaz bir dikdörtgen gibi duruyordu. Beyazda görsel kutuya karışır. */
  background:var(--yuzey);border-bottom:1px solid var(--cizgi);
}

/* YATAY görseller kutuyu doldurur. Bunlar yemek fotoğraflarıdır; kenardan
   biraz kırpılmaları bilgi kaybettirmez, kutuyu boş bant bırakmadan
   doldurdukları için kart daha iştah açıcı görünür.
   DİKEY görseller (menü afişleri, kutu içecek çekimleri) `contain` kalır:
   onlarda fiyat ve ürün adı görselin İÇİNDEDİR, kırpılamaz. */
.qr-urun__gorsel--dolgu{object-fit:cover}

/* Görseli olmayan ürün: kutu yine de basılır ki satır hizası bozulmasın.
   (Kategorideki HİÇBİR üründe görsel yoksa bu kutu hiç basılmaz — bkz.
   menu.php; o durumda liste gereksiz yere uzamaz.) */
.qr-urun__gorsel--bos{
  display:flex;align-items:center;justify-content:center;
  background:var(--yuzey-2);color:var(--murekkep-3);opacity:.45;
}
.qr-urun__govde{flex:1;display:flex;flex-direction:column;padding:12px 13px 13px;min-width:0}
@media (min-width:720px){.qr-urun__govde{padding:14px 16px 16px}}

.qr-urun__ad{
  font-family:var(--f-baslik);font-size:15.5px;font-weight:500;letter-spacing:.01em;
  line-height:1.25;margin:0;
}
@media (min-width:720px){.qr-urun__ad{font-size:17px}}
.qr-urun__birim{
  font-family:var(--f-govde);font-size:11px;color:var(--murekkep-3);
  font-weight:600;margin-left:5px;white-space:nowrap;
}
.qr-urun__metin{
  color:var(--murekkep-2);font-size:12.5px;line-height:1.45;margin:5px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (min-width:720px){.qr-urun__metin{font-size:13.5px}}

.qr-urun__alt{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:auto;padding-top:11px;
}
.qr-urun__fiyat{
  font-family:var(--f-baslik);font-size:20px;font-weight:700;color:var(--murekkep);
  white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1;
}
.qr-urun__eski{font-size:12.5px;color:var(--murekkep-3);text-decoration:line-through}
.qr-urun__ekle{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;min-width:40px;padding:9px 14px;border-radius:var(--r-tam);
  background:var(--marka);color:#fff;font-weight:600;font-size:13.5px;white-space:nowrap;
  transition:background-color .15s;
}
.qr-urun__ekle:hover{background:var(--marka-koyu)}
.qr-urun__ekle:disabled{background:var(--yuzey-3);color:var(--murekkep-3)}
/* İki sütunlu dar kartta düğme alt satıra düşüp sağa sıkışıyordu; tam
   genişlikte daha büyük ve daha kolay bir dokunma hedefi olur. */
@media (max-width:719px){
  .qr-urun__alt{gap:6px}
  .qr-urun__ekle,.qr-urun form{flex:1 0 100%;margin-left:0}
  .qr-urun form .qr-urun__ekle{width:100%}
}

.qr-urun--tukendi{opacity:.7}
.qr-urun--tukendi img.qr-urun__gorsel{filter:grayscale(.9)}

/* Rozet GÖVDEDEDİR, görselin üstünde değil. Menü afişlerinin kendi başlığı
   ("MENÜ 1") görselin üst ortasındadır; üste bindirilen her rozet onu
   kapatıyordu. İşletme kendi afişini yüklediğinde neyin nereye denk geleceği
   bilinemez — bu yüzden görselin üstü hiç kullanılmaz. */
.qr-urun__rozet{align-self:flex-start;margin-bottom:7px}

/* Alerjen bilgisi listede satır kaplamaz; ayrıntı sayfasında tam gösterilir. */
/* Tek satır + GERÇEK üç nokta. `display:flex` + `text-overflow` birlikte
   çalışmıyordu: metin üç nokta olmadan kesiliyor, eksik yazılmış gibi
   duruyordu. `-webkit-box` kırpması "…" basar. Tam liste ürün sayfasındaki
   katlanır kutudadır. */
.qr-urun__alerjen{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;font-size:11px;color:var(--murekkep-3);margin-top:7px;
  line-height:1.45;
}
.qr-urun__alerjen .qr-ikon{
  display:inline-block;vertical-align:-2px;margin-right:4px;
}

.stok-uyari{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:5px 12px;border-radius:var(--r-tam);font-size:12.5px;font-weight:600;
  background:var(--amber-yumusak);color:var(--amber);
  border:1px solid color-mix(in srgb,var(--amber) 26%,transparent);
}

/* ==========================================================================
   10. Ürün sayfası / alt sayfa
   --------------------------------------------------------------------------
   Ürün başlığı TEK SATIRDIR. Büyük görsel ilk soruyu mobilde ekranın altına
   itiyordu; artık misafir kaydırmadan ilk soruyu görür. Ürün ayrıntısı ve
   alerjen bilgisi katlanır kutudadır — isteyen açar.
   ========================================================================== */
/* Geniş ekranda sihirbaz TAM GENİŞLİĞE yayılmaz: 800 px'lik bir "Ekmek
   Arası" satırı hem okunaksız hem de tıklaması yorucuydu. Soru-cevap akışı
   ortalanmış, rahat okunan bir sütunda kalır. */
.qr-urun-sayfa{padding-bottom:calc(var(--akis-bar-bosluk) + env(safe-area-inset-bottom))}
@media (min-width:720px){
  .qr-urun-sayfa{max-width:640px;margin-inline:auto}
}

.urun-ust{
  display:flex;align-items:center;gap:12px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:11px 13px;box-shadow:var(--golge-1);
}
.urun-ust__gorsel{
  /* `contain`: menü afişlerinde fiyat ve "dâhil" bilgisi görselin içindedir,
     kare kutuya kırpmak yanıltıcı bir parça gösteriyordu. */
  width:56px;height:56px;flex:none;border-radius:var(--r-xs);
  object-fit:contain;background:var(--yuzey-2);
}
.urun-ust__govde{min-width:0;flex:1}
.urun-ust__ad{
  display:block;font-family:var(--f-baslik);font-size:17px;font-weight:500;
  letter-spacing:.01em;line-height:1.2;
}
.urun-ust__alt{display:block;font-size:12px;color:var(--murekkep-3);margin-top:2px}
.urun-ust__fiyat{
  font-family:var(--f-baslik);font-size:20px;font-weight:700;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

.urun-detay{
  margin-top:10px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--r-sm);overflow:hidden;
}
.urun-detay>summary{
  cursor:pointer;list-style:none;padding:12px 14px;
  font-size:13.5px;font-weight:600;color:var(--murekkep-2);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.urun-detay>summary::-webkit-details-marker{display:none}
.urun-detay>summary::after{
  content:"";width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s;
}
.urun-detay[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.urun-detay__ic{
  padding:0 14px 13px;font-size:13px;line-height:1.55;color:var(--murekkep-2);
  border-top:1px solid var(--cizgi);padding-top:11px;
}

.katlanir{
  background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--r-sm);overflow:hidden;margin-top:12px;
}
.katlanir>summary{
  cursor:pointer;list-style:none;padding:13px 15px;font-weight:600;font-size:14px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.katlanir>summary::-webkit-details-marker{display:none}
.katlanir>summary::after{
  content:"";width:8px;height:8px;flex:none;
  border-right:2px solid var(--murekkep-3);border-bottom:2px solid var(--murekkep-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s;
}
.katlanir[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.katlanir__ic{padding:0 15px 15px;font-size:13.5px;line-height:1.6;color:var(--murekkep-2)}

/* --------------------------------------------------------------------------
   Alt sayfa (bottom sheet) — ürün seçimi menüden ÇIKMADAN yapılır.
   Mobilde alttan kayar, masaüstünde ortada bir pencere olur. Misafir seçimini
   bitirince listeye geri döner; sayfa değişmediği için kaydırma yeri korunur.
   -------------------------------------------------------------------------- */
.alt-sayfa{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(27,23,19,.5);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.alt-sayfa.acik{opacity:1;visibility:visible}
.alt-sayfa__kutu{
  position:relative;width:100%;max-height:92vh;max-height:92dvh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--kagit);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:22px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--golge-3);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.22,.8,.3,1);
}
.alt-sayfa.acik .alt-sayfa__kutu{transform:none}
/* Tutamaç: parmakla aşağı çekilebileceğini anlatan görsel ipucu. */
.alt-sayfa__tut{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:42px;height:4px;border-radius:var(--r-tam);background:var(--cizgi-2);
}
.alt-sayfa__kapat{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--yuzey-2);border:1px solid var(--cizgi);color:var(--murekkep-2);
  transition:background-color .15s,color .15s;
}
.alt-sayfa__kapat:hover{background:var(--yuzey-3);color:var(--murekkep)}

/* Alt sayfa AÇIKKEN eylem çubuğu ekrana değil, sayfanın içine yapışır —
   yoksa masaüstünde pencerenin dışında yüzüyordu. */
.alt-sayfa .akis-bar{
  position:sticky;left:auto;right:auto;bottom:0;
  margin:14px -16px calc(-20px - env(safe-area-inset-bottom));
  max-width:none;padding-left:16px;padding-right:16px;
}
/* Alt sayfada çubuk `sticky`, yani AKIŞIN İÇİNDEDİR ve kaydırma kabının
   dibine yapışır. Adımın sonuna boşluk bırakılmazsa çubuk son seçeneğin
   üstüne biner — ölçümde son seçenek 18 px çubuğun altında kalıyordu ve
   sonuna kaydırıldığında bile nefes payı -1 px'ti.
   Boşluk ADIMIN sonuna eklenir (sayfanın değil): çubuk akışta adımdan
   SONRA geldiği için sayfa sonuna eklenen boşluk çubuğun altında kalır,
   işe yaramazdı. */
.alt-sayfa .qr-urun-sayfa{padding-bottom:0}

@media (min-width:720px){
  .alt-sayfa{align-items:center;padding:24px}
  .alt-sayfa__kutu{
    max-width:580px;border-radius:var(--r-lg);
    padding:26px 26px 22px;max-height:88vh;
    transform:translateY(18px) scale(.98);
  }
  .alt-sayfa.acik .alt-sayfa__kutu{transform:none}
  .alt-sayfa__tut{display:none}
  .alt-sayfa .akis-bar{margin:16px -26px -22px;padding-left:26px;padding-right:26px}
}
@media (prefers-reduced-motion:reduce){
  .alt-sayfa,.alt-sayfa__kutu{transition:opacity .15s,visibility .15s}
  .alt-sayfa__kutu{transform:none!important}
}

/* ==========================================================================
   11. Sipariş sihirbazı
   --------------------------------------------------------------------------
   İlerleme çubuğu üst çubuğun hemen altına YAPIŞIR: misafir hangi adımda
   olduğunu her an görür. Eylem çubuğu ekranın altında sabittir ve TEK ana
   düğme taşır ("Devam" → "Sepete ekle") — iki düğme hangisinin işe yaradığını
   belirsizleştiriyordu.
   ========================================================================== */
.akis-ilerleme{
  position:sticky;top:var(--ust-yuk);z-index:20;
  display:flex;align-items:center;gap:12px;
  margin:14px -16px 0;padding:11px 16px;
  background:color-mix(in srgb,var(--kagit) 92%,transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);
}
.akis-ilerleme__noktalar{display:flex;align-items:center;gap:6px;flex:1}
.akis-nokta{
  height:5px;flex:1;border-radius:var(--r-tam);background:var(--yuzey-3);
  transition:background-color .22s;
}
.akis-nokta.tamam{background:color-mix(in srgb,var(--marka) 45%,var(--yuzey-3))}
.akis-nokta.etkin{background:var(--marka)}
.akis-ilerleme__sayi{
  font-size:12.5px;color:var(--murekkep-3);font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.akis-ilerleme__sayi b{color:var(--marka);font-weight:700}

/* Sihirbaz açıldığında (qr.js → form.classList.add('akis--acik')) yalnız
   ETKİN adım görünür. JavaScript kapalıysa bu sınıf hiç eklenmez ve bütün
   adımlar tek uzun sayfa olarak çalışmaya devam eder. */
.akis--acik [data-adim]{display:none}
/* Etkin adımın sonunda çubuk kadar boşluk AYRILIR. Çubuk tam sayfada
   `fixed`, alt sayfada `sticky`; ikisinde de içeriğin üstünde durur, bu
   yüzden boşluk bırakılmazsa son seçenek altında kalır (ölçülmüştü: alt
   sayfada 18 px örtüşme). Boşluk adımın İÇİNDE olduğu için hangi öğenin
   kaydırıldığından bağımsız olarak çalışır. */
.akis--acik [data-adim].etkin{display:block;padding-bottom:var(--akis-bar-bosluk)}
/* Adım olarak sunulmayan alanlar (gizli not/adet) sihirbazda gösterilmez. */
.akis--acik [data-akis-dis]{display:none}

.akis-adim{padding:20px 0 4px;animation:adimGir .2s ease-out}
@keyframes adimGir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.akis-adim{animation:none}}

.akis-adim__ust{margin-bottom:14px}
.akis-adim__baslik{
  font-family:var(--f-baslik);font-size:23px;font-weight:500;
  letter-spacing:.01em;line-height:1.2;margin:0;text-wrap:balance;
}
@media (min-width:720px){.akis-adim__baslik{font-size:27px}}
.akis-adim__alt{margin:6px 0 0;color:var(--murekkep-2);font-size:14px;line-height:1.5}
.akis-adim__kural{
  margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--murekkep-3);
}

.akis-uyari{
  margin:0 0 10px;padding:11px 14px;border-radius:var(--r-sm);
  background:var(--kirmizi-yumusak);color:var(--kirmizi);
  border:1px solid color-mix(in srgb,var(--kirmizi) 30%,transparent);
  font-size:13.5px;font-weight:600;
}

/* Sabit eylem çubuğu. */
.akis-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:10px;align-items:stretch;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--kagit) 94%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--cizgi);
}
@media (min-width:720px){
  /* Çubuk, sihirbaz sütunuyla aynı hizada ortalanmış bir ada olur. */
  .akis-bar{
    left:50%;transform:translateX(-50%);right:auto;
    width:min(100% - 32px,672px);
    border:1px solid var(--cizgi);border-bottom:0;
    border-radius:var(--r) var(--r) 0 0;
    box-shadow:var(--golge-2);
  }
}
.akis-bar__geri{
  flex:none;width:52px;border-radius:var(--r-sm);
  background:var(--yuzey);border:1px solid var(--cizgi-2);color:var(--murekkep);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .15s,border-color .15s;
}
.akis-bar__geri:hover{background:var(--yuzey-2);border-color:var(--marka)}
.akis-bar__ana{
  flex:1;min-height:54px;border-radius:var(--r-sm);
  background:var(--marka);color:#fff;
  display:inline-flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 20px;font-size:16px;font-weight:600;
  box-shadow:0 4px 14px color-mix(in srgb,var(--marka) 28%,transparent);
  transition:background-color .15s,box-shadow .15s;
}
.akis-bar__ana:hover{background:var(--marka-koyu)}
.akis-bar__ana:disabled{
  background:var(--yuzey-3);color:var(--murekkep-3);box-shadow:none;cursor:not-allowed;
}
/* .etiket ile ÇAKIŞMASIN: bu bir düğme metnidir, rozet değil. */
.akis-bar__etiket{font-size:16px;font-weight:600;letter-spacing:0;text-transform:none}
.akis-bar__tutar{
  font-family:var(--f-baslik);font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ==========================================================================
   12. Seçim biçimleri (list · chips · grid · cards)
   --------------------------------------------------------------------------
   Dördü de GERÇEK radio/checkbox kullanır: JavaScript kapalıyken de çalışır,
   klavye ve ekran okuyucuyla erişilebilir. Giriş görsel olarak gizlenir ama
   odaklanabilir kalır; odak halkası sarmalayıcıya taşınır.
   ========================================================================== */
.secim-grup{border:0;padding:0;margin:0 0 18px;min-width:0}
.secim-grup--sade{margin-bottom:8px}
.secim-grup__baslik{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--f-baslik);font-size:16px;font-weight:500;letter-spacing:.01em;
  margin-bottom:9px;
}
.secim-grup__zorunlu{
  font-family:var(--f-govde);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--marka);
  background:var(--marka-yumusak);border-radius:var(--r-tam);padding:3px 9px;
  white-space:nowrap;
}
.secim-grup__aciklama{margin:0 0 10px;font-size:13px;color:var(--murekkep-2)}
.secim-grup__govde{display:flex;flex-direction:column;gap:8px}

/* Girişleri gizle — odak sarmalayıcıda gösterilir. */
.secim input,.secim-cip input,.secim-kart input,.secim-kutu input,
.oneri input,.odeme input,.marka input,.servis-secim__oge input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}

/* ---- list: alt alta satır ---- */
.secim{
  position:relative;display:flex;align-items:center;gap:11px;cursor:pointer;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-sm);
  padding:13px 15px;transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.secim::before{
  content:"";width:20px;height:20px;flex:none;border-radius:50%;
  border:2px solid var(--cizgi-2);transition:border-color .15s,background-color .15s;
}
.secim-grup[data-coklu="1"] .secim::before{border-radius:6px}
.secim:hover{border-color:var(--cizgi-2);background:var(--yuzey-2)}
.secim:has(input:checked){
  border-color:var(--marka);background:var(--marka-yumusak);
  box-shadow:inset 0 0 0 1px var(--marka);
}
.secim:has(input:checked)::before{
  border-color:var(--marka);background:var(--marka);
  box-shadow:inset 0 0 0 3.5px var(--yuzey);
}
.secim:has(input:focus-visible){outline:3px solid var(--marka-acik);outline-offset:2px}
.secim:has(input:disabled){opacity:.5;cursor:not-allowed}
.secim__ad{flex:1;min-width:0;font-size:14.5px;font-weight:500;line-height:1.35}
.secim__metin{display:block;font-size:12.5px;color:var(--murekkep-3);margin-top:2px;font-weight:400}
.secim__fark{
  font-size:13.5px;font-weight:700;color:var(--marka);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ---- chips: yan yana etiket ---- */
.secim-grup--chips .secim-grup__govde{flex-direction:row;flex-wrap:wrap;gap:9px}
.secim-cip{position:relative;cursor:pointer}
.secim-cip__ic{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:10px 17px;border-radius:var(--r-tam);
  background:var(--yuzey);border:1px solid var(--cizgi-2);
  font-size:14.5px;font-weight:500;
  transition:border-color .15s,background-color .15s,color .15s;
}
.secim-cip:hover .secim-cip__ic{border-color:var(--marka-acik);background:var(--yuzey-2)}
.secim-cip:has(input:checked) .secim-cip__ic{
  background:var(--marka);border-color:var(--marka);color:#fff;
}
.secim-cip:has(input:focus-visible) .secim-cip__ic{outline:3px solid var(--marka-acik);outline-offset:2px}
.secim-cip__ad{white-space:nowrap}
.secim-cip__fark{font-size:12.5px;font-weight:700;opacity:.85;font-variant-numeric:tabular-nums}

/* ---- grid: iki sütun kutucuk ---- */
.secim-grup--grid .secim-grup__govde{
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px;
}
@media (min-width:560px){.secim-grup--grid .secim-grup__govde{grid-template-columns:repeat(3,1fr)}}
.secim-kart{position:relative;cursor:pointer;display:block}
.secim-kart__ic{
  /* Sağ üstteki onay işareti uzun seçenek adlarının üstüne biniyordu
     ("Eker Ayran (270 ml)"); sağ boşluk metni işaretin altından çıkarır. */
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;height:100%;padding:14px 14px;text-align:center;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-sm);
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.secim-kart:hover .secim-kart__ic{border-color:var(--cizgi-2);background:var(--yuzey-2)}
.secim-kart:has(input:checked) .secim-kart__ic{
  border-color:var(--marka);background:var(--marka-yumusak);
  box-shadow:inset 0 0 0 1px var(--marka);
}
.secim-kart:has(input:checked) .secim-kart__ad{font-weight:700;color:var(--marka-koyu)}
.secim-kart:has(input:focus-visible) .secim-kart__ic{outline:3px solid var(--marka-acik);outline-offset:2px}
.secim-kart__gorsel{
  width:56px;height:56px;border-radius:var(--r-xs);object-fit:contain;background:var(--yuzey-2);
}
.secim-kart__ad{font-size:13.5px;font-weight:600;line-height:1.3}
.secim-kart__fark{font-size:12.5px;font-weight:700;color:var(--marka);font-variant-numeric:tabular-nums}
/* NOT: `.secim-kart` (ızgara) köşe işareti KULLANMAZ. Seçenek adları iki
   satıra taştığında ("Eker Ayran (270 ml)") işaret metnin üstüne biniyordu.
   Seçili durum kenarlık + dolgu + kalın yazıyla zaten açıkça belli. */
.secim-kart__isaret{display:none}
.secim-kutu__isaret,.oneri__isaret,.odeme__isaret,.marka__isaret{
  position:absolute;top:8px;right:8px;
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--marka);color:#fff;font-size:13px;font-weight:700;line-height:1;
  opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s;
}
.secim-kutu:has(input:checked) .secim-kutu__isaret,
.oneri:has(input:checked) .oneri__isaret,
.odeme:has(input:checked) .odeme__isaret,
.marka:has(input:checked) .marka__isaret{opacity:1;transform:none}

/* ---- cards: görselli büyük kart (ana tercihler) ---- */
.secim-grup--cards .secim-grup__govde{gap:10px}
.secim-kutu{position:relative;cursor:pointer;display:block}
.secim-kutu__ic{
  position:relative;display:flex;align-items:center;gap:13px;
  padding:13px 14px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.secim-kutu:hover .secim-kutu__ic{border-color:var(--cizgi-2);background:var(--yuzey-2)}
.secim-kutu:has(input:checked) .secim-kutu__ic{
  border-color:var(--marka);background:var(--marka-yumusak);
  box-shadow:inset 0 0 0 1px var(--marka);
}
.secim-kutu:has(input:focus-visible) .secim-kutu__ic{outline:3px solid var(--marka-acik);outline-offset:2px}
.secim-kutu__gorsel{
  width:72px;height:72px;flex:none;border-radius:var(--r-sm);
  object-fit:contain;background:var(--yuzey-2);
}
.secim-kutu__govde{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-right:26px}
.secim-kutu__ad{font-family:var(--f-baslik);font-size:16px;font-weight:500;letter-spacing:.01em}
.secim-kutu__metin{font-size:12.5px;color:var(--murekkep-2);line-height:1.45}
.secim-kutu__fark{font-size:13px;font-weight:700;color:var(--marka);font-variant-numeric:tabular-nums}
.secim-kutu__rozet{position:absolute;bottom:10px;right:12px}

/* ==========================================================================
   13. Adet, not, öneri
   ========================================================================== */
.adet-satir{
  display:flex;align-items:center;gap:14px;margin:14px 0;
  background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--r-sm);padding:11px 14px;
}
.adet-satir__etiket{font-size:14.5px;font-weight:600;flex:1}
.adet{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);
  border-radius:var(--r-tam);padding:3px;
}
.adet button{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--yuzey);border:1px solid var(--cizgi);color:var(--murekkep);
  font-size:19px;line-height:1;font-weight:600;
  transition:background-color .14s,border-color .14s,color .14s;
}
.adet button:hover:not(:disabled){background:var(--marka);border-color:var(--marka);color:#fff}
.adet button:disabled{opacity:.4;cursor:not-allowed}
.adet__deger{
  min-width:38px;text-align:center;font-family:var(--f-baslik);
  font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;
}
/* JavaScript varsa sayı kutusu gizlenir; yoksa görünür kalıp çalışır. */
.adet__girdi{
  width:76px;height:44px;text-align:center;font-size:16px;font-weight:600;
  border:1px solid var(--cizgi-2);border-radius:var(--r-sm);background:var(--yuzey);
}
.js .adet__girdi{display:none}
.js .adet{display:inline-flex}
html:not(.js) .adet{display:none}

.not-alan{
  width:100%;min-height:88px;resize:vertical;
  padding:12px 14px;border:1px solid var(--cizgi-2);border-radius:var(--r-sm);
  background:var(--yuzey);font:inherit;font-size:14.5px;line-height:1.5;color:var(--murekkep);
  transition:border-color .15s,box-shadow .15s;
}
.not-alan::placeholder{color:var(--murekkep-3)}
.not-alan:focus{
  outline:0;border-color:var(--marka);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--marka) 18%,transparent);
}

.oneri-izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:560px){.oneri-izgara{grid-template-columns:repeat(3,1fr)}}
.oneri{
  position:relative;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:13px 10px;text-align:center;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-sm);
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.oneri:hover{border-color:var(--cizgi-2);background:var(--yuzey-2)}
.oneri:has(input:checked){
  border-color:var(--marka);background:var(--marka-yumusak);
  box-shadow:inset 0 0 0 1px var(--marka);
}
.oneri:has(input:focus-visible){outline:3px solid var(--marka-acik);outline-offset:2px}
.oneri__gorsel{width:64px;height:64px;border-radius:var(--r-xs);object-fit:contain;background:var(--yuzey-2)}
.oneri__gorsel--bos{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--murekkep-3);border:1px dashed var(--cizgi-2);
}
.oneri__ad{font-size:13px;font-weight:600;line-height:1.3}
.oneri__fiyat{font-size:12.5px;font-weight:700;color:var(--marka);font-variant-numeric:tabular-nums}

/* ==========================================================================
   14. Sepet, kartlar ve form alanları
   ========================================================================== */
.kart{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:16px;box-shadow:var(--golge-1);margin-bottom:14px;
}
@media (min-width:720px){.kart{padding:20px 22px}}
.kart__baslik{
  font-family:var(--f-baslik);font-size:17px;font-weight:500;letter-spacing:.01em;
  margin:0 0 13px;padding-bottom:11px;border-bottom:1px solid var(--cizgi);
}

.alan{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.alan__etiket{font-size:13.5px;font-weight:600;color:var(--murekkep-2)}
.alan__zorunlu{color:var(--kirmizi);margin-left:2px}
.alan input[type=text],.alan input[type=tel],.alan input[type=email],
.alan input[type=number],.alan select,.alan textarea{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid var(--cizgi-2);border-radius:var(--r-sm);
  background:var(--yuzey);font:inherit;font-size:16px;color:var(--murekkep);
  transition:border-color .15s,box-shadow .15s;
}
.alan textarea{min-height:88px;resize:vertical;line-height:1.5}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  outline:0;border-color:var(--marka);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--marka) 18%,transparent);
}
.alan--hatali input,.alan--hatali select,.alan--hatali textarea{
  border-color:var(--kirmizi);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--kirmizi) 14%,transparent);
}
.alan__hata{font-size:12.5px;font-weight:600;color:var(--kirmizi)}
.alan__ipucu{font-size:12.5px;color:var(--murekkep-3);margin:0}

/* Onay kutusu: KVKK/şartlar gibi yasal onaylarda kutu GÖRÜNÜR kalır —
   gizlenmiş bir onay kutusu hem erişilebilirlik hem hukuk açısından yanlış. */
.onay{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  padding:12px 0;font-size:13.5px;line-height:1.55;color:var(--murekkep-2);
}
.onay input[type=checkbox]{
  width:22px;height:22px;flex:none;margin:0;accent-color:var(--marka);cursor:pointer;
}
.onay small{color:var(--murekkep-3)}
.onay a{color:var(--marka);text-decoration:underline;text-underline-offset:2px}

.servis-secim{display:flex;gap:9px;margin-bottom:14px}
.servis-secim__oge{
  position:relative;flex:1;cursor:pointer;text-align:center;
  padding:13px 12px;border-radius:var(--r-sm);
  background:var(--yuzey);border:1px solid var(--cizgi);
  font-size:14.5px;font-weight:600;
  transition:border-color .15s,background-color .15s,color .15s;
}
.servis-secim__oge:has(input:checked){
  border-color:var(--marka);background:var(--marka);color:#fff;
}
.servis-secim__oge:has(input:focus-visible){outline:3px solid var(--marka-acik);outline-offset:2px}

.sepet-satir{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--cizgi);
}
.sepet-satir:last-child{border-bottom:0}
/* Ürün küçük görselleri de KIRPILMAZ: afişlerde fiyat görselin içindedir,
   kare kutuya `cover` ile oturtmak yanıltıcı bir parça gösteriyordu. */
.sepet-satir__gorsel{
  width:62px;height:62px;flex:none;border-radius:var(--r-xs);
  object-fit:contain;background:var(--yuzey-2);
}
.sepet-satir__govde{flex:1;min-width:0}
.sepet-satir__ad{font-size:15px;font-weight:600;line-height:1.3}
.sepet-satir__secim{font-size:12.5px;color:var(--murekkep-2);margin-top:4px;line-height:1.45}
.sepet-satir__not{
  font-size:12.5px;color:var(--amber);margin-top:4px;
  background:var(--amber-yumusak);border-radius:var(--r-xs);padding:4px 8px;
  display:inline-block;
}
.sepet-satir__alt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
/* Sepet satırında adet kontrolü KOMPAKTTIR: ürün sayfasındaki tam boy kontrol
   dar satırda alt satıra taşıyor, "Kaldır"ı üçüncü satıra itiyordu. */
.sepet-satir__alt .adet{padding:2px;gap:0}
.sepet-satir__alt .adet button{width:33px;height:33px}
.sepet-satir__alt .adet__deger{min-width:30px;font-size:15px}
.sepet-satir__alt .sepet-duzenle,.sepet-satir__alt .sepet-sil{min-height:33px;padding:6px 12px;font-size:12.5px}
.sepet-satir__fiyat{
  font-family:var(--f-baslik);font-size:17px;font-weight:700;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.sepet-duzenle,.sepet-sil{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:38px;padding:8px 14px;border-radius:var(--r-tam);
  font-size:13px;font-weight:600;
  background:var(--yuzey-2);border:1px solid var(--cizgi);color:var(--murekkep-2);
  transition:background-color .15s,border-color .15s,color .15s;
}
.sepet-duzenle:hover{background:var(--marka-yumusak);border-color:var(--marka);color:var(--marka)}
.sepet-sil{color:var(--kirmizi)}
.sepet-sil:hover{background:var(--kirmizi-yumusak);border-color:var(--kirmizi)}

.ozet{
  background:var(--yuzey-2);border:1px solid var(--cizgi);
  border-radius:var(--r-sm);padding:6px 15px;
}
.ozet__satir{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0;font-size:14px;color:var(--murekkep-2);
}
.ozet__satir span:last-child{font-variant-numeric:tabular-nums;color:var(--murekkep);font-weight:600}
.ozet__satir--toplam{
  margin-top:6px;padding-top:13px;border-top:1px solid var(--cizgi);
  font-family:var(--f-baslik);font-size:20px;font-weight:700;color:var(--murekkep);
}
.ozet__satir--toplam span:last-child{font-size:23px;font-weight:700;color:var(--marka)}

/* Sihirbazın son adımındaki "seçimleriniz" listesi. */
.ozet-liste{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-sm);
  padding:4px 14px;margin-bottom:14px;
}
.ozet-liste__satir{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--cizgi);font-size:13.5px;
}
.ozet-liste__satir:last-child{border-bottom:0}
.ozet-liste__ad{color:var(--murekkep-3);font-weight:600;flex:none}
.ozet-liste__deger{text-align:right;font-weight:600;line-height:1.4}

/* ==========================================================================
   15. Ödeme ve yemek kartı markaları
   --------------------------------------------------------------------------
   Yemek kartı seçilince markalar AÇILIR; seçilmezse hiç yer kaplamaz. Marka
   kutucuğu her markanın kendi kurumsal rengini (--marka-renk) satır içinden
   alır; logo varsa logo, yoksa renkli çip + ad gösterilir.
   ========================================================================== */
.odeme{
  position:relative;display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:14px 15px;margin-bottom:9px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-sm);
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.odeme::before{
  content:"";width:20px;height:20px;flex:none;border-radius:50%;
  border:2px solid var(--cizgi-2);transition:border-color .15s,background-color .15s;
}
.odeme:hover{border-color:var(--cizgi-2);background:var(--yuzey-2)}
.odeme:has(input:checked){
  border-color:var(--marka);background:var(--marka-yumusak);
  box-shadow:inset 0 0 0 1px var(--marka);
}
.odeme:has(input:checked)::before{
  border-color:var(--marka);background:var(--marka);
  box-shadow:inset 0 0 0 3.5px var(--yuzey);
}
.odeme:has(input:focus-visible){outline:3px solid var(--marka-acik);outline-offset:2px}
.odeme__ic{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-right:30px}
.odeme__ad{font-size:15px;font-weight:600}
.odeme__metin{font-size:12.5px;color:var(--murekkep-2);line-height:1.45}
.odeme__isaret{top:50%;right:14px;transform:translateY(-50%) scale(.6)}
.odeme:has(input:checked) .odeme__isaret{transform:translateY(-50%)}

.marka-kutu{
  margin:-2px 0 12px;padding:14px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);
  border-radius:var(--r-sm);
  animation:adimGir .18s ease-out;
}
@media (prefers-reduced-motion:reduce){.marka-kutu{animation:none}}
.marka-kutu__metin{margin:0 0 11px;font-size:12.5px;color:var(--murekkep-2)}
.marka-izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media (min-width:480px){.marka-izgara{grid-template-columns:repeat(3,1fr)}}
.marka{position:relative;cursor:pointer;display:block}
.marka__ic{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;height:100%;min-height:76px;padding:12px 8px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s,background-color .15s;
}
.marka:hover .marka__ic{border-color:var(--marka-renk,var(--cizgi-2))}
.marka:has(input:checked) .marka__ic{
  border-color:var(--marka-renk,var(--marka));
  box-shadow:inset 0 0 0 1.5px var(--marka-renk,var(--marka));
  background:color-mix(in srgb,var(--marka-renk,var(--marka)) 7%,var(--yuzey));
}
.marka:has(input:focus-visible) .marka__ic{outline:3px solid var(--marka-acik);outline-offset:2px}
.marka__logo{max-width:88px;max-height:30px;width:auto;height:auto;object-fit:contain}
/* Logo yoksa: markanın kurumsal renginde çip + adı. */
.marka__cip{
  width:34px;height:22px;border-radius:5px;flex:none;
  background:var(--marka-renk,var(--murekkep-3));
  box-shadow:inset 0 -8px 0 color-mix(in srgb,#000 12%,transparent);
}
.marka__ad{font-size:12.5px;font-weight:600;text-align:center;line-height:1.25}
.marka__isaret{
  top:6px;right:6px;width:19px;height:19px;font-size:11px;
  background:var(--marka-renk,var(--marka));
}

/* ==========================================================================
   16. Sipariş takibi ve geçmişi
   ========================================================================== */
.takip{
  text-align:center;padding:26px 18px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-lg);
  box-shadow:var(--golge-1);
}
.takip__kod{
  /* Kod uzunluğu işletmeye göre değişir; `clamp` dar ekranda tek satırda
     tutar — sabit 40px "TEST-260912-8DB1" gibi kodları ikiye bölüyordu. */
  display:block;font-family:var(--f-baslik);font-weight:700;
  font-size:clamp(26px,8.5vw,44px);letter-spacing:.04em;
  color:var(--marka);line-height:1.05;margin:8px 0;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

.takip__saat{font-size:13.5px;color:var(--murekkep-2)}

/* Durum adımları (status.php → .adimlar > .adim). Noktaları BİRLEŞTİREN
   çizgi her adımın kendi ::after'ıyla çizilir: tek bir uzun çizgi, farklı
   sayıda adımda taşıyordu. */
/* `.takip` ortalanmış bir kutudur; adım etiketleri noktaların YANINDA
   başlamalı, ortada değil — bu yüzden hizalama burada geri alınır. */
.adimlar{display:flex;flex-direction:column;margin-top:16px;text-align:left}
.adim{
  position:relative;padding:0 0 18px 34px;
  font-size:15px;font-weight:600;color:var(--murekkep-3);
}
.adim:last-child{padding-bottom:0}
.adim::before{
  content:"";position:absolute;left:0;top:0;
  width:18px;height:18px;border-radius:50%;z-index:1;
  background:var(--yuzey);border:2px solid var(--cizgi-2);
}
.adim:not(:last-child)::after{
  content:"";position:absolute;left:8px;top:20px;bottom:2px;
  width:2px;background:var(--cizgi);
}
.adim.tamam{color:var(--murekkep-2)}
.adim.tamam::before{background:var(--yesil);border-color:var(--yesil)}
.adim.tamam:not(:last-child)::after{background:color-mix(in srgb,var(--yesil) 45%,var(--cizgi))}
.adim.etkin{color:var(--murekkep)}
.adim.etkin::before{
  background:var(--marka);border-color:var(--marka);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--marka) 18%,transparent);
}

/* Sipariş geçmişi (katlanır kutu içindeki <ol>). */
.zaman-cizelge{list-style:none;margin:0;padding:0}
.zaman-cizelge li{
  display:flex;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--cizgi);font-size:13.5px;
}
.zaman-cizelge li:last-child{border-bottom:0}
.zaman-cizelge time{
  flex:none;min-width:82px;color:var(--murekkep-3);
  font-size:12.5px;font-variant-numeric:tabular-nums;
}

/* Bu bileşen bir <a>'dır: `display:block` olmadan satır içi kalıyor ve
   kenarlığı satır satır parçalanarak çiziliyordu. */
.gecmis-kart{
  display:block;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:14px 16px;margin-bottom:11px;box-shadow:var(--golge-1);
  transition:border-color .15s,box-shadow .15s;
}
.gecmis-kart:hover{border-color:var(--cizgi-2);box-shadow:var(--golge-2)}
.gecmis-kart--acik{border-color:var(--marka);box-shadow:inset 0 0 0 1px var(--marka),var(--golge-1)}
.gecmis-kart__ust{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gecmis-kart__kod{
  font-family:var(--f-baslik);font-size:18px;font-weight:700;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.gecmis-kart__urunler{font-size:13px;color:var(--murekkep-2);margin-top:7px;line-height:1.5}
.gecmis-kart__alt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--cizgi);
  font-size:13px;color:var(--murekkep-3);
}

.yildizlar{display:inline-flex;gap:3px;color:var(--amber);font-size:19px;line-height:1}

/* ==========================================================================
   17. Bilgi kutuları ve boş durum
   ========================================================================== */
/* DİKKAT: burada `display:flex` KULLANILMAZ. Kutunun içinde cümlenin
   parçaları (<strong>, <b>, metin düğümleri) bulunur; flex her birini ayrı
   bir sütuna çevirip metni kutunun dışına taşırıyordu. */
.bilgi-kutu{
  padding:13px 15px;border-radius:var(--r-sm);
  background:var(--yuzey-2);border:1px solid var(--cizgi);
  font-size:13.5px;line-height:1.55;color:var(--murekkep-2);
}
.bilgi-kutu strong,.bilgi-kutu b{color:var(--murekkep);font-weight:700}
.bilgi-kutu>.qr-ikon{float:left;margin:2px 9px 0 0}
.bilgi-kutu--uyari{
  background:var(--amber-yumusak);color:var(--amber);
  border-color:color-mix(in srgb,var(--amber) 26%,transparent);
}
.bilgi-kutu--hata{
  background:var(--kirmizi-yumusak);color:var(--kirmizi);
  border-color:color-mix(in srgb,var(--kirmizi) 26%,transparent);
}
.bilgi-liste{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.7}
/* Aynı sınıf takip sayfasında <dl> olarak da kullanılır: orada iki sütunlu
   etiket/değer düzeni gerekir, madde imli liste değil. */
dl.bilgi-liste{
  display:grid;grid-template-columns:auto 1fr;gap:7px 16px;
  padding-left:0;margin:14px 0 0;font-size:13.5px;line-height:1.5;
}
dl.bilgi-liste dt{color:var(--murekkep-3);font-weight:600}
dl.bilgi-liste dd{margin:0;font-weight:600;color:var(--murekkep)}
dl.bilgi-liste dd small{display:block;font-weight:400;color:var(--murekkep-3);font-size:12px}

.bos-durum{
  text-align:center;padding:48px 22px;
  background:var(--yuzey);border:1px dashed var(--cizgi-2);border-radius:var(--r-lg);
  color:var(--murekkep-2);
}
.bos-durum .qr-ikon{color:var(--murekkep-3);margin-bottom:12px}
.bos-durum__baslik{
  font-family:var(--f-baslik);font-size:19px;font-weight:500;letter-spacing:.01em;
  color:var(--murekkep);margin:0 0 6px;
}

/* ==========================================================================
   18. Alt bilgi ve sabit sepet çubuğu
   ========================================================================== */
.qr-alt{
  margin-top:40px;padding:28px 0 calc(96px + env(safe-area-inset-bottom));
  background:var(--yuzey-2);border-top:1px solid var(--cizgi);
}
.qr-alt__baslik{
  font-family:var(--f-baslik);font-size:15px;font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;color:var(--murekkep-3);margin:0 0 10px;
}
.qr-alt__liste{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:7px}
.qr-alt__liste li{font-size:13.5px;color:var(--murekkep-2)}
.qr-alt__eylem{
  display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px;
}
.qr-alt__imza{
  font-size:12px;color:var(--murekkep-3);text-align:center;
  padding-top:18px;border-top:1px solid var(--cizgi);
}
@media (min-width:720px){
  .qr-alt>.kabuk{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .qr-alt__imza{grid-column:1/-1}
  .qr-alt{padding-bottom:34px}
}

/* Sepet çubuğu: sepette ürün varken ekranın altında sabit durur. */
.sepet-cubuk{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--kagit) 94%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--cizgi);
  transform:translateY(120%);transition:transform .24s ease-out;
}
/* JavaScript `.acik` sınıfını ekler (qr.js → sepetiYansit). */
.sepet-cubuk.acik{transform:none}
@media (prefers-reduced-motion:reduce){.sepet-cubuk{transition:none}}
.sepet-cubuk__ic{
  display:flex;align-items:center;gap:12px;
  max-width:var(--kabuk);margin:0 auto;
  min-height:54px;padding:0 18px;border-radius:var(--r-sm);
  background:var(--marka);color:#fff;font-weight:600;
  box-shadow:0 4px 14px color-mix(in srgb,var(--marka) 28%,transparent);
  transition:background-color .15s;
}
.sepet-cubuk__ic:hover{background:var(--marka-koyu)}
.sepet-cubuk__adet{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 7px;border-radius:var(--r-tam);
  background:rgba(255,255,255,.22);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.sepet-cubuk__bilgi{flex:1;font-size:15px}
.sepet-cubuk__tutar{
  font-family:var(--f-baslik);font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ==========================================================================
   19. Bildirim
   ========================================================================== */
.bildirim{
  position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));
  z-index:60;transform:translate(-50%,14px);
  max-width:min(440px,calc(100vw - 32px));
  display:flex;align-items:center;gap:9px;
  padding:13px 17px;border-radius:var(--r-sm);
  background:var(--murekkep);color:#fff;
  font-size:14px;font-weight:600;line-height:1.4;
  box-shadow:var(--golge-3);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.bildirim.gorunur{opacity:1;transform:translate(-50%,0)}
.bildirim--basari{background:var(--yesil)}
.bildirim--hata{background:var(--kirmizi)}
@media (prefers-reduced-motion:reduce){.bildirim{transition:opacity .2s}}

/* ==========================================================================
   20. Koyu tema
   --------------------------------------------------------------------------
   İkincil seçenektir; panelden `qr_menu_theme=dark` seçilince gövdeye
   `[data-tema="dark"]` eklenir. Yalnız BELİRTEÇLER yeniden tanımlanır — böylece bütün
   bileşenler tek yerden, tutarlı biçimde koyuya döner.
   ========================================================================== */
[data-tema="dark"]{
  --kagit:#16130F; --yuzey:#1F1B16; --yuzey-2:#272219; --yuzey-3:#332C22;
  --murekkep:#F6F1E8; --murekkep-2:#C9BFB0; --murekkep-3:#A2978A;
  --cizgi:#332C22; --cizgi-2:#443B2E;
  --marka:#E08A4C; --marka-koyu:#C8763C; --marka-acik:#F0A876; --marka-yumusak:#2C2117;
  --yesil:#4FBF7F; --yesil-yumusak:#16291E;
  --amber:#E0B054; --amber-yumusak:#2A2213;
  --kirmizi:#E4796A; --kirmizi-yumusak:#2B1917;
  --golge-1:0 1px 2px rgba(0,0,0,.4);
  --golge-2:0 4px 12px rgba(0,0,0,.45);
  --golge-3:0 12px 32px rgba(0,0,0,.55);
  color-scheme:dark;
}
/* Koyu temada beyaz zeminli görsellerin etrafı parlamasın. */
[data-tema="dark"] .qr-urun__gorsel,[data-tema="dark"] .marka__logo{filter:brightness(.96)}
[data-tema="dark"] .akis-bar__ana,[data-tema="dark"] .sepet-cubuk__ic,
[data-tema="dark"] .qr-urun__ekle,[data-tema="dark"] .qr-dugme--altin{color:#1A1510}
[data-tema="dark"] .bildirim{background:var(--yuzey-3);color:var(--murekkep)}

/* ==========================================================================
   21. Yazdırma
   ========================================================================== */
@media print{
  .qr-ust,.qr-alt,.akis-bar,.sepet-cubuk,.bildirim,.qr-kategori-serit,
  .qr-ara,.qr-urun__ekle,.sepet-duzenle,.sepet-sil,.qr-dugme{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .kart,.qr-urun,.takip{border:1px solid #ccc;box-shadow:none;break-inside:avoid}
  a{text-decoration:none;color:#000}
  .takip__kod{color:#000}
}