/**
 * 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); }
/* Metin rengi TOKEN'A bağlı, varsayılanı #fff — yani tema tanımlamayan
   her sayfa aynı kalıyor. Gerekçe: --ink-strong iki iş yapıyor, hem
   koyu düğme zemini hem güçlü metin rengi. Koyu bir tema onu açığa
   çevirince zemin açık, metin beyaz kalıyor ve düğme okunmuyordu.
   Ölçüldü: "Gece" temasında "Takip et" görünmez oldu. */
.btn--primary   { background: var(--ink-strong); color: var(--ink-on-strong, #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%);

    /*
     * KAPALI PENCERE TIKLAMA ALMAZ — canlıda ölçülen hata.
     *
     * Masaüstünde pencere ekranın ortasında opacity:0 ile gizleniyordu
     * ama pointer-events:auto ve visibility:visible kalıyordu. Ölçüldü
     * (1440×900): #sehirSecici 438–987 × 148–777 px'lik alanı görünmez
     * kaplıyor, z-index 60. O bölgeye yapılan her tıklama görünmeyen bir
     * şehir düğmesine gidiyordu: form gönderiliyor, şehir değişiyor,
     * sayfa ana ekrana dönüyordu. Kullanıcı footer'da "QR menü"ye
     * bastı, şehri Bursa'dan Aksaray'a döndü.
     *
     * Mobilde görünmüyordu çünkü orada pencere ekranın ALTINA itiliyor.
     * .sheet-backdrop bunu zaten doğru yapıyordu; pencerenin kendisi
     * yapmıyordu.
     *
     * visibility:hidden ayrıca klavyeyle görünmez düğmelere sekme
     * gezinmesini ve ekran okuyucunun onları okumasını da engelliyor.
     * Kapanırken visibility GECİKMELİ değişiyor ki kayma animasyonu
     * görünsün; açılırken hemen.
     */
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.sheet[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--t-slow) var(--ease), visibility 0s;
}

/* 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;
        /* visibility geçişi BURADA DA listelenmeli: bu kural tabandaki
           transition'ı tamamen eziyor. Listelenmezse kapanırken
           visibility anında gizlenir ve solma animasyonu görünmez. */
        transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
    }
    .sheet[data-open="true"] {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s;
    }

    /* 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);
}

/* OSM'nin varsayılan stili doygun ve kalabalık; sitenin krem tonlarının
   yanında bağırıyor. Yalnızca OSM karolarında hafifçe yumuşatılıyor —
   Stadia gibi zaten sade bir stile uygulanırsa soluk kalırdı. */
.map-canvas[data-karo-yumusat] .leaflet-tile-pane { filter: saturate(0.72) contrast(0.96) brightness(1.03); }

/* 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);
}

/* ---- Harita: seçilen mekân paneli ------------------------------------
 *
 * Kullanıcı (15 Eylül 2026): "detay modalı çok basit; mobilde
 * kaydırılabilir bottom sheet, webte modal, daha iddialı görsel tasarım".
 *
 * Mobil: alttan açılan sayfa (yarım boy), tutamaçtan çekince tam boy;
 *        içerik kendi içinde kayıyor, harita arkada kalıyor.
 * Masaüstü: haritanın solunda yüzen geniş panel — kararan bir modal değil;
 *        harita görünür kalıyor, başka pine dokunmak içeriği değiştiriyor.
 *
 * z-index 1100: Leaflet'in yakınlaştırma düğmeleri 1000'de; panel onların
 * üstünde olmalı, yoksa mobilde düğmeler panelin içinden görünüyordu. */
.map-detay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1100;
    display: flex; flex-direction: column;
    max-height: 62%;
    background: var(--surface);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    transition: transform var(--t-slow) var(--ease), max-height var(--t-slow) var(--ease);
}
.map-detay[hidden] { display: none; }
.map-detay--acik { transform: translateY(0); }
.map-detay--tam { max-height: calc(100% - var(--topbar-h)); }

.map-detay__tutamak {
    flex-shrink: 0;
    display: grid; place-items: center;
    height: 24px;
    cursor: grab;
    touch-action: none;
}
.map-detay__tutamak span { width: 42px; height: 5px; border-radius: 3px; background: var(--line-input); }

.map-detay__kapat {
    position: absolute; top: 30px; right: 22px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    border: 0; cursor: pointer;
    background: rgba(25, 24, 23, 0.6); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.map-detay__kapat:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* flex + min-height 0: esnek kapta içerik kendi içinde kaysın diye;
   yoksa kaydırma kutusu içeriği kadar uzayıp paneli taşırıyordu. */
.map-detay__kaydir {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}

/* Galeri: kaydırmalı, bir sonraki fotoğrafın kenarı görünüyor — "daha
   fazlası var" demenin en kısa yolu. Tek fotoğrafta tam genişlik. */
.map-detay__galeri {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
    gap: 6px;
    padding-inline: var(--sp-4);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.map-detay__galeri::-webkit-scrollbar { display: none; }
.map-detay__galeri:has(> :only-child) { grid-auto-columns: 100%; }
.map-detay__galeri--bos { display: none; }
.map-detay__foto {
    display: block; width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--r-md);
    background: var(--surface-alt);
    scroll-snap-align: start;
}
.map-detay__foto--iskelet { animation: iskeletNabiz 1.4s ease-in-out infinite; }

.map-detay__icerik {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
}
.map-detay__tur {
    margin: 0;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent);
}
.map-detay__tur:empty { display: none; }
.map-detay__ad { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-extra); line-height: 1.2; }
.map-detay__galeri--bos ~ .map-detay__icerik .map-detay__ad { padding-right: 44px; }

.map-detay__meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px var(--sp-3);
    font-size: var(--fs-sm); color: var(--ink-dim);
}
.map-detay__meta:empty { display: none; }
.map-detay__puan { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-bold); color: var(--ink); }
.map-detay__puan svg { color: var(--accent-warm); }
.map-detay__yorum { font-weight: var(--fw-normal); color: var(--ink-faint); }

/* Eylemler: büyük dokunma alanlı kutucuklar — haritada en sık yapılan
   iş "oraya nasıl giderim" ve "menüsü ne". */
.map-detay__eylemler {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.map-detay__eylemler:empty { display: none; }
.map-detay__eylem {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--ink);
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    text-align: center; text-decoration: none;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.map-detay__eylem svg { color: var(--accent); }
@media (hover: hover) {
    .map-detay__eylem:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
}

.map-detay__bilgi {
    list-style: none; margin: var(--sp-2) 0 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--sp-2);
    font-size: var(--fs-sm); color: var(--ink-soft);
}
.map-detay__bilgi:empty { display: none; }
.map-detay__bilgi li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.map-detay__bilgi svg { flex-shrink: 0; margin-top: 2px; color: var(--ink-faint); }
.map-detay__yuzler { align-items: center !important; }
.map-detay__yuz-grup { display: inline-flex; flex-shrink: 0; }
.map-detay__yuz-grup img {
    width: 24px; height: 24px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--surface);
    background: var(--surface-alt);
    margin-left: -7px;
}
.map-detay__yuz-grup img:first-child { margin-left: 0; }
.map-detay__ac { margin-top: var(--sp-3); }

/* Seçili pin büyüyor ve halka kazanıyor: panel hangi pine ait, görülsün. */
.map-pin__dot { transition: transform var(--t) var(--ease), background var(--t) var(--ease); }
.map-pin--secili .map-pin__dot {
    transform: scale(1.55);
    background: var(--ink-strong);
    box-shadow: 0 0 0 5px rgba(255, 153, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35);
}

@media (min-width: 1024px) {
    .map-shell { inset: 0; }

    .map-detay {
        left: var(--sp-5); right: auto;
        top: calc(var(--topbar-h) + var(--sp-10) + var(--sp-3));
        bottom: auto;
        width: 400px;
        /* Yükseklik İÇERİK kadar; ekrana sığmazsa içeride kayıyor. Sabit
           alt kenar, kısa bir mekânda panelin yarısını boş bırakıyordu. */
        max-height: calc(100% - var(--topbar-h) - var(--sp-10) - var(--sp-3) - var(--sp-5));
        border-radius: var(--r-lg);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
        overflow: hidden;
        opacity: 0;
        transform: translateX(-20px);
        transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
    }
    .map-detay--acik { opacity: 1; transform: none; }
    .map-detay__tutamak { display: none; }
    .map-detay__kapat { top: var(--sp-3); right: var(--sp-3); }
    .map-detay__galeri { grid-auto-columns: 100%; gap: 0; padding: 0; }
    .map-detay__foto { aspect-ratio: 4 / 3; border-radius: 0; }
    .map-detay__icerik { padding: var(--sp-5); }
    .map-detay__ad { font-size: var(--fs-2xl); }
}

@media (prefers-reduced-motion: reduce) {
    .map-detay, .map-detay__eylem, .map-pin__dot { transition: none; }
}

/* ---- 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 HİÇ ÇİZİLMİYOR.
     *
     * .detay-baslik, .topbar'ın ALTERNATİFİ: düzen ikisinden birini
     * çiziyor (main.php: $ustBaslik varsa detay başlığı, yoksa topbar).
     * topbar masaüstünde gizlenmişti ama bu unutulmuştu; sonuç, üst
     * üste İKİ gezinme çubuğu — üstte desknav (logo, şehir,
     * Keşfet/Harita/Ara, Hesabım), altında geri oku + sayfa adı +
     * arama. Kullanıcı bildirdi: "üstte mobil görünüm header'ı var
     * web görünümde back butonlu".
     *
     * Üç işi de masaüstünde başka bir şey karşılıyor:
     *   geri   → tarayıcının kendi geri düğmesi + sayfa yolu
     *   başlık → sayfanın H1'i
     *   arama  → desknav'daki "Ara"
     * Mobilde bunların hiçbiri yok, orada duruyor.
     *
     * KURAL BURADA, 1024px bloğunun başında DEĞİL: temel
     * `.detay-baslik { display: flex }` tanımı bu dosyada daha SONRA
     * geliyor ve aynı özgüllükte sonraki kazanıyor. Önce yazılmıştı,
     * hiç uygulanmadı — tarayıcıda ölçülerek görüldü.
     */
    .detay-baslik { display: none; }
}

/* 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 kartları — ana sayfadaki iki ayırt edici giriş: "Bir yerde
 * misin?" ve "şehrin en iyileri".
 *
 * DÜZ ŞERİTTEN GÖRSEL KARTA (kullanıcı, 15 Eylül 2026: "tasarımı çok
 * düz, daha iddialı görsel tasarımlar yapabiliriz"). Beyaz bir satır
 * olarak geçilip gidiliyordu; ikisi de sitenin Google'da karşılığı
 * olmayan girişleri. Her kart ne yaptığını görselle anlatıyor:
 *   --radar  koyu zemin, harita ızgarası, nabız atan halkalar → "şu an, burada"
 *   --kupa   sıcak altın zemin, üst üste binen fotoğraflar → "şehrin seçkisi"
 *
 * Sınıf adı ".eylem-serit" KALDI: masaüstü genişlik kuralları ve testler
 * bu adı tanıyor. Görünüm değişti, rol değişmedi. */
.eylem-serit {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 104px;
    margin-block: var(--sp-3);
    padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-4);
    border-radius: var(--r-lg);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.eylem-serit__metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eylem-serit__ust {
    font-size: var(--fs-2xs); font-weight: var(--fw-bold);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.eylem-serit__metin strong { font-size: var(--fs-lg); font-weight: var(--fw-extra); line-height: 1.2; }
.eylem-serit__metin > span:last-child { font-size: var(--fs-sm); line-height: 1.35; }
.eylem-serit__ok {
    display: grid; place-items: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    transition: transform var(--t) var(--ease);
}
@media (min-width: 600px) {
    .eylem-serit { gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); }
    .eylem-serit__ok { width: 38px; height: 38px; }
}
@media (hover: hover) {
    .eylem-serit:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
    .eylem-serit:hover .eylem-serit__ok { transform: translateX(3px); }
}
.eylem-serit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --radar: koyu zemin + ince harita ızgarası + nabız atan halkalar. */
.eylem-serit--radar {
    background: radial-gradient(130% 150% at 0% 50%, #34302B 0%, var(--ink-strong) 60%);
    color: #fff;
}
.eylem-serit--radar::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 10%, transparent 70%);
            mask-image: linear-gradient(90deg, #000 10%, transparent 70%);
}
.eylem-serit--radar .eylem-serit__ust { color: var(--accent); }
.eylem-serit--radar .eylem-serit__metin > span:last-child { color: rgba(255, 255, 255, 0.74); }
.eylem-serit--radar .eylem-serit__ok { background: var(--accent); color: var(--ink-strong); }

.eylem-serit__radar {
    position: relative; flex-shrink: 0;
    width: 60px; height: 60px;
    display: grid; place-items: center;
}
.eylem-serit__halka {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0;
    animation: radarDalga 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.eylem-serit__halka:nth-child(2) { animation-delay: 0.8s; }
.eylem-serit__halka:nth-child(3) { animation-delay: 1.6s; }
.eylem-serit__pin {
    position: relative;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent); color: var(--ink-strong);
    box-shadow: 0 0 0 6px rgba(255, 153, 0, 0.2);
}
@keyframes radarDalga {
    0%   { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* --kupa: sıcak altın zemin + ara sıra geçen parıltı + fotoğraf kolajı. */
.eylem-serit--kupa {
    background: linear-gradient(135deg, #FFEFD0 0%, #FFD27A 55%, #FFB23F 100%);
    color: var(--ink-strong);
}
.eylem-serit--kupa::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: kupaParilti 5s ease-in-out infinite;
}
@keyframes kupaParilti {
    0%, 60% { transform: translateX(-100%); }
    100%    { transform: translateX(100%); }
}
.eylem-serit--kupa .eylem-serit__ust { color: rgba(25, 24, 23, 0.62); }
.eylem-serit--kupa .eylem-serit__metin > span:last-child { color: rgba(25, 24, 23, 0.72); }
.eylem-serit--kupa .eylem-serit__ok { background: var(--ink-strong); color: #fff; }

.eylem-serit__kolaj { position: relative; flex-shrink: 0; width: 76px; height: 56px; }
.eylem-serit__kolaj img {
    position: absolute; top: 4px;
    width: 46px; height: 46px; border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    background: var(--surface-alt);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.eylem-serit__kolaj img:nth-child(1) { left: 0;    z-index: 3; }
.eylem-serit__kolaj img:nth-child(2) { left: 15px; z-index: 2; }
.eylem-serit__kolaj img:nth-child(3) { left: 30px; z-index: 1; }
.eylem-serit__madalya {
    position: absolute; right: 0; bottom: -2px; z-index: 4;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ink-strong); color: #FFD27A;
    border: 2px solid #fff;
}
@media (min-width: 600px) {
    .eylem-serit__kolaj { width: 92px; height: 60px; }
    .eylem-serit__kolaj img { width: 52px; height: 52px; }
    .eylem-serit__kolaj img:nth-child(2) { left: 20px; }
    .eylem-serit__kolaj img:nth-child(3) { left: 40px; }
    .eylem-serit__madalya { width: 30px; height: 30px; }
}
/* Fotoğraf yoksa madalya kolajın yerini alıyor — boş halkalar değil. */
.eylem-serit__kolaj:not(:has(img)) { width: 56px; }
.eylem-serit__kolaj:not(:has(img)) .eylem-serit__madalya {
    inset: 0; margin: auto; width: 54px; height: 54px; border-width: 3px;
}
.eylem-serit__kolaj:not(:has(img)) .eylem-serit__madalya svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
    .eylem-serit { transition: none; }
    .eylem-serit__halka { animation: none; }
    .eylem-serit__halka:first-child { opacity: 0.45; transform: scale(1.2); }
    .eylem-serit--kupa::after { animation: none; opacity: 0; }
}

/* ---- 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.
 */
/* Üst bölüm (.profil-kapak, .profil-ust) aşağıdaki "GURME SAYFASI: ÜST
   BÖLÜM" bloğuna taşındı — tam genişlik şerit. Buradaki sınıflar
   yalnızca sahibine özel bağlantı kutusu ve ipuçları için. */

.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); }



/* ---- 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; }
}

/*
 * ÜÇÜNCÜ KATMAN — 1680px ve üstü.
 *
 * ÖLÇÜLDÜ: 1900px'lik ekranda 1360px'lik kap iki yanda 270'er piksel
 * boşluk bırakıyor ve sayfa "boşlukta yüzen dar bir sütun" gibi
 * duruyor. Kullanıcının şikâyeti buydu.
 *
 * Metin genişliği ayrı sınırlı (aşağıdaki okunabilirlik kuralı), yani
 * genişleyen şey IZGARA: aynı ekranda daha çok kart sütunu çıkıyor,
 * paragraf satırı uzamıyor.
 */
@media (min-width: 1680px) {
    :root { --container: 1560px; }
}

@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,
    .rail--tek-sira {
        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; }
    /* Yakınımdaki Yerler de TEK SIRA (kullanıcı isteği, 15 Eylül 2026):
       on kart masaüstünde iki satıra sarıp bölümü ekranın yarısına
       yayıyordu. Kart genişliği genel ızgaranın en küçük sütunu. */
    .rail--tek-sira { grid-auto-columns: 260px; }

    /* 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.

          AMA İKİ ŞERİT YAN YANA: "Bir yerde misin?" ve "şehrin en
          iyileri" aynı soruyu iki ölçekte soruyor ve alt alta
          durduklarında ikisi de kabın yarısında kalıp sağda geniş bir
          boşluk bırakıyordu. Sarmalayıcı ızgara ikisini yan yana
          alıyor; tek şerit varsa yine 720px'te kalıyor. */
    .eylem-serit,
    .profil-banner { max-width: 720px; }

    /* İKİ SABİT SÜTUN, auto-fit değil: şehir seçili değilken tek kart
       kalıyor ve auto-fit onu 1300px'lik koyu bir banda yayıyordu. */
    .eylem-grup {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4);
        align-items: stretch;
    }
    .eylem-grup .eylem-serit { max-width: none; margin-block: 0 var(--sp-4); }
}

/* 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;
    }
}


/* ---- 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ı. */
.dis-yer__sana {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r);
    background: var(--accent-soft);
}
.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);
}
.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); }
/*
 * ARAMA MOBİLDE DE GÖRÜNÜYOR — önceki karar geri alındı.
 *
 * Eski gerekçe: "alt çubukta zaten bir Ara sekmesi var". Doğru ama
 * yetersiz: bir sekme simgesi, görünür bir arama alanıyla aynı şey
 * değil. Üstelik hero artık ŞEHİR SEÇİLİYKEN de çiziliyor ve o
 * durumda mobilde geriye yalnızca bir başlık kalıyordu.
 *
 * Bir keşif sitesinin birincil eylemi arama; sayfada görünmeli.
 */
.ev-hero__ara {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}
.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); }

/* ---- Tam genişlik hero şeridi -----------------------------------------
 *
 * Kap içeride; şerit kenardan kenara. Geniş ekranda sayfanın üstü
 * artık "boşlukta yüzen bir sütun" gibi durmuyor.
 */
.ev-serit {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--sp-5);
}

/* ---- Kategori kartları -------------------------------------------------
 *
 * Bu alan eskiden iki boş reklam banner'ınındı. Kartlar hem gezinme
 * hem sayfaya yoğunluk veriyor.
 *
 * Kategoriler google_type'tan geliyor: type_id mekânların neredeyse
 * tamamında boş ve eski çip satırı canlıda HİÇ çizilmiyordu.
 */
.tur-kartlari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-bottom: var(--sp-5);
}

.tur-kart {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    text-decoration: none;
    color: inherit;
}
.tur-kart:hover { border-color: var(--accent); }

.tur-kart__ikon {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}
.tur-kart__ikon svg { width: 21px; height: 21px; }

.tur-kart__ad {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    color: var(--ink);
    line-height: 1.2;
}
/* Sayı ADIN ALTINDA: kartın konusu kategori, adet ikincil bilgi. */
.tur-kart__adet {
    display: block;
    font-size: var(--fs-xs);
    color: var(--ink-faint);
}
.tur-kart__ad, .tur-kart__adet { min-width: 0; }
.tur-kart > span:not(.tur-kart__ikon) { display: block; }

/* İki metin satırı tek sütunda: ikon solda, ad+adet sağda. */
.tur-kart {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ikon ad" "ikon adet";
    align-items: center;
    column-gap: var(--sp-3);
    row-gap: 0;
}
.tur-kart__ikon { grid-area: ikon; }
.tur-kart__ad   { grid-area: ad; align-self: end; }
.tur-kart__adet { grid-area: adet; align-self: start; }

@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; }

    /* Taban kural artık flex ve mobilde de görünüyor; burada yalnızca
       masaüstü ölçüsü veriliyor. Kopya tanım kaldırıldı — iki yerde
       aynı kuralı tutmak, biri güncellenip diğeri unutulunca sessizce
       ayrışıyor. */
    .ev-hero__ara { max-width: 560px; margin-top: var(--sp-5); }

    /* İ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;
}

/* ---------------------------------------------------------------------
 * BOŞ DURUM
 *
 * KULLANICI: "Tüm Türkiye gelsin, o şehir ile ilgili veri yoksa da en
 * azından veri yok diye stateView gelsin."
 *
 * Şehir seçici artık 81 ili birden gösterdiği için bu ekran GERÇEKTEN
 * görülecek: veri girilmemiş bir ile basan kullanıcı 404 yerine buraya
 * düşüyor. Bir cümlelik gri metin bunun için yeterli değil — çıkış
 * yolu sunması lazım.
 * ------------------------------------------------------------------ */
.bos-durum {
    margin-top: var(--sp-5);
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.bos-durum__isaret {
    display: grid; place-items: center;
    width: 64px; height: 64px;
    margin: 0 auto var(--sp-4);
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--ink-faint);
}
.bos-durum__baslik {
    font-size: var(--fs-lg);
    line-height: 1.3;
}
.bos-durum__metin {
    margin: var(--sp-2) auto 0;
    color: var(--ink-dim);
    /* Ortalanmış metin uzun satırda okunmuyor. */
    max-width: 46ch;
    line-height: 1.6;
}
.bos-durum__eylemler {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    justify-content: center;
    margin-top: var(--sp-5);
}

@media (min-width: 1024px) {
    .bos-durum { padding: var(--sp-10) var(--sp-8); }
    .bos-durum__baslik { font-size: var(--fs-xl); }
}

/* ---------------------------------------------------------------------
 * ŞEHRİN EN İYİLERİ — gastronomi notu ve kilit
 * ------------------------------------------------------------------ */
.gastro-not {
    margin-block: var(--sp-5);
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--accent-soft);
    border: 1px solid var(--line);
}
.gastro-not__baslik { font-size: var(--fs-lg); line-height: 1.25; }
.gastro-not__metin {
    margin-top: var(--sp-2);
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 62ch;      /* uzun satır okunmuyor */
}
.gastro-not__liste {
    margin: var(--sp-4) 0 0;
    padding-left: var(--sp-5);
    display: grid; gap: var(--sp-2);
    color: var(--ink-soft); line-height: 1.55;
}
.gastro-not__liste a { text-decoration: underline; }
/* Metnin nereden geldiği SÖYLENİYOR: yapay zekâ ürettiği bir metni
   editör yazmış gibi sunmak okuyucuyu yanıltır. */
.gastro-not__kaynak {
    margin-top: var(--sp-4);
    font-size: var(--fs-xs); color: var(--ink-dim);
}

/* Üye olmayana ne kaçırdığını söyleyen şerit — sayfanın geri kalanı
   zaten tam çalışıyor, bu yalnızca eksik bölümü açıklıyor. */
.gastro-kilit {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
    justify-content: space-between;
    margin-block: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r);
    background: var(--surface);
    border: 1px dashed var(--line);
}
.gastro-kilit p { margin: 0; color: var(--ink-soft); max-width: 60ch; }

@media (min-width: 1024px) {
    .gastro-not { padding: var(--sp-6) var(--sp-8); }
    .gastro-not__baslik { font-size: var(--fs-xl); }
    /* Üst bölümdeki düğme aramanın yanında durmasın: ikisi de
       eylem, ama biri gezinme biri sorgu. */
    .sehir-hero__eniyi { margin-right: auto; margin-left: var(--sp-4); }
}

/* Gastronomi notu beklenirken — boş alan "sayfa bozuk mu" hissi
   veriyor, ne olduğu yazılıyor. */
.gastro-bekle {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-block: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r);
    background: var(--surface);
    border: 1px dashed var(--line);
    color: var(--ink-dim);
    font-size: var(--fs-sm);
}
.gastro-bekle__nokta {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    animation: gastroNabiz 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes gastroNabiz {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .gastro-bekle__nokta { animation: none; opacity: 0.7; }
}

/* =====================================================================
   GURME VİTRİNİ — tema, sosyal bağlantılar, "ne diyor" rayı
   ===================================================================== */

/*
 * TEMA KAPSAMI. Token'lar :root'ta DEĞİL burada geçersiz kılınıyor:
 * tema yalnızca bu profile ait. :root'a yazılsaydı üst çubuk, alt
 * gezinme ve şehir seçici de gurmenin rengine bürünür, ziyaretçi
 * Gastfood'dan çıktığını sanardı.
 *
 * Zemin AÇIKÇA veriliyor: body'nin arka planı :root'tan geliyor,
 * sarmalayıcı saydam kalsaydı koyu temada kartların arkası krem
 * kalırdı.
 */
.gurme-vitrin {
    background: var(--bg);
    color: var(--ink);
    /* Kapak görseli tam genişlikte; sarmalayıcı kenar payı eklemiyor. */
    padding-block-end: var(--sp-6);
}

/* Vitrin başlığı — biyografiden AYRI. Biyografi kişiyi anlatır,
   bu satır ne önerdiğini söyler. */
.vitrin-baslik {
    margin-top: var(--sp-3);
    color: var(--ink);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    max-width: 42ch;
    margin-inline: auto;
    line-height: 1.4;
}

/* ---- Sosyal bağlantılar --------------------------------------------- */
.vitrin-baglantilar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.vitrin-baglanti {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    /* Uzun kullanıcı adı satırı taşırmasın. */
    max-width: 200px;
}
.vitrin-baglanti > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vitrin-baglanti:hover {
    border-color: var(--accent);
    color: var(--ink);
}

/* ---- "Ne diyor" rayı ------------------------------------------------- */
/*
 * Kart, mekân kartından GENİŞ (264px): içeriği bir cümle ve cümlenin
 * okunması gerekiyor. 216px'te üç satıra bölünüp kırpılıyordu.
 */
.rail--not { grid-auto-columns: 264px; }

.not-kart {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.not-kart:hover { border-color: var(--accent); }

/* SÖZ EN BÜYÜK ÖGE. Kartın konusu not; mekân üstveri. Ters kurulsaydı
   bu ray mekân rayının kopyası olurdu. */
.not-kart__soz {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.45;
    color: var(--ink);
    font-weight: var(--fw-medium);
    /* Dört satırda kes — kartlar aynı boyda kalsın. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* İmza yemeği — "ne söylemeli". Vurgu rengiyle, çünkü kartın en
   eyleme geçirici bilgisi bu. */
.not-kart__yemek {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}
.not-kart__yemek svg { flex-shrink: 0; }

.not-kart__yer {
    margin-top: auto;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-dim);
    line-height: 1.5;
}
.not-kart__yer strong { color: var(--ink); font-weight: var(--fw-semibold); }
.not-kart__konum { color: var(--ink-faint); font-size: var(--fs-xs); }

/* ---- "Dergi" düzeni --------------------------------------------------
 * Renk token, düzen sınıf: tema tablosunda ikisi ayrı kolon.
 * Bu varyant serif başlık ve daha geniş satır aralığıyla editoryal
 * bir his veriyor — az mekân öneren, yazan gurmeler için.
 */
.gurme-vitrin[data-duzen="dergi"] h1,
.gurme-vitrin[data-duzen="dergi"] .section-head h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: var(--fw-normal);
    letter-spacing: -0.01em;
}
.gurme-vitrin[data-duzen="dergi"] .not-kart__soz {
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--fs-xl);
    line-height: 1.5;
}
.gurme-vitrin[data-duzen="dergi"] .vitrin-baslik {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: var(--fw-normal);
    font-style: italic;
}

/* ---- Vitrin düzenleme ekranı ----------------------------------------- */

/*
 * TEMA SEÇİMİ RADYO + GÖRSEL, açılır liste değil: tema görsel bir
 * seçim. "Gece" yazan bir seçenek, koyu bir kutu görmeden hiçbir şey
 * anlatmıyor.
 */
.tema-secim {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3);
}

.tema-kart {
    display: block;
    padding: var(--sp-3);
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    background: var(--surface);
}
.tema-kart--secili { border-color: var(--accent); }

/* Radyo düğmesi GİZLENMİYOR, ekran dışına alınıyor: display:none
   klavye odağını da kaldırır ve seçim klavyeyle yapılamaz olur. */
.tema-kart input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}
.tema-kart:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.tema-kart__onizleme {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    height: 76px;
    border: 1px solid;
    border-radius: var(--r-sm);
    position: relative;
    overflow: hidden;
    font-size: var(--fs-xl);
}
.tema-kart__satir {
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.tema-kart__cizgi {
    width: 46px; height: 3px; border-radius: 2px; opacity: .55;
}

.tema-kart__ad {
    display: block;
    margin-top: var(--sp-2);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    font-size: var(--fs-base);
}
.tema-kart__aciklama {
    display: block;
    margin-top: 2px;
    color: var(--ink-dim);
    font-size: var(--fs-xs);
    line-height: 1.4;
}

/* Bağlantı alanı — simge kutunun İÇİNDE, yanında değil: hangi
   platformun adresinin istendiği alana bakınca anlaşılsın. */
.baglanti-alan {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-inline-start: 12px;
    border: 1px solid var(--line-input);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-dim);
}
.baglanti-alan input {
    border: 0;
    background: transparent;
    flex: 1;
    min-width: 0;
    padding-inline-start: 0;
}
.baglanti-alan input:focus { outline: none; }
.baglanti-alan:focus-within { border-color: var(--accent); }

/* Ekran okuyucuya görünür, gözle görünmez etiket. */
.gizli-etiket {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- İçe aktarma onay ekranı ----------------------------------------- */

/*
 * DURUMA GÖRE RENK KODU. Üç durum var ve kullanıcının hangisine
 * bakması gerektiği bir bakışta anlaşılmalı:
 *   kesin    → sessiz (işaretli, dokunma)
 *   belirsiz → vurgulu (senden karar bekliyor)
 *   yok      → silik (yapabileceğin bir şey yok)
 */
.aktar-satir {
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.aktar-satir--belirsiz { border-color: var(--accent); }
.aktar-satir--yok      { opacity: .7; }

.aktar-satir__girdi {
    font-size: var(--fs-sm);
    color: var(--ink-dim);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-bottom: var(--sp-3);
    word-break: break-word;
}

.aktar-satir__yok { margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); }

.aktar-satir__not {
    /* .field sarmalayıcısı olmadığı için genişliği kendisi almalı;
       yoksa tarayıcının varsayılan ~150px'inde kalıyor ve yer tutucu
       metni bile sığmıyor. */
    width: 100%;
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
}

.aktar-satir__adaylar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.aktar-aday {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: var(--fs-base);
}
.aktar-aday:hover { background: var(--surface-muted); }
.aktar-aday input { width: auto; min-height: auto; margin-top: 3px; flex-shrink: 0; }
.aktar-aday strong { display: block; font-weight: var(--fw-semibold); }
.aktar-aday__konum { color: var(--ink-dim); font-size: var(--fs-xs); }
.aktar-aday--hayir span { color: var(--ink-faint); font-size: var(--fs-sm); }

/* ---- İmza yemeği alanı (liste düzenleme) ------------------------------ */

.liste-satir {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}
/* Satırın kendi kenarlığı kaldırılıyor: sarmalayıcı zaten çiziyor,
   ikisi birden çift çizgi yapıyordu. */
.liste-satir .place-row { border: 0; border-radius: 0; }

.yemek-form {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--line);
    background: var(--surface-muted);
    color: var(--accent);
}
.yemek-form svg { flex-shrink: 0; }
.yemek-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: var(--fs-sm);
    padding-inline: 0;
    min-height: 34px;
    color: var(--ink);
}
.yemek-form input:focus { outline: none; }
.yemek-form input::placeholder { color: var(--ink-faint); }
.yemek-form .btn-metin { flex-shrink: 0; font-size: var(--fs-sm); }

/* =====================================================================
   GURME ŞEHİR ŞERİDİ — profilde ve şehir alt sayfasında
   =====================================================================
   15 Eylül 2026: profildeki "yakınımdakiler" kutusu ve düğmesi kaldırıldı
   (kullanıcı: "bir buton ile görebiliyorum, bu olmasın"). Şehrin kartları
   artık doğrudan tek sıra; bu çipler kartların altında diğer şehirlere
   geçiş. */

/* ŞEHİR ŞERİDİ hem uzmanlık göstergesi hem gezinme.
   "Bursa 24" demek, "her konuda gurme" görünmenin panzehiri. */
.konum-sehirler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
}

.konum-sehir {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink-soft);
    text-decoration: none;
}
.konum-sehir span {
    font-size: var(--fs-xs);
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.konum-sehir:hover { border-color: var(--accent); color: var(--ink); }

/* Ziyaretçinin kendi şehri işaretli — kutunun asıl işi bu. */
.konum-sehir--senin {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--ink);
}

/* Profilde çipler kartların ALTINDA, sola hizalı: ortalanmış bir kutu
   değil, bölümün devamı. */
.vitrin-sehir__diger {
    justify-content: flex-start;
    margin-top: var(--sp-3);
}

/* ---- Footer: sosyal ve mağaza şeridi ---------------------------------
 * Yalnızca .env'de adres tanımlıysa çiziliyor; boş rozet basılmıyor.
 */
.site-footer__serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

.site-footer__sosyal { display: flex; gap: var(--sp-2); }
.site-footer__sosyal a {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-dim);
}
.site-footer__sosyal a:hover { border-color: var(--accent); color: var(--ink); }

.site-footer__magaza {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--ink-dim);
}
.site-footer__magaza a {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-weight: var(--fw-semibold);
}
.site-footer__magaza a:hover { border-color: var(--accent); }

/* =====================================================================
   GURME SAYFASI: ÜST BÖLÜM — biyografi bağlantısı sayfası
   =====================================================================
   KULLANICI: "fenomenlere güzel bir sayfa vermeliyiz ki sosyal
   medyalarında bio kısmına bu linki koysunlar."

   Eskiden içerik 760px'lik bir sütundaydı ve geniş ekranda boşlukta
   yüzüyordu. Şerit kenardan kenara; içerik kabın içinde.

   MOBİL: her şey ortada, tek sütun — Instagram'dan gelen ziyaretçinin
   çoğu telefonda. MASAÜSTÜ: avatar solda, kimlik sağda.
   ===================================================================== */
.vitrin-ust {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.vitrin-ust__kapak {
    aspect-ratio: 3 / 1;
    max-height: 280px;
    overflow: hidden;
    background: var(--surface-alt);
}
.vitrin-ust__kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vitrin-ust__ic {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-4);
    padding-block: var(--sp-8) var(--sp-6);
}

.vitrin-ust__avatar {
    width: 112px; height: 112px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 4px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line);
}
/* Kapak varken avatar kapağın üstüne biniyor — profil sayfalarının
   yerleşik dili. */
.vitrin-ust--kapakli .vitrin-ust__ic { padding-top: 0; }
.vitrin-ust--kapakli .vitrin-ust__avatar { margin-top: -56px; position: relative; }

.vitrin-ust__kimlik { min-width: 0; max-width: 680px; }

.vitrin-ust__ad {
    margin: 0;
    font-size: var(--fs-2xl);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.vitrin-ust__kullanici {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: var(--sp-2);
    margin: var(--sp-1) 0 0;
    color: var(--ink-dim);
    font-size: var(--fs-base);
}
.vitrin-ust__bio {
    margin: var(--sp-3) auto 0;
    max-width: 52ch;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* Sayılar tek satır; sayı vurgulu, etiket silik. */
.vitrin-sayilar {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-4) 0 0; padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--ink-dim);
}
.vitrin-sayilar strong {
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.vitrin-ust__eylemler {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}
.vitrin-ust__eylemler .btn { min-width: 150px; }
/* .profil-paylas eskiden kendi üst boşluğunu taşıyordu; burada
   eylem satırında hizalı durmalı. */
.vitrin-ust__eylemler .profil-paylas { margin-top: 0; }

@media (min-width: 1024px) {
    .vitrin-ust__ic {
        flex-direction: row;
        align-items: flex-start;
        text-align: start;
        gap: var(--sp-8);
        padding-block: var(--sp-10) var(--sp-8);
    }
    .vitrin-ust__avatar { width: 152px; height: 152px; }
    .vitrin-ust--kapakli .vitrin-ust__avatar { margin-top: -76px; }
    .vitrin-ust__ad { font-size: var(--fs-3xl); }
    .vitrin-ust__kullanici,
    .vitrin-sayilar,
    .vitrin-ust__eylemler,
    .vitrin-ust .vitrin-baglantilar { justify-content: flex-start; }
    .vitrin-ust .vitrin-baslik,
    .vitrin-ust__bio { margin-inline: 0; }
}

/* ---- Gövde ------------------------------------------------------------ */
.vitrin-govde { padding-top: var(--sp-6); }

.vitrin-bos { padding: var(--sp-8); text-align: center; margin-top: var(--sp-6); }
.vitrin-bos p { margin: 0; color: var(--ink-dim); }

/* ---- Sahibine özel: bağlantı ve eksikler -------------------------------- */
.vitrin-sahip { margin-bottom: var(--sp-6); }
.vitrin-sahip .profil-baglanti { margin-top: 0; }

.vitrin-eksik {
    margin-top: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.vitrin-eksik__baslik { margin: 0; font-size: var(--fs-lg); color: var(--ink); }
.vitrin-eksik__alt {
    margin: var(--sp-1) 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--ink-dim);
    max-width: 64ch;
}
.vitrin-eksik__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-3);
    margin: 0; padding: 0; list-style: none;
}
.vitrin-eksik__liste a {
    display: flex; flex-direction: column; gap: 2px;
    height: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px dashed var(--line-input);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
}
.vitrin-eksik__liste a:hover { border-color: var(--accent); border-style: solid; }
.vitrin-eksik__liste strong { color: var(--ink); font-size: var(--fs-base); }
.vitrin-eksik__liste span { color: var(--ink-dim); font-size: var(--fs-sm); line-height: 1.45; }

/* ---- Instagram: tıklayınca yüklenir -------------------------------------- */
.vitrin-instagram__kutu {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: center;
}
.vitrin-instagram__not {
    margin: 0;
    max-width: 52ch;
    font-size: var(--fs-sm);
    color: var(--ink-dim);
}
/* Tıklamadan sonra gömme 7–12 sn sürüyor; kutu boş görünmesin. */
.vitrin-instagram__yukleniyor {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-dim);
}
/* Düğme JS YOKSA GÖRÜNMÜYOR — gömme yalnızca betikle çalışıyor;
   çalışmayacak bir düğme göstermek yalan. JS yoksa başlıktaki
   "Instagram'da aç" bağlantısı yeterli. */
.vitrin-instagram__btn { display: none; }
.js .vitrin-instagram__btn { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Gömme yüklendikten sonra Instagram'ın çerçevesi ortada, kendi
   azami genişliğinde. */
.vitrin-instagram__kutu .instagram-media,
.vitrin-instagram__kutu iframe {
    margin-inline: auto !important;
    max-width: 540px !important;
    width: 100% !important;
}



/* ---- Ayarlar: kullanıcı adı alanı ------------------------------------- */
/* Önek alanın içinde: kullanıcı bağlantısının nasıl görüneceğini
   yazarken görüyor. Mobilde dar ekranda kısalmasın diye nowrap. */
.kullanici-adi-onek {
    color: var(--ink-faint);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.kullanici-adi-durum {
    display: block;
    min-height: 1.2em;
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}
.kullanici-adi-durum[data-durum="ok"]   { color: var(--open); font-weight: var(--fw-semibold); }
.kullanici-adi-durum[data-durum="hata"] { color: var(--danger); }

/* ---- Liste kartı: görüntülenme ve takipçi ------------------------------ */
/* İkon + kısa sayı: 156px'lik kartta "1.240 görüntülenme · 8 takipçi"
   satırı taşıyordu. Sıfır olan sayı hiç çizilmiyor (görünümde). */
.liste-kart__sayilar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 2px var(--sp-3);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    color: var(--ink-dim);
}
.liste-kart__sayilar > span { display: inline-flex; align-items: center; gap: 4px; }
.liste-kart__sayilar svg { color: var(--ink-faint); flex-shrink: 0; }

/* ---- Yıldız seçici (ürün yorumu) --------------------------------------
 * <select> içindeki "★★★☆☆" metninin yerine (kullanıcı: "site genelinde
 * emoji yerine ikon"). DOM sırası 5→1, görünüm row-reverse ile 1→5:
 * "~" seçicisi seçilenin SOLUNDAKİ yıldızları da boyuyor. */
.puan-sec { border: 0; margin: 0 0 var(--sp-3); padding: 0; min-width: 0; }
.puan-sec__baslik {
    display: block; margin-bottom: var(--sp-2); padding: 0;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.puan-sec__baslik span { font-weight: var(--fw-normal); color: var(--ink-faint); }
.puan-sec__yildizlar { display: inline-flex; flex-direction: row-reverse; gap: 2px; vertical-align: middle; }
.puan-sec__yildizlar input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.puan-sec__yildizlar label {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: var(--r-md);
    color: var(--line-input);
    cursor: pointer;
    transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}
.puan-sec__yildizlar input:checked ~ label { color: var(--accent-warm); }
/* Üzerine gelince SEÇİLİ olan geçici olarak söner, üzerindeki boyanır —
   yoksa 4 seçiliyken 2'nin üzerine gelmek yine 4 yıldız gösteriyordu. */
.puan-sec__yildizlar:hover input:checked ~ label { color: var(--line-input); }
.puan-sec__yildizlar:hover label:hover,
.puan-sec__yildizlar:hover label:hover ~ label { color: var(--accent-warm); }
.puan-sec__yildizlar label:active { transform: scale(0.88); }
.puan-sec__yildizlar input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.puan-sec__temizle {
    margin-left: var(--sp-2);
    border: 0; background: none; padding: var(--sp-1);
    font-size: var(--fs-xs); color: var(--ink-dim);
    text-decoration: underline; cursor: pointer;
}

/* Satır içi simgeler: rozet çipleri ve liste seçicideki kilit metinle aynı
   hizada dursun; emoji bunu kendiliğinden yapıyordu, SVG yapmıyor. */
.rozet-ikon, .kilit-ikon { display: inline-block; flex-shrink: 0; vertical-align: -0.15em; }
.kilit-ikon { margin-left: 4px; color: var(--ink-faint); }

/* =====================================================================
   BOBO ÖZET KARTI — mekân ve yorumlar sayfası
   =====================================================================
   Kullanıcı (15 Eylül 2026): "AI yorumu alanı çok düz; daha iddialı,
   animasyonlu bir tasarım. Bobo unutulmuş — mesajları o yazmalı."
   Sınıflar .bobo-ozet-balon: .bobo-ozet-balon Bobo SOHBET sayfasında zaten
   var ve kurallar birleşip balonları uzatıyordu (ölçüldü).
   Dönen ışıklı çerçeve (@property destekleyen tarayıcıda; desteklemeyende
   durağan), süzülen avatar, konuşma balonları, "yazıyor" noktaları, kelime
   kelime beliren özet. Hareket azaltmada hepsi duruyor. */
@property --bobo-aci { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.bobo-kart {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    border: 2px solid transparent;
    border-radius: var(--r-lg);
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        conic-gradient(from var(--bobo-aci), #FF9900, #FFD27A, #F26B00, #FFB23F, #FF9900) border-box;
    box-shadow: 0 12px 40px rgba(242, 128, 0, 0.12);
    animation: boboCerceve 6s linear infinite;
}
.bobo-kart::before {
    content: ""; position: absolute; z-index: -1;
    top: -70px; right: -70px; width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 153, 0, 0.16), transparent 70%);
    pointer-events: none;
}
@keyframes boboCerceve { to { --bobo-aci: 360deg; } }

.bobo-kart__ust { display: flex; align-items: center; gap: var(--sp-3); }
.bobo-kart__avatar {
    position: relative; flex-shrink: 0;
    display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #FFB23F, #F26B00);
    color: #fff;
    box-shadow: 0 6px 18px rgba(242, 107, 0, 0.35);
    animation: boboSuzul 3.2s ease-in-out infinite;
}
/* Animasyon yüklenince zemin açılıyor: Bobo'nun kendi renkleri var. */
.bobo-kart__avatar--canli { background: var(--accent-soft); box-shadow: 0 6px 18px rgba(242, 107, 0, 0.18); overflow: hidden; }
.bobo-kart__avatar::after {
    content: ""; position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 153, 0, 0.55);
    opacity: 0;
}
.bobo-kart--dusunuyor .bobo-kart__avatar::after { animation: boboHalka 1.4s ease-out infinite; }
@keyframes boboSuzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes boboHalka { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } }

.bobo-kart__kimlik { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bobo-kart__ad { font-size: var(--fs-lg); font-weight: var(--fw-extra); line-height: 1.2; }
.bobo-kart__rol { font-size: var(--fs-xs); color: var(--ink-dim); }
.bobo-kart__etiket {
    flex-shrink: 0;
    padding: 3px 9px; border-radius: var(--r-pill);
    background: var(--ink-strong); color: #FFD27A;
    font-size: var(--fs-2xs); font-weight: var(--fw-extra); letter-spacing: 0.08em;
}

.bobo-kart__akis { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.bobo-ozet-balon {
    padding: var(--sp-3) var(--sp-4);
    border-radius: 18px 18px 18px 6px;
    background: var(--bg);
    line-height: 1.65;
    animation: boboBalon 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--sira, 0) * 160ms);
}
.bobo-ozet-balon p { margin: 0; }
.bobo-ozet-balon__metin { color: var(--ink); }
.bobo-ozet-balon__baslik {
    display: block; margin-bottom: var(--sp-2);
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim);
}
.bobo-ozet-balon--sana { background: var(--accent-soft); }
@keyframes boboBalon {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.bobo-kelime { opacity: 0; animation: boboBelir 0.35s ease forwards; animation-delay: calc(var(--k, 0) * 26ms); }
@keyframes boboBelir { to { opacity: 1; } }

/* "Yazıyor": üç zıplayan nokta ve dönen durum cümlesi. */
.bobo-ozet-balon--yaziyor { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-dim); }
.bobo-noktalar { display: inline-flex; gap: 4px; }
.bobo-noktalar i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: boboNokta 1.1s ease-in-out infinite; }
.bobo-noktalar i:nth-child(2) { animation-delay: 0.15s; }
.bobo-noktalar i:nth-child(3) { animation-delay: 0.3s; }
@keyframes boboNokta { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } }
.bobo-durum { opacity: 0; animation: boboBelir 0.4s ease forwards; }

.bobo-cipler { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bobo-cip {
    padding: 5px 12px; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--line);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    animation: boboBalon 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(360ms + var(--i, 0) * 70ms);
}
.bobo-ozet-balon--iki { display: grid; gap: var(--sp-4); }
@media (min-width: 600px) { .bobo-ozet-balon--iki { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.bobo-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.bobo-liste li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.bobo-liste svg { flex-shrink: 0; margin-top: 4px; }
.bobo-liste--arti svg { color: var(--open); }
.bobo-liste--eksi svg { color: #D9480F; }

.bobo-kart__kaynak {
    margin: 0; font-size: var(--fs-xs); color: var(--ink-faint);
    animation: boboBalon 0.5s ease both;
    animation-delay: calc(var(--sira, 4) * 160ms);
}

.bobo-kart__btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    width: 100%; min-height: 48px; margin-top: var(--sp-4);
    padding: 0 var(--sp-5);
    border: 0; border-radius: var(--r-pill);
    background: linear-gradient(135deg, #FFB23F, #F26B00);
    color: #fff; font: inherit; font-weight: var(--fw-bold);
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(242, 107, 0, 0.3);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bobo-kart__btn::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: kupaParilti 4s ease-in-out infinite;
}
.bobo-kart__btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(242, 107, 0, 0.38); }
.bobo-kart__btn:focus-visible { outline: 3px solid var(--ink-strong); outline-offset: 3px; }
.bobo-kart__btn:disabled { opacity: 0.7; cursor: progress; }
@media (min-width: 600px) { .bobo-kart__btn { width: auto; } }

@media (prefers-reduced-motion: reduce) {
    .bobo-kart, .bobo-kart__avatar, .bobo-kart--dusunuyor .bobo-kart__avatar::after,
    .bobo-ozet-balon, .bobo-cip, .bobo-kelime, .bobo-durum, .bobo-kart__kaynak,
    .bobo-noktalar i, .bobo-kart__btn::after { animation: none; }
    .bobo-kelime, .bobo-durum { opacity: 1; }
}

/* =====================================================================
   YORUMLAR SAYFASI — geniş düzen
   =====================================================================
   Kullanıcı: "sayfa tasarımı ekrana çok ortalı dar görünüyor, geniş
   ekranlarda diğer ekranlardaki gibi yayılmalı". Satır içi 680px
   kaldırıldı; masaüstünde solda yapışkan puan kartı, sağda Bobo özeti ve
   yorumlar. Yorum kartları çok geniş ekranda iki sütun — 1100px'lik tek
   satır okunmuyor. */
.yorum-sayfa__izgara { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 1024px) {
    .yorum-sayfa__izgara { grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-8); }
    .yorum-sayfa__yan { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
}
.yorum-sayfa__ana > .bobo-kart:first-child { margin-top: 0; }
.yorum-liste { display: grid; gap: var(--sp-3); }
@media (min-width: 1280px) { .yorum-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.puan-karti { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.puan-karti__etiket {
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim);
}
.puan-karti__ust { display: flex; align-items: center; gap: var(--sp-4); }
.puan-karti__deger { font-size: 3rem; font-weight: var(--fw-extra); line-height: 1; letter-spacing: -0.02em; }
.puan-karti__sayi { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-dim); }
.puan-karti__google { gap: var(--sp-2); }
.puan-karti__not { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-faint); }
.puan-karti__ayrac { height: 1px; background: var(--line); }
.puan-karti__gf { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-dim); }
.puan-karti__gf strong { font-size: var(--fs-xl); color: var(--ink); }

/* Yıldız dizisi: gri beş yıldızın üstüne puan oranında turuncu katman. */
.yildiz-dizi { position: relative; display: inline-flex; color: var(--line-input); vertical-align: middle; }
.yildiz-dizi__dolu {
    position: absolute; top: 0; left: 0; bottom: 0;
    display: inline-flex; overflow: hidden; white-space: nowrap;
    color: var(--accent-warm);
}
.yildiz-dizi svg { flex-shrink: 0; }

/* =====================================================================
   LİSTEYE KAYDET PENCERESİ
   =====================================================================
   Kullanıcı (15 Eylül 2026): "Listeye kaydet modal tasarımı daha iyi
   olsun, mobil uygulamada nasılsa aynı mantıkta olabilir." Satıra dokunmak
   sayfayı yenilemeden ekleyip çıkarıyor; sağdaki daire durumu gösteriyor;
   liste simgesi mobildeki hazır kümeden. */
.kaydet-sheet__ust { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.kaydet-sheet__foto {
    flex-shrink: 0; width: 52px; height: 52px;
    border-radius: var(--r-md); object-fit: cover; background: var(--surface-alt);
}
.kaydet-sheet__baslik { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.2; }
.kaydet-sheet__alt {
    margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kaydet-liste {
    display: flex; flex-direction: column; gap: 4px;
    max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain;
    margin-inline: calc(var(--sp-2) * -1); padding-inline: var(--sp-2);
}
.kaydet-satir {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%; padding: 8px var(--sp-2);
    border: 0; border-radius: var(--r-md);
    background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
    transition: background var(--t) var(--ease);
}
@media (hover: hover) { .kaydet-satir:hover { background: var(--surface-alt); } }
.kaydet-satir:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kaydet-satir--ekli, .kaydet-satir--ekli:hover { background: var(--accent-soft); }
.kaydet-satir[aria-busy="true"] { opacity: 0.75; }
.kaydet-satir__gorsel {
    flex-shrink: 0; display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
    background: var(--surface-alt);
    font-size: 22px; font-weight: var(--fw-extra); color: var(--accent-warm);
}
.kaydet-satir__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.kaydet-satir__gorsel--favori { background: #FDE8E8; color: #E0314B; }
.kaydet-satir__metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kaydet-satir__metin strong {
    font-weight: var(--fw-semibold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kaydet-satir__metin small { font-size: var(--fs-xs); color: var(--ink-dim); }
.kaydet-satir__durum {
    flex-shrink: 0; display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--line-input);
    color: transparent;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.kaydet-satir--ekli .kaydet-satir__durum {
    background: var(--ink-strong); border-color: var(--ink-strong); color: #fff;
    animation: kaydetPop 0.32s cubic-bezier(0.3, 1.5, 0.6, 1);
}
@keyframes kaydetPop { from { transform: scale(0.6); } to { transform: scale(1); } }
.kaydet-bos { margin: 0; padding: var(--sp-5) var(--sp-3); text-align: center; font-size: var(--fs-sm); color: var(--ink-dim); }
.kaydet-iskelet { height: 68px; border-radius: var(--r-md); background: var(--surface-alt); animation: iskeletNabiz 1.4s ease-in-out infinite; }

.kaydet-yeni { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.kaydet-yeni__ac {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 8px var(--sp-2); border-radius: var(--r-md);
    font-weight: var(--fw-semibold); cursor: pointer;
    list-style: none;
}
.kaydet-yeni__ac::-webkit-details-marker { display: none; }
@media (hover: hover) { .kaydet-yeni__ac:hover { background: var(--surface-alt); } }
.kaydet-yeni__ac:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kaydet-yeni__arti {
    flex-shrink: 0; display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 14px;
    border: 2px dashed var(--line-input); color: var(--ink-dim);
    transition: transform var(--t) var(--ease);
}
.kaydet-yeni[open] .kaydet-yeni__arti { transform: rotate(45deg); }
.kaydet-yeni__form { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2) 0; }

.kaydet-ikonlar { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 3px; scrollbar-width: none; }
.kaydet-ikonlar::-webkit-scrollbar { display: none; }
.kaydet-ikon {
    flex: 0 0 auto; width: 58px; height: 58px; padding: 6px;
    border: 2px solid transparent; border-radius: 16px;
    background: var(--surface-alt); cursor: pointer;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}
.kaydet-ikon img { width: 100%; height: 100%; object-fit: contain; }
.kaydet-ikon[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.05); }
.kaydet-ikon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Gizlilik anahtarı — onay kutusundan daha "ayar" gibi okunuyor. */
.kaydet-anahtar { position: relative; display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.kaydet-anahtar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kaydet-anahtar__ray {
    position: relative; flex-shrink: 0;
    width: 44px; height: 26px; border-radius: var(--r-pill);
    background: var(--line-input);
    transition: background var(--t) var(--ease);
}
.kaydet-anahtar__ray::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--t) var(--ease);
}
.kaydet-anahtar input:checked + .kaydet-anahtar__ray { background: var(--ink-strong); }
.kaydet-anahtar input:checked + .kaydet-anahtar__ray::after { transform: translateX(18px); }
.kaydet-anahtar input:focus-visible + .kaydet-anahtar__ray { outline: 2px solid var(--accent); outline-offset: 2px; }
.kaydet-anahtar__metin { display: flex; flex-direction: column; }
.kaydet-anahtar__metin small { font-size: var(--fs-xs); color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
    .kaydet-satir, .kaydet-satir__durum, .kaydet-yeni__arti, .kaydet-ikon,
    .kaydet-anahtar__ray, .kaydet-anahtar__ray::after { transition: none; }
    .kaydet-satir--ekli .kaydet-satir__durum, .kaydet-iskelet { animation: none; }
}

/* =====================================================================
   İŞLETME SAHİPLENME — adım adım başvuru
   =====================================================================
   Kullanıcı (15 Eylül 2026): "Mail yerine ayrı bir işletmeyi sahiplen
   formu, step step ilerletsek ... Bu iş daha kurumsal olmalı." JS yoksa
   adımlar alt alta; JS varsa (.sahiplen-form--adimli) tek tek. */
.sahiplen__ust { display: flex; align-items: center; gap: var(--sp-4); margin-block: var(--sp-4) var(--sp-5); }
.sahiplen__foto { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; background: var(--surface-alt); }
.sahiplen__baslik { margin: 0; font-size: var(--fs-2xl); line-height: 1.15; }
.sahiplen__alt { margin: 4px 0 0; color: var(--ink-dim); font-size: var(--fs-sm); }
.sahiplen__izgara { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 1024px) {
    .sahiplen__izgara { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-8); }
    .sahiplen-bilgi { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
}

.sahiplen-uyari { padding: var(--sp-4); margin-bottom: var(--sp-4); border-color: var(--danger); color: var(--ink); }

.sahiplen-ilerleme { list-style: none; display: flex; gap: 6px; margin: 0 0 var(--sp-4); padding: 0; }
.sahiplen-ilerleme__adim {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 6px;
    font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ink-faint);
}
.sahiplen-ilerleme__adim span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sahiplen-ilerleme__adim::before {
    content: ""; height: 5px; border-radius: var(--r-pill);
    background: var(--line); transition: background var(--t) var(--ease);
}
.sahiplen-ilerleme__adim--bitti::before { background: var(--ink-strong); }
.sahiplen-ilerleme__adim--aktif { color: var(--ink); }
.sahiplen-ilerleme__adim--aktif::before { background: var(--accent); }
@media (min-width: 600px) { .sahiplen-ilerleme__adim { font-size: var(--fs-xs); } }

.sahiplen-form { padding: var(--sp-5); }
.sahiplen-adim { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.sahiplen-adim:focus { outline: none; }
.sahiplen-adim + .sahiplen-adim { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.sahiplen-form--adimli .sahiplen-adim + .sahiplen-adim { margin-top: 0; padding-top: 0; border-top: 0; }
.sahiplen-adim[hidden] { display: none; }
.sahiplen-adim legend { padding: 0; margin-bottom: var(--sp-1); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.sahiplen-adim__aciklama { margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); }
.sahiplen-iki { display: grid; gap: var(--sp-4); }
@media (min-width: 600px) { .sahiplen-iki { grid-template-columns: 1fr 1fr; } }

.rol-secenekler { display: grid; gap: var(--sp-2); }
@media (min-width: 600px) { .rol-secenekler { grid-template-columns: 1fr 1fr; } }
.rol-secenek {
    position: relative;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 2px solid var(--line); border-radius: var(--r-md);
    background: var(--surface);
    font-weight: var(--fw-semibold); cursor: pointer;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.rol-secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rol-secenek__daire {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--line-input);
    transition: border var(--t) var(--ease);
}
.rol-secenek:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rol-secenek:has(input:checked) .rol-secenek__daire { border: 6px solid var(--accent); }
.rol-secenek:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.dosya-alani {
    position: relative;
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4);
    border: 2px dashed var(--line-input); border-radius: var(--r-md);
    background: var(--surface); cursor: pointer;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
@media (hover: hover) { .dosya-alani:hover { border-color: var(--accent); background: var(--accent-soft); } }
.dosya-alani:focus-within { border-color: var(--accent); }
.dosya-alani input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dosya-alani__ikon {
    flex-shrink: 0; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
}
.dosya-alani__metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dosya-alani__metin small { color: var(--ink-dim); font-size: var(--fs-xs); }
.dosya-alani__istege { font-weight: var(--fw-normal); color: var(--ink-faint); }
.dosya-adi { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--open); word-break: break-all; }
.dosya-adi:empty { display: none; }
.dosya-adi--hata { color: var(--danger); }
.alan-hata { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--danger); }

.sahiplen-onay { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; cursor: pointer; }
.sahiplen-onay input { flex-shrink: 0; width: auto; min-height: auto; margin-top: 3px; }

.sahiplen-ozet {
    display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: var(--sp-2) var(--sp-4);
    margin: 0; padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg);
    font-size: var(--fs-sm);
}
.sahiplen-ozet[hidden] { display: none; }
.sahiplen-ozet dt { color: var(--ink-dim); }
.sahiplen-ozet dd { margin: 0; font-weight: var(--fw-semibold); word-break: break-word; }

.sahiplen-nav { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.sahiplen-nav #sahiplenIleri, .sahiplen-nav #sahiplenGonder { margin-left: auto; }

.sahiplen-bilgi { padding: var(--sp-5); }
.sahiplen-bilgi h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.sahiplen-bilgi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); }
.sahiplen-bilgi li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.sahiplen-bilgi li svg { flex-shrink: 0; margin-top: 2px; color: var(--open); }
.sahiplen-bilgi__alt { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--ink-dim); }

.sahiplen-tamam { max-width: 640px; padding: var(--sp-8) var(--sp-6); text-align: center; }
.sahiplen-tamam h2 { margin: var(--sp-3) 0; font-size: var(--fs-xl); }
.sahiplen-tamam p { color: var(--ink-soft); line-height: 1.6; }
.sahiplen-tamam__isaret {
    display: inline-grid; place-items: center;
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--open); color: #fff;
    animation: kaydetPop 0.45s cubic-bezier(0.3, 1.5, 0.6, 1);
}

.yonetim-tablo { overflow-x: auto; }
.yonetim-tablo table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-md); font-size: var(--fs-sm); }
.yonetim-tablo th, .yonetim-tablo td { padding: var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.yonetim-tablo small { color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
    .rol-secenek, .rol-secenek__daire, .dosya-alani, .sahiplen-ilerleme__adim::before { transition: none; }
    .sahiplen-tamam__isaret { animation: none; }
}

/* =====================================================================
   SAATE GÖRE SEÇKİLER — ana sayfa rayı ve seçki sayfası
   =====================================================================
   Kullanıcı (15 Eylül 2026): "Keşfet ekranına saate bağlı olarak kategori
   önerilerinde bulunalım." Her seçkinin kendi renk geçişi var: rayda
   kartlar birbirinden ayırt edilsin, sayfanın başlığı da aynı rengi taşısın. */
.rail--secki { grid-auto-columns: 232px; }
@media (min-width: 1024px) {
    .rail--secki {
        grid-auto-flow: column; grid-template-columns: none;
        grid-auto-columns: 260px; overflow-x: auto; scroll-snap-type: x mandatory;
    }
}
.secki-kart {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5);
    min-height: 152px; padding: var(--sp-4);
    border-radius: var(--r-lg);
    color: #fff; text-decoration: none;
    background: linear-gradient(145deg, var(--secki-1, #FFB23F), var(--secki-2, #F26B00));
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.secki-kart::after {
    content: ""; position: absolute; z-index: -1;
    right: -34px; bottom: -34px; width: 136px; height: 136px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}
@media (hover: hover) { .secki-kart:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); } }
.secki-kart:focus-visible { outline: 3px solid var(--ink-strong); outline-offset: 3px; }
.secki-kart__ikon {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.2);
}
.secki-kart__metin { display: flex; flex-direction: column; gap: 2px; }
.secki-kart__metin strong { font-size: var(--fs-lg); font-weight: var(--fw-extra); line-height: 1.2; }
.secki-kart__metin span { font-size: var(--fs-sm); line-height: 1.35; opacity: 0.9; }
.secki-kart__rozet {
    position: absolute; top: var(--sp-3); right: var(--sp-3);
    padding: 2px 8px; border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.35);
    font-size: var(--fs-2xs); font-weight: var(--fw-extra); letter-spacing: 0.06em;
}
.secki-kart--kahvalti { --secki-1: #FFC75F; --secki-2: #E9791E; }
.secki-kart--kahve    { --secki-1: #A47551; --secki-2: #4E3223; }
.secki-kart--calisma  { --secki-1: #5B8DEF; --secki-2: #2A4390; }
.secki-kart--ogle     { --secki-1: #4CB782; --secki-2: #1B6E4A; }
.secki-kart--cocuk    { --secki-1: #FF8FB1; --secki-2: #D2466F; }
.secki-kart--tatli    { --secki-1: #F4A2C2; --secki-2: #B94E80; }
.secki-kart--romantik { --secki-1: #E45A6A; --secki-2: #7F1A34; }
.secki-kart--aksam    { --secki-1: #F2994A; --secki-2: #6E3510; }
.secki-kart--gece     { --secki-1: #3E4C8A; --secki-2: #121833; }
.secki-kart--bar      { --secki-1: #8E5BE8; --secki-2: #361B6E; }
.secki-kart--gurme    { --secki-1: #3A342E; --secki-2: #0E0D0C; }
.secki-kart--gurme .secki-kart__ikon { color: #FFD27A; }

.secki-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; gap: var(--sp-4);
    margin-top: var(--sp-4); padding: var(--sp-6) var(--sp-5);
    border-radius: var(--r-lg); color: #fff;
    background: linear-gradient(145deg, var(--secki-1, #FFB23F), var(--secki-2, #F26B00));
}
.secki-hero::after {
    content: ""; position: absolute; z-index: -1;
    right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}
.secki-hero__ikon {
    flex-shrink: 0; display: grid; place-items: center;
    width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, 0.2);
}
.secki-hero__ust { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.secki-hero__baslik { margin: 2px 0; font-size: var(--fs-2xl); line-height: 1.15; }
.secki-hero__alt { margin: 0; opacity: 0.9; }
.secki-kural { margin: var(--sp-4) 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-dim); }
.secki-izgara { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.secki-kilit, .secki-bos { padding: var(--sp-6); text-align: center; }
.secki-kilit h2 { margin-top: 0; }
.secki-kilit p, .secki-bos p { color: var(--ink-soft); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) { .secki-kart { transition: none; } }

/* ---- Sen de değerlendir (yorumlar sayfası) ----------------------------
 * Mobilde vardı, web yalnızca okuyordu. Yıldız seçici ürün yorumundakiyle
 * aynı bileşen (.puan-sec). */
.degerlendir { margin-bottom: var(--sp-5); padding: var(--sp-5); }
.degerlendir h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.degerlendir__giris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.degerlendir__giris h2 { margin-bottom: 4px; }
.degerlendir__giris p { margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); }
.degerlendir__form { display: flex; flex-direction: column; gap: var(--sp-3); }
.degerlendir__form .puan-sec { margin-bottom: 0; }
.degerlendir__sayac { display: block; margin-top: 4px; text-align: right; font-size: var(--fs-xs); color: var(--ink-faint); }
.degerlendir__eylemler { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.degerlendir__mesaj,
.degerlendir__hata { margin: 0 0 var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-sm); }
.degerlendir__mesaj { background: var(--accent-soft); }
.degerlendir__hata { background: var(--danger-bg); color: var(--danger); }
.pill--degerlendir { gap: 6px; background: var(--ink-strong); color: #fff; }

/* ---- Bölge: şehrin içinde merkez / ilçe / tüm il ------------------------
 * Kullanıcı (15 Eylül 2026): "Nilüfer'deyim ama İnegöl, Gemlik, Karacabey'den
 * öneri geliyor ... ilçe seçimi de yapalım". Şehir seçicinin ikinci adımı,
 * ana sayfadaki "nereye bakılıyor" satırı ve yakındaki yerlerde yarıçap. */
.topbar__city-ad { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .topbar__city-ad { max-width: 240px; } }

.bolge-geri {
    display: inline-flex; align-items: center; gap: 4px;
    margin: 0 0 var(--sp-1) calc(var(--sp-2) * -1); padding: var(--sp-2);
    border: 0; border-radius: var(--r-md); background: none;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-dim);
}
.bolge-geri:hover { color: var(--ink); background: var(--surface-alt); }
.bolge-liste { display: flex; flex-direction: column; gap: var(--sp-2); }
.bolge-yukleniyor { margin: 0; padding: var(--sp-5) 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-dim); }
.bolge-satir {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    width: 100%; padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-input); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink); text-align: left;
    transition: border-color var(--t-fast, .15s) ease, box-shadow var(--t-fast, .15s) ease;
}
.bolge-satir:hover { border-color: var(--ink-faint); }
.bolge-satir__metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bolge-satir__metin strong { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.bolge-satir__metin small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-dim); }
.bolge-satir__rozet {
    flex-shrink: 0; padding: 3px 9px; border-radius: var(--r-pill);
    background: var(--accent-soft); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink);
}
.bolge-satir--secili { border-color: var(--accent-warm); box-shadow: inset 0 0 0 1px var(--accent-warm); }
.bolge-ara { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-dim); }
.bolge-ilceler { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bolge-cip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 var(--sp-3);
    border: 1px solid var(--line-input); border-radius: var(--r-pill); background: var(--surface);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink);
}
.bolge-cip span { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--ink-faint); }
.bolge-cip:hover { border-color: var(--ink-faint); }
.bolge-cip--secili { border-color: var(--ink-strong); background: var(--ink-strong); color: #fff; }
.bolge-cip--secili span { color: rgba(255, 255, 255, .72); }

.ev-bolge {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    margin: 0 0 var(--sp-3); padding: 6px 12px 6px 10px;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
    font-size: var(--fs-sm); color: var(--ink-dim); text-align: left;
}
.ev-bolge svg { flex-shrink: 0; color: var(--accent-warm); }
.ev-bolge__metin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-bolge__degistir { flex-shrink: 0; font-weight: var(--fw-bold); color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.yaricap { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-3); overflow-x: auto; scrollbar-width: none; }
.yaricap::-webkit-scrollbar { display: none; }
.yaricap__cip {
    flex-shrink: 0; min-height: 36px; padding: 0 var(--sp-3);
    border: 1px solid var(--line-input); border-radius: var(--r-pill); background: var(--surface);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink);
}
.yaricap__cip[aria-pressed="true"] { border-color: var(--ink-strong); background: var(--ink-strong); color: #fff; }
.yakin-bos {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
    margin: 0 0 var(--sp-3); padding: var(--sp-4);
    border-radius: var(--r-md); background: var(--surface-alt);
    font-size: var(--fs-sm); color: var(--ink-dim);
}
.yakin-bos__genislet { padding: 0; border: 0; background: none; font-weight: var(--fw-bold); color: var(--ink); text-decoration: underline; }
.place-card__mesafe { font-weight: var(--fw-bold); color: var(--ink); }

.secki-bolge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--ink-dim); }
.secki-bolge svg { color: var(--accent-warm); }
.secki-bolge__degistir { padding: 0; border: 0; background: none; font-weight: var(--fw-bold); color: var(--ink); text-decoration: underline; }