/* ==========================================================================
   osp-shop-items.css: magaza menusu urun kartlari + kategori sayfasi filtre
   satiri (theme1) · kp34/Y, 2026-10-30
   --------------------------------------------------------------------------
   Kapsam: yalniz `.restaurant-container.theme_1` altindaki kartlar ve
   kategori sayfasinin filtre satiri (`.single__cat__header`). theme_1 sinifi
   yalniz theme1/single_menu.php (menu) ve theme1/single_category.php
   (kategori sayfasi) kapsayicisinda var; theme3 (CafeDem, Cyprus Cajun) ve
   theme2 bu siniflari tasimaz, bu dosyadan etkilenmez (olculdu).
   Kart isaretlemesi: theme1/include/item_thumbs.php. Bu dosya isaretlemeyi
   DEGISTIRMEZ; JS'in kullandigi .quick_view, data-id, data-type, data-offer,
   .subcatItem, .categoryItem aynen kalir.

   Ne duzeltildi (canlida olculdu, 30 Eki):
     - Kart sabit 185px min-height (style.css .homeSingle_item) -> icerik
       185'in cok altinda, kartin alt ~67px'i bostu. Simdi yukseklik icerikten
       gelir; ayni satirdaki kartlar sutunu esneterek esitlenir, fiyat satiri
       kartin dibine yaslanir (bos alan kartin altinda degil, aciklama ile
       fiyat arasinda ve yalniz kisa icerikli kartta).
     - Fiyat #4e54c8 mor (koyu temada #39ea84 yesil) -> --osp-ink, 700.
     - "Ekle" acik mavi %10 zeminli kucuk hap -> rezervasyon sayfasinin ana
       eylemi gibi dolu --osp-brand-600 + --osp-on-brand.
     - Telefonda fiyat ortali mor, altinda tam genislik dugme ve buyuk bosluk
       (responsive.css column) -> fiyat solda, dugme sagda tek satir.
     - Filtre acilir listesi + Ara kutusu: rezervasyon formundaki alan dili
       (48px, 1px --osp-line-strong, --osp-r kose, odakta marka halkasi).

   Aciklama satiri her zaman basilir (omer 30 Eki: ad ile ayni olsa da
   gizlenmez); bu dosya aciklamayi gizlemez, yalniz 2 satirla sinirlar.

   Eski tarayici (Edge 16 / iOS 12 Safari / Chrome 58 / Firefox 60):
   flex `gap`, `inset`, `aspect-ratio`, `clamp()`, `:is/:where/:has` YOK.
   Bosluklar margin ile. Her var() yedek degerli (acik tema degeri, once duz
   bildirim). -webkit-line-clamp'i bilmeyen Firefox 60 icin max-height
   yedegi. :focus-within / :focus-visible iceren kurallar ayri yazildi;
   bilmeyen tarayici yalniz o kurali atar, :focus yedegi calisir.
   3:2 urun gorseli kp33/L (osp-theme.css) kuralidir; burada dokunulmaz.

   Ozgulluk: `body .restaurant-container.theme_1 ...` (0,3,1)+ satici
   kurallarini (en cok 0,4,0) asar. !important yalniz satici CSS'inin
   !important'ina ya da magaza renk katmanina karsi; yaninda gerekcesi var.
   ========================================================================== */

/* ------------------------------------------------------------ izgara ---- */
/* Satir esitleme: sutun flex kolon, kart flex:1. Bootstrap .row zaten flex
   (align-items: stretch), sutunlar satirin en uzun kartina esitlenir. jQuery
   .hide()/.show() (alt kategori suzgeci) satir ici display'i silip bu
   kurala geri doner. */
body .restaurant-container.theme_1 .row > .q-sm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* -------------------------------------------------------------- kart ---- */
body .restaurant-container.theme_1 .homeSingle_item {
  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: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 16px;
  padding: 0;
  overflow: hidden;
  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-color: #fff;
  background-color: var(--osp-surface, #fff);
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  -webkit-transition: border-color 200ms cubic-bezier(.16, .84, .44, 1), box-shadow 200ms cubic-bezier(.16, .84, .44, 1);
  transition: border-color 200ms cubic-bezier(.16, .84, .44, 1), box-shadow 200ms cubic-bezier(.16, .84, .44, 1);
}

/* Kategori sayfasi: style.css `div#showCatItem .homeSingle_item{margin-bottom:15px}`
   (1,1,1) yukaridaki kurali geciyordu; menu sayfasiyla ayni aralik. */
body .restaurant-container.theme_1 #showCatItem .homeSingle_item {
  margin-bottom: 16px;
}

/* !important GEREKCE: style.css `.homeSingle_item{box-shadow:... !important}`. */
body .restaurant-container.theme_1 .homeSingle_item {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30) !important;
  box-shadow: var(--osp-shadow-1, 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30)) !important;
}

body .restaurant-container.theme_1 .homeSingle_item:hover {
  border-color: rgba(15, 23, 42, .18);
  border-color: var(--osp-line-strong, rgba(15, 23, 42, .18));
}

/* Gorselli kart: gorsel ustte, kenara yasli (kp33/L 3:2 kutusu aynen). */
body .restaurant-container.theme_1 .homeSingle_item > .item_images {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
}

body .restaurant-container.theme_1 .homeSingle_item .homeSingleImg.menu-img {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Detay blogu: kalan yuksekligi doldurur, fiyat satiri dibe yaslanir.
   Satici min-height'lari (151 / 160 / 112 / 127px) kaldirildi: bos alanin
   kaynagi onlardi. */
body .restaurant-container.theme_1 .homeSingle_item .homeItemDetails.list_view {
  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-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  padding: 16px;
  overflow: visible;
}

body .restaurant-container.theme_1 .homeSingle_item .homeItem_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-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

/* ------------------------------------------------------------- baslik --- */
body .restaurant-container.theme_1 .homeSingle_item .topTitle {
  margin: 0;
}

body .restaurant-container.theme_1 .homeSingle_item .top___title {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* En cok 2 satir; Firefox 60 line-clamp bilmez -> max-height yedegi
   (2 x 22px). */
body .restaurant-container.theme_1 .homeSingle_item .topTitle h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 44px;
  margin: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Vegan / vejetaryen noktasi: basligin ilk satiriyla hizali. */
body .restaurant-container.theme_1 .homeSingle_item .top___title .veg_type {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 6px 0 0 8px;
  font-size: 10px;
}

/* ---------------------------------------------------------- aciklama --- */
body .restaurant-container.theme_1 .homeSingle_item .price_section {
  margin: 0;
}

body .restaurant-container.theme_1 .homeSingle_item .price_section p.details {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 40px;
  margin: 4px 0 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
}

/* ------------------------------------------------- fiyat + Ekle satiri -- */
/* responsive.css 767px altinda bu satiri column + ortali yapiyordu. */
body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  /* Uzun fiyat (indirimli iki fiyat, 320px) sigmazsa dugme alt satira, saga. */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
}

body .restaurant-container.theme_1 .homeSingle_item .priceGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  min-width: 0;
  margin-right: 12px;
  gap: 0;
  font-variant-numeric: tabular-nums;
}

/* style.css `.priceGroup{gap:11px}` -> margin (eski motorda gap yok). */
body .restaurant-container.theme_1 .homeSingle_item .priceGroup > span {
  margin: 0 8px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

body .restaurant-container.theme_1 .homeSingle_item .priceGroup > span:last-child {
  margin-right: 0;
}

/* Indirimli urunde eski fiyat. !important GEREKCE: style.css
   `.previous_price{color:#fe696a !important}` beyaz uzerinde 2,9:1 (AA alti);
   --osp-muted 5,44:1 (koyu: #9fb0cc / #111c33 ~8:1). Ustu cizili kalir. */
body .restaurant-container.theme_1 .homeSingle_item .priceGroup > span.previous_price {
  font-size: 13px;
  font-weight: 500;
  text-decoration: line-through;
  color: #5a6a89 !important;
  color: var(--osp-muted, #5a6a89) !important;
}

/* Ekle: rezervasyon sayfasinin ana eylemi gibi dolu marka rengi.
   !important GEREKCE: zemin/yazi/cerceve style.css `.port_d_flex.home_view a`
   + magaza renk katmanindan (--dcolor, %10 zemin) geliyor ve :hover'da
   style.css #29c7ac + #fff yaziyor; acik/koyu temada yazi ve ikon rengi
   --osp-on-brand olmali (koyu: #061024 / #7aa2ff = 7,62:1; acik: #fff /
   #2a5fe6 = 5,42:1). getComputedStyle ile olculdu. */
body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  min-height: 40px;
  margin: 0 0 0 auto;
  padding: 0 16px;
  border: 1px solid transparent !important;
  border-radius: 999px;
  border-radius: var(--osp-r-pill, 999px);
  background-color: #2a5fe6 !important;
  background-color: var(--osp-brand-600, #2a5fe6) !important;
  color: #fff !important;
  color: var(--osp-on-brand, #fff) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  -webkit-transition: background-color 200ms cubic-bezier(.16, .84, .44, 1), box-shadow 200ms cubic-bezier(.16, .84, .44, 1), -webkit-transform 200ms cubic-bezier(.16, .84, .44, 1);
  transition: background-color 200ms cubic-bezier(.16, .84, .44, 1), box-shadow 200ms cubic-bezier(.16, .84, .44, 1), transform 200ms cubic-bezier(.16, .84, .44, 1);
}

body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view i {
  margin-right: 6px;
  font-size: 14px;
  color: #fff !important;
  color: var(--osp-on-brand, #fff) !important;
}

body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view span {
  display: inline;
  color: inherit !important;
}

body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view:hover {
  background-color: #1e4fd8 !important;
  background-color: var(--osp-brand-700, #1e4fd8) !important;
  color: #fff !important;
  color: var(--osp-on-brand, #fff) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 30px -12px rgba(47, 107, 255, .45);
  box-shadow: var(--osp-shadow-brand, 0 12px 30px -12px rgba(47, 107, 255, .45));
}

body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

/* Klavye odagi: :focus her motorda; :focus-visible'i bilen tarayici fare
   odaginda gizler (ayri kural: bilmeyen motor yalniz onu atar). */
body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view:focus {
  outline: 3px solid #2f6bff;
  outline: 3px solid var(--osp-brand, #2f6bff);
  outline-offset: 2px;
}

body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view:focus:not(:focus-visible) {
  outline: none;
}

/* ------------------------------------------------------------- telefon -- */
/* 2 sutunda kart ~150-180px: fiyat solda, dugme sagda yuvarlak ikon.
   "Ekle" yazisi gorsel olarak gizlenir ama ekran okuyucuda kalir (style.css
   display:none yapiyordu; o zaman ad yalniz Ingilizce title'dan geliyordu). */
@media (max-width: 575.98px) {
  body .restaurant-container.theme_1 .homeSingle_item,
  body .restaurant-container.theme_1 #showCatItem .homeSingle_item {
    margin-bottom: 10px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .homeItemDetails.list_view {
    padding: 12px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .topTitle h4 {
    font-size: 15px;
    line-height: 20px;
    max-height: 40px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .top___title .veg_type {
    margin-top: 5px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .price_section p.details {
    font-size: 13px;
    line-height: 18px;
    max-height: 36px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view {
    padding-top: 10px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .priceGroup {
    margin-right: 8px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .priceGroup > span {
    font-size: 15px;
    line-height: 22px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .priceGroup > span.previous_price {
    font-size: 12px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view i {
    margin-right: 0;
    font-size: 15px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ===================================================== kategori sayfasi == */
/* Filtre satiri: kategori acilir listesi + Ara kutusu (theme1/single_category.php).
   Sayfanin ust bandi (include/banner.php) bu dosyanin isi degil. */
body .restaurant-container.theme_1 .single__cat__header {
  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-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0;
  padding: 32px 0 24px;
}

/* style.css flex `gap:10px` + kp33/V yedegi `> * + *{margin-left:10px}`
   yerine her motorda ayni margin. */
body .restaurant-container.theme_1 .single__cat__header > * + * {
  margin-left: 12px;
}

/* Acilir liste: rezervasyon formundaki alan (osp-theme § 4 + osp-reservation
   .form-control). !important GEREKCE: style.css `select.ci-select{color:
   var(--color) !important}` ve :focus'ta border/renk !important. */
body .restaurant-container.theme_1 .single__cat__header select.ci-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto;
  min-width: 220px;
  max-width: 320px;
  height: 48px;
  margin: 0;
  padding: 0 44px 0 14px;
  border: 1px solid rgba(15, 23, 42, .18) !important;
  border: 1px solid var(--osp-line-strong, rgba(15, 23, 42, .18)) !important;
  border-radius: 14px;
  border-radius: var(--osp-r, 14px);
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  /* Ok: --osp-muted #5a6a89 tek renkli SVG; koyu temada asagida acik ton. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a6a89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 46px;
  cursor: pointer;
  box-shadow: none;
  -webkit-transition: border-color 140ms cubic-bezier(.16, .84, .44, 1), box-shadow 140ms cubic-bezier(.16, .84, .44, 1);
  transition: border-color 140ms cubic-bezier(.16, .84, .44, 1), box-shadow 140ms cubic-bezier(.16, .84, .44, 1);
}

/* Edge 16 / IE yerel okunu gizle (appearance:none'u bilmez). */
body .restaurant-container.theme_1 .single__cat__header select.ci-select::-ms-expand {
  display: none;
}

body .restaurant-container.theme_1 .single__cat__header select.ci-select:hover {
  border-color: #2a5fe6 !important;
  border-color: var(--osp-brand-600, #2a5fe6) !important;
}

body .restaurant-container.theme_1 .single__cat__header select.ci-select:focus {
  border-color: #2a5fe6 !important;
  border-color: var(--osp-brand-600, #2a5fe6) !important;
  box-shadow: 0 0 0 4px rgba(47, 107, 255, .10);
  box-shadow: 0 0 0 4px var(--osp-brand-tint, rgba(47, 107, 255, .10));
  outline: none;
}

body .restaurant-container.theme_1 .single__cat__header select.ci-select option {
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

body.theme-dark .restaurant-container.theme_1 .single__cat__header select.ci-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239fb0cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ara kutusu: style.css mutlak konumlu, golgeli (!important), 5px koseli
   kutu + sabit 250px girdi. Akista, cizgili alan + icinde ikon dugmesi. */
body .restaurant-container.theme_1 .single__cat__header .searchSection {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 380px;
  flex: 0 1 380px;
  min-width: 0;
}

body .restaurant-container.theme_1 .single__cat__header .itemSearch-2 {
  margin: 0;
}

body .restaurant-container.theme_1 .single__cat__header .searchBar-2 {
  position: relative;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
}

/* !important GEREKCE: style.css `.search-box-2{box-shadow:... !important}`. */
body .restaurant-container.theme_1 .single__cat__header .search-box-2 {
  position: relative;
  top: auto;
  left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 4px 0 14px;
  -webkit-transform: none;
  transform: none;
  border: 1px solid rgba(15, 23, 42, .18);
  border: 1px solid var(--osp-line-strong, rgba(15, 23, 42, .18));
  border-radius: 14px;
  border-radius: var(--osp-r, 14px);
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  box-shadow: none !important;
  -webkit-transition: border-color 140ms cubic-bezier(.16, .84, .44, 1), box-shadow 140ms cubic-bezier(.16, .84, .44, 1);
  transition: border-color 140ms cubic-bezier(.16, .84, .44, 1), box-shadow 140ms cubic-bezier(.16, .84, .44, 1);
}

body .restaurant-container.theme_1 .single__cat__header .search-box-2:hover {
  border-color: #2a5fe6;
  border-color: var(--osp-brand-600, #2a5fe6);
}

/* Odak cercevesi kutunun tamaminda (:focus-within). Ayri kural: bilmeyen
   motor (Edge 16, Chrome 58) yalniz bunu atar; asagidaki girdi :focus
   yedegi onlarda halkayi cizer. !important GEREKCE: kutu golgesi satici
   kuralinda !important. */
body .restaurant-container.theme_1 .single__cat__header .search-box-2:focus-within {
  border-color: #2a5fe6;
  border-color: var(--osp-brand-600, #2a5fe6);
  box-shadow: 0 0 0 4px rgba(47, 107, 255, .10) !important;
  box-shadow: 0 0 0 4px var(--osp-brand-tint, rgba(47, 107, 255, .10)) !important;
}

body .restaurant-container.theme_1 .single__cat__header .search-txt-2 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-family: inherit;
  font-size: 16px;
  line-height: 46px;
}

/* Eski motor yedegi: kutu halkasi yoksa girdinin kendisi cerceve alir. */
body .restaurant-container.theme_1 .single__cat__header .search-txt-2:focus {
  outline: 2px solid #2f6bff;
  outline: 2px solid var(--osp-brand, #2f6bff);
  outline-offset: 2px;
}

/* :focus-within'i bilen motorda halka kutuda; girdi cercevesi gereksiz. */
body .restaurant-container.theme_1 .single__cat__header .search-box-2:focus-within .search-txt-2 {
  outline: none;
}

body .restaurant-container.theme_1 .single__cat__header .search-txt-2::-webkit-input-placeholder {
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  opacity: 1;
}

body .restaurant-container.theme_1 .single__cat__header .search-txt-2::-moz-placeholder {
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  opacity: 1;
}

body .restaurant-container.theme_1 .single__cat__header .search-txt-2:-ms-input-placeholder {
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
}

body .restaurant-container.theme_1 .single__cat__header .search-txt-2::placeholder {
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  opacity: 1;
}

body .restaurant-container.theme_1 .single__cat__header .search-btn {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  border-radius: var(--osp-r-sm, 10px);
  background-color: transparent;
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  font-size: 18px;
  cursor: pointer;
  -webkit-transition: background-color 140ms cubic-bezier(.16, .84, .44, 1), color 140ms cubic-bezier(.16, .84, .44, 1);
  transition: background-color 140ms cubic-bezier(.16, .84, .44, 1), color 140ms cubic-bezier(.16, .84, .44, 1);
}

body .restaurant-container.theme_1 .single__cat__header .search-btn:hover {
  background-color: rgba(47, 107, 255, .10);
  background-color: var(--osp-brand-tint, rgba(47, 107, 255, .10));
  color: #2a5fe6;
  color: var(--osp-brand-600, #2a5fe6);
}

body .restaurant-container.theme_1 .single__cat__header .search-btn:focus {
  outline: 3px solid #2f6bff;
  outline: 3px solid var(--osp-brand, #2f6bff);
  outline-offset: 0;
}

body .restaurant-container.theme_1 .single__cat__header .search-btn:focus:not(:focus-visible) {
  outline: none;
}

/* Telefon / dar tablet: alt alta, tam genislik. */
@media (max-width: 767.98px) {
  body .restaurant-container.theme_1 .single__cat__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 20px 0 16px;
  }

  body .restaurant-container.theme_1 .single__cat__header > * + * {
    margin-left: 0;
    margin-top: 12px;
  }

  body .restaurant-container.theme_1 .single__cat__header select.ci-select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  body .restaurant-container.theme_1 .single__cat__header .searchSection {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ------------------------------------------------- eski tarayici ---- */
/* style.css kp33/V yedekleri flex gap yerine `> * + *:not(#kp33v)` margin'i
   veriyor (1,2,0); yalniz eski motorda calisir ve bu dosyanin margin'lerine
   eklenirdi (telefonda Ara kutusu 10px saga kayardi, eski fiyat 19px
   uzakta dururdu). Ayni vekil kosul (inset: Chrome 87 / Safari 14.1 /
   Firefox 66), :not(#kp34y) ile (1,3,1). Modern tarayicida hic uygulanmaz. */
@supports not (inset: 0) {
  body .restaurant-container.theme_1 .single__cat__header > * + *:not(#kp34y) {
    margin-left: 12px;
  }

  body .restaurant-container.theme_1 .homeSingle_item .priceGroup > * + *:not(#kp34y) {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  @supports not (inset: 0) {
    body .restaurant-container.theme_1 .single__cat__header > * + *:not(#kp34y) {
      margin-left: 0;
    }
  }
}

/* ------------------------------------------------------- hareket azalt -- */
@media (prefers-reduced-motion: reduce) {
  body .restaurant-container.theme_1 .homeSingle_item,
  body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view,
  body .restaurant-container.theme_1 .single__cat__header select.ci-select,
  body .restaurant-container.theme_1 .single__cat__header .search-box-2,
  body .restaurant-container.theme_1 .single__cat__header .search-btn {
    -webkit-transition: none;
    transition: none;
  }

  body .restaurant-container.theme_1 .homeSingle_item .port_d_flex.home_view a.quick_view:active {
    -webkit-transform: none;
    transform: none;
  }
}

/* ==========================================================================
   kp34/AD (2026-10-30): gorselsiz urun karti + URUN PENCERESI (theme1)
   ========================================================================== */

/* ------------------------------------------------- gorselsiz urun karti -- */
/* Liga'da gorseller acildi (restaurant_list.is_image 0): gorseli olmayan
   urunde get_img() EMPTY_IMG'i (assets/frontend/images/empty.jpg, gri zemin
   uzerinde buyuk beyaz resim simgesi) basiyor. Kutu (3:2, kp33/L) satir
   hizasi icin kalir; icerigi sayfanin yuzey tonu + kucuk catal-bicak simgesi.
   !important GEREKCE: bg_loader betigi gorseli satir ici style ile yaziyor.
   Simge: Font Awesome 6 Free (assets/frontend/icon6) fa-utensils \f2e7. */
body .restaurant-container.theme_1 .homeSingle_item .homeSingleImg.menu-img[data-src$="/images/empty.jpg"] {
  position: relative;
  background-image: none !important;
  background-color: #f3f6fc !important;
  background-color: var(--osp-surface-2, #f3f6fc) !important;
}

body .restaurant-container.theme_1 .homeSingle_item .homeSingleImg.menu-img[data-src$="/images/empty.jpg"]::after {
  content: "\f2e7";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  opacity: .45;
}

/* --------------------------------------------------------- urun penceresi */
/* Isaretleme: layouts/ajax_item_details_modal.php (.modal-content.osp-im,
   yalniz theme1 magazasinda) + layouts/inc/item_details_thumb_2.php.
   Pencere kabi #itemModal > #item_details butun temalarda ortak; ayrim
   .osp-im sinifiyla. theme2/theme3 (CafeDem, Cyprus Cajun), POS penceresi
   (backend/pos) ve urun sayfasi (layouts/item_details.php) bu sinifi
   tasimaz, etkilenmez.

   Yerlesim: baslik (kapatma) ustte yuzer, govde kayar, alt bilgi (adet +
   Sepete ekle) her zaman gorunur. Eskiden .singleItem 77dvh ile kayiyordu;
   simdi pencere yuksekligi gorunur alana sigar, govde araya esner.
   Telefonda (<=575px) pencere tam ekran.

   Dil: rezervasyon sayfasi (alanlar, birincil dugme) + sepet paneli
   (osp-cart.css: yuvarlak sade kapatma, hap adet secici).
   Ozgulluk: `#item_details > .modal-content.osp-im` (1,2,0)+; satici
   `#item_details .variantPrice` (1,1,0) ve item.css kurallarini asar.
   !important yalniz satici !important'ina karsi, yaninda gerekcesi var. */
#item_details > .modal-content.osp-im {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 560px;
  max-height: calc(100vh - 3.5rem);
  margin: 0 auto;
  overflow: hidden;
  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);
  /* !important GEREKCE: style.css `.modal-content/.modal-header{background:
     var(--background-color) !important}` (gri #f3f5f9). */
  background: #fff !important;
  background: var(--osp-surface, #fff) !important;
  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));
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-family: inherit;
}

#item_details > .modal-content.osp-im > form {
  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-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

#item_details > .modal-content.osp-im .modal-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* item.css `.singleItem{max-height:77dvh; overflow-y:auto}` (+ kp33/V 77vh
   yedegi): kayma artik .modal-body'de. */
#item_details > .modal-content.osp-im .singleItem {
  max-height: none;
  overflow: visible;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* ---- kapatma -------------------------------------------------------- */
#item_details > .modal-content.osp-im > .modal-header {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
}

#item_details > .modal-content.osp-im > .modal-header .modal-title:empty {
  display: none;
}

/* item.css `.itemPopupModal .modal-header .close{color:red}`; Bootstrap
   .close opacity .5 + text-shadow. Sepet panelindeki gibi yuvarlak, sakin. */
#item_details > .modal-content.osp-im > .modal-header .close {
  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;
  float: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  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);
  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);
  opacity: 1;
  text-shadow: none;
  font-family: inherit;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: background-color 140ms cubic-bezier(.16, .84, .44, 1);
  transition: background-color 140ms cubic-bezier(.16, .84, .44, 1);
}

#item_details > .modal-content.osp-im > .modal-header .close span {
  display: block;
  margin-top: -2px;
  line-height: 1;
}

#item_details > .modal-content.osp-im > .modal-header .close:hover {
  background-color: #f3f6fc;
  background-color: var(--osp-surface-2, #f3f6fc);
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  opacity: 1;
}

#item_details > .modal-content.osp-im > .modal-header .close:focus {
  outline: 3px solid #2f6bff;
  outline: 3px solid var(--osp-brand, #2f6bff);
  outline-offset: 2px;
}

#item_details > .modal-content.osp-im > .modal-header .close:focus:not(:focus-visible) {
  outline: none;
}

/* ---- gorsel --------------------------------------------------------- */
/* 3:2 + cover kp33/L (osp-theme.css) kuralidir; burada yalniz zemin ve
   kenar. Seffaf/beyaz zeminli urun fotograflari icin yuzey tonu. */
#item_details > .modal-content.osp-im .itemHeader {
  margin: 0;
  padding: 0;
}

#item_details > .modal-content.osp-im .itemHeader > .itemImg {
  margin: 0;
  background-color: #f3f6fc;
  background-color: var(--osp-surface-2, #f3f6fc);
}

#item_details > .modal-content.osp-im .itemHeader > .itemImg > img.img_loader {
  display: block;
  border-radius: 0;
}

/* Gorselsiz urun: EMPTY_IMG yer tutucusu pencerede gosterilmez (gizlenir,
   kod/veri ayni). Kutu bosalir, icerik ustten baslar. */
#item_details > .modal-content.osp-im .itemHeader > .itemImg > img.img_loader[data-src$="/images/empty.jpg"] {
  display: none !important;
}

/* ---- baslik + fiyat ------------------------------------------------- */
#item_details > .modal-content.osp-im .singleItemContent {
  padding: 20px 24px 16px;
}

/* Sagda kapatma dugmesine yer (gorselsiz urunde baslik en ustte). */
#item_details > .modal-content.osp-im .itemTitle {
  padding-right: 44px;
}

#item_details > .modal-content.osp-im .itemTitle h4 {
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#item_details > .modal-content.osp-im .itemTitle h4 .veg_type {
  margin-left: 8px;
  font-size: 11px;
  vertical-align: middle;
}

#item_details > .modal-content.osp-im .itemTitle p.tax_status,
#item_details > .modal-content.osp-im .itemTitle p.stock_counter {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
}

/* Boyutsuz urunde tek fiyat: siyah kutu yerine sayfanin fiyat dili
   (kartlardaki gibi koyu, kalin). Radyo dugmesi item.css ile zaten gizli. */
#item_details > .modal-content.osp-im .itemTitle > .itemVariants {
  display: block;
  margin: 6px 0 0;
  overflow: visible;
}

#item_details > .modal-content.osp-im .itemTitle > .itemVariants label.variant-btn {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
}

#item_details > .modal-content.osp-im .itemTitle > .itemVariants .priceGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 0;
}

#item_details > .modal-content.osp-im .itemTitle > .itemVariants .priceGroup > span {
  margin: 0 10px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-variant-numeric: tabular-nums;
}

/* !important GEREKCE: style.css `.previous_price{color:#fe696a !important}` (2,9:1). */
#item_details > .modal-content.osp-im .itemTitle > .itemVariants .priceGroup > span.previous_price {
  font-size: 15px;
  font-weight: 500;
  text-decoration: line-through;
  color: #5a6a89 !important;
  color: var(--osp-muted, #5a6a89) !important;
}

/* Boyutlu urun: "Boyut 5.00 TL" satiri + hap secenekler (segment yerine). */
#item_details > .modal-content.osp-im .itemVariantArea {
  margin-top: 14px;
}

#item_details > .modal-content.osp-im .itemVariantArea p.variantTags {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
}

/* !important GEREKCE: item.css `.itemVariantArea .variantPrice{color:#4e54c8 !important}`. */
#item_details > .modal-content.osp-im .itemVariantArea .variantPrice {
  margin-left: 6px;
  font-size: 18px;
  font-weight: 700;
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
  font-variant-numeric: tabular-nums;
}

#item_details > .modal-content.osp-im .itemVariantArea .itemVariants {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -8px -8px 0;
  overflow: visible;
  gap: 0;
}

#item_details > .modal-content.osp-im .itemVariantArea .itemVariants label.variant-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  min-height: 40px;
  margin: 0 8px 8px 0;
  padding: 0 18px;
  border: 1px solid rgba(15, 23, 42, .18);
  border: 1px solid var(--osp-line-strong, rgba(15, 23, 42, .18));
  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: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: background-color 140ms cubic-bezier(.16, .84, .44, 1), border-color 140ms cubic-bezier(.16, .84, .44, 1);
  transition: background-color 140ms cubic-bezier(.16, .84, .44, 1), border-color 140ms cubic-bezier(.16, .84, .44, 1);
}

#item_details > .modal-content.osp-im .itemVariantArea .itemVariants label.variant-btn:hover {
  border-color: #2a5fe6;
  border-color: var(--osp-brand-600, #2a5fe6);
}

/* Secili: dolu marka rengi. !important GEREKCE: kural e (zemin degisirse
   yazi rengi de) + item.css .active #000/#fff. */
#item_details > .modal-content.osp-im .itemVariantArea .itemVariants label.variant-btn.active {
  border-color: #2a5fe6;
  border-color: var(--osp-brand-600, #2a5fe6);
  background-color: #2a5fe6 !important;
  background-color: var(--osp-brand-600, #2a5fe6) !important;
  color: #fff !important;
  color: var(--osp-on-brand, #fff) !important;
}

/* Klavye: radyo gizli (item.css clip); odak hapin cevresinde. Ayri kural:
   :focus-within'i bilmeyen motor yalniz bunu atar. */
#item_details > .modal-content.osp-im .itemVariantArea .itemVariants label.variant-btn:focus-within {
  outline: 3px solid #2f6bff;
  outline: 3px solid var(--osp-brand, #2f6bff);
  outline-offset: 2px;
}

/* ---- aciklama + alerjen -------------------------------------------- */
#item_details > .modal-content.osp-im .item_extra_details {
  margin-top: 14px;
  padding: 0;
}

/* !important GEREKCE: item.css `.item_extra_details > *{color:var(--color) !important}`. */
#item_details > .modal-content.osp-im .item_extra_details > p {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: #5a6a89 !important;
  color: var(--osp-muted, #5a6a89) !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#item_details > .modal-content.osp-im .item_extra_details > p:empty {
  display: none;
}

#item_details > .modal-content.osp-im .item_extra_details > p.allergen {
  margin-top: 12px;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
}

#item_details > .modal-content.osp-im .item_extra_details > p.allergen b {
  font-weight: 600;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

#item_details > .modal-content.osp-im .allergenArea {
  margin-top: 14px;
}

#item_details > .modal-content.osp-im .allergenArea > p {
  margin: 0 0 8px !important;
  font-size: 14px;
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
}

#item_details > .modal-content.osp-im .allergenArea > p b {
  font-weight: 600;
}

#item_details > .modal-content.osp-im ul.allergenImage {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -8px -8px 0;
  padding: 0;
  overflow: visible;
  list-style: none;
  gap: 0;
}

#item_details > .modal-content.osp-im ul.allergenImage li {
  margin: 0 8px 8px 0;
  padding: 3px 12px 3px 3px;
  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);
  font-size: 13px;
  line-height: 20px;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  gap: 0;
}

#item_details > .modal-content.osp-im ul.allergenImage li img {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 24px;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0 6px 0 0;
  border-radius: 999px;
  box-shadow: none;
}

/* ---- ekstralar / boyut ekstralari ---------------------------------- */
#item_details > .modal-content.osp-im .item_extra_list {
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(15, 23, 42, .10);
  border-top: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
}

#item_details > .modal-content.osp-im .item_extra_list .extraTopHeading {
  margin: 0;
}

#item_details > .modal-content.osp-im .item_extra_list .extraHeadingTop {
  padding: 0;
}

#item_details > .modal-content.osp-im .item_extra_list h5.extrasHeading {
  margin: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

#item_details > .modal-content.osp-im .item_extra_list h5.extrasHeading small,
#item_details > .modal-content.osp-im .item_extra_list .extraHeadingTop > small {
  font-size: 13px;
  font-weight: 400;
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
}

#item_details > .modal-content.osp-im .item_extra_list .error,
#item_details > .modal-content.osp-im .item_extra_list p.errorMessage {
  color: #b91c1c;
  color: var(--osp-danger, #b91c1c);
}

#item_details > .modal-content.osp-im .item_extra_list p.errorMessage {
  margin: 4px 0 0;
  font-size: 13px;
}

#item_details > .modal-content.osp-im .item_extra_list p.errorMessage:empty {
  display: none;
}

/* style.css/item.css: liste iki sutun (li %50). Tek sutun, satir basina bir
   secenek, 52px dokunma satiri. */
#item_details > .modal-content.osp-im ul.extraUl {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

#item_details > .modal-content.osp-im ul.extraUl li.extraLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: none;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-height: 52px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(15, 23, 42, .10);
  border-bottom: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
}

#item_details > .modal-content.osp-im ul.extraUl li.extraLabel:last-child {
  border-bottom: 0;
}

#item_details > .modal-content.osp-im ul.extraUl li.extraLabel > label.custom-checkbox:first-child {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

#item_details > .modal-content.osp-im ul.extraUl li label.checkBoxArea {
  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-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

#item_details > .modal-content.osp-im ul.extraUl li label.checkBoxArea > p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

#item_details > .modal-content.osp-im ul.extraUl li label.checkBoxArea .mr-30 {
  margin-right: 12px !important;
}

#item_details > .modal-content.osp-im ul.extraUl li label.checkBoxArea span.left_bold {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 0 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-variant-numeric: tabular-nums;
}

/* Onay kutusu / radyo: style.css 16-19px gri kutu, secili --defaultColor
   (!important). Rezervasyon alanlariyla ayni cizgi + marka rengi. Satici
   odakta outline:0 !important yaziyor -> odak halkasi box-shadow ile. */
#item_details > .modal-content.osp-im ul.extraUl .checkboxSection input.extras {
  width: 20px !important;
  height: 20px !important;
  margin: 0 12px 0 0;
  border: 1.5px solid rgba(15, 23, 42, .18);
  border: 1.5px solid var(--osp-line-strong, rgba(15, 23, 42, .18));
  border-radius: 6px;
  /* !important GEREKCE: satici secilmemis kutuya magaza renginin %10 tonunu !important ile veriyor. */
  background-color: #fff !important;
  background-color: var(--osp-surface, #fff) !important;
  -webkit-transition: background-color 140ms cubic-bezier(.16, .84, .44, 1), border-color 140ms cubic-bezier(.16, .84, .44, 1);
  transition: background-color 140ms cubic-bezier(.16, .84, .44, 1), border-color 140ms cubic-bezier(.16, .84, .44, 1);
}

#item_details > .modal-content.osp-im ul.extraUl .checkboxSection input.extras[type=radio] {
  border-radius: 999px;
}

#item_details > .modal-content.osp-im ul.extraUl .checkboxSection input.extras:checked {
  border-color: #2a5fe6 !important;
  border-color: var(--osp-brand-600, #2a5fe6) !important;
  background-color: #2a5fe6 !important;
  background-color: var(--osp-brand-600, #2a5fe6) !important;
}

#item_details > .modal-content.osp-im ul.extraUl .checkboxSection input.extras:focus {
  border-color: #2a5fe6;
  border-color: var(--osp-brand-600, #2a5fe6);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, .18);
  box-shadow: 0 0 0 3px var(--osp-brand-tint-2, rgba(47, 107, 255, .18));
}

/* Koyu tema: dolgu #7aa2ff, satici beyaz isareti 2,5:1 -> --osp-on-brand
   koyu isaret (7,62:1). */
body.theme-dark #item_details > .modal-content.osp-im ul.extraUl .checkboxSection input.extras[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23061024'/%3e%3c/svg%3e");
}

body.theme-dark #item_details > .modal-content.osp-im ul.extraUl .checkboxSection input.extras[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23061024'/%3e%3c/svg%3e");
}

/* Secilen ekstranin adet secicisi (JS gosterir/gizler): sepet panelindeki
   hap secici. !important GEREKCE: item.css input zemini !important. */
#item_details > .modal-content.osp-im ul.extraUl .increaseDecrease {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  margin: 0 12px 0 0;
  padding: 1px;
  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: #f3f6fc;
  background-color: var(--osp-surface-2, #f3f6fc);
}

#item_details > .modal-content.osp-im ul.extraUl .increaseDecrease 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;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 32px;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

#item_details > .modal-content.osp-im ul.extraUl .increaseDecrease a:hover {
  background: rgba(15, 23, 42, .06);
}

body.theme-dark #item_details > .modal-content.osp-im ul.extraUl .increaseDecrease a:hover {
  background: rgba(255, 255, 255, .10);
}

#item_details > .modal-content.osp-im ul.extraUl .increaseDecrease input {
  width: 28px;
  height: 32px;
  padding: 0;
  border: 0;
  background-color: transparent !important;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ---- alt bilgi: adet + Sepete ekle --------------------------------- */
#item_details > .modal-content.osp-im .modal-footer {
  display: block;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid rgba(15, 23, 42, .10);
  border-top: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 0;
  background: #fff !important;
  background: var(--osp-surface, #fff) !important;
}

#item_details > .modal-content.osp-im .modal-footer > * {
  margin: 0;
}

/* responsive.css dar ekranda `.modalFooterArea{justify-content:center
   !important; flex-wrap:wrap; gap:20px}` -> dugme alt satira iniyordu. */
#item_details > .modal-content.osp-im .modalFooterArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  gap: 0;
}

#item_details > .modal-content.osp-im .modalIncreateArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 0 12px 0 0;
  padding: 1px;
  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: #f3f6fc;
  background-color: var(--osp-surface-2, #f3f6fc);
}

#item_details > .modal-content.osp-im .modalIncreateArea span.decrease,
#item_details > .modal-content.osp-im .modalIncreateArea span.increase {
  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: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: background-color 140ms cubic-bezier(.16, .84, .44, 1), -webkit-transform 140ms cubic-bezier(.16, .84, .44, 1);
  transition: background-color 140ms cubic-bezier(.16, .84, .44, 1), transform 140ms cubic-bezier(.16, .84, .44, 1);
}

#item_details > .modal-content.osp-im .modalIncreateArea span.decrease:active,
#item_details > .modal-content.osp-im .modalIncreateArea span.increase:active {
  background: rgba(15, 23, 42, .06);
  -webkit-transform: scale(.94);
  transform: scale(.94);
}

body.theme-dark #item_details > .modal-content.osp-im .modalIncreateArea span.decrease:active,
body.theme-dark #item_details > .modal-content.osp-im .modalIncreateArea span.increase:active {
  background: rgba(255, 255, 255, .10);
}

/* !important GEREKCE: item.css `.theme-light .modalIncreateArea input{border:0 !important}` ayni,
   zemin satici --background-color'dan geliyordu. */
#item_details > .modal-content.osp-im .modalIncreateArea input.qty {
  width: 32px;
  min-width: 32px;
  height: 44px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#item_details > .modal-content.osp-im .addToCartbutton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* Sepete ekle: rezervasyon "Gonder" / sepet "Odeme" dugmesi. `display`
   !important DEGIL: `.btn.hidden{display:none !important}` (fiyat 0 iken
   JS gizler) calismaya devam etmeli.
   !important GEREKCE: style.css `button.btn{color:#fff !important}`; koyu
   temada dolgu #7aa2ff uzerinde --osp-on-brand #061024 (7,62:1). */
#item_details > .modal-content.osp-im .addToCartbutton .addToCartBtn {
  position: relative;
  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;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  border-radius: var(--osp-r, 14px);
  background-color: #2a5fe6 !important;
  background-color: var(--osp-brand-600, #2a5fe6) !important;
  color: #fff !important;
  color: var(--osp-on-brand, #fff) !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
  -webkit-transition: background-color 200ms cubic-bezier(.16, .84, .44, 1), box-shadow 200ms cubic-bezier(.16, .84, .44, 1);
  transition: background-color 200ms cubic-bezier(.16, .84, .44, 1), box-shadow 200ms cubic-bezier(.16, .84, .44, 1);
}

#item_details > .modal-content.osp-im .addToCartbutton .addToCartBtn:hover {
  background-color: #1e4fd8 !important;
  background-color: var(--osp-brand-700, #1e4fd8) !important;
  color: #fff !important;
  color: var(--osp-on-brand, #fff) !important;
  box-shadow: 0 12px 30px -12px rgba(47, 107, 255, .45);
  box-shadow: var(--osp-shadow-brand, 0 12px 30px -12px rgba(47, 107, 255, .45));
}

#item_details > .modal-content.osp-im .addToCartbutton .addToCartBtn .displayPrice {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid currentColor;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Klavye odagi: style.css `.btn{outline:none !important}` +
   `.btn:focus{box-shadow:none !important}` -> halka ::after ile
   (rezervasyon sayfasindaki cozum; ::before'u .btn-spinner kullanir). */
#item_details > .modal-content.osp-im .addToCartbutton .addToCartBtn::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border: 3px solid #2f6bff;
  border: 3px solid var(--osp-brand, #2f6bff);
  border-radius: 19px;
  opacity: 0;
  pointer-events: none;
}

#item_details > .modal-content.osp-im .addToCartbutton .addToCartBtn:focus::after {
  opacity: 1;
}

#item_details > .modal-content.osp-im .addToCartbutton .addToCartBtn:focus:not(:focus-visible)::after {
  opacity: 0;
}

/* Stokta yok alt bilgisi (Kapat + Stokta yok): yalniz aralik ve kose. */
#item_details > .modal-content.osp-im .modal-footer.text-right .modalFooterArea .btn {
  min-height: 44px;
  border-radius: 14px;
  border-radius: var(--osp-r, 14px);
}

/* ---- telefon: tam ekran ------------------------------------------- */
/* Bootstrap <576px .modal-dialog{margin:.5rem}: icerik negatif payla kenara
   yaslanir. Yukseklik: 100dvh bilen tarayicida tam ekran; bilmeyen (iOS 12,
   Chrome 58) 100vh adres/arac cubuklarini da sayar, alt bilgi cubugun altinda
   kalmasin diye 80px pay. Alt bilgi her durumda gorunur (govde kayar). */
@media (max-width: 575.98px) {
  #item_details > .modal-content.osp-im {
    width: auto;
    max-width: none;
    height: calc(100vh - 80px);
    max-height: none;
    margin: -.5rem -.5rem 0;
    border: 0;
    border-radius: 0 0 20px 20px;
    border-radius: 0 0 var(--osp-r-lg, 20px) var(--osp-r-lg, 20px);
  }

  #item_details > .modal-content.osp-im .singleItemContent {
    padding: 16px 16px 16px;
  }

  #item_details > .modal-content.osp-im .itemTitle h4 {
    font-size: 20px;
    line-height: 26px;
  }

  #item_details > .modal-content.osp-im .modal-footer {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  #item_details > .modal-content.osp-im .modalIncreateArea span.decrease,
  #item_details > .modal-content.osp-im .modalIncreateArea span.increase {
    width: 40px;
    height: 40px;
  }

  #item_details > .modal-content.osp-im .modalIncreateArea input.qty {
    height: 40px;
  }

  #item_details > .modal-content.osp-im .addToCartbutton .addToCartBtn {
    padding: 0 14px;
    font-size: 15px;
  }
}

@media (max-width: 575.98px) {
  @supports (height: 100dvh) {
    #item_details > .modal-content.osp-im {
      height: 100dvh;
      border-radius: 0;
    }
  }
}

/* ---- eski tarayici -------------------------------------------------- */
/* item.css / responsive.css kp33/V yedekleri (flex gap -> margin, 1,x,0)
   yalniz eski motorda calisir ve buradaki margin'lere eklenirdi. Ayni
   vekil kosul, :not(#kp34ad) ile (2,x,0). */
@supports not (inset: 0) {
  #item_details > .modal-content.osp-im ul.allergenImage > * + *:not(#kp34ad),
  #item_details > .modal-content.osp-im ul.allergenImage li > * + *:not(#kp34ad) {
    margin-left: 0;
  }

  #item_details > .modal-content.osp-im .modalFooterArea > *:not(#kp34ad) {
    margin-bottom: 0;
  }

  #item_details > .modal-content.osp-im .modalFooterArea > .modalIncreateArea:not(#kp34ad) {
    margin-right: 12px;
  }

  #item_details > .modal-content.osp-im .modalFooterArea > .addToCartbutton:not(#kp34ad) {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---- hareket azalt -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #item_details > .modal-content.osp-im > .modal-header .close,
  #item_details > .modal-content.osp-im .itemVariantArea .itemVariants label.variant-btn,
  #item_details > .modal-content.osp-im ul.extraUl .checkboxSection input.extras,
  #item_details > .modal-content.osp-im .modalIncreateArea span.decrease,
  #item_details > .modal-content.osp-im .modalIncreateArea span.increase,
  #item_details > .modal-content.osp-im .addToCartbutton .addToCartBtn {
    -webkit-transition: none;
    transition: none;
  }

  #item_details > .modal-content.osp-im .modalIncreateArea span.decrease:active,
  #item_details > .modal-content.osp-im .modalIncreateArea span.increase:active {
    -webkit-transform: none;
    transform: none;
  }
}