/* ============================================================================
   NeYemeli katmanlı CSS — 2/4: components.css
   İçerik: kart bileşenleri (restcard/food-card), favtabs, Keşfet akışı, şehir
   çipleri, mekan filtre barı, NewsDetail gövdesi, Çarkıyemek sayfası, işletme
   içerik editörleri, alt menü (bottomnav), çark dilimleri, şehir modalı.
   KURAL: base'den sonra, detail'den önce yüklenir. / Layered CSS 2/4: cards,
   feeds, chips, filters, wheel, bottom nav, city modal.
   ============================================================================ */
/* ============================================================
   Restoran liste kartı (RestaurantDetail ile tutarlı) / restaurant list card
   ============================================================ */
.restcard {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); /* dinlenme halinde hafif derinlik / subtle resting depth */
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.restcard:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}
.restcard__media {
  position: relative;
  aspect-ratio: 16 / 9; /* kapak/kart görseli 16:9 (DJI Osmo vb.) — admin yükleme kutusuyla aynı */
  background: #e2e8f0;
  overflow: hidden; /* zoom yapan foto taşmasın / clip the zooming photo */
}
.restcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.restcard:hover .restcard__img { transform: scale(1.05); } /* hover'da yumuşak zoom / soft zoom on hover */
/* İç link: medya + gövdeyi sarar, aksiyon barı dışarıda kalır / inner link wraps media + body, action bar stays outside */
.restcard__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
/* Foto alt yumuşak gölge: alttaki puan pili her zaman okunaklı / soft bottom shade keeps overlay pills legible */
.restcard__media::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.12) 60%, transparent);
  z-index: 1;
  pointer-events: none;
}
/* Foto üstü öğeler gölgenin üstünde / overlay elements above the shade */
.restcard__badge,
.restcard__overlay {
  z-index: 2;
}
/* Foto altı tek şerit: puan + mutfak + fiyat / bottom strip on photo: rating + cuisine + price */
.restcard__overlay {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* Şeritteki üç pil de aynı yükseklikte / all three strip pills share the same height */
.restcard__overlay .restcard__rating,
.restcard__overlay .restcard__pill {
  height: 26px;
  padding-top: 0;
  padding-bottom: 0;
}
/* Popüler / Önerilen rozeti (sol üst) */
.restcard__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* foto üstünde okunaklılık / legibility over photo */
}
.restcard__badge i { font-size: 11px; }
.restcard__badge--pop { background: rgba(225, 29, 72, 0.96); } /* gül kırmızısı — fiyat pilinin turuncusuyla karışmasın / rose red, distinct from the orange price pill */
.restcard__badge--rec { background: rgba(37, 99, 235, 0.96); } /* mavi — yeşil puan piliyle karışmasın / blue, distinct from the green rating pill */
/* Puan pili — detay hero ile aynı yeşil */
.restcard__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #15803d;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* foto üstünde okunaklılık / legibility over photo */
}
.restcard__rating i { font-size: 11px; opacity: 0.95; }
/* Gövde */
.restcard__body {
  padding: 13px 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* Üst satır: ad solda, durum pili sağda / top row: name left, status pill right */
.restcard__toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.restcard__name {
  margin: 0;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  transition: color 0.15s ease;
}
.restcard:hover .restcard__name { color: var(--brand2); } /* hover'da marka turuncusu / brand orange on hover */
/* Mutfak (koyu) + fiyat (turuncu) pilleri — foto üstünde, detay quickbar ile birebir /
   cuisine (dark) + price (orange) pills — on the photo, identical to detail quickbar */
.restcard__pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; line-height: 1;
  font-size: 13px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* foto üstünde okunaklılık / legibility over photo */
}
.restcard__pill--cuisine { background: #0f172a; color: #fff; }
.restcard__pill--cuisine i { font-size: 11px; color: #fff; }
.restcard__pill--price { gap: 1px; background: var(--brand2); }
/* Fiyat ₺ sembolleri diğer pillerle aynı boyutta (görsel tutarlılık) / price glyphs match the other pills' size */
.restcard__pill--price b { color: #fff; font-size: 13px; letter-spacing: 1px; }
.restcard__pill-muted { color: rgba(255, 255, 255, 0.45); font-size: 13px; letter-spacing: 1px; }
/* Durum: yumuşak tonlu pill (açık=yeşil, kapalı=kırmızı) / status: soft tinted pill (open=green, closed=red) */
.restcard__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer; /* tıklanınca çalışma saatleri modalı / opens the weekly-hours modal */
}
.restcard__status--open { background: #f0fdf4; border-color: #bbf7d0; }
.restcard__status--closed { background: #fef2f2; border-color: #fecaca; }
.restcard__statuslabel { font-weight: 800; }
.restcard__status--open .restcard__statuslabel { color: #15803d; }
.restcard__status--closed .restcard__statuslabel { color: #b91c1c; }
/* Aşağı ok: durum rengini izler / chevron follows the status color */
.restcard__statuschev { font-size: 10px; opacity: 0.8; }
.restcard__status--open .restcard__statuschev { color: #15803d; }
.restcard__status--closed .restcard__statuschev { color: #b91c1c; }
/* Resmin sağ-alt köşesinde şehir rozeti / city badge at the image's bottom-right */
.restcard__city {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.restcard__city i { font-size: 11px; opacity: 0.9; }
.restcard__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.restcard__status--open .restcard__dot { background: #16a34a; }
.restcard__status--closed .restcard__dot { background: #dc2626; }
/* Çipler detay sayfasının .rdetail-feature-tag bileşenini kullanır / chips reuse the detail page feature-tag component */
.restcard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
/* Aksiyon barı: food-card ile aynı bileşen, kartta biraz daha kompakt / action bar: same component as food-card, slightly more compact */
.restcard__actions { padding: 9px 14px 11px; }
.restcard__actions .food-card__actions-left span i,
.restcard__actions .food-card__actions-right i { font-size: 16px; }

/* Favorites tabs bar / Favoriler sekmeleri */
.favtabsbar {
  position: sticky;
  top: 92px;
  z-index: 6;
  display: flex;
  gap: 10px;
  padding: 10px 0;
  background: var(--bg);
}

.favtabsbar__btn {
  flex: 1 1 0;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: #fff;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

.favtabsbar__btn.is-active {
  background: #000;
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.65);
}

.discover-slideshow {
  position: relative;
  margin-top: 12px; /* çiplerin altıyla nefes boşluğu / breathing space below the chips */
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/9; /* kapaklar 16:9 yükleniyor / covers are uploaded 16:9 */
  background: #0f172a;
}

/* İçerik yoksa boş koyu kutu kalmasın / no empty dark box when the filter has no items */
.discover-slideshow[hidden] {
  display: none;
}

.discover-slideshow__track {
  position: absolute;
  inset: 0;
}

.discover-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  text-decoration: none; /* artık <a> / now an anchor */
  color: inherit;
}

.discover-slideshow__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.discover-slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.discover-slideshow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
  pointer-events: none;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.discover-slideshow__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 14px 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 2;
}

.discover-slideshow__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}

.discover-slideshow__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.discover-slideshow__title {
  font-weight: 950;
  font-size: clamp(15px, 4vw, 20px);
  line-height: 1.25;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discover-slideshow__desc {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.72);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discover-slideshow__comments {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

/* Hero istatistikleri: beğeni + yorum (sağda) / hero stats: like + comment (right) */
.discover-slideshow__stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}

.discover-slideshow__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.discover-slideshow__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  z-index: 2;
}

.discover-slideshow__dots > * {
  pointer-events: auto;
}

.discover-slideshow__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.discover-slideshow__dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

.news {
  margin-top: 12px;
}

.news__track {
  display: block;
  overflow: visible;
  padding-bottom: 0;
}

.news__item {
  position: relative;
  display: flex;
  gap: 12px;
  width: 100%;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news__item:last-child {
  margin-bottom: 0;
}

/* Tip pilinin yanındaki beğeni/yorum (anchor içinde; onclick preventDefault) /
   like-comment next to the type pill (inside anchor; onclick preventDefault) */
.news__act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.news__act i {
  font-size: 13px;
}

.news__act b {
  font-weight: 700;
  color: var(--text);
}

.news__act:hover {
  color: var(--text);
}

/* Beğenildi durumu (toggleLike .liked ekler) / liked state */
.news__like.liked,
.news__like.liked i {
  color: #e11d48;
}

.news__img {
  position: relative;
  flex: 0 0 130px;
  aspect-ratio: 16/9; /* kapaklar 16:9 yükleniyor — kart da 16:9 / covers are uploaded 16:9 */
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0 10px 10px;
  align-self: flex-start;
}

.news__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news__badge {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.8);
}

.news__badge--food {
  background: #f59e0b;
}

.news__badge--rest {
  background: #10b981;
}

.news__body {
  flex: 1;
  padding: 10px 44px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  align-self: stretch; /* resmin yüksekliğini takip etmesi için */
}

.news__top {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.news__title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news__summary {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  min-width: 0;
  margin-bottom: -1px;
}

.news__date {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.news__comments {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.news__chips {
  display: flex;
  align-items: center;
  gap: 14px; /* pil – beğeni – yorum arası nefes payı / breathing space between pill, like, comment */
  flex-wrap: wrap;
}

.news__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.news__chip--food,
.news__chip.news__badge--food {
  background: #000;
  color: #fff;
}

.news__chip--rest,
.news__chip.news__badge--rest {
  background: #000;
  color: #fff;
}

.news__arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--muted);
  height: auto;
  margin: 0;
}

/* ---- Keşfet feed: başlık, filtre çipleri, tip rozetleri ---- */
/* ---- Discover feed: heading, filter chips, type badges ---- */
.discover__head {
  margin-top: 16px;
  margin-bottom: 14px; /* açıklama ile filtre çipleri arasına boşluk / gap between desc and filter chips */
}

/* Yatay kayan filtre çip barı / horizontally scrollable filter chip bar */
.discover-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  margin-bottom: 4px;
  scrollbar-width: none; /* Firefox */
}
.discover-filters::-webkit-scrollbar {
  display: none; /* WebKit */
}

.discover-filters__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.discover-filters__chip i {
  font-size: 12px;
  color: var(--muted);
}
.discover-filters__chip:hover {
  border-color: var(--brand2);
}
.discover-filters__chip.is-active {
  background: var(--brand2);
  border-color: var(--brand2);
  color: #fff;
}
.discover-filters__chip.is-active i {
  color: #fff;
}

/* Görselin köşesinde "Yeni" rozeti / "Yeni" badge on the image corner */
.news__newbadge {
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  background: #16a34a;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Tip rozeti renk varyantları (taban .news__chip siyah) / type badge color variants */
.news__chip--mekan,
.news__chip--yemek {
  background: #16a34a; /* yeşil / green — haber: mekan & yemek */
  border-color: rgba(255, 255, 255, 0.18);
}
.news__chip--liste {
  background: #2563eb; /* mavi / blue — Ne Yemeli? */
  border-color: rgba(255, 255, 255, 0.18);
}
.news__chip--trend {
  background: #f59e0b; /* amber — Trend */
  border-color: rgba(255, 255, 255, 0.18);
}
.news__chip--kampanya {
  background: #e11d48; /* kırmızı / red — Kampanya */
  border-color: rgba(255, 255, 255, 0.18);
}
.news__chip--hikaye {
  background: #7c3aed; /* mor / purple — Başarı Hikayesi */
  border-color: rgba(255, 255, 255, 0.18);
}
.news__chip--tanitim {
  background: #0891b2; /* teal — Tanıtım (sponsorlu) */
  border-color: rgba(255, 255, 255, 0.18);
}
.news__chip--sektor {
  background: #0f172a; /* koyu / dark — Sektör */
  border-color: rgba(255, 255, 255, 0.18);
}
.news__chip--inceleme {
  background: #4f46e5; /* indigo — İnceleme (editör eleştirisi) */
  border-color: rgba(255, 255, 255, 0.18);
}
.news__chip--rota {
  background: #0d9488; /* teal — Rota (popüler lezzet rotaları) */
  border-color: rgba(255, 255, 255, 0.18);
}

/* Kartın sağ altındaki "Oku/Git" ipucu / "Read/Go" hint at bottom-right of card */
.news__cta-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand2);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Ne Yemeli? hızlı şehir çipleri (yatay kayar) / quick city chips for "Ne Yemeli?" */
/* Satır kabı: SABİT bölüm + KAYAN bölüm / row wrapper: pinned part + scrolling part */
.ney-cities {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 2px;
  margin: 14px 0 2px; /* başlığın altında nefes payı / breathing room below the title */
}
/* "Tüm Şehirler" + "Şehir ara" — kaymaz, solda sabit / pinned on the left, never scrolls */
.ney-cities__fixed {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid var(--line); /* kayan illerden ince ayraç / hairline divider from scrolling cities */
}
/* Popüler iller — yalnızca burası yatay kayar / only this scrolls horizontally */
.ney-cities__scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}
.ney-cities__scroll::-webkit-scrollbar {
  display: none;
}
.ney-cities__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ney-cities__chip i {
  font-size: 12px;
  color: var(--muted);
}
.ney-cities__chip:hover {
  border-color: var(--brand2);
}
.ney-cities__chip.is-active {
  background: var(--brand2);
  border-color: var(--brand2);
  color: #fff;
}
.ney-cities__chip.is-active i {
  color: #fff;
}
/* "Tüm Şehirler": global popülerlik; aktifken turuncu (is-active) / "All Cities": global, orange when active */
.ney-cities__chip--all i {
  color: var(--brand2);
}
.ney-cities__chip--all.is-active i {
  color: #fff;
}
/* "Şehir ara": bir il değil, eylem → kesik çizgi + marka tonu / "Search city": an action, not a city */
.ney-cities__chip--search {
  border-style: dashed;
  color: var(--brand2);
}
.ney-cities__chip--search i {
  color: var(--brand2);
}

/* ---- Mekanlar filtre barı / venue filter bar ---- */
.rest-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.rest-filters__row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rest-filters__toolbar {
  flex-wrap: wrap;
}
.rest-chips {
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.rest-chips::-webkit-scrollbar {
  display: none;
}
.rest-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rest-chip:hover {
  border-color: var(--brand2);
}
.rest-chip.is-active {
  background: var(--brand2);
  border-color: var(--brand2);
  color: #fff;
}
.rest-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rest-toggle i {
  font-size: 12px;
  color: var(--muted);
}
.rest-toggle:hover {
  border-color: var(--brand2);
}
.rest-toggle.is-on {
  background: var(--brand2);
  border-color: var(--brand2);
  color: #fff;
}
.rest-toggle.is-on i {
  color: #fff;
}
.rest-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
}
.rest-sort select {
  border: none;
  background: none;
  font: inherit;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.rest-filters__count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* "Filtrele" butonu (tüm seçenekleri popup'ta açar) / "Filter" button opens the popup */
.rest-filterbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rest-filterbtn:hover {
  border-color: var(--brand2);
}
.rest-filterbtn i {
  font-size: 13px;
  color: var(--muted);
}
/* Aktif filtre varsa marka rengine bürünür / when filters are active, adopt brand color */
.rest-filterbtn.is-active {
  background: var(--brand2);
  border-color: var(--brand2);
  color: #fff;
}
.rest-filterbtn.is-active i {
  color: #fff;
}
.rest-filterbtn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand2);
  font-size: 11px;
  font-weight: 800;
}

/* Section head: filtre ikonu + şehir dropdown yan yana / filter icon + city dropdown side by side */
.section__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Sadece ikon filtre butonu (şehir pill'i ile aynı yükseklik) / icon-only filter button, matches the city pill */
.rest-filterbtn--icon {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  border-color: rgba(148, 163, 184, 0.55);
}
.rest-filterbtn--icon i {
  font-size: 15px;
}
/* İkon her zaman BEYAZ kalır; aktiflik yalnızca kırmızı rozetle belli olur (turuncu dolgu YOK) /
   icon stays white always — active state shown only by the red badge, never an orange fill */
.rest-filterbtn--icon.is-active {
  background: var(--card);
  border-color: rgba(148, 163, 184, 0.55);
  color: var(--text);
}
.rest-filterbtn--icon.is-active i {
  color: var(--muted);
}
/* İkon butonda rozet sağ-üst köşede: tam daire + kırmızı (padding'siz, eşit en-boy) /
   badge at the icon's top-right corner: perfect circle + red (no padding, equal w/h) */
.rest-filterbtn--icon .rest-filterbtn__badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  border: 2px solid var(--bg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;       /* rakam dikeyde tam ortalansın / vertically center the digit */
  font-variant-numeric: tabular-nums;
}

/* Filtre popup'ı: gruplar + alt aksiyon çubuğu / filter popup: groups + footer */
.restfilter__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.restfilter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.restfilter-group__label {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* Popup'ta çipler kaydırmak yerine alt satıra geçsin / wrap chips in the popup instead of scrolling */
.restfilter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
}
.restfilter__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 16px; /* kenara yapışmasın / keep buttons off the modal edges */
  border-top: 1px solid var(--line);
}

/* Sıralama custom dropdown (native select yerine) / sort custom dropdown */
.restsort {
  position: relative;
}
.restsort__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.restsort__btn:hover {
  border-color: var(--brand2);
}
.restsort__btn > i:first-child {
  color: var(--muted);
}
.restsort__current {
  flex: 1;
}
.restsort__chev {
  color: var(--muted);
  font-size: 12px;
  transition: transform 0.18s ease;
}
.restsort.is-open .restsort__chev {
  transform: rotate(180deg);
}
.restsort__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px); /* yukarı açılır (en altta olduğu için) / opens upward (it sits at the bottom) */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.18);
  padding: 6px;
  display: none;
  z-index: 5;
}
.restsort.is-open .restsort__menu {
  display: block;
}
.restsort__opt {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.restsort__opt:hover {
  background: var(--bg);
}
.restsort__opt.is-active {
  background: var(--brand2);
  color: #fff;
}
.restfilter__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.restfilter__apply {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: var(--brand2);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
/* Yakınımdakiler: kart üzerinde mesafe rozeti (mavi) / distance badge in card overlay */
.restcard__dist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.96);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.restcard__dist i {
  font-size: 11px;
}

/* Filtre boş sonuç mesajı / empty filter result message */
.discover-empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 24px 0;
}

/* NewsDetail hedef CTA: sosyal barda en sağa yaslanır / target CTA: right-aligned in the social bar */
.news-detail__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.news-detail__social .news-detail__cta {
  margin-left: auto; /* beğeni/yorumun sağına it / push to the right of like-comment */
}

/* ---- NewsDetail (feed detayı) gövde + sosyal + yorumlar ---- */
/* ---- NewsDetail body + social + comments ---- */
.news-detail__media {
  position: relative;
}
/* Görselin köşesinde tip rozeti / type badge on the image corner */
.news-detail__typebadge {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 12px;
}
.news-detail__meta {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.news-detail__title {
  margin: 8px 0 12px;
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 800;
  line-height: 1.25;
}
/* Giriş/özet paragrafı (vurgulu) / lead paragraph (emphasized) */
.news-detail__lead {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
}
.news-detail__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}
.news-detail__p {
  margin: 0 0 14px;
}
.news-detail__p:last-child {
  margin-bottom: 0;
}

/* Sosyal bar: beğeni + yorum sayısı (uyumlu iki pil) / social bar: like + comment count (matching pills) */
.news-detail__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.news-detail__act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.news-detail__act i {
  font-size: 15px;
}
.news-detail__act:hover {
  border-color: var(--brand2);
  color: var(--brand2);
}
/* Beğenildi durumu (toggleLike .liked ekler) / liked state */
.news-detail__like.liked,
.news-detail__like.liked:hover {
  color: #e11d48;
  border-color: #e11d48;
}
.news-detail__like.liked i {
  color: #e11d48;
}

/* Yorumlar bölümü: kendi kartı (artık boşlukta durmuyor) / comments section: its own card */
.news-detail__commentsec {
  margin-top: 16px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px 16px;
}

.wheelcard {
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: #0b0b0b;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  padding: 12px;
}

.wheelcard__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wheelcard__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  flex: 0 0 auto;
}

.wheelcard__icon i {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
}

.wheelcard.is-spinning .wheelcard__icon i {
  animation: wheelspin 0.7s linear;
}

@keyframes wheelspin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.wheelcard__body {
  min-width: 0;
  flex: 1 1 auto;
}

.wheelcard__title {
  font-weight: 950;
  font-size: 14px;
  line-height: 18px;
}

.wheelcard__hint {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

.wheelcard__result {
  margin-top: 10px;
  font-size: 13px;
  line-height: 20px;
}

.topbar .pill:disabled,
.wheelcard .pill:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wheel {
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: #0b0b0b;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

/* Wheel modal / Çark popup */
.wheelmodal {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.wheelmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.wheelmodal__sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--app-shell-max), 100%);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
}

.wheelmodal__close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.wheelmodal__close i {
  font-size: 18px;
}

/* Wheel open card / Çarkıyemek kartı */
.wheelopen {
  width: 100%;
  border: none;
  text-align: left;
}

.card.wheelopen--black {
  margin-top: 0;
  margin-bottom: 20px;
  background: #000 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: none !important;
  box-shadow: none !important;
}

.wheelopen--black .cardrow {
  padding: 10px 12px;
  align-items: center;
}

.wheelopen__thumb {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheelopen__thumbImg {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
}

.wheelopen--black .thumb {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.wheelopen--black .cardtitle,
.wheelopen--black .carddesc,
.wheelopen--black .chip,
.wheelopen--black .arrow {
  color: rgba(255, 255, 255, 0.92);
}

.wheelopen--black .carddesc {
  color: rgba(255, 255, 255, 0.72);
}

.wheelopen--black .chip {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
}

.chip--badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wheelopen--black .arrow {
  align-self: center;
}

/* Modal inside: remove extra padding/margins */
.wheel--modal {
  margin-top: 0;
  border-radius: 18px;
  padding: 10px;
}

/* Çarkıyemek artık ayrı sayfa (modal değil) / wheel as a standalone page */
.wheel--page {
  margin-top: 0;
  border-radius: 18px;
  padding: 12px;
}
.wheelpage {
  display: block;
  margin-top: 18px; /* başlık/açıklama ile siyah kart arasına nefes payı / breathing room above the black card */
}
/* Yan bilgi kartları (Nasıl çalışır + Askıda Ne Yemeli?) / side info cards */
.wheelpage__aside {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.wheelpage__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.wheelpage__card-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wheelpage__card-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.wheelpage__card--soon {
  border-style: dashed;
  opacity: 0.85;
}
/* Geniş ekranda çark + yan bilgi yan yana / wheel + aside side by side on wide screens */
@media (min-width: 900px) {
  .wheelpage {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
    align-items: start;
  }
  .wheelpage__aside {
    margin-top: 0;
  }
}

/* ---- Drawer: auth durumlu hesap bloğu / drawer account block ---- */
.drawer__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.drawer__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.drawer__profile-info {
  min-width: 0;
}
.drawer__profile-name {
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer__profile-mail {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer__acctnav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.drawer__link--logout i,
.drawer__link--logout span {
  color: #dc2626;
}

.wheel--modal .wheel__wrap {
  margin: 0;
}

.wheel--modal .wheel__disk {
  --wheel-pad: 10px;
  border-width: 0;
}

.wheel__wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 12px auto 0;
  aspect-ratio: 1;
}

.wheel__disk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  --wheel-pad: 10px;
  --wheel-grad: transparent;
  overflow: hidden;
  transform: rotate(0deg);
  transition: none;
  will-change: transform;
}

.wheel__disk::before {
  content: '';
  position: absolute;
  inset: var(--wheel-pad, 10px);
  border-radius: 50%;
  background: var(--wheel-grad, transparent);
  pointer-events: none;
  z-index: 0;
}

.wheel__disk.is-spinning {
  transition: transform 4s cubic-bezier(0.12, 0.86, 0.12, 1);
}

.wheel__segments {
  position: absolute;
  inset: var(--wheel-pad, 10px);
  pointer-events: none;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}

.wheel__labels {
  position: absolute;
  inset: var(--wheel-pad, 10px);
  width: calc(100% - 2 * var(--wheel-pad, 10px));
  height: calc(100% - 2 * var(--wheel-pad, 10px));
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.wheel__lbl {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(50% - 6px);
  height: 1.35em;
  margin-top: -0.675em;
  line-height: 1.35em;
  transform-origin: left center;
  text-align: right;
  padding-right: 6px;
  box-sizing: border-box;
  font-weight: 700;
  font-size: 16px;
  font-family: Inter, system-ui, sans-serif;
  color: #fff;   /* dilim rengine göre JS satır içi ezer / JS overrides per slice */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
}

.wheel__lblTxt {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.wheel__lblTxt--flip {
  transform: rotate(180deg);
}

/* İşletme paneli içerik editörleri (galeri/slayt/menü/imza lezzet/kampanya) /
   business-panel content editors */
.bizrow {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: #fff;
}
.bizrow + .bizrow,
.bizcard + .bizcard {
  margin-top: 8px;
}
.bizrow__fields {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bizrow__ops {
  display: flex;
  gap: 4px;
  align-items: center;
}
.bizrow__ops button {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: #475569;
}
.bizrow__ops button:hover {
  background: #eef2f7;
}
.bizrow__ops .bizrow__del {
  color: #b91c1c;
}
.bizin {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}
.bizpick {
  width: 112px;
  height: 63px;
  border: 2px dashed #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #f8fafc;
  flex-shrink: 0;
}
.bizpick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bizpick__hint {
  color: #94a3b8;
  font-size: 16px;
}
.bizcard {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #fbfcfe;
}
.bizcard__head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.bizeditor__addbtn {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #334155;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.bizeditor__addbtn:hover {
  background: #eef2f7;
}
.biztoggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
}
/* İşletme paneli yan menü durum ikonu: aktif (turuncu) satırda beyaz / sidebar status icon,
   white on the active orange row */
.bizpanel__st {
  margin-left: auto;
}
.bizpanel__st--ok {
  color: #16a34a;
}
.bizpanel__st--warn {
  color: #dc2626;
}
.bizpanel__link.is-active .bizpanel__st {
  color: #fff;
}

/* NeYemeli (admin) içeriği: kilitli — silinemez/değiştirilemez / admin-added, locked row */
.bizlock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.bizrow--locked {
  background: #f8fafc;
}
.bizrow--locked .bizin {
  background: #f1f5f9;
  color: #64748b;
}

.wheel__pointer {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid rgba(255, 255, 255, 0.96);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
  z-index: 3;
}

.wheel__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Göbek biraz küçük: etiketlere daha çok yarıçap kalsın (adlar kesilmesin) /
     slightly smaller hub leaves more radial room for the labels */
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.92);
  border: 8px solid rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.wheel__centerIcon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* Mobilde göbek küçülür → etiketlere daha fazla yarıçap kalır (uzun adlar tek satıra sığar) /
   smaller hub on phones leaves more radial room so long labels fit on one line */
@media (max-width: 480px) {
  .wheel__center {
    width: 72px;
    height: 72px;
    border-width: 6px;
  }
  .wheel__centerIcon {
    width: 44px;
    height: 44px;
  }
}

.wheel__meta {
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.wheel__ribbon {
  text-align: center;
  padding: 8px 0 2px;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.95);
}

.wheel__subtitle {
  text-align: center;
  padding: 10px 0 8px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.wheel__hint {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.wheel__spinBtn {
  width: 100%;
  max-width: 240px;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
  gap: 8px;
}

.wheel__spinBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wheel__result {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.wheel__result strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 950;
}

.wheel__resultLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 240px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  color: #0b0b0b;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
}

/* Ne Yemeli: mobil — çark tam genişlik; tablet/desktop — çark + meta yan yana, çark sınırlı boyutta */
@media (min-width: 768px) {
  #foodWheel.wheel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 16px 24px;
  }

  /* Çark ortada ve daha büyük / wheel centered and larger */
  #foodWheel .wheel__wrap {
    width: min(420px, 82%);
    max-width: 420px;
    margin: 14px auto 0;
  }

  /* Çevir butonu + sonuç çarkın ALTINDA ortalı / spin button & result centered below the wheel */
  #foodWheel .wheel__meta {
    width: 100%;
    max-width: 420px;
    padding: 16px 0 0;
    margin-top: 0;
  }

  #foodWheel .wheel__result {
    margin-top: 12px;
  }
}

/* FOOD & RESTAURANT VERTICAL CARD */
.food-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.food-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #111;
  overflow: hidden;
}

.food-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.food-card:hover .food-card__img {
  transform: scale(1.05);
}

.food-card__fav-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s, color 0.2s;
}
.food-card__fav-btn:hover {
  color: #ef4444;
  transform: scale(1.1);
}

.food-card__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  background: #f59e0b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  border: 2px solid rgba(255,255,255,0.8);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.food-card__badge--rest {
  background: #10b981;
}

.food-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.food-card__title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  color: var(--text);
}

.food-card__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.food-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.food-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.food-card__tag i {
  color: var(--brand);
}

/* FOOD CARD OVERLAY (Ne Yemeli? kartlari) */
.food-card--overlay .food-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,0.35) 75%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}

.food-card--overlay .food-card__overlay .food-card__title {
  font-size: clamp(16px, 4.2vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  color: rgba(255,255,255,0.98);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.food-card--overlay .food-card__overlay .food-card__desc {
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.food-card--overlay .food-card__fav-btn {
  display: none;
}

.food-card--overlay {
  border-radius: var(--radius);
  overflow: hidden;
}

.food-card--overlay .food-card__img-wrap {
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
}

.food-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.food-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 12px;
  background: var(--card);
  border-top: 1px solid var(--line);
}

.food-card__actions-left {
  display: flex;
  gap: 16px;
}

.food-card__actions-left span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.food-card__actions-left span i {
  font-size: 18px;
}

.food-card__actions-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.food-card__actions-right i {
  font-size: 18px;
  color: var(--text);
  transition: color 0.2s, transform 0.2s;
}

.food-card__like i {
  color: var(--text);
  transition: color 0.2s, transform 0.2s;
}

.food-card__like.liked i {
  color: #c0392b;
  transform: scale(1.1);
}

.food-card__actions-right.bookmarked i {
  color: var(--text);
  transform: scale(1.1);
}

.food-card__actions-left b,
.food-card__actions-right b {
  font-weight: 700;
}

/* Original card legacy (used in restaurant list for now until migrated) */
.card {
  overflow: hidden;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}

.cardrow {
  display: flex;
  gap: 12px;
  padding: 14px;
}

.thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 18px;
  background: #e2e8f0;
  overflow: hidden;
  flex: 0 0 auto;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb__badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  border: 2px solid #fff;
}

.thumb__badge--food {
  background: #f59e0b;
}

.thumb__badge--rest {
  background: #10b981;
}

.cardbody {
  min-width: 0;
  flex: 1 1 auto;
}

.cardtitle {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

.carddesc {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.85);
}

.chip i {
  color: var(--brand2);
}

.arrow {
  margin-left: auto;
  color: rgba(148, 163, 184, 0.9);
  align-self: center;
}

/* Bottom nav / Alt menü — tam ekran genişliği (üst çubukla aynı) */
.bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  width: 100%;
  display: flex;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  /* Opak: çıkıntı (bump) ile birebir aynı renk olsun / opaque so the bump matches exactly */
  background: #0a0a0a;
  backdrop-filter: blur(12px);
  box-sizing: border-box;
}

.bottomnav__item {
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 0 4px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  /* Seçili olmayan sekmeler soluk kalsın ki aktif olan öne çıksın /
     dim the inactive tabs so the active one stands out */
  color: rgba(255, 255, 255, 0.55);
  transition: color .15s ease;
}

.bottomnav__item i {
  font-size: 30px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bottomnav__item > span:not(.bottomnav__wheelbadge) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 12px;
}

.bottomnav__item-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  opacity: 0.72;
}

.bottomnav__wheelbadge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 1;
  filter: saturate(1.22) brightness(1.12);
}

.bottomnav__wheelbadge-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

.bottomnav__item--active .bottomnav__item-img {
  opacity: 1;
}

.bottomnav__item--active .bottomnav__wheelbadge {
  filter: saturate(1.28) brightness(1.18);
}

/* Orta "Ne Yemeli?" — bar ile aynı renkte (siyah) çıkıntı + büyük çark ikonu */
/* Center item: black bump (same color as the bar) + enlarged wheel icon */
.bottomnav__item--center {
  position: relative;
}

/* Siyah çıkıntı — bar ile BİREBİR aynı opak renk / bump exactly matches the bar */
.bottomnav__item--center::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -32px; /* +2px daha büyük (merkez sabit) / 2px larger, center unchanged */
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0a0a0a; /* .bottomnav ile aynı / same as the bar */
  z-index: 0;
}

/* Çark: 12 renkli dilim + boş koyu merkez / wheel: 12 colorful slices + dark empty hub */
.bottomnav__item--center .bottomnav__wheelbadge {
  position: relative;
  z-index: 1; /* çıkıntının üstünde / above the bump */
  width: 55px; /* önceki ikon boyutuna yakın / close to the previous icon size */
  height: 55px;
  margin-top: -23px; /* etiketi diğerleriyle hizala / align label with siblings */
  margin-bottom: 1px;
  transform: translateY(-2px); /* çarkı çıkıntıya tam ortala (etiketi bozmadan) / center in bump */
  border: none;
  box-shadow: none;
  border-radius: 50%;
  /* Aynı renk düzeni; yeşil (#16a34a) tepeye ortalı (from -15deg) / same palette, green centered under the pointer */
  background: conic-gradient(
    from -15deg,
    #16a34a 0deg 30deg,
    #ef4444 30deg 60deg,
    #0ea5e9 60deg 90deg,
    #f59e0b 90deg 120deg,
    #db2777 120deg 150deg,
    #84cc16 150deg 180deg,
    #6366f1 180deg 210deg,
    #14b8a6 210deg 240deg,
    #eab308 240deg 270deg,
    #2563eb 270deg 300deg,
    #f97316 300deg 330deg,
    #7c3aed 330deg 360deg
  );
}

/* Boş koyu merkez (gerçek çark gibi) / dark empty hub */
.bottomnav__item--center .bottomnav__wheelbadge::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0a0a0a;
}

/* "Ne Yemeli?" yazısının hemen üstünde normal (yukarı) üçgen — yazıya değmez */
/* Up-pointing triangle just above the label (item'a bağlı, kırpılmaz) */
.bottomnav__item--center::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 18px; /* etiketin hemen üstü / just above the label */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid rgba(255, 255, 255, 0.72); /* etiketle aynı: seçili değilken gri / gray like inactive label */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  z-index: 2;
}

/* Seçiliyken üçgen de beyaz (etiketle aynı) / active → white like the label */
.bottomnav__item--center.bottomnav__item--active::after {
  border-bottom-color: rgba(255, 255, 255, 0.96);
}

/* "Ne Yemeli?" etiketi çıkıntının üstünde kalsın (kesilmesin) / label above the bump */
.bottomnav__item--center > span:not(.bottomnav__wheelbadge) {
  position: relative;
  z-index: 1;
}

/* Seçili sekme: pasifler soluk gri, aktif tam beyaz (ek gösterge/çizgi yok) /
   active tab is simply pure white against the dimmed inactive ones */
.bottomnav__item--active {
  color: #fff;
}

.bottomnav__item--active i,
.bottomnav__item--active > span:not(.bottomnav__wheelbadge) {
  color: #fff;
}

/* Modal / Şehir seçimi */
.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}

.modal.is-open {
  display: block;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.modal__sheet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(var(--app-shell-max), 100%);
  border-radius: 26px 26px 0 0;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.modal__title {
  font-weight: 900;
  font-size: 14px;
}

.modal__hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.modal__body {
  padding: 14px 16px 18px;
}

/* Liste içi detay (popup değil) / Inline detail in main feed */
.app--detail-open .bottomnav {
  display: none;
}

.app--detail-open .content--index {
  padding-bottom: 20px;
}

.content--index.is-showing-detail > .section {
  display: none !important;
}

.inline-detail[hidden] {
  display: none !important;
}

.content--index.is-showing-detail .inline-detail:not([hidden]) {
  display: block;
}

.inline-detail__body .card--detail {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.detail-hero {
  margin-top: 0;
}

.detail-hero__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  container-type: inline-size;
  container-name: herorow;
}

.detail-hero__main {
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 146px;
  box-sizing: border-box;
}

.detail-hero__titleline {
  display: block;
  width: 100%;
}

.detail-hero__title-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
}

.detail-hero__cuisine-wrap {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}

.detail-hero__rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: #15803d;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.detail-hero__rating-pill .fa-star {
  font-size: 13px;
  opacity: 0.95;
}

.detail-hero__titlemeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.detail-hero__h1 {
  margin: 0;
  flex: 1 1 200px;
  min-width: 0;
  line-height: 1.2;
}

/* Dar ekran: önce başlık tam satır, altında yıldız + mutfak rozeti */
@media (max-width: 640px) {
  .detail-hero__title-head {
    align-items: center;
  }

  .detail-hero__title-head .detail-hero__h1 {
    flex: 1 0 100%;
    order: 1;
  }

  .detail-hero__title-head .detail-hero__rating-pill {
    order: 2;
  }

  .detail-hero__title-head .detail-hero__cuisine-wrap {
    order: 3;
    margin-left: 0;
    align-self: center;
  }
}

.detail-hero--no-dircard .detail-hero__main {
  padding-right: 0;
}

.detail-hero__rating-compact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 850;
  color: rgba(15, 23, 42, 0.92);
  flex: 0 0 auto;
}

.detail-hero__rating-compact .fa-star {
  color: var(--brand2);
  font-size: 13px;
}

.detail-hero__cuisine-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  border: none;
  box-sizing: border-box;
}

.detail-hero__cuisine-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 0;
}

.detail-hero__cuisine-img {
  height: 1em;
  width: auto;
  max-width: 1.25em;
  display: block;
  object-fit: contain;
}

.detail-hero__cuisine-label {
  display: inline-block;
  line-height: 1;
  padding-top: 2px;
}

.detail-hero__addr-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 12px;
  margin-top: 14px;
  padding-top: 2px;
}

/* Adres bittiği yerde biter; iletişim hemen 10px sağında (konteyneri sağa yaslamaz) */
.detail-hero__addr-with-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.detail-hero__addr {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.detail-hero__reach-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-left: 0;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
}

.detail-hero__dircard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 14px;
  background: #000;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 130px;
  min-height: 0;
  box-sizing: border-box;
  z-index: 1;
}

.detail-hero__dircard:hover {
  background: #141414;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.detail-hero__dircard-icon {
  font-size: 38px;
  line-height: 1;
  color: #fff;
}

.detail-hero__dircard-label {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
}

/* Dar alan: adres satırında, Türkiye metninden 10px sonra; tam genişlik yok */
@container herorow (max-width: 640px) {
  .detail-hero__main {
    padding-right: 0;
    flex: 1 1 100%;
  }

  .detail-hero__addr {
    flex: 0 1 auto;
    max-width: 100%;
  }

  .detail-hero__dircard {
    position: static;
    z-index: auto;
    width: auto;
    max-width: max-content;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 10px;
    border-radius: 999px;
    box-shadow: none;
    min-height: 0;
  }

  .detail-hero__dircard-icon {
    font-size: 15px;
  }

  .detail-hero__dircard-label {
    display: none;
  }

  .detail-hero__title-head {
    align-items: center;
  }

  .detail-hero__title-head .detail-hero__h1 {
    flex: 1 0 100%;
    order: 1;
  }

  .detail-hero__title-head .detail-hero__rating-pill {
    order: 2;
  }

  .detail-hero__title-head .detail-hero__cuisine-wrap {
    order: 3;
    margin-left: 0;
    align-self: center;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .detail-hero__main {
      padding-right: 0;
    }

    .detail-hero__addr {
      flex: 0 1 auto;
      max-width: 100%;
    }

    .detail-hero__dircard {
      position: static;
      z-index: auto;
      width: auto;
      max-width: max-content;
      flex: 0 0 auto;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 8px 10px;
      border-radius: 999px;
      box-shadow: none;
      min-height: 0;
    }

    .detail-hero__dircard-icon {
      font-size: 15px;
    }

    .detail-hero__dircard-label {
      display: none;
    }

    .detail-hero__title-head {
      align-items: center;
    }

    .detail-hero__title-head .detail-hero__h1 {
      flex: 1 0 100%;
      order: 1;
    }

    .detail-hero__title-head .detail-hero__rating-pill {
      order: 2;
    }

    .detail-hero__title-head .detail-hero__cuisine-wrap {
      order: 3;
      margin-left: 0;
      align-self: center;
    }
  }
}

.detail-hero__addr-icon {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--brand2);
  font-size: 15px;
}

.detail-hero__addr-text {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15, 23, 42, 0.88);
}

.detail-contact__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.detail-contact__pill i {
  flex: 0 0 auto;
  color: var(--brand2);
  font-size: 13px;
}

.detail-contact__pill span {
  overflow: hidden;
  word-break: break-word;
  line-height: 1.25;
}

.pad--detail-below-hero {
  padding-top: 2px;
}

/* Kartlar hero ile aynı hizada dursun: çift gutter'ı kaldır (sayfa zaten 16px veriyor) /
   Align cards with hero: drop the duplicate side padding (page already adds 16px) */
.rdetail-panels.pad--detail-below-hero {
  padding-left: 0;
  padding-right: 0;
}

.pad--herohead {
  padding-top: 16px;
  padding-bottom: 10px;
}

/* Restoran hero başlığı slayt gösterisiyle aynı hizada (yan boşluk yok) */
/* Restaurant hero head flush with the slideshow (no side padding) */
.app--restaurant-page .pad--herohead {
  padding-left: 0;
  padding-right: 0;
}

.pad--herohead .h1 {
  margin: 0;
}

.pad--herohead .p {
  margin: 10px 0 0;
}

.citygrid {
  margin-top: 12px;
  display: grid;
  /* Şehir isimleri 3 kolon; dar ekranda otomatik azalır / three columns, fewer on narrow screens */
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: 56vh;
  overflow: auto;
  padding-bottom: 2px;
}

@media (max-width: 720px) {
  .citygrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .citygrid { grid-template-columns: 1fr; }
}

/* Arama sonucu boşsa / empty search result */
.citygrid__empty {
  margin: 18px 0 4px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.citybtn {
  text-align: left;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px 12px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}