/* ALOYEMEK RESTORAN TASARIMI eklentisi (17 Eylul 2026)
   Bu dosya custom.css'ten TASINDI; eklenti kapaliysa YUKLENMEZ (CTasarim::stilHtml).*/
/* ====================================================================
   ALOYEMEK — RESTORAN SAYFASI MASAUSTU TASARIMI
   9 Eylul 2026
   --------------------------------------------------------------------
   TASARIM: TrendyolGo duzeni + Yemeksepeti sepeti, Aloyemek renginde.
   Onaylanan maket: claude.ai/code/artifact/4a8fb015-ce1c-4d15-81b7-2eecdede9ca3

   ⚠ MOBILE HIC DOKUNULMAZ.
   Butun kurallar @media (min-width:992px) icinde. Bu Bootstrap'in "lg"
   kirilim noktasi; sayfanin uc sutunu (kategori, urun, sepet) zaten
   "d-none d-lg-block" ile yalniz masaustunde gorunuyor. Yani bu dosya
   mobil gorunume erisemez bile.

   ⚠ HTML DEGISMEDI.
   Sayfa Vue ile ciziliyor; sablonlara dokunmak riskli. Bunun yerine
   sitenin KENDI sinif adlari hedeflenerek yalnizca gorunum degistirildi.
   Bu yuzden yazilim guncellemesi HTML'i degistirmedigi surece tasarim
   ayakta kalir.

   ⚠ NEDEN custom.css
   Bu dosya AssetsFrontBundle.php:143'te zaten yukleniyor ve BOSTU.
   Boylece tasarim icin tek bir cekirdek dosyaya bile dokunulmadi.
   ==================================================================== */

/* 11 Eylul 2026: Hakkinda penceresi Uber Eats duzeninde; Uber Move lisansli
   oldugu icin en yakin acik yazi tipi Inter. YALNIZ .alo-pencere-ic'te
   kullaniliyor; pencere gizliyken tarayici yazi tipi dosyasini indirmez.
   @import dosyanin EN BASINDA olmak zorunda (yorumlardan sonra). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

@media (min-width: 992px) {

  /* ---------- renk degiskenleri ---------- */
  /* ------------------------------------------------------------------
     PALET — 10 Eylul 2026, kullanicinin tasarim brief'indeki degerler.
     Onceki degerler yaklasikti; brief'te yazan TAM degerlere cekildi.
       marka        #FE6204 -> #FF6000
       acik turuncu #FFF1E8 -> #FFF1EA
       sayfa zemini #F6F7F9 -> #FAFAFA   (mavimsi degil, NOTR gri)
       ana yazi     #191919 -> #222222   (daha yumusak, mat his)
       ikincil yazi #767676 -> #6B6B6B
       yeni: --alo-bg-3 #F7F7F7  ("acik alanlar")
     ------------------------------------------------------------------ */
  :root{
    --alo-bg:       #FFFFFF;
    --alo-bg-2:     #FAFAFA;
    --alo-bg-3:     #F7F7F7;
    --alo-ink:      #222222;
    --alo-ink-2:    #4A4A4A;
    --alo-muted:    #6B6B6B;
    --alo-line:     #EDEDED;
    --alo-line-2:   #E0E0E0;
    --alo-brand:    #FF6000;
    --alo-brand-dk: #D64E00;
    --alo-brand-bg: #FFF1EA;
    --alo-plus:#6F42C1;
    --alo-plus-bg:#F1EBFB;
    --alo-green:    #0E8A5F;
    --alo-green-bg: #E6F5EF;
  }

  /* ==================================================================
     1) RESTORAN BASLIGI  (maket duzeni)
     Markup: merchant-top-header.php icindeki .alo-rest blogu.
     Gorsel SOLDA sabit 196px, icerik SAGDA esner.
     ================================================================== */

  #vue-merchant-details .merchant-top-header{
    background: var(--alo-bg);
    border-bottom: 1px solid var(--alo-line);
    padding-bottom: 8px;
  }

  /* kirinti yolu */
  #vue-merchant-details .el-breadcrumb{ font-size: 12.5px; }
  #vue-merchant-details .el-breadcrumb__inner a{
    color: var(--alo-muted) !important; font-weight: 500;
  }
  #vue-merchant-details .el-breadcrumb__inner a:hover{ color: var(--alo-brand-dk) !important; }

  /* --- iki sutunlu yerlesim --- */
  #vue-merchant-details .alo-rest{
    display: grid;
    grid-template-columns: 200px minmax(0,1fr);
    gap: 30px;
    align-items: start;
    padding-bottom: 6px;
  }
  #vue-merchant-details .alo-rest-gorsel .el-image{
    width: 196px; height: 196px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--alo-bg-2);
    border: 1px solid var(--alo-line);
  }
  #vue-merchant-details .alo-rest-govde{
    position: relative;
    min-width: 0;
  }

  /* favori dugmesi sag ust */
  #vue-merchant-details .alo-rest-fav{
    position: absolute; top: 0; right: 0; z-index: 5;
  }

  /* restoran adi */
  #vue-merchant-details .alo-rest-ad{
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.18;
    margin: 0;
    color: var(--alo-ink);
    /* 20 Eylul 2026: 60px sag bosluk rozeti isimden uzaga atiyordu
       (kullanici: "cok uzaga koydu, restoran isminin hemen yaninda olacak").
       Bosluk artik sarmalayicida (.alo-rest-baslik padding-right). */
    padding-right: 0;
  }

  /* mutfak · mesafe satiri */
  /* --- ROZET IKONU RESTORAN ADININ BASINDA (10 Eylul 2026) ---
     Rozet eklentisinin "kucuk" ciktisi kullaniliyor; metni gizlenip
     yalnizca ikon birakiliyor (TrendyolGo'daki "Semtin Yildizi" gibi).
     Eklenti dosyasina dokunulmadi, tiklama/pencere aynen calisiyor. */
  /* Baslik esnek kutu: ikon ile ad arasindaki bosluk YALNIZCA gap
     ile belirlenir. Onceden hem margin hem de PHP'deki satir sonundan
     gelen bosluk kutucugu vardi, arada fazladan aralik olusuyordu. */
  /* 20 Eylul 2026 (SEO): esnek satir h1'den sarmalayiciya tasindi; h1 yalniz ad. */
  /* 20 Eylul 2026 (kullanici: "canlida rozet ve restoran ismi cok ayri ve dengesiz
     duruyor"): rozet 26px'ti, 30px basligin yaninda kucuk ve yukari kacik
     duruyordu; kutusunda 3px fazla dolgu vardi. Rozet buyudu, dolgu sifirlandi,
     aralik 10px. */
  /* 20 Eylul 2026 (kullanici: "rozet tam oturmamis, biraz kaba; rozeti sag tarafa
     alman lazim"): rozet artik adin SAGINDA ve daha kucuk. */
  #vue-merchant-details .alo-rest-baslik{
    display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding-right: 60px;
  }
  #vue-merchant-details .alo-rest-baslik .alo-rest-ad{ order: 1; }
  #vue-merchant-details .alo-rest-baslik .alo-ad-rozet{ order: 2; }
  #vue-merchant-details .alo-ad-rozet{
    display: inline-flex; margin-right: 0; flex: none;
  }
  #vue-merchant-details .alo-ad-rozet .rzon-etiket{
    padding: 0 !important; background: transparent !important;
    border: 0 !important; box-shadow: none !important; gap: 0 !important;
  }
  #vue-merchant-details .alo-ad-rozet .rzon-etiket:hover{
    filter: none; transform: scale(1.06);
  }
  #vue-merchant-details .alo-ad-rozet .rzon-etiket span{ display: none !important; }
  #vue-merchant-details .alo-ad-rozet .rzon-etiket img{
    width: 22px !important; height: 22px !important; display: block;   /* 20 Eyl: bir tik daha kucuk */
  }
  #vue-merchant-details .alo-ad-rozet,
  #vue-merchant-details .alo-ad-rozet .rzon-etiket{ margin: 0 !important; line-height: 0; }

  #vue-merchant-details .alo-rest-alt{
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    font-size: 13.5px; color: var(--alo-muted);
    margin-bottom: 18px;
  }
  #vue-merchant-details .alo-ayir{ opacity: .5; }

  /* --- BASLIK GORSELI (11 Eylul 2026) ---
     Panelde yuklenen "Header" gorseli (onerilen 1400x600). Sitenin eski
     basliginda sag yarida (col-6 right-infox) duruyordu; yeni duzende
     yeri kalmamisti. Sitenin kendi headerCSS'i (MenuController) gorseli
     .top-merchant-details / .right-info'ya ARKA PLAN veriyor: birincisi
     yalniz mobilde, ikincisi yeni basliktta yok -> masaustunde gorunmuyordu.
     Ad/mutfak/rozetler solda esner; gorsel sagda 420x180 (2,33 oran);
     bilgi seridi altta tam genislik. Kalp gorselin kosesinde. */
  #vue-merchant-details .alo-rest-ust{ display: flex; align-items: flex-start; gap: 24px; }
  #vue-merchant-details .alo-rest-ust-sol{ flex: 1 1 0%; min-width: 0; }
  #vue-merchant-details .alo-rest-banner{
    flex: 0 0 420px; width: 420px; height: 180px; margin-bottom: 18px;
    border-radius: 14px; overflow: hidden;
    background: var(--alo-bg-2); border: 1px solid var(--alo-line);
  }
  #vue-merchant-details .alo-rest-banner img{
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* gorsel varken kalp gorselin ustunde; ad satirinin sagindaki kalp boslugu gereksiz */
  #vue-merchant-details .alo-rest-govde:has(.alo-rest-banner) .alo-rest-fav{ top: 10px; right: 10px; }
  #vue-merchant-details .alo-rest-ust:has(.alo-rest-banner) .alo-rest-baslik{ padding-right: 0; }

  /* rozet satiri: puan hapi + eklenti rozetleri + birlikte dugmesi */
  #vue-merchant-details .alo-rest-rozetler{
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 22px;
  }
  #vue-merchant-details .alo-hap{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 12px;
    font-size: 13.5px; font-weight: 700;
    text-decoration: none;
  }
  /* puan hapi — dolu yesil (TrendyolGo deseni) */
  #vue-merchant-details .alo-hap-puan{
    background: var(--alo-green);
    color: #fff !important;
  }
  #vue-merchant-details .alo-hap-puan b{
    font-weight: 800; font-variant-numeric: tabular-nums;
  }
  #vue-merchant-details .alo-hap-puan span{ font-weight: 600; opacity: .9; }
  #vue-merchant-details .alo-hap-puan .zmdi-star{ color: #fff; }

  /* eklenti rozetleri ayni satirda hizali dursun */
  #vue-merchant-details .alo-rest-rozetler .rzon-etiket,
  #vue-merchant-details .alo-rest-rozetler .plson-etiket{
    margin: 0 !important;
    vertical-align: middle;
  }

  /* --- ETIKETLI BILGI SERIDI --- */
  #vue-merchant-details .alo-serit{
    display: flex; align-items: stretch; flex-wrap: wrap;
    border-top: 1px solid var(--alo-line);
    border-bottom: 1px solid var(--alo-line);
    padding: 18px 0 16px;
    gap: 0;
    /* 20 Eylul 2026: servis sekmeleri satira sigmayip alta gecince (4 sekmeli
       kurulumlar, uzun saat metni, ya da adres girilince sekmenin altina eklenen
       sure satiri) ust satira yapisiyordu. Alta gecen satira bosluk. */
    row-gap: 16px;
  }
  #vue-merchant-details .alo-serit-h{
    /* 20 Eylul 2026: ayrac boslugu 32+32 -> 22+22. Kutularin kendi genisligi
       kurulumdan kurulma degisiyor (alo'da saat "11:20 ÖÖ – 11:20 ÖÖ" bicimiyle
       canlidan ~90px genis); eski bosluklarla servis sekmeleri satira sigmayip
       alt satira dusuyordu. Yeni degerle iki kurulumda da sekmeler kutularin
       SONUNDA, ayni satirda. */
    padding-right: 22px; margin-right: 22px;
    border-right: 1px solid var(--alo-line);
    min-width: 0;
  }
  /* 20 Eylul 2026: sekmeler artik ayni satirda devam ettigi icin ondan onceki
     kutunun ayrac cizgisi DURUYOR; yalniz gercek son kutuda kalkar. */
  #vue-merchant-details .alo-serit-h:last-child{
    border-right: 0; margin-right: 0; padding-right: 0;
  }
  #vue-merchant-details .alo-et{
    display: block;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--alo-muted); margin-bottom: 6px; white-space: nowrap;
  }
  #vue-merchant-details .alo-dg{
    font-size: 15px; font-weight: 700;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    color: var(--alo-ink); white-space: nowrap;
  }
  #vue-merchant-details .alo-kapali{
    color: var(--alo-muted); font-weight: 600;
  }
  /* teslimat bileseni seride otursun */
  /* Teslimat turu sekmeleri (Delivery / Pickup / Dinein / Takeout)
     bilgi kutulariyla AYNI SATIRA sigmiyor, alt satira sarkiyordu ve
     serit sikisik gorunuyordu. Kendi satirina alinip ustune ince bir
     ayrac konuldu. */
  /* 20 Eylul 2026 (kullanici: "bu butonlar... guzel bir yere mi koysak, boyutlari mi
     kucuk"): Teslimat / Restoran / Gel Al sekmeleri kendi satirindaydi, blogu
     uzatiyordu. Artik bilgi seridinin SAG UCUNDA, ayni satirda ve daha kompakt. */
  #vue-merchant-details .alo-serit-servis{
    flex: 0 0 auto;
    border-right: 0 !important;
    /* 20 Eylul 2026: saga yaslamak (margin-left:auto) sekmeler alt satira
       gectiginde onlari sagda tek basina asili birakiyordu. Artik son bilgi
       kutusunun hemen ardindan geliyor; sigmazsa alt satirda SOLDAN baslar. */
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0;
    display: flex; align-items: center;
  }
  #vue-merchant-details .alo-serit-servis .btn-group-toggle{
    background: var(--alo-bg-2); border-radius: 999px; padding: 3px;
  }
  #vue-merchant-details .alo-serit-servis .btn-group-toggle .btn,
  #vue-merchant-details .alo-serit-servis .btn-group-toggle label{
    min-height: 34px; padding: 4px 16px !important;
    font-size: 13px; font-weight: 600; display: inline-flex; align-items: center;
    justify-content: center; text-align: center; line-height: 1.25;
    border-radius: 999px;
  }
  /* Adres girilince etkin sekmenin altina tahmini sure ekleniyor (iki satir olur).
     Yukseklik sabitlenmemeli; sekme grubu kendi icinde de sarabilsin. */
  #vue-merchant-details .alo-serit-servis .btn-group-toggle{
    flex-wrap: wrap; max-width: 100%;
    /* Adres girilince ETKIN sekmenin altina tahmini sure ekleniyor; diger
       sekmeler kisa kalmasin diye hepsi en uzun sekme kadar. */
    align-items: stretch;
  }
  #vue-merchant-details .alo-serit-servis{ align-items: center; }
  #vue-merchant-details .alo-serit-servis ul{
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 0; list-style: none;
  }
  #vue-merchant-details .alo-serit-servis li{
    font-size: 14px; font-weight: 600; color: var(--alo-ink);
  }

  /* 20 Eylul 2026: "APLUS'a ucretsiz" rozeti artik ucretin ALTINDA, kendi satirinda */
  /* 20 Eylul 2026: "APLUS'a ucretsiz" ad altindaki bilgi satirinin sonunda */
  #vue-merchant-details .alo-alt-plus{
    display: inline-flex; align-items: center;
  }

  /* promosyon bileseni serit altinda */
  #vue-merchant-details component-promo-details,
  #vue-merchant-details .promo-details{
    display: block; margin-top: 14px;
  }

  /* Sitenin kendi "Enjoy discounts on items — See details" satiri
     asagidaki kart seridiyle AYNI veriyi gosteriyor; masaustunde
     tekrar olmasin diye gizlendi. Mobilde AYNEN duruyor. */
  #vue-merchant-details .alo-eski-promo{ display: none !important; }

  /* --- KAMPANYA KARTLARI (10 Eylul 2026) — maketteki serit --- */
  #vue-merchant-details .alo-kampanya{
    margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--alo-line);
  }
  #vue-merchant-details .alo-kampanya h2{
    font-size: 18px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.025em;
    color: var(--alo-ink);
  }
  /* 13 Eylul 2026: tek satir, soldan saga kayan serit + oklar.
     Ayni anda 4 kart gorunur; fazlasi kaydirilir. Ust bosluk (padding-top)
     kartin ustundeki % rozeti tasma kirpmasina ugramasin diye. */
  #vue-merchant-details .alo-kampanya-kaydir{ position: relative; }
  #vue-merchant-details .alo-kampanya-liste{
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 42px) / 4);
    gap: 14px; overflow-x: auto; overflow-y: hidden;
    padding: 14px 0 4px; margin-top: -14px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #vue-merchant-details .alo-kampanya-liste::-webkit-scrollbar{ height: 0; display: none; }
  #vue-merchant-details .alo-kampanya-kart{ scroll-snap-align: start; }
  #vue-merchant-details .alo-kampanya-ok{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; padding: 0;
    border: 1px solid var(--alo-line); background: var(--alo-bg);
    color: var(--alo-ink); cursor: pointer; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
    transition: background .12s ease, border-color .12s ease;
  }
  #vue-merchant-details .alo-kampanya-ok[hidden]{ display: none; }
  #vue-merchant-details .alo-kampanya-ok:hover{ background: var(--alo-bg-2); border-color: var(--alo-line-2); }
  #vue-merchant-details .alo-kampanya-ok-sol{ left: -22px; }
  #vue-merchant-details .alo-kampanya-ok-sag{ right: -22px; }
  #vue-merchant-details .alo-kampanya-kart{
    background: var(--alo-bg-3); border: 1px solid var(--alo-line); border-radius: 14px;
    padding: 22px 14px 14px; text-align: center; position: relative;
  }
  #vue-merchant-details .alo-kampanya-ikon{
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--alo-brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
  }
  #vue-merchant-details .alo-kampanya-bas{
    font-size: 13.5px; font-weight: 700; line-height: 1.35; margin-bottom: 4px;
    color: var(--alo-ink);
  }
  #vue-merchant-details .alo-kampanya-det{
    font-size: 12px; color: var(--alo-muted); line-height: 1.4;
  }

  /* ==================================================================
     2) MENU ALANI — gri zemin
     ================================================================== */

  .section-menu{
    background: var(--alo-bg-2);
    padding-top: 22px;
    padding-bottom: 26px;
  }

  /* --- MENU USTU SATIRI: HARCAMA CUBUGU + ARAMA (10 Eylul 2026) ---
     Makette solda ilerleme, sagda arama. Kampanya yoksa yalnizca
     arama basilir ve tam genislik kalir. */
  /* ⚠ SATIR UC SUTUNUN DA USTUNDE, TAM GENISLIK.
     Makette harcama+arama satiri kategori sutununun solundan sepet
     sutununun sagina kadar uzaniyor. Markup ise orta sutunun
     (#vue-merchant-menu) ICINDE -- disari alinamaz, cunku arama
     bileseni o Vue kokune bagli (@after-search olayini o kok dinliyor).
     Cozum: negatif kenar bosluklariyla satiri iki yana tasirmak.
       sol  = -(kategori sutunu)          = -(2/7)*W - 60/7
       sag  = -(sepet sutunu + 15px pad)  = -(3/7)*W - 90/7 - 15
     W = orta sutunun ic genisligi. Yuzdeler kapsayici kutuya gore
     coozuldugu icin kapsayici daraldiginda da hizalama korunur.
     Olculdu (1140px satir): sol -190px, sag -300px -> 165..1290 = satirin tami. */
  #vue-merchant-menu .alo-menu-ust{
    /* 11 Eyl: kategori sutunu 340 -> 260px (kullanici "cok buyuk, kisalt") */
    margin-left: -275px;   /* kategori sutunu (260) + orta sutunun 15px sol ic boslugu */
    margin-right: -355px;  /* sepet sutunu  (340) + orta sutunun 15px sag ic boslugu */
    margin-bottom: 20px !important;
  }
  /* Ilk sutun KATEGORI SUTUNUYLA ayni genislikte (340px), bosluk da
     sutunlar arasi bosluk kadar (15px). Boylece harcama cubugu tam
     kategori kartinin ustune, arama kutusu da tam urun sutununun
     ustune oturur. */
  #vue-merchant-menu .alo-menu-ust.alo-menu-ust-2{
    display: grid; grid-template-columns: 260px minmax(0,1fr);   /* 11 Eyl: 340 -> 260 */
    gap: 15px; align-items: center;
  }
  /* 20 Eylul 2026: HARCAMA CUBUGU YOKKEN (canlida cogu restoranda boyle) satirda
     yalniz arama kutusu kalir. Sol cekme (-275px) o zaman kutuyu kategori sutununun
     da ustune tasiyip kaymis gosteriyordu; tek basinayken tam urun sutununa otursun. */
  #vue-merchant-menu .alo-menu-ust:not(.alo-menu-ust-2){ margin-left: 0; }
  /* Satir tam genislik oldugu icin YAN SUTUNLAR asagi itilir.
     Orta sutun zaten satirin kendisini iceriyor, ek bosluk almaz. */
  /* .menu-right sinifinda "p-0" var (padding:0 !important) --
     bu yuzden burada da !important sart, yoksa sepet yukari kayip
     arama kutusunun ustune biniyor. */
  #vue-merchant-category{ padding-top: 72px; }
  .menu-right{ padding-top: 72px !important; }
  #vue-merchant-menu .alo-ilerleme{
    display: flex; align-items: center; gap: 12px;
  }
  #vue-merchant-menu .alo-ilerleme-ikon{
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    background: var(--alo-brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 800;
  }
  #vue-merchant-menu .alo-ilerleme-govde{ min-width: 0; flex: 1 1 auto; }
  #vue-merchant-menu .alo-ilerleme-metin{
    font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--alo-ink);
  }
  #vue-merchant-menu .alo-ilerleme-cubuk{
    height: 3px; background: var(--alo-line-2); border-radius: 2px;
    margin-top: 7px; overflow: hidden;
  }
  #vue-merchant-menu .alo-ilerleme-cubuk i{
    display: block; height: 100%; width: 0;
    background: var(--alo-brand); transition: width .25s ease;
  }
  #vue-merchant-menu .alo-ilerleme.tamamlandi .alo-ilerleme-ikon,
  #vue-merchant-menu .alo-ilerleme.tamamlandi .alo-ilerleme-cubuk i{
    background: var(--alo-green);
  }

  /* --- MENU ARAMA KUTUSU (10 Eylul 2026) ---
     Sitenin kutusu Element Plus el-input. Kenarligi border ile degil
     BOX-SHADOW ile ciziyor; bu yuzden once golgeyi kapatmak gerekiyor,
     yoksa kendi cercevemiz gorunmez. */
  #vue-merchant-menu .el-input__wrapper{
    background: var(--alo-bg) !important;
    border: 1px solid var(--alo-line-2) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    padding: 4px 18px !important;
    min-height: 52px;
    transition: border-color .12s ease;
  }
  #vue-merchant-menu .el-input__wrapper.is-focus,
  #vue-merchant-menu .el-input__wrapper:hover{
    border-color: var(--alo-brand) !important;
    box-shadow: none !important;
  }
  #vue-merchant-menu .el-input__inner{
    font-size: 14px; color: var(--alo-ink);
  }
  #vue-merchant-menu .el-input__inner::placeholder{ color: var(--alo-muted); }
  #vue-merchant-menu .el-input__prefix,
  #vue-merchant-menu .el-input__suffix{ color: var(--alo-muted); }
  /* arama kutusunun altindaki bosluk maketteki gibi */
  #vue-merchant-menu .el-input__prefix .zmdi,
  #vue-merchant-menu .el-input__prefix i{ font-size: 17px; }

  /* --- ICERIK ALANI GENISLETILDI (10 Eylul 2026) ---
     Bootstrap .container masaustunde 1140px. Maketteki cerceve
     1340px, ic genislik 1292px. Dar kalinca kategori rayi ile sepet
     ortaya dogru siginiyor, orta sutun daraliyordu.
     Restoran sayfasindaki konteynerler 1292'ye cikarildi; boylece
     kategori SOLA, sepet SAGA aciliyor ve ORTA SUTUN her iki yandan
     buyuyor (604 -> 756px).
     ⚠ Yalnizca bu sayfanin konteynerleri; footer/sub-footer site
     genelinde oldugu icin DOKUNULMADI. */
  .merchant-top-header > .container,
  .section-menu > .container,
  .page-content > .container,
  .page-content > .container-fluid > .container{
    max-width: 1292px;
  }

  /* --- SUTUN GENISLIKLERI (maketteki olculer, 10 Eylul 2026) ---
     Bootstrap varsayilani: 190 / 665 / 285 (2-7-3 sutun).
     Makette: kategori 236, sepet 300. Genislikler SABIT piksele
     alindi; boylece hem maketle ayni durur hem de ustteki tam
     genislik arama satirinin negatif kenar hesabi TAM SAYI olur. */
  /* ⚠ SOL IC BOSLUK SIFIRLANIR.
     Bootstrap sutunu 15px sol ic bosluk veriyordu; sepet sutununda ise
     "p-0" oldugu icin o bosluk yok. Sonuc: kategori karti soldan 15px
     iceride basliyor, sepet karti sagda tam kenara oturuyordu -- sayfa
     15px kacik gorunuyordu (sol kenar 89, sag kenar 74).
     Sifirlaninca ikisi de kendi sutununun tam kenarina oturur ve
     sayfanin iki yani esitlenir. */
  /* 11 Eyl 2026: kategori sutunu 340 -> 260px (kullanici "sol kategori menu
     biraz kisalt, cok buyuk olmus"; TrendyolGo'da ~265px). */
  .section-menu > .container > .row > #vue-merchant-category{
    flex: 0 0 260px !important; max-width: 260px !important; width: 260px;
    padding-left: 0 !important;
  }
  .section-menu > .container > .row > .menu-right{
    flex: 0 0 340px !important; max-width: 340px !important; width: 340px;
  }
  /* TOP duzeninde (Food category position = Top) orta sutun
     #vue-merchant-menu DEGIL, onu saran .menu-center (col-lg-9).
     Sabit 340px'lik sepetle 75%'lik sutun toplami satiri asiyor ve
     SEPET ALT SATIRA DUSUYORDU (olculdu: menu-right x=74, satir sarmis).
     Left duzeninde de #vue-merchant-menu zaten .menu-center sinifini
     tasidigi icin bu kural iki duzende de dogru calisir. */
  .section-menu > .container > .row > .menu-center{
    flex: 1 1 0% !important; max-width: none !important;
    width: auto; min-width: 0;
  }

  /* ⚠ taban SIFIR olmali. "flex:1 1 auto" verilirse taban genislik
     icerik kadar olur; ustteki tam genislik arama satiri (negatif
     kenarlarla 1125px) sutunu sisirip satiri SARDIRIR ve uc sutun
     alt alta duser. (Bu hata yasandi.) */
  .section-menu > .container > .row > #vue-merchant-menu{
    flex: 1 1 0% !important; max-width: none !important;
    width: auto; min-width: 0;
  }

  /* --- YAN SUTUNLAR SABIT KALIR (10 Eylul 2026) ---
     Sayfa asagi kayarken kategori rayi ve sepet ekranda kalir,
     yalnizca ORTA sutun (urunler) akar.

     ⚠ BUNU BIZ YAZMADIK, SITE ZATEN YAPIYOR.
       front.js:193-197  ->  new StickySidebar('.sticky-sidebar', {topSpacing:20})
                             new StickySidebar('.sticky-cart',   {topSpacing:20})
       Eklenti panelin icini ".inner-wrapper-sticky" ile sarip ona
       SATIR ICI position:fixed veriyor; dis kutuya da yer tutucu
       olarak height + position:relative yaziyor.
       Bu yuzden dis kutuya position:sticky yazmak ISE YARAMAZ --
       eklentinin satir ici stili kazanir. (Denendi, calismadi.)

     GEREKEN TEK SEY GENISLIK DUZELTMESI:
       Eklenti genisligi kendi olcup satir ici yaziyor ve bizim
       sabitledigimiz sutun genisliklerini ISKALIYOR.
       Olculdu: kategori sutunu ici 221px iken panel 202px,
                sepet sutunu 300px iken panel 266px kaliyordu.
       Satir ici stili ancak !important ile ezilebilir. */
  #vue-merchant-category .inner-wrapper-sticky{ width: 260px !important; }   /* 11 Eyl: 340 -> 260 */
  .menu-right .inner-wrapper-sticky{ width: 340px !important; }

  /* Panel ekrandan uzunsa KENDI ICINDE kaysin, alti kesilmesin. */
  #vue-merchant-category .inner-wrapper-sticky,
  .menu-right .inner-wrapper-sticky{
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #vue-merchant-category .inner-wrapper-sticky::-webkit-scrollbar,
  .menu-right .inner-wrapper-sticky::-webkit-scrollbar{ width: 6px; }
  #vue-merchant-category .inner-wrapper-sticky::-webkit-scrollbar-thumb,
  .menu-right .inner-wrapper-sticky::-webkit-scrollbar-thumb{
    background: var(--alo-line-2); border-radius: 3px;
  }

  /* ==================================================================
     3) KATEGORI RAYI (sol sutun)
     ================================================================== */

  /* ⚠ KART GORUNUMU IC SARMALAYICIYA VERILIR, DIS KUTUYA DEGIL.
     StickySidebar eklentisi sayfa kayinca panelin ICINI
     (.inner-wrapper-sticky) position:fixed yapip yukarida tutuyor;
     dis kutu ise yerinde duran BOS bir yer tutucuya donusuyor.
     Zemin/cerceve dis kutuda kalirsa, asagi inildiginde panel
     SAYDAM gorunur (kullanici: "arka plan rengi gidiyor").
     Bu yuzden zemin, cerceve, kose ve ic bosluk ic sarmalayicida. */
  #vue-merchant-category .sticky-sidebar > .inner-wrapper-sticky,
  #vue-merchant-category .sticky-sidebar:not(:has(.inner-wrapper-sticky)){
    background: var(--alo-bg);
    border: 1px solid var(--alo-line);
    border-radius: 14px;
    padding: 10px;
  }
  #vue-merchant-category .sticky-sidebar h5{
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 10px 12px 10px;
    color: var(--alo-ink);
  }
  #vue-merchant-category ul.menu-category{
    max-height: 420px;
    overflow-y: auto;
    margin: 0;
  }
  #vue-merchant-category ul.menu-category li a.nav-link{
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--alo-ink-2);
    border-left: 3px solid transparent;
    border-radius: 0 7px 7px 0;
    transition: background .12s ease, color .12s ease;
  }
  #vue-merchant-category ul.menu-category li a.nav-link small{
    color: var(--alo-muted); font-size: 12px; font-variant-numeric: tabular-nums; flex: none;
  }
  #vue-merchant-category ul.menu-category li a.nav-link:hover{
    background: var(--alo-bg-2);
    color: var(--alo-ink);
  }
  /* aktif kategori — turuncu kenar + acik zemin */
  #vue-merchant-category ul.menu-category li a.nav-link.active,
  #vue-merchant-category ul.menu-category li.active a.nav-link{
    background: var(--alo-brand-bg);
    color: var(--alo-brand-dk);
    font-weight: 700;
    border-left-color: var(--alo-brand);
  }

  /* ==================================================================
     3B) YATAY KATEGORI SERIDI  (Food category position = Top)
     Panelden "Top" secilince site menu_categorytop.php'yi cizer:
     kategoriler owl-carousel ile YATAY serit, solunda arama kutusu.
     Brief md.6 tam bunu istiyor: aktif kategorinin altinda ince
     turuncu cizgi. Site markup'ina DOKUNULMADI, yalnizca bicimlendi.
     (Left duzeninde bu seciciler HIC eslesmez, zararsizdir.)
     ================================================================== */
  .category-owlcarousel{
    background: var(--alo-bg) !important;
    border: 1px solid var(--alo-line);
    border-radius: 14px;
    padding: 8px 14px !important;
    margin-bottom: 20px !important;
  }
  .category-owlcarousel #menu-category a.nav-link{
    position: relative;
    padding: 12px 2px !important;
    margin-right: 26px !important;
    font-size: 14.5px; font-weight: 600;
    color: var(--alo-muted) !important;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .12s ease, border-color .12s ease;
  }
  .category-owlcarousel #menu-category a.nav-link:hover{
    color: var(--alo-ink) !important;
  }
  /* aktif kategori — brief: ince turuncu cizgi */
  .category-owlcarousel #menu-category a.nav-link.active{
    color: var(--alo-ink) !important;
    font-weight: 700;
    border-bottom-color: var(--alo-brand);
    border-bottom-width: 3px;
  }
  /* kategori adinin yanindaki urun sayisi (front.js sablonundan) */
  .category-owlcarousel #menu-category a.nav-link .alo-kat-adet{
    margin-left: 6px; font-size: 12.5px; font-weight: 500;
    color: var(--alo-muted); font-variant-numeric: tabular-nums;
  }
  .category-owlcarousel #menu-category a.nav-link .alo-kat-adet::before{ content: "("; }
  .category-owlcarousel #menu-category a.nav-link .alo-kat-adet::after{ content: ")"; }
  .category-owlcarousel #menu-category a.nav-link.active .alo-kat-adet{ color: var(--alo-ink-2); }

  /* Serit oklari — Yemeksepeti'ndeki gibi yuvarlak, seridin iki ucunda */
  .category-owlcarousel{ position: relative; }
  .category-owlcarousel .owl-nav{ margin: 0; }
  .category-owlcarousel .owl-nav button.owl-prev,
  .category-owlcarousel .owl-nav button.owl-next{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50% !important;
    background: var(--alo-bg) !important;
    border: 1px solid var(--alo-line) !important;
    color: var(--alo-ink) !important;
    font-size: 18px !important; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    margin: 0 !important;
  }
  .category-owlcarousel .owl-nav button.owl-prev{ left: -12px; }
  .category-owlcarousel .owl-nav button.owl-next{ right: -12px; }
  .category-owlcarousel .owl-nav button:hover{ background: var(--alo-bg-3) !important; }
  .category-owlcarousel .owl-nav button.disabled{ display: none !important; }

  /* Serit sayfa kayarken uste yapisiyor (el-affix). Yapisik haldeyken
     alta ince ayrac ve hafif golge -- iceriginle karismasin. */
  .el-affix--fixed .category-owlcarousel{
    border-radius: 0 !important;
    border-left: 0; border-right: 0; border-top: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
  }
  /* seridin solundaki arama kutusu bizim kutu bicimimizle ayni olsun */
  .category-owlcarousel .el-input__wrapper{
    background: var(--alo-bg) !important;
    border: 1px solid var(--alo-line-2) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 4px 14px !important;
    min-height: 44px;
  }
  .category-owlcarousel .el-input__wrapper.is-focus,
  .category-owlcarousel .el-input__wrapper:hover{
    border-color: var(--alo-brand) !important; box-shadow: none !important;
  }
  /* Top duzeninde bos birakilan sticky kutusu gorunmesin */
  .menu-center > #sticky-sidebar:empty{ display: none !important; }

  /* --- URUN KARTLARI IKI SUTUN — LEFT VE TOP (10 + 11 Eylul 2026) ---
     Ornek (yemeksepeti / TrendyolGo): urunler iki sutunlu izgarada.
     10 Eyl: yalniz Top'a uygulanmisti; Left'te sag sepet sutunu yuzunden
     orta sutun dardi. 11 Eyl: sepet sutunu kalkti, Left'te de orta sutun
     ~952px -> kullanici: "left'te menuler yan yana 2 kolon olsun, top da ayni".

     IKI SECICI (ayni kural):
        Top  : .menu-center #vue-merchant-menu   (ic ice iki dugum)
        Left : #vue-merchant-menu.menu-center   (ayni dugum, iki sinif)
     :has(> .list-item-rows) -> YALNIZ kart iceren bolumler. Panelde
     "Two column" secilirse o sablonun kendi .row izgarasi BOZULMAZ
     (eskiden her section'a grid veriliyordu).
     Bolum basligi ve aciklamasi iki sutunu birden kaplar. */
  .menu-center #vue-merchant-menu section:has(> .list-item-rows),
  #vue-merchant-menu.menu-center section:has(> .list-item-rows){
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    align-items: start;
    margin-bottom: 26px;
  }
  .menu-center #vue-merchant-menu section:has(> .list-item-rows) > h5,
  .menu-center #vue-merchant-menu section:has(> .list-item-rows) > p,
  #vue-merchant-menu.menu-center section:has(> .list-item-rows) > h5,
  #vue-merchant-menu.menu-center section:has(> .list-item-rows) > p{
    grid-column: 1 / -1;
  }
  .menu-center #vue-merchant-menu section > .list-item-rows,
  #vue-merchant-menu.menu-center section > .list-item-rows{
    margin-bottom: 0 !important;
    height: 100%;
  }
  /* Iki sutunda kart daraldigi icin gorsel biraz kuculur ve
     dugme fiyatin altina iner. */
  .menu-center #vue-merchant-menu .list-item-rows > .row > .col-3,
  #vue-merchant-menu.menu-center .list-item-rows > .row > .col-3{
    flex: 0 0 96px; max-width: 96px;
  }
  .menu-center #vue-merchant-menu .item-image-preview .el-image,
  .menu-center #vue-merchant-menu .item-image-preview img,
  #vue-merchant-menu.menu-center .item-image-preview .el-image,
  #vue-merchant-menu.menu-center .item-image-preview img{
    width: 96px !important; height: 96px !important;
  }
  .menu-center #vue-merchant-menu .list-item-rows .col-lg-4,
  #vue-merchant-menu.menu-center .list-item-rows .col-lg-4{
    padding-right: 8px !important;   /* 20 Eyl: gorsel sola alindi */
  }

  /* ==================================================================
     4) URUN KARTLARI (orta sutun) — maket duzeni
     Sitenin markup'i: .list-item-rows > .row > .col-3 (gorsel) + .col-9
     Makette gorsel SAGDA. Vue sablonuna DOKUNULMADI; flex "order" ile
     gorsel saga alindi.
     ================================================================== */

  /* kategori basligi */
  /* brief: bolum basliklari 22-26px */
  #vue-merchant-menu section > h5{
    font-size: 23px; font-weight: 700; letter-spacing: -.03em;
    color: var(--alo-ink); margin: 0 0 6px;
  }
  #vue-merchant-menu section > h5 .alo-adet{
    font-size: 14px; font-weight: 500; color: var(--alo-muted); margin-left: 6px;
    letter-spacing: 0; font-variant-numeric: tabular-nums;
  }
  #vue-merchant-menu section > p{
    font-size: 13px; color: var(--alo-muted); margin: 0 0 14px;
  }

  /* kart */
  #vue-merchant-menu .list-item-rows{
    background: var(--alo-bg);
    border: 1px solid var(--alo-line);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  #vue-merchant-menu .list-item-rows:hover{
    border-color: var(--alo-line-2);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
  }

  /* 20 Eylul 2026 (kullanici: "menulerde resimler neden sagda duruyor, normalde
     solda durur"): gorsel SOLDA, icerik SAGDA — sitenin kendi duzeninin aynisi.
     (Maket TrendyolGo'dan geldigi icin gorsel sagdaydi.) Sablona dokunulmadi;
     yalniz flex sirasi sitenin markup sirasina geri alindi: .col-3 gorsel, .col-9 icerik. */
  #vue-merchant-menu .list-item-rows > .row{
    display: flex; flex-wrap: nowrap; align-items: stretch;
    gap: 14px; margin: 0 !important;
  }
  #vue-merchant-menu .list-item-rows > .row > .col-3{
    order: 1; flex: 0 0 116px; max-width: 116px; padding: 0 !important;
  }
  #vue-merchant-menu .list-item-rows > .row > .col-9{
    order: 2; flex: 1 1 auto; max-width: none; padding: 0 !important; min-width: 0;
  }

  /* gorsel kutusu */
  #vue-merchant-menu .item-image-preview .el-image,
  #vue-merchant-menu .item-image-preview img{
    width: 116px !important; height: 116px !important;
    border-radius: 12px; overflow: hidden; background: var(--alo-bg-2);
  }
  #vue-merchant-menu .list-item-rows > .row > .col-3 > div[style*="140px"]{
    height: 116px !important;
  }

  /* metin + dugme satiri
     TUZAK: Bootstrap her .col-* icin width:100% verir. flex-basis "auto"
     birakilirsa taban genislik 100% olur; sonucta dugme sutunu (.col-lg-4)
     satirin tamamini kaplar, metin sutunu (.col-lg-8) 0 piksele iner.
     Bu yuzden taban acikca sifirlanir: metin sutunu 1 1 0%, dugme sutunu
     0 0 auto + width:auto. */
  /* Makette fiyat ile "Sepete Ekle" AYNI SATIRDA, kartin altinda:
        .urun-alt{ display:flex; justify-content:space-between; padding-top:12px }
     Sitede dugme AYRI bir sutun (.col-lg-4) ve dikeyde ORTALANIYOR,
     bu yuzden fiyattan kopuk duruyordu. Satirin hizalamasi ALTA
     cekilerek dugme fiyat satirina indirildi. */
  #vue-merchant-menu .list-item-rows .row.m-0.p-0{
    display: flex; flex-wrap: nowrap; align-items: flex-end; margin: 0 !important;
  }
  #vue-merchant-menu .list-item-rows .col-lg-8{
    flex: 1 1 0%; width: auto; max-width: none; padding: 0 !important; min-width: 0;
  }
  #vue-merchant-menu .list-item-rows .col-lg-4{
    flex: 0 0 auto; width: auto; max-width: none; padding: 0 0 0 12px !important;
  }
  /* style.css:1068 -> .list-item-rows .fixed-height{min-height:140px}
     Fotografsiz kartta 140px'lik bos yer birakiyordu; yukseklik artik
     icerigin (veya 116px'lik gorselin) kendisi belirliyor. */
  #vue-merchant-menu .list-item-rows .fixed-height{
    height: auto !important; min-height: 0 !important;
  }
  /* .col-lg-8 bir flex kabi (d-flex); icindeki .center varsayilan olarak
     icerigi kadar daralir, boylece urun adi erken satir atliyordu. */
  #vue-merchant-menu .list-item-rows .col-lg-8 > .center{
    flex: 1 1 auto; min-width: 0; width: 100%;
  }

  /* fotografi olmayan urun: gorsel yuvasi hic ayrilmasin.
     Sitenin sablonu fotograf yoksa 140px'lik BOS bir kutu basiyor
     (menu-data.php: v-else style="height:140px"). Maketde oyle bir
     bosluk yok; TrendyolGo/Yemeksepeti de fotografsiz urunu tam
     genislikte gosteriyor. Sablon DEGISTIRILMEDI, kutu CSS ile kapatildi. */
  #vue-merchant-menu .list-item-rows > .row > .col-3:not(:has(.item-image-preview)){
    display: none;
  }

  /* urun adi */
  /* brief: urun adi 16-18px
     ⚠ Temada  "h6, .menu-category a, .font14{ font-size:14px !important }"
       kurali var; !important olmadan bizim olcumuz UYGULANMAZ.
       (Olculdu: CSS.getMatchedStylesForNode ile dogrulandi.) */
  #vue-merchant-menu .list-item-rows h6{
    font-size: 16.5px !important; font-weight: 700; letter-spacing: -.015em;
    line-height: 1.32; color: var(--alo-ink);
  }

  /* aciklama */
  #vue-merchant-menu .ellipsis-2-lines{
    /* ⚠ Temada "p, .card, ...{ font-size:12px !important }" var. */
    font-size: 13.5px !important; color: var(--alo-muted); line-height: 1.5; margin-bottom: 8px;
  }

  /* fiyat */
  #vue-merchant-menu .prices{
    font-size: 16px; font-weight: 800; letter-spacing: -.025em;
    font-variant-numeric: tabular-nums; color: var(--alo-ink); margin: 0;
  }
  #vue-merchant-menu .prices del{ color: var(--alo-muted); font-weight: 500; font-size: 13px; }

  /* TEK BOYLU URUNDE FIYAT: makette cerceveli kutu degil, DUZ KALIN
     metin ("700 TL"). Site tek boyda bile radyo dugmesi cizdigi icin
     kutu gorunuyordu. Yalnizca tek etiketli grupta sadelestiriliyor;
     cok boylu urunlerde dugmeler AYNEN kaliyor.
     Boy adi ("Normal") da tek boyda gizleniyor -- makette yok. */
  #vue-merchant-menu .btn-group:has(> label:only-child){ margin: 0; }
  #vue-merchant-menu .btn-group:has(> label:only-child) .btn{
    border: 0 !important; background: transparent !important;
    padding: 0 !important; margin: 0 !important;
    font-size: 17px !important; font-weight: 800;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
    color: var(--alo-ink) !important; cursor: default;
  }
  #vue-merchant-menu .btn-group:has(> label:only-child) .alo-boy{ display: none; }
  #vue-merchant-menu .btn-group:has(> label:only-child) .btn del{
    font-size: 13px; font-weight: 500; color: var(--alo-muted); margin-right: 6px;
  }

  /* boy secim dugmeleri */
  #vue-merchant-menu .btn-group .btn{
    border: 1px solid var(--alo-line-2) !important;
    border-radius: 7px !important;
    font-size: 12px; font-weight: 600; padding: 5px 11px; margin: 0 6px 6px 0;
    color: var(--alo-ink-2) !important; background: var(--alo-bg) !important;
  }
  #vue-merchant-menu .btn-group .btn.active{
    border-color: var(--alo-brand) !important;
    background: var(--alo-brand-bg) !important;
    color: var(--alo-brand-dk) !important;
  }

  /* "Sepete ekle" — cizgili, uzerine gelince turuncu dolar */
  #vue-merchant-menu .quantity-add-cart,
  #vue-merchant-menu .btn-grey{
    background: var(--alo-bg) !important;
    border: 1px solid var(--alo-line-2) !important;
    color: var(--alo-ink) !important;
    border-radius: 8px !important;
    font-size: 12.5px; font-weight: 700; padding: 9px 16px; white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
  }
  #vue-merchant-menu .quantity-add-cart:hover,
  #vue-merchant-menu .btn-grey:hover{
    background: var(--alo-brand-bg) !important;
    border-color: var(--alo-brand) !important;
    color: var(--alo-brand-dk) !important;
  }

  /* adet kontrolu */
  #vue-merchant-menu .quantity-parent .quantity{
    border: 1px solid var(--alo-line-2); border-radius: 12px;
    padding: 4px 6px; min-width: 106px; background: var(--alo-bg);
  }
  #vue-merchant-menu .qty-btn{
    color: var(--alo-brand-dk) !important; font-weight: 800;
  }
  #vue-merchant-menu .quantity .qty{
    font-weight: 800; font-variant-numeric: tabular-nums; color: var(--alo-ink);
  }

  /* --- begeni yuzdesi (10 Eylul 2026) --- */
  #vue-merchant-menu .alo-begeni{
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--alo-green);
    margin: 0 0 10px;
  }
  #vue-merchant-menu .alo-begeni small{ color: var(--alo-muted); font-weight: 500; }
  #vue-merchant-menu .alo-begeni .zmdi{ font-size: 14px; }

  /* --- urun kartinda PLUS fiyati (10 Eylul 2026) --- */
  /* Fiyat blogu (.btn-group / .prices) satir ici oldugu icin PLUS satiri
     display:flex ile KENDI SATIRINA aliniyor -- makette fiyatin ALTINDA. */
  #vue-merchant-menu .alo-plus-fiyat{
    display: flex; align-items: center; justify-content: flex-start; gap: 6px;
    width: fit-content;
    margin: 4px 0 0; font-size: 11.5px; font-weight: 700; color: var(--alo-plus);
  }
  #vue-merchant-menu .alo-plus-fiyat i{
    font-style: normal; background: var(--alo-plus); color: #fff;
    border-radius: 4px; padding: 1px 5px; font-size: 9px; font-weight: 800; letter-spacing: .05em;
  }

  /* --- bilgi seridinde PLUS rozeti (10 Eylul 2026) --- */
  #vue-merchant-details .alo-rozet-mor{
    background: var(--alo-plus-bg); color: var(--alo-plus);
    border-radius: 5px; padding: 2px 7px;
    font-size: 10.5px; font-weight: 800; margin-left: 6px;
  }

  /* --- Hakkinda penceresi: galeri + yol tarifi (10 Eylul 2026) --- */
  .alo-pencere .alo-galeri{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  }
  .alo-pencere .alo-galeri img{
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: 12px; display: block; background: var(--alo-bg-2);
  }
  /* 11 Eylul 2026: harita pencerenin en ustune, yol tarifi adres satirina
     tasindi (bkz. asagida "Uber Eats Store info duzeni"). */

  /* --- Hakkinda penceresine tasinan sayfa alti bolumu MASAUSTUNDE GIZLE
     #section-about / #section-gallery / #section-address ayni kapsayicinin
     icinde. Icerigin tamami artik pencerede; sayfada ikinci kez
     gosterilmiyor. Mobilde (bu medya sorgusunun disinda) AYNEN DURUYOR. */
  /* 12 Eyl (kullanici: "kapali olan restoranlarda altta bir daha cikiyor"):
     kural yalniz #section-about'a bakiyordu. "Cok yakinda" sayfalarinda o
     bolum gizlendigi icin AYNI kapsayicidaki Resimler ve Adres/Saatler
     yeniden gorunur oluyordu (ayni bilgi Hakkinda penceresinde zaten var).
     Artik uc bolumun her biri kapsayiciyi gizlemeye yetiyor. */
  .container:has(> #section-about),
  .container:has(> #section-gallery),
  .container:has(> #section-address){ display: none !important; }

  /* ==================================================================
     5) SEPET (sag sutun) — Yemeksepeti deseni
     ================================================================== */

  /* Ayni sebep: kart gorunumu ic sarmalayicida (yukaridaki nota bak). */
  .menu-right .sticky-cart > .inner-wrapper-sticky,
  .menu-right .sticky-cart:not(:has(.inner-wrapper-sticky)){
    background: var(--alo-bg);
    border: 1px solid var(--alo-line);
    border-radius: 14px;
    padding: 16px;
  }
  /* Baslik: "Sepetim" + altinda ince ayrac (Yemeksepeti deseni) */
  .menu-right .sticky-cart h5{
    font-size: 17px; font-weight: 800; letter-spacing: -.025em;
    color: var(--alo-ink);
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--alo-line);
  }
  /* "Ozet" + "Temizle" satiri: kucuk ve sakin, baslikla yarismasin */
  .menu-right .sticky-cart > .d-flex h6{
    font-size: 12px !important; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--alo-muted); margin: 0;
  }
  .menu-right .sticky-cart > .d-flex a p{
    font-size: 12.5px; font-weight: 600; color: var(--alo-ink-2); margin: 0;
  }
  .menu-right .sticky-cart > .d-flex a:hover p{ color: var(--alo-brand-dk); }
  .menu-right .sticky-cart > .d-flex{ margin-bottom: 4px !important; }

  /* bos sepet basligi ayracsiz dursun */
  .menu-right .sticky-cart:has(.cart-empty) h5{
    border-bottom: 0; padding-bottom: 0;
  }

  /* urun satirlari
     Sepet sutunu 251px; sitenin col-3/col-6/col-3 izgarasi bu genislikte
     birbirine giriyordu (gorsel adin uzerine biniyordu). Uc sutun sabit
     genislikli bir flex satirina cevrildi: gorsel 44px, icerik esner,
     sil/fiyat kadari kadar. Sablon DEGISTIRILMEDI. */
  .menu-right .line-items{
    padding: 12px 0; margin: 0 !important;
    border-bottom: 1px solid var(--alo-line);
    display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px;
  }
  .menu-right .line-items > .col-3:first-child{
    flex: 0 0 44px; width: 44px; max-width: 44px; padding: 0 !important;
  }
  .menu-right .line-items .cart-image-preview,
  .menu-right .line-items .cart-image-preview .el-image,
  .menu-right .line-items .cart-image-preview img{
    width: 44px !important; height: 44px !important;
    border-radius: 7px; overflow: hidden;
  }
  .menu-right .line-items > .col-6{
    flex: 1 1 0%; width: auto; max-width: none; min-width: 0; padding: 0 !important;
  }
  .menu-right .line-items > .col-3:last-child{
    flex: 0 0 auto; width: auto; max-width: none; padding: 0 !important;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  }
  /* adet kutusu — Yemeksepeti'ndeki gibi cerceveli, dar */
  .menu-right .line-items .quantity{
    justify-content: flex-start !important;
    gap: 2px; margin-top: 6px;
  }
  .menu-right .line-items .quantity .qty{
    min-width: 22px; text-align: center;
    font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .menu-right .line-items p{ font-size: 13px; color: var(--alo-ink-2); }
  .menu-right .line-items .m-0.bold,
  .menu-right .line-items p.bold{
    font-weight: 700; color: var(--alo-ink); font-size: 13.5px;
  }
  .menu-right .line-items .quantity p{
    font-weight: 700; font-variant-numeric: tabular-nums; color: var(--alo-ink);
  }
  .menu-right .item-remove{
    color: var(--alo-muted) !important; font-size: 15px;
  }
  .menu-right .item-remove:hover{ color: #C2410C !important; }

  /* PLUS kutusu (maketteki 🎁 blogu) */
  .menu-right .alo-sepet-plus{
    text-align: center;
    padding: 6px 4px 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--alo-line);
  }
  .menu-right .alo-sepet-plus-ikon{
    width: 56px; height: 56px; margin: 0 auto 10px;
    border-radius: 14px; background: var(--alo-brand-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--alo-brand);
  }
  .menu-right .alo-sepet-plus h4{
    font-size: 14px; font-weight: 700; letter-spacing: -.02em;
    line-height: 1.3; margin: 0 0 4px; color: var(--alo-ink);
  }
  .menu-right .alo-sepet-plus p{
    margin: 0; font-size: 12px; color: var(--alo-muted); line-height: 1.45;
  }

  /* ara toplam satiri */
  .menu-right .alo-ozet-satir{
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: var(--alo-ink-2); margin-bottom: 9px;
  }
  .menu-right .alo-ozet-satir > div:last-child{
    font-weight: 700; color: var(--alo-ink); font-variant-numeric: tabular-nums;
  }

  /* ozet satirlari */
  .menu-right .cart-summary{
    padding-top: 14px; margin-top: 4px !important;
  }
  /* Teslimat ucreti sitede ORTALANMIS tek satir olarak basiliyor
     (cart-data.php: div.a-12.text-center). Maketteki gibi
     "etiket solda / tutar sagda" ozet satirina cevriliyor. */
  .menu-right .cart-summary > .text-center{
    text-align: left !important;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: var(--alo-ink-2);
    padding-top: 12px; margin-top: 10px;
    border-top: 1px solid var(--alo-line);
  }
  .menu-right .cart-summary > .text-center > div{
    font-weight: 700; color: var(--alo-ink); font-variant-numeric: tabular-nums;
  }
  .menu-right .cart-summary > div{
    font-size: 13px; color: var(--alo-ink-2); margin-bottom: 9px !important;
  }
  .menu-right .cart-summary > div:last-child{ margin-bottom: 0 !important; }
  /* TOPLAM satiri — Yemeksepeti'ndeki gibi belirgin */
  .menu-right .cart-summary h6{
    font-size: 15.5px !important; font-weight: 800; color: var(--alo-ink);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  }
  .menu-right .cart-summary > div:has(h6){
    padding-top: 12px; border-top: 1px solid var(--alo-line); margin-top: 4px !important;
  }

  /* ONAY DUGMESI — tam genislik turuncu */
  .menu-right .btn-green,
  .menu-right .sticky-cart .btn-black{
    background: var(--alo-brand) !important;
    border-color: var(--alo-brand) !important;
    color: #fff !important;
    border-radius: 9px !important;
    font-weight: 800; font-size: 14px; padding: 14px 16px;
    letter-spacing: -.01em; margin-top: 6px;
  }
  .menu-right .btn-green:hover,
  .menu-right .sticky-cart .btn-black:hover{
    background: var(--alo-brand-dk) !important; border-color: var(--alo-brand-dk) !important;
  }
  .menu-right .btn-green .flex-col{ font-variant-numeric: tabular-nums; }

  /* bos sepet */
  .menu-right .no-results{ opacity: .5; }
  .menu-right .sticky-cart .mt-5{ margin-top: 1.5rem !important; }

  /* ==================================================================
     5B) BENZER RESTORANLAR (10 Eylul 2026)
     Yemeksepeti deseni: yatay kayan kart seridi.
     Kaydirma cubugu yerine dogal yatay kaydirma + kaydirma tutucu.
     ================================================================== */
  /* 20 Eylul 2026 (kullanici: "benzer restoranlar menuye cok yapisik, biraz asagiya
     indirelim"): Bootstrap'in mt-lg-5'i (48px) yetmiyordu, menunun bitisi ile serit
     arasi 88px'e cikarildi. */
  .alo-benzer{ max-width: 1292px; padding-bottom: 8px; position: relative;
    margin-top: 88px !important; }

  /* Ok dugmeleri — Yemeksepeti'ndeki gibi seridin uzerinde yuvarlak */
  .alo-benzer-ok{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--alo-line); background: var(--alo-bg);
    color: var(--alo-ink); font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 3;
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
    transition: background .12s ease, border-color .12s ease;
  }
  .alo-benzer-ok:hover{ background: var(--alo-bg-2); border-color: var(--alo-line-2); }
  .alo-benzer-ok-sol{ left: -14px; }
  .alo-benzer-ok-sag{ right: -14px; }
  /* Serit ustunde degil, kart yuksekligine gore ortalansin diye
     baslik yuksekligi kadar asagi alinir. */
  .alo-benzer-ok{ margin-top: 22px; }
  .alo-benzer h2{
    font-size: 22px; font-weight: 800; letter-spacing: -.03em;
    color: var(--alo-ink); margin: 0 0 18px;
  }
  .alo-benzer-serit{
    display: grid; grid-auto-flow: column; grid-auto-columns: 252px;
    gap: 16px; overflow-x: auto; padding-bottom: 10px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  }
  /* Oklar oldugu icin kaydirma cubugu gizlenir (parmakla/tekerlekle
     kaydirma calismaya devam eder). */
  .alo-benzer-serit{ scrollbar-width: none; }
  .alo-benzer-serit::-webkit-scrollbar{ height: 0; display: none; }
  .alo-benzer-kart{
    display: block; scroll-snap-align: start;
    background: var(--alo-bg); border: 1px solid var(--alo-line);
    border-radius: 14px; overflow: hidden;
    text-decoration: none !important; color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  }
  .alo-benzer-kart:hover{
    border-color: var(--alo-line-2);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transform: translateY(-2px);
  }
  .alo-benzer-gorsel{
    display: block; aspect-ratio: 16 / 10; background: var(--alo-bg-2);
  }
  .alo-benzer-gorsel img{
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .alo-benzer-govde{ display: block; padding: 12px 14px 14px; }
  .alo-benzer-ust{
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  }
  .alo-benzer-logo{
    width: 22px; height: 22px; border-radius: 5px; object-fit: cover;
    flex: none; background: var(--alo-bg-2);
  }
  .alo-benzer-ad{
    font-size: 14px; font-weight: 700; letter-spacing: -.02em;
    color: var(--alo-ink); min-width: 0; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .alo-benzer-puan{
    display: inline-flex; align-items: center; gap: 3px; flex: none;
    font-size: 12.5px; font-weight: 700; color: var(--alo-ink);
    font-variant-numeric: tabular-nums;
  }
  .alo-benzer-puan .zmdi{ color: #F5A623; font-size: 13px; }
  .alo-benzer-puan small{ color: var(--alo-muted); font-weight: 500; }
  .alo-benzer-alt{
    display: block; font-size: 12.5px; color: var(--alo-muted);
  }

  /* ==================================================================
     6) EKLENTI ROZETLERI — basliktaki hizalama
     Rozet / Plus / Birlikte Siparis dugmesi yan yana dursun.
     ================================================================== */

  #vue-merchant-details .left-info .rzon-etiket,
  #vue-merchant-details .left-info .plson-etiket,
  #vue-merchant-details .left-info .blk-baslat{
    vertical-align: middle;
    margin: 0 6px 8px 0;
  }
}

/* ====================================================================
   HAKKINDA / YORUMLAR PENCERELERI
   9 Eylul 2026 — rakiplerdeki gibi baslikta tiklayinca acilir.
   Vue KULLANILMIYOR. Yorumlar penceresi sayfada ZATEN VAR OLAN
   #section-review bolumunu YERINDEN OYNATMADAN, sadece CSS ile
   ustte gosterir; boylece Vue'nun yonettigi DOM'a dokunulmaz.
   ==================================================================== */
@media (min-width: 992px) {

  /* "Hakkinda" baglantisi */
  /* 11 Eyl 2026: "Masa rezervasyonu" baglantisi About ile BIREBIR ayni gorunum
     (kullanici: "about gibi kalin font ve siyah olsun, aynisi olsun"). */
  #vue-merchant-details .alo-hakkinda-ac,
  #vue-merchant-details .alo-rez-ac{
    color: var(--alo-ink) !important;
    font-weight: 600; text-decoration: none;
    border-bottom: 1px solid var(--alo-line-2);
  }
  #vue-merchant-details .alo-hakkinda-ac:hover,
  #vue-merchant-details .alo-rez-ac:hover{
    color: var(--alo-brand-dk) !important; border-bottom-color: var(--alo-brand);
  }

  /* Yorumlar hapi — cizgili */
  #vue-merchant-details .alo-hap-yorum{
    background: var(--alo-bg);
    border: 1px solid var(--alo-line-2);
    color: var(--alo-ink) !important;
    cursor: pointer;
  }
  #vue-merchant-details .alo-hap-yorum:hover{
    border-color: var(--alo-brand); color: var(--alo-brand-dk) !important;
  }

  /* --- pencere: Uber Eats "Store info" duzeni (11 Eylul 2026) ---
     Kullanici Uber ekran goruntusunu verip "bu uber gibi olsun, yazi tipi
     hepsi" dedi. Duzen birebir: kenardan kenara harita + sol ustte yuvarlak
     kapatma dugmesi, 34px kalin baslik, gri mutfak satiri, tam genislik
     cizgili ikonlu satirlar. Yazi tipi Inter (dosya basindaki @import).
     Renkler Uber'in siyah / gri tonlari. Markup: merchant-top-header.php */
  .alo-pencere{
    display: none;
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,.5);
    padding: 48px 16px; overflow-y: auto;
  }
  .alo-pencere.acik{ display: block; }
  .alo-pencere-ic{
    position: relative;
    max-width: 480px; margin: 0 auto;
    background: #FFFFFF; border-radius: 16px; overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
    color: #000000;
  }
  .alo-pencere-kapa{
    position: absolute; top: 14px; left: 14px; z-index: 2;
    width: 48px; height: 48px; padding: 0; border-radius: 50%;
    border: 0; background: #FFFFFF; color: #000000; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
  }
  .alo-pencere-kapa:hover{ background: #F3F3F3; }

  .alo-ub-harita{ position: relative; display: block; height: 190px; background: #EEEEEE; }
  .alo-ub-harita img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .alo-ub-mesafe{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -130%);
    background: #FFFFFF; color: #000000; white-space: nowrap;
    font-size: 15px; font-weight: 500; line-height: 1;
    padding: 8px 10px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }

  .alo-ub-bas{ padding: 24px 24px 20px; border-bottom: 1px solid #E8E8E8; }
  .alo-ub-haritasiz .alo-ub-bas{ padding-top: 78px; }
  .alo-ub-bas h2{
    margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700;
    letter-spacing: -.02em; color: #000000;
  }
  .alo-ub-alt{ margin-top: 8px; font-size: 15px; line-height: 1.4; color: #545454; }

  .alo-ub-satir{
    display: flex; align-items: flex-start; gap: 20px;
    padding: 22px 24px; border-bottom: 1px solid #E8E8E8;
  }
  .alo-ub-satir:last-child{ border-bottom: 0; }
  .alo-ub-ikon{ flex: 0 0 24px; display: flex; color: #000000; }
  .alo-ub-metin{ flex: 1 1 0%; min-width: 0; }
  .alo-ub-ana{ font-size: 16px; font-weight: 500; line-height: 1.45; color: #000000; }
  .alo-ub-ana a{ color: #000000; text-decoration: none; }
  .alo-ub-gri{ margin-top: 4px; font-size: 15px; line-height: 1.55; color: #545454; }
  .alo-ub-gri p{ margin: 0; }
  .alo-ub-bag{
    display: inline-block; margin-top: 6px;
    font-size: 14px; font-weight: 500; color: #000000; text-decoration: underline;
  }
  .alo-ub-bag:hover{ color: var(--alo-brand-dk); }
  .alo-ub-kopya, .alo-ub-ac{
    flex: 0 0 auto; align-self: center; display: flex;
    border: 0; background: transparent; padding: 4px; margin: -4px -4px -4px 0;
    color: #545454; cursor: pointer; border-radius: 50%;
  }
  .alo-ub-kopya:hover, .alo-ub-ac:hover{ color: #000000; background: #F3F3F3; }
  .alo-ub-kopya.kopyalandi{ color: var(--alo-green); }
  .alo-ub-ac.acik .alo-ub-dikey{ display: none; }
  /* saatler acilinca +/- dugmesi Uber'deki gibi ilk satir hizasinda kalsin */
  .alo-ub-ac{ align-self: flex-start; }
  /* fareyle tiklayinca odak halkasi kalmasin (klavyede gorunur kalir) */
  .alo-ub-ac:focus:not(:focus-visible),
  .alo-ub-kopya:focus:not(:focus-visible),
  .alo-pencere-kapa:focus:not(:focus-visible){ outline: none; }
  .alo-ub-detay{ margin-top: 12px; }
  .alo-pencere .alo-galeri{ margin-top: 12px; grid-template-columns: repeat(3, 1fr); }

  .alo-blok{ margin-bottom: 20px; }
  .alo-blok:last-child{ margin-bottom: 0; }
  .alo-blok-bas{
    font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: var(--alo-muted); margin-bottom: 7px;
  }
  .alo-blok p{ margin: 0; font-size: 14px; color: var(--alo-ink-2); line-height: 1.6; }

  .alo-saat{ width: 100%; border-collapse: collapse; }
  .alo-saat td{
    padding: 8px 0; font-size: 13.5px; color: var(--alo-ink-2);
    border-bottom: 1px solid var(--alo-line);
  }
  .alo-saat tr:last-child td{ border-bottom: 0; }
  .alo-saat td:last-child{
    text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
  }
  .alo-saat tr.alo-bugun td{ color: var(--alo-ink); font-weight: 800; }

  /* --- YORUMLAR: mevcut bolumu yerinden oynatmadan ustte goster --- */
  body.alo-yorum-acik{ overflow: hidden; }
  body.alo-yorum-acik::before{
    content: ""; position: fixed; inset: 0; z-index: 4000; background: rgba(25,25,25,.5);
  }
  /* ⚠ Yorumlar bolumu masaustunde SAYFADA GORUNMEZ.
     Icerigin tamami artik pencerede; kapaliyken sayfanin altinda
     ikinci kez durmasi ANLAMSIZ (1.404 piksellik bir yigin olusuyordu).
     Hakkinda/Galeri/Adres bolumu de ayni sekilde gizlendi (bkz. yukarida
     .container:has(> #section-about)).
     MOBILDE AYNEN DURUYOR -- bu blok min-width:992px icinde. */
  #section-review{ display: none; }

  body.alo-yorum-acik #section-review{
    display: block;
    position: fixed; z-index: 4001;
    top: 40px; left: 50%; transform: translateX(-50%);
    width: min(720px, calc(100% - 32px));
    max-height: calc(100vh - 80px); overflow-y: auto;
    background: var(--alo-bg); border-radius: 12px;
    padding: 22px !important; margin: 0 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.14);
  }
  /* Kapatma dugmesi govdeye ekleniyor (pencere Vue kokunun icinde,
     oraya dugum eklemek Vue'yu bozar). Bu yuzden konumu sabit; pencerenin
     ic sag ust kosesine denk gelecek sekilde hesaplaniyor:
     pencere genisligi min(720px, 100% - 32px), yani yarisi 360px. */
  .alo-yorum-kapa{
    display: none;
    position: fixed; z-index: 4002; top: 56px;
    left: 50%; margin-left: min(310px, calc(50vw - 58px));
    width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: var(--alo-bg-2); color: var(--alo-ink);
    font-size: 20px; line-height: 1; cursor: pointer;
    display: none; align-items: center; justify-content: center;
  }
  .alo-yorum-kapa:hover{ background: var(--alo-line); }
  body.alo-yorum-acik .alo-yorum-kapa{ display: flex; }

  /* ---- YORUMLAR PENCERESI ICI (10 Eylul 2026, TrendyolGo deseni) ----
     Ornek: tgoyemek.com yorum penceresi. Baslik, altinda ozet karti
     (yesil puan rozeti + degerlendirme sayisi), altinda arama kutusu,
     sonra cerceveli yorum kartlari. */
  body.alo-yorum-acik #section-review .alo-yorum-bas{
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--alo-line);
  }
  body.alo-yorum-acik #section-review .alo-yorum-bas h5{
    font-size: 19px; font-weight: 800; letter-spacing: -.025em;
    color: var(--alo-ink); margin: 0;
  }

  body.alo-yorum-acik #section-review .alo-yorum-ozet{
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    border: 1px solid var(--alo-line-2); border-radius: 14px;
    padding: 14px 16px; margin-bottom: 12px; flex-wrap: wrap;
  }
  body.alo-yorum-acik #section-review .alo-yorum-ozet-sol{
    display: flex; align-items: center; gap: 14px;
  }
  /* alt kirilimlar: Servis / Lezzet / Teslimat */
  body.alo-yorum-acik #section-review .alo-yorum-kirilim{
    display: flex; flex-direction: column; gap: 5px;
  }
  body.alo-yorum-acik #section-review .alo-kirilim-satir{
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 10px;
    font-size: 13px; color: var(--alo-ink-2);
  }
  body.alo-yorum-acik #section-review .alo-kirilim-yildiz{
    color: #F5A623; font-size: 13px; letter-spacing: 1px; line-height: 1;
  }
  body.alo-yorum-acik #section-review .alo-kirilim-ad{
    font-weight: 600; color: var(--alo-ink); white-space: nowrap;
  }
  body.alo-yorum-acik #section-review .alo-kirilim-deger{
    font-weight: 700; font-variant-numeric: tabular-nums; color: var(--alo-ink);
  }

  /* bilgilendirme kutusu */
  body.alo-yorum-acik #section-review .alo-yorum-not{
    background: var(--alo-bg-2); border-radius: 12px;
    padding: 11px 14px; margin-bottom: 14px;
    font-size: 12.5px; color: var(--alo-ink-2); line-height: 1.45;
  }

  /* konu suzgec cipleri */
  body.alo-yorum-acik #section-review .alo-yorum-suzgec{
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  }
  body.alo-yorum-acik #section-review .alo-cip{
    border: 1px solid var(--alo-line-2); background: var(--alo-bg);
    border-radius: 999px; padding: 8px 14px;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--alo-ink-2); cursor: pointer; white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
  }
  body.alo-yorum-acik #section-review .alo-cip:hover{ border-color: var(--alo-line); background: var(--alo-bg-2); }
  body.alo-yorum-acik #section-review .alo-cip.secili{
    border-color: var(--alo-brand); background: var(--alo-brand-bg); color: var(--alo-brand-dk);
  }

  /* yorum kartindaki alt kirilim satiri */
  body.alo-yorum-acik #section-review .alo-kart-kirilim{
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 12.5px; color: var(--alo-muted); margin-bottom: 8px;
  }
  body.alo-yorum-acik #section-review .alo-kart-kirilim b{
    color: var(--alo-ink); font-weight: 700; font-variant-numeric: tabular-nums;
  }
  body.alo-yorum-acik #section-review .alo-yorum-puan{
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--alo-green); color: #fff;
    border-radius: 12px; padding: 10px 14px;
    font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums;
    line-height: 1; flex: none;
  }
  body.alo-yorum-acik #section-review .alo-yorum-puan .zmdi{ font-size: 17px; }
  body.alo-yorum-acik #section-review .alo-yorum-sayi{
    font-size: 13px; font-weight: 600; color: var(--alo-ink-2);
    display: flex; flex-direction: column; gap: 3px;
  }
  body.alo-yorum-acik #section-review .alo-yorum-sayi .zmdi{ color: var(--alo-muted); }

  body.alo-yorum-acik #section-review .alo-yorum-ara{
    position: relative; margin-bottom: 16px;
  }
  body.alo-yorum-acik #section-review .alo-yorum-ara .zmdi{
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--alo-muted); font-size: 17px; pointer-events: none;
  }
  body.alo-yorum-acik #section-review .alo-yorum-ara input{
    width: 100%; padding: 12px 16px 12px 40px;
    border: 1px solid var(--alo-line-2); border-radius: 14px;
    font-size: 14px; color: var(--alo-ink); background: var(--alo-bg);
    outline: none;
  }
  body.alo-yorum-acik #section-review .alo-yorum-ara input:focus{
    border-color: var(--alo-brand);
  }
  body.alo-yorum-acik #section-review .alo-yorum-bos{
    text-align: center; color: var(--alo-muted); font-size: 13.5px; padding: 24px 0;
  }

  /* yorum kartlari */
  body.alo-yorum-acik #section-review .card{
    border: 1px solid var(--alo-line) !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    background: var(--alo-bg);
  }
  body.alo-yorum-acik #section-review .card-body{ padding: 14px 16px !important; }
  body.alo-yorum-acik #section-review .card strong{
    font-size: 13.5px; font-weight: 700; color: var(--alo-ink);
  }
  body.alo-yorum-acik #section-review .card small{
    font-size: 11.5px; color: var(--alo-muted);
  }
  body.alo-yorum-acik #section-review .card img.rounded-circle{
    width: 40px !important; height: 40px !important; object-fit: cover;
  }
  body.alo-yorum-acik #section-review .card p{
    font-size: 13.5px; color: var(--alo-ink-2); line-height: 1.5; margin-bottom: 0 !important;
  }
  body.alo-yorum-acik #section-review .el-rate{ height: auto; }

  /* eski satir/kolon kaliplarini pencerede sadelestir */
  body.alo-yorum-acik #section-review > .row{ display: none; }
}

/* ====================================================================
   SIKCA SORULAN SORULAR
   11 Eylul 2026 — Uber Eats restoran sayfasindaki acilir kapanir liste.
   Markup: store/alo-sss.php (veri: MenuController $alo_sss).

   ⚠ BU BOLUM MOBILDE DE GORUNUR (kullanici karari) — bu yuzden
   @media DISINDA. --alo-* degiskenleri yalniz masaustunde tanimli
   oldugu icin her var()'in yaninda mobil icin ayni sabit deger var.
   Ac/kapa Bootstrap collapse ile (sitenin kendi deseni), yeni JS yok.
   ==================================================================== */
.alo-sss{ margin-bottom: 32px; }
.alo-sss h2{
  font-size: 20px; font-weight: 700; margin: 0 0 8px;
  color: var(--alo-ink, #222222);
}
.alo-sss-liste{ border-top: 1px solid var(--alo-line, #EDEDED); }
.alo-sss-oge{ border-bottom: 1px solid var(--alo-line, #EDEDED); }
.alo-sss-s{ margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.alo-sss-s a{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; text-decoration: none;
  color: var(--alo-ink, #222222);
}
.alo-sss-s a:hover{ color: var(--alo-brand, #FF6000); text-decoration: none; }
.alo-sss-s a i{
  flex-shrink: 0; font-size: 22px; transition: transform .2s ease;
  color: var(--alo-muted, #6B6B6B);
}
.alo-sss-s a:not(.collapsed) i{ transform: rotate(180deg); }
.alo-sss-c{
  padding: 0 0 16px; font-size: 14px; line-height: 1.6;
  color: var(--alo-ink-2, #4A4A4A);
}
.alo-sss-c a{ color: var(--alo-brand, #FF6000); font-weight: 600; }
.alo-sss-saat{ list-style: none; padding: 0; margin: 0; max-width: 300px; }
.alo-sss-saat li{ display: flex; justify-content: space-between; padding: 2px 0; }

/* ====================================================================
   GIRIS SERIDI  (11 Eylul 2026)
   TrendyolGo'daki "Siparis verebilmek icin lutfen giris yapin." seridi.
   Markup: merchant-top-header.php'nin EN BASI (yalniz misafirde basilir).
   @media DISINDA: masaustu + mobil. Yazi 14px (kullanicinin olcusu).
   ==================================================================== */
.alo-giris-bandi{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; text-align: center;
  /* 20 Eylul 2026 (kullanici: "bunun arka plani yesil olsa nasil olur"):
     sicak sari yerine yumusak yesil; yazi ve ikon koyu yesil. */
  background: #E9F7EF; color: #17603A; font-size: 14px; line-height: 1.4;
}
.alo-giris-bandi svg{ flex: 0 0 auto; color: #1B8A4B; }
.alo-giris-bandi a{ color: #14532D; font-weight: 700; text-decoration: underline; }
.alo-giris-bandi a:hover{ color: #0F3D21; }
/* giris yapmis kullanicida seridin yerine ayni yukseklikte bosluk
   (merchant-top-header.php else dali). Mobilde "Delivery Now" satiri zaten
   bosluk verdigi icin gizli; masaustunde seridin yuksekligi kadar (42px). */
.alo-giris-bosluk{ display: none; }
@media (min-width: 992px) { .alo-giris-bosluk{ display: block; height: 42px; } }

/* ====================================================================
   SEPET CEKMECESI — Uber Eats duzeni
   11 Eylul 2026 — kullanici Uber'in sepet ekran goruntusunu verdi:
   "sepet ikonuna tikliyorsun direk sag taraftan boyle aciliyor,
   bizimkini de boyle yapsan, restoran sayfasi sadece".

   - Tetik: ust menudeki sepet (#vue-cart-preview). Betik
     merchant-top-header.php'de; o dosya yalniz restoran sayfasinda
     basildigi icin DIGER SAYFALAR ETKILENMEZ.
   - Govde: sayfadaki SEPETIN KENDISI (#vue-cart). Vue'nun DOM'u yerinden
     OYNATILMAZ; body.alo-sepet-acik iken CSS ile sagda sabit panele
     cevrilir, kapaninca sutununa doner. Adet / sil / temizle / odeme
     oldugu gibi calisir.
   - StickySidebar ic sarmalayiciya SATIR ICI position/transform/top/
     left/width yaziyor (bkz. "YAN SUTUNLAR SABIT KALIR") -> !important.
   - Ust kisim (kapat + logo + ad + adres): .alo-sepet-bas; yuksekligi
     JS ile olculup --alo-sepet-bas degiskenine yazilir.
   - YALNIZ MASAUSTU (sepet sutunu mobilde zaten yok).
   ==================================================================== */
@media (min-width: 992px) {

  .alo-sepet-bas{ display: none; }
  body.alo-sepet-acik{ overflow: hidden; }
  /* ::before yorum penceresinde kullaniliyor; cekmece ::after */
  body.alo-sepet-acik::after{
    content: ""; position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.5);
  }

  /* --- ust kisim --- */
  body.alo-sepet-acik .alo-sepet-bas{
    display: block; position: fixed; top: 0; right: 0; z-index: 4002;
    width: 460px; background: #FFFFFF; padding: 16px 20px 14px;
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
  }
  button.alo-sepet-kapa{
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    background: #FFFFFF; color: #000000; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px #E8E8E8;
  }
  button.alo-sepet-kapa:hover{ background: #F3F3F3; }
  .alo-sepet-kapa:focus:not(:focus-visible){ outline: none; }
  .alo-sepet-rest{ display: flex; align-items: center; gap: 14px; margin-top: 14px; }
  .alo-sepet-logo{
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; background: #F3F3F3;
  }
  /* 12 Eyl: baslik artik baglanti (sepetin restoranina gider) */
  .alo-sepet-rest-metin{ flex: 1 1 0%; min-width: 0; color: inherit; text-decoration: none; cursor: pointer; display: block; }
  .alo-sepet-rest-metin:hover{ color: inherit; text-decoration: none; }
  .alo-sepet-rest-metin:hover .alo-sepet-rest-ad{ text-decoration: underline; }
  #vue-merchant-details .alo-sepet-logo{ cursor: pointer; }
  .alo-sepet-rest-ad{
    font-size: 18px; font-weight: 700; line-height: 1.25;
    letter-spacing: -.01em; color: #000000;
  }
  .alo-sepet-rest-adres{
    margin-top: 2px; font-size: 14px; color: #545454;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  a.alo-sepet-ok{ flex: 0 0 auto; display: flex; color: #000000; }

  /* --- govde: sayfadaki sepetin kendisi --- */
  body.alo-sepet-acik .menu-right .sticky-cart > .inner-wrapper-sticky,
  body.alo-sepet-acik .menu-right .sticky-cart:not(:has(.inner-wrapper-sticky)){
    position: fixed !important; z-index: 4001;
    top: var(--alo-sepet-bas, 130px) !important; bottom: 0 !important;
    right: 0 !important; left: auto !important;
    width: 460px !important; height: auto !important; max-height: none !important;
    transform: none !important;
    border: 0 !important; border-radius: 0 !important;
    padding: 0 20px 16px !important; background: #FFFFFF;
    overflow-y: auto;
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
  }
  /* Uber'de "Sepet" basligi yok; ust kisimdaki restoran blogu yeterli */
  body.alo-sepet-acik .menu-right .sticky-cart h5{ display: none; }

  /* APLUS kutusu -> Uber'deki sari kampanya seridi */
  body.alo-sepet-acik .menu-right .alo-sepet-plus{
    display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center;
    text-align: left; background: #FDF1D2; border: 0; border-radius: 8px;
    padding: 16px; margin: 4px 0 8px;
  }
  body.alo-sepet-acik .menu-right .alo-sepet-plus-ikon{
    grid-row: span 2; width: 48px; height: 48px; margin: 0;
    background: transparent; font-size: 40px; color: #B7791F;
  }
  body.alo-sepet-acik .menu-right .alo-sepet-plus h4{
    font-size: 14px; font-weight: 500; letter-spacing: 0; margin: 0 0 2px; color: #000000;
  }
  body.alo-sepet-acik .menu-right .alo-sepet-plus p{ font-size: 13px; color: #333333; }

  /* urun satirlari */
  body.alo-sepet-acik .menu-right .line-items{ padding: 18px 0; gap: 16px; border-bottom-color: #E8E8E8; }
  body.alo-sepet-acik .menu-right .line-items > .col-3:first-child{
    flex: 0 0 72px; width: 72px; max-width: 72px;
  }
  body.alo-sepet-acik .menu-right .line-items .cart-image-preview,
  body.alo-sepet-acik .menu-right .line-items .cart-image-preview .el-image,
  body.alo-sepet-acik .menu-right .line-items .cart-image-preview img{
    width: 72px !important; height: 72px !important; border-radius: 8px;
  }
  body.alo-sepet-acik .menu-right .line-items p{ font-size: 13px; color: #545454; }
  body.alo-sepet-acik .menu-right .line-items > .col-6 > p.mb-1{
    font-size: 14px; font-weight: 600; color: #000000;
  }
  /* adet: Uber'deki gri hap "- 2 +" */
  body.alo-sepet-acik .menu-right .line-items > .col-6 .quantity{
    display: inline-flex !important; align-self: flex-start; align-items: center; gap: 12px;
    background: #F3F3F3; border-radius: 999px; padding: 6px 10px; margin-top: 10px;
  }
  body.alo-sepet-acik .menu-right .line-items .qty-btn{
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border: 0 !important; background: transparent !important; color: #000000 !important;
    font-size: 16px; box-shadow: none !important;
  }
  body.alo-sepet-acik .menu-right .line-items > .col-6 .quantity .qty{
    font-size: 14px; font-weight: 600; min-width: 14px; color: #000000;
  }
  body.alo-sepet-acik .menu-right .line-items > .col-3:last-child p{
    font-size: 14px; font-weight: 600; color: #000000;
  }
  /* Sitenin kurallari yazi boyutunu !important ile sabitliyor:
     style.css:72 ".font11{font-size:11px !important}" (birim fiyat) ve
     urun adini 12px'e indiren baska bir !important kural (olculdu: 16px
     yazdigimiz halde 12px kaliyordu). Cekmecede Uber boyutlari icin ancak
     !important ezer; secicimiz daha belirgin oldugu icin kazanir.
     11 Eyl (2): kullanici "yazilar cok buyuk" dedi -> ad 14, fiyat 13,
     toplam 14, adet 14, ara toplam 14, dugme 15, restoran adi 18px. */
  body.alo-sepet-acik .menu-right .line-items p{ font-size: 13px !important; }
  body.alo-sepet-acik .menu-right .line-items > .col-6 > p.mb-1,
  body.alo-sepet-acik .menu-right .line-items > .col-3:last-child p{ font-size: 14px !important; }
  body.alo-sepet-acik .menu-right .line-items p.font11{ font-size: 13px !important; margin-top: 2px !important; }
  body.alo-sepet-acik .menu-right .alo-sepet-plus p{ font-size: 13px !important; }

  /* ozet + odeme dugmesi (Uber: tam genislik siyah, altta yapisik) */
  body.alo-sepet-acik .menu-right .cart-summary{ padding-top: 16px; }
  body.alo-sepet-acik .menu-right .alo-ozet-satir{ font-size: 14px; color: #000000; margin-bottom: 10px; }
  body.alo-sepet-acik .menu-right .sticky-cart a.btn-green{
    position: sticky; bottom: 0; z-index: 1;
    height: 56px; margin: 12px 0 0; padding: 0 20px; border-radius: 8px;
    align-items: center;
    background: #000000 !important; border-color: #000000 !important; color: #FFFFFF !important;
    font-size: 15px; font-weight: 500;
    box-shadow: 0 -16px 16px -4px #FFFFFF;
  }
  body.alo-sepet-acik .menu-right .sticky-cart a.btn-green:hover{ background: #333333 !important; }

  /* cekmece acikken acilan onay pencereleri (ornek: Temizle) ortunun USTUNDE kalsin */
  body.alo-sepet-acik .modal-backdrop{ z-index: 4003 !important; }
  body.alo-sepet-acik .modal{ z-index: 4004 !important; }
  body.alo-sepet-acik .el-overlay{ z-index: 4004 !important; }
}

/* ====================================================================
   YUZEN SEPET ROZETI  (11 Eylul 2026) — neyiyelim ornegi
   Sagda sabit, turuncu, canta bicimli: "1 Urun" + ara toplam. Yalniz
   sepette urun varken (.dolu); urun eklenince ziplar (.zipla).
   Tiklayinca SEPET CEKMECESI acilir; cekmece acikken gizli.
   Markup ve veri: merchant-top-header.php betigi (govdeye ekleniyor).
   YALNIZ MASAUSTU (cekmece de masaustunde).
   ==================================================================== */
@media (min-width: 992px) {
  .alo-sepet-rozet{ display: none; }
  .alo-sepet-rozet.dolu{
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    /* kullanici "cok orta, biraz asagi" dedi -> sag altta, "yukari cik"
       dugmesinin hemen ustunde; sayfa kaysa da hep ayni yerde */
    position: fixed; right: 16px; bottom: 110px; z-index: 3990;
    width: 82px; padding: 12px 8px 10px; border: 0; border-radius: 12px;
    background: #FF6000; color: #FFFFFF; cursor: pointer; font-family: inherit;
    box-shadow: 0 8px 24px rgba(255,96,0,.35);
  }
  /* canta sapi */
  .alo-sepet-rozet.dolu::before{
    content: ""; position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 20px; border: 4px solid #FF6000; border-bottom: 0;
    border-radius: 15px 15px 0 0;
  }
  .alo-sepet-rozet.dolu:hover{ background: #D64E00; }
  .alo-sepet-rozet.dolu:hover::before{ border-color: #D64E00; }
  .alo-sepet-rozet:focus:not(:focus-visible){ outline: none; }
  .alo-sr-adet{
    display: flex; flex-direction: column; align-items: center; width: 100%;
    padding: 4px 0; border-radius: 8px; background: #FFFFFF; color: #000000; line-height: 1.1;
  }
  .alo-sr-adet b{ font-size: 18px; font-weight: 700; }
  .alo-sr-adet i{ font-style: normal; font-size: 12px; font-weight: 600; }
  .alo-sr-tutar{ font-size: 13px; font-weight: 700; white-space: nowrap; }
  body.alo-sepet-acik .alo-sepet-rozet{ display: none; }
  /* urun eklenince zipla */
  .alo-sepet-rozet.zipla{ animation: aloSepetZipla .6s ease; }
  @keyframes aloSepetZipla{
    0%   { transform: scale(1); }
    30%  { transform: scale(1.15) rotate(-4deg); }
    60%  { transform: scale(.95) rotate(3deg); }
    100% { transform: scale(1); }
  }
}

/* ====================================================================
   ESKI SEPET SUTUNU KALDIRILDI + MASA REZERVASYONU PENCERESI
   11 Eylul 2026 — YALNIZ MASAUSTU
   ==================================================================== */
@media (min-width: 992px) {

  /* --- 1) SAG SEPET SUTUNU KALDIRILDI ---
     Kullanici: "eski sepet yerini kaldirmayi unutma". Sepet artik YALNIZ
     ust menudeki sepetten acilan cekmecede (bkz. "SEPET CEKMECESI").
     ⚠ display:none YAPILAMAZ: cekmecenin govdesi bu sutundaki #vue-cart;
     sutun gizlenirse sabit panel de gizlenir. Bunun yerine sutun SIFIR
     genislige indirilir ve kapaliyken gorunmez olur; cekmece acikken
     sabit panel (position:fixed) sutun kirpmasindan etkilenmeden cikar.
     Iki duzende de (Left / Top) sutun ayni secicide: bkz. SUTUN GENISLIKLERI. */
  .section-menu > .container > .row > .menu-right{
    flex: 0 0 0 !important; max-width: 0 !important; width: 0 !important;
    min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  }
  body:not(.alo-sepet-acik) .section-menu .menu-right{ visibility: hidden; }
  /* Sutun sifir genislikte ama StickySidebar ic sarmalayicisina 340px
     (!important, bkz. "YAN SUTUNLAR SABIT KALIR") veriliyordu: kapaliyken
     sayfanin sagindan 266px tasip YATAY KAYDIRMA cikariyordu (olculdu:
     scrollWidth 1706 / 1440). Kapaliyken ic kutular da sifir genislik;
     cekmece acikken "SEPET CEKMECESI" kurali 460px'i geri verir. */
  body:not(.alo-sepet-acik) .section-menu .menu-right .sticky-cart,
  body:not(.alo-sepet-acik) .section-menu .menu-right .inner-wrapper-sticky{
    width: 0 !important; max-width: 0 !important; overflow: hidden !important;
  }
  /* Menu ustu satiri (harcama + arama) eskiden sepet sutununun da ustune
     tasiyordu (margin-right:-355px). Sutun kalkinca yalniz orta sutunun
     15px sag ic boslugu kadar tasar. */
  #vue-merchant-menu .alo-menu-ust{ margin-right: -15px; }

  /* --- 2) MASA REZERVASYONU PENCERESI ---
     Basliktaki "Masa rezervasyonu" baglantisi (merchant-top-header.php)
     menunun altindaki #vue-booking-reservation bolumunu pencerede acar.
     Bolum kendi Vue koku: yerinden OYNATILMAZ, body.alo-rez-acik iken CSS
     ile ortada sabit pencereye cevrilir (yorum penceresiyle ayni yontem).
     Ortu (.alo-rez-ortu) ve kapatma dugmesi (.alo-rez-kapa) betik
     tarafindan govdeye eklenir. */
  /* nokta ile baglanti arasinda da satirin geri kalanindaki 7px aralik olsun
     (.alo-rest-alt gap:7px); onceden nokta yaziya yapisikti. */
  .alo-rez-sar{ white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
  /* rezervasyon kapaliysa bolum sayfada yok -> baglanti da gizli */
  body:not(:has(#vue-booking-reservation)) .alo-rez-sar{ display: none; }
  /* masaustunde sayfanin altinda GORUNMEZ, yalniz pencerede */
  #vue-booking-reservation{ display: none; }

  .alo-rez-ortu, .alo-rez-kapa{ display: none; }
  body.alo-rez-acik{ overflow: hidden; }
  body.alo-rez-acik .alo-rez-ortu{
    display: block; position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.5);
  }
  body.alo-rez-acik #vue-booking-reservation{
    display: block; position: fixed; z-index: 4001;
    top: 48px; left: 50%; transform: translateX(-50%);
    width: min(640px, calc(100% - 32px)) !important; max-width: none !important;
    max-height: calc(100vh - 96px); overflow-y: auto;
    margin: 0 !important; padding: 80px 28px 28px !important;
    background: #FFFFFF; border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.22);
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
  }
  /* kapatma: pencerenin sol ust kosesi (pencere yarim genisligi = min(320px, 50% - 16px)) */
  body.alo-rez-acik .alo-rez-kapa{
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 4002; top: 62px;
    left: calc(50% - min(320px, 50% - 16px) + 14px);
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    background: #FFFFFF; color: #000000; cursor: pointer; box-shadow: 0 0 0 1px #E8E8E8;
  }
  body.alo-rez-acik .alo-rez-kapa:hover{ background: #F3F3F3; }
  .alo-rez-kapa:focus:not(:focus-visible){ outline: none; }
  /* pencere icinde iki sutun (baslik / form) alt alta */
  body.alo-rez-acik #section-booking{ margin: 0 !important; padding: 0 !important; }
  body.alo-rez-acik #section-booking > .row{ margin: 0; }
  body.alo-rez-acik #section-booking > .row > [class*="col-"]{
    flex: 0 0 100%; max-width: 100%; padding: 0 !important; margin-bottom: 0 !important;
  }
  body.alo-rez-acik #section-booking h5{
    margin: 0 0 20px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: #000000;
  }
  body.alo-rez-acik #section-booking .img-30{ width: 32px; height: 32px; }
  /* tarih / saat / misafir secicilerinin acilir kutulari pencerenin USTUNDE */
  body.alo-rez-acik .el-popper,
  body.alo-rez-acik .el-overlay,
  body.alo-rez-acik .modal{ z-index: 4010 !important; }
  body.alo-rez-acik .modal-backdrop{ z-index: 4005 !important; }
}

/* ====================================================================
   MASA REZERVASYONU PENCERESI — GORUNUM
   11 Eylul 2026 — kullanici: "Table reservations popup biraz guzellestir,
   kotu gozukuyor". Hakkinda penceresi ve sepet cekmecesiyle AYNI Uber
   cizgisi: Inter, siyah/gri, gri zeminli alanlar, hap saatler, siyah ana
   dugme. Bilesen sitenin kendi Vue bileseni (front-booking.js
   ComponentsReservation, Element Plus); SABLONA DOKUNULMADI, yalniz CSS.
   Uc adimin ucu de: 1) misafir/tarih/saat  2) kisisel bilgiler  3) tamam.
   ==================================================================== */
@media (min-width: 992px) {

  /* --- baslik: sandalye gorseli yerine sade buyuk baslik --- */
  body.alo-rez-acik #section-booking .img-30{ display: none; }
  body.alo-rez-acik #section-booking > .row > .col-lg-3 .d-flex > .mr-3{ display: none; }
  body.alo-rez-acik #section-booking > .row > .col-lg-3 h5{ font-size: 28px; margin: 0 0 20px; }
  /* bilesen icindeki basliklar (Rezervasyon ayrintilari / Kisisel bilgiler) */
  body.alo-rez-acik #vue-booking-reservation .col-lg-9 h5{
    font-size: 20px !important; font-weight: 700; letter-spacing: -.01em;
    color: #000000; margin: 22px 0 8px !important;
  }

  /* --- alan etiketleri (Misafir / Tarih / Saat / Ad ...) --- */
  body.alo-rez-acik #vue-booking-reservation .col-lg-9 p.m-0.p-0{
    margin: 0 0 6px !important; font-size: 14px; font-weight: 600; color: #000000;
  }
  body.alo-rez-acik #vue-booking-reservation .col-lg-9 .row{ margin-left: -6px; margin-right: -6px; }
  body.alo-rez-acik #vue-booking-reservation .col-lg-9 .row > .col{ padding-left: 6px; padding-right: 6px; }
  /* sitenin el-select'e verdigi m-2 bosluklari hizayi bozuyordu */
  body.alo-rez-acik #vue-booking-reservation .el-select{ margin: 0 !important; width: 100%; }

  /* --- giris alanlari: gri zemin, cercevesiz, 48px --- */
  body.alo-rez-acik #vue-booking-reservation .el-input__wrapper,
  body.alo-rez-acik #vue-booking-reservation .el-textarea__inner,
  body.alo-rez-acik #vue-booking-reservation .form-control{
    background: #F3F3F3 !important; border: 0 !important; box-shadow: none !important;
    border-radius: 8px !important; min-height: 48px;
    font-family: inherit; font-size: 16px; color: #000000;
  }
  body.alo-rez-acik #vue-booking-reservation .el-input__wrapper.is-focus,
  body.alo-rez-acik #vue-booking-reservation .el-textarea__inner:focus,
  body.alo-rez-acik #vue-booking-reservation .form-control:focus{ box-shadow: inset 0 0 0 2px #000000 !important; }
  body.alo-rez-acik #vue-booking-reservation .el-input__inner{ font-size: 16px; color: #000000; font-family: inherit; }
  body.alo-rez-acik #vue-booking-reservation .el-input.is-disabled .el-input__wrapper{ background: #F6F6F6 !important; }
  body.alo-rez-acik #vue-booking-reservation .el-textarea__inner{ padding: 12px 14px; }

  /* --- saatler: 4 sutunlu duzgun izgara, esit genislikte gri haplar --- */
  body.alo-rez-acik #vue-booking-reservation .el-radio-group{
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px; margin-top: 18px;
  }
  body.alo-rez-acik #vue-booking-reservation .el-radio-button{ width: 100%; margin: 0; }
  body.alo-rez-acik #vue-booking-reservation .el-radio-button__inner{
    width: 100%; padding: 12px 0 !important;
    border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
    background: #F3F3F3; color: #000000;
    font-family: inherit; font-size: 15px; font-weight: 500;
  }
  body.alo-rez-acik #vue-booking-reservation .el-radio-button__inner:hover{ background: #E8E8E8; color: #000000; }
  /* secili saat: siyah */
  body.alo-rez-acik #vue-booking-reservation .el-radio-button.is-active .el-radio-button__inner,
  body.alo-rez-acik #vue-booking-reservation .el-radio-button__original-radio:checked + .el-radio-button__inner{
    background: #000000 !important; color: #FFFFFF !important;
  }

  /* --- ana dugme (Devam / Rezervasyon yap / Tekrar): siyah, tam genislik --- */
  body.alo-rez-acik #vue-booking-reservation .el-button--success{
    height: 56px; border-radius: 8px !important;
    background: #000000 !important; border-color: #000000 !important; color: #FFFFFF !important;
    font-family: inherit; font-size: 17px; font-weight: 500;
  }
  body.alo-rez-acik #vue-booking-reservation .el-button--success:hover{ background: #333333 !important; border-color: #333333 !important; }
  body.alo-rez-acik #vue-booking-reservation .el-button--success.is-disabled{
    background: #E8E8E8 !important; border-color: #E8E8E8 !important; color: #A6A6A6 !important;
  }
  /* ikincil dugme (Rezervasyonu takip et): gri */
  body.alo-rez-acik #vue-booking-reservation .el-button:not(.el-button--success){
    height: 48px; border-radius: 8px !important;
    background: #F3F3F3 !important; border-color: #F3F3F3 !important; color: #000000 !important;
    font-family: inherit; font-weight: 500;
  }

  /* --- metinler ve baglantilar --- */
  body.alo-rez-acik #vue-booking-reservation p{ font-size: 14px; line-height: 1.5; color: #545454; }
  body.alo-rez-acik #vue-booking-reservation a{ color: #000000; text-decoration: underline; cursor: pointer; }
  body.alo-rez-acik #vue-booking-reservation .zmdi-arrow-left{ color: #000000; font-size: 18px; }

  /* --- 3. adim: tamamlandi karti --- */
  body.alo-rez-acik #reservation_ty{ border: 0 !important; padding: 8px 0 0 !important; }
  body.alo-rez-acik #reservation_ty h4{ font-size: 22px; font-weight: 700; color: #000000; margin-top: 12px; }
  body.alo-rez-acik #reservation_ty h6{ font-size: 16px; font-weight: 600; color: #000000; }
  body.alo-rez-acik #reservation_ty .el-button{ width: 100%; margin: 8px 0 0 !important; }

  /* --- acilir secenek listeleri (govdede duruyor; yalniz pencere acikken) --- */
  body.alo-rez-acik .el-select-dropdown__item{
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif; font-size: 15px;
  }
  body.alo-rez-acik .el-select-dropdown__item.selected{ color: #000000; font-weight: 700; }
}




/* ====================================================================
   MOBIL DUZELTME — 17 Eylul 2026
   Kullanici: "mobil response bozuk, Benzer restoranlar sigmiyor ve soldan
   saga gitmiyor; birde bunlari da (restoran bilgisi, resimler, adres,
   acilis saatleri, yorumlar) desktop gibi yap".
   SEBEP: 5B/8 bolumlerinin kurallari @media (min-width:992px) icindeydi;
   mobilde markup CIPLAK kaliyordu (kartlar gorselin dogal 800px genisligi
   -> sayfa 815px yatay tasiyordu). Burada YALNIZ <=991.98px kurallari var,
   masaustu gorunume DOKUNMAZ.
   ==================================================================== */
@media (max-width: 991.98px){
  /* 20 Eylul 2026 (kullanici: "size ozel kampan... bu da oturmamis mobilde"):
     bant mobilde 61px'e cikip sikisik duruyordu; yazi kuculdu, satir araligi ve
     ic bosluk toparlandi, ikon metinle ayni hizaya geldi. */
  /* ==================================================================
     RESTORAN BASLIGI — MOBIL (20 Eylul 2026)
     Kullanici: "restoq / (12 degerlendirme) . , . TL / Saatler, adres... /
     Grup siparisi baslat / Super Restoran — burayi bir duzgun olsun, hepsi
     sacma sapan yerde". Baslik buyudu, ozet satiri sade, rozetler tek satir.
     ================================================================== */
  .page-content .container > h5{ font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px !important; }
  .alo-mob-ozet{ font-size: 13px !important; font-weight: 600 !important; color: #4B5563; margin-bottom: 2px !important; }
  .alo-mob-ozet .zmdi-star{ color: #F5A300; }
  .alo-mob-ozet .alo-ayir{ color: #9CA3AF; margin: 0 2px; }
  .page-content .container > a.chevron > p.font-weight-light{ font-size: 12.5px; color: #6B7280; }
  .alo-mob-rozetler{ display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 2px; }
  .alo-mob-rozetler > div{ margin: 0 !important; }
  .alo-mob-rozetler .rzon-etiket,
  .alo-mob-rozetler .plson-kart{ margin: 0 !important; }

  /* ==================================================================
     HARCAMA CUBUGU — MOBIL (20 Eylul 2026)
     Kullanici: "% 200.00 TL harca, 50.00 TL indirim kazan bu mobilde cok kotu
     gorunuyor, ikon yok". Bicimin tamami @media (min-width:992px) icindeydi;
     mobilde ciplak "%" ve duz yazi cikiyordu. Masaustunun kucuk surumu:
     ================================================================== */
  #vue-merchant-menu .alo-menu-ust{ margin-bottom: 14px !important; }
  #vue-merchant-menu .alo-ilerleme{
    display: flex; align-items: center; gap: 10px;
    background: #FAFAFA; border: 1px solid #EDEFF2; border-radius: 12px; padding: 10px 12px;
  }
  #vue-merchant-menu .alo-ilerleme-ikon{
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: #FF6000; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
  }
  #vue-merchant-menu .alo-ilerleme-govde{ min-width: 0; flex: 1 1 auto; }
  #vue-merchant-menu .alo-ilerleme-metin{
    font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #1F1D1B;
  }
  #vue-merchant-menu .alo-ilerleme-cubuk{
    height: 3px; background: #E9E9E9; border-radius: 2px; margin-top: 6px; overflow: hidden;
  }
  #vue-merchant-menu .alo-ilerleme-cubuk i{
    display: block; height: 100%; width: 0; background: #FF6000;
  }
  #vue-merchant-menu .alo-ilerleme.tamamlandi .alo-ilerleme-ikon,
  #vue-merchant-menu .alo-ilerleme.tamamlandi .alo-ilerleme-cubuk i{ background: #1B8A4B; }

  /* ==================================================================
     KUPONLAR — MOBIL (20 Eylul 2026)
     Kullanici: "% 200.00 TL harca, 50.00 TL indirim kazan bu mobilde cok kotu
     gorunuyor, ikon yok; masaustunde var mobilde yok".
     Sebep: kupon kartlarinin butun bicimi @media (min-width:992px) icindeydi,
     mobilde markup ciplak kaliyordu. Ayni kart mobilde de, yatay kayan serit.
     ================================================================== */
  #vue-merchant-details .alo-kampanya{ margin-top: 18px; }
  #vue-merchant-details .alo-kampanya h2{
    font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; color: #1F1D1B;
  }
  #vue-merchant-details .alo-kampanya-ok{ display: none !important; }
  #vue-merchant-details .alo-kampanya-liste{
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; padding: 16px 0 6px; margin: -10px 0 0;
    scrollbar-width: none;
  }
  #vue-merchant-details .alo-kampanya-liste::-webkit-scrollbar{ height: 0; display: none; }
  #vue-merchant-details .alo-kampanya-kart{
    flex: 0 0 218px; scroll-snap-align: start; position: relative;
    background: #FAFAFA; border: 1px solid #EDEFF2; border-radius: 14px;
    padding: 20px 12px 12px; text-align: center;
  }
  #vue-merchant-details .alo-kampanya-ikon{
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px; border-radius: 50%; background: #FF6000; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  }
  #vue-merchant-details .alo-kampanya-bas{
    font-size: 13px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; color: #1F1D1B;
  }
  #vue-merchant-details .alo-kampanya-det{ font-size: 11.5px; color: #6F6A64; line-height: 1.4; }

  .alo-giris-bandi{
    padding: 9px 14px !important; font-size: 12.5px !important; line-height: 1.35 !important;
    gap: 7px !important; align-items: center !important;
  }
  .alo-giris-bandi svg, .alo-giris-bandi i{ flex: 0 0 auto; }


  /* ---- Benzer restoranlar: yatay kayan serit ---- */
  /* 20 Eylul 2026: mobilde de menu ile serit arasi acildi (16px -> 40px). */
  .alo-benzer{ position: relative; padding-bottom: 4px; margin-top: 40px !important; }
  .alo-benzer h2{
    font-size: 18px; font-weight: 800; letter-spacing: -.02em;
    color: #222; margin: 0 0 12px;
  }
  .alo-benzer-ok{ display: none !important; }
  .alo-benzer-serit{
    display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 10px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .alo-benzer-serit::-webkit-scrollbar{ height: 0; display: none; }
  .alo-benzer-kart{
    flex: 0 0 186px; width: 186px; display: block; scroll-snap-align: start;
    background: #fff; border: 1px solid #EDEDED; border-radius: 14px;
    overflow: hidden; color: inherit; text-decoration: none !important;
  }
  .alo-benzer-gorsel{
    display: block; width: 100%; aspect-ratio: 16 / 10; background: #F6F7F9; overflow: hidden;
  }
  .alo-benzer-gorsel img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .alo-benzer-govde{ display: block; padding: 10px 12px 12px; }
  .alo-benzer-ust{ display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
  .alo-benzer-logo{
    width: 22px; height: 22px; border-radius: 5px; object-fit: cover;
    flex: 0 0 22px; background: #F6F7F9;
  }
  .alo-benzer-ad{
    flex: 1 1 0%; min-width: 0; font-size: 13.5px; font-weight: 700; color: #222;
    line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .alo-benzer-puan{
    display: inline-flex; align-items: center; gap: 3px; flex: none;
    font-size: 12px; font-weight: 700; color: #222;
  }
  .alo-benzer-puan .zmdi{ color: #F5A623; font-size: 12px; }
  .alo-benzer-puan small{ color: #6B6B6B; font-weight: 500; }
  .alo-benzer-alt{ display: block; font-size: 12px; color: #6B6B6B; }

  /* ---- Restoran bilgisi / Resimler / Adres / Acilis saatleri: kartlar ---- */
  #section-about, #section-gallery, #section-address{
    background: #fff; border: 1px solid #EDEDED; border-radius: 14px;
    padding: 14px !important; margin-bottom: 12px !important;
  }
  /* Icerigi bos galeri bolumu mobilde bos kart olarak gorunmesin */
  #section-gallery:not(:has(.col-lg-9 img)){ display: none; }
  #section-about h5, #section-gallery h5, #section-address h5{
    font-size: 15px; font-weight: 700; color: #222; margin: 0 0 2px; line-height: 1.3;
  }
  #section-about .row, #section-gallery .row, #section-address .row{ margin: 0; }
  #section-about .row > [class*="col-"], #section-gallery .row > [class*="col-"],
  #section-address .row > [class*="col-"]{ padding-left: 0; padding-right: 0; }
  #section-about .description{
    font-size: 13.5px; line-height: 1.6; color: #4A4A4A; margin-top: 8px;
  }
  #section-about .read-more{
    display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #D64E00;
  }
  #section-address .d-flex + .d-flex{
    margin-top: 12px; padding-top: 12px; border-top: 1px solid #F0F0F0;
  }
  #section-address p.m-0{ font-size: 13.5px; line-height: 1.55; color: #4A4A4A; }
  #section-address a.a-12{
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px; margin-top: 8px;
    border: 1px solid #EDEDED; border-radius: 9px; background: #F6F7F9;
    font-size: 13px; font-weight: 600; color: #222;
  }
  #section-address a.a-12 u{ text-decoration: none; }
  #section-address table{ margin-top: 6px; }
  #section-address table td{
    font-size: 13px; color: #4A4A4A; padding: 5px 0 !important;
    border-bottom: 1px solid #F4F4F4; vertical-align: top;
  }
  #section-address table tr:last-child td{ border-bottom: 0; }
  #section-address table td.bold{ color: #222; font-weight: 600; text-align: right; }
  #section-address .col-lg-9 img.rounded{ border-radius: 12px !important; margin-top: 12px; }

  /* ---- Yorumlar: kart gorunumu ---- */
  #section-review .alo-yorum-bas h5{ font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
  #section-review .card{
    border: 1px solid #EDEDED !important; border-radius: 14px !important;
    box-shadow: none !important; margin-bottom: 10px !important;
  }
  #section-review .card-body{ padding: 12px 14px !important; }
  #section-review .card-body img.rounded-circle{ width: 40px; height: 40px; }
  #section-review .card-body strong{ font-size: 14px; }
  #section-review .alo-kart-kirilim{
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 8px;
    font-size: 12.5px; color: #6B6B6B;
  }
  #section-review .alo-kart-kirilim b{ color: #222; }
  #section-review .card-body p{ font-size: 13.5px; line-height: 1.55; color: #333; margin-bottom: 0 !important; }
  #section-review .el-rate--large .el-rate__icon{ font-size: 16px; }

  /* Yorum ozeti + suzgec (masaustundeki pencere stilinin mobil surumu) */
  #section-review .alo-yorum-ozet{
    display: flex; flex-direction: column; gap: 12px;
    border: 1px solid #E6E6E6; border-radius: 14px; padding: 14px; margin-bottom: 12px;
  }
  #section-review .alo-yorum-ozet-sol{ display: flex; align-items: center; gap: 14px; }
  #section-review .alo-yorum-puan{
    display: flex; align-items: center; gap: 4px; font-size: 26px; font-weight: 800; color: #222; line-height: 1;
  }
  #section-review .alo-yorum-puan .zmdi{ color: #F5A623; font-size: 20px; }
  #section-review .alo-yorum-sayi{ display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #6B6B6B; }
  #section-review .alo-yorum-sayi .zmdi{ color: #6B6B6B; margin-right: 3px; }
  #section-review .alo-yorum-kirilim{ display: flex; flex-direction: column; gap: 5px; }
  #section-review .alo-kirilim-satir{
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
    font-size: 13px; color: #4A4A4A;
  }
  #section-review .alo-kirilim-yildiz{ color: #F5A623; font-size: 13px; letter-spacing: 1px; line-height: 1; }
  #section-review .alo-kirilim-ad{ font-weight: 600; color: #222; white-space: nowrap; }
  #section-review .alo-kirilim-deger{ font-weight: 700; color: #222; }
  #section-review .alo-yorum-not{
    background: #F6F7F9; border-radius: 12px; padding: 11px 14px; margin-bottom: 12px;
    font-size: 12.5px; color: #4A4A4A; line-height: 1.45;
  }
  #section-review .alo-yorum-ara{ position: relative; margin-bottom: 10px; }
  #section-review .alo-yorum-ara .zmdi{
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9a9a9a; font-size: 16px;
  }
  #section-review .alo-yorum-ara input{
    width: 100%; height: 42px; padding: 0 14px 0 36px;
    border: 1px solid #E6E6E6; border-radius: 11px; background: #fff;
    font-family: inherit; font-size: 14px; color: #222; outline: none;
  }
  #section-review .alo-yorum-ara input:focus{ border-color: #FFD2B8; box-shadow: 0 0 0 3px rgba(255,96,0,.10); }
  #section-review .alo-yorum-suzgec{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  #section-review .alo-cip{
    border: 1px solid #E6E6E6; background: #fff; border-radius: 999px; padding: 7px 13px;
    font-family: inherit; font-size: 12.5px; font-weight: 600; color: #4A4A4A; cursor: pointer; white-space: nowrap;
  }
  #section-review .alo-cip.secili{ border-color: #FF6000; background: #FFF1EA; color: #D64E00; }

  /* ---- Teslimat / Gel-al / Masada sekmeleri satira sigsin ---- */
  #vue-merchant-details .btn-group-toggle.btn-group-rounded{ flex-wrap: wrap; max-width: 100%; }
}

/* ====================================================================
   SAYFA ZEMINI — 20 Eylul 2026
   Kullanici: "arka renk cok kotu".
   "AloYemek Tema" eklentisi butun on yuze mat bej zemin veriyor
   (alotema.css: body,.page-content{background:var(--alo-bg)} = #F5F3EF).
   Restoran sayfasi tasarimi ise beyaz zemin + gri menu alani uzerine
   kurulu (TrendyolGo duzeni); bej zemin basliktaki beyaz kartlari ve
   kuponlari soluklastiriyordu.
   Bu kural YALNIZ restoran sayfasinda (body.controller-menu.action-menu)
   zemini beyaza ceker; temanin diger sayfalari (anasayfa, liste, mutfak,
   kampanya, arama) bej kalir. Mobil + masaustu ayni (media DISINDA).
   ==================================================================== */
body.controller-menu.action-menu,
body.controller-menu.action-menu .page-content{ background: #FFFFFF; }

/* ====================================================================
   OK DUGMELERI — DAR MASAUSTUNDE TASMA (20 Eylul 2026)
   Kampanya ve "Benzer restoranlar" seritlerinin oklari kutunun 14px DISINDA
   duruyor (left/right: -14px). Genis ekranda sorun yok; 1280px ve altinda
   kapsayici tam genisligi kapladigi icin sayfa 14px yatay kayiyordu.
   Dar ekranda oklar iceri alinir. Bilgi seridine DOKUNULMAZ (sirasi sabit).
   ==================================================================== */
@media (min-width: 992px) and (max-width: 1340px){
  #vue-merchant-details .alo-kampanya-ok-sol,
  .alo-benzer-ok-sol{ left: 0 !important; }
  #vue-merchant-details .alo-kampanya-ok-sag,
  .alo-benzer-ok-sag{ right: 0 !important; }
}

/* 20 Eylul 2026: bilgi seridindeki "... kadar acik" durumu. Kural MEDIA DISINDA:
   ilk konuldugu yer mobil blogunun icine dusmustu, masaustunde bicimsiz kaliyordu. */
#vue-merchant-details .alo-acik-simdi{
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: #E8F6EE; color: #1B7F4B; font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* 1.0.1 (26 Eyl): yorum etiketleri (Lezzetli / Sicak geldi...) yaziya ve birbirine yapismasin; dar ekranda alt satira gecsin */
.alo-yorum-etiket{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.alo-yorum-etiket .rounded-pill{display:inline-block;padding:5px 12px !important;line-height:1.3;white-space:nowrap}
/* kartin son satiri (etiket/galeri) alttan bosluk birakmasin: ust 14px = alt 14px, icerik yukari kaymis gorunmesin */
#section-review [data-konu] > .card-body > :last-child{margin-bottom:0 !important}