@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100vh; overflow: hidden; overscroll-behavior: none; font-family: 'Roboto', sans-serif; background: #f1f3f4; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.2s; }
::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* ── NAVBAR ── */
.navbar {
    height: 44px;
    background: white;
    border-bottom: 1px solid #dadce0;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.navbar-logo {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    color: #202124;
}
.navbar-logo span.g { color: #4285f4; }
.navbar-logo span.r { color: #ea4335; }
.navbar-logo span.u { color: #fbbc04; }
.navbar-logo span.b { color: #4285f4; }
.navbar-logo span.dot { color: #34a853; }

.navbar-ai-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: 0 2px 10px rgba(102,126,234,0.4);
    letter-spacing: 0.1px;
    position: relative;
    overflow: hidden;
}
.navbar-ai-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -80%;
    width: 30%;
    height: 200%;
    background: rgba(255,255,255,0.22);
    transform: rotate(25deg);
    animation: aiNavShimmer 4s 1s infinite;
}
@keyframes aiNavShimmer {
    0%   { left: -80%; }
    25%  { left: 130%; }
    100% { left: 130%; }
}
.navbar-ai-btn:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4292 100%);
    box-shadow: 0 4px 16px rgba(102,126,234,0.5);
    transform: translateY(-1px);
}
.navbar-ai-btn:active { transform: translateY(0); }
.navbar-ai-star { font-size: 13px; }
.navbar-ai-beta {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.22);
    border-radius: 5px;
    padding: 1px 5px;
    text-transform: uppercase;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.location-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #dadce0;
    border-radius: 24px;
    background: white;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #3c4043;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.location-btn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.location-btn .pin { color: #ea4335; font-size: 14px; }

/* ── PAGE LAYOUT ── */
.page-body {
    display: flex;
    height: calc(100vh - 44px);

    margin-top: 44px;
    overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
    width: 280px;
    flex-shrink: 0;
    background: white;
    border-right: 1px solid #dadce0;
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sidebar-inner {
    flex: 1;
    overflow-y: auto;
    padding-top: 8px;
    padding-bottom: 16px;
}
.sidebar-run {
    padding: 14px 16px;
    border-top: 1px solid #dadce0;
    background: white;
    flex-shrink: 0;
}
.run-btn {
    width: 100%;
    height: 40px;
    background: #1a73e8;
    border: none;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    letter-spacing: 0.25px;
    transition: background 0.2s, box-shadow 0.2s;
}
.run-btn:hover { background: #1557b0; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* ── ACCORDION ── */
.acc-section { border-bottom: 1px solid #f1f3f4; }
.acc-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #202124;
    text-align: left;
    transition: background 0.15s;
    min-width: 0;
    gap: 6px;
}
/* Başlık metni taşmasın */
.acc-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acc-chevron { flex-shrink: 0; }
.acc-trigger:hover { background: #f8f9fa; }
.acc-trigger.open { color: #1a73e8; }
.acc-chevron {
    font-size: 10px;
    color: #9aa0a6;
    transition: transform 0.2s;
}
.acc-trigger.open .acc-chevron { transform: rotate(180deg); color: #1a73e8; }
.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, padding 0.28s ease;
    padding: 0 16px;
}
.acc-body.open {
    max-height: 600px;
    padding: 4px 16px 16px;
}

/* ── FORM ELEMENTS ── */
.section-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9aa0a6;
    margin-bottom: 10px;
}
.budget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.currency-select {
    appearance: none;
    background: #f8f9fa;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 5px 24px 5px 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #3c4043;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa0a6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}
.budget-tabs {
    display: flex;
    border: 1px solid #dadce0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}
.budget-tab {
    flex: 1;
    padding: 7px 0;
    border: none;
    background: white;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #1b618f;
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid #dadce0;
}
.budget-tab:last-child { border-right: none; }
.budget-tab:hover { background: #f8f9fa; }
.budget-tab.active { background: #e8f0fe; color: #1a73e8; }

.budget-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 8px 12px;
    gap: 6px;
    background: white;
    transition: border-color 0.2s;
 
}
.budget-input-wrap:focus-within { border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,0.1); }
.budget-symbol { font-size: 14px; font-weight: 500; color: #1a73e8; }
.budget-input {
    border: none; background: transparent; outline: none;
    font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
    color: #202124; width: 100%;
}
.budget-range-wrap { display: flex; gap: 8px; align-items: center; }
.budget-range-wrap .budget-input-wrap { flex: 1; }
.range-sep { font-size: 13px; color: #9aa0a6; }
.budget-any-wrap {
    display: flex; align-items: center; gap: 8px;
    background: #e8f0fe; border-radius: 4px; padding: 10px 12px;
    color: #1a73e8; font-size: 13px; font-weight: 500;
}

.mode-tabs {
    display: flex;
    border: 1px solid #dadce0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}
.mode-tab {
    flex: 1; padding: 7px 4px; border: none; background: white;
    font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 500;
    color: #5f6368; cursor: pointer; transition: all 0.15s;
    border-right: 1px solid #dadce0; display: flex; align-items: center; justify-content: center; gap: 4px;
}
.mode-tab:last-child { border-right: none; }
.mode-tab:hover { background: #f8f9fa; }
.mode-tab.active { background: #e8f0fe; color: #1a73e8; }

.concept-badge { display: none; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.concept-badge.visible { display: flex; }
.concept-badge-item {
    border: 1px solid #1a73e8; color: #1a73e8; border-radius: 12px;
    padding: 2px 8px; font-size: 11px; font-weight: 500; background: #e8f0fe;
}
.divider { border: none; border-top: 1px solid #f1f3f4; margin: 8px 0; }

/* ── MODAL ── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: white; border-radius: 8px; width: 100%; max-width: 600px; height: 520px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; }
.modal-header { padding: 18px 20px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e8eaed; flex-shrink: 0; }
.modal-header-title { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; color: #202124; }
.modal-close { background: none; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px; color: #5f6368; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: #f1f3f4; }
.modal-body { display: flex; flex: 1; overflow: hidden; }
.concept-sidebar { width: 160px; flex-shrink: 0; border-right: 1px solid #e8eaed; padding: 8px; overflow-y: auto; background: #f8f9fa; }
.cat-tab { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 4px; border: none; background: transparent; cursor: pointer; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 400; color: #3c4043; transition: all 0.15s; width: 100%; text-align: left; }
.cat-tab:hover { background: #e8eaed; }
.cat-tab.active { background: #e8f0fe; color: #1a73e8; font-weight: 500; }
.cat-icon { font-size: 15px; flex-shrink: 0; }
.cat-icon i, .pane-title i { vertical-align: -1px; line-height: 1; }
.pane-title i { color: #5f6368; margin-right: 2px; }
.cat-count { margin-left: auto; background: #1a73e8; color: white; border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 600; display: none; }
.cat-count.visible { display: block; }
/* Concept modal — TOPLAM sayaç pill'i (başlık sağında) */
.modal-title-row { display: inline-flex; align-items: center; gap: 10px; }
.concept-total {
  display: inline-flex; align-items: center; gap: 4px;
  background: #e8f0fe; color: #1a73e8;
  border-radius: 20px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; line-height: 1;
  transition: background .15s, color .15s;
}
.concept-total i { font-size: 13px; }
.concept-total.is-full { background: #fce8e6; color: #d93025; }  /* limit dolunca kırmızı */
.concept-content { flex: 1; padding: 16px; overflow-y: auto; }
.concept-pane { display: none; }
.concept-pane.active { display: block; }
.pane-title { font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 500; color: #202124; margin-bottom: 4px; }
.pane-desc { font-size: 12px; color: #5f6368; margin-bottom: 14px; line-height: 1.5; }
.concept-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 14px; border: 1px solid #dadce0; border-radius: 16px; font-family: 'Roboto', sans-serif; font-size: 13px; color: #3c4043; cursor: pointer; transition: all 0.15s; background: white; }
.chip:hover { border-color: #1a73e8; color: #1a73e8; background: #e8f0fe; }
.chip.selected { border-color: #1a73e8; color: #1a73e8; background: #e8f0fe; font-weight: 500; }
/* Limit dolunca seçilmemiş chip'ler pasif görünür */
.chip.chip-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
/* Limit uyarısı: pill'i kısa süre sallar */
.concept-total.shake { animation: conceptShake .4s ease; }
@keyframes conceptShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
/* Dokunmatik cihazlarda yapışkan :hover seçili görünümünü taklit etmesin */
@media (hover: none) {
  .chip:hover { border-color: #dadce0; color: #3c4043; background: white; }
  .chip.selected:hover { border-color: #1a73e8; color: #1a73e8; background: #e8f0fe; }
}
.modal-footer { padding: 12px 16px; border-top: 1px solid #e8eaed; display: flex; gap: 8px; flex-shrink: 0; }
.btn-secondary { flex: 1; padding: 9px; border: 1.5px solid #dadce0; border-radius: 20px; background: white; box-shadow: 0 2px 6px rgba(0,0,0,0.1); font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500; color: #3c4043; cursor: pointer; transition: all 0.15s; }
.btn-secondary:hover { border-color: #3c4043; color: #202124; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.btn-secondary:active { transform: scale(0.96); box-shadow: 0 1px 2px rgba(0,0,0,0.12); background: #f1f3f4; }
.btn-primary { flex: 2; padding: 9px; border: 1.5px solid #dadce0; border-radius: 20px; background: white; box-shadow: 0 2px 6px rgba(0,0,0,0.1); font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500; color: #3c4043; cursor: pointer; transition: all 0.15s; }
.btn-primary:hover { border-color: #3c4043; color: #202124; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.btn-primary:active { transform: scale(0.96); box-shadow: 0 1px 2px rgba(0,0,0,0.12); background: #f1f3f4; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ── MAP + COMBO ── */
.content-area { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.map-combo { flex: 1; display: flex; overflow: hidden; }
.map-col { flex: 1; position: relative; min-width: 0; }
#sideMap { width: 100%; height: 100%; }
.combo-col { width: 360px; flex-shrink: 0; overflow-y: auto; background: #f1f3f4; border-left: 1px solid #dadce0; position: relative; }
.combo-inner { padding: 16px; }

/* ── COMBO (Nunito) ── */
.app { font-family: 'Nunito', sans-serif; padding: 20px 16px; }
.app-title { font-size: 14px; font-weight: 700; color: #3c4043; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.tabs-nav { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { padding: 6px 14px; border: 1.5px solid #dadce0; border-radius: 20px; background: white; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500; color: #3c4043; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.15); flex-shrink: 0; white-space: nowrap; }
.tab-btn:hover { border-color: #1a73e8; color: #1a73e8; }
.tab-btn.active { background: #E8F0FE; color: #1967D2; border: 1px solid #AECBFA; box-shadow: 0 2px 4px rgba(26,115,232,0.3); }

/* Bos segment pill'i: soluk ama OPAK (arka plan tam beyaz, harita gorunmez). */
.tab-btn--empty {
  color: #c4c8cc;
  border-color: #eef0f1;
  background: #fff;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tab-btn--empty:hover { border-color: #eef0f1; color: #c4c8cc; }
.tab-btn--empty .tab-emoji { filter: grayscale(1) opacity(0.45); }

/* Ipucu balonu: TEK, body'ye eklenir, position:fixed -> hicbir overflow
   kirpamaz; ekran kenarina clamp'lenir. Beyaz, site diliyle uyumlu. */
#emptyTabTip {
  position: fixed;
  max-width: 230px;
  background: #fff; color: #3c4043;
  font-family: 'Roboto', sans-serif;
  font-size: 11.5px; font-weight: 400; line-height: 1.45;
  text-align: left;
  padding: 8px 11px; border-radius: 8px;
  border: 1px solid #e8eaed;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16);
  z-index: 9999; pointer-events: none;
  opacity: 0; transition: opacity .13s ease;
}
#emptyTabTip.show { opacity: 1; }

.tab-content { display: none; }
.tab-content.active { display: block; }
.oneri-carousel-wrap { display: flex; align-items: center; gap: 0; }
.oneri-nav { display: none; }
/* Floating FAB navigation */
/* Floating FAB navigation — fixed to viewport */
.combo-fab-wrap {
  position: fixed;
  right: 40px;
  top: 72px;
  display: flex;
  gap: 10px;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.has-results .combo-fab-wrap {
  opacity: 1;
  pointer-events: auto;
}

.combo-fab {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid #aecbfa;
  font-size: 18px;
  font-weight: 700;
  color: #5f6368;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 2px 10px rgba(26,115,232,0.25);
}

.combo-fab:hover {
  background: #1a73e8;
  color: white;
  border-color: #1a73e8;
  box-shadow: 0 4px 12px rgba(26,115,232,0.35);
}
.oneri-carousel { flex: 1; min-width: 0; overflow: hidden; }
/* ── Büyük karousel: slide transition ── */
.oneri-carousel {
  position: relative;
  overflow: hidden;
  /* Geçiş sırasında gri arka plan — slaytlar arasında "yolda" hissi */
  background: #e8eaed;
  border-radius: 8px;
}
.oneri-slide {
  display: block;
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1), opacity 0.55s ease;
  will-change: transform, opacity;
  visibility: hidden;
}
.oneri-slide.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}
.oneri-slide.slide-enter-right {
  transform: translateX(105%);
  opacity: 0;
  visibility: visible;
}
.oneri-slide.slide-enter-left {
  transform: translateX(-105%);
  opacity: 0;
  visibility: visible;
}
.oneri-slide.slide-exit-left {
  position: absolute;
  opacity: 0;
  transform: translateX(-105%);
  pointer-events: none;
  visibility: visible;
}
.oneri-slide.slide-exit-right {
  position: absolute;
  opacity: 0;
  transform: translateX(105%);
  pointer-events: none;
  visibility: visible;
}
.oneri-dots-wrap { display: flex; justify-content: space-between; align-items: center; gap: 0; margin-top: 8px; padding: 0 2px; }
.oneri-dot { width: 8px; height: 8px; border-radius: 50%; background: #dadce0; cursor: pointer; transition: background 0.2s; }
.oneri-dot.active { background: #1a73e8; }


.combo-wrapper {
  background: #f2f5f8;
  border-radius: 8px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
  overflow: hidden;
}
.combo-wrapper .combo-header {
  padding: 16px 16px 0;
  flex-shrink: 0;
}
.firms-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  -webkit-overflow-scrolling: touch;
}
.firms-scroll::-webkit-scrollbar { width: 2px; }
.firms-scroll::-webkit-scrollbar-track { background: transparent; }
.firms-scroll::-webkit-scrollbar-thumb { background: #9aa0a6; border-radius: 2px; }
.combo-inner::-webkit-scrollbar { width: 2px; }
.combo-inner::-webkit-scrollbar-track { background: transparent; }
.combo-inner::-webkit-scrollbar-thumb { background: #9aa0a6; border-radius: 2px; }
.combo-footer {
  flex-shrink: 0;
  padding: 0 16px 8px;
  background: #f2f5f8;
  border-top: 1px solid #e8eaed;
}
/*.combo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } */
/*.combo-label { font-size: 14px; font-weight: 800; color: #202124; font-family: 'Nunito', sans-serif; }*/

.combo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f3f4; /* Çizgiyi 2px yapıp rengini açtık, daha yumuşak bir zemin */
  padding-bottom: 6px;

}

.combo-label {
  font-size: 13.5px; /* 14'ten 13'e çekmek font-weight 1000'i daha asil gösterir */
  font-weight: 900; /* 1000 bazen tarayıcılarda render hatası yapabilir, 900 en güvenli 'en kalın' değerdir */
  color: #202124; /* Google'ın en derin siyah-grisi */
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px; /* Uppercase yazıda boşluk ne kadar fazlaysa o kadar 'pahalı' durur */
}

.firm-card { background: white ; border-radius: 10px; padding: 12px 12px 4px; margin-bottom: 4px; border: 1px solid #e8eaed; }
.firm-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; }
.firm-logo { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; border: 1px solid #e8eaed; background: #f1f3f4; flex-shrink: 0; }
.firm-info { flex: 1; min-width: 0; }
.firm-name { font-size: 12px; font-weight: 600; color: #202124; line-height: 1.3; white-space: normal; overflow-wrap: break-word; word-break: break-word; overflow: visible; }
.firm-rate { font-size: 11px; color: #fbbc04; font-weight: 600; }
.firm-rate span { color: #9aa0a6; font-size: 10px; }
.products-list { display: flex; flex-direction: column; gap: 4px; }
.product-item { display: flex; justify-content: space-between; align-items: flex-start; background: none; border-radius: 6px; padding: 7px 9px; font-size: 12px; }
.product-name { color: #3c4043; font-weight: 400; flex: 1; min-width: 0; white-space: normal; overflow-wrap: break-word; word-break: break-word; }

.product-price { font-weight: 700; color: #1a73e8; white-space: nowrap; margin-left: 8px; }

/* ── Urun bazli kalori (parantez, kucuk + silik) ── */
.product-cal { font-size: 11px; color: #9aa0a6; font-weight: 400; white-space: nowrap; }

/* ── Kategori adi: teal tooltip (oklu). Desktop → hover, mobil → tap (.cat-open) ── */
.product-item.has-cat { cursor: pointer; }
.product-name[data-cat] { position: relative; }

/* Simple ürün tooltip balonu (ürün adının altında) */
.product-name[data-cat]::after {
  content: attr(data-cat);
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: #d7f0ea;
  color: #0f6e56;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.product-name[data-cat]::before {
  content: "";
  position: absolute;
  left: 16px;
  top: calc(100% + 3px);
  z-index: 41;
  width: 8px; height: 8px;
  background: #d7f0ea;
  transform: rotate(45deg) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.product-name[data-cat]:hover::after,
.product-item.cat-open .product-name[data-cat]::after {
  opacity: 1;
  transform: translateY(0);
}
.product-name[data-cat]:hover::before,
.product-item.cat-open .product-name[data-cat]::before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* Carousel (concat) ürünlerinde kategori tooltip'i: .slides-wrap slayt
   animasyonu için overflow:hidden olmak ZORUNDA, bu yüzden tooltip
   .slide'a değil .car-top-row'a bağlanır (o kırpılmıyor). Aktif slide
   değiştikçe .car-top-row'un data-cat'i JS ile güncellenir (bkz.
   map-results.js → slideGo / _syncCarTopRowCat). */
.carousel-item.has-cat { cursor: pointer; }
.car-top-row[data-cat] { position: relative; }
.car-top-row[data-cat]::after {
  content: attr(data-cat);
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: #d7f0ea;
  color: #0f6e56;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.car-top-row[data-cat]::before {
  content: "";
  position: absolute;
  left: 16px;
  top: calc(100% + 3px);
  z-index: 41;
  width: 8px; height: 8px;
  background: #d7f0ea;
  transform: rotate(45deg) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.car-top-row[data-cat]:hover::after,
.carousel-item.cat-open .car-top-row[data-cat]::after {
  opacity: 1;
  transform: translateY(0);
}
.car-top-row[data-cat]:hover::before,
.carousel-item.cat-open .car-top-row[data-cat]::before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* ── Kalori pill'i (combo-header, OPTION yanı) — kırmızı alev + koyu yazı ── */
.combo-label-wrap { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.cal-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fdecdd;   /* açık turuncu */
  color: #9a4a12;        /* koyu turuncu yazı — okunur */
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  font-family: 'Nunito', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.cal-pill .ti-flame { font-size: 13px; color: #ea4335; }  /* alev kırmızı, turuncu içinde belirgin */
.cal-pill[hidden] { display: none; }



/* ── FOOTER── */

.budget-footer-note {
  width: 100%;
  padding: 8px 16px 0;
  margin-top: 0.75rem;
  font-size: 0.7rem;
  color: #aaa;
  box-sizing: border-box;
  border-top: 1px dashed #e0e0e0;
  line-height: 1.5;
  letter-spacing: 0.1px;
  display: flex;
  justify-content: center;
}

.budget-footer-note p {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-style: italic;
  max-width: 320px;
  text-align: left;
}

.budget-footer-note .material-symbols-rounded {
  font-style: normal;
  color: #1a73e8;
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 1px;
}



/* ── CAROUSEL ITEM ── */
.carousel-item {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px !important;
  padding: 7px 9px !important;
}

/* Üst satır: ürün adı solda, fiyat sağda */
.car-top-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.car-top-row .slides-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Alt satır: dots solda, oklar fiyatın altında sağda */
.car-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* ‹ › okları — aralarında boşluk, fiyatın altında */
.car-nav-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.slides-wrap { flex: 1; overflow: hidden; min-height: 1.4em; position: relative; }
.slide {
  display: block;
  position: absolute;
  top: 0; left: 0; width: 100%;
  font-size: 12px; color: #3c4043; line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
  will-change: transform, opacity;
  visibility: hidden;
}
.slide.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}
.slide.slide-enter-right {
  transform: translateX(100%);
  opacity: 0;
  visibility: visible;
}
.slide.slide-enter-left {
  transform: translateX(-100%);
  opacity: 0;
  visibility: visible;
}
.slide.slide-exit-left {
  position: absolute;
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
  visibility: visible;
}
.slide.slide-exit-right {
  position: absolute;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  visibility: visible;
}
.car-btn {
  background: #e6f4ea; border: none; border-radius: 4px;
  cursor: pointer; padding: 0px 8px;
  font-size: 13px; font-weight: 900; color: #15803d;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  height: 16px;
}
.car-btn:hover { background: #34a853; color: white; }

/* Alt çizgi dots — yeşil */
.dots { display: flex; gap: 4px; align-items: center; }
.dot {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: #dadce0;
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.dot.active { background: #34a853; width: 22px; }

/* ── Pencereli (windowed) nokta göstergesi ──────────────────────────────
   Çok slide'lı karusellerde (5+) aktif noktanın çevresinde sabit sayıda
   nokta tam boyut kalır; uçtakiler kademeli küçülür ("daha var" hissi),
   en uzaktakiler gizlenir. Boyut sınıfları slideGo/JS tarafından atanır.
   Aktif nokta her zaman tam boyut + yeşil kalır (yukarıdaki kural kazanır). */
.dot.dot-sm  { width: 9px; }
.dot.dot-xs  { width: 5px; opacity: 0.55; }
.dot.dot-hidden { display: none; }
.subtotal-row { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: #9aa0a6; margin-top: 8px; padding-top: 6px; border-top: 1px dashed #e8eaed; text-transform: uppercase; letter-spacing: 0.4px; }
.arrow-down { text-align: center; font-size: 18px; color: #34a853; margin: 6px 0; }
.total-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 10px 12px; background: #3c4043; border-radius: 6px; color: white; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.total-price { font-size: 18px; font-weight: 800; font-family: 'Nunito', sans-serif; }
/* ── Mobil: nav butonları gizli, dots combo-header sağına taşındı ── */
@media (max-width: 768px) {

  /* Nav butonları tamamen gizle */
  .oneri-carousel-wrap > .oneri-nav {
    display: none !important;
  }

  /* Floating FABs: mobilde gizle — swipe var */
  .combo-fab-wrap {
    display: none !important;
  }

  /* Carousel wrap: düz block */
  .oneri-carousel-wrap {
    display: block !important;
    position: static !important;
    padding: 0 !important;
  }

  .oneri-carousel {
    width: 100% !important;
    flex: unset !important;
  }

  /* combo-header: sadece label (dots aşağı taşındı) */
  .combo-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-right: 0 !important;
    margin-bottom: 8px !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  /* Üstteki fazla boşluğu kıs (handle + wrapper zaten boşluk veriyor) */
  .combo-wrapper .combo-header { padding-top: 4px !important; }
  .combo-inner { padding-top: 6px !important; }

  /* Mobil: footer'daki share gizli; header'daki kopya Option satırının sağında */
  .share-row--footer { display: none !important; }
  .share-row--mobile {
    display: flex !important;
    margin-left: auto;        /* Option label solda, share sağa yaslı */
    margin-top: 0;
    padding-right: 0;
    gap: 8px;
  }

  /* Option dots: mobilde alta sabit, ortalı, kendi satırında — kaydırınca da görünür */
  .oneri-dots-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    margin-top: 0 !important;
    padding: 5px 0 !important;
    background: #f2f5f8 !important;
    border-top: 1px solid #e8eaed !important;
  }

  /* Dot boyutları */
  .oneri-dot {
    width: 6px !important;
    height: 6px !important;
  }
  .oneri-dot.active {
    width: 18px !important;
    border-radius: 3px !important;
  }
}

/* Desktop: dots aşağıda kalır, nav butonları görünür */
@media (min-width: 769px) {
  .combo-header-nav { display: none; }
}
.map-panel { flex: 1; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: sticky; top: 0; border: 1px solid #e8eaed; }
.map-panel-title { padding: 10px 14px; background: #202124; color: white; font-size: 12px; font-weight: 600; font-family: 'Roboto', sans-serif; letter-spacing: 0.3px; }
#sideMap { height: 440px; width: 100%; }
.combo-col-inner { flex: 0 0 400px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
 
  --bg:       #f3f6f4;
  --panel:    #ffffff;
  --green:    #2d5a27;
  --green-lt: #e8f4e0;
  --green-md: #4a8a3f;
  --amber:    #f59e0b;
  --text:     #1a1a1a;
  --muted:    #8a8a8a;
  --border:   #eeeeee;
  --radius:   14px;
  --shadow:   0 4px 24px rgba(0,0,0,0.08);
}


/* ── PANEL ── */
.panel {
  width: 340px;
  background: var(--panel);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.panel-title {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── SECTION ── */
.section-label {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── BUDGET ── */
.budget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.currency-select {
  appearance: none;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 5px 28px 5px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8a8a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.budget-tabs {
  display: flex;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 14px;
  position: relative;
}
/* Kayan gösterge (location toggle'daki gibi süzülen beyaz hap).
   Sekmeler şeffaf kalır; bu ::before aktif sekmenin altına kayar. */
.budget-tabs::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px - 4px) / 3); /* 3 sekme, 2 gap(2px) düş */
  border-radius: 7px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  transform: translateX(0);
  z-index: 0;
  pointer-events: none;
}
/* Aktif sekmenin sırasına göre göstergeyi kaydır (gap dahil). */
.budget-tabs:has(.budget-tab:nth-child(2).active)::before { transform: translateX(calc(100% + 2px)); }
.budget-tabs:has(.budget-tab:nth-child(3).active)::before { transform: translateX(calc(200% + 4px)); }
.budget-tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.budget-tab.active {
  background: transparent;
  color: #1b618f;
}
/* :has() desteklemeyen eski tarayıcılarda gösterge kaymaz; aktif sekme
   görünür kalsın diye beyaz arka planı geri ver (modern tarayıcılarda
   ::before zaten bunu örteceği için fark edilmez). */
@supports not selector(:has(*)) {
  .budget-tabs::before { display: none; }
  .budget-tab.active { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
}

.budget-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  gap: 8px;
  transition: border-color 0.2s;
}
.budget-input-wrap:focus-within { border-color: #a8c7fa; box-shadow: 0 0 0 2px rgba(26,115,232,0.08); }
.budget-symbol { font-size: 14px; font-weight: 600; color: #134f5c; }
.budget-input {
  border: none; background: transparent; outline: none;
  font-family: 'Google Sans', 'Roboto', sans-serif; font-size: 15px; font-weight: 500;
  color: var(--text); width: 100%;
}
.budget-input::placeholder { color: #c0c0c0; font-weight: 400; }

/* Butce sinir bilgisi (budget.js _budgetHint). Wrap flex oldugu icin
   absolute konumlanir; akisi ve input genisligini etkilemez.
   Renk: hata degil, "sinira dayanildi" bilgisi — bu yuzden uyari turuncusu
   degil, panelin kendi koyu tealı (.budget-symbol ile ayni aile). */
.budget-input-wrap { position: relative; }
.budget-hint {
  position: absolute;
  right: 10px; bottom: -17px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  animation: budgetHintIn 0.18s ease-out;
  display: flex; gap: 3px; align-items: baseline;
}
/* Hiyerarsi: etiket soluk, DEGER koyu — goz once rakama gitsin. */
.budget-hint-label { font-weight: 500; color: #8a9199; }
.budget-hint-value { font-weight: 600; color: #134f5c; }
@keyframes budgetHintIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Hint absolute olarak asagi tastigi icin kucuk bir alt bosluk birak;
   uyari cikinca altindaki icerik zipllamasin. */
#budget-fixed, #budget-range { padding-bottom: 6px; }

.budget-range-wrap {
  display: flex; gap: 8px; align-items: center;
}
.budget-range-wrap .budget-input-wrap { flex: 1; }
.range-sep { font-size: 13px; color: var(--muted); font-weight: 600; }

.budget-any-wrap {
  display: flex;
  align-items: center;
  padding: 7px 16px; /* Yanlardan biraz daha genişletip ferahlık verdik */
  border-radius: 12px; /* Daha modern ve yumuşak bir köşe */
  box-sizing: border-box;
  
  /* GÖRSELDEKİ O RENK: Yumuşak bir geçiş ekledik (Gradient) */
  background: linear-gradient(135deg, #c2e7ff 0%, #e8f0fe 100%);
  
  /* İncecik, belli belirsiz bir kenarlık */
  border: 1px solid rgba(0, 74, 119, 0.1);
  
  /* Hafif bir derinlik (Gölge): İşte kutuyu 'çirkin' olmaktan kurtaran bu */
  box-shadow: 0 2px 6px rgba(0, 74, 119, 0.08);

  cursor: default;
  pointer-events: none;
}

.budget-any-skeleton {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: normal; /* Fixed/Range ile boyu kilitler */

  /* YAZI STİLİ: Net, okunaklı ve kurumsal */
  font-family: 'Google Sans', sans-serif;
  font-size: 13px; /* Ne çok büyük ne çok küçük */
  font-weight: 500;
  color: #004a77; /* Görseldeki o koyu mavi */
  letter-spacing: 0.2px;
  text-align: center; /* Bilgi olduğu için ortalarsak daha 'kart' gibi durur */
}








/* ── SEARCH MODE ── */
.mode-tabs {
  display: flex;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
  position: relative;
}
/* Kayan gösterge — 2 sekme. */
.mode-tabs::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px - 2px) / 2); /* 2 sekme, 1 gap(2px) düş */
  border-radius: 7px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  transform: translateX(0);
  z-index: 0;
  pointer-events: none;
}
.mode-tabs:has(.mode-tab:nth-child(2).active)::before { transform: translateX(calc(100% + 2px)); }
.mode-tab {
  flex: 1; padding: 10px 0; border: none; background: transparent;
  border-radius: 7px; font-family: 'DM Sans', sans-serif; font-size: 13px;
  font-weight: 600; color: var(--muted); cursor: pointer; transition: color 0.18s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  position: relative;
  z-index: 1;
}
.mode-tab.active {
  background: transparent; color: #1b618f;
}
/* Iki mod arasinda silik dikey cizgi — farkli tuslar oldugunu belli eder.
   z-index:0 => kayan beyaz gosterge (::before de z-index:0 ama sonra boyanir)
   ustunden gecerken cizgi gizlenir; iki tab pasifken gorunur. */
.mode-tab:first-child::after {
  content: "";
  position: absolute;
  right: -1px; top: 50%;
  transform: translateY(-50%);
  height: 16px; width: 1px;
  background: rgba(0,0,0,0.22);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
}
@supports not selector(:has(*)) {
  .mode-tabs::before { display: none; }
  .mode-tab.active { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
}
/* AI picked (LLM akışı) — toggle nötr/pasif: hap gizli, sekmeler soluk.
   Kontrol AI'da; kullanıcı bir sekmeye basınca normale döner. */
.mode-tabs.mode-ai-active::before { opacity: 0; }
.mode-tabs.mode-ai-active { opacity: 0.55; }
.mode-tabs.mode-ai-active .mode-tab { color: #9aa0a6; }
/* Ayrac cizgisi yalnizca AI-pasif modda belirir. */
.mode-tabs.mode-ai-active .mode-tab:first-child::after { opacity: 1; }
/* Altındaki kısa açıklama — sadece AI picked iken görünür. */
.mode-ai-hint {
  display: none; align-items: center; gap: 5px;
  font-size: 11.5px; color: #5f6368; line-height: 1.4;
  margin-top: 8px; padding-left: 10px;
}
.mode-ai-hint.visible { display: flex; }
.mode-ai-hint-icon {
  font-size: 18px !important;
  color: #6c4ad6;
  flex-shrink: 0;
}

/* ── RUN BUTTON ── */
.run-btn {
  width: 100%; padding: 14px; border: none;
  background: #4dabf7; border-radius: 12px;
  font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700;
  color: white; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: -0.2px;
}
.run-btn:hover { background: #339af0; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(77,171,247,0.35); }
.run-btn:active { transform: translateY(0); }

/* ── CONCEPT MODAL ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 1000;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal {
  background: white; border-radius: 20px;
  width: 100%; max-width: 660px; height: 520px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  animation: modalIn 0.22s ease;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Contact ve AI modal: yükseklik içeriğe göre */
.contact-modal,
.ai-modal { height: auto !important; }
/* Reset butonu: desktop'ta tam metin, mobilde kısa (aşağıda) */
.reset-short { display: none; }
@keyframes modalIn { from { opacity:0; transform: scale(0.96) translateY(8px); } to { opacity:1; transform: scale(1) translateY(0); } }

.modal-header {
  padding: 20px 24px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header-title {
  font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 800;
  color: var(--text);
}
.modal-header-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
  max-width: 560px;
}
.modal-header-subtitle .subtitle-short { display: none; }
.modal-close {
  background: var(--bg); border: none; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--muted);
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.modal-close:hover { background: var(--border); color: var(--text); }

/* Two-column layout */
.modal-body {
  display: flex; flex: 1; overflow: hidden;
}

/* Left: category tabs */
.concept-sidebar {
  width: 200px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  background: var(--bg);
}
.cat-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; border: none;
  background: transparent; cursor: pointer; text-align: left;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--muted); transition: all 0.15s; width: 100%;
}
.cat-tab:hover { background: white; color: var(--text); }
.cat-tab.active { background: white; color: #1a73e8; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.cat-tab .cat-icon { font-size: 16px; flex-shrink: 0; }
.cat-tab .cat-count {
  margin-left: auto; background: #4dabf7; color: white;
  border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 700;
  display: none; flex-shrink: 0; min-width: 18px; text-align: center;
}
.cat-tab .cat-count.visible { display: block; }

/* Metin rozeti (Cuisines disindaki sekmeler mod adi yazar).
   Sekme adi cıplak text node -> ellipsis uygulanamaz. Bunun yerine
   rozeti sabit tutup (flex-shrink:0) sekme adinin sarmasini engelliyoruz:
   200px sidebar'da "Availability" + "Open now" en uzun cift, sigar. */
.cat-tab .cat-count {
  white-space: nowrap;
  letter-spacing: 0.1px;
  padding: 2px 7px;
}
.cat-tab { min-width: 0; white-space: nowrap; }

/* Right: chips */
.concept-content {
  flex: 1; padding: 16px; overflow-y: auto;
}
.concept-pane { display: none; flex-direction: column; gap: 6px; }
.concept-pane.active { display: flex; }
.pane-title {
  font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 800;
  color: var(--text); margin-bottom: 4px;
}
.pane-desc {
  font-size: 12px; color: var(--muted); margin-bottom: 14px; line-height: 1.5;
}
.concept-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: 30px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--text); cursor: pointer; transition: all 0.15s; background: white;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; line-height: 1;
}
.chip-emoji { font-size: 15px; line-height: 1; flex-shrink: 0; }
.chip-label { line-height: 1; }
.chip:hover { border-color: #1a73e8; color: #1a73e8; }
.chip.selected {
  border-color: #1a73e8; color: #1a73e8;
  background: #e8f0fe; font-weight: 600;
}
@media (hover: none) {
  .chip:hover { border-color: var(--border); color: var(--text); }
  .chip.selected:hover { border-color: #1a73e8; color: #1a73e8; }
}

.modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; flex-shrink: 0;
}

/* selected concept badge in panel */
.concept-badge {
  display: none; margin-top: 10px; padding: 8px 12px;
  background: var(--bg); border-radius: 8px; border: 1px solid var(--border);
  gap: 6px; align-items: center; flex-wrap: wrap;
}
.concept-badge.visible { display: flex; }
.concept-badge-item {
  border: 1px solid #1a73e8; color: #1a73e8; border-radius: 20px;
  padding: 2px 10px; font-size: 11px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  background: #e8f0fe;
}

/* Disabled activity chips */
.chip--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(60%);
}

/* Coming Soon banner */
.coming-soon-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f0f0ff, #e8e8ff);
  border: 1px dashed #a0a0d0;
  color: #6060aa;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}



hr.divider { border: none; border-top: 1px solid var(--border); }
/* ═══════════════════════════════════════════════
   FULL-PAGE LAYOUT
   ═══════════════════════════════════════════════ */
html, body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  margin: 0; padding: 0;
}

/* Navbar + body stacked vertically */
.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* Everything below navbar */
.page-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── SIDEBAR ─────────────────────────────────── */
.sidebar {
  width: 320px;
  flex-shrink: 0;
  background: white;
  border-right: 1px solid #dadce0;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: width 0.25s ease;
  overflow: hidden;
  margin-right: 0;
}
.sidebar.collapsed { width: 0; border-right: none; }
.sidebar.collapsed .sidebar-inner { opacity: 0; pointer-events: none; }
.sidebar.collapsed .run-btn span.run-text { display: none; }

.sidebar-toggle {
  flex-shrink: 0;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  border-bottom: 1px solid #f1f3f4;
  cursor: pointer;
  background: white;
}
.sidebar-toggle:hover { background: #f8f9fa; }
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #5f6368;
  border-radius: 2px;
}

.sidebar-inner {
  flex: 1;
  overflow-y: auto;
  transition: opacity 0.2s;
}
.sidebar-run {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid #dadce0;
  background: white;
  
}

/* ── RUB BUTTON ────────────────────────────── */


/* Ana Buton Tasarımı */
.run-btn {
  /* Temel Özellikler (Mevcuttan devralınanlar) */
  width: 100%;
  height: 42px; /* Biraz daha derinlik için yüksekliği artırdım (Opsiyonel) */
  border: none;
  border-radius: 6px; /* Hafifçe daha yumuşak köşeler */
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 600; /* AI hissi için yazıyı biraz daha kalınlaştırdım */
  color: white;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  
  /* --- AI Tasarım Dokunuşları --- */
  
  /* 1. Derinlik: Hafif bir gradient (Renk skalasını bozmaz) */
  background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
  
  /* 2. Glow (Yumuşak Işıltı): Butonun etrafına mavi bir hale */
  box-shadow: 0 4px 15px rgba(26, 115, 232, 0.4);
  
  /* 3. Animasyon Hazırlığı */
  position: relative; /* İçerideki parlama efekti için */
  transition: all 0.3s ease-in-out; /* Daha yumuşak geçişler */
}

/* --- AI "Arasıra Işıldayan" Efekt --- */
/* Bu, butonun üzerinden periyodik olarak geçen beyaz bir parlama şerididir */
.run-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2); /* Çok şeffaf beyaz */
  transform: rotate(30deg);
  
  /* Animasyon Tanımı */
  animation: ai-glow 6s infinite; /* 3 saniyede bir tekrarla */
}

/* --- Hover (Üzerine Gelme) Efekti --- */
.run-btn:hover {
  background: linear-gradient(135deg, #1d7af0 0%, #1a62cc 100%); /* Hafifçe açar */
  
  /* Glow'u güçlendir: "Tıkla" hissi verir */
  box-shadow: 0 6px 20px rgba(26, 115, 232, 0.6);
  
  /* Hafifçe büyüme efekti */
  transform: translateY(-1px);
}

/* --- Active (Tıklanma) Efekti --- */
/* Gerçek buton hissi */
.run-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.4);
}

/* --- Animasyon Keyframes (Parlama Şeridi) --- */
@keyframes ai-glow {
  0% {
    left: -60%;
  }
  20% {
    left: 120%; /* Hızla sağa geçer */
  }
  100% {
    left: 120%; /* Bekleme süresi (Parlama bittikten sonra) */
  }
}













/*  ────────────────────────────── */


.sidebar.collapsed .sidebar-run {
  display: none; 
}

/* ── CONTENT AREA ────────────────────────────── */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Tabs bar — haritanın tam üstü */


/* Map + Combo: tabs'tan dibe kadar */
.map-combo {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.map-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
}

#sideMap {
  flex: 1;
  min-height: 0;
}

.combo-col {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid #dadce0;
  background: white;
}
.combo-inner {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.app { font-family: 'Nunito', sans-serif; }

/* Leaflet z-index — modal arkasında */
.leaflet-pane, .leaflet-control, .leaflet-top, .leaflet-bottom {
  z-index: 10 !important;
}
.modal-overlay { z-index: 1000 !important; }

.map-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: white;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}


.map-box-header {
  position: absolute;
  top: 25px;
  left: 10px;
  z-index: 450;
  background: transparent;
  border: none;
  border-bottom: none;
  box-shadow: none;
  padding: 0;
  height: auto;
}

@media (max-width: 768px) {
  .map-box-header {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Görünen harita bandı (sheet %82 örttü): map-box top=44px(viewport), sheet üstü=18vh.
       map-box içinde görünen yükseklik = 18vh-44px. Şerit (~36px) o bandın ortasına. */
    top: calc((18dvh - 44px - 36px) / 2) !important;
  }
  .map-box-header::-webkit-scrollbar {
    display: none;
  }
}



/* ── FIRM HEADER LAYOUT FIX ── */
.firm-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px;
}

/* Logo + Rate bloğu: logo üstte, rate tam altında */
.firm-logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.firm-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
}
.firm-subtotal {
  margin-left: auto;
  flex-shrink: 0;
  background: #e8f0fe;
  color: #1a73e8;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  align-self: flex-start;
  display: inline-block;
}

/* Click for details: firma adının altında, block olarak */
.firm-click {
  display: block;
  font-size: 10.5px;
  color: #9aa0a6;
  margin-left: 0;
  cursor: pointer;
  transition: color 0.15s;
  font-weight: 400;
}
.firm-click:hover { color: #1a73e8; text-decoration: underline; }
.subtotal-row { display: none !important; }

/* ── ARROW DOWN — more prominent ── */
.arrow-down {
  text-align: center;
  /* Alt boşluğu milimetrik (8px) yaptık ki uçmasın ama çarpmısın da */
  margin: 2px 0 8px 0; 
  line-height: 0;
}

.arrow-icon {
  display: inline-block;
  width: 2px; 
  height: 18px; 
  background: repeating-linear-gradient(
    to bottom,
    #ea4335 0px,
    #ea4335 4px,
    transparent 4px,
    transparent 8px
  );
  position: relative;
  animation: bounce 2s infinite ease-in-out;
}

.arrow-icon::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid red;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}


/* ── FIRM RATE: single line guaranteed ── */
.firm-rate {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  font-size: 11px;
  color: #fbbc04;
  font-weight: 600;
  gap: 3px;
}
.firm-rate span { color: #9aa0a6; font-size: 10px; white-space: nowrap; }

/* ── VENUE PREFERENCE MODAL ── */
.venue-modal {
  max-width: 500px !important;
  height: auto !important;
  padding: 40px 30px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border-radius: 20px;
}
.venue-modal-icon {
  font-size: 40px;
  margin-bottom: 14px;
  line-height: 1;
}
.venue-modal-title {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #202124;
  margin-bottom: 10px;
  text-align: center;
}
.venue-modal-desc {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #5f6368;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 340px;
}
.venue-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.venue-option {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 16px 18px;
  border: 2px solid #e8eaed;
  border-radius: 14px;
  background: white;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s;
  width: 100%;
}
.venue-option:hover {
  border-color: #1a73e8;
  background: #f0f6ff;
  box-shadow: 0 2px 12px rgba(26,115,232,0.12);
  transform: translateY(-1px);
}
.venue-option:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(26,115,232,0.10);
}
.venue-option-icon {
  font-size: 24px;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.venue-option-label {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #202124;
  grid-column: 2;
  grid-row: 1;
}
.venue-option-hint {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: #9aa0a6;
  grid-column: 2;
  grid-row: 2;
  font-weight: 400;
}

/* ── VENUE MODAL EK STİLLER ── */
.venue-modal {
  position: relative;
}
.venue-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #f1f3f4;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  color: #5f6368;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.venue-modal-close:hover { background: #e8eaed; color: #202124; }

.venue-option.selected {
  border-color: #1a73e8;
  background: #f0f6ff;
  box-shadow: 0 2px 12px rgba(26,115,232,0.15);
}
.venue-option.selected .venue-option-label {
  color: #1a73e8;
}

.venue-confirm-btn {
  margin-top: 20px;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(26,115,232,0.35);
  letter-spacing: 0.2px;
}
.venue-confirm-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26,115,232,0.45);
}
.venue-confirm-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 6px rgba(26,115,232,0.3);
}
.venue-confirm-btn:disabled {
  background: #e8eaed;
  color: #9aa0a6;
  box-shadow: none;
  cursor: not-allowed;
}




/* ═══════════════════════════════════════════════════════
   HAMBURGER + BACKDROP + RESIZER — temel stiller
   ═══════════════════════════════════════════════════════ */
.hamburger-btn {
  display: flex; flex-direction: column; gap: 4px;
  background: none; border: none; cursor: pointer;
  padding: 4px; border-radius: 5px; flex-shrink: 0;
  transition: background 0.15s;
}
.hamburger-btn:hover { background: #f1f3f4; }
.hamburger-btn span  { display: block; width: 16px; height: 1.5px; background: #5f6368; border-radius: 2px; }
.sidebar-toggle { display: none !important; }

.sidebar-backdrop {
  display: none; position: fixed;
  top: 44px; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45); z-index: 499;
}
.sidebar-backdrop.visible { display: block; }

.map-resizer {
  display: none;
  height: 12px; width: 100%; flex-shrink: 0;
  background: #f1f3f4;
  border-top: 1px solid #dadce0;
  border-bottom: 1px solid #dadce0;
  cursor: row-resize; position: relative; z-index: 20;
  touch-action: none;
}
.map-resizer::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 36px; height: 3px; background: #bdc1c6; border-radius: 2px;
  transition: background 0.15s;
}
.map-resizer:hover::before { background: #1a73e8; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1100px) — sidebar drawer ───────────────── */
@media (max-width: 1100px) {
  .sidebar {
    position: fixed !important;
    top: 44px; left: 0;
    width: 300px;
    width: min(85vw, 340px);
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);  /* top:44px ile tutarlı → drawer dibe iner, altta boşluk kalmaz */
    z-index: 500;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sidebar .sidebar-inner {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }
  .sidebar .sidebar-run {
    flex-shrink: 0;
    background: white;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    position: relative;
    z-index: 1;
  }
  .sidebar.drawer-open {
    transform: translateX(0);
    box-shadow: 6px 0 28px rgba(0,0,0,0.22);
  }
  .sidebar.collapsed { width: 300px !important; }
  .sidebar-inner { opacity: 1 !important; pointer-events: auto !important; }
  .sidebar-run   { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  .sidebar-run .adv-filters-link { align-self: flex-start; white-space: nowrap; }
  .sidebar-run .adv-filters-text { white-space: nowrap; }
  /* combo-col genişliğine dokunma */
}

/* ── Küçük ekran (≤ 768px) — dikey layout ─────────────── */
@media (max-width: 768px) {

  .navbar { padding: 0 12px; gap: 8px; }
  .navbar-search { flex: 1; min-width: 0; max-width: unset; }
  .navbar-search input { font-size: 13px; }
  .loc-text { display: none; }
  .location-btn { padding: 7px 10px; }

  .page-body { flex-direction: column; }

  .map-combo {
    flex-direction: column !important;
    flex: 1; min-height: 0; overflow: hidden;
  }

  .map-col {
    height: 45%; min-height: 100px;
    flex-shrink: 0;
    padding: 8px 8px 0 8px;
    box-sizing: border-box;
  }
  #sideMap    { height: 100%; width: 100%; }
  .map-box    { border-radius: 8px; height: 100%; }
  .map-resizer { display: block; }

  .combo-col {
    width: 100% !important; flex: 1; min-height: 100px;
    border-left: none; border-top: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .combo-inner    { padding: 12px 8px; }
  .map-box-header { padding: 8px 10px; gap: 6px; }
  .tab-btn        { font-size: 12px; padding: 5px 10px; }

  /* ── Modal: tam ortada ── */
  .modal-overlay { align-items: center; justify-content: center; padding: 5dvh 16px; }
  .modal {
    width: calc(100vw - 32px) !important;
    max-width: 520px !important;
    height: auto !important;
    max-height: 72dvh !important;
    border-radius: 14px;
  }

  /* Advanced Filters modalı Select Concept ile birebir aynı boyda
     (concept: height:auto + max-height:72dvh — aynısını uygula) */
  #filtersModal .modal { height: 90dvh !important; max-height: 90dvh !important; }

  /* Kategori sekmeleri: tek satır YATAY kaydırılır şerit (dikeyde yer açılır) */
  #filtersModal .concept-sidebar,
  #conceptModal .concept-sidebar {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding: 8px 10px !important;
    scrollbar-width: none;
  }
  #filtersModal .concept-sidebar::-webkit-scrollbar,
  #conceptModal .concept-sidebar::-webkit-scrollbar { display: none; }
  #filtersModal .cat-tab,
  #conceptModal .cat-tab {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  /* İçerik alanı: kalan tüm dikey alanı kapla, kendi içinde kaydır */
  #filtersModal .concept-content,
  #conceptModal .concept-content { flex: 1 1 auto !important; overflow-y: auto !important; }

  /* Filters footer: üç buton tek satır, eşit genişlik */
  #filtersModal .modal-footer { flex-wrap: nowrap; gap: 8px; }
  #filtersModal .modal-footer .btn-secondary,
  #filtersModal .modal-footer .btn-primary {
    flex: 1 1 0; min-width: 0;
    padding-left: 0; padding-right: 0;
    white-space: nowrap; font-size: 13px;
  }

  /* Reset butonu: mobilde kısa metin */
  #filtersModal .reset-full  { display: none; }
  #filtersModal .reset-short { display: inline; }

  /* Mobilde Filters açıklamasının kısa halini göster */
  #filtersModal .subtitle-full  { display: none; }
  #filtersModal .subtitle-short { display: inline; }

  /* Kapatma (✕) ikonu: Location modalındaki gibi sağ-üstte, tam yuvarlak, ezilmesin */
  #conceptModal .modal-close,
  #filtersModal .modal-close {
    flex-shrink: 0;
    width: 32px; height: 32px;
    align-self: flex-start;
    border-radius: 50%;
  }
  #conceptModal .modal-header,
  #filtersModal .modal-header { align-items: flex-start; }

  /* Concept modal: kategoriler DÜZ LİSTE — scroll/slider yok */
  .modal-body     { flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }

  .concept-sidebar {
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;           /* scroll yok */
    border-right: none;
    border-bottom: 1px solid #e8eaed;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;             /* alt satıra geçer, kaybolmaz */
    gap: 4px;
    flex-shrink: 0;
    background: #f8f9fa;
  }
  .cat-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
  }

  .concept-content {
    flex: 1; overflow-y: auto;
    padding: 14px; min-height: 0;
  }

  /* Venue modal */
  .venue-modal {
    max-width: calc(100vw - 32px) !important;
    padding: 28px 16px 20px !important;
  }
  .venue-modal-desc { font-size: 12px; margin-bottom: 14px; }
  .venue-option     { padding: 12px 14px; }
}

/* ── Küçük mobil (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .navbar-logo   { font-size: 17px; }
  .map-col       { height: 38%; }
  .combo-wrapper { padding: 10px; }
  .firm-card     { padding: 9px; }
  .oneri-nav     { width: 28px; height: 28px; font-size: 15px; }
  .total-row     { font-size: 10px; }
  .total-price   { font-size: 16px; }
  .modal         { max-height: calc(100vh - 80px) !important; }
}

/* ── Concept sidebar: küçük ekranda wrap grid ──────────────────────────
   Scroll/slider yok — butonlar alt satıra geçer, hiçbiri kaybolmaz
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .concept-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: none !important;
    border-bottom: 1px solid #e8eaed !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    background: #f8f9fa !important;
  }

  .cat-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #dadce0;
    background: white;
    overflow: hidden;
    min-width: 0;
  }
  .cat-tab.active {
    background: #e8f0fe;
    border-color: #1a73e8;
    color: #1a73e8;
  }

  /* combo-col: parmakla kaydırılabilir */
  .combo-col {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ═══════════════════════════════════════════════════════
   BOTTOM SHEET — küçük ekranda combo paneli
   ═══════════════════════════════════════════════════════ */

/* Handle çubuğu — desktop'ta gizli */
.sheet-handle { display: none; }

@media (max-width: 768px) {

/* Büyük karousel: nav butonları Option-X yazısının sağında */
.oneri-carousel-wrap {
  flex-direction: column;
  position: relative;
  padding-top: 0;        /* artık üstte yer kaplamıyor */
}
.oneri-carousel { width: 100%; order: unset; }

/* Nav butonları artık combo-header içinde — varsayılan konumları sıfırla */
.oneri-nav:first-child,
.oneri-nav:last-child {
  position: static;
  order: unset;
}
.oneri-nav { margin-top: 0; }

  /* combo-col: fixed bottom sheet gibi davranır */
  .combo-col {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 82% !important;           /* açık hali — CTA üstte görünür kalır */
    border-left: none !important;
    border-top: none !important;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    background: white;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: height 0.32s cubic-bezier(0.2,0,0.2,1);
  }

  /* Kapalı hali — sadece handle + logo görünür */
  .combo-col.sheet-closed {
    height: 60px !important;
  }

  /* İçerik: açık halde scroll, kapalıda gizli */
  .combo-inner {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 12px;
    background: #f1f3f4;
    min-height: 0;
  }

  .combo-col.sheet-closed .combo-inner { overflow: hidden; }
  .combo-col.sheet-closed { background: #f1f3f4; }
  .combo-col.sheet-closed .sheet-logo { margin-top: 10px; display: block; }

  /* Harita: sabit, tam ekran — sheet onun üzerine kayar, harita hiç oynamaz */
  .map-col {
    position: fixed !important;
    top: 44px; left: 0; right: 0; bottom: 0;
    height: auto !important;
    padding: 8px;
    box-sizing: border-box;
  }
  #sideMap { height: 100%; width: 100%; }
  .map-box  { height: 100%; border-radius: 10px; }

  /* map-combo: position static, fixed child'lar bağımsız */
  .map-combo {
    flex-direction: column !important;
    position: relative;
    flex: 1;
    overflow: visible !important;
  }

  /* Handle çubuğu */
  .sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 10px 16px 7px;  /* azaltıldı — içerikle mesafe kapandı */
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
    background: #f1f3f4;
    border-radius: 28px 28px 0 0;  /* combo-col ile eşit — yanlardan harita görünsün */
    margin: 0;
  }
  .sheet-handle:active { cursor: grabbing; }

  .sheet-handle-bar {
    width: 44px; height: 5px;
    background: #bdc1c6;
    border-radius: 3px;
    transition: background 0.15s;
  }
  .sheet-handle:hover .sheet-handle-bar,
  .sheet-handle:active .sheet-handle-bar { background: #9aa0a6; }

  /* Logo: sadece kapandığında görünür */
  .sheet-logo {
    font-family: 'Roboto', sans-serif;
    font-size: 23px;
    font-weight: 700;
    color: #202124;
    opacity: 0; display: none;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;

  }
  .sheet-logo .g { color: #4285f4; }
  .sheet-logo .r { color: #ea4335; }
  .sheet-logo .u { color: #fbbc04; }
  .sheet-logo .b { color: #4285f4; }
  .sheet-logo .dot { color: #34a853; }

  .combo-col.sheet-closed .sheet-logo {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Kompakt handle (shared.html): sadece ince bar, başlık hemen altında ── */
  .sheet-handle--compact {
    padding: 8px 16px 4px;
  }

  /* ── Bottom-sheet: combo-wrapper sheet içinde yükseklikle sınırlı;
        firms-scroll kendi içinde kayar. Disclaimer wrapper DIŞINDA, dipte sabit görünür. ── */
  #comboCol .combo-inner { padding-bottom: 4px; }
  #comboCol .combo-wrapper {
    display: flex;
    flex-direction: column;
    max-height: calc(82vh - 132px);  /* handle/başlık + ALT disclaimer payı bırakıldı */
    overflow: hidden;
  }
  #comboCol .combo-header,
  #comboCol .combo-footer { flex-shrink: 0; }
  #comboCol .firms-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  #comboCol .combo-footer { padding: 0 16px 6px; }
  #comboCol .combo-footer .total-row { margin-top: 8px; padding: 8px 12px; }
  /* Disclaimer: sheet'in dibinde sabit, görünür */
  #comboCol .budget-footer-note { flex-shrink: 0; margin-top: 4px; padding: 4px 16px 8px; }
  /* "Share this pick" + ikon: öneri kutusu kenarıyla hizalı (içeri al) */
  #comboCol .combo-header { padding-right: 16px !important; }
  .share-row--mobile { padding-right: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   LOCATION MODAL — DESKTOP (3 kolon)
   ═══════════════════════════════════════════════════════════════════ */
.location-modal { max-width: 640px; height: 460px; transition: max-width 0.3s, height 0.3s; }
.location-modal.pinpoint-active  { max-width: 860px; height: 560px; }
.location-modal.hotspot-active   { max-width: 860px; height: 560px; }

.location-modal-body {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  flex: 1;
}

.loc-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e8eaed;
  overflow: hidden;
  transition: opacity 0.15s;
}
.loc-col:last-child { border-right: none; }
.loc-col--disabled  { pointer-events: none; }
/* Bos sutunun basligi soluk kalsin ama placeholder metni okunur olsun
   (opacity: .38 tum sutuna verilince placeholder da silinip gidiyordu). */
.loc-col--disabled .loc-col-title { opacity: 0.38; }

/* Modal ilk acildiginda CITY ve DISTRICT bombos duruyor ve ekran "bozuk"
   gorunuyordu. Bos sutuna, NEDEN bos oldugunu soyleyen bir placeholder
   koyuyoruz. Saf CSS: .loc-col--disabled JS tarafindan zaten dogru anda
   ekleniyor/kaldiriliyor, sutun dolunca placeholder kendiliginden kayboluyor. */
.loc-col--disabled .loc-list::after {
  content: attr(data-empty);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 18px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
/* DISTRICT'in solukluğu KOŞULLU olmalı, sabit degil:
     - Ulke SECILMEMIS  -> City de disabled -> District zincirde UZAK adim -> soluk
     - Ulke secili, sehir yok -> District artik SIRADAKI adim -> City'nin ilk
       bastaki koyulugunda olmali (soluklastirma YOK)
   Ikisini ayirt etmek icin bitisik-kardes seciciyi kullaniyoruz: kural sadece
   City DE disabled iken calisir. City aktiflesince (JS .loc-col--disabled'i
   kaldirir) secici tutmaz ve placeholder kendiliginden normal opakliga doner.
   Saf CSS -> JS'e dokunmaya gerek yok. */
#locColCity.loc-col--disabled + #locColDistrict.loc-col--disabled .loc-list::after { opacity: 0.6; }

.loc-col-title {
  padding: 10px 14px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #9aa0a6;
  border-bottom: 1px solid #e8eaed;
  flex-shrink: 0;
}

.loc-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.loc-item {
  padding: 9px 16px;
  font-size: 13px;
  color: #3c4043;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 4px;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-item:hover  { background: #f1f3f4; }
.loc-item.active { background: #e8f0fe; color: #1a73e8; font-weight: 500; }

/* İki satırlı district (borough + mahalle) */
.loc-item--two {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: normal;
  line-height: 1.25;
}
.loc-item-parent {
  font-size: 11px;
  color: #9aa0a6;
}
.loc-item-sub {
  font-size: 13px;
  color: inherit;
}
.loc-item--two.active .loc-item-parent { color: #1a73e8; opacity: 0.7; }


/* ═══════════════════════════════════════════════════════════════════
   LOCATION MODAL — MOBILE (Step Navigator)
   ≤ 640px: 3-column hidden, step navigator shown
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {


  .location-modal {
    /* width ve max-width satırlarını sil ya da şöyle yaz: */
    width: 100% !important;
    max-width: 600px !important;   /* concept modal ile aynı */
    height: 92dvh !important;
    max-height: 92dvh !important;
    border-radius: 12px !important; /* bottom sheet değil, normal modal gibi */
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    animation: locSheetIn 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  @keyframes locSheetIn {
    from { transform: translateY(60px); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .location-modal .modal-footer {
    flex-shrink: 0 !important;
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #e8eaed;
    z-index: 1;
  }

  /* Hide 3-column desktop body */
  .location-modal-body { display: none; }

  /* Step navigator container */
  .loc-tree-body {
    display: flex !important;
    flex-direction: column;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Header: breadcrumb + title */
  .lst-header {
    flex-shrink: 0;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #e8eaed;
  }

  .lst-bc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    margin-bottom: 6px;
    min-height: 18px;
  }

  .lst-bc-link {
    color: #1a73e8;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
  }
  .lst-bc-link:hover { text-decoration: underline; }

  .lst-bc-sep {
    color: #9aa0a6;
    font-size: 10px;
  }

  .lst-bc-current {
    color: #202124;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
  }

  .lst-title {
    font-size: 16px;
    font-weight: 500;
    color: #202124;
  }

  /* Scrollable list */
  .lst-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Slide animations */
  @keyframes lstFwd {
    from { transform: translateX(32px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
  }
  @keyframes lstBack {
    from { transform: translateX(-32px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
  }
  .lst-slide-fwd  { animation: lstFwd  0.2s ease; }
  .lst-slide-back { animation: lstBack 0.2s ease; }

  /* List item */
  .lst-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-size: 14px;
    color: #3c4043;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
    transition: background 0.1s;
  }
  .lst-item:hover  { background: #f8f9fa; }
  .lst-item.active { color: #1a73e8; background: #e8f0fe; }

  .lst-item-label { flex: 1; }

  .lst-item-arrow {
    font-size: 16px;
    color: #9aa0a6;
    flex-shrink: 0;
  }

  .lst-item-check {
    font-size: 14px;
    color: #1a73e8;
    flex-shrink: 0;
  }
}

/* Desktop: hide step navigator body */
@media (min-width: 641px) {
  .loc-tree-body { display: none; }
  .loc-mode-dd { display: none !important; }
  .hotspot-dd-trigger { display: none; }
  .hotspot-dd-list { display: block !important; }
}

/* Pinpoint/Hotspot modunda district listesini (mobil tree) gizle —
   harita tüm alanı kaplasın (JS inline display:none'ı CSS !important eziyordu) */
.location-modal.pinpoint-active .loc-tree-body,
.location-modal.hotspot-active  .loc-tree-body {
  display: none !important;
}

/* ── LOCATION PICK BUTTON (acc-body içinde) ─────────────────────── */
.loc-pick-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8f9fa;
  border: 1px dashed #dadce0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 2px;
}
.loc-pick-btn:hover {
  background: #f0f6ff;
  border-color: #1a73e8;
}
.loc-pick-btn.loc-set {
  background: #e8f0fe;
  border: 1px solid #1a73e8;
  border-style: solid;
}

.loc-pick-pin { font-size: 20px; flex-shrink: 0; }

.loc-pick-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.loc-pick-hint {
  font-size: 11px;
  color: #9aa0a6;
  font-weight: 400;
  letter-spacing: 0.2px;
}
.loc-pick-btn.loc-set .loc-pick-hint {
  color: #5f8ee8;
}

.loc-pick-value {
  font-size: 13px;
  font-weight: 500;
  color: #1a73e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}
.loc-pick-btn.loc-set .loc-pick-value { display: block; }

.loc-pick-arrow {
  font-size: 18px;
  color: #9aa0a6;
  flex-shrink: 0;
  transition: color 0.15s;
}
.loc-pick-btn:hover .loc-pick-arrow,
.loc-pick-btn.loc-set .loc-pick-arrow { color: #1a73e8; }


/* ══════════════════════════════════════════════════════════════════════
   Firma Detail Modal — v6
   ══════════════════════════════════════════════════════════════════════ */
#firmModal.modal-overlay { z-index: 1100 !important; padding: 20px; }

.firm-detail-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width:  780px;
  max-height: calc(100vh - 20px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Header ── */
.fmd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px 18px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0; gap: 12px;
}
.fmd-header-left { display:flex; align-items:center; gap:12px; min-width:0; }
.fmd-header-logo { width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid #e8eaed; flex-shrink:0; }
.fmd-header-text { min-width:0; }
.fmd-header-name { font-size:15px; font-weight:700; color:#1a1a1a; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fmd-name-badges { display:inline-flex; gap:4px; flex-wrap:wrap; }
.fmd-type-badge { font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px; background:#1a73e8; color:#fff; text-transform:capitalize; }
.fmd-header-meta { display:flex; align-items:center; gap:4px; margin-top:3px; flex-wrap:wrap; }
.fmd-star { font-size:12px; }
.fmd-star.full  { color:#fbbc04; }
.fmd-star.half  { color:#fbbc04; opacity:0.6; }
.fmd-star.empty { color:#dadce0; }
.fmd-header-rating { font-weight:700; color:#1a1a1a; font-size:12px; }
/* Header meta'da puan ile sosyal ikonları ayıran ince çizgi. */
.fmd-meta-sep { width:1px; height:12px; background:#dadce0; margin:0 4px; flex-shrink:0; }
/* Sosyal medya ikonları — küçük, nötr gri, yuvarlak; header'ı şişirmez. */
.fmd-social-row { display:inline-flex; align-items:center; gap:5px; }
.fmd-social-icon {
  width:24px; height:24px; border-radius:50%;
  border:1px solid #e0e3e6; background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  color:#5f6368; font-size:14px; text-decoration:none;
  transition:background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink:0;
}
.fmd-social-icon:hover { background:#f1f3f4; color:#1a1a1a; border-color:#cfd3d7; }
.fmd-close-btn { width:34px; height:34px; border-radius:50%; border:none; background:#f1f3f4; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; color:#5f6368; }
.fmd-close-btn:hover { background:#e8eaed; color:#202124; }
.fmd-close-btn .material-symbols-rounded { font-size:18px; }

/* ── Body ── */
#firmModalBody { flex:1; overflow:hidden; min-height:0; display:flex; flex-direction:column; }

@media (max-width: 640px) {
  #firmModalBody { overflow-y: auto !important; -webkit-overflow-scrolling: touch; display:block; }
}

.fmd-body-inner {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-template-rows: 220px minmax(0, 1fr);
}

/* Resim: sol üst — SABİT */
.fmd-carousel {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  background: #f1f3f4;
  overflow: hidden;
}
.fmd-no-image {
  grid-column: 1;
  grid-row: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; color: #bdc1c6; font-size:13px; background:#f8f9fa;
}
.fmd-no-image .material-symbols-rounded { font-size:36px; }

.fmd-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.35s ease; overflow:hidden; }
.fmd-slide.active { opacity:1; }
.fmd-slide img { width:100%; height:100%; object-fit:cover; display:block; }

/* Blur backdrop katmani: NORMAL (buyuk) gorsellerde HIC cizilmez -> davranis
   degismez, bosuna paint maliyeti de olmaz. (Specificity: .fmd-slide img
   kuralini ezmesi icin ayni seviyede yazildi.) */
.fmd-slide .fmd-slide-bg { display:none; }

/* KUCUK gorsel (ornegin foto yerine konmus 200x200 logo): gerdirmek yerine
   arkaya blur'lu kopya, one contain ile ortalanmis orijinal. */
.fmd-slide--small .fmd-slide-bg {
  display:block;
  position:absolute; inset:0;
  object-fit:cover;
  filter:blur(24px) saturate(1.25);
  transform:scale(1.15);        /* blur'in kenardaki seffaf halkasini kapatir */
  z-index:0;
}
.fmd-slide--small .fmd-slide-img {
  position:absolute; inset:0;
  object-fit:contain;           /* gerilme yok -> bulanmaz, pikselleşmez */
  padding:14px;
  box-sizing:border-box;
  z-index:1;
}

.fmd-car-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.9); box-shadow:0 1px 4px rgba(0,0,0,0.2);
  cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center;
  z-index:2; color:#202124; transition:background 0.15s;
}
.fmd-car-arrow:hover { background:#fff; }
.fmd-car-prev { left:6px; }
.fmd-car-next { right:6px; }
.fmd-car-dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:4px; z-index:2; }
.fmd-car-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; transition:background 0.2s, transform 0.2s; }
.fmd-car-dot.active { background:#fff; transform:scale(1.3); }

/* Scroll alanı: carousel altında, delivery band + detaylar birlikte kayar */
.fmd-scroll-area {
  grid-column: 1;
  grid-row: 2;
  overflow-y: auto;
  min-height: 0;
}
.fmd-col-left {
  /* artık scroll-area içinde; kendi scroll'u yok */
}
.fmd-details {
  padding: 12px 16px 14px 16px;
  display: flex; flex-direction: column; gap: 11px;
}

/* Harita: sağ, tam yükseklik — SABİT (carousel + scroll-area boyunca) */
.fmd-col-right {
  grid-column: 2;
  grid-row: 1 / 3;
  padding: 14px 16px 14px 8px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
}
#firmMiniMap {
  flex: 1; min-height: 0;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.fmd-dir-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px; background: #1a73e8; color: #fff;
  border-radius: 10px; font-size: 13px; font-weight: 600;
  text-decoration: none; flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
}
.fmd-dir-btn:hover { background:#1557b0; transform:translateY(-1px); }
.fmd-dir-btn .material-symbols-rounded { font-size:17px; }

.fmd-cuisines { display:flex; flex-wrap:nowrap; gap:6px; overflow:hidden; align-items:center; }
.fmd-cuisines.expanded { flex-wrap:wrap; overflow:visible; }
.fmd-cuisine-tag { font-size:11px; font-weight:500; padding:4px 10px; border-radius:20px; background:#fce8e6; color:#c5221f; text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; flex-shrink:0; }
.fmd-cuisines.expanded .fmd-cuisine-tag { max-width:none; }
.fmd-cuisine-more { font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; background:#f1f3f4; color:#5f6368; white-space:nowrap; flex-shrink:0; cursor:pointer; user-select:none; transition:background 0.15s; }
.fmd-cuisine-more:hover { background:#e4e7e9; }
/* Öne çıkan (özel) feature pill — açık mavi zemin + mavi kenarlık + kalın yazı, ikonsuz */
.fmd-cuisine-tag.fmd-feat-highlight { background:#e6f1fb; color:#0c447c; border:1px solid #378add; font-weight:600; padding:3px 9px; }
/* Sıradan feature'lar — ince gri nokta-ayraçlı metin şeridi */
.fmd-feature-strip { font-size:12px; color:#5f6368; line-height:1.5; margin-top:2px; }
.fmd-feat-dot { margin:0 6px; color:#b4b2a9; }


.fmd-features { display:flex; flex-wrap:wrap; gap:7px; }
.fmd-feature-pill { display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:20px; background:#e8f0fe; color:#1a73e8; font-size:11px; font-weight:500; text-transform:capitalize; }
.fmd-feature-pill .material-symbols-rounded { font-size:13px; }

.fmd-address-row { display:flex; align-items:flex-start; gap:6px; font-size:12px; color:#5f6368; line-height:1.5; }
.fmd-address-row .material-symbols-rounded { font-size:15px; color:#9aa0a6; flex-shrink:0; margin-top:1px; }

.fmd-hours-wrap { border:1px solid #e8eaed; border-radius:10px; overflow:hidden; }
.fmd-hours-toggle { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; user-select:none; background:#fff; transition:background 0.12s; }
.fmd-hours-toggle:hover { background:#f8f9fa; }
.fmd-hours-toggle .material-symbols-rounded:first-child { font-size:15px; color:#5f6368; }
.fmd-hours-today { flex:1; font-size:12px; font-weight:500; }
.fmd-hours-today.open       { color:#137333; }
.fmd-hours-today.closed-now { color:#c5221f; }
.fmd-hours-chevron { font-size:18px; color:#9aa0a6; transition:transform 0.22s; }
.fmd-hours-wrap.open .fmd-hours-chevron { transform:rotate(180deg); }
.fmd-hours-list { max-height:0; overflow:hidden; transition:max-height 0.28s ease; background:#fafafa; border-top:0px solid #e8eaed; }
.fmd-hours-wrap.open .fmd-hours-list { max-height:1000px; border-top-width:1px; }
.fmd-hour-row { display:flex; justify-content:space-between; padding:7px 14px; font-size:12px; color:#5f6368; border-bottom:1px solid #f0f0f0; }
.fmd-hour-row:last-child { border-bottom:none; }
.fmd-hour-row.today { background:#e8f5e9; position:sticky; top:0; z-index:1; }
.fmd-hour-row.today .fmd-hour-day,
.fmd-hour-row.today .fmd-hour-val { color:#137333; font-weight:600; }

/* ── Logo yoksa: initials avatar (her yerde ortak) ── */
.firm-avatar {
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; text-transform:uppercase;
  letter-spacing:0.5px; line-height:1; flex-shrink:0;
}
.fmd-header-logo.firm-avatar { width:46px; height:46px; border-radius:50%; font-size:17px; border:2px solid #e8eaed; }
.firm-map-pin-logo.firm-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  display: flex !important;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0; margin: 0;
  box-sizing: border-box;
}
.firm-logo.firm-avatar { font-size:13px; border-radius:6px; }

/* ── Delivery bandı (carousel altı, tam genişlik) ── */
.fmd-delivery-band {
  display:flex; align-items:center; gap:11px;
  padding:10px 16px;
  border-bottom:1px solid #eceff1;
  background:#fff;
}
/* Sol etiket bloğu: motor ikonu + minik "DELIVERY" yazısı, dikey.
   Nötr gri — vurgu delivery logolarında kalsın diye sönük tutulur. */
.fmd-delivery-tag {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  flex-shrink:0;
}
.fmd-delivery-tag-icon {
  font-size:20px !important; color:#5f6368; line-height:1;
}
.fmd-delivery-tag-label {
  font-size:9px; color:#9aa0a6; font-weight:600;
  letter-spacing:0.6px; line-height:1;
}
/* Etiketi logolardan ayıran ince dikey çizgi (başlık hissi verir). */
.fmd-delivery-divider {
  width:1px; align-self:stretch; background:#e6e8eb;
  margin:2px 0; flex-shrink:0;
}
.fmd-delivery-badges { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fmd-delivery-badge {
  width:38px; height:38px; border-radius:50%;
  border:1px solid #e0e0e0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#fff; transition:transform 0.15s, box-shadow 0.15s;
  flex-shrink:0; text-decoration:none;
}
.fmd-delivery-badge:hover { transform:scale(1.08); box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.fmd-delivery-badge img { width:100%; height:100%; object-fit:cover; display:block; }
.fmd-delivery-fallback {
  width:100%; height:100%;
  align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:600; text-transform:uppercase;
}
.fmd-hour-day { font-weight:500; width:82px; }
.fmd-hour-val.closed { color:#c5221f; }

/* Loading */
.firm-modal-loading { display:flex; align-items:center; justify-content:center; min-height:320px; width:100%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Mobil ── */
@media (max-width: 640px) {
  #firmModal.modal-overlay {
    padding: 16px;
    align-items: center;
    justify-content: center;
  }

  .firm-detail-modal {
    width: calc(100vw - 32px) !important;
    max-width: 520px !important;
    height: 90dvh !important;
    max-height: 90dvh !important;
    border-radius: 14px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .fmd-header { flex-shrink: 0; }

  .fmd-body-inner {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }

  .fmd-carousel { width:100%; height:200px; flex-shrink:0; }
  .fmd-no-image { width:100%; height:140px; flex-shrink:0; }

  .fmd-col-left { overflow-y: visible; }
  .fmd-scroll-area { overflow: visible !important; }

  .fmd-col-right {
    width: 100%;
    flex-shrink: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 240px;
  }

  #firmMiniMap {
    flex: 1;
    min-height: 0;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
    position: static;
  }

  .fmd-dir-btn {
    position: static;
    border-radius: 10px;
    padding: 9px;
    font-size: 12px;
    flex-shrink: 0;
  }
}

/* ════════════════════════════════════════════════════════
   Contact Modal
   ════════════════════════════════════════════════════════ */

.navbar-user-wrap {
  position: relative;
  flex-shrink: 0;
}
.navbar-user-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #aecbfa;
  background: #e8f0fe;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  color: #1a73e8;
}
.navbar-user-btn:hover {
  border-color: #1a73e8;
  color: #1a73e8;
  background: #e8f0fe;
}
.navbar-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
  min-width: 190px;
  padding: 6px 0;
  z-index: 500;
  animation: userDropIn 0.15s ease;
}
.navbar-user-dropdown.open { display: block; }
@keyframes userDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.navbar-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #3c4043;
  text-decoration: none;
  transition: background 0.1s;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
}
.navbar-user-item:hover { background: #f1f3f4; }
.navbar-user-item .material-symbols-rounded { font-size: 18px; color: #5f6368; }
.navbar-user-divider {
  height: 1px;
  background: #e8eaed;
  margin: 4px 12px;
}

/* ── AI MODAL ── */
/* Genişletildi (480→620) ve uzatıldı: search bloğu dikeyde ortalanır,
   boşluk hissi dağılır. Bar yüksekliği DEĞİŞMEDİ, sadece genişledi. */
.ai-modal { max-width: 614px; height: auto !important; position: relative; overflow: hidden !important; border-radius: 8px; }

/* Lokasyon banner — modal body içinde, describe'ın yerinde */
.ai-loc-banner {
  display: none;
  background: #e8f0fe;
  border: 1px solid #c5d8fb;
  border-radius: 10px;
  padding: 12px 16px;
  align-items: center;
  gap: 10px;
  animation: aiBannerIn 0.22s ease;
}
@keyframes aiBannerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-loc-banner.visible { display: flex; }
.ai-loc-banner-icon { font-size: 16px; flex-shrink: 0; }
.ai-loc-banner-text { font-size: 13px; font-weight: 500; color: #1a73e8; flex: 1; }
.ai-loc-banner-btn {
  padding: 6px 14px; border-radius: 20px;
  background: #1a73e8;
  border: none;
  color: #fff;
  font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.ai-loc-banner-btn:hover { background: #1557b0; }

/* describe metni — lokasyon seçilince gösterilir */
#aiModalDesc { display: none; }
#aiModalDesc.visible { display: block; }

/* Blur wrapper — textarea + chips */
.ai-modal-lock {
  display: contents;
}
.ai-modal-lock.visible {
  display: block;
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
  /* Lokasyonsuz (kilitli) durumda da search bloğu dikeyde ortalansın */
  margin-top: auto;
  margin-bottom: auto;
}
.ai-modal-body {
  display: flex; flex-direction: column;
  padding: 24px 26px 10px; gap: 14px; overflow-y: auto;
  min-height: 320px;
  /* İçerik ÜSTTEN akar: banner/desc/chip'ler yukarıda.
     Sadece search bar kalan boşluğun ortasına oturur (aşağıdaki auto margin). */
}
.ai-modal-desc {
  font-size: 13px; color: #5f6368; line-height: 1.5; margin: 0;
}

/* Budget pas notu — ana metnin yanında, küçük */
.ai-modal-desc-hint { font-size: 12px; color: #80868b; }

/* Lokasyon + budget özeti — chip'ler, sola yaslı */
.ai-modal-summary {
  display: none; align-items: center; justify-content: flex-start; gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 2px; padding: 6px 0;
  align-content: flex-start;
}
.ai-modal-summary.visible { display: flex; }

/* Filtre chip'leri: ZEMIN NOTR (lokasyon/butce chip'leriyle ayni dil),
   renk SADECE IKONDA. Boylece tutarli kalir, cumbus olmaz. */
.ai-summary-filters { display: contents; }
.ai-modal-chip-filter {
  background: #f1f3f4; border-color: #dadce0; color: #202124;
}
.ai-modal-chip-filter .ai-modal-chip-icon { font-size: 14px; }

.ai-modal-chip-filter[data-filter="Cuisines"]     .ai-modal-chip-icon { color: #1a73e8; }
.ai-modal-chip-filter[data-filter="Calories"]     .ai-modal-chip-icon { color: #d93025; }
.ai-modal-chip-filter[data-filter="Lifestyle"]    .ai-modal-chip-icon { color: #1e8e3e; }
.ai-modal-chip-filter[data-filter="Availability"] .ai-modal-chip-icon { color: #5a9216; }
.ai-modal-chip-filter[data-filter="Venues"]       .ai-modal-chip-icon { color: #e8710a; }
.ai-modal-chip-filter[data-filter="Smart Picks"]  .ai-modal-chip-icon { color: #8430ce; }
.ai-modal-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 3px 10px;
  font-size: 12px; line-height: 1.3;
  border: 1px solid transparent;
}
.ai-modal-chip-icon { font-size: 15px !important; line-height: 1; flex-shrink: 0; }
/* İkisi de aynı sakin gri; ayrım renkli ikonla yapılıyor. */
.ai-modal-chip-loc {
  background: #f1f3f4; border-color: #e3e6e8; color: #3c4043;
}
.ai-modal-chip-loc .ai-modal-chip-icon { color: #ea4335; }   /* pin kırmızı */
.ai-modal-chip-budget {
  background: #f1f3f4; border-color: #e3e6e8; color: #3c4043;
}
.ai-modal-chip-budget .ai-modal-chip-icon { color: #1e8e3e; } /* bütçe yeşil */

/* Mobil: özet chip'leri alta sarmak yerine TEK ŞERİT yatay kaydırılır.
   Chip sayısı artınca modal şişmez; parmakla yana kaydırılır. */
@media (max-width: 768px) {
  .ai-modal-summary.visible {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ai-modal-summary::-webkit-scrollbar { display: none; }
  .ai-modal-summary .ai-modal-chip { flex: 0 0 auto; white-space: nowrap; }
}

/* status = none / clarify uyarısı (search bar altı, nötr/sarı, sola yaslı) */
.ai-modal-status {
  display: none; align-items: center; justify-content: flex-start; gap: 8px;
  font-size: 12.5px; color: #8a6d00; line-height: 1.4;
  background: #fef7e0; border: 1px solid #fde293; border-radius: 8px;
  padding: 8px 10px; margin-top: 10px;
}
.ai-modal-status.visible { display: flex; }
.ai-modal-status-icon { font-size: 14px; flex-shrink: 0; }

/* Ayni kutunun NOTR varyanti: "biraz uzun suruyor" bir HATA degil.
   Sari/uyari dili burada yanlis alarm verirdi -> mavi/bilgi tonu. */
.ai-modal-status.is-info {
  color: #1557b0;
  background: #e8f0fe;
  border-color: #d2e3fc;
}
.ai-modal-status.is-info .ai-modal-status-icon { color: #1a73e8; }
/* Saat ikonu Material Symbols; 14px'te satirla hizalansin diye
   font-size ve optik boyut ayrica veriliyor. */
.ai-modal-status-icon.material-symbols-rounded {
  font-size: 16px;
  font-variation-settings: 'opsz' 20, 'wght' 400;
  line-height: 1;
}

/* Arama surerken input soluklasir: disabled tek basina yeterince
   belirgin degil (tarayiciya gore metin rengi neredeyse ayni kaliyor). */
.ai-search-bar.is-loading {
  pointer-events: none;
  transition: none;
  animation: aiBarBreathe 1.8s ease-in-out infinite;
}
/* Metin soluk, CERCEVE degil: hareket cercevede olsun ki "olu ekran"
   hissi olmasin. */
.ai-search-bar.is-loading .ai-modal-textarea,
.ai-search-bar.is-loading .ai-search-icon {
  opacity: .5;
  transition: opacity .18s ease;
}
/* Glow'un tepesi focus-within ile BIREBIR AYNI deger; %35-%65 arasi
   tepede TUTULUYOR ki goz yakalasin (tek anlik zirve fark edilmiyordu). */
@keyframes aiBarBreathe {
  0%        { box-shadow: 0 1px 3px rgba(60,64,67,0.12); }
  35%, 65%  { box-shadow: 0 0 0 4px rgba(26,115,232,0.16),
                          0 3px 24px rgba(123,77,255,0.38); }
  100%      { box-shadow: 0 1px 3px rgba(60,64,67,0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-search-bar.is-loading { animation: none; }
}

/* Disclaimer — footer çizgisinin ÜSTÜnde, sola yaslı, başında ✦ */
.ai-modal-disclaimer-wrap { padding: 0 20px 10px; }
.ai-modal-disclaimer {
  font-size: 11px; color: #80868b; text-align: left;
  line-height: 1.5; margin: 0;
  display: flex; align-items: flex-start; gap: 5px;
}
.ai-modal-disclaimer-star { color: #1a73e8; flex: none; }
.ai-modal-disclaimer-text { flex: 1; }

/* ── AI kullanilamaz uyari modali (A tipi) ── */
.ai-notice-modal {
  height: auto !important;
  max-width: 420px;
  padding: 28px 26px 20px;
  text-align: center;
}
.ai-notice-body {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* Yildiz TEK BASINA bosta duruyordu (sus gibi). Acik mavi bir dairenin
   icine alinca ikon agirligi kazaniyor; ✦ korundugu icin AI kimligi
   (pill, disclaimer, buton) bozulmuyor. */
.ai-notice-star {
  color: #1a73e8; font-size: 24px; line-height: 1;
  width: 52px; height: 52px; border-radius: 50%;
  background: #e8f0fe;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-notice-text {
  margin: 0; font-size: 14.5px; line-height: 1.55; color: #3c4043;
}
.ai-notice-line1, .ai-notice-line2 { display: block; }
.ai-notice-line2 { margin-top: 4px; }
.ai-notice-footer {
  margin-top: 20px; display: flex; justify-content: center;
}
.ai-notice-btn {
  border: none; cursor: pointer;
  background: #1a73e8; color: #fff;
  font-size: 14px; font-weight: 500;
  padding: 9px 26px; border-radius: 999px;
  transition: background .15s ease;
}
.ai-notice-btn:hover { background: #1765cc; }
.ai-modal-disclaimer-beta { font-style: italic; }
.ai-modal-footer { justify-content: flex-end; }
.ai-modal-textarea {
  flex: 1;
  border: none; outline: none;
  padding: 0; margin: 0;
  font-family: 'Roboto', sans-serif; font-size: 14px;
  color: #202124; line-height: 1.5;
  background: transparent;
  resize: none;
  min-height: 22px;
  max-height: 180px;
  overflow-y: auto;
}
.ai-modal-textarea::placeholder { color: #80868b; opacity: 1; }
.ai-modal-charcount { text-align: right; font-size: 11px; color: #9aa0a6; padding: 3px 6px 0; min-height: 15px; margin-bottom: auto; }
.ai-modal-charcount.cc-warn { color: #ef6c00; font-weight: 600; }
.ai-modal-charcount.cc-danger { color: #d93025; font-weight: 700; }

/* Search-bar wrapper — dekoratif 🔍 ikon + textarea (sağda buton yok).
   AI hissi: mavi→mor gradient çerçeve; focus'ta yumuşak dış ışıma.
   Yükseklik (padding) bilinçli olarak DEĞİŞMEDİ. */
.ai-search-bar {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  border: 1.5px solid transparent; border-radius: 24px;
  padding: 12px 18px;
  margin-top: auto;            /* chip'lerle alt kısım arasındaki boşluğun ortasına */
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(120deg, #1a73e8, #7B4DFF 55%, #3DD4FF) border-box;
  box-shadow: 0 1px 3px rgba(60,64,67,0.12);
  transition: box-shadow 0.25s;
}
/* Glow SADECE kullanıcı bara tıklayınca (focus). Gradient çerçeve
   her zaman durur — o AI kimliği; ışıma etkileşim sinyali. */
.ai-search-bar:focus-within {
  box-shadow: 0 0 0 4px rgba(26,115,232,0.16),
              0 3px 24px rgba(123,77,255,0.38);
}
.ai-search-icon {
  color: #5f6368;
  font-size: 19px !important;
  cursor: default;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}

/* "AI may misinterpret" hint */
.ai-modal-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #80868b; margin-top: 10px; padding-left: 4px;
}

/* Modal — 640 genişlik (tek yetkili kural; !important eski 540 kapağının yerine) */
.ai-modal {
  max-width: 614px !important;
  height: auto !important;
  min-height: 420px;
}

/* Başlık: navbar Ask AI butonunun birebir kopyası — tıklanamaz, dekoratif */
.ai-modal-title-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6b6cff 0%, #9b72cb 100%);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.ai-pill-star {
  font-size: 13px;
  color: #fff;
}
.ai-pill-text {
  color: #fff;
}
.ai-pill-beta {
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  margin-left: 2px;
}
.ai-modal-chips-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; color: #9aa0a6;
}
.ai-modal-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ai-chip {
  padding: 5px 12px; border: 1px solid #dadce0; border-radius: 16px;
  background: white; font-family: 'Roboto', sans-serif; font-size: 12px;
  color: #3c4043; cursor: pointer; transition: all 0.15s;
}
.ai-chip:hover { border-color: #1a73e8; color: #1a73e8; background: #e8f0fe; }
.ai-chip.selected { border-color: #1a73e8; color: #1a73e8; background: #e8f0fe; font-weight: 500; }
.ai-modal-error {
  font-size: 12px; color: #ea4335; min-height: 16px;
}
.ai-modal-go-btn { position: relative; min-width: 140px; }
.ai-modal-go-btn:hover { }
.ai-modal-go-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ai-modal-go-btn.loading, .ai-modal-go-btn.loading:disabled,
.btn-primary.ai-modal-go-btn.loading:disabled { opacity: 1; cursor: progress; }
.ai-modal-go-btn.loading .ai-go-text { visibility: hidden; }
.ai-go-loading { display: none; }
.ai-modal-go-btn.loading .ai-go-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; font-weight: 600; letter-spacing: 0.3px;
}
.ai-go-shim {
  background: linear-gradient(90deg, #3c4043 0%, #3c4043 38%, #000000 50%, #3c4043 62%, #3c4043 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: aiGoShim 1.8s linear infinite;
}
@keyframes aiGoShim { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.ai-go-dia {
  font-size: 14px; display: inline-block;
  background: linear-gradient(135deg, #4dabf7, #9775fa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ai-go-dots { display: inline-flex; align-items: flex-end; gap: 3px; height: 1em; }
.ai-go-dots i {
  width: 4px; height: 4px; border-radius: 50%; background: #5f6368;
  display: inline-block; animation: aiGoBounce 1.2s ease-in-out infinite;
}
.ai-go-dots i:nth-child(2) { animation-delay: 0.18s; }
.ai-go-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes aiGoBounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.45; }
  40%           { transform: translateY(-4px); opacity: 1;    }
}
@media (prefers-reduced-motion: reduce) {
  .ai-go-shim { animation: none; -webkit-text-fill-color: #202124; color: #202124; }
  .ai-go-dia  { animation: none; }
  .ai-go-dots i { animation: none; opacity: 0.7; }
}
@media (max-width: 768px) {
  .navbar-search { display: none; }
}

/* Dar ekranda ad+email alt alta + alt e-posta satiri rahat sigsin */
@media (max-width: 480px) {
  .contact-row { flex-direction: column; gap: 10px; }
  .contact-modal-body { padding: 20px 18px; }
  .contact-alt-email { font-size: 12px; }
}

.contact-modal {
  max-width: 560px !important;
  width: 95% !important;
  height: auto !important;
  max-height: 90vh !important;
  overflow: auto !important;
}
.contact-modal .modal-body {
  flex: none !important;
  overflow: visible !important;
  display: block !important;
}

.contact-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.contact-title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #4dabf7;
  border-radius: 8px;
  margin-right: 6px;
  vertical-align: middle;
}
.contact-title-badge .material-symbols-rounded {
  font-size: 17px;
  color: #fff;
}

.contact-linkedin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: box-shadow .15s, background .15s;
  text-decoration: none;
  flex-shrink: 0;
  background: #fff;
}
.contact-linkedin-btn:hover {
  background: #0a66c2;
  box-shadow: 0 4px 12px rgba(10,102,194,0.35);
}
.contact-linkedin-btn:hover svg path { fill: #fff; }

.contact-modal-body {
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  overflow-y: auto;
  max-height: 70vh;
}

.contact-modal-desc {
  font-size: 13px;
  color: #888;
  margin: 0 0 22px;
  text-align: left;
  line-height: 1.6;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-row {
  display: flex;
  gap: 12px;
}

.contact-input {
  width: 100%;
  padding: 11px 16px;
  border: 1.5px solid #dadce0;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
  font-family: inherit;
  color: #202124;
  background: #fafafa;
}
.contact-input:focus { border-color: #1a73e8; background: #fff; }

.contact-textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-footer-row {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* Send'in altinda, soluk alternatif e-posta satiri (mobilde de okunur) */
.contact-alt-email {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-top: 14px;
}
.contact-alt-email a {
  color: #1a73e8;
  text-decoration: none;
  word-break: break-all;
}
.contact-alt-email a:hover { text-decoration: underline; }

.contact-send-btn {
  padding: 11px 40px;
  font-size: 14px;
  border-radius: 24px;
  background: #1a73e8 !important;
  color: white !important;
  border: none !important;
}
.contact-send-btn:hover { background: #1557b0 !important; }
.contact-send-btn:active { transform: scale(0.96); box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important; }

/* Basari durumu: ✅ emoji + yesil yazi yerine, sitenin diliyle uyumlu
   ortalanmis ikon + baslik + alt metin. Emoji platformdan platforma degisiyordu. */
.contact-success {
  display: none;                 /* JS 'flex' yapinca acilir */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px 52px;
  min-height: 260px;             /* form kadar yer kaplasin ki modal ziplamasin */
}
.contact-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e8f0fe;           /* contact-title-badge ile ayni dil */
  color: #1a73e8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.contact-success-icon i { font-size: 28px; line-height: 1; }
.contact-success-title {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #202124;
  margin-bottom: 6px;
}
.contact-success-sub {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 320px;
}

/* ── AI Picked indicator ──────────────────────────────────────────────── */
.ai-picked-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  letter-spacing: 0.3px;
  animation: aiPickedIn 0.3s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.ai-picked-tag::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 30%;
  height: 200%;
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(25deg);
  animation: aiPickedShimmer 4s 0.4s infinite;
}
@keyframes aiPickedShimmer {
  0%   { left: -80%; }
  25%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes aiPickedIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Currency select inline (Budget trigger satırında) ─────────────── */
.currency-select-inline {
  margin-left: auto;
  margin-right: 8px;
  background: transparent;
  border: 1px solid #dadce0;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: 'DM Sans', 'Roboto', sans-serif;
  font-weight: 500;
  color: #5f6368;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235f6368'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 16px;
}
.currency-select-inline:focus {
  outline: none;
  border-color: #1a73e8;
}
.currency-symbol-display {
  margin-left: auto;
  margin-right: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #1a73e8;
  background: #e8f0fe;
  border: 1px solid #c5d8fb;
  border-radius: 12px;
  padding: 2px 8px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.currency-symbol-display:empty { display: none; }

/* ── Location warning pulse ────────────────────────────────────────── */
.loc-pick-btn.loc-warning {
  animation: locPulse 0.8s ease 3;
  border-color: #ea4335 !important;
  box-shadow: 0 0 0 3px rgba(234,67,53,0.15);
}
@keyframes locPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* ── Search Mode warning — lokasyon uyarısıyla aynı dil ─────────────
   AI picked aktifken sol Get Matches butonuna basılırsa: mod kutusu
   kesikli turuncu çerçeve + pulse, ipucu yazısı aynı turuncuya döner.
   Bir moda dokunulunca (setMode) temizlenir. */
.mode-tabs.mode-warning {
  animation: locPulse 0.8s ease 3;
  border: 1.5px dashed #ea4335 !important;
  background: rgba(234,67,53,0.05);
  box-shadow: 0 0 0 3px rgba(234,67,53,0.15);
}
.mode-ai-hint.mode-warning-text,
.mode-ai-hint.mode-warning-text .mode-ai-hint-icon { color: #ea4335; }

/* ── Location warn badge (Search Mode'daki AI picked benzeri) ── */
.loc-warn-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(217,119,6,0.35);
}

/* ── Navbar back button (mobil: görünür, desktop: gizli) ───────────── */
.navbar-back-btn {
  display: none;
  align-items: center;
  gap: 4px;
  background: #e6f1fb;
  color: #0c447c;
  border: 0.5px solid #b5d4f4;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'DM Sans', 'Roboto', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.navbar-back-btn:hover { background: #d6e6f7; }
.navbar-back-btn.visible { display: inline-flex; }

/* ── Mobil navbar sadeleştirme (yer açmak için) ── */
@media (max-width: 768px) {
  /* Back button: sadece ok göster, metni gizle */
  .navbar-back-btn .nb-label { display: none; }
  .navbar-back-btn .nb-arrow { font-size: 16px; line-height: 1; }
  .navbar-back-btn { padding: 4px 9px; }

  /* Ask AI → "✦ AI": "Ask" ve "Beta" gizli */
  .navbar-ai-ask,
  .navbar-ai-beta { display: none !important; }

  /* Sağdaki Contact/kişi menüsü mobilde gizli (footer'da Contact var) */
  .navbar-user-wrap { display: none !important; }
}

/* ── Map floating back button (desktop) ────────────────────────────── */

.map-back-btn {
  display: none;
  position: absolute;
  bottom: 20px;
  right: 60px;
  top: auto;
  left: auto;
  z-index: 450;
  background: white;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', 'Roboto', sans-serif;
  color: #1a73e8;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: all 0.2s;
  border: 1px solid #1a73e8;
}
.map-back-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.map-back-btn.visible { display: block; }

/* Mobil: map back gizli */
@media (max-width: 768px) {
  .map-back-btn.visible { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   LOCATION MODE TOGGLE — in modal header
   ═══════════════════════════════════════════════════════════════════ */

.location-modal-footer-wrap {
  flex-shrink: 0;
  border-top: 1px solid #e8eaed;
}
.loc-mode-toggle {
  display: none;
  background: #f1f3f4;
  border: none;
  border-radius: 20px;
  padding: 3px;
  gap: 0;
  align-self: stretch;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.loc-mode-toggle.visible { display: flex; }
/* Indicator: CSS transform-driven. Width = one third of the inner track;
   position set purely via translateX(0 / 100% / 200%) — no JS measuring. */
.loc-mode-indicator {
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 18px;
  background: #fff;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1);
  transform: translateX(0);
  pointer-events: none;
  z-index: 0;
}
.loc-mode-indicator[data-pos="1"] { transform: translateX(100%); }
.loc-mode-indicator[data-pos="2"] { transform: translateX(200%); }
.loc-mode-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 18px;
  font-family: 'DM Sans', 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #9aa0a6;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.loc-mode-tab-emoji { font-size: 13px; line-height: 1; }
.loc-mode-tab-emoji.material-symbols-rounded { font-size: 17px; line-height: 1; }
.loc-mode-tab-label { line-height: 1; }
.loc-mode-tab:hover { color: #5f6368; }
.loc-mode-tab.active {
  background: transparent;
  color: #1a73e8;
  border: none;
  box-shadow: none;
}


/* Hotspot body — 40% sidebar + 60% map */
.loc-hotspot-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.loc-hotspot-body .loc-pin-sidebar { width: 40%; flex-shrink: 0; }
.loc-hotspot-body .loc-pin-map-wrap { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════
   PIN MAP BODY — 1/3 sidebar + 2/3 map
   ═══════════════════════════════════════════════════════════════════ */

.loc-pin-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left sidebar — controls */
.loc-pin-sidebar {
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  border-right: 1px solid #e8eaed;
  background: #fafbfc;
}

.loc-pin-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loc-pin-district {
  font-size: 13px;
  font-weight: 600;
  color: #202124;
  font-family: 'DM Sans', 'Roboto', sans-serif;
}

.loc-pin-hint {
  font-size: 11.5px;
  color: #5f6368;
  line-height: 1.5;
  margin: 0;
}

/* Slider */
.loc-pin-slider-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.loc-pin-slider-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #5f6368;
  font-family: 'DM Sans', 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}

.loc-pin-slider-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.loc-pin-distance-val {
  font-weight: 700;
  color: #1a73e8;
  text-transform: none;
  letter-spacing: 0;
}

.loc-pin-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #1a73e8 0%, #d2e3fc 100%);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.loc-pin-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #1a73e8;
  border: 3px solid white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(26,115,232,0.4);
  transition: transform 0.15s;
}
.loc-pin-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.loc-pin-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #1a73e8;
  border: 3px solid white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(26,115,232,0.4);
}

/* Clear Pin — positioned on map */
.loc-pin-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #d4536e;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'DM Sans', 'Roboto', sans-serif;
  white-space: nowrap;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  box-shadow: 0 2px 8px rgba(212,83,110,0.35);
}
.loc-pin-clear .pin-clear-x {
  color: #7a1a2e;
  font-weight: 700;
}
.loc-pin-clear:hover {
  background: #b8445c;
  box-shadow: 0 4px 12px rgba(212,83,110,0.45);
}

/* Right side — map */
.loc-pin-map-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

.loc-pin-map {
  width: 100%;
  height: 100%;
  background: #e8eaed;
}

/* ── Custom pin marker (drop style) ── */
.pin-map-marker {
  background: none !important;
  border: none !important;
}
.pin-drop-shadow {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 4px;
  background: rgba(0,0,0,0.18);
  border-radius: 50%;
  filter: blur(1px);
}
.pin-drop-body {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
  border: 3px solid white;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  left: 2px;
  box-shadow: 0 2px 8px rgba(26,115,232,0.45), 0 0 14px rgba(26,115,232,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: userPinPulse 1.8s ease-in-out infinite;
}
@keyframes userPinPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(26,115,232,0.45), 0 0 14px rgba(26,115,232,0.45); }
  50%      { box-shadow: 0 2px 10px rgba(26,115,232,0.55), 0 0 24px rgba(26,115,232,0.75); }
}
.pin-drop-inner {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  transform: rotate(45deg);
}
.pin-drop-tip {
  display: none;
}

/* ── Location mode desc (sidebar loc-pick button) ── */
.loc-mode-desc {
  font-size: 10px;
  font-weight: 500;
  color: #5f8ee8;
  display: none;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   PIN MAP — MOBILE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .loc-mode-toggle {
    margin-left: 8px;
    margin-right: 8px;
  }
  .loc-mode-tab {
    font-size: 11px;
    padding: 7px 10px;
  }

  /* Footer tek satır: dropdown + Apply (Cancel mobilde gizli — X üstte var) */
  .location-modal-footer {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;  /* dropdown gizliyken Apply sağda kalır */
    gap: 8px;
    position: relative;
    z-index: 1400;   /* slider overlay'inin (z:1000) ÜstÜnde — açılan menü slider'ı örter */
  }
  .location-modal-footer .modal-footer-spacer { display: none; }
  .location-modal-footer .btn-secondary { display: none; }
  /* dropdown %55, Apply %45 — gap dahil. Genel kuraldaki width:120px'i ez (!important şart) */
  .location-modal-footer .loc-mode-dd { flex: 0 0 55% !important; max-width: 55%; width: 55% !important; min-width: 0; }
  .location-modal-footer .loc-mode-dd-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .location-modal-footer .loc-mode-dd-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  /* Apply: %45, sabit 120px DEĞİL */
  .location-modal-footer .btn-primary {
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45%;
    min-width: 0;
  }
  /* ── Pinpoint: harita tam alan, slider harita ÜZERİNE overlay (altta) ── */
  .loc-pin-body {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: visible;
    z-index: 1;          /* footer (z:1400) bunun üstünde kalsın */
  }
  .loc-pin-body .loc-pin-map-wrap {
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
    isolation: isolate;   /* Leaflet pane z-index'lerini bu kutuya hapseder */
    z-index: 0;
  }
  .loc-pin-body .loc-pin-sidebar {
    position: absolute;
    left: 10px; right: 10px; bottom: 16px;
    z-index: 1000;        /* footer (z:1400) ve açılan mod menüsünün ALTINDA kalmalı */
    width: auto;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    padding: 10px 14px;
    gap: 6px;
  }
  /* Pinpoint: açıklama ve district overlay'de değil, header subtitle'da */
  .loc-pin-body .loc-pin-info { display: none; }
  .loc-pin-slider-area { margin-top: 0; }

  /* ── Hotspots: harita tam alan, liste/dropdown harita ÜZERİNE overlay (üstte) ── */
  .loc-hotspot-body {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
  }
  .loc-hotspot-body .loc-pin-map-wrap { flex: 1; min-height: 0; width: 100%; position: relative; isolation: isolate; z-index: 0; }
  .loc-hotspot-body .loc-pin-sidebar {
    position: absolute;
    left: 10px; right: 10px; top: 10px;
    z-index: 1300;
    width: auto !important;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }
  .loc-hotspot-body .loc-pin-info { display: none; }
  /* Hotspot dropdown */
  .hotspot-dd { position: relative; }
  .hotspot-dd-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none; border-radius: 12px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    font-size: 14px; font-weight: 500; color: #5f6368;
    cursor: pointer; text-align: left;
  }
  .hotspot-dd-caret { color: #5f6368; font-size: 12px; flex-shrink: 0; }
  .hotspot-dd-list {
    display: none;
    margin-top: 6px;
    max-height: 40vh; overflow-y: auto;
    background: #fff; border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    padding: 6px;
  }
  .hotspot-dd.open .hotspot-dd-list { display: block; }

  /* Lokasyon modalı mobilde HER ZAMAN full (tüm modlar) */
  #locationModal .location-modal { height: 90dvh !important; max-height: 90dvh !important; }

  /* Mobilde: segment gizli, dropdown görünür */
  .location-modal-footer .loc-mode-toggle { display: none !important; }
  .loc-mode-dd { position: relative; flex-shrink: 0; }
  .loc-mode-dd-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: 1px solid #dadce0; border-radius: 20px;
    background: #fff; font-size: 13px; font-weight: 600; color: #3c4043;
    cursor: pointer; white-space: nowrap;
  }
  .loc-mode-dd-caret { color: #5f6368; font-size: 11px; margin-left: 2px; }
  .loc-mode-dd-menu {
    display: none;
    position: absolute;
    left: 0; bottom: calc(100% + 6px);
    min-width: 170px;
    background: #fff; border: 1px solid #e8eaed; border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.16);
    padding: 6px; z-index: 2500;
  }
  .loc-mode-dd-menu.open { display: block; }
  .loc-mode-dd-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 10px 12px; border: none; background: transparent;
    border-radius: 8px; font-size: 14px; color: #202124; cursor: pointer;
    text-align: left;
  }
  .loc-mode-dd-item:hover { background: #f1f3f4; }
}

/* Location modal header: accommodate toggle */
.location-modal .modal-header {
  gap: 8px;
  align-items: flex-start;   /* başlık bloğu sola/üste yaslı, kapatma butonu sağda */
}
.modal-header-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 1px;                  /* başlık ile district arası çok küçük boşluk */
  min-width: 0;
}
.location-modal .modal-header-title {
  flex-shrink: 0;
}
.location-subtitle {
  display: none;
  font-size: 11.5px;         /* küçük font */
  font-weight: 500;
  color: #5f6368;
  white-space: nowrap;
  max-width: 100%;
  align-items: baseline;
  gap: 6px;
}
/* Pinpoint/Hotspot'ta district seçiliyse görünür */
.location-subtitle.has-district { display: flex; }
.loc-sub-district {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;              /* district uzunsa "…" alır */
}
.loc-sub-district::after { content: " ·"; }
.loc-sub-change {
  flex-shrink: 0;            /* Change asla kesilmez */
  border: none; background: none; padding: 0;
  font: inherit; font-weight: 600;
  color: #1a73e8;            /* mavi link */
  cursor: pointer;
  text-decoration: underline;
}
.loc-sub-change:hover { color: #1558b0; }

/* District modu yonlendirme ipucu ("Choose a district").
   .location-subtitle ile AYNI tipografi -> baslik altinda tek bir satir
   varmis gibi durur. JS yalnizca "district listesi dolu + secim yok"
   durumunda .is-visible ekler. Ikisi ayni anda gorunmez: subtitle
   pinpoint/hotspot moduna, bu district moduna aittir.

   LAYOUT KAYMASI YOK: yuksekligi HEADER'a sabitliyoruz. Onemli ayrinti:
   .location-modal .modal-header'da align-items:flex-start var -> kapatma
   butonu (32px) header'i GERMEZ, ustte yapisir. Bu yuzden header yuksekligini
   yalnizca titlewrap belirler ve ipucu gelince header (dolayisiyla alttaki
   border-bottom cizgisi) asagi kayardi. Cozum: titlewrap'e DEGIL header'in
   icerik kutusuna min-height verip yigini icine oturtmak.
   32px = kapatma butonu yuksekligi (zaten gorsel referans).
   Baslik flex-start ile USTTE sabit kalir; ipucu altindaki bos alani doldurur
   -> ne baslik, ne cizgi, ne sutunlar oynar.
   line-height:1 -> 19.2 + 1 + 11.5 = 31.7 < 32. */
.location-modal .modal-header {
  min-height: 32px;            /* icerik kutusu sabit -> border-bottom sabit */
  box-sizing: content-box;     /* padding haric; 32 net icerik yuksekligi */
}
.location-modal .modal-header-titlewrap {
  justify-content: flex-start; /* baslik USTTE sabit; asla ortalanmaz */
}
/* Baslik satir yuksekligini SABITLIYORUZ: line-height "normal" birakilirsa
   deger fonta/tarayiciya gore ~1.15-1.25 arasi degisir ve yigin 32px'i
   asabilir. 19px + 1 gap + 11.5 ipucu = 31.5 < 32 -> her ortamda sigar. */
.location-modal .modal-header-title { line-height: 19px; }
.location-hint {
  display: none;
  font-size: 11.5px;
  line-height: 1;            /* mevcut bosluga sigmasi icin sikistirildi */
  font-weight: 500;
  color: #5f6368;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.location-hint.is-visible { display: block; }
/* Pinpoint/Hotspot'ta baslik altini locationSubtitle ("<district> · Change")
   kullanir; ipucu o modlarda hicbir kosulda cikmaz. */
.location-modal.pinpoint-active .location-hint,
.location-modal.hotspot-active  .location-hint { display: none; }

.leaflet-top.leaflet-left {
  top: auto !important;
  bottom: 20px !important;
  right: 12px !important;
  left: auto !important;
}
/* Pinpoint'te Clear Pin sağ-üstte kalır; zoom (+/−) sol-üste alınır ki çakışmasın */
.loc-pin-body .leaflet-top.leaflet-left {
  top: 12px !important;
  bottom: auto !important;
  left: 12px !important;
  right: auto !important;
}
/* ═══════════════════════════════════════════════════════════
   RUN BUTTON LOADING STATE
   ═══════════════════════════════════════════════════════════ */
.run-btn .run-loading-text { display: none; }
.run-btn.loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.95;
}
.run-btn.loading .run-text {
  visibility: hidden;
}
.run-btn.loading .run-loading-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.run-btn.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -54px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: runBtnSpin 0.7s linear infinite;
  z-index: 2;
}
@keyframes runBtnSpin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   SKELETON LOADER
   ═══════════════════════════════════════════════════════════ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #e8eef3;
  border-radius: 6px;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.6) 50%,
    transparent 100%
  );
  animation: skeletonShimmer 1.4s linear infinite;
}
@keyframes skeletonShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Tab nav skeleton (üst şerit) ── */
.skel-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
}
.skel-tab {
  height: 28px;
  width: 80px;
  border-radius: 14px;
}

/* ── Map skeleton (sağ panel) ── */
.skel-map {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skel-map-icon {
  font-size: 42px;
  color: #b8c4d0;
  animation: skelMapPulse 1.5s ease-in-out infinite;
  z-index: 2;
}
@keyframes skelMapPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}

/* ── Firma card skeleton (sol panel) ── */
.skel-firm-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin: 10px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.skel-firm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.skel-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skel-firm-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skel-line {
  height: 10px;
  border-radius: 5px;
}
.skel-line.short  { width: 40%; }
.skel-line.medium { width: 65%; }
.skel-line.long   { width: 85%; }
.skel-subtotal {
  width: 50px;
  height: 14px;
  border-radius: 4px;
}
.skel-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e5eaf0;
}
.skel-product-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.skel-total-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  margin: 14px 12px 0;
  background: #fafbfc;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════
   SKELETON "Preparing..." METNİ
   ═══════════════════════════════════════════════════════════ */
.skel-preparing {
  text-align: center;
  padding: 14px 12px 6px;
  font-size: 13px;
  font-weight: 500;
  color: #708090;
  letter-spacing: 0.2px;
  animation: skelPrepFade 0.4s ease;
}
@keyframes skelPrepFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.skel-preparing .dots::after {
  content: '';
  display: inline-block;
  animation: skelPrepDots 1.4s steps(4) infinite;
}
@keyframes skelPrepDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* FAB butonları skeleton sırasında gizli */
.content-area.is-loading .combo-fab-wrap { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   ÜRÜN AYIRICI (products-list içinde)
   ═══════════════════════════════════════════════════════════ */
.products-list .product-item {
  border-bottom: 1px solid #f0f2f5;
  padding-top: 6px;
  padding-bottom: 6px;
}
.products-list .product-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.products-list .product-item:first-child {
  padding-top: 0;
}
/* products-list gap'ini sıfırla — ayrım border ile sağlanıyor */
.products-list { gap: 0 !important; }

/* ═══════════════════════════════════════════════════════════
   FIRM META (Click for details + inline rating tek satırda)
   ═══════════════════════════════════════════════════════════ */
.firm-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.firm-rate-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff8e1;
  color: #8a5a00;
  border: 0.5px solid #f5d78a;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  line-height: 1.4;
}
.firm-rate-inline::before {
  content: '⭐';
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════
   FIRM MAP PIN (teardrop with logo inside)
   ═══════════════════════════════════════════════════════════ */
.firm-map-pin {
  position: relative;
  width: 60px;
  height: 74px;
  animation: firmPinDrop 0.35s ease-out;
}
/* Back to Results restore sırasında pin-drop animasyonunu bastır
   (aksi halde animasyon iki kez tetiklenmiş gibi görünüyor) */
body.suppress-pin-animation .firm-map-pin {
  animation: none;
}
@keyframes firmPinDrop {
  0%   { transform: translateY(-18px); opacity: 0; }
  60%  { transform: translateY(2px);   opacity: 1; }
  100% { transform: translateY(0);     opacity: 1; }
}
.firm-map-pin-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: #fff;
  border: 2px solid #e53935;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 12px rgba(229,57,53,0.35);
  animation: firmPinPulse 1.8s ease-in-out infinite;
}
@keyframes firmPinPulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 12px rgba(229,57,53,0.35); }
  50%      { box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 22px rgba(229,57,53,0.65); }
}
.firm-map-pin-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.firm-map-pin-tail {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 16px solid #e53935;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18));
}

/* ═══════════════════════════════════════════════════════════════════
   LOGO (SVG + DeepGrub text — siyah)
   ═══════════════════════════════════════════════════════════════════ */
.navbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #202124;
}
.navbar-logo-img {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}
.navbar-logo-text {
  color: #202124;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* Sheet (mobile bottom-sheet) logo */
.sheet-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.sheet-logo-img {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}
.sheet-logo-text {
  color: #202124;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1;
}

@media (max-width: 768px) {
  .navbar-logo-img { width: 22px; height: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FILTERS ACCORDION (Calories + Dietary + Availability)
   ═══════════════════════════════════════════════════════════════════ */

/* Open accordion'unun max-height'ı 600px — Filters daha uzun olabilir */
.acc-section .acc-body.open { max-height: 900px; }

/* "Filters · 2" rozeti (trigger'da, başlığın yanında) */
.filters-count-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #1a73e8;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* Filtre alt-grupları */
.filter-group {
  padding: 10px 0 4px;
  border-bottom: 1px dashed #eef0f2;
}
.filter-group:last-child { border-bottom: none; }
.filter-group-label {
  font-size: 11px;
  font-weight: 600;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

/* Calorie tabs (Budget tabs ile aynı görünüm) */
.cal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  background: #f1f3f4;
  border-radius: 8px;
  padding: 3px;
}
.cal-tab {
  flex: 1;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #5f6368;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cal-tab:hover { color: #202124; }
.cal-tab.active {
  background: #fff;
  color: #1a73e8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Calorie slider gövdesi */
.cal-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
}
.cal-slider-label { color: #5f6368; }
.cal-slider-val   { color: #202124; font-weight: 600; }

.cal-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #e8eaed;
  border-radius: 2px;
  outline: none;
  margin: 6px 0 4px;
}
.cal-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: #1a73e8;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cal-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: #1a73e8;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* "Any" mode skeleton */
.cal-any-skel {
  padding: 10px 12px;
  background: #f8f9fa;
  border: 1px dashed #dadce0;
  border-radius: 6px;
  font-size: 12px;
  color: #9aa0a6;
  text-align: center;
}

/* Dietary chips */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #3c4043;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-chip:hover { background: #f8f9fa; border-color: #c4c7cb; }
.filter-chip.active {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1a73e8;
}
.filter-chip-emoji { font-size: 13px; line-height: 1; }

/* Open-now toggle row */
.filter-toggle-row {
  display: inline-flex;          /* space-between idi: toggle en saga firliyordu */
  justify-content: flex-start;
  align-items: center;
  gap: 12px;                     /* toggle metnin hemen yaninda */
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
}
.filter-toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #3c4043;
}
.filter-toggle-icon { font-size: 11px; }
.filter-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.filter-toggle input { display: none; }
.filter-toggle-slider {
  position: absolute;
  inset: 0;
  background: #dadce0;
  border-radius: 20px;
  transition: background 0.2s;
}
.filter-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.filter-toggle input:checked + .filter-toggle-slider { background: #1a73e8; }
.filter-toggle input:checked + .filter-toggle-slider::before { transform: translateX(16px); }

/* filter availability result label */
.avail-result-label {
  font-size: 12px;
  color: #1a73e8;
  margin-top: 10px;
  font-weight: 500;
}

/* ── Venues pane (one stop / spread / ask) ───────────────────────────
   Tek secim. Radyo yerine kart: her modun kisa aciklamasi yaninda
   durur, secim tek tiklamada olur. */
.venues-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.venues-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.venues-opt:hover { border-color: #b8bcc0; background: #fafbfc; }
.venues-opt.active {
  border-color: #1a73e8;
  background: #f1f7fe;
}
.venues-opt-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #202124;
}
.venues-opt.active .venues-opt-title { color: #1557b0; }
.venues-opt-desc {
  display: block;
  font-size: 12px;
  color: #5f6368;
  margin-top: 2px;
}

/* Dietary section divider label */
.dietary-section-label {
  font-size: 12px;
  font-weight: 600;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
  padding-top: 16px;
  border-top: 1px solid #e8eaed;
}

/* Smart Picks warning box */
.smartpicks-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255, 167, 38, 0.10);
  border: 1px solid rgba(200, 120, 0, 0.40);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 4px;
  font-size: 12px;
  color: #7a4f00;
  line-height: 1.6;
  font-weight: 400;
}
.smartpicks-warning strong {
  color: #5a3800;
  font-weight: 600;
}

/* pane title row (title + segmented control inline) */
.pane-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pane-title-row .pane-title {
  margin-bottom: 0;
}

/* Segmented control — same style as cal-tabs */
.cuisine-seg-control {
  display: flex;
  gap: 3px;
  background: #f1f3f4;
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
.cuisine-seg-btn {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  color: #5f6368;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.cuisine-seg-btn:hover { color: #202124; }
.cuisine-seg-btn.active {
  background: #fff;
  color: #1a73e8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Cuisine search */
.cuisine-search-wrap {
  margin-bottom: 10px;
}
.cuisine-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  color: #3c4043;
  outline: none;
  transition: border-color 0.15s;
}
.cuisine-search-input:focus { border-color: #1a73e8; }

/* Cuisine chips */
.cuisine-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.cuisine-group-label {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  color: #80868b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
  margin-bottom: 2px;
}
.cuisine-chip {
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid #dadce0;
  background: transparent;
  font-size: 13px;
  color: #3c4043;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Roboto', sans-serif;
}
.cuisine-chip:hover { background: #f1f3f4; border-color: #bdc1c6; }
/* MOD YOK — tek kural: active = seçili (istiyorum) */
.cuisine-chip.active {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1967d2;
  font-weight: 500;
}
/* Seçili DEĞİL = elenmiş; soluk dursun ki fark edilsin */
.cuisine-chip:not(.active) { color: #80868b; }
/* "Other Cuisines" = cuisine'i atanmamış firmalar.
   ESKIDEN: border-style:dashed -> "eksik/opsiyonel" hissi veriyor, tiklanasi
   gelmiyordu. ARTIK: chip diger chip'lerle BIREBIR ayni (duz kenar, ayni renk).
   Ayrim gorsel zayiflatmayla degil, oncesindeki ayracla + alttaki notla yapiliyor. */

/* Chip'ten once gelen dikey ayrac: "buradan sonrasi farkli bir grup" */
.cuisine-chip-sep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  min-height: 20px;
  margin: 0 6px;
  background: #c4c7c5;
  flex-shrink: 0;
}

/* Kalici dip not. Tooltip yerine bunu kullaniyoruz: hover gerektirmez,
   mobilde de gorunur. Renk .pane-desc ile AYNI kaynaktan (var(--muted)) gelir;
   sabit #5f6368 yaziyordum ama .pane-desc'in KAZANAN kurali var(--muted)
   kullaniyor (=#8a8a8a), o yuzden benimki daha koyu duruyordu. */
.cuisine-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 22px;              /* chip'lerden biraz daha ferah dursun */
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.cuisine-hint > i {
  color: #1a73e8;                /* info ikonu mavi */
  font-size: 14px;
  line-height: 1.5;
  flex-shrink: 0;
}
/* Tek fark: vurgulanan chip adi bir ton koyu */
.cuisine-hint b {
  font-weight: 500;
  color: #3c4043;
}

/* "Other Cuisines" chip'i: cuisine'i atanmamis yerleri de KAPSAR.
   Ayrim renk/dashed ile DEGIL (silik durur), basindaki "+" ikonuyla:
   "bunlari da dahil et / genislet" hissi. Kenar/renk diger chip'lerle ayni. */
.cuisine-chip-other {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-left: 9px;             /* ikon icin sol bosluk bir tik daralt */
}
.cuisine-chip-other-plus {
  font-size: 15px !important;
  font-weight: 700;             /* "+" belirgin/kalin */
  stroke-width: 2.5px;          /* tabler outline'i kalinlastir */
}
.cuisine-chip.hidden { display: none; }

/* Select all / Clear — başlık satırındaki link butonlar */
.cuisine-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cuisine-link-btn {
  padding: 0;
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  color: #1a73e8;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.cuisine-link-btn:hover { color: #1557b0; text-decoration: underline; }

/* Dip not — hangi cuisine'ler elendi */
.cuisine-note {
  display: none;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e8eaed;
  font-size: 12px;
  color: #5f6368;
  font-family: 'Roboto', sans-serif;
}
.cuisine-note.visible { display: block; }
.cuisine-note i { font-size: 13px; vertical-align: -2px; margin-right: 4px; color: #c5221f; }
.cuisine-note b { color: #c5221f; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   ADVANCED FILTERS — link (Run butonunun üstünde, sidebar-run içinde)
   ═══════════════════════════════════════════════════════════════════ */
.adv-filters-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #1a73e8;
  cursor: pointer;
  transition: color 0.15s;
}
.adv-filters-link:hover { color: #1557b0; }
.adv-filters-link:hover .adv-filters-text { text-decoration: underline; text-underline-offset: 2px; }
.adv-filters-icon {
  font-size: 14px !important;
  line-height: 1;
  color: #1a73e8;
}
.adv-filters-summary {
  color: #5f6368;
  font-weight: 400;
  font-size: 11px;
  margin-left: 2px;
}
.adv-filters-summary:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   FILTERS MODAL — noUiSlider tema override (calorie sliders)
   ═══════════════════════════════════════════════════════════════════ */

#filtersModal .cal-mode { margin-top: 8px; }

.nouislider-wrap {
  padding: 14px 8px 6px;
}

/* Track */
#filtersModal .noUi-target {
  background: #e8eaed;
  border: none;
  box-shadow: none;
  height: 4px;
  border-radius: 2px;
}
/* Connect (dolu kısım) */
#filtersModal .noUi-connect {
  background: #1a73e8;
}
/* Handle */
#filtersModal .noUi-handle {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50%;
  background: #1a73e8;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  top: -7px !important;
  right: -8px !important;
}
#filtersModal .noUi-handle::before,
#filtersModal .noUi-handle::after { display: none; }
#filtersModal .noUi-handle:focus { outline: none; }

/* ═══════════════════════════════════════════════════════════════════
   LOCATION MODAL — footer mode-switch link (Entire Area ↔ Pinpoint)
   ═══════════════════════════════════════════════════════════════════ */
.loc-mode-tab-desc-bar {
  display: none;
  padding: 7px 16px 9px;
  font-size: 11.5px;
  color: var(--color-text-tertiary, #9aa0a6);
  border-top: 0.5px solid #e8eaed;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.18s ease;
}
.loc-mode-tab-desc-bar.visible { display: flex; }
.loc-mode-tab-desc-bar.fading { opacity: 0; }
.loc-mode-tab-desc-bar .loc-desc-icon {
  font-size: 15px;
  color: #1a73e8;
  flex-shrink: 0;
}
.loc-mode-tab-desc-bar .loc-desc-text { line-height: 1.3; }
.loc-mode-tab-desc-bar b { color: #1a73e8; font-weight: 600; }
.location-modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}
.location-modal-footer .modal-footer-spacer { flex: 1; }
.location-modal-footer .btn-secondary,
.location-modal-footer .btn-primary {
  flex: none;
  width: 120px;
  padding: 8px 0;
}

.loc-mode-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #5f6368;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
}
.loc-mode-link:hover { color: #202124; }
.loc-mode-link:hover .loc-mode-link-action { text-decoration: underline; }
.loc-mode-link-action {
  color: #1a73e8;
  font-weight: 500;
  text-underline-offset: 2px;
}
.loc-mode-link.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   VENUE MODAL — radio button override (1px border, ince)
   ═══════════════════════════════════════════════════════════════════ */
.venue-modal .venue-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.venue-modal .venue-option:hover {
  background: #f8f9fa;
  border-color: #c4c7cb;
  transform: none;
  box-shadow: none;
}
.venue-modal .venue-option.selected {
  border-color: #1a73e8;
  background: #e8f0fe;
  box-shadow: inset 3px 0 0 #1a73e8;
}
.venue-modal .venue-option-hint {
  font-size: 12.5px;
  color: #5f6368;
  line-height: 1.5;
}
.venue-option-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin: 2px 0 0 0;
  border: 1.5px solid #5f6368;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.venue-option.selected .venue-option-radio {
  border-color: #1a73e8;
}
.venue-option.selected .venue-option-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #1a73e8;
}
.venue-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}


/* ── firm-reactions: like/dislike — yeşil oklarla aynı hiza ── */
.firm-reactions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 4px 9px 0;
  border-top: 0.5px solid #e8eaed;
  margin-top: 4px;
}
.like-suggestion-label {
  font-size: 9px;
  color: #b0b5bb;
  margin-right: 4px;
  white-space: nowrap;
  flex: 1;
}
.reaction-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 3px;
  height: 16px;
  font-size: 14px;
  color: #9aa0a6;
  display: flex;
  align-items: center;
  transition: color 0.15s, transform 0.15s;
  line-height: 1;
}
.reaction-btn:hover { color: #5f6368; }
.reaction-btn.active.like-btn { color: #34a853; }
.like-btn { transform: translateX(-3px); }
.reaction-btn.active.dislike-btn { color: #ea4335; }
@keyframes reactionPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.reaction-btn.pop { animation: reactionPop 0.3s ease forwards; }

/* ── oneri-dots-wrap: sadece noktalar, ortalı ── */
.oneri-dots-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 4px 0 2px;
  margin-top: 10px;
}
.oneri-dots-wrap .dots-inner {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

/* ── share row: total-row altında ── */
.share-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  padding-right: 10px;
  padding-bottom: 0;
}
/* Masaüstü: header'daki mobil kopya gizli, footer'daki görünür */
.share-row--mobile { display: none; }
.share-label {
  font-size: 10px;
  color: #5f6368;
  white-space: nowrap;
}

/* ── share button ── */
.share-bundle-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 17px;
  color: #3c4043;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.share-bundle-btn:hover {
  color: #34a853;
}
.share-bundle-btn:active {
  transform: scale(0.88);
}

/* ── firm name ellipsis ── */
.firm-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── In-App Message Popup ─────────────────────────────────────────────── */
/* TASINDI → /static/shared/popup.css                                      */
/* Admin onizlemesi de ayni dosyayi yukler; boylece onizleme ile gercek    */
/* popup TEK kaynaktan beslenir ve birbirinden ayrisamaz.                  */

/* ── Share popup ──────────────────────────────────────────────────── */
.dg-share-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9998;
}
.dg-share-sheet {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(360px, 90vw); background: #fff; border-radius: 20px;
  padding: 24px 20px 28px; z-index: 9999;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
.dg-share-title {
  font-size: 14px; font-weight: 600; color: #1a1a1a;
  text-align: center; margin-bottom: 20px;
}
.dg-share-btns {
  display: flex; justify-content: center; gap: 12px;
}
.dg-share-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid #e8eaed;
  background: #fff; font-size: 12px; color: #3c4043; cursor: pointer;
  text-decoration: none; min-width: 78px;
  transition: background 0.15s;
}
.dg-share-btn span { white-space: nowrap; }
.dg-share-btn:hover { background: #f1f3f4; }
.dg-share-btn i { font-size: 22px; }
.dg-share-btn .ti-brand-whatsapp { color: #25D366; }
.dg-share-btn .ti-brand-x        { color: #000; }
.dg-share-btn .ti-mail           { color: #EA4335; }
.dg-share-btn .ti-link           { color: #1a73e8; }

/* ══════════════════════════════════════════════════════════════════════
   Sonuç durum kartları (boş sonuç / teknik hata)
   ══════════════════════════════════════════════════════════════════════ */
/* State modunda haritayı gizle, combo kolonu tüm genişliği alsın.
   Zemin: ana sayfanın buz-mavisi gradyanı + arkada constellation canvas'ı. */
.content-area.is-state .map-col { display: none; }
.content-area.is-state .combo-col {
  width: 100%;
  border-left: none;
  background: linear-gradient(135deg, #f0f7ff 0%, #f2fbf6 60%, #f0f7ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.content-area.is-state .combo-inner {
  width: 100%;
  max-width: 420px;
  padding: 24px 20px;
  margin: 0 auto;
  /* Sonuç düzeninden miras kalanlar dikey ortalamayı bozuyordu:
     (1) tam-yükseklik + scroll, (2) taban kuraldaki flex:1 — inner kolonun
     tüm boyuna esneyip kartı tepeye sabitliyordu. İkisi de nötrleniyor. */
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
  position: relative;
  z-index: 2;
}
/* Arka plan animasyonu (gezen nokta-ağ) — kartın altında, tıklamayı yutmaz */
.rs-bg-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.content-area.is-state .sheet-handle { display: none; }
/* Kart modunda sağ-alt floating ileri/geri butonları gizle */
.content-area.is-state .combo-fab-wrap,
.content-area.is-state #comboFabNav { display: none !important; }

.result-state {
  background: #fff;
  border-radius: 16px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin: 8px auto 0;
}
.rs-art-wrap { display: flex; justify-content: center; margin-bottom: 6px; }
.rs-art { max-width: 180px; height: auto; }
.rs-title {
  font-size: 17px; font-weight: 600; color: #202124;
  line-height: 1.35; margin: 8px 0 8px;
}
.rs-body {
  font-size: 13.5px; color: #5f6368; line-height: 1.6;
  margin-bottom: 20px;
}
.rs-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: none;
  background: #1a73e8;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s;
}
.rs-btn:hover { background: #1557b0; }
.rs-btn .ti { font-size: 16px; }

/* Tek düzeltme: .combo-inner'ın scroll'unu kapat. Ölçümde .combo-inner kayıyordu
   (OPTION başlığı listeyle beraber kayıyordu). Kapatınca scroll yalnız
   .firms-scroll'da kalır. BAŞKA HİÇBİR ŞEYE DOKUNULMAZ. */
.combo-inner { overflow-y: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   DÜZELTME 1 — Kalori chip'i satırı büyütmesin (önerileri aşağı itmesin).
   Chip'in görsel yüksekliğini başlık (.combo-label) satırına sığdırıyoruz:
   line-height:1 + dengeli dikey padding. Böylece .combo-header yükselmez,
   liste aşağı kaymaz. Chip yine yan tarafta görünür.
   ═══════════════════════════════════════════════════════════════════ */
.combo-header { min-height: 0; }
.cal-pill {
  line-height: 1;
  padding-top: 2px;
  padding-bottom: 2px;
  align-self: center;
  max-height: 20px;   /* label satır yüksekliği civarı — header'ı zorlamaz */
}
.cal-pill .ti-flame { line-height: 1; }

/* ═══════════════════════════════════════════════════════════════════
   DÜZELTME 2 — Kategori tooltip'i overflow zincirinden çıkar (fixed katman).
   Eski ::after/::before balonları 8 ayrı overflow kabı tarafından kırpılıyordu.
   Onları GÖRSEL olarak kapatıyoruz; yerine JS (map-results.js) body'ye eklenen
   #catFixedTip elemanını position:fixed gösterir → hiçbir overflow kırpamaz.
   Tetikleme (hover / .cat-open) ve veri kaynağı (data-cat) AYNI kalır.
   ═══════════════════════════════════════════════════════════════════ */
.product-name[data-cat]::after,
.product-name[data-cat]::before,
.car-top-row[data-cat]::after,
.car-top-row[data-cat]::before {
  display: none !important;   /* kırpılan eski balonları kapat */
}
#catFixedTip {
  position: fixed;
  /* Modal katmanlarının ALTINDA kalmalı: .modal-overlay=1000, #firmModal=1100.
     Eskiden 99999 idi → mouse sağa yanaşınca tooltip modalın ÜSTÜNDE beliriyordu.
     900: sayfa içeriğinin üstünde ama her modalın altında. Ayrıca JS tarafında
     (map-results.js → _anyModalOpen) modal açıkken tooltip hiç gösterilmiyor. */
  z-index: 900;
  background: #d7f0ea;
  color: #0f6e56;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .16s ease, transform .16s ease;
}
#catFixedTip.show { opacity: 1; transform: translateY(0); }