/* ===================================================================
   ALOYEMEK TEMA 1.0.0 — ust bar + alt bilgi  (18 Eylul 2026)
   Yalniz eklenti acikken yuklenir (CAloTema::stilHeadHtml).
   Belirtecler maket tuvalinden: mat turuncu #E4682F, zemin #F5F3EF,
   yuzey beyaz + yumusak golge, koseler 14-28px, hap dugmeler.
   =================================================================== */

:root {
  --alo-ink:   #1F1D1B;
  --alo-mut:   #6F6A64;
  --alo-gri:   #9A948D;
  --alo-acc:   #E4682F;
  --alo-acc-a: #F7E8DE;
  --alo-acc-k: #B4501F;
  --alo-dark:  #2A2724;
  /* 20 Eylul 2026 — kullanici: "arka renk cok kotu". Sayfa zemini BEYAZ oldu.
     --alo-zemin : sayfanin zemini (body/.page-content/hero)
     --alo-bg    : kucuk yuzeyler (adres hapi, puan rozeti, mutfak halkasi, fiyat hapi)
     Bej tonlar notr acik griye cekildi; beyaz zeminde sariya calmiyor. */
  --alo-zemin: #FFFFFF;
  --alo-bg:    #F4F5F7;
  --alo-sur:   #FFFFFF;
  --alo-line:  #EDEFF2;
  --alo-soft:  0 1px 2px rgba(31,29,27,.04), 0 10px 30px rgba(31,29,27,.06);
  --alo-yazi:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body,
.page-content { background: var(--alo-zemin); }
body { font-family: var(--alo-yazi); color: var(--alo-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3,
h4, h5, h6 { font-family: var(--alo-yazi); letter-spacing: -.01em; }
.alo-ikon { display: block; flex-shrink: 0; }

/* ---------------------------------------------- duyuru bandi */
.alo-duyuru {
  /* 26 Eyl 2026 DENEME: siyah (kullanici). ESKI RENGE DONMEK ICIN: background: var(--alo-acc); */
  position: relative; background: #111111;
  min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 10px 56px;
}
.alo-duyuru-ic { display: flex; align-items: center; gap: 18px; }
.alo-duyuru-dugme {
  display: inline-flex; align-items: center; height: 44px; padding: 0 26px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.85); color: #fff; font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background .2s ease;
}
.alo-duyuru-dugme:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.alo-duyuru-kapat {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 6px; cursor: pointer; line-height: 0;
}

/* ---------------------------------------------- ust bar */
.alo-ust {
  position: sticky; top: 0; z-index: 1030; background: var(--alo-sur);
  box-shadow: 0 1px 0 rgba(31,29,27,.05), 0 10px 26px rgba(31,29,27,.05);
}
.alo-ust-satir {
  min-height: 82px; padding: 8px 96px; display: flex; align-items: center; gap: 24px;
}
.alo-ust-logo { flex: 0 0 auto; }
.alo-ust-logo img, .alo-ust-logo .top-logo img { max-height: 34px; width: auto; }
/* 20 Eylul 2026 (kullanici: "adres bolumu solda logoya yakin olsun"):
   ortada degil, logonun hemen yaninda. */
.alo-ust-adres { flex: 0 1 auto; display: flex; justify-content: flex-start; min-width: 0; margin-right: auto; }
.alo-ust-sag { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.alo-adres-hap {
  display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px;
  border-radius: 999px; background: var(--alo-bg); color: var(--alo-ink); text-decoration: none;
}
.alo-adres-hap:hover { background: var(--alo-line); color: var(--alo-ink); text-decoration: none; }
.alo-adres-etiket { font-size: 15px; color: var(--alo-mut); }
.alo-adres-secim  { font-size: 15px; font-weight: 700; }

/* sitenin adres bileseni (widget-nav / widget-address) ust barda */
.alo-ust-adres .nav-address,
.alo-ust-adres .change-address-wrap { margin: 0; }
.alo-ust-adres > div { max-width: 100%; }

/* ====================================================================
   UST BAR — YEMEKSEPETI DUZENI (20 Eylul 2026)
   Kullanici Yemeksepeti basligini ornek verdi: "header boyle olsun, cok guzel
   duruyor, rengi ikonlar vs". Desen birebir alindi, RENK bizim (turuncu):
     [logo] [konum ikonu + adres]            [Giris Yap] [Kaydolun] [dil] [sepet]
     uyede:                                  [bildirim] [kisi + ad] [dil] [kalp] [sepet]
   Sitenin kendi "Sign in" baglantisi gizlenir; ogeler tek esnek satirda
   siralanir (ul.top-menu display:contents -> li'ler .alo-ust-sag'in ogesi olur).
   ==================================================================== */
.alo-ust-sag { display: flex; align-items: center; gap: 14px; }
.alo-ust-sag .top-menu { display: contents; }
.alo-ust-sag .top-menu > li { display: flex; align-items: center; }
.alo-ust-sag li.notification-dropdown { order: 5; }
.alo-ust-sag li:has(.userprofile)      { order: 10; }
.alo-ust-sag li:has(.language-bar)     { order: 20; margin: 0 !important; }
.alo-ust-sag .alo-ub-kalp              { order: 30; }
.alo-ust-sag li:has(.cart-handle)      { order: 40; }
.alo-ust-sag .alo-ub-giris             { order: 12; }
.alo-ust-sag .alo-ub-kayit             { order: 14; }
/* sitenin kendi giris baglantisi (biz kendi dugmemizi basiyoruz) */
.alo-ust-sag li.line-left { display: none !important; }

/* misafir: cizgili "Giris Yap" + dolu "Kaydolun" */
.alo-ust-sag .alo-ub-giris,
.alo-ust-sag .alo-ub-kayit {
  display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
  border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap;
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.alo-ust-sag .alo-ub-giris {
  border: 1.5px solid var(--alo-line); color: var(--alo-ink); background: var(--alo-sur);
}
.alo-ust-sag .alo-ub-giris:hover { background: var(--alo-bg); color: var(--alo-ink); text-decoration: none; }
.alo-ust-sag .alo-ub-kayit { background: var(--alo-acc); color: #fff; }
.alo-ust-sag .alo-ub-kayit:hover { background: var(--alo-acc-k); color: #fff; text-decoration: none; }

/* uye: favoriler kalbi */
.alo-ust-sag .alo-ub-kalp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--alo-ink);
  background: transparent; text-decoration: none;
}
.alo-ust-sag .alo-ub-kalp:hover { background: var(--alo-bg); color: var(--alo-acc); }

/* uye: kisi ikonu + ad (Yemeksepeti'nde oldugu gibi) */
.alo-ust-sag .userprofile .dropdown-toggle {
  display: inline-flex !important; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--alo-ink); padding: 0 4px;
}
.alo-ust-sag .userprofile .dropdown-toggle::before {
  content: ""; width: 22px; height: 22px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-1.5A5.5 5.5 0 0 0 14.5 14h-5A5.5 5.5 0 0 0 4 19.5V21'/%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3C/svg%3E") center/22px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-1.5A5.5 5.5 0 0 0 14.5 14h-5A5.5 5.5 0 0 0 4 19.5V21'/%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3C/svg%3E") center/22px no-repeat;
}

/* adres: gri hap yerine konum ikonu + duz yazi (Yemeksepeti deseni) */
.alo-ust-adres .widget-dropdown > button {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; height: auto !important; gap: 8px; color: var(--alo-ink);
  font-size: 15px; font-weight: 600;
}
.alo-ust-adres .widget-dropdown > button::before {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.6'/%3E%3C/svg%3E") center/20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.6'/%3E%3C/svg%3E") center/20px no-repeat;
}

/* kullanici menusu (WidgetUserNav / #vue-cart-preview) hap gorunumu */
.alo-ust-sag .top-menu { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; }
.alo-ust-sag .top-menu > li { display: flex; align-items: center; margin: 0; padding: 0; }
.alo-ust-sag .top-menu > li:empty { display: none; }
.alo-ust-sag .language-bar .dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.alo-ust-sag .language-bar img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
/* "Sepetiniz" yazisi gizlenir, sepet ikonu daire icinde durur */
.alo-ust-sag .ssm-toggle-navx:not(.cart-handle) { display: none !important; }
.alo-ust-sag .cart-handle {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  background: var(--alo-sur); box-shadow: var(--alo-soft);
  display: flex; align-items: center; justify-content: center;
}
.alo-ust-sag .cart-handle img { width: 21px; height: 21px; }
/* 20 Eylul 2026 (kullanici: "header'daki sepet kucuk, 2 urun var ama 2 cok kucuk
   gorunmuyor"): rozet buyutuldu ve ortalandi. */
.alo-ust-sag .cart-handle .badge {
  position: absolute; top: -4px; right: -4px; background: var(--alo-acc) !important; color: #fff;
  border: 2px solid #fff; font-size: 12px; font-weight: 800; line-height: 1;
  min-width: 22px; height: 22px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
}
/* 20 Eylul 2026 (kullanici: "header'da iki tane yan yana sepet var"):
   user-nav'daki "Sepetiniz" METIN baglantisi da .line-left icinde ve asagidaki
   koyu hap kuralini aliyordu; yanindaki yuvarlak canta ikonuyla birlikte iki
   sepet dugmesi gorunuyordu. Metin baglantisi gizlenir, canta ikonu kalir.
   (Onizlemeli surum .ssm-toggle-navx zaten gizliydi; bu, #vue-cart surumu.) */
.alo-ust-sag .line-left > a[href="#vue-cart"]{ display: none !important; }
.alo-ust-sag li.line-left:has(> a[href="#vue-cart"]){ display: none !important; }
/* misafir surumunde (user-nav-guest) ayni baglanti .line-left DISINDA basiliyor */
.alo-ust-sag .top-menu > li > a[href="#vue-cart"]:not(.cart-handle){ display: none !important; }
.alo-ust-sag .top-menu > li:has(> a[href="#vue-cart"]:not(.cart-handle)){ display: none !important; }

/* giris baglantisi koyu hap dugme */
.alo-ust-sag .line-left { border: 0 !important; padding-left: 0 !important; }
.alo-ust-sag .line-left > a {
  display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 999px;
  background: var(--alo-dark); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.alo-ust-sag .line-left > a:hover { background: #1F1D1B; color: #fff; text-decoration: none; }
.alo-ust-sag .hamburger { margin-left: 4px; }
/* alt bilgi: menu ya da sosyal yoksa bosluk kalmasin */
.alo-alt-menu:empty, .alo-alt-sosyal:empty { display: none; }

/* ---------------------------------------------- sekme satiri */
.alo-ust-sekmeler {
  min-height: 64px; padding: 0 96px; display: flex; align-items: center; gap: 34px;
  border-top: 1px solid var(--alo-line);
}
.alo-sekme-liste { display: flex; align-items: center; gap: 34px; min-width: 0; }
.alo-sekme {
  position: relative; display: inline-flex; align-items: center; gap: 9px; height: 64px;
  font-size: 15px; font-weight: 600; color: var(--alo-mut); text-decoration: none; white-space: nowrap;
}
.alo-sekme:hover { color: var(--alo-ink); text-decoration: none; }
.alo-sekme-aktif { color: var(--alo-ink); font-weight: 700; }
.alo-sekme-aktif::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--alo-acc);
}
.alo-ust-arama { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
/* 20 Eylul 2026 (kullanici: "bizim arama bolumu masaustunde cok buyuk,
   Yemeksepeti'ne bak, boyutu normal"): 560x48 -> 430x44, yazi 14px. */
.alo-arama-hap {
  display: flex; align-items: center; gap: 10px; width: 430px; max-width: 100%; height: 44px;
  padding: 0 18px; border-radius: 999px; background: var(--alo-line);
  color: var(--alo-gri); font-size: 14px; text-decoration: none;
}
.alo-arama-hap:hover { background: #E7E3DC; color: var(--alo-mut); text-decoration: none; }
/* sitenin arama bileseni (search-nav) ayni kutuya otursun */
.alo-ust-arama .search-nav,
.alo-ust-arama form { width: 430px; max-width: 100%; }
.alo-ust-arama .form-control { height: 44px; border-radius: 999px; background: var(--alo-line); border: 0; }

/* ---------------------------------------------- alt bilgi */
.alo-alt { background: #FAFAF9; border-top: 1px solid #ECEDEF; }   /* 20 Eyl (kullanici): footer once #F7F8FA, sonra istek uzerine MAT BEYAZ #FAFAF9 (notr-sicak, parlak beyaz degil) */
.alo-alt-ic { padding: 44px 96px 0; }   /* 20 Eyl: bolum hizasiyla ayni (96px) */
.alo-alt-ust { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.alo-alt-logo { flex: 1 1 200px; }
.alo-alt-logo img, .alo-alt-logo .footer-logo img { max-height: 30px; width: auto; }
.alo-alt-sosyal { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.alo-alt-sosyal a {
  width: 38px; height: 38px; border-radius: 50%; background: var(--alo-sur); box-shadow: var(--alo-soft);
  display: flex; align-items: center; justify-content: center; color: var(--alo-ink); font-size: 18px;
}
.alo-alt-sosyal a:hover { color: var(--alo-acc); }
.alo-alt-bulten { flex: 1 1 280px; display: flex; justify-content: flex-end; }
/* 21 Eyl (kullanici: "footerdaki abone butonu tasarimi bozulmus"): sitenin kendi
   isaretlemesinde buton .butoon-wrap ile input'un UZERINE absolute biniyor. Ikisini tek
   hap icine aliyoruz: beyaz zemin + ince cizgi, buton sagda 999px, kutunun icinde. */
.alo-alt-bulten .esubscription { position: relative; display: flex; align-items: center; width: 100%; max-width: 330px;
  height: 52px; background: #fff; border: 1px solid var(--alo-line); border-radius: 999px; padding: 0 5px 0 6px; }
.alo-alt-bulten .field-wrap { flex: 1 1 auto; min-width: 0; }
.alo-alt-bulten .el-input, .alo-alt-bulten .el-input__wrapper { width: 100%; background: transparent !important;
  box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.alo-alt-bulten .el-input__inner { height: 42px; border: 0 !important; border-radius: 999px; background: transparent !important;
  padding-left: 14px; font-size: 14px; }
.alo-alt-bulten .butoon-wrap { position: static !important; flex: 0 0 auto; }
.alo-alt-bulten .butoon-wrap .el-button { height: 42px !important; padding: 0 20px !important; border-radius: 999px !important;
  margin: 0 !important; font-size: 14px; }

.alo-alt-menu { margin-top: 34px; padding-top: 30px; }
.alo-alt-menu .sub-footer-nav { border-top: 0; padding-top: 0; }
.alo-alt-menu h6 { font-size: 15px; font-weight: 700; color: var(--alo-ink); margin-bottom: 12px; }
.alo-alt-menu a { font-size: 13px; color: var(--alo-mut); line-height: 1.4; }
.alo-alt-menu a:hover { color: var(--alo-ink); }

.alo-alt-bant {
  margin-top: 36px; border-top: 1px solid #E7E3DC; padding: 22px 0 30px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.alo-alt-telif { flex: 1 1 0; font-size: 14px; color: var(--alo-mut); }
.alo-alt-magaza { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.alo-alt-magaza img { height: 34px; width: auto; display: block; }
.alo-alt-site { flex: 1 1 0; text-align: right; font-size: 14px; color: var(--alo-mut); }
.alo-alt-site a { color: var(--alo-ink); font-weight: 600; }

/* ---------------------------------------------- mobil */
@media (max-width: 991.98px) {
  .alo-duyuru { min-height: 46px; padding: 6px 40px; }
  .alo-duyuru-ic { gap: 10px; min-width: 0; }
  .alo-duyuru-dugme {
    height: 32px; padding: 0 14px; font-size: 10.5px; letter-spacing: .02em;
    max-width: 68vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 32px;
  }
  .alo-duyuru-ic .alo-ikon { width: 22px; height: 22px; }
  .alo-duyuru-kapat { right: 10px; }
  .alo-ust-satir { min-height: 60px; padding: 8px 14px; gap: 10px; }
  .alo-ust-logo img, .alo-ust-logo .top-logo img { max-height: 26px; }
  .alo-ust-adres { justify-content: flex-start; min-width: 0; }
  .alo-adres-hap { height: 40px; padding: 0 12px; gap: 6px; max-width: 100%; min-width: 0; }
  .alo-adres-etiket { display: none; }
  .alo-adres-secim { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .alo-ust-sag { gap: 8px; }
  .alo-ust-sag .cart-handle { width: 40px; height: 40px; }
  .alo-ust-sag .cart-handle img { width: 18px; height: 18px; }
  .alo-ust-sekmeler {
    min-height: 52px; padding: 0 16px; gap: 18px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .alo-ust-sekmeler::-webkit-scrollbar { display: none; }
  /* 20 Eylul 2026 (kullanici: "bunlar mobilde tasiyor cunku hareketli degil,
     kaydirma yok sola ya da saga"): ust cubukta overflow-x:auto vardi ama ic liste
     min-width:0 ile SIKISIYORDU, dolayisiyla kaydirilacak tasma olusmuyor ve son
     sekme kirpik kaliyordu. Liste artik dogal genisligini alir -> serit kayar. */
  .alo-sekme-liste { gap: 18px; flex: 0 0 auto; min-width: max-content; }
  /* 20 Eylul 2026 (kullanici: "elle kaydiriyorum kotu kayiyor sanki ucuyor,
     restoran tiklayacagim Gel al'a gidiyor; profesyonel olsun"):
     sekmeler tutunarak kaysin (scroll-snap), parmak yatayda kalsin (touch-action)
     ve kaydirirken tiklama tetiklenmesin (alotema.js kaydirma esnasinda engeller). */
  .alo-ust-sekmeler {
    scroll-padding-left: 16px; scroll-snap-type: x proximity;
    touch-action: pan-x; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  }
  .alo-sekme { scroll-snap-align: start; }
  .alo-ust-sekmeler.alo-kayiyor .alo-sekme { pointer-events: none; }
  .alo-ust-sekmeler::after { content: ""; flex: 0 0 8px; }
  .alo-sekme { height: 52px; font-size: 13px; gap: 6px; flex: 0 0 auto; }
  /* adres hapi dar kalmasin: logodan sonra kalan alani kullansin, uzun adres ... ile kisalsin.
     Mobilde logo biraz kuculur, kazanilan yer adrese gider (adres "Adresinizi s..." diye
     cok erken kesiliyordu). */
  .alo-ust-logo img, .alo-ust-logo .top-logo img { max-height: 26px; }
  .alo-ust-satir { gap: 12px; }
  .alo-ust-adres { flex: 1 1 auto; min-width: 0; }
  .alo-ust-adres .alo-adres-hap,
  .alo-ust-adres > div { max-width: 100%; min-width: 0; }
  /* 20 Eylul 2026: sitenin adres dugmesi hucreden TASIP sepet/menu ikonlarinin
     ustune biniyordu (dugme 172px, hucre 94px). Dugme hucreye sigdirilir, uzun
     adres ... ile kisalir. */
  /* 20 Eylul 2026 (kullanici: "mobilde iki tane adres bolumu cikiyor, headerdaki
     adresi kaldir sadece mobil responsede; masaustunde cok guzel duruyor"):
     mobilde sitenin kendi "Teslimat / Simdi" cubugu zaten adres seciyor; ust bardaki
     adres GIZLENIR. Masaustu AYNEN kalir. */
  .alo-ust-satir { flex-wrap: nowrap; }
  .alo-ust-logo { flex: 1 1 auto; }
  .alo-ust-sag { flex: 0 0 auto; }
  .alo-ust-adres { display: none !important; }
  /* 20 Eylul 2026 (kullanici: "Ucretsiz teslimat icin kaydolun bu mobilde tasiyor"):
     masaustu icin eklenen iki dugme mobilde satiri 635px'e cikariyordu. Mobilde
     gizlenir; giris/kayit baglantilari zaten hamburger cekmecesinde var. */
  .alo-ust-sag .alo-ub-giris,
  .alo-ust-sag .alo-ub-kayit { display: none !important; }
  /* favoriler zaten cekmecede; mobilde kalp basilmaz */
  .alo-ust-sag .alo-ub-kalp { display: none !important; }
  /* hamburger her zaman en sagda kalsin (masaustu siralamasi mobilde onu araya aliyordu) */
  .alo-ust-sag li:has(.hamburger) { order: 90 !important; margin-left: 2px !important; }
  .alo-adres-secim, .alo-adres-etiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .alo-sekme .alo-ikon { width: 17px; height: 17px; }
  .alo-ust-arama { display: none; }
  .alo-alt-ic { padding: 32px 16px 0; }
  .alo-alt-ust { gap: 18px; }
  .alo-alt-bulten { justify-content: flex-start; }
  .alo-alt-bant { flex-direction: column; align-items: flex-start; gap: 14px; }
  .alo-alt-site { text-align: left; }
}

/* ===================================================================
   ANASAYFA (P2) — hero, kategoriler, seritler, bantlar
   =================================================================== */

/* ---------------- ortak bolum kabugu ---------------- */
/* 20 Eylul 2026 (kullanici: "'Is ortagimiz ol' yazisi cok solda, 'Yeni Restoranlar
   Kesfedin' hizasinda olsun"): serit iceren bolumlerde .swiperOutsideContainer
   16px ic bosluk ekliyordu (baslik 96px), serit icermeyenler 80px'te kaliyordu.
   Artik butun bolumler 96px; seritteki ek bosluk sifirlandi. */
.alo-bolum { max-width: 1440px; margin: 0 auto; padding: 0 96px 44px; }
.alo-bolum .swiperOutsideContainer { padding-left: 0 !important; padding-right: 0 !important; }
.alo-bolum-bas { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; }
.alo-bolum-bas h2, .alo-bolum-bas h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.alo-bolum-bas p { font-size: 14px; color: var(--alo-mut); margin: 0; }
.alo-dugme {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px;
  border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer;
}
.alo-dugme-turuncu { background: var(--alo-acc); color: #fff; }
.alo-dugme-turuncu:hover { background: #D25C26; color: #fff; text-decoration: none; }
.alo-dugme-beyaz { background: var(--alo-sur); color: var(--alo-ink); }
.alo-dugme-beyaz:hover { background: #F1F3F6; color: var(--alo-ink); text-decoration: none; }

/* ---------------- hero ---------------- */
.alo-hero { background: var(--alo-zemin); }
/* 20 Eylul 2026 (kullanici: "anasayfada slayt cok buyuk ve saga cok yanasmis,
   'Favori Mutfaklariniz' hizasinda olsun"): hero ic bosluklari sayfanin diger
   bolumleriyle ayni hizaya cekildi (sol/sag 96px) ve slayt kuculdu. */
.alo-hero-ic {
  max-width: 1440px; margin: 0 auto; padding: 48px 96px 40px;   /* 20 Eyl: arayi avantaj seridi dolduruyor */
  display: flex; gap: 48px; align-items: center;
}
.alo-hero-sol { flex: 1 1 0; max-width: 660px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.alo-hero-baslik { font-size: 52px; line-height: 1.06; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.alo-hero-donen { display: flex; align-items: baseline; gap: 10px; font-size: 26px; font-weight: 700; }
.alo-donen-etiket { color: var(--alo-mut); font-weight: 600; }
.alo-don { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.12em; height: 1.12em; color: var(--alo-acc); }
.alo-don i { display: block; height: 1.12em; font-style: normal; white-space: nowrap; }
.alo-don > span { display: block; animation: aloDon 16s cubic-bezier(.62,.03,.32,1) infinite; }
.alo-hero-alt { font-size: 16px; color: var(--alo-mut); margin: 0; line-height: 1.55; }
.alo-hero-arama { max-width: 560px; }
.alo-hero-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.alo-cip {
  height: 36px; padding: 0 15px; border-radius: 999px; background: var(--alo-sur); box-shadow: var(--alo-soft);
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 600;
}
.alo-hero-sag { flex: 0 0 560px; max-width: 44%; }

/* 21 Eylul 2026 (kullanici, lieferando ornegi): masaustunde slayt kutu olmaktan cikip
   hero'nun SAG YARISINI kenardan kenara kaplar; sol kenari capraz kesilir. Sol taraf
   (baslik/adres/cipler) aynen kalir, slayt gecisleri devam eder. */
@media (min-width: 992px) {
  .alo-hero { position: relative; overflow: hidden; }
  .alo-hero-ic { position: relative; z-index: 1; min-height: 430px; align-items: center; }
  .alo-hero-sol { max-width: 560px; }
  .alo-hero-sag {
    position: absolute; right: 0; top: 0; bottom: 0; width: 48%; max-width: none; flex: none; z-index: 0;
    -webkit-clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
  }
  .alo-hero-sag .alo-slayt { height: 100%; border-radius: 0; }
  .alo-hero-sag .alo-slayt-nokta { left: auto; right: 26px; bottom: 22px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .alo-hero-sag { width: 44%; }
  .alo-hero-sol { max-width: 470px; }
}
.alo-slayt {
  position: relative; height: 360px; border-radius: 28px; overflow: hidden; background: var(--alo-line);
}
.alo-slayt-kare { position: absolute; inset: 0; margin: 0; opacity: 0; animation: aloSlayt 25s linear infinite; }
.alo-slayt-tek .alo-slayt-kare { opacity: 1; animation: none; }
.alo-slayt-tek .alo-slayt-kare ~ .alo-slayt-kare { display: none; }
.alo-slayt-kare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alo-slayt-nokta { position: absolute; left: 22px; bottom: 18px; display: flex; gap: 7px; z-index: 2; }
.alo-slayt-nokta span {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55);
  animation: aloNokta 25s steps(1) infinite;
}
@keyframes aloGiris { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.alo-giris   { animation: aloGiris .7s ease both; }
.alo-giris-2 { animation: aloGiris .7s .12s ease both; }
@keyframes aloDon {
  0%, 9.3%     { transform: translateY(0); }
  12.5%, 21.8% { transform: translateY(-12.5%); }
  25%, 34.3%   { transform: translateY(-25%); }
  37.5%, 46.8% { transform: translateY(-37.5%); }
  50%, 59.3%   { transform: translateY(-50%); }
  62.5%, 71.8% { transform: translateY(-62.5%); }
  75%, 84.3%   { transform: translateY(-75%); }
  87.5%, 96.8% { transform: translateY(-87.5%); }
  100%         { transform: translateY(0); }
}
@keyframes aloSlayt {
  0%    { opacity: 0; transform: scale(1.06); }
  2%    { opacity: 1; }
  18%   { opacity: 1; transform: scale(1); }
  22%   { opacity: 0; }
  100%  { opacity: 0; }
}
@keyframes aloNokta {
  0%, 18%     { background: #fff; transform: scale(1.25); }
  18.01%, 100% { background: rgba(255,255,255,.55); transform: none; }
}

/* sitenin adres arama bileseni hero icinde */
.alo-hero-arama .el-input__inner,
.alo-hero-arama input.form-control { height: 56px; border-radius: 999px; padding-left: 22px; border: 0; box-shadow: var(--alo-soft); }
.alo-hero-arama .el-button { border-radius: 999px; height: 48px; }

/* ---------------- kategoriler: story halkasi ---------------- */
.alo-kategori-blok .swiper-slide { width: auto; }
.alo-kat { display: flex !important; flex-direction: column; align-items: center; gap: 11px; width: 120px; }
.alo-kat-cerceve { position: relative; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; }
.alo-halka {
  position: absolute; inset: 0; border-radius: 50%; animation: aloHalka 9s linear infinite;
  background: repeating-conic-gradient(from 0deg, #E4682F 0deg 16deg, rgba(228,104,47,.18) 16deg 22deg);
}
.alo-halka-2 .alo-halka { animation-duration: 11s; animation-direction: reverse; }
.alo-halka-3 .alo-halka { animation-duration: 13s; }
.alo-halka-4 .alo-halka { animation-duration: 7.5s; animation-direction: reverse; }
@keyframes aloHalka { to { transform: rotate(360deg); } }
.alo-kat-ic {
  position: relative; width: 94px; height: 94px; border-radius: 50%; background: var(--alo-bg);
  display: flex; align-items: center; justify-content: center;
}
.alo-kat-gorsel {
  width: 86px; height: 86px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--alo-line); box-shadow: var(--alo-soft);
}
.alo-kat-ad { font-size: 14px; font-weight: 600; color: var(--alo-ink); text-align: center; max-width: 118px; }

/* ---------------- kayan restoran seridi: kart ---------------- */
.alo-serit .swiper-slide { width: 286px; }
/* ====================================================================
   RESTORAN KARTI — 20 Eylul 2026
   Kullanici tgoyemek/Uber Eats kartlarini ornek verdi: "daha profesyonel,
   daha guzel, minimalist ve mouse fotografa yaklasinca fotograf buyuyor".
   Desen: ustte gorsel (kampanya etiketleri uzerinde), altta beyaz govde;
   solda yesil puan hapi + kalin ad; altta kucuk gri bilgi satiri.
   Golge yerine ince cizgi; hover'da gorsel yakinlasir.
   ==================================================================== */
.alo-kart {
  width: 286px; border-radius: 16px; background: var(--alo-sur);
  border: 1px solid var(--alo-line); box-shadow: none;
  overflow: hidden; display: flex; flex-direction: column; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.alo-kart:hover {
  transform: none; border-color: #DFE3E8;
  box-shadow: 0 6px 20px rgba(31,29,27,.08);
}
.alo-kart-gorsel { position: relative; aspect-ratio: 16/10; height: auto; background: var(--alo-line); overflow: hidden; }
/* sitenin style.css'inde ".rounded-box img{min-height:9rem;max-height:9rem}" var;
   kartin gorseli 144px'de kaliyordu -> !important ile ezildi. */
.alo-kart-foto {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  min-height: 100% !important; max-height: none !important;
  object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.alo-kart-foto img,
.alo-kart-foto .el-image__inner{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* gorsel bazen IMG'nin KENDISI (.alo-kart-foto), bazen el-image sarmalayici:
   her iki durumda da hover'da yakinlassin. */
.alo-kart:hover .alo-kart-foto,
.alo-kart:hover .alo-kart-foto img,
.alo-kart:hover .alo-kart-foto .el-image__inner { transform: scale(1.07); }
.alo-kart-foto img, .alo-kart-foto .el-image__inner{ transition: transform .45s cubic-bezier(.2,.6,.2,1); }
.alo-kart-etiketler { position: absolute; left: 10px; top: 10px; z-index: 9; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.alo-etiket {
  height: 24px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alo-etiket-kupon { background: var(--alo-dark); color: #fff; }
.alo-etiket-kampanya { background: var(--alo-acc); color: #fff; }
.alo-kart-govde { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
/* puan SOLDA (tgoyemek deseni), ad onun yaninda */
.alo-kart-ust { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.alo-kart-ad { font-size: 15px; font-weight: 700; min-width: 0; order: 2; }
.alo-puan {
  order: 1; height: 22px; padding: 0 8px; border-radius: 7px;
  background: #E8F6EE; color: #1B7F4B; font-size: 12.5px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.alo-puan i { color: #1B7F4B; font-size: 10px; }
.alo-yeni { order: 1; height: 22px; border-radius: 7px; font-size: 11.5px; }
.alo-yeni {
  height: 26px; padding: 0 9px; border-radius: 999px; background: #EAF1EC; color: #1C6B46;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; flex-shrink: 0;
}
.alo-kart-alt { font-size: 12.5px; color: var(--alo-mut); line-height: 1.35; }
.alo-ayrac { padding: 0 6px; }
.alo-kart-kapali span { font-size: 13px; font-weight: 700; color: var(--alo-mut); }

/* ---------------- sana ozel firsatlar ---------------- */
.alo-firsatlar { display: flex; gap: 22px; flex-wrap: wrap; }
.alo-firsat {
  flex: 1 1 300px; min-height: 176px; border-radius: 28px; padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px; text-decoration: none;
}
.alo-firsat:hover { text-decoration: none; }
.alo-firsat-ust { font-size: 14px; font-weight: 700; }
.alo-firsat-buyuk { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.alo-firsat-kucuk { font-size: 14px; }
.alo-firsat-flas { background: var(--alo-dark); }
.alo-firsat-flas .alo-firsat-ust { color: #F2B27F; letter-spacing: .04em; }
.alo-firsat-flas .alo-firsat-buyuk { color: #fff; }
.alo-firsat-flas .alo-firsat-kucuk { color: rgba(255,255,255,.62); }
.alo-firsat-kampanya { background: var(--alo-acc-a); }
.alo-firsat-kampanya .alo-firsat-ust { color: var(--alo-acc-k); }
.alo-firsat-kampanya .alo-firsat-buyuk { color: var(--alo-ink); }
.alo-firsat-kampanya .alo-firsat-kucuk { color: var(--alo-mut); }
.alo-firsat-plus { background: var(--alo-sur); box-shadow: var(--alo-soft); }
.alo-firsat-plus .alo-firsat-ust { color: var(--alo-ink); }
.alo-firsat-plus .alo-firsat-buyuk { color: var(--alo-ink); }
.alo-firsat-plus .alo-firsat-kucuk { color: var(--alo-mut); }

/* ---------------- plus bandi ---------------- */
.alo-plus-bant {
  background: var(--alo-dark); border-radius: 32px; padding: 34px 38px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.alo-plus-sol { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.alo-plus-etiket { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #F2B27F; }
.alo-plus-bant h3 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0; }
.alo-plus-bant p { font-size: 15px; color: rgba(255,255,255,.66); margin: 0; }

/* ---------------- uygulama bandi ---------------- */
.alo-uygulama {
  background: var(--alo-dark); border-radius: 32px; overflow: hidden;
  display: flex; align-items: center; gap: 28px; padding: 38px;
}
.alo-uygulama-sol { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
.alo-uygulama-etiket { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #F2B27F; }
.alo-uygulama h3 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0; }
.alo-uygulama p { font-size: 15px; color: rgba(255,255,255,.66); margin: 0; max-width: 460px; }
.alo-magazalar { display: flex; gap: 12px; margin-top: 8px; }
.alo-magazalar img { height: 38px; width: auto; display: block; }
.alo-uygulama-sag { flex: 0 0 360px; display: flex; justify-content: flex-end; }
.alo-uygulama-gorsel { max-width: 100%; height: auto; display: block; }

/* ---------------- avantaj seridi (hero ile kategoriler arasi) ---------------- */
.alo-avantaj-bolum { padding-bottom: 40px; }
.alo-avantajlar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  background: var(--alo-sur); border: 1px solid var(--alo-line);
  border-radius: 20px; padding: 18px 22px;
}
.alo-avantaj { display: flex; align-items: center; gap: 12px; min-width: 0; }
.alo-avantaj + .alo-avantaj { border-left: 1px solid var(--alo-line); padding-left: 14px; }
.alo-avantaj-ikon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--alo-acc-a); color: var(--alo-acc-k);
}
.alo-avantaj-ikon svg { width: 22px; height: 22px; }
.alo-avantaj-yazi { display: flex; flex-direction: column; min-width: 0; }
.alo-avantaj-yazi strong { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.alo-avantaj-yazi small { font-size: 12px; color: var(--alo-mut); line-height: 1.35; }

/* ---------------- is ortagimiz ol ---------------- */
.alo-ortaklar { display: flex; gap: 22px; flex-wrap: wrap; }
.alo-ortak {
  flex: 1 1 380px; min-height: 260px; border-radius: 32px; padding: 32px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; text-decoration: none;
  position: relative; overflow: hidden; background: var(--alo-line);
}
.alo-ortak:hover { text-decoration: none; }
.alo-ortak-restoran {
  /* 20 Eyl 2026 (kullanici): kartin arkasina kendi gorseli; yazilar altta oldugu icin
     alta dogru koyulasan degrade okunurlugu saglar (gorsel degrade'in ALTINDA yazilir). */
  background: linear-gradient(180deg, rgba(20,14,10,.10) 0%, rgba(20,14,10,.55) 45%, rgba(18,13,10,.90) 100%),
              url("ortak/restoran.jpg") 55% 78% / cover no-repeat, #221D19;
}
.alo-ortak-kurye {
  /* 20 Eyl 2026 (kullanici): kurye karti arka plani; gorselin logolu sol yarisi disarida
     kalsin diye odak sagda (motosiklet + sehir). */
  background: linear-gradient(180deg, rgba(10,12,11,.12) 0%, rgba(10,12,11,.58) 45%, rgba(8,10,9,.90) 100%),
              url("ortak/kurye.jpg") 100% 40% / auto 190% no-repeat, #1A211D;
}
.alo-ortak-etiket {
  align-self: flex-start; height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center;
}
.alo-ortak h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0; }
.alo-ortak p { font-size: 15px; color: rgba(255,255,255,.72); margin: 0; max-width: 420px; line-height: 1.55; }
.alo-ortak .alo-dugme { margin-top: 8px; align-self: flex-start; }

/* ---------------- anasayfa mobil ---------------- */
@media (max-width: 991.98px) {
  .alo-bolum { padding: 0 16px 32px; }
  .alo-bolum .swiperOutsideContainer { padding-left: 0 !important; padding-right: 0 !important; }
  /* 25 Eyl 2026 (1.0.1): kenar boslugu sifirlaninca seridin "ileri" dugmesi (27px kutuda 30px el-button) ekranin
     sag kenarindan 1,5px tasiyordu -> sayfa mobilde 2px yana kayiyordu. 2px iceri alindi (gozle fark edilmez). */
  .alo-bolum .swiper-button-next { right: -14px !important; }
  .alo-bolum-bas h2, .alo-bolum-bas h3 { font-size: 21px; }
  .alo-hero-ic { flex-direction: column; padding: 28px 16px 26px; gap: 24px; align-items: stretch; }
  .alo-hero-baslik { font-size: 32px; }
  .alo-hero-donen { font-size: 20px; }
  .alo-hero-alt { font-size: 14px; }
  .alo-hero-sag { flex: 1 1 auto; max-width: 100%; }
  .alo-slayt { height: 220px; border-radius: 24px; }
  .alo-kat { width: 92px; }
  .alo-kat-cerceve { width: 76px; height: 76px; }
  .alo-kat-ic { width: 68px; height: 68px; }
  .alo-kat-gorsel { width: 61px; height: 61px; }
  .alo-kat-ad { font-size: 12px; max-width: 90px; }
  .alo-serit .swiper-slide, .alo-kart { width: 252px; }
  .alo-kart-gorsel { aspect-ratio: 16/10; } .alo-kart-foto { height: 100%; }
  .alo-firsat { min-height: 140px; padding: 20px 22px; }
  .alo-firsat-buyuk { font-size: 22px; }
  .alo-plus-bant, .alo-uygulama { border-radius: 24px; padding: 22px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .alo-plus-bant h3, .alo-uygulama h3 { font-size: 20px; line-height: 1.25; }
  /* TUZAK: bant mobilde column'a donunce 'flex: 1 1 320px' basis'i YUKSEKLIK olarak uygulaniyordu
     (kart 446px'e cikmisti). Sutun yonunde basis auto olmali. */
  .alo-plus-sol { flex: 0 0 auto; }
  .alo-plus-bant p, .alo-uygulama p { font-size: 13.5px; line-height: 1.5; }
  .alo-plus-etiket { font-size: 11.5px; }
  .alo-uygulama-sag { display: none; }
  .alo-avantajlar { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; padding: 14px; border-radius: 18px; }
  .alo-avantaj + .alo-avantaj { border-left: 0; padding-left: 0; }
  .alo-avantaj-ikon { width: 36px; height: 36px; border-radius: 12px; }
  .alo-avantaj-ikon svg { width: 19px; height: 19px; }
  .alo-avantaj-yazi strong { font-size: 13px; }
  .alo-avantaj-yazi small { font-size: 11px; }
  .alo-ortak { min-height: 220px; padding: 24px; }
  .alo-ortak h3 { font-size: 21px; }
  /* mobilde kart dar: cover genislikten kirpiyor, gorselin logolu ust seridi giriyordu.
     Katman sirasi: degrade, gorsel. */
  .alo-ortak-restoran { background-size: auto, auto 132%; background-position: center, 62% 72%; }
  .alo-ortak-kurye { background-size: auto, auto 155%; background-position: center, 34% 45%; }
}

/* hero'daki adres arama dugmesi tema rengine gelsin (site yesil basiyor) */
/* 20 Eyl (kullanici footer'i beyazlattirinca goze battı): alt bilgideki "Abone" dugmesi
   sitenin yesili yerine tema turuncusu — hero'daki arama dugmesiyle ayni desen. */
.alo-alt-bulten .el-button--success,
.alo-alt-bulten .btn-green,
.alo-alt-bulten .btn-success {
  background: var(--alo-acc) !important; border-color: var(--alo-acc) !important; color: #fff !important;
  border-radius: 12px !important; font-weight: 700;
}
.alo-alt-bulten .el-button--success:hover,
.alo-alt-bulten .btn-green:hover,
.alo-alt-bulten .btn-success:hover { background: #D25C26 !important; border-color: #D25C26 !important; }

.alo-hero-arama .btn-green,
.alo-hero-arama .el-button--success,
.alo-hero-arama .btn-success,
.alo-hero-arama .el-button--primary {
  background: var(--alo-acc) !important; border-color: var(--alo-acc) !important; color: #fff !important;
}
.alo-hero-arama .btn-green:hover,
.alo-hero-arama .el-button--success:hover,
.alo-hero-arama .btn-success:hover { background: #D25C26 !important; border-color: #D25C26 !important; }
/* mobilde de ayni: tam genislikteki yesil dugme turuncu olur */
.alo-hero-arama .btn-green { border-radius: 999px !important; height: 52px; font-weight: 700; }

/* ===================================================================
   RESTORAN LISTESI (P3)
   =================================================================== */
.alo-liste { max-width: 1440px; margin: 0 auto; padding: 0; }
.alo-liste-bas { padding: 30px 80px 0; display: flex; flex-direction: column; gap: 8px; }
.alo-kirinti { font-size: 13px; color: var(--alo-mut); }
.alo-liste-bas h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.alo-liste-govde { padding: 22px 80px 40px; display: flex; gap: 34px; align-items: flex-start; }

/* ---- sol suzgec paneli ---- */
.alo-suzgec {
  flex: 0 0 336px; width: 336px; box-sizing: border-box; align-self: flex-start;
  background: var(--alo-sur); border-radius: 26px; box-shadow: var(--alo-soft); padding: 26px 28px;
  position: sticky; top: 168px;
}
.alo-suzgec-bas { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; }
.alo-suzgec-bas h3 { font-size: 18px; font-weight: 800; margin: 0; }
.alo-temizle { font-size: 13px; font-weight: 700; color: var(--alo-acc); }
.alo-temizle:hover { color: var(--alo-acc-k); }
.alo-suzgec-bolum { border-top: 1px solid var(--alo-line); padding: 18px 2px; display: flex; flex-direction: column; gap: 12px; }
.alo-suzgec-son { padding-bottom: 4px; }
.alo-suzgec-bolum h4 { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.alo-secenek { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.alo-secenek input { width: 20px; height: 20px; accent-color: var(--alo-acc); margin: 0; flex-shrink: 0; }
.alo-secenek-ad { font-size: 14.5px; color: var(--alo-ink); }
.alo-fiyat-grup { display: flex; gap: 8px; flex-wrap: wrap; }
.alo-fiyat {
  height: 40px; min-width: 62px; padding: 0 14px; border-radius: 999px; background: var(--alo-bg);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
  margin: 0; cursor: pointer;
}
.alo-fiyat input { position: absolute; opacity: 0; width: 0; height: 0; }
.alo-fiyat.active { background: var(--alo-acc-a); color: var(--alo-acc-k); }
.alo-dahafazla { font-size: 13.5px; font-weight: 700; color: var(--alo-acc); align-self: flex-start; }
.alo-aralik-etiket { font-size: 13.5px; color: var(--alo-mut); margin: 0; }
.alo-puan-metin { font-size: 14px; font-weight: 600; margin: 0; }

/* ---- sag sonuclar ---- */
.alo-sonuclar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
/* 20 Eylul 2026 (kullanici: "Populer Restoranlar cok yapisik bannere, lutfen
   arayi ac" — /restaurants): bantla altindaki bolum arasi nefes payi. */
.alo-banner { margin-bottom: 30px; }
.alo-banner + * , .alo-banner ~ .alo-bolum:first-of-type { margin-top: 6px; }
.alo-banner:empty { display: none; margin-bottom: 0; }
.alo-banner .swiperBanner img,
.alo-banner .el-image { border-radius: 24px; overflow: hidden; }
.alo-izgara { display: flex; flex-wrap: wrap; gap: 26px; }
.alo-izgara .alo-kart { text-decoration: none; color: inherit; }
.alo-izgara .alo-kart:hover { text-decoration: none; color: inherit; }
.alo-kart-kalp {
  position: absolute; right: 10px; top: 10px; z-index: 9; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
}
.alo-kart-iskelet { padding: 0 0 12px; }
.alo-bos { background: var(--alo-sur); border-radius: 26px; box-shadow: var(--alo-soft); padding: 34px; }
.alo-bos h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.alo-bos p { font-size: 14.5px; color: var(--alo-mut); margin: 0; line-height: 1.55; }
.alo-dahafazla-satir { display: flex; justify-content: center; padding: 6px 0 2px; }
.alo-dahafazla-satir .alo-dugme { box-shadow: var(--alo-soft); }
.alo-son { font-size: 14px; color: var(--alo-gri); margin: 0; }

/* ---- mobil arama/filtre cubugu ---- */
.alo-liste-mobilara { padding: 12px 16px 0; }
.alo-mobilara-kutu { display: flex; gap: 10px; align-items: center; }
.alo-mobilara-giris {
  flex: 1 1 auto; height: 46px; border-radius: 999px; border: 0; background: var(--alo-line);
  padding: 0 18px; font-size: 14px; color: var(--alo-ink);
}
.alo-mobilara-filtre {
  width: 46px; height: 46px; border-radius: 50%; background: var(--alo-sur); box-shadow: var(--alo-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.alo-liste-mobilbas h2 { font-size: 20px; font-weight: 800; margin: 0; }

/* ---- hizli teslimat bandi ---- */
.alo-hizli {
  margin: 0 80px 44px; background: var(--alo-sur); border-radius: 32px; box-shadow: var(--alo-soft);
  padding: 26px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.alo-hizli-kurye { height: 110px; width: auto; }
.alo-hizli .mirror { transform: scaleX(-1); }
.alo-hizli-orta { text-align: center; flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; }
.alo-hizli-ust { font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--alo-acc); text-transform: uppercase; }
.alo-hizli-orta h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.alo-hizli-orta p { font-size: 14.5px; color: var(--alo-mut); margin: 0; }

@media (max-width: 991.98px) {
  .alo-liste-bas { padding: 16px 16px 0; }
  .alo-liste-bas h1 { font-size: 22px; }
  .alo-liste-govde { padding: 14px 16px 28px; gap: 0; }
  .alo-sonuclar { gap: 16px; }
  .alo-izgara { gap: 14px; }
  .alo-izgara .alo-kart { width: calc(50% - 7px); }
  .alo-izgara .alo-kart-gorsel, .alo-izgara .alo-kart-foto { height: 120px; }
  .alo-izgara .alo-kart-ad { font-size: 14px; }
  .alo-hizli { margin: 0 16px 28px; padding: 20px; border-radius: 24px; }
  .alo-hizli-kurye { display: none; }
  .alo-hizli-orta h3 { font-size: 18px; }
}

/* ===================================================================
   ARAMA PANELI (P4) — ust bardaki aramaya basinca acilir
   =================================================================== */
body.alo-kilit { overflow: hidden; }
.alo-arama-katman { position: fixed; inset: 0; z-index: 1080; display: none; }
.alo-arama-katman.acik { display: flex; justify-content: center; align-items: flex-start; padding: 96px 16px 24px; }
.alo-arama-ortu { position: absolute; inset: 0; background: rgba(20,18,16,.45); animation: aloAcil .2s ease both; }
.alo-arama-panel {
  position: relative; width: 880px; max-width: 100%; max-height: calc(100vh - 140px);
  background: var(--alo-sur); border-radius: 28px; box-shadow: 0 30px 80px rgba(20,18,16,.28);
  overflow: hidden; display: flex; flex-direction: column; animation: aloIn .24s ease both;
}
@keyframes aloAcil { from { opacity: 0; } to { opacity: 1; } }
@keyframes aloIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.alo-arama-satir {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--alo-line);
}
.alo-arama-ikon {
  width: 22px; height: 22px; flex-shrink: 0; background: no-repeat center/22px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231F1D1B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
.alo-arama-giris {
  flex: 1 1 auto; height: 52px; border: 0; outline: none; font-size: 16px; color: var(--alo-ink);
  background: transparent; font-family: var(--alo-yazi);
}
.alo-arama-giris::placeholder { color: var(--alo-gri); }
.alo-arama-git {
  height: 48px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--alo-dark); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--alo-yazi); flex-shrink: 0;
}
.alo-arama-git:hover { background: #1F1D1B; }
.alo-arama-icerik { padding: 22px 26px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.alo-arama-bolum { display: flex; flex-direction: column; gap: 12px; }
.alo-arama-bolum h4 { font-size: 17px; font-weight: 800; margin: 0; }
.alo-arama-cipler { display: flex; flex-wrap: wrap; gap: 10px; }
.alo-arama-cip {
  height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--alo-line);
  font-size: 14px; font-weight: 600; color: var(--alo-ink); cursor: pointer; font-family: var(--alo-yazi);
}
.alo-arama-cip:hover { background: #E7E3DC; }
.alo-arama-cip-gecmis::before { content: "↺"; margin-right: 7px; color: var(--alo-gri); }
.alo-arama-izgara { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 14px; }
.alo-arama-mutfak { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.alo-arama-mutfak:hover { text-decoration: none; color: var(--alo-acc); }
.alo-arama-mutfak-resim {
  width: 100%; aspect-ratio: 1/1; border-radius: 20px; overflow: hidden; background: var(--alo-line);
  box-shadow: var(--alo-soft); display: block;
}
.alo-arama-mutfak-resim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alo-arama-mutfak-ad { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.3; }

@media (max-width: 991.98px) {
  .alo-arama-katman.acik { padding: 0; align-items: stretch; }
  .alo-arama-panel { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .alo-arama-satir { padding: 12px 14px; }
  .alo-arama-git { padding: 0 20px; height: 44px; font-size: 14px; }
  .alo-arama-icerik { padding: 16px 16px 26px; }
  .alo-arama-izgara { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
}

/* mutfak sayfasi: tek sutun govde */
.alo-liste-tek { display: block; }
.alo-liste-alt { font-size: 15px; color: var(--alo-mut); margin: 2px 0 0; }

/* ===================================================================
   KAMPANYALAR SAYFASI (P5)
   =================================================================== */
.alo-flas-bant {
  background: var(--alo-dark); border-radius: 32px; padding: 28px 32px; margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.alo-flas-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.alo-flas-ad { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.alo-flas-sure {
  height: 36px; padding: 0 15px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff;
  font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center;
}
.alo-flas-not { font-size: 15px; color: rgba(255,255,255,.68); margin: 0; max-width: 680px; line-height: 1.55; }
.alo-flas-kademeler { display: flex; gap: 14px; flex-wrap: wrap; }
.alo-kademe {
  flex: 1 1 160px; border-radius: 18px; background: rgba(255,255,255,.1); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.alo-kademe-sepet { font-size: 12.5px; color: rgba(255,255,255,.68); }
.alo-kademe-indirim { font-size: 19px; font-weight: 800; color: #fff; }

.alo-kampanya-izgara { display: flex; flex-wrap: wrap; gap: 22px; }
.alo-kampanya-kart {
  flex: 1 1 320px; max-width: 420px; min-height: 176px; border-radius: 28px; background: var(--alo-acc-a);
  padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
}
.alo-kampanya-kart:hover { text-decoration: none; color: inherit; background: #F3DDCF; }
.alo-kampanya-etiket { font-size: 13px; font-weight: 700; color: var(--alo-acc-k); }
.alo-kampanya-odul { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.alo-kampanya-odul:empty { display: none; }
.alo-kampanya-ad { font-size: 16px; font-weight: 700; }
.alo-kampanya-not { font-size: 14px; color: var(--alo-mut); line-height: 1.5; }
.alo-kampanya-kosul { font-size: 13px; color: var(--alo-mut); margin-top: auto; }

@media (max-width: 991.98px) {
  .alo-flas-bant { border-radius: 24px; padding: 20px; }
  .alo-flas-ad { font-size: 18px; }
  .alo-kademe { flex: 1 1 130px; padding: 12px; }
  .alo-kampanya-kart { flex: 1 1 100%; max-width: 100%; padding: 20px; min-height: 0; }
  .alo-kampanya-odul { font-size: 24px; }
}

/* ---- cok yakinda sayfasi ---- */
.alo-kart-yakinda .alo-kart-foto { filter: grayscale(1); opacity: .62; }
.alo-kart-yakinda:hover .alo-kart-foto { opacity: .72; }
.alo-yakinda-rozet {
  position: absolute; left: 12px; bottom: 12px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--alo-acc); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; z-index: 2;
}
.alo-yakinda-dugme {
  margin-top: 6px; height: 42px; border-radius: 999px; border: 1.5px solid var(--alo-line);
  display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; color: var(--alo-ink);
}
.alo-kart-yakinda:hover .alo-yakinda-dugme { border-color: var(--alo-acc); color: var(--alo-acc); }

/* ===================================================================
   SITENIN PENCERELERI (P4) — sepet cekmecesi, adres penceresi, bildirimler
   Element Plus bilesenleri; yalniz gorunum temaya uydurulur.
   =================================================================== */
.el-drawer, .el-dialog { font-family: var(--alo-yazi); }
.el-drawer__header { padding: 20px 22px 14px; margin: 0; border-bottom: 1px solid var(--alo-line); }
.el-drawer__header span, .el-drawer__title { font-size: 18px; font-weight: 800; color: var(--alo-ink); }
.el-drawer__body { padding: 18px 22px; }
.el-dialog { border-radius: 26px; overflow: hidden; }
.el-dialog__header { padding: 22px 26px 12px; }
.el-dialog__title { font-size: 19px; font-weight: 800; color: var(--alo-ink); }
.el-dialog__body { padding: 8px 26px 22px; font-size: 14.5px; color: var(--alo-ink); }
.el-dialog__footer { padding: 0 26px 22px; }
/* dugmeler */
.el-drawer .el-button--success, .el-dialog .el-button--success,
.el-drawer .el-button--primary, .el-dialog .el-button--primary {
  background: var(--alo-acc); border-color: var(--alo-acc); border-radius: 999px; font-weight: 700;
}
.el-drawer .el-button--success:hover, .el-dialog .el-button--success:hover,
.el-drawer .el-button--primary:hover, .el-dialog .el-button--primary:hover { background: #D25C26; border-color: #D25C26; }
.el-drawer .el-button, .el-dialog .el-button { border-radius: 999px; font-family: var(--alo-yazi); }
.el-drawer .el-input__inner, .el-dialog .el-input__inner { border-radius: 12px; height: 46px; }
/* sepet cekmecesi icerigi */
.el-drawer .cart-item, .el-drawer .cart-list li { border-bottom: 1px solid var(--alo-line); }
.el-drawer .subtotal, .el-drawer .total { font-weight: 800; }
.el-drawer img { border-radius: 12px; }
/* adres penceresi haritasi */
.el-dialog .mapboxgl-map, .el-dialog .map-wrap { border-radius: 18px; overflow: hidden; }

/* ---- arama sonuclari sayfasi (/search) ---- */
.alo-arama-sayfa-kutu {
  background: var(--alo-sur); border-radius: 26px; box-shadow: var(--alo-soft);
  padding: 20px 22px; margin-bottom: 26px;
}
.alo-arama-sayfa .el-input__inner, .alo-arama-sayfa input.form-control {
  height: 54px; border-radius: 999px; border: 0; background: var(--alo-line); padding-left: 20px; font-size: 15px;
}
.alo-arama-sayfa .el-tabs__item {
  font-family: var(--alo-yazi); font-size: 15px; font-weight: 600; color: var(--alo-mut);
}
.alo-arama-sayfa .el-tabs__item.is-active { color: var(--alo-ink); font-weight: 800; }
.alo-arama-sayfa .el-tabs__active-bar { background: var(--alo-acc); height: 3px; border-radius: 3px; }
.alo-arama-sayfa .el-tabs__nav-wrap::after { background: var(--alo-line); }
.alo-arama-sayfa .rounded-box, .alo-arama-sayfa .list-items > div {
  border-radius: 22px; overflow: hidden; background: var(--alo-sur); box-shadow: var(--alo-soft); border: 0;
}
.alo-arama-sayfa h5, .alo-arama-sayfa h4 { font-weight: 800; letter-spacing: -.01em; }

/* ---- anasayfa: tum restoranlar bolumu ---- */
.alo-bas-satir { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
.alo-tumu { font-size: 14px; font-weight: 700; color: var(--alo-acc); white-space: nowrap; }
.alo-tumu:hover { color: var(--alo-acc-k); }
.alo-kapali-rozet {
  position: absolute; left: 12px; bottom: 12px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(20,18,16,.72); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; z-index: 2;
}
.alo-bolum > .alo-izgara > .alo-kart { text-decoration: none; color: inherit; }
.alo-ortak-etiket, .alo-plus-etiket, .alo-uygulama-etiket, .alo-kampanya-etiket { text-transform: uppercase; }

/* ---- serit kartlari: esit yukseklik + rozet/etiket hizasi ---- */
.alo-serit .swiper-wrapper { align-items: stretch; }
.alo-serit .swiper-slide { height: auto; }
.alo-serit .alo-kart { height: 100%; }
.alo-serit .alo-kart-govde { flex-grow: 1; }
/* diger eklentilerin kart rozetleri (Rozet Sistemi, Plus) satir ici hap olsun */
.alo-kart-govde .rzon-kart,
.alo-kart-govde .plson-kart {
  display: inline-flex !important; width: auto !important; max-width: 100%;
  align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; margin: 0; align-self: flex-start;
}
.alo-kart-govde .rzon-kart img { width: 15px; height: 15px; }
.alo-kart-govde .plson-kart { background: #EDE7F6; color: #4A2C8F; }
/* kart ustundeki kampanya etiketleri: en fazla iki satir, tasmasin */
.alo-kart-etiketler { max-width: calc(100% - 20px); }
.alo-kart-etiketler .alo-etiket { max-width: 100%; }
.alo-kart-etiketler .alo-etiket:nth-child(n+3) { display: none; }
/* "Cok yakinda" rozeti kart gorselinde ortada degil, altta dursun */
.alo-serit .alo-kart .coming-soon-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; }

/* ---- uygulama bandi: QR + magazalar + telefon ---- */
.alo-uygulama-sol { gap: 12px; }
.alo-magazalar { align-items: center; flex-wrap: wrap; }
.alo-magaza { display: inline-flex; align-items: center; }
.alo-magaza-huawei {
  height: 38px; padding: 0 16px; border-radius: 8px; background: #000; color: #fff;
  flex-direction: column; justify-content: center; line-height: 1.05; text-decoration: none;
}
.alo-magaza-huawei:hover { color: #fff; text-decoration: none; background: #141414; }
.alo-magaza-ust { font-size: 9px; letter-spacing: .04em; opacity: .8; text-transform: uppercase; }
.alo-magaza-alt { font-size: 15px; font-weight: 700; }
.alo-qr { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.alo-qr-kare {
  width: 84px; height: 84px; border-radius: 14px; background: #fff; padding: 7px; box-sizing: border-box;
  display: block; flex-shrink: 0;
}
.alo-qr-kare svg { width: 100%; height: 100%; display: block; }
.alo-qr-yazi { display: flex; flex-direction: column; gap: 3px; max-width: 280px; }
.alo-qr-yazi b { font-size: 13px; font-weight: 700; color: #fff; }
.alo-qr-yazi span { font-size: 12px; color: rgba(255,255,255,.62); line-height: 1.4; }
.alo-uygulama-sag { position: relative; flex: 0 0 400px; height: 452px; align-self: center; }
.alo-telefon {
  position: absolute; display: block; width: 188px; padding: 9px; border-radius: 34px; background: #0F0E0D;
  box-shadow: 0 26px 54px rgba(0,0,0,.38); --alo-egim: 0deg;
  animation: aloYuz 7s ease-in-out infinite;
}
.alo-telefon-ekran {
  width: 100%; height: 340px; object-fit: cover; object-position: top center;
  display: block; border-radius: 26px; background: var(--alo-sur);
}
.alo-telefon-1 { left: 4px; top: 74px; --alo-egim: -7deg; z-index: 1; }
.alo-telefon-2 { right: 28px; top: 44px; --alo-egim: 5deg; z-index: 2; animation-delay: -3.5s; }
@keyframes aloYuz {
  0%, 100% { transform: rotate(var(--alo-egim)) translateY(0); }
  50%      { transform: rotate(var(--alo-egim)) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .alo-telefon { animation: none; transform: rotate(var(--alo-egim)); } }
@media (max-width: 991.98px) {
  .alo-qr-kare { width: 70px; height: 70px; }
  .alo-uygulama-sag { display: none; }
}


/* 20 Eylul 2026: zemin beyaz oldugu icin beyaz kartlara ince cizgi (golge tek basina
   beyaz-uzerine-beyazda ayrimi vermiyordu). Kart bicimi degismedi. */
.alo-kart { border: 1px solid var(--alo-line); }

/* ====================================================================
   ADRES PENCERESI KILITLENMESI — 20 Eylul 2026
   Kullanici: "adres bolumune tikliyorum ekrani kitliyor, dokunamiyorum".
   Sebep: sitenin "Teslimat Detaylari" penceresi (.modal, z-index 1050)
   ust barin ICINDE basiliyor; ust bar sticky + z-index:1030 oldugu icin
   KENDI yiginlama baglamini yaratiyor ve icindeki 1050 disariya gecmiyor.
   Sayfa duzeyindeki .modal-backdrop (1040) pencerenin USTUNDE kaliyor,
   butun tiklamalari yutuyordu.
   Cozum: pencere acikken (body.modal-op / .modal-open) ust barin z-index'i
   ortunun uzerine cikar. Kapaninca eski degerine doner.
   ==================================================================== */
/* 20 Eylul 2026 (duzeltme): once z-index 1060 verilmisti; bu sefer MOBILDE
   sitenin kendi arama penceresi (.modal z-index 1050, ust barin DISINDA)
   basligin ALTINDA kaliyordu (kullanici: "arama bolumu tiklayinca arkada kaliyor").
   Dogru cozum: pencere acikken ust barin YIGINLAMA BAGLAMINI kaldirmak.
   Boylece icindeki adres penceresi sayfa duzeyinde yarisir (1050 > backdrop 1040)
   ve ust bar disaridaki pencerelerin onune GECMEZ. */
body.modal-op .alo-ust,
body.modal-open .alo-ust { position: static; z-index: auto; }

/* ====================================================================
   HERO ADRES KUTUSU — KONUM DUGMESI (20 Eylul 2026)
   Kullanici: "konum bulma boyutu guzel ama icinde yuvarlak sekil goruyor;
   disi kare olan yerde yuvarlak olsun, ici duz olsun."
   Sitenin dugmesi kare kenarli (radius 7px) ve ikonu halka+nokta idi.
   Artik: yuvarlak dugme + sade konum ikonu (halka yok).
   ==================================================================== */
.alo-hero .el-input__suffix .btn.btn-link{
  width: 40px; height: 40px; padding: 0; border-radius: 50% !important;
  background: var(--alo-bg); border: 0; position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.alo-hero .el-input__suffix .btn.btn-link:hover{ background: var(--alo-line); }
.alo-hero .el-input__suffix .btn.btn-link > *{ visibility: hidden; }
.alo-hero .el-input__suffix .btn.btn-link::after{
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
  background: var(--alo-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 14.5 21l-2.6-7.9L4 10.5z'/%3E%3C/svg%3E") center/20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 14.5 21l-2.6-7.9L4 10.5z'/%3E%3C/svg%3E") center/20px no-repeat;
}

/* ====================================================================
   UST BARDAKI ACILIR LISTELER (20 Eylul 2026)
   Kullanici: "Teslimat / adres satiri acilinca cok yapisik duruyor, guzel bir
   duzenleme ceker misin". Sitenin duz Bootstrap listesi yerine yumusak kart:
   ==================================================================== */
.alo-ust .dropdown-menu{
  border: 0; border-radius: 16px; padding: 8px; min-width: 224px; margin-top: 10px;
  box-shadow: 0 10px 34px rgba(31,29,27,.14); background: var(--alo-sur);
}
.alo-ust .dropdown-menu .dropdown-item,
.alo-ust .dropdown-menu > a,
.alo-ust .dropdown-menu > li > a{
  border-radius: 10px; padding: 10px 14px; font-size: 14.5px; font-weight: 600;
  color: var(--alo-ink); display: flex; align-items: center; gap: 10px;
}
.alo-ust .dropdown-menu .dropdown-item:hover,
.alo-ust .dropdown-menu > a:hover,
.alo-ust .dropdown-menu > li > a:hover{ background: var(--alo-bg); color: var(--alo-ink); }
.alo-ust .dropdown-menu .dropdown-item.active,
.alo-ust .dropdown-menu .active > a{ background: var(--alo-acc-a); color: var(--alo-acc-k); }
.alo-ust .dropdown-menu .dropdown-divider{ margin: 6px 4px; border-color: var(--alo-line); }

/* 20 Eylul 2026: kartta rozet + APLUS tek satir, bos ise yer kaplamaz */
.alo-kart-rozetler{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.alo-kart-rozetler:empty{ display: none; }
.alo-kart-rozetler .rzon-kart,
.alo-kart-rozetler .plson-kart{ margin: 0 !important; }

/* ====================================================================
   HERO ADRES KUTUSU — DIS KUTU DA YUVARLAK (20 Eylul 2026)
   Kullanici: "ici yuvarlak disi kare; disi da yuvarlak olacak, ici tam oturacak".
   Element Plus sarmalayicisi (.el-input__wrapper) 4px koseli + kendi halkasi,
   icindeki alan ise 999px hap idi; ic ice iki farkli kose gorunuyordu.
   Artik TEK kontrol: sarmalayici hap, ic alan seffaf ve golgesiz.
   ==================================================================== */
/* dis kutu da (sitenin .search-geocomplete gri kutusu) hap olsun */
.alo-hero .search-geocomplete{ border-radius: 999px !important; overflow: hidden; }
.alo-hero .el-input__wrapper{
  border-radius: 999px !important;
  padding: 4px 6px 4px 10px !important;
  background: var(--alo-sur) !important;
  box-shadow: 0 0 0 1px var(--alo-line) inset !important;
  transition: box-shadow .15s ease;
}
.alo-hero .el-input__wrapper.is-focus,
.alo-hero .el-input__wrapper:hover{ box-shadow: 0 0 0 1px #D9DCE1 inset !important; }
.alo-hero .el-input__inner{
  border-radius: 999px !important; background: transparent !important;
  box-shadow: none !important; padding-left: 14px !important; height: 52px !important;
}

/* ====================================================================
   UYGULAMA BOLUMU — tgoyemek DESENI (20 Eylul 2026)
   Kullanici: "bizim boyle ama sana gosterdigim resimdeki gibi yap, boyut renk vs
   bizim tasarim". Referans: acik gri genis kart; SOLDA buyuk QR, altinda buyuk
   baslik, aciklama ve uc magaza dugmesi; SAGDA egik iki telefon karttan tasiyor.
   Renkler bizim (acik gri zemin, koyu yazi, turuncu etiket).
   ==================================================================== */
.alo-uygulama{
  background: var(--alo-bg-2, #F6F7F9) !important;
  border-radius: 28px; padding: 56px 64px; gap: 40px; align-items: center;
  position: relative; overflow: hidden; min-height: 520px;
}
.alo-uygulama-sol{ flex: 1 1 0; max-width: 640px; gap: 14px; }
.alo-uygulama-etiket{ color: var(--alo-acc-k) !important; order: 2; }
.alo-uygulama h3{
  color: var(--alo-ink) !important; font-size: 40px !important; line-height: 1.12; order: 3;
  max-width: 520px;
}
.alo-uygulama p{ color: var(--alo-mut) !important; font-size: 16px !important; max-width: 540px; order: 4; }
.alo-magazalar{ order: 5; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.alo-magazalar img{ height: 52px !important; border-radius: 10px; }
.alo-magaza-huawei{
  /* 20 Eyl (kullanici: "AppGallery digerlerinin boyutlarinda olsun"): rozet gorselleri
     52px yukseklikte 173px genislige geliyor, metin kutusu da ayni olcude sabitlendi. */
  height: 52px; width: 173px; padding: 0 12px; border-radius: 10px; background: #1F1D1B;
  align-items: center; text-align: center;
}
.alo-magaza-alt{ font-size: 17px; }
/* QR en ustte, buyuk beyaz kart */
.alo-qr{ order: 1; display: block; margin: 0 0 6px; }
.alo-qr-kare{
  width: 168px; height: 168px; border-radius: 18px; padding: 12px;
  box-shadow: 0 2px 6px rgba(31,29,27,.06), 0 12px 30px rgba(31,29,27,.08);
}
.alo-qr-yazi{ max-width: 340px; margin-top: 10px; }
.alo-qr-yazi b{ color: var(--alo-ink) !important; font-size: 14px; }
.alo-qr-yazi span{ color: var(--alo-mut) !important; font-size: 12.5px; }
/* telefonlar: daha buyuk ve karttan tasan yerlesim */
.alo-uygulama-sag{ flex: 0 0 460px; height: 520px; }
.alo-telefon{ width: 236px; border-radius: 40px; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.alo-telefon-ekran{ height: 430px; border-radius: 32px; }
.alo-telefon-1{ left: -10px; top: 64px; --alo-egim: -8deg; }
.alo-telefon-2{ right: -40px; top: 18px; --alo-egim: 6deg; }
@media (max-width: 991.98px){
  .alo-uygulama{ padding: 28px 20px !important; min-height: 0; border-radius: 22px; }
  .alo-uygulama h3{ font-size: 24px !important; }
  .alo-qr-kare{ width: 132px; height: 132px; }
  .alo-magazalar img{ height: 44px !important; }
  .alo-magaza-huawei{ height: 44px; }
}
/* 20 Eyl (kullanici: "cok buyuk degil mi mobil responsede"): telefonda uygulama bandi
   529px'e cikiyordu — QR blogu tek basina 201px'ti ve TELEFONDA QR okutulamaz; magaza
   rozetleri de alt alta dusuyordu. Bu blok, yukaridaki yeniden tasarimdan SONRA gelmeli
   (ayni ozgullukte sonraki kural kazanir). */
@media (max-width: 575.98px){
  .alo-qr{ display: none !important; }
  .alo-uygulama{ padding: 22px !important; gap: 16px !important; }
  .alo-uygulama h3{ font-size: 20px !important; line-height: 1.25; }
  .alo-uygulama p{ font-size: 13.5px !important; }
  /* 3 rozet nowrap'te 388px'e cikip banttan 15px tasiyordu -> esit sutunlu izgara */
  .alo-magazalar{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; width: 100%; }
  .alo-magazalar a, .alo-magazalar > *{ min-width: 0; }
  .alo-magazalar img{ height: auto !important; width: 100%; max-width: 116px; }
  /* Huawei rozeti gorsel degil metin kutusu: dar sutunda "AppGallery" tasmasin */
  .alo-magaza-huawei{ height: 30px; width: 100%; max-width: 116px; padding: 0 8px; border-radius: 6px; }
  .alo-magaza-huawei .alo-magaza-ust{ font-size: 7.5px; letter-spacing: .06em; }
  .alo-magaza-huawei .alo-magaza-alt{ font-size: 12px; white-space: nowrap; }
}

/* ====================================================================
   UYGULAMA TELEFONLARI — HAZIR CERCEVELI GORSELLER (20 Eylul 2026)
   Kullanici kendi mockup'larini verdi (cihaz cercevesi + golge + egim
   GORSELIN ICINDE, seffaf PNG). Bu yuzden temanin kendi CSS cercevesi
   (siyah govde, ic bosluk, golge, kose) KAPATILIR; yoksa cerceve icinde
   cerceve gorunuyordu.
   ==================================================================== */
.alo-uygulama-sag .alo-telefon{
  background: none !important; padding: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; width: 300px;
}
.alo-uygulama-sag .alo-telefon-ekran{
  width: 100%; height: auto !important; object-fit: contain;
  border-radius: 0 !important; background: none !important;
}
/* 20 Eylul 2026 (kullanici: "biri saga biri sola bakiyordu"): iki telefon ters
   yonlere egik dursun (gorselin kendi hafif egimi uzerine CSS egimi). */
/* 20 Eylul 2026 (kullanici: "uygulama resimleri capraz olacak"): iki telefon
   belirgin capraz — soldaki asagida sola yatik, sagdaki yukarida saga yatik,
   birbirinin uzerine binecek sekilde. */
.alo-uygulama-sag .alo-telefon-1{ left: -46px; top: 92px; --alo-egim: -20deg; z-index: 1; }
.alo-uygulama-sag .alo-telefon-2{ right: -50px; top: 6px; --alo-egim: 18deg; z-index: 2; }   /* 20 Eyl: kullanici istegi — biraz asagi ve sola */
@media (max-width: 991.98px){
  .alo-uygulama-sag .alo-telefon{ width: 190px; }
}

/* 20 Eylul 2026 (kullanici: "ikonlar yuvarlak oval olsun, uygulamanin yanindaki
   ikonlar"): magaza dugmeleri hap (tam yuvarlak) kenar. Magaza rozetleri siyah
   zeminli gorsel oldugu icin gorselin kendisine de yuvarlaklik verilir. */
.alo-magazalar .alo-magaza{ border-radius: 999px; overflow: hidden; display: inline-flex; }
.alo-magazalar img{ border-radius: 999px !important; }
.alo-magaza-huawei{ border-radius: 999px !important; }

/* ====================================================================
   UYGULAMA BOLUMU — LIEFERANDO DUZENI (21 Eylul 2026)
   Kullanici: "bizim de uygulama bolumu boyle olsun, sag ve sol arka plan rengi
   yapissin, tasarim ve duzen boyle olsun deskop, rengi de boyle olsun, TEK uygulama
   resmi olsun, HAREKET YAPMA, boyle olsun sabit resimler".
   -> Bant kenardan kenara (100vw), acik mavi-gri zemin; SOLDA buyuk baslik + alt yazi +
      3 magaza rozeti; SAGDA tek telefon, egimsiz ve animasyonsuz, altindan tasarak kesilir.
      QR bu duzende yok (referansta da yok).
   Bu blok dosyanin SONUNDA: ayni ozgullukteki onceki tgoyemek kurallarini ezmeli.
   ==================================================================== */
.alo-uygulama{
  background: #C7DBDB !important; border-radius: 0 !important; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 44px max(24px, calc(50vw - 620px)) 0 !important;
  min-height: 0 !important; gap: 40px !important; align-items: center !important;
}
.alo-uygulama-sol{ flex: 1 1 0; max-width: 560px; gap: 12px !important; padding-bottom: 44px;
  margin-left: 210px; }   /* 21 Eyl (kullanici duzeltti: sola degil SAGA): metin + rozetler + QR biraz saga */
.alo-uygulama-etiket{ display: none; }                       /* referansta etiket yok */
.alo-uygulama h3{ color: #17201F !important; font-size: 34px !important; line-height: 1.15; }
.alo-uygulama p{ color: #33403F !important; font-size: 15px !important; font-weight: 600; }
/* 21 Eyl (kullanici: "qr koymamissin neden oraya"): QR geri geldi — rozetlerin altinda,
   kucuk beyaz kart + yaninda aciklama. (Telefonda okutulamadigi icin <=575px'te gizli kalir.) */
.alo-uygulama .alo-qr{ display: flex !important; order: 6; margin: 16px 0 0 !important;
  align-items: center; gap: 12px; }
.alo-uygulama .alo-qr-kare{ width: 104px !important; height: 104px !important; background: #fff;
  border-radius: 14px; padding: 8px; box-shadow: 0 2px 6px rgba(23,32,31,.08), 0 10px 24px rgba(23,32,31,.10); }
.alo-uygulama .alo-qr-yazi{ max-width: 250px; margin-top: 0; }
.alo-uygulama .alo-qr-yazi b{ color: #17201F !important; font-size: 13.5px; }
.alo-uygulama .alo-qr-yazi span{ color: #33403F !important; font-size: 12.5px; }
.alo-uygulama .alo-magazalar{ margin-top: 6px !important; gap: 10px !important; }
.alo-uygulama .alo-magazalar img{ height: 44px !important; }
.alo-uygulama .alo-magaza-huawei{ height: 44px; width: 146px; }
.alo-uygulama .alo-magaza-alt{ font-size: 15px; }
/* TEK telefon, sabit: ikinci telefon kalkar, egim/animasyon biter */
.alo-uygulama-sag{ flex: 0 0 auto; width: auto; height: auto; position: relative; align-self: flex-end;
  /* 21 Eyl (kullanici: "telefon resmini saga al biraz") */
  margin-left: auto; margin-right: 10px; }   /* 21 Eyl: telefon biraz sola alindi */
.alo-uygulama-sag .alo-telefon-2{ display: none !important; }
.alo-uygulama-sag .alo-telefon-1{
  position: static !important; width: 208px !important; animation: none !important;
  transform: none !important; margin-bottom: -22px; display: block;
}
.alo-uygulama-sag .alo-telefon-1 img{ width: 100%; height: auto; display: block; }
@media (max-width: 991.98px){
  .alo-uygulama{ padding: 30px 16px 0 !important; gap: 20px !important; flex-direction: column;
    align-items: stretch !important; }
  .alo-uygulama-sol{ padding-bottom: 0; margin-left: 0; }   /* masaustundeki -46px mobilde ekran disina tasiyordu */
  .alo-uygulama h3{ font-size: 24px !important; }
  .alo-uygulama p{ font-size: 14px !important; }
  .alo-uygulama-sag{ align-self: center; }
  .alo-uygulama-sag .alo-telefon-1{ width: 220px !important; margin-bottom: -28px; }
}

/* ====================================================================
   RESTORAN BASVURUSU — "Bize Katilmanin Avantaji" (21 Eylul 2026)
   Kullanici: "buradaki bu bolumu tasarlarmisin, biraz ciplak kalmis sanki".
   Sitenin kendi isaretlemesi (.partner-section > .row > .col-lg-4 > .section) DEGISMEDI;
   yalniz tema acikken kart gorunumu verilir: beyaz kart, ince cizgi, yumusak golge,
   ikon turuncu yuvarlak kare icinde, ust satir vurgulu alt yazi.
   ==================================================================== */
.partner-section{ background: #FAFAF9 !important; padding: 56px 0 64px !important; }
.partner-section .container{ width: 100% !important; max-width: 1240px; }
.partner-section > .container > h4{
  font-family: var(--alo-yazi); font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  color: var(--alo-ink); margin-bottom: 34px !important;
}
.partner-section .row{ display: flex; gap: 22px; margin: 0; }
.partner-section .col-lg-4{ flex: 1 1 0; padding: 0; display: flex; }
.partner-section .col-lg-4 > .section{
  flex: 1 1 auto; background: #fff; border: 1px solid var(--alo-line); border-radius: 22px;
  padding: 26px 24px 26px !important; box-shadow: 0 1px 2px rgba(31,29,27,.04), 0 14px 34px rgba(31,29,27,.05);
  transition: transform .18s ease, box-shadow .18s ease;
  /* sitenin .section kurali sabit yukseklik/bosluk veriyordu: kart icerige gore olsun */
  min-height: 0 !important; height: auto !important; width: 100%;
}
.partner-section .col-lg-4 > .section:hover{
  transform: translateY(-4px); box-shadow: 0 2px 4px rgba(31,29,27,.05), 0 22px 46px rgba(31,29,27,.09);
}
.partner-section .col-lg-4 > .section img{
  width: 64px; height: 64px; object-fit: contain; padding: 12px; border-radius: 18px;
  background: var(--alo-acc-a); margin-bottom: 16px;
}
.partner-section .col-lg-4 > .section h5{
  font-family: var(--alo-yazi); font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  color: var(--alo-ink); margin: 0 0 4px;
}
.partner-section .col-lg-4 > .section p{ font-size: 14px; color: var(--alo-mut); margin: 0 0 10px; line-height: 1.55; }
.partner-section .col-lg-4 > .section p:first-of-type{
  color: var(--alo-acc-k); font-weight: 700; font-size: 13px; letter-spacing: .01em;
}
.partner-section .col-lg-4 > .section p:last-child{ margin-bottom: 0; }
@media (max-width: 991.98px){
  .partner-section{ padding: 34px 0 38px !important; }
  .partner-section > .container > h4{ font-size: 22px; margin-bottom: 20px !important; }
  .partner-section .row{ flex-direction: column; gap: 14px; }
  .partner-section .col-lg-4 > .section{ padding: 20px 18px 22px; border-radius: 18px; }
  .partner-section .col-lg-4 > .section img{ width: 54px; height: 54px; margin-bottom: 12px; }
}

/* QR telefonda okutulamaz: <=575px'te gizli. (Bu kural, yukaridaki "QR geri geldi"
   blogundan SONRA gelmeli — ayni ozgullukte sonraki kural kazanir.) */
@media (max-width: 575.98px){
  .alo-uygulama .alo-qr{ display: none !important; }
}

/* 21 Eylul 2026 (kullanici, dar pencere ekran goruntusu): 576-991px arasinda uygulama
   bandindaki magaza rozetleri 173px sabit kalip banttan TASIYORDU (mobil izgara kurali
   yalniz <=575.98px icindi). Bu aralikta da esit sutunlu izgara. */
@media (max-width: 991.98px){
  .alo-uygulama-sol{ margin-left: 0 !important; width: 100%; }
  .alo-uygulama .alo-magazalar{
    display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 10px !important;
  }
  .alo-uygulama .alo-magazalar a, .alo-uygulama .alo-magazalar > *{ min-width: 0; }
  .alo-uygulama .alo-magazalar img{ width: 100% !important; height: auto !important; max-width: 170px; }
  .alo-uygulama .alo-magaza-huawei{
    width: 100% !important; max-width: 170px; height: auto !important; min-height: 44px; padding: 6px 8px !important;
  }
  .alo-uygulama .alo-magaza-huawei .alo-magaza-alt{ font-size: 13px; white-space: nowrap; }
  .alo-uygulama .alo-qr{ margin-top: 14px !important; }
  .alo-uygulama .alo-qr-kare{ width: 88px !important; height: 88px !important; }
}

/* 21 Eylul 2026 (kullanici: "resmi duz cevirebilir misin" + "tam duz olmadi"):
   Mockup'in kendi 3D perspektifi tam duzelmiyordu. Cozum: gorselden yalniz EKRAN alindi
   (assets/alotema/telefon/1.png artik cercevesiz duz ekran), cihaz cercevesi CSS ile cizilir.
   Bu blok, "CERCEVELI GORSELLER" blogunu (cerceveyi kapatan kurallar) ezmek icin dosyanin
   SONUNDA durmali. */
.alo-uygulama-sag .alo-telefon-1{
  background: #14120F !important; padding: 9px !important; border-radius: 34px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 26px 54px rgba(0,0,0,.28) !important;
  width: 188px !important; display: block;
}
.alo-uygulama-sag .alo-telefon-1 .alo-telefon-ekran{
  border-radius: 26px !important; display: block; width: 100%; height: auto !important;
  background: #fff !important;
}

/* 21 Eylul 2026: verisi olmayan bolum (ornegin "Öne Çıkan Ürünler" alo'da bos) Vue'dan
   bos <div> olarak geliyor ve 44px bosluk birakiyordu. Veri gelince kendiliginden gorunur. */
#vue-home-widgets > .alo-bolum:empty{ display: none !important; }

/* ====================================================================
   RESTORAN KARTLARI — tgoyemek/UberEats DESENI (21 Eylul 2026)
   Kullanici: "/restaurants bolumunu, restoran kartlarini boyle yap" (ekran goruntusu).
   Referanstaki fark: puan KOYU YESIL kutu icinde beyaz yazi + yaninda yorum sayisi,
   ad puanin saginda; kampanya etiketleri KIRMIZI ve onay ikonlu; kart ince cizgili,
   golgesiz, 12px kose. Markup'ta yalnizca puan kutusu adin ONUNE alindi (feed.php +
   template_swiper_list.php), gerisi CSS.
   ==================================================================== */
.alo-kart{ border: 1px solid var(--alo-line); border-radius: 12px; box-shadow: none; overflow: hidden; }
.alo-kart:hover{ box-shadow: 0 6px 18px rgba(31,29,27,.08); }
.alo-kart-gorsel, .alo-kart-foto{ border-radius: 0 !important; }
.alo-kart-govde{ padding: 10px 12px 12px !important; gap: 5px !important; }

/* puan: koyu yesil kutu, beyaz yazi, yaninda yorum sayisi */
.alo-puan{
  background: #1B7F4B !important; color: #fff !important; height: 21px; padding: 0 7px;
  border-radius: 6px; font-size: 12px; font-weight: 800; gap: 3px;
}
.alo-puan i{ color: #fff !important; font-size: 9px; }
.alo-puan em{ font-style: normal; font-weight: 700; opacity: .85; font-size: 11px; }
.alo-yeni{ background: #EAF1EC; color: #1C6B46; height: 21px; border-radius: 6px; font-size: 11.5px; }
.alo-kart-ad{ font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }

/* alt satir: sure · mesafe · mutfaklar */
.alo-kart-alt{ font-size: 12px; color: var(--alo-mut); font-weight: 600; }
.alo-ayrac{ padding: 0 5px; opacity: .6; }

/* kampanya etiketleri: kirmizi + onay ikonu (referans deseni) */
.alo-kart-etiketler{ left: 8px; top: 8px; gap: 5px; }
.alo-etiket{
  height: 22px; padding: 0 8px 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700;
  gap: 4px; max-width: 230px;
}
.alo-etiket::before{
  content: ""; width: 12px; height: 12px; flex: 0 0 auto; background-repeat: no-repeat; background-size: 12px 12px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6'/%3E%3C/svg%3E");
}
.alo-etiket-kupon{ background: #D93B30 !important; color: #fff !important; }
.alo-etiket-kampanya{ background: #D93B30 !important; color: #fff !important; }
@media (max-width: 575.98px){
  .alo-kart-ad{ font-size: 13.5px; }
  .alo-etiket{ max-width: 190px; font-size: 10.5px; }
}
/* Alt satir ayraclari: markup'taki sabit ayraclar yerine CSS uretiyor. Mutfak/sure/mesafe
   alanlarindan biri bossa (v-if) o parca hic basilmadigi icin "·" da cikmaz. */
.alo-kart-alt{ display: flex; flex-wrap: wrap; align-items: center; }
/* markup'ta ayrac span'i YOK; ilk parcadan sonraki her parca kendi ayracini basar */
.alo-kart-alt > span + span::before{ content: "·"; margin: 0 5px; opacity: .55; }

/* 21 Eylul 2026 (kullanici: "buyuklugu vs hepsi resimdeki gibi olsun, restoran kart
   boyutlari"): referansta (tgoyemek) fotograf genis-alcak ve kart govdesi dar. */
.alo-kart-gorsel{ aspect-ratio: 16/7 !important; }
.alo-kart-govde{ padding: 9px 12px 11px !important; gap: 4px !important; }
.alo-kart-ad{ font-size: 15px; }
.alo-izgara .alo-kart-gorsel, .alo-izgara .alo-kart-foto{ height: auto !important; }
@media (max-width: 991.98px){ .alo-kart-gorsel{ aspect-ratio: 16/8 !important; } }
@media (max-width: 575.98px){ .alo-kart-gorsel{ aspect-ratio: 16/9 !important; } }

/* 21 Eyl: referansta ("Semtin Yildizi") rozet satiri kartin EN ALTINDA; bizde puanin
   ustundeydi. Govde sirasi: puan+ad -> bilgi satiri -> rozetler. */
.alo-kart-govde{ display: flex; flex-direction: column; }
.alo-kart-govde > .alo-kart-ust{ order: 1; }
.alo-kart-govde > .alo-kart-alt{ order: 2; }
.alo-kart-govde > .alo-kart-rozetler{ order: 3; margin-top: 6px; }
.alo-kart-govde > .alo-kart-kapali{ order: 0; }

/* 21 Eylul 2026 (kullanici: "/restaurants bolumunun kartlari buyusun, 2 tane yan yana,
   sag ve sol kaplasin"): liste sayfasindaki izgara 2 esit sutuna alindi ve govde kenar
   bosluklari daraltildi. Kural yalniz .alo-sonuclar icinde — anasayfa seritleri etkilenmez. */
.alo-liste-govde{ padding: 22px 48px 40px !important; gap: 28px !important; }
.alo-sonuclar .alo-izgara{
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px !important;
}
.alo-sonuclar .alo-izgara > .alo-kart{ width: auto !important; max-width: none !important; }
.alo-sonuclar .alo-kart-gorsel{ aspect-ratio: 16/6.5 !important; }
.alo-sonuclar .alo-kart-ad{ font-size: 16px; }
.alo-sonuclar .alo-kart-alt{ font-size: 12.5px; }
@media (max-width: 1199.98px){
  .alo-liste-govde{ padding: 18px 24px 30px !important; gap: 20px !important; }
}
@media (max-width: 767.98px){
  .alo-sonuclar .alo-izgara{ grid-template-columns: 1fr; gap: 16px !important; }
  .alo-sonuclar .alo-kart-gorsel{ aspect-ratio: 16/8 !important; }
}
/* kart alt satiri: "Ucretsiz teslimat" yesil vurgulu */
.alo-kart-ucretsiz{ color: #1B7F4B; font-weight: 800; }


/* 21 Eylul 2026 (kullanici: "/cuisine/... bolumu 3 restoran olsun yan yana"):
   mutfak sayfasinda sol suzgec paneli yok (.alo-liste-tek) -> izgara 3 sutun.
   Restoran listesi (.alo-liste-govde, suzgecli) 2 sutunda kalir. */
.alo-liste-tek .alo-sonuclar .alo-izgara{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important;
}
.alo-liste-tek .alo-sonuclar .alo-kart-gorsel{ aspect-ratio: 16/7 !important; }
@media (max-width: 1199.98px){
  .alo-liste-tek .alo-sonuclar .alo-izgara{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 767.98px){
  .alo-liste-tek .alo-sonuclar .alo-izgara{ grid-template-columns: 1fr !important; }
}

/* 22 Eyl 2026 — Acilinca Haber Ver: kart artik DIV, link ic kisimda. */
.alo-kart-yakinda { display:flex; flex-direction:column; }
.alo-kart-ic { display:block; color:inherit; text-decoration:none; flex:1 1 auto; }
.alo-kart-ic:hover { color:inherit; text-decoration:none; }
.alo-yakinda-dugme-kutu { padding:0 12px 12px; }
.alo-yakinda-dugme-kutu .ahv-dugme { width:100%; justify-content:center; }

/* 23 Eylul 2026 (kullanici: "deskopta mobil uygulama resmini biraz sola ceker misin, sadece"):
   Yalniz MASAUSTU; mobil duzen (align-self:center) etkilenmesin diye medya sorgusu icinde.
   Dosyanin SONUNDA durmali (yukaridaki margin-right:10px kuralini ezer). */
@media (min-width: 992px){
  .alo-uygulama-sag{ margin-right: 130px; }
}

/* 27 Eylul 2026 (1.0.6, kullanici "yap"):
   1) liste sayfasi ust bar servis secicisi ("Teslimat⌄"): sitenin dugmesinde sag bosluk yok, ::after oku
      (absolute, right:12px) yazinin ustune biniyordu -> oka yer ac.
   2) mobil servis/adres satiri (#vue-widget-nav-mobile) body'nin dogrudan cocugu, kenar boslugu yoktu -> 16px. */
.alo-ust-adres .widget-dropdown > #dropdownMenuButton { position: relative; padding-right: 20px !important; }
.alo-ust-adres .widget-dropdown > #dropdownMenuButton::after { right: 2px; }
@media (max-width: 991.98px){
  #vue-widget-nav-mobile { padding-left: 16px; padding-right: 16px; }
}

/* ===================================================================
   1.0.7 (1 Ekim 2026) ERISILEBILIRLIK — PageSpeed renk kontrasti (WCAG AA 4.5:1)
   Beyaz yazili turuncu dugmeler #E4682F (3.32) -> #C4521C (4.59); turuncu
   vurgular (ikon, cizgi, kenar) AYNEN --alo-acc. Diger eklentilerin dugmeleri de
   tema acikken burada esitlenir (Ne Yesem, Haber Ver, cok yakinda rozeti).
   =================================================================== */
:root { --alo-acc-yazi: #C4521C; --alo-acc-yazi-k: #A8461A; }
.alo-ust-sag .alo-ub-kayit,
.alo-alt-bulten .el-button--success, .alo-alt-bulten .btn-green, .alo-alt-bulten .btn-success,
.alo-hero-arama .btn-green, .alo-hero-arama .el-button--success, .alo-hero-arama .btn-success,
.alo-dugme-turuncu,
.alo-hero-arama .el-button--primary,
.el-drawer .el-button--primary, .el-dialog .el-button--primary,
.any-bolum .any-dg { background: var(--alo-acc-yazi) !important; border-color: var(--alo-acc-yazi) !important; }
.alo-ust-sag .alo-ub-kayit:hover,
.alo-alt-bulten .el-button--success:hover, .alo-alt-bulten .btn-green:hover, .alo-alt-bulten .btn-success:hover,
.alo-hero-arama .btn-green:hover, .alo-hero-arama .el-button--success:hover, .alo-hero-arama .btn-success:hover,
.alo-dugme-turuncu:hover,
.alo-hero-arama .el-button--primary:hover,
.any-bolum .any-dg:hover { background: var(--alo-acc-yazi-k) !important; border-color: var(--alo-acc-yazi-k) !important; }
.alo-arama-hap span { color: var(--alo-mut); }
.alo-firsat-kampanya .alo-firsat-ust { color: #9A3F14; }
.alo-firsat-kampanya .alo-firsat-kucuk { color: #5C5752; }
.coming-soon-badge, span.coming-soon-badge { color: #C2531F !important; border-color: #C2531F !important; }
.ahv-dugme { color: #C2531F !important; border-color: #C2531F !important; }
.ahv-dugme:hover { background: #C2531F !important; color: #fff !important; }
.rzon-kart span, .rzon-etiket span { color: var(--alo-ink) !important; }
.alo-puan em { opacity: 1 !important; }   /* yorum sayisi .85 saydamlikla 4,1 kaliyordu -> beyaz 5,0 */
/* restoran sayfasi: cok yakinda "ekle" dugmesi (beyaz yazi #b2b2b2 uzerinde 2.1) , devamini oku, yorum suzgeci */
.btn-grey.quantity-add-cart { background-color: #6F6A64 !important; border-color: #6F6A64 !important; color: #fff !important; }
a.read-more { color: #B04000 !important; }
.alo-yorum-suzgec .alo-cip.secili { color: #A63C00 !important; }
/* kaydirici oklari: dis kutu ic dugmeyi tam kapsasin (dokunma hedefi cakismasin) */
.swiper-button-next, .swiper-button-prev { width: 32px !important; min-height: 32px; }
/* alt bilgi menu basligi h6 -> h2 (alotema.js) — eski gorunumle ayni */
.alo-alt-menu h2.alo-alt-baslik { font-size: 15px; font-weight: 700; color: var(--alo-ink); margin-bottom: 12px; line-height: 1.2; }
/* restoran sayfasi yesili (tasarim.css --alo-green #0E8A5F: beyaz yazi 4.36) -> #0B7550 (5.71) */
html:root { --alo-green: #0B7550; }
/* 1.0.7 HIZ: hero slaytinin ILK karesi gorunur baslar (LCP gorseli). Eskiden opacity:0'dan 0,5 sn'de
   beliriyordu -> tarayici en buyuk gorseli gec "boyanmis" sayiyordu. Dongu ve diger kareler AYNI. */
@keyframes aloSlayt1 {
  0%    { opacity: 1; transform: none; }
  18%   { opacity: 1; transform: none; }
  22%   { opacity: 0; }
  98%   { opacity: 0; transform: scale(1.06); }
  100%  { opacity: 1; transform: none; }
}
.alo-slayt:not(.alo-slayt-tek) .alo-slayt-kare:first-child { opacity: 1; animation-name: aloSlayt1; }
/* 1.0.7 HIZ — restoran sayfasi KAYMA (CLS) duzeltmeleri (mobil)
   1) Rozet satirindaki 3 .d-inline-flex arasindaki bosluk karakterleri Vue yuklenmeden once satiri tasirip
      alt satira atiyordu (111px); Vue bosluklari silince 69px'e iniyordu -> asagidaki her sey 42px kayiyordu.
      Esnek kutu: bosluk karakteri yok sayilir, Vue oncesi/sonrasi ayni.
   2) #vue-widget-nav-mobile (servis + arama satiri) Vue yuklenene kadar 0px, sonra 43px -> sayfa 43px kayiyordu.
      Yeri onceden ayrilir. */
@media (max-width: 991.98px) {
  .alo-mob-rozetler.d-block { display: flex !important; flex-wrap: wrap; align-items: flex-start; }
  #vue-widget-nav-mobile { min-height: 43px; }
}
/* 1.0.7 HIZ — YAZI TIPI KAYMASI (CLS): Plus Jakarta Sans yuklenene kadar tarayici yedek yaziyla (Arial/Roboto) ciziyor;
   yedek %9-17 daha genis -> dugmeler/satirlar Jakarta gelince daralip yeniden diziliyordu (restoran sayfasi mobilde 0,10 kayma).
   Yedek yazi Jakarta genisligine olceklenir (1 Eki olcumu: 400 -> 0,92 ; 600-800 -> 0,83). Jakarta gelince gorunum AYNI.
   1.0.8: dikey olculer de Jakarta'ya esitlendi (ascent 1,04 / descent 0,22 / bosluk 0; override'lar size-adjust'a bolunur). */
@font-face { font-family: 'Jakarta Yedek'; src: local('Arial'), local('ArialMT'), local('Roboto'), local('Helvetica'), local('Liberation Sans'), local('Nimbus Sans'), local('NimbusSans-Regular'); font-weight: 300 500; size-adjust: 92%; ascent-override: 113%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'Jakarta Yedek'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Nimbus Sans Bold'), local('NimbusSans-Bold'); font-weight: 600 900; size-adjust: 83%; ascent-override: 125%; descent-override: 26.5%; line-gap-override: 0%; }
:root { --alo-yazi: 'Plus Jakarta Sans', 'Jakarta Yedek', system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* 1.0.7 HIZ — restoran basligi (masaustu): .alo-rest Vue yuklenene kadar v-cloak ile 6px, sonra 285px -> menu ~280px
   asagi kayiyordu (masaustu kayma ~0,11). 1 Eki olcumu: canlida 8 farkli restoranda + alo'da hep 285px. Yer bastan ayrilir;
   Vue yuklenince v-cloak kalkar, kural devreden cikar. */
@media (min-width: 992px) { .alo-rest[v-cloak] { min-height: 285px; } }

/* 1.0.7 (canli olcumu) — anasayfa one cikan urunler bandindaki "Ekle" (color="#3ecf8e" ozelligiyle, beyaz yazi 2,0)
   ve cerez penceresindeki "Kabul et" (Element Plus mavisi #409eff, 2,78) okunur tona cekilir. */
.el-button[style*="#3ecf8e"] { --el-button-bg-color: #1B7F4B !important; --el-button-border-color: #1B7F4B !important;
  --el-button-hover-bg-color: #146B3E !important; --el-button-hover-border-color: #146B3E !important; --el-button-hover-text-color: #fff !important;
  --el-button-active-bg-color: #105A34 !important; --el-button-active-border-color: #105A34 !important; }
#notification_1 .el-button--primary { --el-button-bg-color: #1F6FD1 !important; --el-button-border-color: #1F6FD1 !important;
  --el-button-hover-bg-color: #1A5FB4 !important; --el-button-hover-border-color: #1A5FB4 !important; }
/* Element Plus uyari kutulari: acik zemin uzerinde soluk yazi (hata #f56c6c / #fef0f0 = 2,9) -> koyu ton */
.el-alert--error.is-light .el-alert__title, .el-alert--error.is-light .el-alert__description { color: #B42318 !important; }
.el-alert--warning.is-light .el-alert__title, .el-alert--warning.is-light .el-alert__description { color: #8A5A0A !important; }
.el-alert--success.is-light .el-alert__title, .el-alert--success.is-light .el-alert__description { color: #1B6B3F !important; }
.el-alert--info.is-light .el-alert__title, .el-alert--info.is-light .el-alert__description { color: #4A4F57 !important; }
/* 1.0.8 HIZ 2 — restoran sayfasi yapiskan kenar kutulari (masaustu): sitenin StickySidebar kutuphanesi sol kategori listesini
   ve sepeti kaydirinca position:fixed + top:20px yapiyordu -> (a) tarayici bunu kayma sayiyordu (kaydirmada 0,086; gercek
   kullanici CLS'ine girer), (b) liste 147px'lik yapiskan ust barin ALTINDA kaliyordu (ilk kategoriler gorunmuyordu).
   CSS sticky: ayni yapiskan davranis, kaymasiz, ust barin hemen altinda; uzun liste kendi icinde kayar. */
@media (min-width: 992px) {
  body.action-menu .sticky-sidebar, body.action-menu .sticky-cart { position: sticky !important; top: 160px; }
  body.action-menu .sticky-sidebar .inner-wrapper-sticky, body.action-menu .sticky-cart .inner-wrapper-sticky {
    position: static !important; transform: none !important; top: auto !important; left: auto !important; width: auto !important; }
  body.action-menu .sticky-sidebar { max-height: calc(100vh - 175px); overflow-y: auto; }
  /* 1.1.1 — sepet cekmecesi acikken kutu sticky kalirsa kendi katmanini kurar; cekmece karartmanin altinda kalir. */
  body.alo-sepet-acik.action-menu .sticky-cart { position: static !important; }
}
/* 1.0.8 — panelden girilen icerik sayfalari (sehir/KKTC/kurumsal; body.controller-page): metin icindeki baglantilar
   cevre yazidan ayirt edilemiyordu (siyah, alti cizgisiz) ve liste baglantilari 18px yuksekligindeydi (dokunma hedefi). */
body.controller-page .page-content .text-left a:not(.btn):not(.sl-kart) { color: var(--alo-acc-yazi, #C4521C); text-decoration: underline; text-underline-offset: 2px; }
body.controller-page .page-content .text-left li > a, body.controller-page .page-content .text-left li > strong > a { display: inline-block; padding: 3px 0; }