/**
 * Gastfood Web — ana stil sayfası
 *
 * DÜZEN STRATEJİSİ (önemli):
 * Mobil ve masaüstü tasarımları belirgin şekilde FARKLI, ama HTML aynı.
 *   Mobil    → alt tab bar, tam genişlik kartlar, yatay kaydırmalı raylar
 *   Masaüstü → üst navigasyon, çok sütunlu ızgara, yan filtre paneli
 * Sunucu cihaza göre farklı HTML üretmez. Gerekçe: Google mobil-öncelikli
 * indeksleme yapıyor, farklı içerik sunmak cloaking riski; ayrıca tek URL,
 * tek önbellek girdisi. Ayrışma yalnızca CSS'te.
 *
 * Bölümler:
 *   1. Reset ve taban
 *   2. Bileşenler (mobil öncelikli)
 *   3. Mobil kabuk (alt tab bar)
 *   4. Masaüstü düzeni  → @media (min-width: 1024px)
 */

/* ============================================================
   1. RESET VE TABAN
   ============================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    /* Alt tab bar içeriği kesmesin + iPhone home indicator alanı */
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--sp-3); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* Klavye kullanıcıları için görünür odak; fare tıklamasında gizli. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   2. BİLEŞENLER
   ============================================================ */

/* ---- Kart ---- */
/* Uygulamada kartlar beyaz, 12px radius, GÖLGESİZ. Ayrım kenarlıkla. */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

/* ---- Mekân kartı: yatay (item_place — uygulamada 115dp) ---- */
.place-row {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: transform var(--t) var(--ease);
}
.place-row:active { transform: scale(0.985); }

.place-row__img {
    width: 95px; height: 95px;
    flex-shrink: 0;
    border-radius: var(--r);
    object-fit: cover;
    background: var(--surface-alt);
}
.place-row__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.place-row__name {
    font-size: var(--fs-lg); font-weight: var(--fw-bold);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.place-row__meta { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-dim); }
.place-row__loc  { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-dim); }

/* ---- Mekân kartı: dikey (item_popular_place — uygulamada 221x230dp) ---- */
.place-card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
/*
 * ÖLÇÜLER MOBİL UYGULAMADAN ALINDI.
 * PlacesCollectionViewCell: 221×220pt, görsel yüksekliği 120pt.
 * Yani görsel kartın %55'i, gövde ~100pt'de üç satır.
 *
 * Web'de kart %72 genişlikteydi ve görsel 16/11 oranındaydı — ekranda
 * tek kart kalıyor, aralar boş görünüyor ve ray dolu hissettirmiyordu.
 * 221/120 ≈ 1.84, yani görsel oranı 16/8.7. 16/9'a yuvarlandı.
 */
.place-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-alt); }
.place-card__body {
    padding: var(--sp-3);
    display: flex; flex-direction: column; gap: 2px;
    flex: 1;
}
.place-card__name {
    font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.25;
    /* Tek satırda kes: iki satıra taşan uzun adlar kart yüksekliklerini
       ayırıp rayı tırtıklı gösteriyordu. Uygulamada da tek satır. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.place-card__row  { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-dim); margin-top: auto; }
.place-card__body > div:last-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Yatay kaydırmalı ray ---- */
/* Uygulamadaki yatay RecyclerView karşılığı. Kaydırma çubuğu gizli, snap açık. */
.rail {
    display: grid;
    grid-auto-flow: column;
    /*
     * SABİT GENİŞLİK, YÜZDE DEĞİL.
     * Uygulamada kart 221pt ve ekran genişliğinden BAĞIMSIZ; geniş
     * telefonlarda daha çok kart görünüyor, kart büyümüyor. Yüzde
     * kullanınca 428pt'lik bir telefonda kart 308px'e çıkıyor ve ray
     * tek kartla dolup boş hissettiriyordu.
     *
     * 216px: 221pt'lik uygulama kartının web karşılığı (kenarlık payı
     * düşülmüş). 375px ekranda 1.7 kart görünüyor — uygulamadaki gibi.
     */
    grid-auto-columns: 216px;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--sp-4);
    margin-inline: calc(var(--sp-4) * -1);
    /* scroll-snap-align: start hizalamayı kaydırma kabının KENARLIK
       kutusuna göre yapıyor, yastıklama kutusuna göre değil. scroll-padding
       olmadan durma noktası yastıklamayı yutuyor ve ilk kart bölüm
       başlığından 16px solda kalıyordu — sitedeki her rayda görünüyordu. */
    scroll-padding-inline: var(--sp-4);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* Kare kapaklı liste kartları: %72'de tek kart ekranı doldurup rayın
   kaydırılabilir olduğunu gizliyor. %44 ikinci kartın kenarını gösterir —
   kullanıcı yana kaydırılacağını görsün. */
/* Liste kapağı kare; 156px kart + kapak = uygulamadaki ListCollectionViewCell ölçüsü. */
.rail--liste { grid-auto-columns: 156px; }
/* Yuvarlak avatarlar sabit genişlik ister; yüzde ile ekran büyüdükçe
   avatar da büyür ve profil resmi karikatürleşir. */
.rail--kisi  { grid-auto-columns: 88px; }



/* Her zaman ızgara — ray DEĞİL.
   Şehir/ilçe sayfaları arama motoru açılış sayfaları: yatay ray mobilde
   envanterin çoğunu ekran dışında bırakıyor ve kullanıcı ilk iki mekândan
   ötesini hiç görmüyor. Bu sayfaların işi tam olarak envanteri göstermek. */
.izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
}
@media (min-width: 700px) {
    .izgara { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); }
}

/* ---- Bölüm başlığı ---- */
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-6) 0 var(--sp-3);
}
.section-head h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
/* "Tümü" bağlantısı 18px yüksekliğindeydi. Dikey dolgu dokunma alanını
   büyütüyor; negatif boşluk başlık satırının yüksekliğini korumasını
   sağlıyor, yani görsel ritim değişmiyor. */
.section-head a  {
    font-size: var(--fs-sm); color: var(--ink-dim); font-weight: var(--fw-semibold);
    display: inline-flex; align-items: center;
    min-height: 40px;
    padding-inline: var(--sp-2);
    margin-block: -11px;
    margin-right: calc(var(--sp-2) * -1);
}

/* Logo bağlantısının dokunma alanı — işaret 28px ama hedef 44px. */
.logo { min-height: var(--tap); }

/* ---- Butonlar ---- */
/* Birincil = SİYAH. Turuncu bilinçli olarak CTA değil (uygulamalarla tutarlı). */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--tap);
    padding: 0 var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-base); font-weight: var(--fw-bold);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary   { background: var(--ink-strong); color: #fff; }
.btn--secondary { background: var(--surface-alt); color: var(--ink); }
.btn--outline   { background: var(--surface); color: var(--ink); border-color: var(--line-input); }
.btn--danger    { background: var(--danger); color: #fff; }
.btn--block     { width: 100%; }
/* Yalnızca ikon taşıyan ikincil eylemler (listeden çıkar, kapat).
   Yatay dolgu yok — pill kenarlığı olmadan geniş boşluk tıklama
   alanını sahte gösteriyor. Dokunma hedefi min-height ile korunuyor. */
.btn--ghost {
    background: transparent; color: var(--ink-dim);
    padding: 0 var(--sp-2); min-width: var(--tap);
}
.btn--ghost:hover { color: var(--ink); background: var(--surface-alt); }

/* ---- Rozet / pill ---- */
.pill {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    height: 32px; padding: 0 var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--line-input);
    border-radius: var(--r-md);
    font-size: var(--fs-base); font-weight: var(--fw-semibold);
    white-space: nowrap;
}
.pill--accent { background: var(--accent-soft); border-color: transparent; }

/* ---- Durum noktası ---- */
.status { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.status::before { content: ''; width: 10px; height: 10px; border-radius: 50%; }
.status--open::before   { background: var(--open); }
.status--closed::before { background: var(--closed); }

/* ---- Filtre çipi ---- */
.chip {
    display: inline-flex; align-items: center;
    height: 39px; padding: 0 var(--sp-4);
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--fs-lg); font-weight: var(--fw-bold);
    white-space: nowrap;
}
/* Seçili durum. aria-pressed düğmeler için, aria-current bağlantılar
   için doğru olan: filtre çipleri <a> ve basılı değil, "şu an buradasın"
   anlamı taşıyor. Görsel ikisinde de aynı. */
.chip[aria-pressed="true"],
.chip[aria-current]         { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip[aria-current] span    { color: rgba(255,255,255,.7) !important; }

.chip-row {
    display: flex; gap: var(--sp-2);
    overflow-x: auto; scrollbar-width: none;
    padding-inline: var(--sp-4); margin-inline: calc(var(--sp-4) * -1);
    padding-block: var(--sp-1);
}
.chip-row::-webkit-scrollbar { display: none; }

/* ---- İskelet yükleme ---- */
.skeleton {
    background: linear-gradient(90deg, var(--surface-alt) 25%, #eee 50%, var(--surface-alt) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--r);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================================
   3. MOBİL KABUK
   ============================================================ */

/* ---- Üst çubuk ---- */
.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: var(--sp-3);
    height: var(--topbar-h);
    padding-inline: var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.topbar__brand { font-weight: var(--fw-extra); font-size: var(--fs-lg); letter-spacing: -0.02em; }
.topbar__city {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    height: 36px; padding: 0 var(--sp-4);
    border: 1px solid var(--line-input); border-radius: var(--r-pill);
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.topbar__spacer { margin-left: auto; }

/*
 * Arama bağlantısının DOKUNMA ALANI ikondan büyük.
 * Ölçüldü: eskiden 24x29px'ti — WCAG'ın 44px önerisinin çok altında ve
 * başparmakla pratikte ıskalanıyordu. İkon hâlâ 24px; büyüyen yalnızca
 * tıklanabilir alan, görsel ağırlık değişmiyor.
 *
 * Sağdaki negatif boşluk, genişleyen alanın çubuğun kenar yastıklamasını
 * bozmasını engelliyor: ikon optik olarak aynı yerde kalıyor.
 */
.topbar__ara {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap);
    margin-right: calc(var(--sp-2) * -1);
    color: var(--ink);
}

/* Şehir düğmesi de dokunma alanına çıkarıldı (36 → 44). */
.topbar__city { min-height: var(--tap); }

/* ---- Alt tab bar (5 sekme — uygulamayla birebir sıra) ---- */
.tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    box-shadow: var(--shadow-nav);
}
.tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    color: var(--ink-soft);
    background: none; border: 0;
    transition: color var(--t-fast) var(--ease);
}
.tabbar__item svg { width: 24px; height: 24px; }
.tabbar__item[aria-current="page"] { color: var(--ink); font-weight: var(--fw-bold); }
/* Uygulamadaki "zıplama" mikro etkileşiminin web karşılığı.
 *
 * ÖNCEKİ SÜRÜM KASIYORDU, iki nedenle:
 *
 * 1. Her ara kare arasında --ease (cubic-bezier(.16,1,.3,1), expo-out)
 *    çalışıyordu. Expo-out her parçanın başında fırlayıp sonunda
 *    sürünüyor; dört parça arka arkaya gelince hareket "dur-kalk"
 *    okunuyordu. Zıplamada yön değiştiren bir cismin ivmesi sabittir:
 *    yukarı çıkarken yavaşlar (ease-out), düşerken hızlanır (ease-in).
 *    Artık her kare kendi eğrisini taşıyor.
 *
 * 2. Animasyon sayfa YÜKLENİRKEN başlıyor (aria-current sunucudan
 *    geliyor) ve ilk boyamayla yarışıyordu. will-change ikonu kendi
 *    katmanına alıyor, böylece kare düşmüyor.
 *
 * Ayrıca hafif bir ezilme/gerilme eklendi: sıçrarken incelip uzuyor,
 * inerken yayılıyor. Sadece translateY mekanik duruyordu.
 * 600ms → 480ms: dört sekmelik zıplama uzun geliyordu.
 */
.tabbar__item[aria-current="page"] svg {
    animation: tabPop 480ms both;
    will-change: transform;
}
@keyframes tabPop {
    /* çömelme — zıplamadan önceki hazırlık */
    0%   { transform: translateY(0) scale(1, 1);
           animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    14%  { transform: translateY(1.5px) scale(1.08, 0.92);
           /* yukarı çıkış: hızlı başlar, zirvede yavaşlar */
           animation-timing-function: cubic-bezier(0.2, 0.8, 0.35, 1); }
    40%  { transform: translateY(-7px) scale(0.95, 1.06);
           /* düşüş: yerçekimi — hızlanarak iner */
           animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.5); }
    62%  { transform: translateY(0) scale(1.06, 0.94);
           animation-timing-function: cubic-bezier(0.2, 0.8, 0.35, 1); }
    78%  { transform: translateY(-2.5px) scale(0.99, 1.02);
           animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.5); }
    90%  { transform: translateY(0) scale(1.02, 0.98);
           animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    100% { transform: translateY(0) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
    .tabbar__item[aria-current="page"] svg { animation: none; will-change: auto; }
}

/* ---- Bottom sheet ---- */
.sheet {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    max-height: 85vh; overflow-y: auto;
    background: var(--surface);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform var(--t-slow) var(--ease);
}
.sheet[data-open="true"] { transform: translateY(0); }

/* Sürükleme tutamacı. Sticky: sheet içeriği kaydırıldığında da üstte
   kalır, yoksa "buradan tutabilirsin" işareti ekrandan kayıp gider. */
.sheet__tutamac {
    position: sticky; top: calc(var(--sp-5) * -1);
    width: 40px; height: 4px;
    /* Üst: sheet'in kendi yastıklamasını geri alıyor (tutamaç kenara
       yakın olmalı). Alt: negatif, çünkü aşağıdaki 20px dokunma
       dolgusu zaten boşluk sağlıyor; ayrıca margin eklenirse başlıkla
       arasında kocaman bir boşluk kalıyor. */
    margin: calc(var(--sp-5) * -1) auto calc(var(--sp-3) * -1);
    background: var(--line-input);
    border-radius: var(--r-pill);
    /* Tutamacın kendisi ince ama dokunma alanı 44px olmalı. */
    box-sizing: content-box;
    padding-block: 20px;
    background-clip: content-box;
    cursor: grab;
    touch-action: none;   /* dikey sürükleme JS'e kalsın */
}
.sheet--suruklenirken { transition: none !important; }
.sheet--suruklenirken .sheet__tutamac { cursor: grabbing; }

.sheet__title { text-align: center; font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); }
.sheet-backdrop {
    position: fixed; inset: 0; z-index: 55;
    background: var(--overlay);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t) var(--ease);
}
.sheet-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

/* Masaüstü navigasyonu mobilde yok */
.desknav { display: none; }

/* ============================================================
   4. MASAÜSTÜ DÜZENİ
   ============================================================ */

@media (min-width: 1024px) {

    body { padding-bottom: 0; }

    /* Alt tab bar ve mobil üst çubuk gizlenir.
       Şehir butonu masaüstü navigasyonunda ayrıca kullanıldığı için
       .topbar__city gizlenmiyor — yalnızca kabuk gizleniyor. */
    .tabbar { display: none; }
    .topbar { display: none; }


    /* ---- Üst navigasyon ---- */
    .desknav {
        display: block;
        position: sticky; top: 0; z-index: 40;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid var(--line);
    }
    .desknav__inner {
        display: flex; align-items: center; gap: var(--sp-8);
        height: 72px;
        max-width: var(--container); margin-inline: auto;
        padding-inline: var(--sp-6);
    }
    .desknav__brand { font-size: var(--fs-xl); font-weight: var(--fw-extra); letter-spacing: -0.02em; }
    .desknav__links { display: flex; gap: var(--sp-6); margin-right: auto; }
    .desknav__links a {
        font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink-soft);
        transition: color var(--t-fast) var(--ease);
    }
    .desknav__links a:hover,
    .desknav__links a[aria-current="page"] { color: var(--ink); }

    /* ---- İçerik: yan panel + ana sütun ---- */
    .layout {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: var(--sp-8);
        align-items: start;
        max-width: var(--container); margin-inline: auto;
        padding: var(--sp-8) var(--sp-6);
    }
    .layout--full { grid-template-columns: minmax(0, 1fr); }

    .sidebar {
        position: sticky; top: calc(72px + var(--sp-6));
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: var(--sp-5);
    }

    /* ---- Raylar masaüstünde ızgaraya dönüşür ---- */
    .rail {
        display: grid;
        /* 240px değil 260px: 1200px kapta 4 sütun çıkıyordu ve
           kartlar küçük kalıp aralar boş görünüyordu. Geniş kapla
           (aşağıda) birlikte 5 sütuna çıkıyor. */
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        grid-auto-flow: row;
        overflow: visible;
        padding-inline: 0; margin-inline: 0;
        gap: var(--sp-5);
    }

    /* Masaüstünde hover geri gelir (dokunmatikte yoktu) */
    .place-card, .place-row { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
    .place-card:hover, .place-row:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-pop);
    }

    .section-head h2 { font-size: var(--fs-2xl); }

    /* Masaüstünde bottom sheet yerine ortada modal */
    .sheet {
        inset: 50% auto auto 50%;
        transform: translate(-50%, -48%) scale(0.98);
        width: min(560px, 92vw);
        max-height: 80vh;
        border-radius: var(--r-lg);
        opacity: 0;
        transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
    }
    .sheet[data-open="true"] { transform: translate(-50%, -50%) scale(1); opacity: 1; }

    /* Masaüstünde sheet ortada bir modal; "aşağı sürükle" davranışı yok,
       tutamaç da yanıltıcı olur. */
    .sheet__tutamac { display: none; }
}

/* Geniş masaüstü: sütun sayısı artar */
@media (min-width: 1440px) {
    .rail { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ---- Marka kilidi ---- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}
.logo__mark { display: block; object-fit: contain; }
.logo__word { display: block; width: auto; object-fit: contain; }

/* ---- Mekân detay sayfası ---- */
.place__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--surface-alt);
    overflow: hidden;
}
.place__cover img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Kapak görseli YOKKEN gösterilen yer tutucu KARE, kapak alanı ise 16:9.
 * object-fit:cover kareyi kırpıp büyütüyor ve marka işareti ekranı
 * dolduran dev bir logoya dönüşüyor. contain + boyut sınırı: işaret
 * ortada, küçük ve sakin duruyor.
 */
.place__cover--bos {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-alt);
}
.place__cover--bos img {
    /* Görselin kendi boşluğu var; burada yalnızca yükseklik sınırlanıyor
       ki 16:9 alanda işaret orantılı kalsın. */
    width: auto; height: 100%;
    max-width: 40%;
    object-fit: contain;
}

/*
 * Yer tutucu görselleri ZEMİNSİZ (saydam); zemin buradan geliyor.
 * Gömülü zemin, kabın en-boy oranı görselinkinden farklı olduğunda
 * (16:9 kapakta kare yer tutucu) ayrı bir dikdörtgen gibi görünüyordu.
 *
 * Gerçek fotoğraflarda da zararsız: fotoğraf zaten üstünü kapatıyor,
 * yalnızca yüklenene kadar sakin bir zemin görünüyor.
 */
.place-card__img,
.place-row__img,
.place__avatar,
.liste-kart__kapak { background-color: var(--surface-alt); }

/*
 * MEKÂN YER TUTUCUSU HER YERDE KÜÇÜK DURUR.
 *
 * Yer tutucu kare bir marka işareti; kaplar ise 16:9 kapak, 4:3 kart,
 * yuvarlak avatar… object-fit:cover onu kırpıp kabı dolduracak kadar
 * büyütüyor ve her kart dev bir logoya dönüşüyor.
 *
 * Kural görselin ADINA bakıyor — görünümlere ayrı bir sınıf eklemeye
 * gerek kalmıyor ve YENİ eklenen her görsel kabı da kendiliğinden
 * doğru davranıyor. Tek bir yerde tutulması, "burada da unuttum"
 * hatasını imkânsız kılıyor.
 *
 * Profil yer tutucusu bu kuralın DIŞINDA: o zaten yuvarlak bir daire
 * ve kabı doldurması gerekiyor.
 */
img[src*="placeholder-mekan"] { object-fit: contain; }

/*
 * DOLGU CSS'TE DEĞİL, GÖRSELİN İÇİNDE.
 *
 * Önce CSS dolgusu denendi ve kırıldı: yüzde dolgu KAPSAYICIYA göre
 * hesaplanıyor, öğenin kendi boyutuna göre değil. 72px avatarda %20
 * dolgu 68px ediyor, genişliği aşıyor ve kutu 143px'e şişiyordu —
 * dev beyaz bir daire.
 *
 * Boşluk görselin saydam tuvaline gömülünce object-fit:contain her
 * kapta aynı oranı üretiyor: kap ister 72px avatar, ister 300px kart,
 * ister 16:9 kapak olsun. Per-kap kural gerekmiyor.
 */

.place__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: var(--sp-5);
}
/*
 * Taşma AVATARIN kendi özelliği, başlığın değil.
 *
 * Negatif boşluk eskiden .place__head üzerindeydi ve TÜM başlığı yukarı
 * çekiyordu. İşletme logosu olmayan mekânlarda avatar hiç çizilmediği
 * için ilk çocuk h1 oluyor ve işletme adı kapak fotoğrafının üstüne
 * biniyordu. Canlıda görüldü.
 *
 * Artık taşırma avatara ait: avatar bir sebeple çizilmezse başlık
 * olduğu yerde kalır, kapağa binmez.
 */
.place__avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--surface);
    background: var(--surface);
    margin-top: -36px;
    margin-bottom: var(--sp-3);
}
.place__head h1 { font-size: var(--fs-2xl); }
.place__type { font-size: var(--fs-base); color: var(--ink-dim); margin: var(--sp-1) 0 0; font-weight: var(--fw-semibold); }
.place__head .status { margin-top: var(--sp-2); }

.place__pills {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.place__actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

@media (min-width: 1024px) {
    .place__cover { aspect-ratio: 21 / 7; max-height: 380px; }
    .place__head {
        align-items: flex-start;
        text-align: left;
    }
    .place__avatar { width: 92px; height: 92px; margin-top: -44px; }
    .place__pills, .place__actions { justify-content: flex-start; }
}

/* ---- Harita ---- */
/* Kabuksuz düzenler tabbar boşluğunu taşımıyor.
 *
 * ÖLÇÜLEN HATA: 'odak' düzeni bu kuralın DIŞINDAYDI. body'nin genel
 * padding-bottom: var(--nav-h) değeri duruyordu ve Bobo ekranında
 * belge 876px, pencere 812px oluyordu — sayfanın kendisi 64px
 * kayabiliyordu ve başlıkla giriş alanı ekrandan çıkıyordu.
 * .bobo yüksekliği 100dvh olduğu için sorun içeride değil, gövdedeydi.
 */
.body--bare,
.body--odak { padding-bottom: 0; }

.body--bare { overflow: hidden; }

/* Sohbet ekranı SAYFA OLARAK kaymıyor: başlık ve giriş alanı sabit
   kalsın, yalnızca mesaj akışı kaysın (kaydırma .bobo__akis'te).
 *
 * SINIF SAYFAYA ÖZEL, düzene değil: 'odak' düzenini giriş karşılaması
 * da kullanıyor ve o ekranın KISA ekranlarda kayabilmesi gerekiyor.
 * .body--odak'a konsaydı karşılamanın altı kesilirdi. */
.body--sabit { overflow: hidden; }

.map-shell {
    position: fixed;
    inset: 0 0 calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)) 0;
    display: flex;
    flex-direction: column;
}

.map-bar {
    display: flex; align-items: center; gap: var(--sp-3);
    height: var(--topbar-h);
    padding-inline: var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    z-index: 500;   /* Leaflet panelleri 400'e kadar çıkıyor */
}

.map-canvas { flex: 1; min-height: 0; background: var(--surface-alt); }

.map-status {
    position: absolute;
    top: calc(var(--topbar-h) + var(--sp-3));
    left: 50%; transform: translateX(-50%);
    z-index: 500;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-pop);
    white-space: nowrap;
}

/* Küme baloncuğu.
   Seçici Leaflet'in .leaflet-marker-icon kuralıyla birlikte yazıldı:
   leaflet.css bu dosyadan SONRA yükleniyor ve display:block ile flex'i eziyor. */
.leaflet-marker-icon.map-cluster {
    display: flex; align-items: center; justify-content: center;
    background: var(--ink-strong);
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* Tekil mekân işareti */
.leaflet-marker-icon.map-pin {
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0;
}
.map-pin__dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2.5px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* Seçilen mekân kartı — mobilde alttan, masaüstünde solda */
.map-card {
    position: absolute;
    left: var(--sp-3); right: var(--sp-3);
    bottom: var(--sp-3);
    z-index: 500;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-pop);
}
.map-card__close {
    position: absolute; top: 4px; right: 8px;
    background: none; border: 0;
    font-size: 24px; line-height: 1; color: var(--ink-dim);
    padding: var(--sp-1);
}
.map-card__link { display: block; padding: var(--sp-4); }
.map-card__body { display: flex; flex-direction: column; gap: 2px; }
.map-card__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.map-card__meta { font-size: var(--fs-sm); color: var(--ink-dim); }

@media (min-width: 1024px) {
    .map-shell { inset: 0; }
    .map-card { left: var(--sp-5); right: auto; width: 340px; bottom: var(--sp-5); }
}

/* ---- Form alanları ---- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-label); }
.field input,
.field select,
.field textarea {
    font: inherit;
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--line-input);
    border-radius: var(--r-sm);
    color: var(--ink);
    width: 100%;
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--ink);
}
.field__err { font-size: var(--fs-sm); color: var(--danger); font-weight: var(--fw-semibold); }

/* ---- Site altbilgisi ----
 *
 * MOBİLDE GİZLİ. Mobil uygulamada sayfanın altında dev bir bağlantı
 * bloğu yok; o bağlantılar Hesap sekmesindeki menüde duruyor. Web'de
 * de aynı mantık: alt sekme çubuğunun hemen üstünde 4 sütunluk footer
 * hem yer kaplıyor hem sekme çubuğuyla yarışıyordu.
 *
 * Masaüstünde alt sekme çubuğu yok, footer olağan yerinde duruyor.
 */
.site-footer { display: none; }

/* 1024px: masaüstü kırılımının TAMAMI burada (alt sekme çubuğu gizlenir,
   yan menü açılır). Footer da aynı eşiği kullanmalı — 900px yazıldığında
   900-1024 arasında hem footer hem sekme çubuğu görünüyordu. */
@media (min-width: 1024px) {
    .site-footer {
        display: block;
        background: var(--surface);
        border-top: 1px solid var(--line);
        padding-block: var(--sp-8) var(--sp-6);
        margin-top: var(--sp-10);
    }
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}
.site-footer__baslik {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
    margin-bottom: var(--sp-3);
}
.site-footer nav a {
    display: block;
    padding-block: var(--sp-2);
    font-size: var(--fs-md);
    color: var(--ink-soft);
}
.site-footer nav a:hover { color: var(--ink); }
.site-footer__alt {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-faint);
}

@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-8); }
}

/* ---- Şehir seçici ---- */
.sehir-liste { max-height: 50vh; overflow-y: auto; margin-inline: calc(var(--sp-2) * -1); }
.sehir-satir {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
    background: none; border: 0; border-bottom: 1px solid var(--line);
    font-size: var(--fs-lg); font-weight: var(--fw-semibold);
    color: var(--ink); text-align: left;
}
.sehir-satir:last-child { border-bottom: 0; }
.sehir-satir:active { background: var(--surface-alt); }
.sehir-satir--secili { color: var(--accent-warm); }
.sehir-satir--secili::after {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-warm); flex-shrink: 0;
}

/* ---- Liste kartları (kapak ızgarası) ---- */
.liste-izgara {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}
@media (min-width: 600px)  { .liste-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .liste-izgara { grid-template-columns: repeat(5, 1fr); } }

.liste-kart { display: flex; flex-direction: column; gap: var(--sp-1); }
.liste-kart__kapak {
    aspect-ratio: 1;
    border-radius: var(--r);
    overflow: hidden;
    background: linear-gradient(140deg, var(--accent-soft), var(--surface-alt));
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--sp-2);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/*
 * Liste kapağı görselleri FOTOĞRAF DEĞİL, İKON.
 *
 * table_user_lists.image alanındaki değerler uygulamanın hazır ikon
 * kümesi (food1.png, food4.png …) ve her biri ZATEN kendi renkli
 * dairesini içeriyor. Bunları object-fit:cover ile kartın tamamına
 * yaymak, dev bir emoji ızgarası görüntüsü veriyordu.
 *
 * contain + yastıklama: ikon kendi oranını koruyor, kenarlarda nefes
 * payı kalıyor ve daire kartın içinde bir nesne gibi duruyor.
 * Kart zemini de saydam: ikonun kendi dairesi zaten var, arkasına
 * ikinci bir gradyan koymak iki daire üst üste demek.
 */
.liste-kart__kapak img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 14%;
}
.liste-kart__kapak:has(img) {
    background: var(--surface-alt);
}

/* :has() desteklemeyen tarayıcılarda gradyan kalır — ikon yine
   contain ile ölçekleniyor, yalnızca zemin biraz daha renkli olur. */
.liste-kart__harf {
    font-size: 44px; font-weight: var(--fw-extra);
    color: var(--accent-warm); opacity: 0.5;
}
.liste-kart__ad  { font-weight: var(--fw-bold); font-size: var(--fs-base); }
.liste-kart__alt { font-size: var(--fs-sm); color: var(--ink-dim); }

@media (hover: hover) {
    .liste-kart:hover .liste-kart__kapak {
        transform: translateY(-3px);
        box-shadow: var(--shadow-pop);
    }
}

/* ---- Kaydet düğmesi (mekân sayfası) ---- */
.kaydet-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap); padding: 0 var(--sp-5);
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-input); border-radius: var(--r-pill);
    font-size: var(--fs-base); font-weight: var(--fw-bold);
}
.kaydet-btn[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent-warm);
    color: var(--ink);
}

/* ---- Geçici bildirim (toast) ----
 *
 * PROJE GENELİ KURAL: hiçbir servis isteği sessizce başarısız olmaz.
 * Eskiden bazı çağrılar .catch içinde hiçbir şey yapmıyordu; kullanıcı
 * düğmeye basıyor, hiçbir şey olmuyor ve nedenini bilmiyordu.
 *
 * Kap SABİT, toast'lar içinde yığılıyor: eski sürümde her toast kendi
 * position:fixed'iyle geliyordu ve iki tanesi üst üste biniyordu.
 */
.toast-kap {
    position: fixed;
    left: 50%; bottom: calc(var(--nav-h) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 70;
    display: flex; flex-direction: column-reverse; gap: var(--sp-2);
    align-items: center;
    width: max-content; max-width: min(92vw, 460px);
    /* Kap tıklamayı geçiriyor, toast'ın kendisi almıyor: altındaki
       sayfa kullanılabilir kalsın. */
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--ink-strong); color: #fff;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-pill);
    font-size: var(--fs-base); font-weight: var(--fw-semibold);
    line-height: 1.35;
    text-align: center;
    box-shadow: var(--shadow-pop);
    cursor: pointer;
    animation: toastIn 250ms var(--ease);
}
/* Hata daha uzun kalıyor ve kırmızı: kullanıcı okumadan kaçmasın. */
.toast--hata    { background: var(--danger); }
.toast--basarli { background: #1B7F4B; }

.toast[data-cikiyor="true"] { animation: toastOut 280ms var(--ease) forwards; }

@keyframes toastIn  { from { opacity: 0; transform: translateY(12px); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
    .toast, .toast[data-cikiyor="true"] { animation-duration: 1ms; }
}
@media (min-width: 1024px) { .toast-kap { bottom: var(--sp-6); } }

/* ---- Şehir ızgarası (ana sayfa) ---- */
.sehir-izgara {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}
@media (min-width: 600px)  { .sehir-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sehir-izgara { grid-template-columns: repeat(6, 1fr); } }

.sehir-kutu {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.sehir-kutu__ad   { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.sehir-kutu__sayi { font-size: var(--fs-sm); color: var(--ink-dim); }
.sehir-kutu:active { transform: scale(0.98); }
@media (hover: hover) {
    .sehir-kutu:hover { border-color: var(--accent-warm); transform: translateY(-2px); }
}

/* Ray içindeki liste kartları daha dar olsun */
.rail .liste-kart { width: 100%; }

/* ---- Hesap menüsü (mobil footer'ın yerini alır) ----
 *
 * Mobil uygulamada site bağlantıları Hesap sekmesi altında bir menüde
 * duruyor; web de aynı mantığı izliyor. Masaüstünde footer görünür
 * olduğu için bu blok orada GİZLİ — aynı bağlantıları iki yerde
 * göstermek gereksiz.
 *
 * <details> kullanılıyor: JavaScript olmadan açılıp kapanıyor ve
 * ekran okuyucular için doğru semantiği taşıyor.
 */
.hesap-menu {
    margin-top: var(--sp-5);
    background: var(--surface);
    border-radius: var(--r);
    overflow: hidden;
}
.hesap-menu__grup { border-bottom: 1px solid var(--line); }
.hesap-menu__grup:last-of-type { border-bottom: 0; }

.hesap-menu__baslik {
    display: flex; align-items: center; justify-content: space-between;
    min-height: var(--tap);
    padding: var(--sp-4);
    font-weight: var(--fw-bold);
    cursor: pointer;
    list-style: none;                 /* varsayılan üçgen gizlenir */
}
.hesap-menu__baslik::-webkit-details-marker { display: none; }
.hesap-menu__baslik svg { transition: transform var(--t) var(--ease); flex-shrink: 0; }
.hesap-menu__grup[open] .hesap-menu__baslik svg { transform: rotate(180deg); }

.hesap-menu nav {
    padding: 0 var(--sp-4) var(--sp-2);
}
.hesap-menu nav a {
    display: flex; align-items: center; gap: var(--sp-2);
    min-height: var(--tap);
    padding-block: var(--sp-2);
    color: var(--ink-soft);
    font-size: var(--fs-md);
}
.hesap-menu nav a:active { color: var(--ink); }

.hesap-menu__alt {
    padding: var(--sp-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-faint);
    text-align: center;
}

@media (min-width: 1024px) {
    /* Masaüstünde footer var; menüyü tekrar göstermeye gerek yok. */
    .hesap-menu { display: none; }
}

/* ---- Mobil ince şerit ----
 *
 * Footer mobilde gizli ama Google MOBİL-ÖNCELİKLİ indeksliyor:
 * display:none bağlantıları görmüyor, hesap menüsü de giriş
 * gerektirdiği için Googlebot oraya giremiyor. Bu şerit site geneli
 * iç bağlantıyı taranabilir tutuyor ve tek satır kaplıyor.
 */
.mobil-serit {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-4);
    margin-top: var(--sp-8);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-faint);
}
/* Dokunma alanı: bağlantılar 18px yüksekliğindeydi ve parmakla
   isabet ettirmek zordu. Dikey dolgu metni büyütmeden alanı büyütüyor;
   negatif dikey boşluk şeridin toplam yüksekliğini korumasını sağlıyor. */
.mobil-serit a {
    color: var(--ink-dim);
    display: inline-flex; align-items: center;
    min-height: 40px;
    padding-inline: var(--sp-1);
    margin-block: calc(var(--sp-2) * -1);
}

@media (min-width: 1024px) {
    /* Masaüstünde tam footer var; şerit gereksiz tekrar. */
    .mobil-serit { display: none; }
}

/* ---- Gurme vitrini (Türkiye ilk 10) ----
 *
 * Ray kartları sabit genişlikte: yüzde kullanılsa geniş ekranda profil
 * fotoğrafı gereksiz büyür ve "ilk 10" bir vitrin olmaktan çıkıp
 * dev portreler dizisine döner.
 */
/* PopulerGourmetCollectionViewCell: 180×220pt. */
.rail--gurme { grid-auto-columns: 176px; }

.gurme-kart {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding-top: var(--sp-2);
}
.gurme-kart__foto {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-alt);
    margin-bottom: var(--sp-3);
}
/* Sıra rozeti: vitrinin "ilk 10" olduğunu görsel olarak taşıyan şey. */
.gurme-kart__sira {
    position: absolute; top: 0; left: 12px;
    min-width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    padding-inline: 6px;
    background: var(--ink-strong); color: #fff;
    border: 2px solid var(--bg);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm); font-weight: var(--fw-extra);
}
.gurme-kart__ad {
    font-weight: var(--fw-bold); font-size: var(--fs-base);
    line-height: 1.25;
    /* İki satırdan sonra kes: uzun adlar kart yüksekliklerini
       birbirinden ayırıp rayı tırtıklı gösteriyordu. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.gurme-kart__alt { font-size: var(--fs-sm); color: var(--ink-dim); margin-top: 2px; }

/* ---- Popüler Lezzetler kartı ----
 *
 * Mobil uygulamanın PopularProductCollectionViewCell karşılığı:
 * 12px köşe, kapak görseli, ürün adı, altında HANGİ MEKÂN olduğu.
 * Mekân adı olmadan ürün havada kalıyor — "Adana Kebap" tek başına
 * hangi işletmenin olduğunu söylemiyor.
 */
/* PopularProductCollectionViewCell: 221×281pt. */
.rail--lezzet { grid-auto-columns: 216px; }


/* ---- Popüler lezzet kartı ----
 *
 * ÖNCEKİ SÜRÜM BOŞ GÖRÜNÜYORDU: kare (1:1) fotoğraf 216px'lik rayda
 * 216px yükseklik kaplıyordu ve kart bir gövdesi olmadığı için metin
 * havada duruyordu. Görseli olmayan üründe kocaman gri bir alanın
 * ortasında soluk bir logo kalıyor, kart "yüklenememiş" gibi
 * okunuyordu.
 *
 * Üç değişiklik:
 *   4:3 kapak — yemek fotoğrafı için doğal oran, dikey ölü alan yok
 *   gövde     — kart artık yüzeyi ve gölgesi olan bir nesne
 *   beğeni    — ürünün TEK gerçek sinyali (puanı yok)
 */
.lezzet-kart {
    display: flex; flex-direction: column;
    background: var(--surface);
    /* .card ve .place-card ile aynı: kenarlık + var(--r).
       Bu tasarım dili gölge kullanmıyor; --r-lg sheet köşesi için. */
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.lezzet-kart__kapak {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-alt);
}
.lezzet-kart__foto {
    /* MUTLAK KONUM ŞART: akışta kalırsa img'in kendi ölçüsü kapağın
       yüksekliğini belirliyor ve height:100% ile döngü oluşuyor —
       tarayıcı aspect-ratio'yu bırakıp görselin doğal ölçüsüne
       düşüyordu (kare yer tutucuda 4:3 yerine 1:1). */
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* Görseli olmayan ürün: yer tutucu KÜÇÜK ve ortada dursun. Kapağı
   dolduran dev logo "görsel yüklenemedi" izlenimi veriyordu. */
.lezzet-kart__kapak--bos {
    background:
        radial-gradient(circle at 50% 45%, rgb(var(--bg-rgb)) 0%, var(--surface-alt) 70%);
}
.lezzet-kart__kapak--bos .lezzet-kart__foto {
    object-fit: contain;
    padding: 22%;
    opacity: 0.35;
}
.lezzet-kart__begeni {
    position: absolute; right: var(--sp-2); bottom: var(--sp-2);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    background: rgb(var(--ink-strong-rgb) / 0.72);
    color: #fff;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    backdrop-filter: blur(6px);
}
.lezzet-kart__govde {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--sp-3) var(--sp-3) var(--sp-4);
}
.lezzet-kart__ad {
    font-weight: var(--fw-bold); font-size: var(--fs-base); line-height: 1.25;
    /* İki satırda kes: uzun ürün adları kart yüksekliklerini ayırıp
       rayı tırtıklı gösteriyor. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.lezzet-kart__mekan {
    font-size: var(--fs-sm); color: var(--ink-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*
 * hidden NİTELİĞİ HER ZAMAN KAZANIR.
 *
 * Tarayıcının varsayılan [hidden] { display: none } kuralı bir YAZAR
 * stiliyle eziliyor: .konum-teklif { display: flex } yazıldığı anda
 * hidden işe yaramaz oluyor. Bu, "JS ile gizledim ama görünüyor"
 * hatasının en yaygın sebebi ve tam olarak burada yaşandı.
 *
 * !important burada doğru kullanım: nitelik bir DURUM bildiriyor,
 * düzen kuralı değil; hiçbir sınıfın onu ezmesi doğru olmaz.
 */
[hidden] { display: none !important; }

/* ---- Konum teklif kartı ----
 * Uygulamadaki izin ekranının web karşılığı. Kendiliğinden konum
 * sormuyoruz; kart ne olacağını söylüyor, karar kullanıcının.
 */
/* Tek satırlık şerit — eskiden 155px'lik bir karttı ve ilk mekân
   kartını yarım ekran aşağı itiyordu. */
.konum-teklif {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    margin-block: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.konum-teklif span { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.konum-teklif .btn { min-height: 38px; padding-inline: var(--sp-4); font-size: var(--fs-sm); }

/* ---- Segment (Keşfet / Listelerim) ----
 * Mobil uygulamadaki GFSegmentedControl'ün karşılığı: beyaz zemin,
 * 12px köşe, seçili öge koyu zeminli.
 */
.segment {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: var(--sp-5);
}
.segment__ogesi {
    display: flex; align-items: center; justify-content: center;
    min-height: 38px;
    border-radius: calc(var(--r) - 5px);
    font-size: var(--fs-base); font-weight: var(--fw-bold);
    color: var(--ink-dim);
    text-align: center;
}
.segment__ogesi[aria-current] {
    background: var(--ink-strong);
    color: #fff;
}

/* ---- Bildirim satırı ---- */
.bildirim {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4);
}
/* Okunmamış: sol kenarda vurgu şeridi. Zemin rengi değiştirmek yerine
   şerit kullanıldı — kart zemini beyaz kalınca liste sakin duruyor. */
.bildirim--yeni { border-left: 3px solid var(--accent-warm); }
.bildirim__baslik { display: block; font-weight: var(--fw-bold); }
.bildirim__metin {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55;
}
.bildirim__zaman {
    display: block; margin-top: var(--sp-2);
    font-size: var(--fs-2xs); color: var(--ink-faint);
}

/* ---- Lezzet Profili anketi ---- */
.ilerleme {
    height: 6px;
    background: var(--surface-alt);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.ilerleme > span {
    display: block; height: 100%;
    background: var(--accent-warm);
    border-radius: inherit;
    transition: width var(--t) var(--ease);
}

/*
 * Seçenek satırı. Radyo/onay kutusu GİZLENMİYOR, küçültülüp sola
 * alınıyor: gizlenirse klavye odağı görünmez oluyor ve ekran okuyucu
 * dışındaki kullanıcılar hangi seçeneğin seçili olduğunu ancak zeminden
 * anlıyor. Görünür kalması hem erişilebilir hem tanıdık.
 */
.secenek {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line-input);
    border-radius: var(--r);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}
.secenek input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--ink-strong); }
.secenek:has(input:checked) { border-color: var(--ink-strong); background: var(--surface-alt); }
/* :has() desteklemeyen tarayıcıda odak halkası yine görünüyor. */
.secenek:focus-within { outline: 2px solid var(--ink-strong); outline-offset: 2px; }

/* ---- Favori (kalp) düğmesi ----
 * Uygulamadaki hızlı favorileme. "Kaydet"ten ayrı: kaydet bir liste
 * seçtiriyor, favori tek dokunuşla özel favori listesine atıyor.
 * Yalnızca ikon taşıdığı için kare; dokunma hedefi 44px.
 */
.favori-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap);
    background: var(--surface);
    border: 1px solid var(--line-input);
    border-radius: var(--r-pill);
    color: var(--ink);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.favori-btn:active { transform: scale(0.94); }
.favori-btn--dolu { color: var(--danger); border-color: var(--danger); }

/* ---- Sayfa sheet'i (menü, yorumlar) ----
 *
 * Menü ve yorumlar GERÇEK SAYFALAR olarak kalıyor (SEO: menüde
 * Menu/MenuItem yapısal verisi var). Mobilde üzerlerine sheet açılıyor;
 * JS kapalıysa bağlantılar normal sayfalara gidiyor.
 */
.sheet--sayfa {
    /* Tam ekran: menü uzun ve yarım ekranda okunmuyor. Üstte küçük bir
       boşluk kalıyor ki altta bir sayfa olduğu görülsün — tam kaplayan
       bir katman "yeni sayfa açıldı" hissi verir, oysa geri dönülecek. */
    top: var(--sp-8); bottom: 0;
    max-height: none;
    display: flex; flex-direction: column;
    padding: 0;
    /* Taban .sheet kuralı overflow:auto veriyor. Burada kapatılmazsa
       sheet'in KENDİSİ kayıyor ve başlık yukarı kaçıyor. Kaydırma
       yalnızca .sheet__govde'de. */
    overflow: hidden;
}
.sheet--sayfa .sheet__tutamac { margin: var(--sp-3) auto var(--sp-1); top: 0; }

.sheet__baslik {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.sheet__baslik h2 {
    flex: 1; min-width: 0;
    font-size: var(--fs-lg); font-weight: var(--fw-bold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet__kapat {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap);
    margin-right: calc(var(--sp-2) * -1);
    border-radius: var(--r-pill);
    color: var(--ink-dim);
    flex-shrink: 0;
}

/* Kaydırma BURADA — sheet'in kendisinde değil. Böylece başlık sabit
   kalıyor ve sürükleyerek kapatma yalnızca içerik en üstteyken
   devreye giriyor (app.js scrollTop kontrolü bu öğeye bakıyor). */
.sheet__govde {
    flex: 1; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
}
/* Parça içindeki kap kendi yastıklamasını getiriyor; sheet'te fazla. */
.sheet__govde .container { padding-inline: var(--sp-4); }
/* Parçadaki kırıntı yolu sheet'te gereksiz — başlık zaten üstte. */
.sheet__govde nav[aria-label="Sayfa yolu"] { display: none; }

.sheet__yukleniyor {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-10) var(--sp-4);
    color: var(--ink-dim); font-size: var(--fs-sm);
}
.sheet__spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--line-input);
    border-top-color: var(--ink-strong);
    border-radius: 50%;
    animation: sheetDon 700ms linear infinite;
}
@keyframes sheetDon { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .sheet__spinner { animation-duration: 2s; }
}

@media (min-width: 1024px) {
    /* Masaüstünde sheet zaten ortada modal; sayfa sheet'i de öyle ama
       daha uzun. */
    .sheet--sayfa { top: auto; bottom: auto; height: 82vh; }
}

/* ---- Giriş karşılama ekranı ----
 *
 * Mobil uygulamadaki MembershipLanding'in karşılığı: üstte görsel,
 * altta yöntem düğmeleri. Kabuk (topbar/tabbar) YOK — 'bare' düzeni
 * kullanılıyor; giriş ekranında gezinme çubuğu göstermek kullanıcıyı
 * yarı yolda başka yere çağırıyor.
 */
.karsilama {
    position: relative;   /* geri tuşu buna göre konumlanıyor */
    min-height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--bg);
}

.karsilama__gorsel {
    position: relative;
    /* Görselin ne kadar görüneceği ekran boyuna göre: alçak ekranlarda
       düğmeler katlanmanın altına inmesin. */
    height: clamp(180px, 34dvh, 340px);
    overflow: hidden;
    flex-shrink: 0;
}
.karsilama__gorsel img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Görselin ilgi noktası masa; üst kısımdaki boş duvar kırpılıyor. */
    object-position: 50% 62%;
    display: block;
}
.karsilama__perde {
    position: absolute; inset-inline: 0; bottom: 0;
    /* Perde görselin yarısını kaplıyor: %45'te geçiş hâlâ sert bir
       çizgi olarak okunuyordu. Duraklar eşit aralıklı değil —
       doğrusal bir gradyan gözde bant üretiyor. */
    height: 62%;
    background: linear-gradient(
        to bottom,
        rgb(var(--bg-rgb) / 0) 0%,
        rgb(var(--bg-rgb) / 0.35) 42%,
        rgb(var(--bg-rgb) / 0.8) 72%,
        var(--bg) 100%
    );
}

.karsilama__govde {
    flex: 1;
    display: flex; flex-direction: column;
    /* Uzun ekranlarda içerik yukarı yapışıp ortada kocaman bir boşluk
       bırakıyordu. Grup ortalanıyor, misafir bağlantısı margin-top:auto
       ile yine dipte kalıyor. */
    justify-content: center;
    gap: var(--sp-5);
    width: 100%; max-width: 420px;
    margin-inline: auto;
    padding: 0 var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    /* Görselin perdesiyle örtüşüyor: marka görselin içinden çıkıyor. */
    margin-top: calc(var(--sp-8) * -1);
    position: relative;
}

.karsilama__marka { text-align: center; }
.karsilama__marka img { display: block; margin: 0 auto var(--sp-3); }
.karsilama__marka h1 {
    font-size: var(--fs-2xl); font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
}
.karsilama__marka p {
    margin-top: var(--sp-2);
    color: var(--ink-dim); font-size: var(--fs-sm);
    text-wrap: balance;
}

.karsilama__yontemler { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Uygulamadaki GFSocialButton: ikon solda, metin ortada. */
.btn-sosyal {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--line-input);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-strong);
    font-size: var(--fs-base); font-weight: var(--fw-medium);
    transition: background 120ms ease, border-color 120ms ease;
}
.btn-sosyal:hover { background: var(--surface-alt); border-color: var(--line); }
.btn-sosyal svg { flex-shrink: 0; color: var(--ink-dim); }

/* Google'ın kendi iframe düğmesi ölçüsünü kendi belirliyor; kapsayıcı
   onu diğerleriyle aynı genişliğe ve hizaya oturtuyor. */
.karsilama__google { display: flex; justify-content: center; }
.karsilama__google > div:last-of-type { width: 100%; }

.karsilama__kayit {
    text-align: center; font-size: var(--fs-sm); color: var(--ink-dim);
}
.karsilama__kayit a { font-weight: var(--fw-bold); color: var(--ink-strong); }

.karsilama__misafir {
    /* Ekranın dibine itiliyor: yöntemlerin hemen altında dururken
       "vazgeç" bir seçenekmiş gibi okunuyor ve altta kocaman boşluk
       kalıyordu. Alt kenarda ise bir çıkış kapısı. */
    margin-top: auto;
    display: block; text-align: center;
    padding: var(--sp-3);
    font-size: var(--fs-sm); color: var(--ink-dim);
    text-decoration: underline; text-underline-offset: 3px;
}

@media (min-width: 768px) {
    /* Geniş ekranda görsel solda, form sağda: dikey akış masaüstünde
       ekranın yarısını boş bırakıyordu. */
    .karsilama { flex-direction: row; align-items: stretch; }
    .karsilama__gorsel { height: auto; width: 45%; max-width: 560px; }
    .karsilama__gorsel img { object-position: 50% 50%; }
    .karsilama__perde {
        inset: 0; height: auto;
        background: linear-gradient(to right, transparent 55%, var(--bg));
    }
    .karsilama__govde {
        margin-top: 0;
        padding-block: var(--sp-8);
    }
}

/* ---- İskelet (yer tutucu) ----
 *
 * Veri istemcide gelen bölümler için. Boş bir bekleyiş yerine kartın
 * ÖLÇÜSÜNÜ tutan gri bloklar: veri gelince düzen kaymıyor, çünkü
 * yükseklik zaten doğru.
 */
.place-card--iskelet { pointer-events: none; }
.place-card--iskelet .place-card__img {
    background: var(--surface-alt);
    aspect-ratio: 16 / 9;
    border-radius: inherit;
}
.iskelet-satir {
    display: block;
    height: 12px;
    /* Ölçüler gerçek kartla eşleşecek şekilde: 3 satır + bu boşluklarla
       iskelet 224px, mekân kartıyla aynı. Kısa kalırsa veri gelince ray
       zıplıyor — iskeletin varlık sebebi tam olarak bunu önlemek. */
    margin-block: 6px;
    border-radius: 6px;
    background: var(--surface-alt);
}
.iskelet-satir:last-child { height: 15px; }   /* puan satırında ikon var */
.place-card--iskelet .place-card__img,
.iskelet-satir {
    /* Nabız: donmuş bir gri kutu "yükleniyor" değil "bozuk" okunuyor. */
    animation: iskeletNabiz 1.4s ease-in-out infinite;
}
@keyframes iskeletNabiz {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .place-card--iskelet .place-card__img,
    .iskelet-satir { animation: none; opacity: 0.8; }
}

/* ---- Gastfood Önerileri (editoryal seçki kartı) ----
 *
 * Liste kartından BİLEREK farklı: kullanıcı bir mekânı kimin
 * önerdiğini görebilmeli. Seçki kurum imzalı, kullanıcı listesi UGC —
 * ikisi aynı görünseydi editoryal seçim kalabalıkta kaybolurdu.
 */
.rail--oneri { grid-auto-columns: 264px; }

.oneri-kart {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.oneri-kart__kapak {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--surface-alt);
}
.oneri-kart__kapak img {
    /* Aynı sebeple mutlak: akışta kalan img kapağın oranını eziyor. */
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* Rozet kapağın üstünde: "bunu Gastfood seçti" bilgisi başlıktan önce
   okunmalı, sonra değil. */
.oneri-kart__rozet {
    position: absolute; left: var(--sp-3); top: var(--sp-3);
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    background: rgb(var(--ink-strong-rgb) / 0.82);
    color: #fff;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
    /* Koyu kapaklarda da okunsun. */
    backdrop-filter: blur(6px);
}
.oneri-kart__govde {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.oneri-kart__ad {
    font-weight: var(--fw-bold); color: var(--ink-strong);
    line-height: 1.3;
    /* İki satırda kes: üç kelimelik başlıkla on kelimelik başlık aynı
       raydayken kartlar farklı boyda oluyordu. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.oneri-kart__alt { font-size: var(--fs-sm); color: var(--ink-dim); }

/* ---- Öneriler dizini ---- */
.oneri-kart__harf {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px; font-weight: var(--fw-bold);
    color: var(--ink-faint);
    background: var(--surface-alt);
}

.oneri-izgara {
    display: grid;
    /* 180px: 375px'lik telefonda İKİ sütun. 240px'te tek sütun kalıyor
       ve seçkiler ekranı doldurup gezinmeyi yavaşlatıyordu. */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-4);
}

/* ---- Lezzet profili banner'ı ----
 *
 * Uygulamanın Keşfet ekranındaki surveyBanner'ın karşılığı: aynı metin,
 * aynı turuncu gradyan (#FA9900 → #F28000), aynı köşe yarıçapı (16px).
 *
 * Uygulamada solda bobo2.json Lottie'si dönüyor. Web'de oynatmak
 * lottie-web'i (~250 KB) yüklemek demek — bir banner için sayfa
 * bütçesinin dörtte biri. Canlılık CSS ile veriliyor.
 */
.profil-banner {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-block: var(--sp-4) var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: 16px;
    background: linear-gradient(135deg, #FA9900, #F28000);
    color: #fff;
    /* Turuncu üzerinde beyaz metin; ince gölge kenarı yumuşatıyor. */
    box-shadow: 0 4px 16px rgb(242 128 0 / 0.28);
}
.profil-banner__isaret {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.18);
    animation: profilIsik 2.6s ease-in-out infinite;
}
@keyframes profilIsik {
    0%, 100% { transform: scale(1);    background-color: rgb(255 255 255 / 0.18); }
    50%      { transform: scale(1.06); background-color: rgb(255 255 255 / 0.28); }
}
.profil-banner__metin {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0; flex: 1;
}
.profil-banner__metin strong {
    font-size: var(--fs-base); font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
}
.profil-banner__metin span {
    font-size: var(--fs-sm);
    /* Tam beyaz ikinci satır başlıkla aynı ağırlıkta okunuyordu. */
    color: rgb(255 255 255 / 0.88);
    /* Uygulamada tek satıra sığıyor; 375px'de sığmıyor. Dengeli
       bölünsün ki son satırda tek kelime kalmasın. */
    text-wrap: balance;
    line-height: 1.35;
}
.profil-banner__ok { flex-shrink: 0; opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
    .profil-banner__isaret { animation: none; }
}

/* ---- Bobo sohbet ekranı ----
 *
 * 'odak' düzeni: kabuk yok. Sohbet tek işli bir ekran — altta tabbar
 * dururken klavye açıldığında ekranın yarısı gezinme çubuğuna gidiyor.
 *
 * 100dvh (dinamik yükseklik) kullanılıyor: 100vh mobilde adres çubuğu
 * kaydıkça değişmiyor ve giriş alanı ekranın altından taşıyor.
 */
.bobo {
    display: flex; flex-direction: column;
    height: 100dvh;
    background: var(--bg);
}

.bobo__baslik {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.bobo__geri {
    display: grid; place-items: center;
    width: var(--tap); height: var(--tap);
    margin-left: calc(var(--sp-2) * -1);
    border-radius: var(--r-pill);
    color: var(--ink-dim);
}
.bobo__kimlik { display: flex; flex-direction: column; min-width: 0; }
.bobo__ad  { font-weight: var(--fw-bold); font-size: var(--fs-base); }
.bobo__alt { font-size: var(--fs-xs); color: var(--ink-dim); }

.bobo__akis {
    flex: 1; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-3);
}

/* ---- Karşılama ---- */
.bobo__karsilama {
    margin: auto 0;
    text-align: center;
    padding-block: var(--sp-6);
}
.bobo__amblem {
    display: grid; place-items: center;
    width: 64px; height: 64px;
    margin: 0 auto var(--sp-4);
    border-radius: 50%;
    background: linear-gradient(135deg, #FA9900, #F28000);
    color: #fff;
}
.bobo__karsilama h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.bobo__karsilama p {
    margin: var(--sp-2) auto 0; max-width: 34ch;
    color: var(--ink-dim); font-size: var(--fs-sm);
    text-wrap: balance;
}
.bobo__oneriler {
    display: flex; flex-direction: column; gap: var(--sp-2);
    margin-top: var(--sp-5);
}
.bobo__oneri {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-input);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-strong);
    font: inherit; font-size: var(--fs-sm);
    text-align: left;
    min-height: var(--tap);
}
.bobo__oneri:hover { background: var(--surface-alt); }

.bobo__bos {
    margin: auto; text-align: center; color: var(--ink-dim);
    display: flex; flex-direction: column; gap: var(--sp-4); align-items: center;
}

/* ---- Balonlar ---- */
.bobo-balon {
    max-width: 84%;
    padding: var(--sp-3) var(--sp-4);
    border-radius: 18px;
    font-size: var(--fs-base); line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.bobo-balon--kullanici {
    align-self: flex-end;
    background: var(--ink-strong); color: #fff;
    border-bottom-right-radius: 6px;
}
.bobo-balon--bobo {
    align-self: flex-start;
    background: var(--surface); border: 1px solid var(--line);
    border-bottom-left-radius: 6px;
}
.bobo-balon--hata { border-color: var(--danger); color: var(--danger); }

.bobo-yaziyor { display: flex; gap: 5px; align-items: center; padding: var(--sp-4); }
.bobo-yaziyor span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ink-faint);
    animation: boboNokta 1.1s ease-in-out infinite;
}
.bobo-yaziyor span:nth-child(2) { animation-delay: 0.15s; }
.bobo-yaziyor span:nth-child(3) { animation-delay: 0.3s; }
@keyframes boboNokta {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .bobo-yaziyor span { animation: none; opacity: 0.6; }
}

/* ---- Eşleşen mekânlar (Gastfood'da kayıtlı) ---- */
.bobo-mekanlar { display: flex; flex-direction: column; gap: var(--sp-2); }
.bobo-mekan {
    display: flex; gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.bobo-mekan__foto {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover;
    background: var(--surface-alt);
}
.bobo-mekan__govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bobo-mekan__ad { font-weight: var(--fw-bold); color: var(--ink-strong); }
.bobo-mekan__meta {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm); color: var(--ink-dim);
    flex-wrap: wrap;
}
.bobo-mekan__puan {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--accent-warm); font-weight: var(--fw-semibold);
}
/* Bobo'nun gerekçesi — kuru liste yerine "neden burası". */
.bobo-mekan__neden {
    margin-top: 2px;
    font-size: var(--fs-sm); line-height: 1.45; color: var(--ink);
}
.bobo-mekan__etiket {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--surface-alt);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-dim);
}

/* ---- Eşleşmeyenler (Gastfood'da yok) ---- */
.bobo-digerleri {
    padding: var(--sp-3) var(--sp-4);
    border: 1px dashed var(--line-input);
    border-radius: var(--r);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.bobo-digerleri__baslik {
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em;
}
.bobo-diger { display: flex; flex-direction: column; gap: 2px; }
.bobo-diger__ad  { font-weight: var(--fw-semibold); color: var(--ink-strong); }
.bobo-diger__yer { font-weight: var(--fw-normal); color: var(--ink-dim); }
.bobo-diger__neden { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-dim); }

/* ---- Giriş ---- */
.bobo__giris {
    display: flex; align-items: flex-end; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}
.bobo__giris textarea {
    flex: 1;
    font: inherit; font-size: var(--fs-base);
    /* 16px altı yazı tipi iOS'ta odaklanınca sayfayı yakınlaştırıyor. */
    min-height: var(--tap);
    max-height: 140px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-input);
    border-radius: 20px;
    background: var(--bg);
    resize: none;
    line-height: 1.4;
}
.bobo__gonder {
    display: grid; place-items: center;
    width: var(--tap); height: var(--tap); flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: var(--ink-strong); color: #fff;
}
.bobo__gonder:disabled { opacity: 0.4; }

@media (min-width: 1024px) {
    /* Geniş ekranda tam genişlik sohbet okunmuyor; satır uzunluğu
       60-75 karakteri geçmemeli. */
    .bobo__akis, .bobo__giris { width: 100%; max-width: 760px; margin-inline: auto; }
}

/* Bobo giriş düğmesi — turuncu daire, arama simgesinin solunda.
   Renk marka turuncusu: yapay zekâ özelliği diğer araçlardan ayrılsın. */
.topbar__bobo {
    display: grid; place-items: center;
    width: var(--tap); height: var(--tap);
    border-radius: 50%;
    color: #F28000;
}
.topbar__bobo:hover { background: rgb(242 128 0 / 0.1); }

/* ---- Şehir tanıtımı (ana sayfa önizlemesi) ----
 *
 * Kırpma CSS ile yapılıyor, sunucuda değil: metnin TAMAMI HTML'de
 * duruyor. Sunucuda kırpmak arama motorundan ve ekran okuyucudan
 * içerik saklamak olurdu.
 */
.sehir-tanitim { padding-bottom: var(--sp-3); }
.sehir-tanitim__metin {
    color: var(--ink-dim);
    font-size: var(--fs-sm);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sehir-tanitim__devam {
    display: inline-flex; align-items: center; gap: 3px;
    margin-top: var(--sp-2);
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--ink-strong);
}

/* ---- Şehir lezzet rehberi (/{sehir}/ne-yenir) ---- */
.rehber__kapak {
    aspect-ratio: 21 / 9;
    max-height: 340px;
    overflow: hidden;
    background: var(--surface-alt);
}
.rehber__kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rehber__govde {
    /* Bu bir YAZI: okuma genişliği 65-75 karakteri geçmemeli. */
    max-width: 680px;
    padding-block: var(--sp-6) var(--sp-10);
}
.rehber__yol {
    display: flex; gap: var(--sp-2); align-items: center;
    font-size: var(--fs-sm); color: var(--ink-dim);
    margin-bottom: var(--sp-3);
}
.rehber__yol a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; }

.rehber__govde h1 {
    font-size: var(--fs-2xl); letter-spacing: -0.02em;
    text-wrap: balance;
}
.rehber__metin {
    margin-top: var(--sp-4);
    line-height: 1.75;
    color: var(--ink);
}
.rehber__metin p       { margin-bottom: var(--sp-4); }
.rehber__metin h2      { font-size: var(--fs-lg); margin-block: var(--sp-6) var(--sp-2); }
.rehber__metin ul,
.rehber__metin ol      { margin: 0 0 var(--sp-4) var(--sp-5); }
.rehber__metin li      { margin-bottom: var(--sp-2); }
.rehber__metin a       { text-decoration: underline; text-underline-offset: 2px; }

.rehber__altbaslik {
    font-size: var(--fs-xl);
    margin-block: var(--sp-8) var(--sp-4);
    letter-spacing: -0.01em;
}
.rehber__lezzetler { display: flex; flex-direction: column; gap: var(--sp-4); }

.lezzet-madde {
    display: flex; gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.lezzet-madde__foto {
    width: 92px; height: 92px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover;
    background: var(--surface-alt);
}
.lezzet-madde__govde { min-width: 0; }
.lezzet-madde__govde h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.lezzet-madde__govde p  {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-dim);
}
.lezzet-madde__nerede {
    display: flex; align-items: flex-start; gap: 5px;
    color: var(--ink) !important;
    font-weight: var(--fw-medium);
}
.lezzet-madde__nerede svg { flex-shrink: 0; margin-top: 2px; color: var(--ink-faint); }

.rehber__kapanis {
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
    text-align: center;
}
.rehber__kapanis p { color: var(--ink-dim); margin-bottom: var(--sp-3); }

@media (max-width: 480px) {
    /* Dar ekranda 92px foto + metin, metne 180px bırakıyor. */
    .lezzet-madde { flex-direction: column; }
    .lezzet-madde__foto { width: 100%; height: 160px; }
}

/* ---- Tam ekran görsel büyüteci ----
 *
 * Sayfa DEĞİŞMİYOR: katman mevcut sayfanın üstüne biniyor, kapanınca
 * kaldığı yerden devam ediliyor. Zemin tam siyah — fotoğraf dışında
 * hiçbir şey dikkat çekmesin.
 */
[data-buyut] { cursor: zoom-in; }

.buyutec {
    position: fixed; inset: 0; z-index: 200;
    background: #000;
    display: none;
    /* Tarayıcı kendi kaydırma/yakınlaştırma jestlerini üstlenmesin;
       hepsi JS'te. */
    touch-action: none;
    user-select: none;
    overscroll-behavior: contain;
}
.buyutec[data-acik="true"] { display: block; }

/* Arkadaki sayfa kaymasın — katman kapanınca aynı yere dönülüyor. */
body.buyutec-acik { overflow: hidden; }

.buyutec__sahne {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    overflow: hidden;
}
.buyutec__resim {
    max-width: 100%; max-height: 100%;
    /* Yakınlaştırma transform ile: width/height değiştirmek her karede
       yeniden yerleşim tetikliyor ve mobilde tutukluk yapıyor. */
    transform-origin: center center;
    will-change: transform;
    -webkit-user-drag: none;
}
.buyutec[data-yakin="true"] .buyutec__resim { cursor: grab; }

.buyutec__kapat {
    position: absolute; top: 0; right: 0; z-index: 2;
    /* Güvenli alan: çentikli telefonlarda düğme durum çubuğunun
       altında kalıyordu. */
    margin: calc(var(--sp-2) + env(safe-area-inset-top, 0px)) var(--sp-2) 0 0;
    width: var(--tap); height: var(--tap);
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    backdrop-filter: blur(8px);
}
.buyutec__kapat:hover { background: rgb(255 255 255 / 0.24); }

.buyutec__sayac {
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    margin-top: calc(var(--sp-4) + env(safe-area-inset-top, 0px));
    padding: 4px var(--sp-3);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    backdrop-filter: blur(8px);
    pointer-events: none;
}
.buyutec__sayac:empty { display: none; }

.buyutec__ok {
    position: absolute; top: 50%; z-index: 2;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    backdrop-filter: blur(8px);
}
.buyutec__ok--sol { left: var(--sp-3); }
.buyutec__ok--sag { right: var(--sp-3); }
.buyutec__ok:hover { background: rgb(255 255 255 / 0.24); }

/* Yakınlaştırılmışken oklar gizli: kaydırma o anda gezinme değil
   görüntüyü sürükleme demek, iki davranış çakışıyor. */
.buyutec[data-yakin="true"] .buyutec__ok { display: none; }

@media (hover: none) {
    /* Dokunmatikte oklar YOK: kenarlara dokunmak zaten geziniyor ve
       düğmeler fotoğrafın üstünü kapatıyor. */
    .buyutec__ok { display: none; }
}

/* ---- Detay ekranı başlığı ----
 *
 * Uygulamadaki GFNavBarView'in karşılığı: solda geri, ortada sayfanın
 * adı, sağda arama. Ana ekran kabuğu (logo + şehir seçici) bir detay
 * sayfasında gürültü — kullanıcı oraya bir şeye bakmaya geldi.
 */
.detay-baslik {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: var(--sp-1);
    height: var(--nav-h);
    padding-inline: var(--sp-2);
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.detay-baslik__geri,
.detay-baslik__ara {
    display: grid; place-items: center;
    width: var(--tap); height: var(--tap);
    flex-shrink: 0;
    border-radius: var(--r-pill);
    color: var(--ink-strong);
}
.detay-baslik__ara { color: var(--ink-dim); }
.detay-baslik__geri:hover,
.detay-baslik__ara:hover { background: var(--surface-alt); }

.detay-baslik__ad {
    flex: 1; min-width: 0;
    font-size: var(--fs-base); font-weight: var(--fw-bold);
    /* Uzun mekân adları başlığı iki satıra çıkarıp çubuğu büyütüyordu. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: center;
    /* Sağdaki arama düğmesi kadar sola kaydır: başlık gerçekten
       ortalanmış görünsün. */
    padding-inline: var(--sp-1);
}

@media (min-width: 1024px) {
    /* Masaüstünde üst gezinme (desknav) zaten var; ikinci bir çubuk
       fazla. Başlık kalıyor ama yapışkan değil. */
    .detay-baslik { position: static; }
}

/* JS kapalıyken sunucu mesajı yine okunsun. app.js bu öğeyi bulup
   toast'a çeviriyor ve kaldırıyor; JS yoksa olduğu yerde kalıyor. */
.sunucu-mesaji {
    margin: var(--sp-4) auto 0;
    max-width: 680px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r);
    background: var(--danger-bg);
    color: var(--ink-strong);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    text-align: center;
}
.sunucu-mesaji--bilgi { background: var(--accent-soft); }

/* ---- "Buradayım" — konumdan işletme tespiti ---- */
.burada__giris {
    text-align: center;
    padding-block: var(--sp-8) var(--sp-6);
}
.burada__amblem {
    display: grid; place-items: center;
    width: 64px; height: 64px;
    margin: 0 auto var(--sp-4);
    border-radius: 50%;
    background: var(--ink-strong); color: #fff;
}
.burada__giris h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.burada__giris p {
    margin: var(--sp-3) auto var(--sp-5);
    max-width: 42ch;
    color: var(--ink-dim); font-size: var(--fs-sm); line-height: 1.55;
    text-wrap: balance;
}
/* Konumun saklanmadığını SÖYLEMEK, izin oranını doğrudan etkiliyor. */
.burada__not {
    margin-top: var(--sp-3) !important;
    font-size: var(--fs-xs) !important; color: var(--ink-faint) !important;
}

.btn-metin {
    background: none; border: 0; padding: 0;
    font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--ink-strong); cursor: pointer;
}

.burada-kart {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.burada-kart__foto {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover;
    background: var(--surface-alt);
}
.burada-kart__foto--bos {
    display: grid; place-items: center;
    font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--ink-faint);
}
.burada-kart__govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.burada-kart__ad {
    display: flex; align-items: center; gap: var(--sp-2);
    font-weight: var(--fw-bold); color: var(--ink-strong);
}
.burada-kart__rozet {
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs); font-weight: var(--fw-bold);
    flex-shrink: 0;
}
.burada-kart__rozet--uye { background: var(--accent-soft); color: var(--ink-strong); }
.burada-kart__meta {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    font-size: var(--fs-sm); color: var(--ink-dim);
}
.burada-kart__puan {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--accent-warm); font-weight: var(--fw-semibold);
}
.burada-kart__adres {
    font-size: var(--fs-xs); color: var(--ink-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.burada-kart__ok { flex-shrink: 0; color: var(--ink-faint); }
.burada-kart--iskelet { pointer-events: none; }

/* ---- Kayıtsız işletme özeti ---- */
.dis-yer__ust { padding-block: var(--sp-6) var(--sp-4); }
.dis-yer__ust h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.dis-yer__meta {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    margin-top: var(--sp-2);
    font-size: var(--fs-sm); color: var(--ink-dim);
}
.dis-yer__puan {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--accent-warm); font-weight: var(--fw-bold);
}
.dis-yer__adres { margin-top: var(--sp-2); color: var(--ink-dim); font-size: var(--fs-sm); }

/* Kullanıcı bu işletmenin Gastfood'da OLMADIĞINI bilmeli. */
.dis-yer__uyari {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r);
    background: var(--accent-soft);
    font-size: var(--fs-sm); line-height: 1.5;
}

.dis-yer__ozet { margin-top: var(--sp-5); }
.dis-yer__ozet h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.dis-yer__ozet h3 {
    font-size: var(--fs-base); margin-block: var(--sp-5) var(--sp-2);
}
.dis-yer__ozet p { line-height: 1.7; }
.dis-yer__lezzetler {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    list-style: none; margin: 0; padding: 0;
}
.dis-yer__lezzetler li {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--line);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.dis-yer__terazi {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}
.dis-yer__terazi ul { margin: 0 0 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.7; }
.dis-yer__kaynak {
    margin-top: var(--sp-5);
    font-size: var(--fs-xs) !important; color: var(--ink-faint);
    line-height: 1.5 !important;
}
.dis-yer__saat { padding: var(--sp-4); margin-top: var(--sp-5); }
.dis-yer__saat summary { font-weight: var(--fw-bold); cursor: pointer; }
.dis-yer__saat ul { margin: var(--sp-3) 0 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.8; }
.dis-yer__eylemler { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.dis-yer__eylemler .btn { flex: 1; }
.dis-yer__davet {
    margin-top: var(--sp-8);
    padding: var(--sp-5);
    border: 1px dashed var(--line-input);
    border-radius: var(--r);
    text-align: center;
}
.dis-yer__davet p { color: var(--ink-dim); margin-bottom: var(--sp-3); }

/* Eylem şeridi — ana sayfadaki tek satırlık giriş bağlantıları.
 *
 * ADI GENEL: aynı görünümü iki ayrı iş kullanıyor (Buradayım ve Lezzet
 * Endeksi). Sınıf ".burada-serit" iken hangisinin hangisi olduğu ne
 * koddan ne de DOM'dan anlaşılıyordu. */
.eylem-serit {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-block: var(--sp-2) var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.eylem-serit__ikon {
    display: grid; place-items: center;
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--ink-strong); color: #fff;
}
.eylem-serit__metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.eylem-serit__metin strong { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.eylem-serit__metin span { font-size: var(--fs-sm); color: var(--ink-dim); }
.eylem-serit svg:last-child { flex-shrink: 0; color: var(--ink-faint); }

/* ---- Gurme profili: paylaşılabilir sayfa ----
 *
 * Bu sayfa bir fenomenin Instagram biyografisinden gelen ziyaretçiyi
 * karşılıyor. İlk ekran kişisel görünmeli, kurumsal değil.
 */
.profil-kapak {
    aspect-ratio: 3 / 1;
    max-height: 220px;
    overflow: hidden;
    background: var(--surface-alt);
}
.profil-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }

.profil-ust { text-align: center; padding-block: var(--sp-8) var(--sp-5); }
.profil-ust__avatar {
    display: block; margin: 0 auto var(--sp-4);
    border-radius: 50%; object-fit: cover;
    /* Kapak varken avatar onun üstüne biniyor — profil sayfalarının
       yerleşik dili. Beyaz halka avatarı kapaktan ayırıyor. */
    border: 3px solid var(--bg);
}
.profil-ust--kapakli {
    padding-top: 0;
    margin-top: calc(var(--sp-8) * -1);
    position: relative;
}
.profil-ust--kapakli .profil-ust__avatar { width: 104px; height: 104px; }

.profil-paylas {
    margin-top: var(--sp-3);
    display: inline-flex; align-items: center; gap: var(--sp-2);
}

/* Fenomen kendi bağlantısını kopyalayıp biyografisine koyacak;
   adresi tahmin etmesini beklemek yerine önüne koyuyoruz. */
.profil-baglanti {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-3); flex-wrap: wrap;
    margin-top: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface); border: 1px dashed var(--line-input);
    border-radius: var(--r);
}
.profil-baglanti__etiket {
    width: 100%;
    font-size: var(--fs-xs); color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--fw-bold);
}
.profil-baglanti code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-sm); color: var(--ink-strong);
    overflow-wrap: anywhere;
}
.profil-ipucu {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs); color: var(--ink-faint);
}
.profil-ipucu a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- "Listelere eklendi" — sosyal kanıt ----
 *
 * Bir mekânı KİMİN önerdiği, puanın kendisinden daha ikna edici.
 * Yalnızca herkese açık listeler sayılıyor (ListService::addedBy).
 */
.ekleyen { margin-top: var(--sp-6); }

.ekleyen__ozet {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.ekleyen__ozet p { font-size: var(--fs-sm); color: var(--ink-dim); }

/* Avatarlar üst üste biniyor — "birden çok kişi" hissini tek bakışta
   veren yerleşik desen. */
.ekleyen__avatarlar { display: flex; flex-shrink: 0; }
.ekleyen__avatarlar a { display: block; margin-left: -10px; }
.ekleyen__avatarlar a:first-child { margin-left: 0; }
.ekleyen__avatarlar img {
    width: 34px; height: 34px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--surface);
    background: var(--surface-alt);
    display: block;
}

.ekleyen__baslik {
    font-size: var(--fs-base); font-weight: var(--fw-bold);
    margin-block: var(--sp-5) var(--sp-3);
}

.gurme-notlar { display: flex; flex-direction: column; gap: var(--sp-3); }
.gurme-not { display: flex; flex-direction: column; }

.gurme-not__kisi {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0; border: 0; background: none;
    font: inherit; text-align: left; cursor: pointer;
    min-height: var(--tap);
}
.gurme-not__kisi img {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 50%; object-fit: cover;
    background: var(--surface-alt);
    /* Gurme halkası: rastgele bir kullanıcıdan ayırt edilsin. */
    border: 2px solid var(--accent-warm);
}
.gurme-not__ad { font-weight: var(--fw-bold); color: var(--ink-strong); }
.gurme-not__rozet {
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ink-strong);
}

/* Konuşma baloncuğu — avatarın altında, ona bağlı bir kuyrukla. */
.gurme-not__balon {
    position: relative;
    margin: var(--sp-2) 0 0 var(--sp-6);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    border-top-left-radius: 4px;
}
.gurme-not__balon::before {
    content: '';
    position: absolute; top: -7px; left: 14px;
    width: 12px; height: 12px;
    background: var(--surface);
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    transform: rotate(45deg);
}
.gurme-not__balon p { font-size: var(--fs-sm); line-height: 1.6; }
.gurme-not__liste {
    display: inline-block; margin-top: var(--sp-2);
    font-size: var(--fs-xs); color: var(--ink-dim);
    text-decoration: underline; text-underline-offset: 2px;
}

/* JS varsa katlanıyor. Betik çalışmazsa açık kalıyor — içerik
   kaybolmasın. */
.js .gurme-not__balon[data-acik="false"] { display: none; }

/* ---- Mekân sayfasında fiyat kutusu ----
 *
 * ORTANCA gösteriliyor, ortalama değil: menüde 2.400 liralık kuzu
 * çevirme varsa ortalama yukarı kayıyor ve pahalı bir yer izlenimi
 * veriyor.
 */
.fiyat-kutu {
    margin-top: var(--sp-5);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.fiyat-kutu__ana { display: flex; flex-direction: column; gap: 2px; }
.fiyat-kutu__etiket {
    font-size: var(--fs-xs); color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--fw-bold);
}
.fiyat-kutu__tutar {
    font-size: var(--fs-2xl); font-weight: var(--fw-bold);
    letter-spacing: -0.02em; line-height: 1.1;
}
.fiyat-kutu__kiyas {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    color: var(--ink-dim);
}
/* Renk bir YARGI taşıyor: pahalı kötü değil. Yalnızca yön belirtiliyor,
   kırmızı/yeşil ahlaki bir işaret olurdu. */
.fiyat-kutu__kiyas--ustunde { color: var(--ink-strong); }
.fiyat-kutu__kiyas--altinda { color: #1B7F4B; }

.fiyat-kutu__aralik {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-top: var(--sp-4);
    font-size: var(--fs-sm); color: var(--ink-dim);
}
.fiyat-kutu__cizgi {
    flex: 1; height: 2px; border-radius: 2px;
    background: linear-gradient(to right, var(--line), var(--ink-faint));
}
.fiyat-kutu__kaynak {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.5;
}

/* ---- Lezzet Endeksi ---- */
.endeks__ust { padding-block: var(--sp-6) var(--sp-5); }
.endeks__rozet {
    display: inline-block;
    padding: 3px var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--ink-strong); color: #fff;
    font-size: var(--fs-2xs); font-weight: var(--fw-bold);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.endeks__ust h1 {
    margin-top: var(--sp-3);
    font-size: var(--fs-2xl); letter-spacing: -0.02em;
    text-wrap: balance;
}
.endeks__ust p {
    margin-top: var(--sp-3);
    color: var(--ink-dim); font-size: var(--fs-sm); line-height: 1.6;
    max-width: 52ch;
}
.endeks__tarih { font-size: var(--fs-xs) !important; color: var(--ink-faint) !important; }

/* Dört sütun dar telefonda sığmıyor; sütunları alt alta yığmak
   karşılaştırmayı yok eder — bu sayfanın tek işi karşılaştırma. */
.endeks__sarmal {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}
.endeks-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.endeks-tablo th,
.endeks-tablo td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    white-space: nowrap;
}
.endeks-tablo thead th {
    position: sticky; top: 0;
    background: var(--surface-alt);
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.endeks-tablo tbody tr + tr th,
.endeks-tablo tbody tr + tr td { border-top: 1px solid var(--line); }

.endeks-tablo__ad { display: block; font-weight: var(--fw-bold); color: var(--ink-strong); }
/* Kaç mekândan derlendiği görünür: 42 mekândan çıkan ortalama ile
   8 mekândan çıkan aynı ağırlıkta değil. */
.endeks-tablo__mekan { display: block; font-size: var(--fs-xs); color: var(--ink-faint); }
.endeks-tablo__sayi { text-align: right; font-variant-numeric: tabular-nums; }
.endeks-tablo__ortalama { font-weight: var(--fw-bold); color: var(--ink-strong); }

.endeks__not {
    margin-top: var(--sp-4);
    font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.6;
}
.endeks__eylem { margin-top: var(--sp-6); text-align: center; }

/* Karşılama ekranında geri tuşu — 'odak' düzeninde kabuk yok, yani bu
   ekran tam ekran açılıyor ve başka çıkış yolu bulunmuyor. Görselin
   üstünde durduğu için beyaz ve hafif bulanık zeminli. */
.karsilama__geri {
    position: absolute; z-index: 3;
    top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
    left: var(--sp-3);
    display: grid; place-items: center;
    width: var(--tap); height: var(--tap);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.85);
    color: var(--ink-strong);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.12);
}
.karsilama__geri:hover { background: #fff; }

@media (min-width: 768px) {
    /* Geniş ekranda görsel solda; düğme yine görselin üstünde kalıyor. */
    .karsilama__geri { top: var(--sp-4); left: var(--sp-4); }
}
.endeks__uyari {
    margin-top: var(--sp-3) !important;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r);
    background: var(--accent-soft);
    font-size: var(--fs-sm) !important; color: var(--ink-strong) !important;
}
/* İkinci katman: birincil işi yeme-içme değil (oyun merkezi, kitapçı,
   otel). Rozet iddiayı olduğu kadar tutuyor. */
.burada-kart__rozet--mekan { background: var(--surface-alt); color: var(--ink-dim); }

/* Ana sayfada öne çıkan eylem şeridi — "Buradayım" sayfanın ilk
   satırında ve diğerlerinden ayrılıyor. */
.eylem-serit--one-cikan {
    border-color: var(--ink-strong);
    margin-top: var(--sp-3);
}


/* ---- Masaüstünde harita ----
 *
 * BU BLOK DOSYANIN SONUNDA, bilerek. Önce yazılmıştı ve hiç
 * uygulanmıyordu: taban `.map-shell { inset: 0 0 … 0 }` kuralı CSS
 * dosyasında DAHA SONRA geldiği için aynı özgüllükte olan bu kuralı
 * eziyordu. Ölçüldü — harita 1280px'te desknav'ın arkasına giriyordu.
 */
@media (min-width: 1024px) {
    /* Harita gezinme çubuğunun ALTINDAN başlıyor. Alt kenar 0:
       tabbar masaüstünde zaten gizli. */
    .map-shell { top: var(--desknav-h); bottom: 0; }

    /* Haritanın kendi çubuğundaki LOGO masaüstünde gizli: desknav
       zaten markayı taşıyor ve iki logo üst üste geliyordu.
       "Konumum" düğmesi kalıyor — o haritaya özel bir eylem. */
    .map-bar .logo { display: none; }

    /* overflow:hidden yalnızca mobil tam ekran harita için gerekliydi;
       masaüstünde desknav sticky ve sayfanın kaydırılabilir kalması
       lazım. */
    .body--bare { overflow: visible; }
}

/* Bobo konum adayları — "şuralardan birinde misin?" */
.bobo-adaylar {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    align-self: flex-start;
    max-width: 92%;
}
.bobo-aday {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--ink-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-strong);
    font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    min-height: 40px;
    cursor: pointer;
}
.bobo-aday:hover { background: var(--ink-strong); color: #fff; }
/* "Hiçbiri" bir seçenek ama eşit ağırlıkta değil. */
.bobo-aday--degil {
    border-color: var(--line-input); color: var(--ink-dim); font-weight: var(--fw-medium);
}
.bobo-aday--degil:hover { background: var(--surface-alt); color: var(--ink); }

/* Bobo'nun yüzü — başlıktaki durağan hâli. Karşılamadaki amblem
   zaten .bobo__amblem; burası yalnızca kimlik taşıyor. */
.bobo__yuz {
    display: block;
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #FA9900, #F28000);
}
.bobo__yuz svg { display: block; width: 100%; height: 100%; }

/* Lottie kendi <svg>'sini kabın içine koyuyor; yedek SVG ile aynı
   ölçüde dursun diye kap ölçüyü veriyor. */
.bobo__amblem svg { width: 100%; height: 100%; }

/* Şehir tanıtımının altındaki satır içi bağlantılar.
   Endeks kendi şeridini hak etmiyordu: üç şerit üst üste, kullanıcı
   tek bir mekân görmeden ekranın yarısını harcıyordu. */
.sehir-tanitim__baglantilar {
    display: flex; flex-wrap: wrap; gap: var(--sp-5);
    margin-top: var(--sp-2);
}

/* İnce banner — içerikten sonra sorulan bir çağrı, ekranı işgal
   etmemeli. Yükseklik ~40% azaldı: ikon küçüldü, alt satır tek satıra
   indi. */
.profil-banner--ince {
    padding: var(--sp-2) var(--sp-3);
    margin-block: var(--sp-5) var(--sp-2);
    gap: var(--sp-2);
}
.profil-banner--ince .profil-banner__isaret { width: 34px; height: 34px; }
.profil-banner--ince .profil-banner__isaret svg { width: 20px; height: 20px; }
.profil-banner--ince .profil-banner__metin strong { font-size: var(--fs-sm); }
.profil-banner--ince .profil-banner__metin span {
    font-size: var(--fs-xs);
    /* Tek satır: iki satırlık alt metin bandı yeniden şişiriyordu. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ---- Geniş masaüstü ----
 *
 * KULLANICI: "ana ekran web görünümde ekrana yayılmıyor".
 *
 * Yeniden tasarlamak yerine üç somut sorun düzeltiliyor. Ayrı bir
 * masaüstü tasarımı bakım yüzeyini ikiye katlar ve mobil hâli zaten
 * tutarlı — trafiğin çoğu orada.
 */
@media (min-width: 1400px) {
    /* 1. KAP DAHA GENİŞ. 1200px bir görsel/ızgara sitesi için fazla
          ihtiyatlı; 1440px'lik ekranda iki yanda 120'şer piksel boş
          kalıyordu. Metin genişliği ayrıca sınırlanıyor (aşağıda),
          yani okunabilirlik bozulmuyor. */
    :root { --container: 1360px; }
}

@media (min-width: 1024px) {
    /* GURME VE LİSTE RAYLARI MASAÜSTÜNDE DE TEK SATIR.
     *
     * Genel .rail kuralı masaüstünde sarmalayan bir ızgaraya
     * dönüşüyor — mekân kartları için doğru (12 kart, 3 satır dolu
     * görünüyor). Gurmeler için YANLIŞ: 10 avatar üç satıra yayılıp
     * devasa boşluk bırakıyor ve altındaki her şeyi aşağı itiyor.
     * İkincil bir gezinme öğesi ekranın yarısını hak etmiyor;
     * fazlasını isteyen "Tümü"ye tıklıyor. */
    .rail--gurme,
    .rail--liste {
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .rail--gurme { grid-auto-columns: 176px; }
    .rail--liste { grid-auto-columns: 200px; }

    /* 2. METİN OKUMA GENİŞLİĞİ. Şehir tanıtımı kabın tamamına
          yayılıyordu: 1200px'lik tek satır okunmuyor. Kartlar geniş
          kalabilir, PARAGRAF kalamaz. */
    .sehir-tanitim__metin { max-width: 78ch; }

    /* 3. TEK SATIRLIK ŞERİTLER kabın tamamını kaplamıyor. Bir cümle
          için 1200px'lik bir bant, boşluğu doldurmuyor — vurguluyor. */
    .eylem-serit,
    .profil-banner { max-width: 720px; }
}

/* Gurmelerin ortak seçimi — kartın üstünde kaç gurme rozeti.
   Sayı tek başına soyut; rozet kartın kendisiyle birlikte okunuyor. */
.gurme-secim { position: relative; }
.gurme-secim__rozet {
    position: absolute; top: var(--sp-2); left: var(--sp-2);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    background: rgb(var(--ink-strong-rgb) / 0.82);
    color: #fff;
    font-size: var(--fs-2xs); font-weight: var(--fw-bold);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

/* ---- Ana ekran banner'ları ----
 * Mobil uygulamanın Keşfet kaydırıcısının karşılığı. Görsel oranı
 * mobilde de web'de de aynı kalsın diye sabit: yönetimden gelen
 * görseller o orana göre hazırlanıyor. */
.rail--banner { grid-auto-columns: min(88%, 520px); }
.banner-kart {
    display: block;
    aspect-ratio: 16 / 7;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface-alt);
}
.banner-kart img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1024px) {
    /* Banner tek satır kalıyor — sarmalayan ızgara reklamı içerik
       gibi gösterirdi. */
    .rail--banner {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 520px;
        overflow-x: auto;
    }
}

/* ---- Yapay zekâ mekân özeti ----
 * İSTEK ÜZERİNE çalışıyor: özet üretmek saniyeler sürüyor ve para
 * harcıyor; her sayfa açılışında çalıştırmak faturayı ziyaretçi
 * sayısıyla çarpardı. */
.ai-yorum { margin-top: var(--sp-5); }
.ai-yorum__btn {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    font: inherit; text-align: left; cursor: pointer;
}
.ai-yorum__btn:hover { border-color: var(--ink-strong); }
.ai-yorum__btn:disabled { opacity: 0.6; cursor: default; }
.ai-yorum__ikon {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #FA9900, #F28000);
    color: #fff;
}
.ai-yorum__btn--calisiyor .ai-yorum__ikon { animation: profilIsik 1.4s ease-in-out infinite; }
.ai-yorum__metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ai-yorum__metin strong { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.ai-yorum__metin span { font-size: var(--fs-sm); color: var(--ink-dim); }

.ai-yorum__sonuc {
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.ai-yorum__bekle {
    display: flex; align-items: center; gap: var(--sp-3);
    color: var(--ink-dim); font-size: var(--fs-sm);
}
.ai-yorum__ozet { line-height: 1.7; }
.ai-yorum__sonuc h4 {
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    margin-block: var(--sp-4) var(--sp-1);
}
.ai-yorum__sonuc ul { margin: 0 0 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.7; }
/* Kaynağı söylemek şart: bu bir editör yazısı değil, türetilmiş özet. */
.ai-yorum__kaynak {
    margin-top: var(--sp-4);
    font-size: var(--fs-xs); color: var(--ink-faint);
}

/* ---- Hikaye kipi (işletme galerisi) ----
 * Instagram'daki gibi üstte ilerleme çubukları. Galeri fotoğrafları
 * için; tek bir kapak görselinde anlamsız olurdu.
 */
.buyutec__cubuklar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: none;
    gap: 4px;
    padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) var(--sp-3) 0;
    /* Kapatma düğmesiyle çakışmasın: düğme sağ üstte, çubuklar onun
       soluna kadar. */
    padding-right: calc(var(--tap) + var(--sp-3));
    pointer-events: none;
}
.buyutec[data-hikaye="true"] .buyutec__cubuklar { display: flex; }
.buyutec[data-hikaye="true"] .buyutec__sayac { display: none; }

.buyutec__cubuk {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.3);
    overflow: hidden;
}
.buyutec__cubuk-dolu {
    display: block; height: 100%; width: 0;
    background: #fff;
    border-radius: 2px;
}
/* Geçmiş fotoğraflar dolu kalıyor — nerede olduğun görünsün. */
.buyutec__cubuk[data-durum="gecti"] .buyutec__cubuk-dolu { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    /* Geçiş kapalı: ilerleme yine görünüyor ama akmıyor. */
    .buyutec__cubuk-dolu { transition: none !important; }
}

/* ---- Hikayesi olan işletmenin avatar çerçevesi ----
 * Galeri BOŞSA çerçeve YOK — dolu bir halka, arkasında bir şey
 * olduğunu vaat ediyor; boşsa o vaat yalan olur.
 */
/* HİKAYE HALKASI — dönen kısım YALNIZCA halka.
 *
 * İKİ HATA ÜST ÜSTE YAPILDI, ikisi de ölçülerek görüldü:
 *
 * 1. İlk deneme ::before (gradyan) + ::after (maske) idi. Maske rengi
 *    sayfa zeminiydi ama avatar KAPAĞIN üstüne biniyor; ayrıca
 *    .place__avatar'ın negatif margin-top'u sarmalayıcının içinde
 *    kalıp görseli halkadan dışarı itiyordu. Halka avatarın altında
 *    hilal olarak çıktı.
 *
 * 2. İkinci deneme gradyanı doğrudan sarmalayıcıya koydu ve animasyonu
 *    da oraya verdi — bu sefer AVATARIN KENDİSİ döndü. Bir öğeyi
 *    döndürmek çocuklarını da döndürüyor.
 *
 * Doğrusu: gradyan sözde öğede (maskesiz) ve dönen o. Avatar üstte,
 * kendi kenarlığıyla merkezi kapatıyor; geriye 3px'lik dönen bir
 * halka kalıyor.
 */
.place__avatar-sarmal {
    position: relative;
    display: block;
    width: max-content;
    margin: -36px auto var(--sp-3);   /* negatif boşluk BURADA, görselde değil */
    padding: 3px;
    border: 0; background: none;
    border-radius: 50%;
    cursor: pointer;
}
.place__avatar-sarmal::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #FA9900, #F28000, #E5484D, #FA9900);
    animation: hikayeHalka 4s linear infinite;
}
.place__avatar-sarmal .place__avatar {
    /* Halkanın ÜSTÜNDE: kendi beyaz kenarlığıyla merkezi kapatıyor,
       geriye yalnızca kenardaki 3px görünüyor. Maskeye gerek yok. */
    position: relative; z-index: 1;
    margin: 0;
    display: block;
}

@keyframes hikayeHalka { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .place__avatar-sarmal::before { animation: none; }
}

/* Galeri sheet'i — alttaki fotoğraf rayının yerine.
   Ray, avatar halkası zaten fotoğrafları öne çıkardığı için tekrardı
   ve sayfanın dibinde kimse görmüyordu. */
.galeri-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-2);
    padding-block: var(--sp-4);
}
.galeri-izgara img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r);
    background: var(--surface-alt);
    cursor: zoom-in;
}

/* "Sana göre" — lezzet profiline göre kişisel değerlendirme.
   Genel özetten ayrı bir kutu: kullanıcı önce bu sorunun cevabını
   arıyor ve genel metnin içinde kaybolmamalı. */
.ai-yorum__sana,
.dis-yer__sana {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r);
    background: var(--accent-soft);
}
.ai-yorum__sana strong,
.dis-yer__sana strong {
    display: block;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-dim);
    margin-bottom: var(--sp-1);
}
.ai-yorum__sana p,
.dis-yer__sana p { font-size: var(--fs-sm); line-height: 1.6; }

/* ---------------------------------------------------------------------
 * ŞEHİR SAYFASI ÜST BÖLÜMÜ
 *
 * ÖLÇÜLEN SORUN: masaüstünde ekranın üstünde yalnızca sayfa yolu,
 * başlık ve "48 mekân" satırı vardı. Arama kutusu yoktu — "Ara"
 * üst menüde küçük bir bağlantıydı. Mobilde alt çubukta bir Ara
 * sekmesi var, masaüstünde karşılığı hiç yoktu.
 *
 * Mobil DEĞİŞMİYOR: arama alanı yalnızca masaüstünde çiziliyor.
 * Alt çubuktaki sekmeyi ikizlemek, küçük ekranda içeriği aşağı
 * iterdi ve zaten var olan bir şeyi tekrarlardı.
 * ------------------------------------------------------------------ */
.sehir-hero { padding-block: var(--sp-4) var(--sp-2); }
.sehir-hero__baslik { font-size: var(--fs-2xl); line-height: 1.25; }
.sehir-hero__alt { color: var(--ink-dim); margin-top: var(--sp-2); }
.sehir-hero__ara { display: none; }

@media (min-width: 1024px) {
    .sehir-hero {
        display: flex; align-items: flex-end; justify-content: space-between;
        gap: var(--sp-8);
        padding-block: var(--sp-6) var(--sp-5);
    }
    /* Başlık masaüstünde BÜYÜYOR. Aynı punto, geniş ekranda
       gövde metninden ayrışmıyordu ve sayfanın neyle ilgili
       olduğu ilk bakışta okunmuyordu. */
    .sehir-hero__baslik { font-size: var(--fs-3xl); letter-spacing: -0.02em; }

    .sehir-hero__ara {
        display: flex; gap: var(--sp-2);
        flex: 0 1 420px;
    }
    .sehir-hero__ara input {
        flex: 1; min-width: 0;
        font: inherit; min-height: var(--tap);
        padding: var(--sp-2) var(--sp-4);
        background: var(--surface);
        border: 1px solid var(--line-search);
        border-radius: var(--r-pill);
        transition: border-color var(--t-fast) var(--ease);
    }
    .sehir-hero__ara input:focus { border-color: var(--accent); }
}

/* ---------------------------------------------------------------------
 * HARİTA GRUP SÜZGECİ
 *
 * Harita tam ekran; süzgeç HARİTANIN ÜSTÜNDE duruyor, ayrı bir panelde
 * değil — süzmek için başka bir yere gitmek gerekmemeli.
 *
 * .map-canvas'ın ÜSTÜNDE değil ÜZERİNDE (absolute): akışa girseydi
 * haritayı aşağı iter ve tam ekran görünümü bozardı.
 *
 * z-index 500: Leaflet kendi panellerini 400'e kadar çıkarıyor
 * (bkz. .map-bar, aynı gerekçe).
 * ------------------------------------------------------------------ */
.map-filtre {
    position: absolute;
    top: calc(var(--topbar-h) + var(--sp-2));
    left: 0; right: 0;
    z-index: 500;
    display: flex; gap: var(--sp-2);
    padding-inline: var(--sp-4);
    overflow-x: auto;
    /* Kaydırma çubuğu haritanın üstünde çirkin duruyor ve
       dokunmatikte zaten görünmüyor. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.map-filtre::-webkit-scrollbar { display: none; }

.map-filtre .chip {
    flex: 0 0 auto;
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    border-color: transparent;
}
.map-filtre .chip[aria-pressed="true"] {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

/* Bilgi şeridi süzgecin ALTINA iniyor; ikisi üst üste biniyordu. */
.map-filtre ~ .map-status { top: calc(var(--topbar-h) + var(--sp-10) + var(--sp-3)); }

/* ---------------------------------------------------------------------
 * "ŞEHRİN GURMESİ SEN OL" — üyelik ve liste çağrısı
 *
 * Sayfadaki diğer bölümlerden GÖRSEL OLARAK AYRIŞIYOR: etrafındaki
 * her şey mekân/liste kartı; bu ise bir çağrı. Aynı kart diliyle
 * çizilseydi kaydırırken bir bölüm başlığı sanılıp geçilirdi.
 *
 * Sıcak zemin marka renginden türüyor, yeni bir renk uydurulmuyor.
 * ------------------------------------------------------------------ */
.davet {
    margin-block: var(--sp-8);
    padding: var(--sp-6) var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--accent-soft);
    border: 1px solid var(--line);
}
.davet__baslik {
    font-size: var(--fs-xl);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.davet__giris {
    margin-top: var(--sp-2);
    color: var(--ink-soft);
    max-width: 52ch;          /* uzun satır okunmuyor */
}
.davet__maddeler {
    margin-top: var(--sp-4);
    display: grid; gap: var(--sp-3);
    list-style: none; padding: 0;
    max-width: 60ch;
}
.davet__maddeler li {
    position: relative;
    padding-left: var(--sp-6);
    color: var(--ink-soft);
    line-height: 1.55;
}
/* İşaret ::before ile: <li> imleci Safari'de renk ve hizada
   tutarsız davranıyor. */
.davet__maddeler li::before {
    content: '';
    position: absolute; left: 0; top: 0.55em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
}
.davet__maddeler strong { color: var(--ink); font-weight: var(--fw-semibold); }

.davet__dugme { margin-top: var(--sp-5); }
.davet__alt {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm); color: var(--ink-dim);
}
.davet__alt a { text-decoration: underline; }

@media (min-width: 1024px) {
    .davet { padding: var(--sp-8); }
    .davet__baslik { font-size: var(--fs-2xl); }
    /* Maddeler masaüstünde iki sütuna açılıyor: tek sütunda blok
       gereğinden uzun oluyor ve düğme ekran dışına düşüyordu. */
    .davet__maddeler { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: var(--sp-4) var(--sp-6); }
}

/* ---------------------------------------------------------------------
 * HESAP BÖLÜMÜ — masaüstünde yan menü + içerik
 *
 * KULLANICI: "Hesabım tab'ı da webte mobil gibi duruyor, ekrana
 * yayılmıyor, web'e özel tasarımda olmalı."
 *
 * Sebep ölçüldü: hesap sayfaları inline style="max-width:560px" ile
 * kilitliydi ve 1440px ekranda bile 560 pikselde kalıyordu. INLINE
 * STİL SINIFLA EZİLEMEZ, o yüzden görünümlerden kaldırılıp genişlik
 * buraya taşındı.
 *
 * Mobil DEĞİŞMİYOR: yan menü çizilmiyor (alt çubukta zaten Hesap
 * sekmesi var ve panelin kendisi menü gibi çalışıyor) ve içerik eski
 * dar genişliğinde kalıyor — dar sütun küçük ekranda zaten doğru.
 * ------------------------------------------------------------------ */
.hesap-duzen { display: block; }
.hesap-menu  { display: none; }

/* Dar genişlikler görünümden data- ile geliyor; her sayfanın kendi
   ölçüsü vardı ve tek bir değere indirmek bazılarını bozardı. */
.hesap-duzen[data-dar="420"] .hesap-icerik { max-width: 420px; }
.hesap-duzen[data-dar="520"] .hesap-icerik { max-width: 520px; }
.hesap-duzen[data-dar="560"] .hesap-icerik { max-width: 560px; }
.hesap-duzen[data-dar="620"] .hesap-icerik { max-width: 620px; }

@media (min-width: 1024px) {
    .hesap-duzen {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--sp-8);
        align-items: start;
        max-width: var(--container);
        margin-inline: auto;
        padding: var(--sp-6) var(--sp-6) var(--sp-10);
    }

    /* İçerik masaüstünde dar kalmıyor — şikâyetin ta kendisi.
       Yine de sınırsız değil: 60 karakterden geniş metin satırı
       okunmuyor, ama liste ve rezervasyon kartları genişlikten
       fayda görüyor. */
    /* [data-dar] SEÇİCİSİYLE: yukarıdaki .hesap-duzen[data-dar="560"]
       kuralı daha özgül ve sınıf seçicisiyle yazılsaydı onu EZEMEZDİ —
       genişlik masaüstünde de 560'ta kalırdı, yani şikâyet
       düzelmezdi. Aynı özgüllükte ve dosyada sonra geldiği için
       kazanıyor. */
    .hesap-duzen[data-dar] .hesap-icerik {
        max-width: none;
        padding-inline: 0;
    }

    .hesap-menu {
        display: flex; flex-direction: column; gap: 2px;
        /* Kaydırırken menü ekranda kalıyor: uzun bir rezervasyon
           listesinde aşağı inince gezinme kaybolmamalı. */
        position: sticky;
        top: calc(var(--desknav-h) + var(--sp-4));
    }
    .hesap-menu__ogut {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp-3);
        padding: var(--sp-3) var(--sp-4);
        border-radius: var(--r);
        color: var(--ink-soft);
        font-weight: var(--fw-medium);
        transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    }
    .hesap-menu__ogut:hover { background: var(--surface-alt); color: var(--ink); }
    .hesap-menu__ogut[aria-current="page"] {
        background: var(--accent-soft);
        color: var(--ink);
        font-weight: var(--fw-semibold);
    }
    .hesap-menu__ogut--cikis {
        margin-top: var(--sp-4);
        border-top: 1px solid var(--line);
        border-radius: 0;
        padding-top: var(--sp-4);
        color: var(--ink-dim);
    }
    .hesap-menu__ogut--cikis:hover { color: var(--danger); background: none; }

    .hesap-menu__rozet {
        min-width: 22px; padding: 0 var(--sp-1);
        border-radius: var(--r-pill);
        background: var(--accent); color: #fff;
        font-size: var(--fs-2xs); font-weight: var(--fw-bold);
        text-align: center; line-height: 20px;
    }
}

/* ---------------------------------------------------------------------
 * LEZZET PROFİLİ ÇAĞRISI — masaüstü
 *
 * KULLANICI: "Ana sayfa hala web görünümde güzel durmuyor, mesela
 * lezzet profilini doldur daha iyi olabilir."
 *
 * Sorun: mobil için tasarlanmış ince şerit, 1200 piksellik kapta
 * ortası bomboş bir reklam bandına dönüşüyor — simge solda, ok sağda,
 * arada yüzlerce piksel hiçlik.
 *
 * Masaüstünde şerit olmaktan çıkıp KART oluyor: genişliği sınırlı,
 * metin büyük, eylem AÇIK bir düğme. Ok işareti kalkıyor; düğme
 * varken ok, aynı şeyi iki kez söylemek.
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .profil-banner {
        gap: var(--sp-5);
        /* GENİŞLİK BURADA VERİLMİYOR: yukarıda .eylem-serit ile
           birlikte 720px'e ayarlı ve gerekçesi yazılı ("bir cümle
           için 1200px'lik bant boşluğu vurguluyor"). İkinci bir
           max-width yazmak, aynı özelliği aynı kırılmada iki yerden
           yönetmek olurdu. */
        margin-block: var(--sp-6);
        padding: var(--sp-5) var(--sp-6);
        border-radius: var(--r-lg);
    }
    .profil-banner__isaret { width: 60px; height: 60px; }
    .profil-banner__isaret svg { width: 34px; height: 34px; }
    .profil-banner__metin strong { font-size: var(--fs-lg); }
    .profil-banner__metin span   { font-size: var(--fs-base); }

    /* Ok yerine gerçek bir düğme: tıklanacak yer belirsizken
       kullanıcı şeridin neresine basacağını bilmiyor. */
    .profil-banner__ok { display: none; }
    .profil-banner::after {
        content: 'Doldur';
        flex-shrink: 0;
        padding: var(--sp-2) var(--sp-5);
        border-radius: var(--r-pill);
        background: #fff;
        color: #E05A00;
        font-weight: var(--fw-bold);
        font-size: var(--fs-sm);
    }
}

/* ---------------------------------------------------------------------
 * ANA SAYFA ÜST BÖLÜMÜ — masaüstü
 *
 * ÖLÇÜLEN SORUN (1440px ekran, 1360px kap):
 *   · h1 = 18 PİKSEL — bölüm başlıklarından küçük; sayfanın ana
 *     başlığı hiyerarşinin en altında kalıyordu
 *   · arama alanı HİÇ YOK
 *   · "Bir yerde misin?" kartı kabın %53'ü, bannerlar %76'sı —
 *     sağda geniş bir boşluk kalıyor ve düzen yarım görünüyor
 *
 * Mobil DEĞİŞMİYOR: puntolar ve arama yalnızca 1024px üstünde
 * devreye giriyor. Alt çubukta zaten bir Ara sekmesi var.
 * ------------------------------------------------------------------ */
.ev-hero__baslik { font-size: var(--fs-xl); line-height: 1.25; }
.ev-hero__baslik--tek { font-size: var(--fs-lg); padding-block: var(--sp-4) var(--sp-2); }
.ev-hero__alt { color: var(--ink-dim); margin-top: var(--sp-2); font-size: var(--fs-sm); }
.ev-hero__ara { display: none; }

@media (min-width: 1024px) {
    .ev-hero { padding-block: var(--sp-8) var(--sp-5) !important; }
    .ev-hero__baslik,
    .ev-hero__baslik--tek {
        font-size: var(--fs-3xl);
        letter-spacing: -0.02em;
        padding-block: var(--sp-6) 0;
    }
    .ev-hero__alt { font-size: var(--fs-md); max-width: 56ch; }

    .ev-hero__ara {
        display: flex; gap: var(--sp-2);
        max-width: 520px;
        margin-top: var(--sp-5);
    }
    .ev-hero__ara input {
        flex: 1; min-width: 0;
        font: inherit; min-height: var(--tap);
        padding: var(--sp-2) var(--sp-4);
        background: var(--surface);
        border: 1px solid var(--line-search);
        border-radius: var(--r-pill);
        transition: border-color var(--t-fast) var(--ease);
    }
    .ev-hero__ara input:focus { border-color: var(--accent); }

    /* İKİ BANNER KABI DOLDURUYOR. 520px sabit genişlik masaüstünde
       %76'da kalıp sağda boşluk bırakıyordu; oran korunuyor
       (aspect-ratio), genişlik kaba göre bölüşülüyor. */
    .rail--banner {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-columns: auto;
        overflow-x: visible;
    }
}

/* ---------------------------------------------------------------------
 * GURMELERİN ORTAK SEÇİMİ — üst üste binen yüzler
 *
 * KULLANICI: "3 gurme yerine, en yüksek takipçili gurmelerden ilk 3
 * tanesinin profil resimleri yan yana görünsün, yanında +4 kişi daha
 * gibi bir badge olsun."
 *
 * Sayı tek başına soyut; yüz güven taşıyor. Rozetteki sayı YİNE
 * DURUYOR — yüzler kaç kişi olduğunu tam söylemiyor.
 *
 * Yüzler kartın ALT SOL köşesinde, yıldız rozeti üst solda: ikisi
 * çakışmıyor ve kart görselini ortadan bölmüyorlar.
 * ------------------------------------------------------------------ */
.gurme-secim__yuzler {
    position: absolute;
    left: var(--sp-2);
    /* Kart görselinin ALT kenarına oturuyor: gövdedeki metnin
       üstünü kapatmıyor, görselin içinde de kaybolmuyor. */
    top: calc(56.25% - 20px);   /* 16:9 görselin alt kenarı */
    z-index: 2;

    display: flex; align-items: center;
    padding: 3px 3px 3px 0;
    border: 0; background: none; cursor: pointer;
}
.gurme-secim__yuzler img {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    /* Zeminden ayrılsın diye halka; kart görseli koyu da olabilir
       açık da. */
    border: 2px solid var(--surface);
    background: var(--surface-alt);
}
/* ÜST ÜSTE BİNME: ilk resim tam, sonrakiler sola kayıyor. */
.gurme-secim__yuzler img + img { margin-left: -10px; }

.gurme-secim__kalan {
    margin-left: -10px;
    min-width: 28px; height: 28px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    border: 2px solid var(--surface);
    background: var(--ink-strong); color: #fff;
    font-size: var(--fs-2xs); font-weight: var(--fw-bold);
    display: grid; place-items: center;
}

@media (hover: hover) {
    .gurme-secim__yuzler:hover img { border-color: var(--accent); }
}

/* ---- Alt sayfadaki gurme satırı ---- */
.gurme-satir {
    display: flex; gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
}
.gurme-satir:last-child { border-bottom: 0; }
.gurme-satir img {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 50%; object-fit: cover;
    background: var(--surface-alt);
}
.gurme-satir__govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gurme-satir__ad { font-weight: var(--fw-semibold); }
.gurme-satir__takipci { font-size: var(--fs-sm); color: var(--ink-dim); }
.gurme-satir__not {
    margin-top: var(--sp-1);
    color: var(--ink-soft);
    line-height: 1.5;
}
/* Notu olmayan gurme için listenin adı — sahte bir yorum
   uydurmaktansa gerçek olanı yazmak. */
.gurme-satir__liste {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm); color: var(--ink-dim); font-style: italic;
}