/* ==========================================================================
   osp-shop-chrome.css: magaza (musteri) sayfalarinin CERCEVESI · kp34/X, 2026-10-30
   --------------------------------------------------------------------------
   Kapsam: /<slug>, /menu/<slug> ve magaza alt sayfalarinda ortak olan
   parcalar. Urun kartlari (osp-shop-items.css), sepet paneli (osp-cart.css),
   alt sayfa govdeleri (osp-shop-pages.css) bu dosyanin isi DEGIL.
     1. Sabit dugmeler (tema / yukari cik / sabit sepet) -- icerige binmesin
     2. Ust cubuk: dil secici, Garsonu Cagir, giris, telefon cubugu
     3. Ana sayfa bandi (welcome_banner.php)
     4. Kategori sekmeleri: kaydirma ipucu
     5. Alt bilgi (user_footer.php + common/avaiable_days.php)
     6. Eski tarayici yedekleri

   Dil: rezervasyon sayfasi (osp-reservation.css, kp34/M) ve osp-theme.css
   token'lari. Kart: yuzey + 1px cizgi + 20px kose + yumusak golge. Hap
   dugmeler 999px. Acik + koyu tema token eslemesi osp-theme.css'ten
   (body.theme-dark). Yeni renk tanimlanmadi; her var() acik tema degeriyle
   yedekli (once duz deger, sonra var()).

   Eski tarayici (Edge 16 / iOS 12 Safari / Chrome 58 / Firefox 60):
   flex `gap`, `inset`, `aspect-ratio`, `clamp()`, `:is/:where/:has`,
   `position: sticky` KULLANILMADI. Bosluklar margin ile. Odak halkasi
   :focus ile; :focus-visible ayri kuralda (bilmeyen tarayici yalniz onu atar).

   Ozgulluk: satici CSS'i (style.css, responsive.css) ve osp-theme.css
   ustune `html body ...` onekiyle cikilir; !important yalniz satici
   CSS'inin !important'ina ya da satir ici stile karsi, yaninda gerekcesi var.
   Geri alma: header.php'deki <link> satirini kaldirmak tum katmani kapatir.
   ========================================================================== */


/* ==========================================================================
   1. SABIT DUGMELER
   --------------------------------------------------------------------------
   Kok sebep (olculdu 2026-10-30, 390x844): sabit tema dugmesi (329,609 →
   373,653), yukari cik ve sabit sepet, sagdaki urun kartlarinin "Ekle"
   dugmesinin TAM USTUNDE. Telefonda icerik 15px kenar payina kadar
   uzaniyor; sabit bir dugmenin konabilecegi bos serit yok -- kucultmek ya
   da kaydirmak cakismayi yalniz baska bir karta tasir.
   Karar (<992px, yani magazanin telefon/tablet cubugu style_1.php
   gorundugu her yerde):
     - tema dugmesi ust cubukta (style_1.php .osp-bar-theme) -- tanitim
       sayfalarindaki .osp-theme-switch ile ayni desen; sabit olan gizli.
     - sabit sepet gizli: ayni cubukta sayili sepet simgesi (.navCart) var;
       ikinci kopya icerigin ustunde duruyordu.
     - yukari cik sabit degil, sayfanin sonunda akista (alt bilginin altinda).
   >=992px: kp34/V duzeni AYNEN (sepet tema'nin ustunde, ayni sutunda);
   icerik kaplari sag sutunun genisligi kadar iceri alinir ki dugmeler
   kartlarin ustune dusmesin.
   ========================================================================== */

@media (max-width: 991.98px) {
  /* GIZLI (kp34/X): tema dugmesi bu genislikte ust cubukta. Geri acmak icin
     bu kurali sil. Sabit dugmenin isaretlemesi ve dinleyicisi yerinde. */
  html body .theme-toggle.user {
    display: none;
  }

  /* GIZLI (kp34/X): sabit sepet. Ust cubuktaki .navCart ayni sepeti sayisiyla
     aciyor. !important GEREKCE: osp-theme.css kp34/V konum kurali
     !important. Geri acmak icin bu kurali sil. */
  html body .cartFloatingIcon {
    display: none !important;
  }

  /* Yukari cik: akista, ortada, alt bilginin altinda. main.js gorunurlugu
     jQuery fadeIn/fadeOut (satir ici display) ile yonetmeye devam eder. */
  html body > .scroll-top {
    position: static;
    width: 44px;
    height: 44px;
    margin: 16px auto 24px;
    border: 1px solid rgba(15, 23, 42, .10);
    border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
    background: #fff;
    background: var(--osp-surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30);
    box-shadow: var(--osp-shadow-1, 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30));
  }

  /* footer.php'deki `<div class="elf" style="margin-top:-100px!important">`
     (yuksekligi 0) akistaki sonraki ogeyi 100px yukari ceker; dugme alt
     bilginin ustune biniyordu (olculdu 390: 5997 < 6081). Telafi yalniz o
     oge varken. */
  html body > .elf ~ .scroll-top {
    margin-top: 116px;
  }

  html body > .scroll-top a {
    display: block;
    height: 42px;
    color: #2a5fe6;
    color: var(--osp-brand-600, #2a5fe6);
    font-size: 18px;
    line-height: 42px;
    text-align: center;
  }
}

/* Masaustu: sabit sutun icerigin disinda kalsin. Sutunun ic kenari:
   sag 34px + 45px dugme = 79px (kp34/V). Kap 72px iceri alininca icerigin
   sag kenari 72 + 15 (kap ic payi) = 87px'te biter → 8px nefes. */
@media (min-width: 992px) {
  html body .section_items .restaurant-container,
  html body .footer_area .restaurant-container {
    max-width: 1300px;
    max-width: calc(100% - 144px);
  }

  html body .theme-toggle.user .theme-toggle-btn,
  html body > .scroll-top {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30);
    box-shadow: var(--osp-shadow-1, 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30));
  }
}

@media (min-width: 1444px) {
  html body .section_items .restaurant-container,
  html body .footer_area .restaurant-container {
    max-width: 1300px;
  }
}


/* ==========================================================================
   2. UST CUBUK
   ========================================================================== */

/* ---- 2a. Masaustu (commonTopMenu.php, menu stili 2/3, >=992px) -------- */
html body .commonTopMenu .rightMenu ul > li + li {
  margin-left: 8px;
}

/* Ortak hap: 40px yukseklik, ayni yazi boyu, ayni kose. */
html body .commonTopMenu .rightMenu .dropdownMenu > a,
html body .commonTopMenu .rightMenu li.callwaiter a,
html body .commonTopMenu .rightMenu .nav-item.ml-10 a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  border-radius: var(--osp-r-pill, 999px);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background-color .14s ease, border-color .14s ease, color .14s ease;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

html body .commonTopMenu .rightMenu .dropdownMenu > a i,
html body .commonTopMenu .rightMenu li.callwaiter a i {
  margin-right: 8px;
  font-size: 1rem;
  line-height: 1;
}

/* Dil secici: sessiz hap (cizgi + yuzey). Bayrak YOK (omer kurali). */
html body .commonTopMenu .rightMenu .dropdownMenu > a {
  border-color: rgba(15, 23, 42, .10);
  border-color: var(--osp-line, rgba(15, 23, 42, .10));
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  box-shadow: none;
}

/* !important GEREKCE: `a.btn` satici CSS'inde ve custom_color.php'de renk
   aliyor; zemini degistirdigimiz icin yazi rengi de kesin verilir
   (kp33/G dersi: beyaz zemin + beyaz yazi). */
html body .commonTopMenu .rightMenu .dropdownMenu > a,
html body .commonTopMenu .rightMenu .dropdownMenu > a i {
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
}

html body .commonTopMenu .rightMenu .dropdownMenu > a .osp-tb-chev {
  margin-right: 0;
  margin-left: 6px;
  font-size: .75rem;
  opacity: .7;
}

html body .commonTopMenu .rightMenu .dropdownMenu > a:hover {
  border-color: rgba(15, 23, 42, .18);
  border-color: var(--osp-line-strong, rgba(15, 23, 42, .18));
  background-color: #f3f6fc;
  background-color: var(--osp-surface-2, #f3f6fc);
}

/* Garsonu Cagir: eskiden style.css `li.callwaiter a` gri (rgba(84,91,98,.8))
   + beyaz yazi; bootstrap secondary gibi duruyordu. Sitenin ikincil marka
   dugmesi: marka tonu zemin + koyu marka yazi (urun kartindaki "Ekle" ile
   ayni aile). Kontrast: #1e4fd8 / (#2f6bff %10 + beyaz) → 5,9:1 (acik);
   #a8c2ff / koyu zemin → 8,1:1. !important GEREKCE: kp33/G dersi -- zemini
   degisen dugmede yazi rengi kesin verilir. */
html body .commonTopMenu .rightMenu li.callwaiter a {
  border-color: rgba(47, 107, 255, .18);
  border-color: var(--osp-brand-tint-2, rgba(47, 107, 255, .18));
  background: rgba(47, 107, 255, .10);
  background: var(--osp-brand-tint, rgba(47, 107, 255, .10));
}

html body .commonTopMenu .rightMenu li.callwaiter a,
html body .commonTopMenu .rightMenu li.callwaiter a i {
  color: #1e4fd8 !important;
  color: var(--osp-brand-700, #1e4fd8) !important;
}

html body .commonTopMenu .rightMenu li.callwaiter a:hover {
  background: rgba(47, 107, 255, .18);
  background: var(--osp-brand-tint-2, rgba(47, 107, 255, .18));
}

/* Giris: yalniz simge → 40px yuvarlak, dil hapiyla ayni cizgi. */
html body .commonTopMenu .rightMenu .nav-item.ml-10 a {
  width: 40px;
  padding: 0;
  border-color: rgba(15, 23, 42, .10);
  border-color: var(--osp-line, rgba(15, 23, 42, .10));
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: 1.0625rem;
}

html body .commonTopMenu .rightMenu .nav-item.ml-10 a:hover {
  background-color: #f3f6fc;
  background-color: var(--osp-surface-2, #f3f6fc);
}

/* Acilan dil listesi: kart dili. Konumu satici JS/CSS'inde, dokunulmadi. */
html body .commonTopMenu .rightMenu .dropdownArea.dropdownList {
  overflow: hidden;
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 14px;
  border-radius: var(--osp-r, 14px);
  background: #fff;
  background: var(--osp-surface, #fff);
  box-shadow: 0 20px 50px -24px rgba(15, 23, 42, .22);
  box-shadow: var(--osp-shadow-2, 0 20px 50px -24px rgba(15, 23, 42, .22));
}

html body .commonTopMenu .rightMenu .dropdownArea.dropdownList li a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  border-radius: var(--osp-r-sm, 10px);
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: .9375rem;
  font-weight: 500;
}

html body .commonTopMenu .rightMenu .dropdownArea.dropdownList li a:hover {
  background: #f3f6fc;
  background: var(--osp-surface-2, #f3f6fc);
}

/* Odak: style.css `.btn{outline:none !important}` → halka ::after ile
   (osp-theme notu: ::before'u main.js spinner'i kullaniyor). */
html body .commonTopMenu .rightMenu .dropdownMenu > a,
html body .commonTopMenu .rightMenu li.callwaiter a,
html body .commonTopMenu .rightMenu .nav-item.ml-10 a {
  position: relative;
}

html body .commonTopMenu .rightMenu .dropdownMenu > a:focus::after,
html body .commonTopMenu .rightMenu li.callwaiter a:focus::after,
html body .commonTopMenu .rightMenu .nav-item.ml-10 a:focus::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border: 2px solid #2f6bff;
  border: 2px solid var(--osp-brand, #2f6bff);
  border-radius: 999px;
  pointer-events: none;
}

html body .commonTopMenu .rightMenu .dropdownMenu > a:focus:not(:focus-visible)::after,
html body .commonTopMenu .rightMenu li.callwaiter a:focus:not(:focus-visible)::after,
html body .commonTopMenu .rightMenu .nav-item.ml-10 a:focus:not(:focus-visible)::after {
  content: none;
}

/* ---- 2b. Telefon / tablet cubugu (style_1.php .navRightMenu) ----------- */
/* Simgeler: 40px yuvarlak, ayni cizgi; tema dugmesi de ayni olcude. */
html body .navRightMenu ul li a,
html body .navRightMenu ul li .osp-bar-theme__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 999px;
  border-radius: var(--osp-r-pill, 999px);
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: 1.0625rem;
  line-height: 1;
}

html body .navRightMenu ul li a i {
  color: inherit;
  font-size: 1.0625rem;
}

/* !important GEREKCE: satici `.navRightMenu ul li a` gri (#777) basiyor;
   zemini beyaz yaptigimiz icin yazi/simge rengi kesin verilir (kp33/G
   dersi). #777/beyaz 4,48:1 → #0f1b33 17,1:1. */
html body .navRightMenu ul li a {
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
}

/* Sepet sayaci ve dil adi (>=992px'te gorunen) icin ic bosluk korunur. */
html body .navRightMenu ul li a > span {
  margin-left: 4px;
}

html body .navRightMenu ul li.osp-bar-theme {
  margin-left: 6px;
}

/* .osp-theme-switch govdesi osp-theme.css § 7'de (44px, grid). Cubukta
   komsulariyla ayni 40px; ikonlar ortada mutlak konumla (eski tarayicida
   place-items gerekmez). */
html body .navRightMenu ul li .osp-bar-theme__btn {
  position: relative;
  width: 40px;
  padding: 0;
  cursor: pointer;
}

html body .navRightMenu ul li .osp-bar-theme__btn svg {
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
}

html body .navRightMenu ul li .osp-bar-theme__btn:focus {
  outline: 2px solid #2f6bff;
  outline: 2px solid var(--osp-brand, #2f6bff);
  outline-offset: 2px;
}

html body .navRightMenu ul li .osp-bar-theme__btn:focus:not(:focus-visible) {
  outline: 0;
}

@media (min-width: 992px) {
  /* GIZLI (kp34/X): >=992px'te tema dugmesi sabit sutunda (kp34/V). */
  html body .navRightMenu ul li.osp-bar-theme {
    display: none;
  }
}

/* 360px ve alti: logo + 4 dugme sigsin. */
@media (max-width: 359.98px) {
  html body .navRightMenu ul li a,
  html body .navRightMenu ul li .osp-bar-theme__btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
  }

  html body .navRightMenu ul li .osp-bar-theme__btn {
    width: 36px;
    padding: 0;
  }
}


/* ==========================================================================
   3. ANA SAYFA BANDI (welcome_banner.php)
   --------------------------------------------------------------------------
   Eski hal: tam genislik 422-549px blok, kapak gorselinin ustunde duz
   %40 siyah ortu; sosyal simgeler solda dikey, havada (position:absolute).
   Yeni: icerik kabiyla ayni genislikte, 20px koseli kart; kapak gorseli
   (restaurant_list.cover_photo, bg_loader ile geliyor -- dal aynen)
   ustunde alttan koyulasan ortu; logo + ad + rezervasyon + sosyal simgeler
   tek ortali sutun. Gorselin kendisi ve data-src akisi degismedi.
   ========================================================================== */
html body .user_home_banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 0;
  overflow: hidden;
  width: auto;
  max-width: 1268px;
  min-height: 0;
  height: auto;
  margin: 76px 12px 0;
  border-radius: 20px;
  border-radius: var(--osp-r-lg, 20px);
  background-position: center;
  background-size: cover;
  box-shadow: 0 20px 50px -24px rgba(15, 23, 42, .22);
  box-shadow: var(--osp-shadow-2, 0 20px 50px -24px rgba(15, 23, 42, .22));
}

/* Ortu: yazi kapak gorselinden bagimsiz okunsun. Capraz: sol ust daha acik
   (kapagin kendi rengi gorunsun, duz blok gibi durmasin), sag alt koyu.
   Yazinin durdugu orta bant en az %50 → duz #01a0fe kapakta (Liga) beyaz
   yazi 5,6:1; beyaz kapakta 4,9:1. */
html body .user_home_banner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  /* satici style.css ayni ::before'a duz rgba(0,0,0,.35) veriyordu (ust uste
     iki ortu kapagi lacivert yapiyordu) -- tek ortu kalsin. */
  background-color: transparent;
  background-image: -webkit-linear-gradient(290deg, rgba(6, 16, 36, .32), rgba(6, 16, 36, .52) 45%, rgba(6, 16, 36, .80));
  background-image: linear-gradient(160deg, rgba(6, 16, 36, .32), rgba(6, 16, 36, .52) 45%, rgba(6, 16, 36, .80));
  pointer-events: none;
}

html body .user_home_banner .userHomebanner_wrapper {
  position: relative;
  width: 100%;
  padding: 36px 20px 28px;
}

html body .user_home_banner .userHomebanner_wrapper > .row {
  margin-right: 0;
  margin-left: 0;
}

html body .user_home_banner .userHomebanner_wrapper > .row > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* Eski duz ortu .homeBanner_left uzerindeydi; yeni ortu bandin ::before'u. */
html body .user_home_banner .homeBanner_left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  text-align: center;
}

/* !important GEREKCE (height): satici CSS'inde `.shopLogo{height:auto
   !important}` var; dikey logo (LUNA 200x377) kutuyu 479px'e uzatiyordu. */
html body .user_home_banner .homeBanner_left .shopLogo {
  width: 96px;
  height: 96px !important;
  margin: 0 0 16px;
  padding: 0;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: #fff;
  background-clip: padding-box;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55);
}

html body .user_home_banner .homeBanner_left .shopLogo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  -o-object-fit: contain;
  object-fit: contain;
}

/* imgRation() "landscape" dedigi aslinda DIKEY logo (getimagesize sirasi
   ters; olculdu: esinblt/LUNA 200x377). Daireye sikistirilmaz. */
html body .user_home_banner .homeBanner_left .shopLogo.landscape {
  width: auto;
  height: 168px !important;
  border-radius: 14px;
  border-radius: var(--osp-r, 14px);
  background: transparent;
}

html body .user_home_banner .homeBanner_left .shopLogo.landscape img {
  width: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

html body .user_home_banner .homeBanner_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
}

html body .user_home_banner .homeBanner_btn .shopName {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Rezervasyon: kapagin ustunde beyaz hap; marka renkli kapakta (Liga
   kapagi duz #01a0fe) mavi dugme kayboluyordu. !important GEREKCE: satici
   `.btn`/custom_color.php renkleri + kp33/G dersi. Kontrast #0f1b33/#fff
   17,1:1 (tema bagimsiz: kapak fotografin ustunde). */
html body .user_home_banner .homeBanner_btn .home-book-btn,
html body .user_home_banner .homeBanner_btn .watch_video {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 44px;
  margin: 16px 0 0;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  border-radius: var(--osp-r-pill, 999px);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .6);
}

html body .user_home_banner .homeBanner_btn .home-book-btn {
  background: #fff !important;
  color: #0f1b33 !important;
}

html body .user_home_banner .homeBanner_btn .home-book-btn:hover {
  background: #eef3ff !important;
}

html body .user_home_banner .homeBanner_btn .watch_video {
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}

html body .user_home_banner .homeBanner_btn .home-book-btn + .watch_video {
  margin-top: 10px;
}

html body .user_home_banner .homeBanner_btn .home-book-btn:focus,
html body .user_home_banner .homeBanner_btn .watch_video:focus,
html body .user_home_banner .userHome_social a:focus {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Sosyal simgeler: bandin icinde, adin/dugmenin altinda tek satir.
   Eskiden solda dikey, `position:absolute` ile havada (style.css). */
html body .user_home_banner .userHome_social {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  margin: 20px 0 0;
  -webkit-transform: none;
  transform: none;
}

html body .user_home_banner .userHome_social ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .user_home_banner .userHome_social ul li {
  margin: 0 5px;
}

html body .user_home_banner .userHome_social ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  -webkit-transition: background-color .14s ease;
  transition: background-color .14s ease;
}

html body .user_home_banner .userHome_social ul li a:hover {
  background: rgba(255, 255, 255, .24);
}

/* Simge renkleri marka renginde degil beyaz: koyu ortu uzerinde facebook
   lacivert (#3b5998) 2,1:1 kaliyordu. */
html body .user_home_banner .userHome_social ul li a i {
  color: #fff !important;
  font-size: 1.125rem;
  line-height: 1;
}

/* Magazanin tanimladigi hizmet ikonlari (varsa) -- bandin altinda satir. */
html body .user_home_banner .homeBanner_Service {
  margin-top: 20px;
}

html body .user_home_banner .homeBanner_Service p {
  color: #fff;
}

@media (min-width: 768px) {
  html body .user_home_banner {
    margin: 80px 16px 0;
  }

  html body .user_home_banner .userHomebanner_wrapper {
    padding: 48px 32px 36px;
  }

  html body .user_home_banner .homeBanner_left .shopLogo {
    width: 112px;
    height: 112px !important;
  }

  html body .user_home_banner .homeBanner_left .shopLogo.landscape {
    width: auto;
    height: 200px !important;
  }

  html body .user_home_banner .homeBanner_btn .shopName {
    font-size: 1.875rem;
  }
}

/* >=992px: ust menu akista (62px pay zaten var, olculdu); bant icerik
   kabiyla ayni hizada. */
@media (min-width: 992px) {
  html body .user_home_banner {
    max-width: 1268px;
    max-width: calc(100% - 174px);
    margin: 16px auto 0;
  }
}

@media (min-width: 1444px) {
  html body .user_home_banner {
    max-width: 1270px;
  }
}


/* ==========================================================================
   4. KATEGORI SEKMELERI -- kaydirma ipucu
   --------------------------------------------------------------------------
   .gallery_sort yatay kaydiriliyor (overflow-x:scroll, olculdu 390'da
   1528/360 px) ama kaydirma cubugu gizli; son sekme kenarda kesik duruyor,
   kaydirilabildigi belli degil. Sag kenarda zemin rengine solan 48px serit
   + listenin sonunda ayni genislikte bos alan: liste sona kaydirilinca son
   sekme seridin altindan cikar. JS yok; maske yerine zemin renkli ortu
   (Edge 16 -webkit-mask-image bilmiyor). Zemin: satici --body-color
   (acik #f3f5f9 / koyu #191d2b, govdenin kendi rengi).
   ========================================================================== */
html body .gallery_top_menu {
  position: relative;
}

html body .gallery_top_menu::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 48px;
  background-image: -webkit-linear-gradient(left, rgba(243, 245, 249, 0), #f3f5f9 85%);
  background-image: linear-gradient(90deg, rgba(243, 245, 249, 0), #f3f5f9 85%);
  pointer-events: none;
}

html body.theme-dark .gallery_top_menu::after {
  background-image: -webkit-linear-gradient(left, rgba(25, 29, 43, 0), #191d2b 85%);
  background-image: linear-gradient(90deg, rgba(25, 29, 43, 0), #191d2b 85%);
}

html body .gallery_top_menu .gallery_sort::after {
  content: "";
  display: block;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 48px;
  flex: 0 0 48px;
  width: 48px;
  height: 1px;
}

/* Kaydirma dokunmatikte akici (iOS 12). */
html body .gallery_top_menu .gallery_sort {
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   5. ALT BILGI (user_footer.php)
   --------------------------------------------------------------------------
   Eski hal: QR + ad + iletisim ortali bir sutun, saat listesi ikinci sutunda
   farkli hizada, ust bosluk 120-180px. Yeni: iki kart yan yana (>=768px),
   telefonda alt alta; saat karti rezervasyon sayfasindaki "Musaitlik"
   kutusunun satir dili (bkz. osp-reservation.css § musaitlik). Gun sirasi
   ve "bugun" secimi PHP'de (kp33/F, kp34/S) -- burada yalniz gorunum.
   ========================================================================== */

/* Icerikle alt bilgi arasindaki bos alan (olculdu 1440: 152px): style.css
   `.sectionDefault{padding-bottom:120px}` + `.section_items` alt payi.
   Alt bilgi kendi ust payini veriyor. Ozgulluk (0,2,0) bilerek dusuk:
   rezervasyon sayfasinin `section.sectionDefault.osp-rez-page` (0,2,1)
   kurali onu gecmeye devam eder. */
.mainWrapper > .sectionDefault {
  padding-bottom: 32px;
}

html body .section_items {
  padding-bottom: 8px;
}

/* Zemin/cizgi .footer_area'ya degil iceriklerine: alt bilgisi kapali
   magazada (CafeDem, is_footer=1) .footer_area bos basiliyor; ona cizgi
   verilince bos bir serit cikiyordu. */
html body .footer_area .top_footer,
html body .footer_area .footer_bottom {
  background-color: #f4f7fb;
  background-color: var(--osp-bg-soft, #f4f7fb);
}

html body .footer_area .top_footer {
  padding: 32px 0 8px;
  border-top: 1px solid rgba(15, 23, 42, .10);
  border-top: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
}

html body .footer_area .top_footer .row {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

html body .footer_area .osp-sf-col {
  margin-bottom: 16px;
}

/* Kart: rezervasyon sayfasindaki --soft kart. */
html body .footer_area .osp-sf-col > .left_footer {
  display: block;
  height: 100%;
  margin: 0;
  padding: 24px 20px;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 20px;
  border-radius: var(--osp-r-lg, 20px);
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30);
  box-shadow: var(--osp-shadow-1, 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30));
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  text-align: left;
}

/* ---- iletisim karti ------------------------------------------------------
   Ust: magaza adi; alt alta telefon / adres satirlari (saat kartiyla ayni
   cizgili satir dili); en altta QR + sosyal simgeler. Izgara Edge 16 /
   iOS 12 / Chrome 58 / Firefox 60'ta var; yine de @supports yedegi § 7'de. */
html body .footer_area .osp-sf-col--contact .left_footer {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "name name"
    "info info"
    "qr   social";
}

html body .footer_area .osp-sf-col--contact .left_footer > h4 {
  grid-area: name;
}

html body .footer_area .osp-sf-col--contact .shopFooterInfo {
  grid-area: info;
  margin: 0 -10px;
}

html body .footer_area .osp-sf-col--contact .qrCode {
  grid-area: qr;
  -ms-grid-row-align: end;
  align-self: end;
  width: 112px;
  height: 112px;
  margin: 16px 16px 0 0;
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 12px;
  background: #fff;
}

html body .footer_area .osp-sf-col--contact .qrCode img {
  display: block;
  width: 100%;
  height: 100%;
}

html body .footer_area .osp-sf-col--contact .left_footer > ul {
  grid-area: social;
  -ms-grid-row-align: end;
  align-self: end;
}

html body .footer_area .osp-sf-col > .left_footer > h4 {
  margin: 0 0 10px;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
}

html body .footer_area .shopFooterInfo p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  min-height: 44px;
  margin: 0;
  padding: 11px 10px;
  border-top: 1px solid rgba(15, 23, 42, .10);
  border-top: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  font-size: .9375rem;
  line-height: 1.45;
  text-align: left;
}

html body .footer_area .shopFooterInfo p i {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 18px;
  margin: 3px 8px 0 0;
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  font-size: .875rem;
  text-align: center;
}

/* !important GEREKCE: custom_color.php `.left_footer p a` magaza rengini
   !important'siz ama daha sonra basiyor; #01a0ff beyazda 2,8:1. */
html body .footer_area .shopFooterInfo p a {
  display: inline;
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.45;
  word-break: break-word;
}

html body .footer_area .shopFooterInfo p a:hover {
  color: #1e4fd8 !important;
  color: var(--osp-brand-700, #1e4fd8) !important;
}

html body .footer_area .osp-sf-col--contact .left_footer > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 16px 0 0 -4px;
  padding: 0;
}

html body .footer_area .osp-sf-col--contact .left_footer > ul li {
  margin: 0 4px;
}

html body .footer_area .osp-sf-col--contact .left_footer > ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 999px;
  background: #f3f6fc;
  background: var(--osp-surface-2, #f3f6fc);
}

/* Simgeler tek renk (murekkep): marka renkleri acik kartta yetmiyordu
   (WhatsApp #25d366 / #f3f6fc 1,9:1, koyu temada Facebook #3b5998 2,0:1;
   WCAG 1.4.11 grafik esigi 3:1). !important GEREKCE: satici `.facebook`,
   `.whatsapp` ... renkleri. */
html body .footer_area .osp-sf-col--contact .left_footer > ul li a i {
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
  font-size: 1rem;
  line-height: 1;
}

/* ---- saat karti: Musaitlik satir dili ---------------------------------- */
html body .footer_area .osp-sf-col--hours .availableDays {
  display: block;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: .9375rem;
  list-style: none;
}

html body .footer_area .osp-sf-col--hours .availableDays > li {
  display: block;
  min-height: 44px;
  margin: 0 -10px;
  padding: 10px;
  border-top: 1px solid rgba(15, 23, 42, .10);
  border-top: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  font-size: .9375rem;
  line-height: 1.4;
}

html body .footer_area .osp-sf-col--hours .availableDays > li:first-child {
  border-top-color: transparent;
}

html body .footer_area .osp-sf-col--hours .availableDays > li.is-today {
  border-top-color: transparent;
  border-radius: 10px;
  border-radius: var(--osp-r-sm, 10px);
  background-color: rgba(47, 107, 255, .10);
  background-color: var(--osp-brand-tint, rgba(47, 107, 255, .10));
}

html body .footer_area .osp-sf-col--hours .availableDays > li.is-today + li {
  border-top-color: transparent;
}

/* Ozgulluk (0,4,3): satici `ul.row_ul.availableDays.open li .flexTime`
   (0,4,2) acik-tip magazada satiri ortali sutun yapiyordu (olculdu QA Liga). */
html body .footer_area .osp-sf-col--hours .availableDays li .flexTime {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
  margin: 0;
  text-align: left;
}

html body .footer_area .osp-sf-col--hours .timeLeft,
html body .footer_area .osp-sf-col--hours .timeRight {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

/* Acik-tip magazada (available_type=open) satici `.availableDays.open`
   satiri ortali sutuna ceviriyordu (olculdu QA Liga); tek satir dili korunur. */
html body .footer_area .osp-sf-col--hours .timeLeft {
  margin-right: 12px;
  text-align: left;
}

html body .footer_area .osp-sf-col--hours .timeRight {
  text-align: right;
}

html body .footer_area .osp-sf-col--hours .timeLeft span {
  display: inline;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: .9375rem;
  font-weight: 500;
}

/* "Bugun" etiketi: rezervasyon sayfasindaki .osp-rez__today ile ayni. */
html body .footer_area .osp-sf-today {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background-color: #2a5fe6;
  background-color: var(--osp-brand-600, #2a5fe6);
  color: #fff;
  color: var(--osp-on-brand, #fff);
  font-size: .75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 1px;
}

/* Saat metni: style.css `.timeFormat` kucuk harf + 14.4px idi ("24 saat
   acik"); dil verisi zaten dogru buyuk harfli ("24 Saat Açık"). */
/* !important GEREKCE (renk): custom_color.php / style.css saat metnine
   --color (#4b566b) veriyor; Musaitlik kutusundaki gibi murekkep rengi. */
html body .footer_area .osp-sf-col--hours .timeFormat {
  display: inline;
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
  font-size: .9375rem !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  white-space: nowrap;
}

/* GIZLI (kp34/X): saat oncesindeki duvar saati simgesi -- Musaitlik
   kutusunda simge yok, her satirda ayni simge gurultu. Kapali gun simgesi
   (icofont-close-line) gorunur kalir. Geri acmak icin bu kurali sil. */
html body .footer_area .osp-sf-col--hours .timeFormat .icofont-wall-clock {
  display: none;
}

html body .footer_area .osp-sf-col--hours .timeRightTop + .timeRightTop {
  margin-top: 2px;
}

/* Mola saatleri (kapali-tip magazada) satirin altinda, sessiz. */
html body .footer_area .osp-sf-col--hours .timeRightBottom {
  margin: 0;
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  font-size: .8125rem;
  text-align: right;
}

html body .footer_area .osp-sf-col--hours .timeRightBottom:empty {
  display: none;
}

/* Acik-tip magaza: yalniz bugunun satiri + "Mevcut gunler" baglantisi. */
/* !important GEREKCE: baglantinin `.f-color` sinifi magaza rengini
   (#01a0ff, beyazda 2,8:1) basiyor; AA icin koyu marka tonu. */
html body .footer_area .osp-sf-col--hours .availableDays > li > a {
  display: inline-block;
  padding: 2px 0;
  color: #1e4fd8 !important;
  color: var(--osp-brand-700, #1e4fd8) !important;
  font-size: .9375rem;
  font-weight: 600;
}

/* ---- hizli baglantilar (magaza aciksa) --------------------------------- */
html body .footer_area .osp-sf-col--links .row_ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .footer_area .osp-sf-col--links .row_ul li a {
  display: block;
  padding: 6px 0;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: .9375rem;
}

/* ---- alt serit ---------------------------------------------------------- */
html body .footer_area .footer_bottom {
  border-top: 1px solid rgba(15, 23, 42, .10);
  border-top: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
}

/* Telefon: kartlar tam genislik, alt alta. */
@media (max-width: 767.98px) {
  html body .footer_area .osp-sf-col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* >=768px: iki kart yan yana, toplamda en cok 920px, ortali. */
@media (min-width: 768px) {
  html body .footer_area .top_footer {
    padding-top: 40px;
  }

  html body .footer_area .top_footer .row {
    max-width: 950px;
    margin-right: auto;
    margin-left: auto;
  }

  html body .footer_area .osp-sf-col {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    max-width: 50%;
  }

  html body .footer_area .osp-sf-col--links {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}


/* ==========================================================================
   6. KOYU TEMA ESIKLERI (token disinda kalan sabit degerler)
   ========================================================================== */
/* QR beyaz zeminde kalir (okunurluk), cercevesi koyu temada da ince. */
html body.theme-dark .footer_area .osp-sf-col--contact .qrCode {
  border-color: rgba(255, 255, 255, .12);
}

/* Koyu temada alt bilgi zemini govdeyle ayni (satici --body-color #191d2b);
   --osp-bg-soft (#0e1730) lacivert kaliyor, komur rengi govdeyle ayrisiyordu.
   Ayrim ust cizgiden geliyor. */
html body.theme-dark .footer_area .top_footer,
html body.theme-dark .footer_area .footer_bottom {
  background-color: transparent;
}


/* ==========================================================================
   7. ESKI TARAYICI YEDEKLERI
   --------------------------------------------------------------------------
   Bu dosyada flex `gap`, `inset`, `aspect-ratio`, `clamp()`, `:is/:where/
   :has`, `position: sticky` YOK (bosluk margin, ortu top/right/bottom/left).
   Izgara: hedef tarayicilarin dordu de destekliyor (Edge 16 isaretsiz
   grid-template-areas). Desteklemeyen motor icin duz akis: */
@supports not (grid-template-areas: "a") {
  html body .footer_area .osp-sf-col--contact .left_footer {
    display: block;
  }

  html body .footer_area .osp-sf-col--contact .qrCode {
    display: inline-block;
    vertical-align: bottom;
  }

  html body .footer_area .osp-sf-col--contact .left_footer > ul {
    display: inline-block;
    vertical-align: bottom;
  }

  html body .footer_area .osp-sf-col--contact .left_footer > ul li {
    display: inline-block;
  }
}