/* Reztoran V2-01 — tasarım tokenları: Tasarim/index.html #exp-v2-01 */
:root {
    --lacivert: #002F87;
    --metin: #14181f;
    --metin-orta: #3a4150;
    --metin-soluk: #4b5261;
    --metin-gri: #6b7280;
    --gri-acik: #8b93a3;
    --cizgi: #eceef2;
    --vurgu-zemin: #e8edf8;
}

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

body {
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--metin);
    background: #fff;
}

.sayfa { max-width: 1440px; margin: 0 auto; }

a { color: inherit; text-decoration: none; }

/* ── Butonlar ─────────────────────────────────────────────── */
.btn { display: inline-block; border-radius: 999px; font-weight: 600; }
.btn-dolu { background: var(--lacivert); color: #fff; padding: 10px 20px; font-size: 13px; transition: background .15s ease, color .15s ease; }
.btn-dolu:hover { background: #E4C27E; color: var(--lacivert); }
.btn-beyaz {
    background: #fff; color: var(--lacivert); padding: 13px 28px; font-size: 14px; font-weight: 700; flex: none;
    transition: background .15s ease, color .15s ease;
}
.btn-beyaz:hover { background: #E4C27E; color: var(--lacivert); }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 56px; border-bottom: 1px solid var(--cizgi);
}
.site-logo img { height: 24px; width: auto; display: block; }
.site-logo-kucuk img { height: 20px; }
.site-logo-yazi { font-size: 22px; font-weight: 700; color: var(--lacivert); }
.site-nav { display: flex; gap: 30px; font-size: 14px; font-weight: 500; color: var(--metin-orta); }
.site-nav a, .header-cta { white-space: nowrap; }
/* Sosyal Medya: yalnızca üstüne gelince (veya klavyeyle odaklanınca) açılır.
   Başlık <a> değil; tıklamak hiçbir yere götürmez. */
.sosyal-menu { position: relative; display: flex; align-items: center; }
.sosyal-tetik { cursor: default; user-select: none; white-space: nowrap; }
.sosyal-tetik .ok { font-size: 10px; color: var(--gri-acik); }
.sosyal-menu:hover .sosyal-tetik, .sosyal-menu:focus-within .sosyal-tetik { color: var(--lacivert); }
.sosyal-panel {
    position: absolute; top: 100%; left: 0; margin-top: 14px; transform: translateY(-4px);
    min-width: 180px; padding: 8px; z-index: 60;
    background: #fff; border: 1px solid var(--cizgi); border-radius: 12px;
    box-shadow: 0 10px 28px rgba(8, 16, 40, .10);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}
/* Başlık ile panel arası boşlukta imleç kaybolmasın diye görünmez köprü (margin-top ile aynı boyda). */
.sosyal-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.sosyal-menu:hover .sosyal-panel, .sosyal-menu:focus-within .sosyal-panel {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.sosyal-panel a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--metin-orta); white-space: nowrap;
}
.sosyal-panel a:hover { background: var(--vurgu-zemin); color: var(--lacivert); }
.sosyal-ikon { display: block; flex: none; width: 17px; height: 17px; border-radius: 4px; object-fit: contain; }
/* Dar masaüstü: menü (5 link), iki mağaza rozeti (40px) ve CTA birlikte ~1300px istiyor;
   bu aralıkta rozetler header'dan çekilir (mobil menüde ve sayfalarda duruyorlar). */
@media (min-width: 1025px) and (max-width: 1319px) {
    .site-nav { gap: 22px; }
    .header-sag .magaza-rozetleri { display: none; }
}

/* ── Uygulama mağazası rozetleri (header, CTA'nın solunda) ──── */
.header-sag { display: flex; align-items: center; gap: 16px; }
/* Apple ve Google rozet kuralları: ekranda en az 40px (Apple), rozetler arasında
   yüksekliğin 1/4'ü kadar boşluk (44px'lik en büyük kullanım için 11px), hover'da
   hareket/gölge gibi efekt yok. Bkz. _MagazaLinkleri.cshtml. */
.magaza-rozetleri { display: flex; align-items: center; gap: 12px; }
.magaza-rozeti { display: block; line-height: 0; }
.magaza-rozeti img { display: block; height: 40px; width: auto; }
.magaza-rozetleri-mobil { justify-content: center; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero { position: relative; height: 560px; overflow: hidden; }
.hero-gorsel { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-golge {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,16,40,.25), rgba(8,16,40,.55) 75%, rgba(8,16,40,.3));
}
.hero-icerik {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 24px; padding: 0 80px;
}
.hero-icerik h1 {
    font-size: 52px; font-weight: 700; letter-spacing: -1px; color: #fff;
    text-align: center; line-height: 1.1; text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hero-icerik > p { font-size: 17px; color: rgba(255,255,255,.85); text-align: center; }
.hero-arama {
    display: flex; align-items: center; gap: 10px; background: #fff;
    border-radius: 999px; padding: 8px 8px 8px 26px; width: 640px; max-width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.hero-arama-ikon { color: var(--gri-acik); font-size: 17px; }
.hero-arama input {
    flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--metin);
    min-width: 0; background: transparent;
}
.hero-arama input::placeholder { color: var(--gri-acik); }
.hero-arama .btn-dolu { padding: 13px 30px; font-size: 14px; border: 0; cursor: pointer; font-family: inherit; }
.hero-etiketler { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-etiketler a {
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(6px); border-radius: 999px; padding: 7px 18px;
    font-size: 13px; color: #fff;
}

/* ── Bölümler ─────────────────────────────────────────────── */
.bolum { padding: 56px 56px 0; }
.bolum-baslik-satiri {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px;
}
.bolum h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.tumunu-gor { font-size: 13.5px; font-weight: 600; color: var(--lacivert); }

/* ── Kartlar ──────────────────────────────────────────────── */
.kart-grid { display: grid; gap: 24px; }
.kart-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kart-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kart {
    display: block; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--cizgi); background: #fff;
}
.kart-gorsel { position: relative; height: 170px; background: var(--vurgu-zemin); }
.kart-gorsel-alcak { height: 150px; }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kart-govde { padding: 16px; }
.kart-ad { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.kart-ad-blog { font-size: 14.5px; line-height: 1.4; margin-bottom: 0; }
.kart-meta { font-size: 12.5px; color: var(--metin-gri); }
.kart-kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    color: var(--lacivert); margin-bottom: 5px;
}
.kart-tiklama { display: block; color: inherit; }
.kart-detay-buton {
    display: block; text-align: center; margin: 0 14px 14px; padding: 9px 0;
    border-radius: 8px; background: var(--vurgu-zemin); color: var(--lacivert);
    font-size: 12.5px; font-weight: 600; transition: background .15s ease, color .15s ease;
}
.kart-detay-buton:hover { background: var(--lacivert); color: #fff; }

/* Öne çıkanlar: karta hafif kalkma + gölge, görsel yumuşak zoom, buton kart üzerinde de renklensin. */
.one-cikan-slider .kart {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.one-cikan-slider .kart-gorsel img { transition: transform .4s ease; }
.one-cikan-slider .kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(8, 16, 40, .14);
    border-color: transparent;
}
.one-cikan-slider .kart:hover .kart-gorsel img { transform: scale(1.05); }
.one-cikan-slider .kart:hover .kart-detay-buton { background: var(--lacivert); color: #fff; }

/* Rehberler & Seçkiler: Öne Çıkanlar kartlarıyla aynı hover (kalkma + gölge + görsel zoom), buton yok. */
.rehber-seckiler .kart {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rehber-seckiler .kart-gorsel img { transition: transform .4s ease; }
.rehber-seckiler .kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(8, 16, 40, .14);
    border-color: transparent;
}
.rehber-seckiler .kart:hover .kart-gorsel img { transform: scale(1.05); }

/* ── Öne çıkanlar slider'ı ────────────────────────────────────────────────
   641px altında (mobil), .kart-grid-4 zaten kendi sabit-genişlikli kaydırma
   şeridine sahip (aşağıdaki @media max-width:640px); slider burada onu ezmesin
   diye tüm yatay-kaydırma kuralları min-width:641px ile sınırlı tutulur. */
.one-cikan-slider { position: relative; }
.slider-ok {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 42px; height: 42px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--cizgi); background: #fff;
    box-shadow: 0 8px 20px rgba(8, 16, 40, .12); color: var(--lacivert);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    font: inherit; line-height: 1;
}
/* Ok karakteri (‹ ›) yazı tipine göre kutusunun ortasında oturmuyordu; SVG ile
   piksel olarak tam ortalanır ve buton rengiyle (currentColor) aynı davranır. */
.slider-ok svg { width: 18px; height: 18px; display: block; flex: none; }
.slider-ok:hover { background: var(--lacivert); color: #fff; }
.slider-ok[hidden] { display: none; }
.slider-ok-sol { left: -14px; }
.slider-ok-sag { right: -14px; }
@media (min-width: 641px) {
    .one-cikan-slider.kaydirmali .kart-grid-4 {
        display: flex; overflow-x: auto; gap: 24px; scroll-behavior: smooth;
        scrollbar-width: none; -ms-overflow-style: none;
        /* overflow-x:auto tek başına overflow-y'yi de "auto" yapıp hover'daki
           kalkma + gölgeyi dört yandan da kırpıyordu (soldaki/sağdaki ilk/son
           kart için yatay kırpılma en görünen sorundu). Gölgenin bulanıklık
           payını (34px) karşılayacak kadar boşluk açıp dış görünümü negatif
           margin ile eski konumuna geri çekiyoruz.
           Not: scroll-snap kasıtlı olarak kaldırıldı — o boşluğu "ilk kartın
           hizalanacağı nokta" sanıp sayfa yüklenişinde otomatik oraya kayıyor
           ve "önceki" oku gereksiz yere görünüyordu. Ok butonları zaten adım
           genişliğini kendi hesaplayıp kaydırdığı için snap olmadan da düzgün çalışır. */
        padding: 36px; margin: -36px;
    }
    .one-cikan-slider.kaydirmali .kart-grid-4::-webkit-scrollbar { display: none; }
    .one-cikan-slider.kaydirmali .kart-grid-4 > .kart {
        flex: 0 0 calc((100% - 3 * 24px) / 4);
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .one-cikan-slider.kaydirmali .kart-grid-4 > .kart {
        flex: 0 0 calc((100% - 24px) / 2);
    }
}
@media (max-width: 640px) {
    /* Mobilde kartlar zaten sabit genişlikte kayan bir şerit; ok küçültülüp
       taşma olduğunda görünür kalır, kullanıcı sağa/sola kaydırılabildiğini anlar. */
    .slider-ok { width: 32px; height: 32px; }
    .slider-ok svg { width: 15px; height: 15px; }
    .slider-ok-sol { left: 4px; }
    .slider-ok-sag { right: 4px; }
}

/* ── Tanıtım ──────────────────────────────────────────────── */
.tanitim {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.tanitim-gorsel { height: 340px; border-radius: 20px; overflow: hidden; background: var(--vurgu-zemin); }
.tanitim-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tanitim h2 { font-size: 26px; margin-bottom: 14px; }
.tanitim p { font-size: 15px; line-height: 1.7; color: var(--metin-soluk); margin-bottom: 20px; }
.tanitim-maddeler { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tanitim-maddeler li {
    display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--metin-orta);
}
.tanitim-maddeler .onay {
    width: 26px; height: 26px; border-radius: 50%; background: var(--vurgu-zemin);
    color: var(--lacivert); display: inline-flex; align-items: center;
    justify-content: center; font-size: 13px; flex: none;
}
.tanitim-buton { margin-top: 24px; padding: 13px 28px; font-size: 14px; }

/* ── CTA bandı ────────────────────────────────────────────── */
.cta-bandi {
    margin: 56px; border-radius: 20px; background: var(--lacivert); color: #fff;
    padding: 44px 48px; display: flex; align-items: center;
    justify-content: space-between; gap: 24px;
}
.cta-baslik { font-size: 23px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 6px; }
.cta-aciklama { font-size: 14px; color: rgba(255,255,255,.75); }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
    padding: 36px 56px; border-top: 1px solid var(--cizgi);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px 40px;
    grid-template-areas: "logo nav sosyal";
}
.site-footer .site-logo { grid-area: logo; }
.footer-nav {
    grid-area: nav; display: flex; justify-content: center; flex-wrap: wrap;
    gap: 10px 26px; font-size: 12.5px; color: var(--metin-gri);
}
.footer-nav a { white-space: nowrap; }
.footer-sosyal { grid-area: sosyal; display: flex; align-items: center; gap: 12px; }
.footer-sosyal a {
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; color: var(--metin-gri);
    transition: transform .15s ease, opacity .15s ease;
}
.footer-sosyal a:hover { transform: translateY(-2px); opacity: .85; }
.footer-sosyal img { display: block; width: 22px; height: 22px; border-radius: 6px; object-fit: contain; }
/* Tablet ve mobil: üstte logo + ikonlar, altta ince çizgiyle ayrılmış linkler */
@media (max-width: 1024px) {
    .site-footer { grid-template-columns: 1fr auto; grid-template-areas: "logo sosyal" "nav nav"; }
    .footer-nav { justify-content: flex-start; padding-top: 18px; border-top: 1px solid var(--cizgi); }
}

/* ── Duyarlılık ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .kart-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .kart-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .tanitim { grid-template-columns: 1fr; gap: 32px; }
    .site-nav { display: none; }
}
@media (max-width: 640px) {
    .site-header, .site-footer, .bolum { padding-left: 20px; padding-right: 20px; }
    .bolum { padding-top: 40px; }
    .cta-bandi { margin: 40px 20px; flex-direction: column; align-items: flex-start; }
    .kart-grid-4, .kart-grid-3 { grid-template-columns: 1fr; }
    .hero { height: 480px; }
    .hero-icerik { padding: 0 20px; }
    .hero-icerik h1 { font-size: 34px; }
}

/* ── V2-02 Arama / Listeleme ─────────────────────────────── */
.header-arama {
    display: flex; align-items: center; gap: 10px; background: #f3f4f7;
    border-radius: 999px; padding: 9px 20px; width: 420px; max-width: 50%;
}
.header-arama input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 13.5px; color: var(--metin-orta); min-width: 0;
}
.filtre-satiri {
    padding: 24px 56px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* Listeleme sayfasının arama kutusu: her genişlikte filtrelerin üstünde durur (header'da
   menü yerine arama gösterilmez). Filtre formunun içinde olduğu için arama yapılınca
   seçili filtreler korunur. */
.mobil-arama {
    display: flex; align-items: center; gap: 10px; flex-basis: 100%;
    background: #f3f4f7; border-radius: 999px; padding: 9px 9px 9px 20px; margin-bottom: 4px;
}
.mobil-arama input {
    flex: 1; border: 0; outline: 0; background: transparent; min-width: 0;
    font: inherit; font-size: 13.5px; color: var(--metin-orta);
}
.mobil-arama input::placeholder { color: var(--gri-acik); }
.mobil-arama-btn {
    border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    background: var(--lacivert); color: #fff; border-radius: 999px; padding: 9px 20px;
    transition: background .15s ease, color .15s ease;
}
.mobil-arama-btn:hover { background: #E4C27E; color: var(--lacivert); }
/* Masaüstünde sayfa boyu uzanmasın: kendi satırında, daha kısa ve alçak. */
@media (min-width: 1025px) {
    /* Ortada, kendi satırında: iki yandaki boşluk satırın kalanını doldurur, filtreler alt satırda kalır. */
    .mobil-arama {
        flex: 0 0 640px; margin: 0 calc((100% - 640px) / 2) 8px;
        padding: 8px 8px 8px 22px;
    }
    .mobil-arama input { font-size: 14px; }
    .mobil-arama-btn { padding: 9px 22px; font-size: 13px; }
}
@media (max-width: 640px) {
    .mobil-arama { grid-column: 1 / -1; }
}
.filtre {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    border: 1px solid #dcdfe6; background: #fff; border-radius: 999px;
    padding: 7px 32px 7px 16px; font: inherit; font-size: 12.5px; color: var(--metin-orta);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%233a4150'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.filtre-aktif {
    background-color: var(--vurgu-zemin); border-color: var(--vurgu-zemin);
    color: var(--lacivert); font-weight: 600;
}
.filtre-temizle { font-size: 12.5px; color: var(--metin-orta); border: 1px solid #dcdfe6; border-radius: 999px; padding: 7px 16px; }
.sonuc-bilgisi { margin-left: auto; font-size: 13px; color: var(--metin-gri); }
.sonuc-bilgisi b { color: var(--metin); }
.sirala-secim { display: inline-flex; align-items: center; gap: 2px; }
/* Native <select> kapalıyken en uzun option'ın genişliğini alır (tarayıcı
   davranışı), bu yüzden "Öne Çıkanlar" seçiliyken sağda boşluk + ok uzakta
   kalıyordu. Kendi okumuzu çiziyoruz, gerçek genişliği ise script seçili
   metne göre ayarlıyor (aşağıdaki script bloğu). */
.sirala-secim select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border: none; background: transparent; color: var(--metin); font-weight: 700;
    font-size: 13px; font-family: inherit; cursor: pointer; padding: 2px 0 2px 4px;
}
.sirala-secim select:focus-visible { outline: 2px solid var(--lacivert); border-radius: 4px; }
.sirala-secim .ok { font-size: 10px; color: var(--metin-gri); }
.sonuc-grid {
    padding: 24px 56px 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.sonuc-bos { padding: 40px 56px 80px; text-align: center; color: var(--metin-gri); }
.sonuc-bos a { color: var(--lacivert); font-weight: 600; }
.skart {
    position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--cizgi);
    background: #fff; display: flex; flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Kartın tamamını tıklanabilir yapan görünmez katman; Rezervasyon/Sipariş/İncele
   linkleri kendi hedeflerine gitsin diye bunların üzerinde (z-index) kalır. */
.skart-tiklama-katmani { position: absolute; inset: 0; z-index: 1; }
.skart-aksiyonlar, .skart-incele { position: relative; z-index: 2; }
.skart-kapali { opacity: .55; }
/* Öne Çıkanlar/Rehberler kartlarıyla aynı hover: hafif kalkma + gölge + görsel zoom. */
.skart:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(8, 16, 40, .14); border-color: transparent; }
.skart:hover .skart-gorsel img { transform: scale(1.05); }
.skart-gorsel { position: relative; height: 190px; background: var(--vurgu-zemin); overflow: hidden; }
.skart-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.skart-govde { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.skart-baslik-satiri { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.skart-ad { font-weight: 600; font-size: 16px; }
.skart-fiyat { font-size: 12.5px; color: var(--metin-gri); }
.skart-meta { font-size: 12.5px; color: var(--metin-gri); margin-bottom: 6px; }
.skart-puanlar { display: flex; gap: 12px; font-size: 11.5px; color: var(--metin-gri); margin-bottom: 10px; }
.skart-puanlar b { color: var(--metin); }
.puan-g { color: #4285F4 !important; }
.puan-yildiz { color: #f5a623; font-size: 10px; }
.skart-aciklama { font-size: 13px; color: var(--metin-soluk); line-height: 1.55; margin-bottom: 14px; }
.skart-aksiyonlar { display: flex; gap: 8px; margin-bottom: 12px; margin-top: auto; }
.skart-buton { flex: 1; border-radius: 999px; padding: 9px; text-align: center; font-size: 12.5px; font-weight: 600; transition: background .15s ease, color .15s ease; }
.skart-buton-lacivert { background: var(--lacivert); color: #fff; }
.skart-buton-lacivert:hover { background: #E4C27E; color: var(--lacivert); }
.skart-buton-altin { background: var(--lacivert); color: #fff; }
.skart-buton-altin:hover { background: #E4C27E; color: var(--lacivert); }
.skart-incele {
    display: flex; justify-content: center; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--lacivert);
    border-top: 1px solid var(--cizgi); padding-top: 12px;
}
.skart-kapali-notu { font-size: 13px; color: #b04a2f; line-height: 1.55; }
@media (max-width: 1024px) {
    .sonuc-grid { grid-template-columns: repeat(2, 1fr); }
    .header-arama { display: none; }
}
@media (max-width: 640px) {
    .filtre-satiri, .sonuc-grid { padding-left: 20px; padding-right: 20px; }
    .sonuc-grid { grid-template-columns: 1fr; }
    .sonuc-bilgisi { margin-left: 0; width: 100%; }
}

/* ── V2-03.5 Restoran Detay ──────────────────────────────── */
.kirinti { padding: 16px 56px 0; font-size: 12.5px; color: var(--gri-acik); }
.kirinti b { color: var(--metin); font-weight: 400; }
.detay-galeri {
    padding: 16px 56px 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; height: 396px;
}
.detay-galeri-ana { border-radius: 16px; overflow: hidden; background: var(--vurgu-zemin); }
.detay-galeri-ana img, .detay-galeri-kucuk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detay-galeri-yan { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.detay-galeri-kucuk { border-radius: 16px; overflow: hidden; background: var(--vurgu-zemin); }
.detay-galeri-daha {
    border-radius: 16px; background: #f3f4f7; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 600; color: var(--lacivert);
}
/* Kalan foto sayısını taşıyan kutu, düz renk yerine bir sonraki görselin
   bulanıklaştırılmış hâlini arka plan yapar; sayı üstte okunaklı kalsın diye
   koyu bir katman + beyaz metin kullanılır. */
.detay-galeri-daha img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: blur(9px) brightness(.65); transform: scale(1.15); display: block;
}
.detay-galeri-daha span { position: relative; z-index: 1; color: #fff; }
.detay-baslik-satiri {
    padding: 26px 56px 0; display: flex; align-items: flex-start;
    justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.detay-ad { font-size: 32px; font-weight: 700; letter-spacing: -0.6px; margin-bottom: 8px; }
.detay-rozetler { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--metin-gri); flex-wrap: wrap; }
.rozet-acik { background: #e8f5ec; color: #0a7a3d; border-radius: 999px; padding: 3px 12px; font-weight: 600; font-size: 12px; }
.rozet-kapali { background: #fdeeea; color: #b04a2f; border-radius: 999px; padding: 3px 12px; font-weight: 600; font-size: 12px; }
/* Reztoran Card üyesi restoranların kart görselinin üzerindeki rozet */
.rozet-rkart {
    position: absolute; top: 12px; left: 12px; z-index: 1; border-radius: 999px; padding: 5px 11px;
    background: rgba(0,26,77,.88); color: #E4C27E; font-size: 11px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase; pointer-events: none;
}
/* Detay sayfasında açık/kapalı rozetleriyle aynı satırda, akış içinde */
.detay-rozetler .rozet-rkart { position: static; padding: 3px 12px; background: #001A4D; }
.rozet-paket {
    display: inline-block; align-self: flex-start; background: var(--vurgu-zemin);
    color: var(--lacivert); border-radius: 999px; padding: 3px 12px; font-weight: 600; font-size: 12px;
    margin-bottom: 6px;
}
.rozet-etkinlik { background: #fbf3e2; color: #8a6418; }
/* Kartlardaki üste hizalama ve alt boşluk detay satırında rozeti yukarı kaydırıyordu */
.detay-rozetler .rozet-paket { align-self: auto; margin-bottom: 0; }
.detay-puanlar { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.puan-hap {
    display: flex; align-items: center; gap: 7px; border: 1px solid var(--cizgi);
    border-radius: 999px; padding: 7px 14px; font-size: 12.5px;
}
.puan-hap b { font-size: 13px; }
.puan-hap .g-harf { font-weight: 800; font-size: 14px; color: #4285F4; }
.puan-hap .yildizlar { color: #f5a623; font-size: 11.5px; line-height: 1; letter-spacing: 1.5px; }
.puan-hap .yorum { color: var(--metin-gri); }

/* ── Ödül rozetleri ───────────────────────────────────────────────────────
   Görsel yüklenmemiş öğeler için: madalya ikonu + gerçek ödül adı, her rehber
   kendi rengiyle. Resmî logo değil, kendi tasarımımız — editör isterse Library
   → Ödüller'deki öğeye gerçek logo görseli yükleyip bunun yerine geçirebilir. */
.odul-seridi { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.odul-rozet {
    display: flex; align-items: center; gap: 6px; border-radius: 999px;
    padding: 6px 13px 6px 10px; font-size: 12px; font-weight: 700; letter-spacing: .1px;
    color: #fff;
}
.odul-rozet .odul-ikon { width: 15px; height: 15px; flex: none; }
.odul-rozet .odul-gorsel { height: 18px; width: auto; max-width: 110px; object-fit: contain; display: block; }
.odul-michelin-guide { background: #A61C24; }
.odul-michelin-bib { background: #6C1420; }
.odul-gm-2025 { background: #B8860B; }
.odul-gm-2024 { background: #8C6A1E; }
.odul-la-liste { background: #1A1A1A; }
.odul-50best { background: #12305C; }
.odul-genel { background: var(--gri-acik); }

/* Restoran listeleme kartında yer dar; rozetler küçültülür ve tek satıra kadar taşar. */
.skart-govde .odul-seridi { margin: 0 0 8px; gap: 5px; }
.skart-govde .odul-rozet { padding: 4px 9px 4px 7px; font-size: 10.5px; gap: 4px; }
.skart-govde .odul-rozet .odul-ikon { width: 11px; height: 11px; }
.skart-govde .odul-rozet .odul-gorsel { height: 13px; max-width: 80px; }
.detay-aksiyonlar { display: flex; gap: 10px; flex-wrap: wrap; }
.detay-aksiyonlar .btn { padding: 12px 24px; font-size: 13.5px; }
.btn-altin { background: var(--lacivert); color: #fff; transition: background .15s ease, color .15s ease; }
.btn-altin:hover { background: #E4C27E; color: var(--lacivert); }
.btn-cerceve { border: 1px solid #dcdfe6; padding: 12px 16px; font-size: 13.5px; border-radius: 999px; }
.detay-gövde, .detay-govde {
    padding: 32px 56px 64px; display: grid; grid-template-columns: 2fr 1fr; gap: 48px;
}
.detay-bolum-baslik { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.detay-hakkinda { font-size: 14.5px; line-height: 1.75; color: var(--metin-soluk); margin: 0 0 30px; }
.detay-hakkinda > *:first-child { margin-top: 0; }
.detay-hakkinda > *:last-child { margin-bottom: 0; }
.detay-hakkinda p { margin: 0 0 14px; }
.detay-hakkinda h2, .detay-hakkinda h3, .detay-hakkinda h4 {
    font-size: 16px; font-weight: 700; color: var(--lacivert); margin: 24px 0 8px;
}
.detay-hakkinda ul, .detay-hakkinda ol { margin: 0 0 14px; padding-left: 20px; }
.detay-hakkinda li { margin-bottom: 5px; }
.detay-hakkinda a { color: var(--lacivert); text-decoration: underline; text-underline-offset: 2px; }
.detay-hakkinda strong { color: var(--metin); }
.detay-hakkinda blockquote {
    margin: 18px 0; padding: 2px 0 2px 16px; border-left: 3px solid #E4C27E; font-style: italic;
}
.detay-hakkinda img { max-width: 100%; height: auto; border-radius: 12px; margin: 6px 0 14px; }

/* Katlanabilir Hakkında: metnin tamamı DOM'da kalır, yalnızca yüksekliği kısılır */
.hakkinda-kontrol { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hakkinda-sarmal { position: relative; margin-bottom: 30px; }
.hakkinda-sarmal .detay-hakkinda {
    position: relative; max-height: 200px; overflow: hidden; margin-bottom: 10px;
}
/* Solma, kırpılan satırı tam örtsün diye metin kutusunun içine yerleşir */
.hakkinda-sarmal .detay-hakkinda::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 78%);
}
.hakkinda-dugme {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--lacivert);
}
.hakkinda-dugme::after { content: "⌄"; font-size: 15px; line-height: 1; transform: translateY(-2px); }
.hakkinda-dugme:hover { text-decoration: underline; text-underline-offset: 3px; }
.hakkinda-kapa-yazi { display: none; }
.hakkinda-kontrol:checked ~ .hakkinda-sarmal .detay-hakkinda { max-height: none; }
.hakkinda-kontrol:checked ~ .hakkinda-sarmal .detay-hakkinda::after { display: none; }
.hakkinda-kontrol:checked ~ .hakkinda-sarmal .hakkinda-ac-yazi { display: none; }
.hakkinda-kontrol:checked ~ .hakkinda-sarmal .hakkinda-kapa-yazi { display: inline; }
.hakkinda-kontrol:checked ~ .hakkinda-sarmal .hakkinda-dugme::after { content: "⌃"; transform: translateY(2px); }
.hakkinda-kontrol:focus-visible ~ .hakkinda-sarmal .hakkinda-dugme {
    outline: 2px solid var(--lacivert); outline-offset: 3px; border-radius: 4px;
}
.sss-baslik-satiri { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.sss-adet { font-size: 12.5px; color: var(--gri-acik); }
.sss-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sss-oge { background: #f8f9fb; border-radius: 12px; padding: 0; }
.sss-oge summary {
    list-style: none; cursor: pointer; padding: 14px 18px; font-size: 14px; font-weight: 600;
    display: flex; justify-content: space-between; gap: 12px;
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::after { content: "＋"; color: var(--gri-acik); }
.sss-oge[open] summary::after { content: "－"; }
.sss-oge p { font-size: 13.5px; line-height: 1.65; color: var(--metin-soluk); margin: 0; padding: 0 18px 14px; }
.sss-devam {
    border: 1px solid #dbe2f0; background: #f4f7fd; border-radius: 14px; padding: 18px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px;
}
.sss-devam-baslik { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.sss-devam-metin { font-size: 12.5px; color: var(--metin-soluk); }
.sss-devam .btn { flex: none; padding: 11px 22px; font-size: 13px; }
.hizli-bilgiler { background: #f8f9fb; border-radius: 16px; padding: 22px; margin-bottom: 20px; }
.hizli-bilgiler .baslik { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.hizli-bilgiler .satirlar { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--metin-orta); }
.hizli-bilgiler .satir-web a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hizli-bilgiler .satir-web a:hover { color: var(--lacivert); }
/* Hızlı Bilgiler ile aynı genişlikte küçük harita */
/* Konum kartı: Hızlı Bilgiler ile aynı kart dili */
.harita-karti { background: #f8f9fb; border-radius: 16px; padding: 22px; margin-bottom: 20px; }
.harita-karti .baslik { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.harita-cerceve {
    border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden;
    background: #fff; line-height: 0; position: relative;
}
.harita-cerceve iframe { display: block; width: 100%; height: 170px; border: 0; }
.harita-tiklama-katmani { position: absolute; inset: 0; }
.harita-yol {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 12px; padding: 10px 14px; background: #fff;
    border: 1px solid var(--cizgi); border-radius: 10px;
    font-size: 13px; font-weight: 600; color: var(--lacivert);
    transition: border-color .15s ease, background .15s ease;
}
.harita-yol:hover { border-color: var(--lacivert); background: var(--vurgu-zemin); }
/* Tablette yan panel tam genişliğe çıkıyor; 170px harita aşırı yayvan kalıyor. */
@media (min-width: 641px) and (max-width: 1024px) {
    .harita-cerceve iframe { height: 240px; }
}
.ilgili-yazi { border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; margin-bottom: 20px; display: block; }
.ilgili-yazi .gorsel { height: 140px; background: var(--vurgu-zemin); }
.ilgili-yazi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ilgili-yazi .govde { padding: 16px; }
@media (max-width: 1024px) {
    .detay-galeri { height: auto; grid-template-columns: 1fr; }
    .detay-galeri-ana { height: 280px; }
    .detay-galeri-yan { grid-template-rows: 120px 120px; }
    .detay-govde { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
    .kirinti, .detay-galeri, .detay-baslik-satiri, .detay-govde { padding-left: 20px; padding-right: 20px; }
}
/* 3 küçük görsel varsa (+N kutusu yoksa) sonuncusu iki kolonu doldursun */
.detay-galeri-yan .detay-galeri-kucuk:nth-child(3):last-child { grid-column: span 2; }
/* Grid satırının içerikle büyümesini engelle: hücreler 396px'e sabitlensin.
   Yalnızca iki kolonlu masaüstü düzeninde geçerli — tablette galeri tek kolona
   düşüyor ve tek satır tanımlı kalırsa ikinci satır 0px'e çöküyor. */
@media (min-width: 1025px) {
    .detay-galeri { grid-template-rows: 100%; }
}
.detay-galeri-ana, .detay-galeri-yan, .detay-galeri-kucuk { min-height: 0; }

/* ── V2-03.5B SSS Alt Sayfası ────────────────────────────── */
.sss-sayfa { padding: 24px 56px 64px; display: grid; grid-template-columns: 2fr 1fr; gap: 48px; }
.sss-sayfa-baslik { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; }
.sss-sayfa-meta { font-size: 13.5px; color: var(--metin-gri); margin-bottom: 28px; }
.sss-kategori-kicker {
    font-size: 12px; font-weight: 700; letter-spacing: .6px;
    color: var(--lacivert); margin-bottom: 12px; text-transform: uppercase;
}
.sss-grup { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
.sss-soru-blok { border-bottom: 1px solid var(--cizgi); padding-bottom: 18px; }
.sss-soru-blok h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.sss-soru-blok p { font-size: 14px; line-height: 1.7; color: var(--metin-soluk); margin: 0; }
.sss-alt-not { font-size: 13px; color: var(--metin-gri); padding-top: 14px; }
.sss-alt-not a { color: var(--lacivert); font-weight: 600; }
.sss-mini-kart { border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; margin-bottom: 20px; }
.sss-mini-kart .gorsel { height: 150px; background: var(--vurgu-zemin); }
.sss-mini-kart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sss-mini-kart .govde { padding: 16px; }
.sss-mini-kart .ad { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.sss-mini-kart .meta { font-size: 12.5px; color: var(--metin-gri); margin-bottom: 8px; }
.sss-mini-kart .puanlar { display: flex; gap: 10px; font-size: 11.5px; color: var(--metin-gri); margin-bottom: 12px; }
.sss-mini-kart .puanlar b { color: var(--metin); }
.sss-mini-kart .aksiyonlar { display: flex; gap: 8px; }
.sss-mini-kart .aksiyonlar a { flex: 1; border-radius: 999px; padding: 9px; text-align: center; font-size: 12.5px; font-weight: 600; transition: background .15s ease, color .15s ease; }
.sss-mini-kart .birincil { background: var(--lacivert); color: #fff; }
.sss-mini-kart .birincil:hover { background: #E4C27E; color: var(--lacivert); }
.sss-mini-kart .ikincil { border: 1px solid #dcdfe6; color: var(--metin-orta); }
.icindekiler { background: #f8f9fb; border-radius: 16px; padding: 20px; margin-bottom: 20px; }
.icindekiler .baslik { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.icindekiler nav { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--metin-soluk); }
.icindekiler a:hover { color: var(--lacivert); }
@media (max-width: 1024px) {
    .sss-sayfa { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
    .sss-sayfa { padding-left: 20px; padding-right: 20px; }
}

/* ── V2-05/06 Blog ───────────────────────────────────────── */
.blog-baslik-alani { padding: 44px 56px 0; }
.blog-baslik-alani h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 18px; }
.blog-kategoriler { display: flex; gap: 10px; margin-bottom: 30px; font-size: 13px; flex-wrap: wrap; }
.blog-kategoriler a { border: 1px solid #dcdfe6; border-radius: 999px; padding: 8px 18px; color: var(--metin-orta); }
.blog-kategoriler a.aktif { background: var(--lacivert); color: #fff; border-color: var(--lacivert); font-weight: 600; }
.one-cikan-yazi { margin: 0 56px 26px; position: relative; height: 340px; border-radius: 20px; overflow: hidden; display: block; }
.one-cikan-yazi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.one-cikan-golge { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,40,0), rgba(8,16,40,.65) 70%); }
.one-cikan-icerik { position: absolute; left: 36px; bottom: 32px; right: 36px; }
.one-cikan-icerik .rozet {
    display: inline-block; background: rgba(255,255,255,.92); color: var(--lacivert);
    border-radius: 999px; padding: 4px 14px; font-size: 11px; font-weight: 700;
    letter-spacing: .5px; margin-bottom: 12px; text-transform: uppercase;
}
.one-cikan-icerik .baslik { font-size: 28px; font-weight: 700; letter-spacing: -0.4px; color: #fff; margin-bottom: 6px; }
.one-cikan-icerik .meta { font-size: 13px; color: rgba(255,255,255,.8); }
.blog-grid { padding: 0 56px 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.yazi-baslik-alani { padding: 20px 56px 0; max-width: 860px; }
.yazi-baslik-alani h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2; margin-bottom: 12px; }
.yazi-meta { font-size: 13px; color: var(--metin-gri); margin-bottom: 26px; }
.yazi-kapak { margin: 0 56px; height: 380px; border-radius: 20px; overflow: hidden; background: var(--vurgu-zemin); }
.yazi-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yazi-govde { padding: 36px 56px 64px; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.yazi-icindekiler { font-size: 13px; color: var(--metin-gri); position: sticky; top: 24px; }
.yazi-icindekiler .baslik { font-weight: 700; color: var(--metin); margin-bottom: 10px; }
.yazi-icindekiler nav { display: flex; flex-direction: column; gap: 10px; }
.yazi-icindekiler a:hover { color: var(--lacivert); }
/* min-width:0 — grid hücresi varsayılan olarak içindeki min-content genişliğine
   (ör. yan yana duran sabit genişlikli restoran kartları) göre büyüyebiliyor ve
   sayfayı mobilde yatay kaydırılır hale getiriyordu; iç öğelerin kendi
   overflow-x:auto'su devreye girsin diye burada sıfırlanır. */
.yazi-icerik { max-width: 720px; min-width: 0; }
.yazi-icerik p { font-size: 15px; line-height: 1.8; color: var(--metin-soluk); margin: 0 0 18px; }
.yazi-icerik h2 { font-size: 20px; font-weight: 700; margin: 12px 0 12px; }
/* Editörden gelen ham <table>: sütun genişlikleri (colgroup min-width) korunur,
   dar ekranda taşma yerine yatay kaydırma olsun diye table kendisi scroll kapsayıcısı. */
.yazi-icerik table {
    display: block; overflow-x: auto; width: 100%; max-width: 100%;
    margin: 0 0 18px; border-collapse: collapse; font-size: 14px; line-height: 1.6;
}
.yazi-icerik th, .yazi-icerik td {
    padding: 10px 14px; border: 1px solid var(--cizgi); text-align: left; vertical-align: top;
}
.yazi-icerik th, .yazi-icerik tr:first-child td { background: var(--vurgu-zemin); font-weight: 700; }
.yazi-icerik td p, .yazi-icerik th p { margin: 0; }
/* Yasal metin sayfaları (Gizlilik Sözleşmesi vb.): blog yazısının okuma düzeni + uzun metin için liste/başlık stilleri */
html:has(.yasal-main) { scroll-behavior: smooth; }
.yasal-main .yazi-icindekiler { max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 6px; }
.yasal-icerik h2 { font-size: 21px; margin: 40px 0 14px; scroll-margin-top: 24px; }
.yasal-icerik h3 { font-size: 16.5px; font-weight: 700; margin: 28px 0 10px; color: var(--metin); }
.yasal-icerik h4 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; color: var(--metin); }
.yasal-icerik ul { margin: 0 0 18px; padding-left: 20px; }
.yasal-icerik li { font-size: 15px; line-height: 1.75; color: var(--metin-soluk); margin-bottom: 8px; }
.yasal-icerik li::marker { color: var(--gri-acik); }
.yasal-icerik ul.yasal-madde { list-style: none; padding-left: 16px; border-left: 2px solid var(--cizgi); }
.yasal-icerik ul.yasal-madde ul.yasal-madde { margin: 8px 0; }
.yasal-icerik ul.yasal-iki-sutun { columns: 2; column-gap: 36px; }
.yasal-icerik ul.yasal-iki-sutun li { break-inside: avoid; }
.yasal-icerik a { color: var(--lacivert); text-decoration: underline; text-underline-offset: 2px; }
.yasal-uyari { background: var(--vurgu-zemin); border-radius: 16px; padding: 22px 24px 6px; margin: 0 0 8px; }
.yasal-icerik .yasal-uyari p { font-size: 12.5px; line-height: 1.75; letter-spacing: .2px; color: var(--metin); }
@media (max-width: 640px) {
    .yasal-main .kirinti { display: none; }
    .yasal-main .yazi-baslik-alani { padding-top: 18px; }
    .yasal-icerik h2 { font-size: 17px; margin-top: 30px; }
    .yasal-icerik h3 { font-size: 15px; }
    .yasal-icerik h4 { font-size: 14px; }
    .yasal-icerik li { font-size: 13px; line-height: 1.7; }
    .yasal-icerik ul.yasal-iki-sutun { columns: 1; }
    .yasal-uyari { padding: 16px 16px 2px; border-radius: 12px; }
    .yasal-icerik .yasal-uyari p { font-size: 11.5px; }
}
.yazi-ara-gorsel { height: 280px; border-radius: 16px; overflow: hidden; margin: 0 0 18px; background: var(--vurgu-zemin); }
.yazi-ara-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yazi-restoranlar-baslik { font-size: 18px; font-weight: 700; margin: 12px 0 14px; }
/* Ana sayfadaki "Öne Çıkan Restoranlar" ile aynı .kart/.slider-ok bileşenlerini kullanır.
   Farkı: orada her zaman 4 eşit sütuna gerilir (genelde tam 4 restoran seçilir); burada
   makale dar olduğu için (720px) aynı 4 sütuna gerince 1-2 restoran gülünç küçük kalıyordu.
   Bunun yerine kartlar öne çıkanlarla aynı sabit genişlikte (260px) kalır, sığdığı kadarı
   yan yana durur, tek satırdan taşınca (ör. 3+ restoran) otomatik kaydırmalı şeride döner —
   sütun sayısına değil gerçek taşma durumuna göre; JS zaten oku sadece taştığında gösteriyor. */
.yazi-restoranlar { margin-bottom: 30px; }
.yazi-restoranlar .kart-grid-4 {
    display: flex; overflow-x: auto; gap: 24px; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 36px; margin: -36px;
}
.yazi-restoranlar .kart-grid-4::-webkit-scrollbar { display: none; }
.yazi-restoranlar .kart-grid-4 > .kart { flex: 0 0 260px; }
.yazi-paylas {
    display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--metin-gri);
    border-top: 1px solid var(--cizgi); padding-top: 20px; flex-wrap: wrap;
}
.yazi-paylas a { border: 1px solid #dcdfe6; border-radius: 999px; padding: 6px 14px; }
.siradaki-yazi {
    margin-top: 24px; background: #f4f7fd; border: 1px solid #dbe2f0; border-radius: 16px;
    padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.siradaki-yazi .baslik { font-size: 16px; font-weight: 700; line-height: 1.35; }
.siradaki-yazi .meta { font-size: 12.5px; color: var(--metin-gri); margin-top: 3px; }
.siradaki-yazi .btn { flex: none; padding: 11px 22px; font-size: 13px; }
.diger-yazilar { padding: 0 56px 56px; }
.diger-yazilar .ust-cizgi { border-top: 1px solid var(--cizgi); padding-top: 36px; }
.diger-yazilar .baslik-satiri { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.diger-yazilar h2 { font-size: 22px; font-weight: 700; }
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .yazi-govde { grid-template-columns: 1fr; gap: 24px; }
    .yazi-icindekiler { position: static; }
}
@media (max-width: 640px) {
    .blog-baslik-alani, .diger-yazilar { padding-left: 20px; padding-right: 20px; }
    .blog-grid { padding: 0 20px 40px; grid-template-columns: 1fr; }
    .one-cikan-yazi { margin: 0 20px 14px; }
    .yazi-kapak { margin: 0 20px; }
    .yazi-baslik-alani, .yazi-govde { padding-left: 20px; padding-right: 20px; }
    /* 36px bleed masaüstünde .yazi-icerik'in (max-width:720px) içinde kalıyor;
       mobilde tam genişlik olunca aynı değer sayfa kenarını taşırıp yatay
       kaydırmaya yol açıyordu — mobil kenar boşluğuyla (20px) eşitlenir. */
    .yazi-restoranlar .kart-grid-4 { padding: 20px; margin: -20px; }
}

/* ── V2-07 İletişim ──────────────────────────────────────── */
.iletisim-baslik-alani { padding: 44px 56px 8px; }
.iletisim-baslik-alani h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; }
.iletisim-baslik-alani p { font-size: 14px; color: var(--metin-gri); }
.iletisim-govde { padding: 24px 56px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.konu-baslik { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.konu-pilleri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font-size: 13px; }
.konu-pilleri input { position: absolute; opacity: 0; pointer-events: none; }
.konu-pilleri label {
    border: 1px solid #dcdfe6; border-radius: 999px; padding: 9px 18px;
    color: var(--metin-orta); cursor: pointer;
}
.konu-pilleri input:checked + label {
    background: var(--lacivert); color: #fff; border-color: var(--lacivert); font-weight: 600;
}
.iletisim-form { display: flex; flex-direction: column; gap: 12px; }
.iletisim-form input[type="text"], .iletisim-form input[type="email"], .iletisim-form textarea {
    background: #f8f9fb; border: 1.5px solid transparent; border-radius: 12px;
    padding: 13px 16px; font: inherit; font-size: 13.5px; color: var(--metin);
    width: 100%; outline: none;
}
.iletisim-form input::placeholder, .iletisim-form textarea::placeholder { color: var(--gri-acik); }
.iletisim-form textarea { min-height: 110px; resize: vertical; }
.iletisim-form input[hidden] { display: none; }
.restoran-secim { margin: -14px 0 22px; display: flex; flex-direction: column; gap: 6px; }
/* display:flex, tarayıcının [hidden] kuralını ezdiği için açıkça gizlenir. */
.restoran-secim[hidden] { display: none; }
.restoran-secim label { font-size: 13px; font-weight: 700; }
.restoran-secim select {
    border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px 14px;
    font: inherit; font-size: 14px; background: #fff; color: var(--metin);
}
.iletisim-form .alan-hatali { background: #fdf3f1; border-color: #d9603f; }
.alan-hata-mesaji { font-size: 12px; color: #b04a2f; margin-top: -6px; }
.kvkk-satiri { font-size: 12px; color: var(--metin-gri); display: flex; gap: 8px; align-items: center; }
.iletisim-form button {
    background: var(--lacivert); color: #fff; border: 0; border-radius: 999px;
    padding: 14px; text-align: center; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.iletisim-form button:hover:not(:disabled) { background: #E4C27E; color: var(--lacivert); }
.iletisim-form button:disabled { opacity: .7; cursor: wait; }
.durum-karti { border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.durum-karti .etiket { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.durum-karti .metin { font-size: 13.5px; color: var(--metin-orta); }
.durum-basarili { background: #f0f8f2; }
.durum-basarili .etiket { color: #0a7a3d; }
.durum-hata { background: #fdf3f1; }
.durum-hata .etiket { color: #b04a2f; }
.durum-bekliyor { background: #f8f9fb; }
.durum-bekliyor .etiket { color: var(--metin-gri); }
.iletisim-yan-not { background: #f8f9fb; border-radius: 14px; padding: 18px 20px; font-size: 13.5px; color: var(--metin-orta); line-height: 1.6; }
@media (max-width: 1024px) {
    .iletisim-govde { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .iletisim-baslik-alani, .iletisim-govde { padding-left: 20px; padding-right: 20px; }
}

/* ── V2-M Mobil ince ayarları ────────────────────────────── */
/* Hamburger + tam ekran menü (CSS-only) */
.mobil-menu-kontrol { display: none; }
.mobil-menu-dugme {
    display: none; width: 38px; height: 38px; border-radius: 50%; background: #f3f4f7;
    align-items: center; justify-content: center; font-size: 16px; cursor: pointer; flex: none;
}
.mobil-menu {
    /* Yatay iç boşluk header ile birebir (tablet 56px, 640 altında 20px) */
    display: none; position: fixed; inset: 0; z-index: 100; background: #fff;
    flex-direction: column; padding: 0 56px 26px; overflow-y: auto;
}
@media (max-width: 640px) {
    .mobil-menu { padding-left: 20px; padding-right: 20px; }
}
.mobil-menu-kontrol:checked ~ .mobil-menu { display: flex; }
.mobil-menu-ust {
    /* Header ile aynı iç boşluklar: menü açılınca logo yerinden oynamasın */
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; border-bottom: 1px solid var(--cizgi); margin-bottom: 26px;
}
.mobil-menu .mobil-menu-dugme { display: flex; }
.mobil-menu-linkler { display: flex; flex-direction: column; gap: 20px; }
.mobil-menu-linkler a { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.mobil-menu-linkler a:first-child { color: var(--lacivert); }
.mobil-menu-semtler { border-top: 1px solid var(--cizgi); padding-top: 18px; margin-top: 22px; }
.mobil-menu-semtler .kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--gri-acik); margin-bottom: 10px;
}
.mobil-menu-semtler .piller { display: flex; flex-wrap: wrap; gap: 8px; }
.mobil-menu-semtler .piller a {
    border: 1px solid #dcdfe6; border-radius: 999px; padding: 7px 14px;
    font-size: 12px; color: var(--metin-orta);
}
.mobil-menu-sosyal { border-top: 1px solid var(--cizgi); padding-top: 18px; margin-top: 22px; }
.mobil-menu-sosyal .kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--gri-acik); margin-bottom: 10px;
}
.mobil-menu-sosyal .piller { display: flex; flex-wrap: wrap; gap: 8px; }
.mobil-menu-sosyal .piller a {
    display: flex; align-items: center; gap: 7px;
    border: 1px solid #dcdfe6; border-radius: 999px; padding: 7px 14px;
    font-size: 12px; color: var(--metin-orta);
}
.mobil-menu-sosyal .piller .sosyal-ikon { width: 14px; height: 14px; }
.mobil-menu-alt { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mobil-menu-alt .btn { text-align: center; padding: 13px; font-size: 13px; }
.mobil-menu-alt .alt-linkler {
    display: flex; gap: 16px; justify-content: center; font-size: 11px; color: var(--gri-acik);
}

@media (max-width: 1024px) {
    .mobil-menu-dugme { display: flex; }
    .site-header .header-sag { display: none; }
}

@media (max-width: 640px) {
    /* Ana sayfa hero: içerik altta, sola dayalı, kompakt (V2-M) */
    .hero { height: 300px; }
    .hero-icerik {
        justify-content: flex-end; text-align: left;
        padding: 22px 20px; gap: 14px;
        margin-bottom: 10px;
    }
    .hero-icerik h1 { font-size: 22px; letter-spacing: -0.5px; text-align: left; text-shadow: none; }
    .hero-icerik > p { display: none; }
    .hero-arama { width: 100%; max-width: 100%; padding: 6px 6px 6px 18px; }
    .hero-arama input { font-size: 13px; }
    .hero-arama .btn-dolu { padding: 10px 18px; font-size: 12.5px; }
    .hero-etiketler {
        flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
        max-width: 100%; padding-bottom: 4px; scrollbar-width: none;
    }
    .hero-etiketler::-webkit-scrollbar { display: none; }
    .hero-etiketler a { flex: none; background: rgba(255,255,255,.2); }

    /* Öne çıkanlar: yatay kaydırma şeridi. Üstte/altta da az miktarda boşluk
       bırakılır ki hover/aktif durumundaki gölge kırpılmasın (bkz. 641px+ kural). */
    .kart-grid-4 {
        display: flex; overflow-x: auto; gap: 12px; scrollbar-width: none;
        margin: -8px -20px -16px 0; padding: 8px 20px 16px 0;
    }
    .kart-grid-4::-webkit-scrollbar { display: none; }
    .kart-grid-4 .kart { flex: none; width: 170px; }
    .kart-grid-4 .kart-gorsel { height: 100px; }
    .kart-grid-4 .kart-govde { padding: 10px; }
    .kart-grid-4 .kart-ad { font-size: 13px; }
    .kart-grid-4 .kart-meta { font-size: 11px; }

    /* Listeleme: filtreler ızgara, sonuç satırı ayrı */
    .filtre-satiri { display: grid; grid-template-columns: 1fr 1fr; }
    .filtre { width: 100%; }
    .filtre-temizle { text-align: center; }
    .sonuc-bilgisi { grid-column: 1 / -1; font-size: 11.5px; }

    /* Restoran detay: mini galeri şeridi + sabit alt aksiyon barı (V2-M) */
    .detay-galeri { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
    .detay-galeri-ana { height: 230px; }
    /* 3'ten fazla küçük görsel + "daha" kutusu 4 öğe yapıp ikinci satıra taşabilir;
       grid-auto-rows olmadan o satır metin yüksekliğine sıkışıp resim/yazı görünmez oluyordu. */
    .detay-galeri-yan { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 70px; }
    .detay-galeri-yan .detay-galeri-kucuk { border-radius: 10px; }
    .detay-galeri-yan .detay-galeri-kucuk:nth-child(3):last-child { grid-column: auto; }
    .detay-galeri-daha { border-radius: 10px; font-size: 12px; }
    .detay-ad { font-size: 21px; }
    .detay-puanlar .puan-hap { padding: 5px 11px; font-size: 11px; }
    .detay-aksiyonlar {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #fff;
        box-shadow: 0 -4px 20px rgba(10,20,50,.08); padding: 12px 16px; margin: 0;
        flex-wrap: nowrap;
    }
    .detay-aksiyonlar .btn { flex: 1; text-align: center; padding: 11px; font-size: 13px; }
    .detay-aksiyonlar .btn-cerceve { flex: none; }
    .detay-govde { padding-bottom: 110px; }

    /* Blog: kategori pill'leri yatay kaydırma, öne çıkan kompakt */
    .blog-kategoriler {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-right: -20px; padding-right: 20px; padding-bottom: 4px;
    }
    .blog-kategoriler::-webkit-scrollbar { display: none; }
    .blog-kategoriler a { flex: none; }
    .one-cikan-yazi { height: 260px; }
    .one-cikan-icerik { left: 20px; bottom: 20px; right: 20px; }
    .one-cikan-icerik .baslik { font-size: 21px; }
    .yazi-baslik-alani h1 { font-size: 26px; }
    .yazi-kapak { height: 230px; }

    /* SSS sayfası başlık */
    .sss-sayfa-baslik { font-size: 24px; }
}

/* Puan hapları: masaüstünde tam yıldız/nokta dizisi, mobilde tek sembol (V2-M) */
.puan-tek { display: none; }
@media (max-width: 640px) {
    .puan-dizi { display: none; }
    .puan-tek { display: inline; letter-spacing: 0; }
}

/* Detay gövdesi: grid alanları — mobilde Hızlı Bilgiler, Hakkında'nın hemen altına gelir */
.detay-govde {
    grid-template-areas:
        "hakkinda yan"
        "devam yan";
    row-gap: 0;
}
.alan-hakkinda { grid-area: hakkinda; }
.alan-devam { grid-area: devam; }
.alan-yan { grid-area: yan; }
/* Masaüstü: sağ sütun (Hızlı Bilgiler + Konum + aksiyonlar) kaydırırken görünür kalır;
   sol içerik bittiğinde yan sütunun sonuna dayanıp içerikle birlikte aşağı kayar. */
@media (min-width: 1025px) {
    .yan-yapiskan { position: sticky; top: 24px; }
    .yan-yapiskan .detay-aksiyonlar { margin-bottom: 20px; }
    .yan-yapiskan .detay-aksiyonlar { flex-wrap: nowrap; }
    .yan-yapiskan .detay-aksiyonlar .btn { flex: 1; text-align: center; white-space: nowrap; padding: 12px 12px; }
}
@media (max-width: 1024px) {
    .detay-govde {
        grid-template-areas:
            "hakkinda"
            "yan"
            "devam";
        row-gap: 0;
    }
    .alan-yan { margin-bottom: 32px; }
}

/* SSS "N soru daha var" kutusu mobilde dikey istif + tam genişlik buton */
@media (max-width: 640px) {
    .sss-devam { flex-direction: column; align-items: stretch; gap: 14px; }
    .sss-devam .btn { text-align: center; }
}

/* Konuma göre görünürlük: İlgili Yazı masaüstünde kenar çubuğunda, mobilde Benzer'in üstünde */
.yalniz-mobil { display: none; }
@media (max-width: 1024px) {
    .yalniz-mobil { display: block; margin-bottom: 30px; }
    .yalniz-masaustu { display: none; }
}

/* ── V2-M Blog detay mobil (exp-m-blogdetail) ────────────── */
.geri-dugme { display: none; }
.yazi-kicker { display: none; }
.tumunu-gor .metin-kisa { display: none; }
@media (max-width: 640px) {
    /* Sıra: kapak → başlık → gövde → diğer yazılar; breadcrumb yok */
    .yazi-detay-main { display: flex; flex-direction: column; }
    .yazi-detay-main .kirinti { display: none; }
    .yazi-kapak { order: 1; margin: 0; height: 220px; border-radius: 0; position: relative; }
    .yazi-baslik-alani { order: 2; padding: 18px 20px 0; }
    .yazi-govde { order: 3; padding-top: 0; }
    .diger-yazilar { order: 4; }
    .geri-dugme {
        display: flex; position: absolute; top: 14px; left: 14px; width: 36px; height: 36px;
        border-radius: 50%; background: rgba(255,255,255,.92); align-items: center;
        justify-content: center; font-size: 15px; color: var(--metin);
    }
    .yazi-kicker { display: block; font-size: 10.5px; margin-bottom: 6px; }
    .yazi-baslik-alani h1 { font-size: 20px; letter-spacing: -0.4px; line-height: 1.25; margin-bottom: 6px; }
    .yazi-meta { font-size: 11.5px; margin-bottom: 16px; }
    .meta-kategori { display: none; }
    .yazi-icindekiler { display: none; }
    .yazi-icerik p { font-size: 13px; line-height: 1.7; margin-bottom: 16px; }
    .yazi-icerik h2 { font-size: 16px; }
    .yazi-icerik table { font-size: 12.5px; }
    .yazi-icerik th, .yazi-icerik td { padding: 8px 10px; }
    .yazi-ara-gorsel { height: 200px; }
    .yazi-restoranlar-baslik { font-size: 14px; margin-bottom: 10px; }
    .yazi-restoranlar { margin-bottom: 16px; }
    .paylas-facebook { display: none; }
    /* Sıradaki yazı: dikey, tam genişlik buton */
    .siradaki-yazi { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
    .siradaki-yazi .meta { display: none; }
    .siradaki-yazi .baslik { font-size: 14px; }
    .siradaki-yazi .btn { text-align: center; padding: 9px; font-size: 12px; }
    /* Diğer yazılar: yatay satır listesi + kısa "Tümü →" */
    .diger-yazilar h2 { font-size: 14px; }
    .diger-yazilar .kart-grid-3 { display: flex; flex-direction: column; gap: 10px; }
    .diger-yazilar .kart { display: flex; gap: 12px; align-items: center; border: 0; border-radius: 0; }
    .diger-yazilar .kart-gorsel, .diger-yazilar .kart-gorsel-alcak {
        width: 92px; height: 66px; flex: none; border-radius: 10px; overflow: hidden;
    }
    .diger-yazilar .kart-govde { padding: 0; }
    .diger-yazilar .kart-kicker { font-size: 10px; margin-bottom: 3px; }
    .diger-yazilar .kart-ad-blog { font-size: 12.5px; line-height: 1.35; }
    .tumunu-gor .metin-uzun { display: none; }
    .tumunu-gor .metin-kisa { display: inline; font-size: 11px; }
}

/* ── V2-M Blog listeleme mobil (exp-m-blog) ──────────────── */
.metin-kisa { display: none; }
@media (max-width: 640px) {
    .metin-uzun { display: none; }
    .metin-kisa { display: inline; }

    .blog-baslik-alani { padding: 20px 20px 0; }
    .blog-baslik-alani h1 { font-size: 22px; margin-bottom: 12px; }
    .blog-kategoriler { gap: 6px; margin-bottom: 16px; }
    .blog-kategoriler a { padding: 6px 14px; font-size: 11.5px; }

    .one-cikan-yazi { height: 190px; border-radius: 16px; }
    .one-cikan-icerik { left: 16px; bottom: 14px; right: 16px; }
    .one-cikan-icerik .rozet { display: none; }
    .one-cikan-icerik .baslik { font-size: 16px; line-height: 1.3; margin-bottom: 0; }
    .one-cikan-icerik .meta { font-size: 11px; margin-top: 3px; }

    /* Yazı listesi: 110×80 thumbnail'li yatay satırlar */
    .blog-grid { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 14px; }
    .blog-grid .kart { display: flex; gap: 12px; align-items: center; border: 0; border-radius: 0; }
    .blog-grid .kart-gorsel, .blog-grid .kart-gorsel-alcak {
        width: 110px; height: 80px; flex: none; border-radius: 12px; overflow: hidden;
    }
    .blog-grid .kart-govde { padding: 0; }
    .blog-grid .kart-kicker { font-size: 10.5px; margin-bottom: 4px; }
    .blog-grid .kart-ad-blog { font-size: 13.5px; line-height: 1.4; }
}

/* ── V2-M Ana sayfa hero etiket şeridi (exp-m-home) ──────── */
.hero-etiket-seridi { display: none; }
@media (max-width: 640px) {
    /* Etiketler hero içinden çıkar, altta beyaz zeminde şerit olur */
    .hero-icerik .hero-etiketler { display: none; }
    .hero-etiket-seridi {
        display: flex; gap: 8px; padding: 18px 20px 8px;
        overflow-x: auto; scrollbar-width: none;
    }
    .hero-etiket-seridi::-webkit-scrollbar { display: none; }
    .hero-etiket-seridi a {
        flex: none; border: 1px solid #dcdfe6; border-radius: 999px;
        padding: 6px 14px; font-size: 12px; color: var(--metin-orta);
    }
    .hero-etiket-seridi a:first-child {
        background: var(--vurgu-zemin); color: var(--lacivert);
        border-color: var(--vurgu-zemin); font-weight: 600;
    }
}

/* ── V2-M Restoran detay mobil (exp-m-detail) + mobil footer ─ */
.detay-galeri-ana { position: relative; }
@media (max-width: 640px) {
    .detay-main .kirinti { display: none; }
    .detay-galeri { padding-top: 0; }
    .detay-bolum-baslik { font-size: 15px; }
    .detay-hakkinda { font-size: 13px; line-height: 1.65; margin-bottom: 16px; }
    .hakkinda-sarmal { margin-bottom: 16px; }
    .hakkinda-sarmal .detay-hakkinda { max-height: 150px; margin-bottom: 8px; }
    .hakkinda-sarmal .detay-hakkinda::after { height: 70px; }
    .hizli-bilgiler { padding: 16px 18px; }
    .hizli-bilgiler .baslik { font-size: 15px; margin-bottom: 8px; }
    .hizli-bilgiler .satirlar { font-size: 12.5px; gap: 6px; }

    /* Mobil footer: tablet düzeni korunur, yalnızca boşluklar daralır */
    .site-footer { gap: 16px; padding: 28px 20px; }
    .footer-nav { gap: 10px 18px; font-size: 12px; padding-top: 16px; }
    .footer-sosyal { gap: 10px; }
}
@media (max-width: 640px) {
    /* Sabit aksiyon barı footer linklerini örtmesin */
    .detay-main ~ .site-footer { padding-bottom: 96px; }
}

/* ── Restoran galerisi: mobil tam genişlik kapak + lightbox ─ */
@media (max-width: 640px) {
    .detay-galeri { padding-left: 0; padding-right: 0; gap: 8px; }
    .detay-galeri-ana { border-radius: 0; }
    .detay-galeri-yan { margin: 0 20px; }
}
.detay-galeri-ana, .detay-galeri-kucuk, .detay-galeri-daha { cursor: pointer; }
.lightbox {
    position: fixed; inset: 0; z-index: 200; background: rgba(8,16,40,.94);
    display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img {
    max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 12px;
}
.lightbox button {
    position: absolute; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.92); border: 0; font: inherit; font-size: 16px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox-kapat { top: 16px; right: 16px; }
.lightbox-geri { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-ileri { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-sayac {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.85); font-size: 12.5px;
}

/* Hızlı Bilgiler: masaüstünde özellikler en sonda; mobilde kutusuz kompakt (exp-m-detail) */
.hizli-bilgiler .satirlar .satir-ozellikler { order: 9; }
@media (max-width: 640px) {
    .hizli-bilgiler { background: none; padding: 0; border-radius: 0; margin-bottom: 24px; }
    .harita-karti { background: none; padding: 0; border-radius: 0; margin-bottom: 24px; }
    .harita-karti .baslik { margin-bottom: 8px; }
    .harita-cerceve iframe { height: 150px; }
    .hizli-bilgiler .baslik { margin-bottom: 6px; }
    .hizli-bilgiler .satirlar { display: block; line-height: 2; }
    .hizli-bilgiler .satirlar .satir-saat,
    .hizli-bilgiler .satirlar .satir-ozellikler { display: inline; }
    .hizli-bilgiler .satirlar .satir-saat + .satir-ozellikler::before { content: " · "; }
    .hizli-bilgiler .satirlar .satir-telefon,
    .hizli-bilgiler .satirlar .satir-web { display: none; }
}

/* ── Çoklu seçim filtre dropdown'ları ────────────────────── */
.coklu-filtre { position: relative; }
.coklu-filtre summary {
    list-style: none; cursor: pointer; user-select: none;
    border: 1px solid #dcdfe6; background: #fff; border-radius: 999px;
    padding: 7px 16px; font-size: 12.5px; color: var(--metin-orta); white-space: nowrap;
}
.coklu-filtre summary::-webkit-details-marker { display: none; }
/* Açılır panelsiz, tek tıkla açılıp kapanan filtre (Reztoran Card) */
.tekli-filtre {
    display: inline-flex; align-items: center; cursor: pointer; user-select: none;
    border: 1px solid #dcdfe6; background: #fff; border-radius: 999px;
    padding: 7px 16px; font-size: 12.5px; color: var(--metin-orta); white-space: nowrap;
}
.tekli-filtre input { position: absolute; opacity: 0; pointer-events: none; }
.tekli-filtre:has(input:focus-visible) { outline: 2px solid var(--lacivert); outline-offset: 2px; }
.tekli-filtre.hizmet.filtre-aktif { background: var(--vurgu-zemin); border-color: var(--vurgu-zemin); color: var(--lacivert); font-weight: 600; }
.tekli-filtre.filtre-aktif:not(.hizmet) { background: #001A4D; border-color: #001A4D; color: #E4C27E; font-weight: 700; }
.coklu-filtre summary .ok { color: var(--gri-acik); }
.coklu-filtre.filtre-aktif summary {
    background: var(--vurgu-zemin); border-color: var(--vurgu-zemin);
    color: var(--lacivert); font-weight: 600;
}
.coklu-filtre.filtre-aktif summary .ok { color: var(--lacivert); }
.coklu-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
    min-width: 200px; max-height: 260px; overflow-y: auto;
    background: #fff; border: 1px solid var(--cizgi); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(10,20,50,.14); padding: 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.coklu-panel label {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 9px; font-size: 13px; color: var(--metin-orta); cursor: pointer;
}
.coklu-panel label:hover { background: #f6f7fa; }
.coklu-panel input[type="checkbox"] { accent-color: var(--lacivert); width: 15px; height: 15px; }
@media (max-width: 640px) {
    .coklu-filtre summary { width: 100%; text-align: left; }
    .coklu-panel { min-width: 100%; }
}

/* ── V2-04 Hakkımızda ────────────────────────────────────── */
.hakkimizda-hero { position: relative; min-height: 460px; overflow: hidden; display: flex; align-items: center; }
.hakkimizda-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hakkimizda-hero .golge {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,20,60,.86) 42%, rgba(0,20,60,.35) 100%);
}
.hakkimizda-hero-icerik { position: relative; padding: 56px; max-width: 840px; color: #fff; }
.hakkimizda-hero-icerik h1 {
    font-size: 42px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.14; color: #fff; margin: 0 0 20px;
}
.hakkimizda-hero-icerik .giris { font-size: 15.5px; line-height: 1.7; color: #e6eaf3; margin: 0 0 14px; max-width: 660px; }
.hakkimizda-hero-icerik .giris:last-of-type { margin-bottom: 30px; }
.bilgi-kartlari { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.bilgi-karti { background: #f8f9fb; border-radius: 16px; padding: 22px; }
.bilgi-karti .baslik { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.bilgi-karti .metin { font-size: 13.5px; color: var(--metin-soluk); line-height: 1.6; }
.hakkimizda-butonlar { display: flex; gap: 12px; flex-wrap: wrap; }
.hakkimizda-butonlar .btn { padding: 13px 28px; font-size: 14px; }
.btn-cerceveli { border: 1.5px solid var(--lacivert); color: var(--lacivert); }
@media (max-width: 1024px) {
    .hakkimizda-hero-icerik { max-width: 100%; }
}
@media (max-width: 640px) {
    .hakkimizda-hero { min-height: 0; display: block; }
    .hakkimizda-hero .golge { background: linear-gradient(180deg, rgba(0,20,60,.82), rgba(0,20,60,.92)); }
    .hakkimizda-hero-icerik { padding: 26px 20px 30px; }
    .hakkimizda-hero-icerik h1 { font-size: 26px; letter-spacing: -0.5px; line-height: 1.18; margin-bottom: 14px; }
    .hakkimizda-hero-icerik .giris { font-size: 12.5px; margin-bottom: 10px; }
    .hakkimizda-hero-icerik .giris:last-of-type { margin-bottom: 20px; }
    .bilgi-kartlari { grid-template-columns: 1fr; }
    .hakkimizda-butonlar { flex-direction: column; }
    .hakkimizda-butonlar .btn { text-align: center; }
}

/* ── V2-36 Hakkımızda / "İşletmem İçin" blokları ──────────── */
.bolum-kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--lacivert); margin-bottom: 8px; }

.istatistik-seridi {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    background: #f8f9fb; padding: 30px 56px 28px;
}
.istatistik-seridi .deger { font-size: 26px; font-weight: 700; color: var(--lacivert); letter-spacing: -0.5px; }
.istatistik-seridi .etiket { font-size: 13px; color: var(--metin-soluk); margin-top: 2px; }

.ozellik-grubu.gri { background: #f8f9fb; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.ozellik-grubu { padding-bottom: 52px; }
.ozellik-grubu-aciklama { font-size: 15px; line-height: 1.7; color: var(--metin-soluk); margin: 10px 0 30px; max-width: 720px; }
.ozellik-kartlari { grid-template-columns: repeat(var(--sutun, 3), 1fr); gap: 20px; }
.ozellik-karti { background: #f8f9fb; border-radius: 16px; padding: 26px; }
.ozellik-grubu.gri .ozellik-karti { background: #fff; border: 1px solid var(--cizgi); }
.ozellik-karti-ikon {
    width: 38px; height: 38px; border-radius: 10px; background: #fff; border: 1px solid var(--cizgi);
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.ozellik-grubu.gri .ozellik-karti-ikon { background: #f8f9fb; }
.ozellik-karti-baslik { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.ozellik-karti p { font-size: 13.5px; line-height: 1.65; color: var(--metin-soluk); margin: 0 0 14px; }
.ozellik-karti-maddeler { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ozellik-karti-maddeler li { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--metin-soluk); }
.ozellik-karti-maddeler li span:first-child { color: var(--lacivert); flex: none; }

.referanslar h2, .entegrasyonlar h2, .musteri-tanima h2, .ozellik-grubu h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; margin-bottom: 10px; }
.referanslar, .musteri-tanima { padding-bottom: 52px; }
.referans-kartlari { margin-top: 30px; gap: 20px; }
.referans-karti { border: 1px solid var(--cizgi); border-radius: 16px; padding: 26px; }
.referans-karti .deger { font-size: 40px; font-weight: 700; color: var(--lacivert); letter-spacing: -1px; line-height: 1; }
.referans-karti .etiket { font-size: 13px; color: var(--metin-gri); margin: 4px 0 16px; }
.referans-karti p { font-size: 14px; line-height: 1.65; color: var(--metin); margin: 0 0 14px; }
.referans-karti .kisi { font-size: 12.5px; color: var(--metin-gri); }

.entegrasyonlar { padding-bottom: 52px; background: #f8f9fb; border-top: 1px solid var(--cizgi); }
.entegrasyonlar-aciklama { font-size: 15px; line-height: 1.7; color: var(--metin-soluk); margin: 10px 0 24px; max-width: 760px; }
.entegrasyon-cipleri { display: flex; flex-wrap: wrap; gap: 10px; }
.entegrasyon-cipi {
    background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; padding: 11px 20px;
    display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--metin-orta);
}
.entegrasyon-cipi svg { flex: none; }

.musteri-tanima { background: #f8f9fb; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.musteri-tanima-aciklama { font-size: 15px; line-height: 1.7; color: var(--metin-soluk); margin: 10px 0 30px; max-width: 720px; }
.musteri-tanima-kutu {
    background: #fff; border: 1px solid var(--cizgi); border-radius: 16px; padding: 30px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start;
}
.musteri-tanima-kart-baslik { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.musteri-tanima-kutu p { font-size: 13.5px; line-height: 1.65; color: var(--metin-soluk); margin: 0; }
.musteri-tanima-vurgular { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.musteri-tanima-vurgu {
    background: #f8f9fb; border-radius: 10px; padding: 14px; display: flex; gap: 10px;
    font-size: 13px; line-height: 1.5; color: var(--metin-soluk);
}
.musteri-tanima-vurgu svg { flex: none; margin-top: 1px; }

.hakkinda-cta-bandi { background: var(--lacivert); color: #fff; padding: 60px 56px; text-align: center; }
.hakkinda-cta-bandi .cta-baslik { font-size: 34px; font-weight: 700; letter-spacing: -0.7px; margin-bottom: 14px; }
.hakkinda-cta-bandi .cta-aciklama { font-size: 15.5px; line-height: 1.7; color: #d7ddec; margin: 0 auto 28px; max-width: 640px; }
.hakkinda-cta-bandi .btn-altin { background: #fff; color: var(--lacivert); }
.hakkinda-cta-bandi .btn-altin:hover { background: #E4C27E; color: var(--lacivert); }
.hakkinda-cta-butonlar { display: flex; gap: 12px; justify-content: center; margin-bottom: 22px; }
.hakkinda-cta-butonlar .btn { padding: 13px 30px; font-size: 14px; }
.btn-cerceveli-beyaz {
    border: 1.5px solid rgba(255,255,255,.7); color: #fff;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-cerceveli-beyaz:hover { background: #E4C27E; border-color: #E4C27E; color: var(--lacivert); }
.hakkinda-cta-iletisim { font-size: 13.5px; color: #aebbdc; }

@media (max-width: 1024px) {
    .istatistik-seridi { grid-template-columns: repeat(2, 1fr); padding: 24px 20px; }
    .ozellik-kartlari { grid-template-columns: repeat(2, 1fr); }
    .musteri-tanima-kutu { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .istatistik-seridi { padding: 20px; gap: 16px; }
    .istatistik-seridi .deger { font-size: 20px; }
    .istatistik-seridi .etiket { font-size: 11.5px; }
    .ozellik-grubu, .entegrasyonlar, .referanslar, .musteri-tanima { padding-bottom: 32px; }
    .ozellik-grubu h2, .referanslar h2, .entegrasyonlar h2, .musteri-tanima h2 { font-size: 21px; }
    .ozellik-kartlari { grid-template-columns: 1fr; }
    .referans-kartlari.kart-grid-3 { grid-template-columns: 1fr; }
    .referans-karti .deger { font-size: 30px; }
    .musteri-tanima-vurgular { grid-template-columns: 1fr; }
    .hakkinda-cta-bandi { padding: 40px 20px; }
    .hakkinda-cta-bandi .cta-baslik { font-size: 22px; }
    .hakkinda-cta-butonlar { flex-direction: column; }
    .hakkinda-cta-butonlar .btn { text-align: center; }
}

/* ── Logo şeridi (SevenRooms tarzı sonsuz marquee) ───────── */
.logo-seridi { padding: 56px 0 0; }
.logo-seridi-baslik {
    text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--gri-acik); margin-bottom: 22px;
}
.serit-maske {
    display: flex; overflow: hidden; user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.serit-parca {
    display: flex; align-items: center; gap: 64px; padding-right: 64px;
    flex: none; animation: serit-kaydir 35s linear infinite;
}
.serit-maske:hover .serit-parca { animation-play-state: paused; }
/* Yükseklik logonun oranına göre JS ile (--logo-h, bkz. /js/logo-boyutlandir.js) verilir. */
.serit-parca img { height: var(--logo-h, 44px); width: auto; }
.serit-parca .wordmark {
    font-size: 21px; font-weight: 700; letter-spacing: -0.3px;
    color: var(--metin-gri); white-space: nowrap; opacity: .8;
}
/* translateX(-100%) her karede o anki kutu genişliğine göre yeniden hesaplanır;
   logolar (görsel) asenkron yüklenip kutunun gerçek genişliği animasyon
   başladıktan SONRA değişince iki kopya senkrondan çıkıyor ve bir süre sonra
   şeritte boşluk/beyaz alan belirmesine yol açıyordu. JS, görseller yüklendikten
   sonra gerçek genişliği ölçüp sabit bir piksel değeri yazıyor; --serit-kaydir
   boşsa eski davranış (-100%) korunur. */
@keyframes serit-kaydir {
    to { transform: translateX(var(--serit-kaydir, -100%)); }
}
@media (prefers-reduced-motion: reduce) {
    .serit-parca { animation: none; }
    .serit-maske { overflow-x: auto; }
}
@media (max-width: 640px) {
    .logo-seridi { padding-top: 40px; }
    .serit-parca { gap: 40px; padding-right: 40px; animation-duration: 25s; }
    .serit-parca .wordmark { font-size: 17px; }
}

/* ── Reztoran Card sayfası (Tasarım: "Reztoran Card (standalone).html") ──────
   Tasarım tam genişlik ve daha büyük tipografiyle çizilmişti; burada sitenin
   .sayfa kutusu (1440px), 56px yan boşluk ve başlık ölçeği (h1 42 / h2 30) esas alındı. */
.rkart { --altin: #E4C27E; --gece: #001A4D; }
.rkart-bolum { padding: 64px 56px; }
.rkart-gri { background: #f8f9fb; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.rkart-lacivert { background: var(--lacivert); color: #fff; }
.rkart-gece { background: var(--gece); color: #fff; }
.rkart-kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--lacivert); margin-bottom: 10px; }
.rkart-kicker.altin { color: var(--altin); }
.rkart-h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.18; margin-bottom: 18px; text-wrap: balance; }
.rkart-h2.kucuk { font-size: 26px; margin-bottom: 0; }
.rkart-h2.bosluklu { margin-bottom: 32px; }
.rkart-h2.dar { max-width: 640px; }
.rkart-metin p { font-size: 15px; line-height: 1.75; color: var(--metin-soluk); margin-bottom: 12px; max-width: 560px; text-wrap: pretty; }
.rkart-metin p:last-child { margin-bottom: 0; }
.rkart-metin.genis p { max-width: 720px; }
.rkart-lacivert .rkart-metin p, .rkart-gece .rkart-metin p { color: #d7ddec; }

.rkart .btn { padding: 13px 26px; font-size: 14px; }
.rkart-btn-lacivert { white-space: nowrap; flex: none; }

.rkart-baslik-satiri { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 28px; }
.rkart-iki-kolon { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.rkart-iki-kolon > .rkart-metin { flex: 1 1 420px; min-width: 0; }

/* Kart görsellerinin yuvarlatılmış köşesi (kartın oranına göre) */
.rkart img.silver, .rkart img.gold, .rkart img.black,
.rkart-merdiven img, .rkart-seviye > img, .rkart-ozellik img.kart, .rkart-ilerleme-kartlar img { border-radius: 4.5% / 7%; }

/* 01 Hero */
.rkart-hero { position: relative; overflow: hidden; background: var(--gece); color: #fff; }
.rkart-hero-zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rkart-hero-golge {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, rgba(0,20,60,.94) 30%, rgba(0,26,77,.78) 60%, rgba(0,26,77,.55));
}
.rkart-hero-ic { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding: 72px 56px; }
.rkart-hero-metin { flex: 1 1 420px; min-width: 0; }
.rkart-hero-metin .rkart-kicker { letter-spacing: 2px; margin-bottom: 18px; }
.rkart-hero h1 { font-size: 42px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.12; margin-bottom: 18px; text-wrap: balance; }
.rkart-hero p { font-size: 15.5px; line-height: 1.7; color: #d7ddec; margin-bottom: 28px; max-width: 520px; text-wrap: pretty; }
.rkart-hero-kartlar { flex: 1 1 360px; position: relative; max-width: 480px; aspect-ratio: 1.2 / 1; margin: 0 auto; }
.rkart-hero-kartlar img, .rkart-cta-kartlar img { position: absolute; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.rkart-hero-kartlar img { width: 70%; }
.rkart-hero-kartlar .black { left: 2%; top: 2%; transform: rotate(-9deg); }
.rkart-hero-kartlar .gold { left: 15%; top: 20%; transform: rotate(-2deg); }
.rkart-hero-kartlar .silver { left: 28%; top: 38%; transform: rotate(5deg); }

/* 02 Üye restoranlar şeridi (kaydırma: .serit-maske / .serit-parca) */
.rkart-uyeler { padding-bottom: 48px; }
.rkart-logo-seridi { border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); padding: 16px 0; margin: 0 -56px; }
.rkart-logo-seridi .serit-parca { gap: 34px; padding-right: 34px; animation-duration: 42s; }
.rkart-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.rkart-logo-kutu { width: 170px; height: 56px; display: flex; align-items: center; justify-content: center; }
/* Yükseklik logonun oranına göre JS ile (--logo-h) verilir; kare ve yatay logolar aynı ağırlıkta görünsün. */
.rkart-logo-kutu img { max-width: 100%; max-height: 100%; width: auto; height: var(--logo-h, 44px); object-fit: contain; }
.rkart-logo-kutu .wordmark { font-size: 18px; font-weight: 700; color: var(--metin-gri); white-space: nowrap; }

/* 03 Reztoran Card nedir — kademeli üç kart */
.rkart-merdiven { flex: 1 1 400px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; padding-top: 44px; }
.rkart-merdiven-oge { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rkart-merdiven-oge img { width: 100%; box-shadow: 0 14px 30px rgba(10,20,50,.18); }
.rkart-merdiven-oge span { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--metin-gri); }
.rkart-merdiven-oge.gold { transform: translateY(-22px); }
.rkart-merdiven-oge.gold span { color: #a77a2c; }
.rkart-merdiven-oge.black { transform: translateY(-44px); }
.rkart-merdiven-oge.black span { color: var(--metin); }

/* 04 Nasıl katılırım */
.rkart-lacivert .rkart-h2 { color: #fff; }
.rkart-liste-baslik { font-size: 14px; font-weight: 600; margin: 20px 0 12px; }
.rkart-tik-liste { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rkart-tik-liste li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #e6eaf3; }
.rkart-tik-liste li span {
    width: 26px; height: 26px; border-radius: 50%; flex: none; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(228,194,126,.18); color: var(--altin);
}
.rkart .rkart-metin p.rkart-liste-alt { margin-top: 14px; font-size: 14.5px; }
.rkart-lacivert hr { border: 0; height: 1px; background: rgba(255,255,255,.15); margin: 26px 0; }
.rkart-indirme-baslik { font-size: 19px; font-weight: 600; line-height: 1.4; margin-bottom: 18px; max-width: 500px; }
.rkart-indirme { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rkart-telefon { flex: 0 1 290px; min-width: 0; margin: 0 auto; }
.rkart-telefon-cerceve {
    width: 100%; max-width: 270px; aspect-ratio: .516 / 1; border-radius: 40px; padding: 11px;
    background: #0b1530; box-shadow: 0 30px 70px rgba(0,0,0,.4); margin: 0 auto;
}
.rkart-telefon-ekran {
    width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #fff;
    display: flex; align-items: center; justify-content: center;
}
/* Ekran görüntüsü kenarlara sıfır kırpılı; köşe yuvarlaması içeriği kesmesin diye
   uygulamanın zemin rengiyle çevresine boşluk bırakılır. */
.rkart-telefon-ekran:has(img) { background: #012f87; padding: 7% 5%; }
.rkart-telefon-ekran img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.rkart-telefon-ekran span { font-size: 13px; font-weight: 600; color: var(--gri-acik); }

/* 05 Üyelik seviyeleri */
.rkart-seviyeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.rkart-seviye {
    border-radius: 20px; padding: 24px; display: flex; flex-direction: column;
    background: linear-gradient(#eef0f3, #f8f9fb); border: 1px solid #e3e6eb;
}
/* Hover: kart hafifçe yükselir, gölge kartın kendi renginden (gümüş / altın / siyah) */
.rkart-seviye { transition: transform .25s ease, box-shadow .25s ease; }
.rkart-seviye:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -12px rgba(110,120,138,.45); }
.rkart-seviye.gold:hover { box-shadow: 0 22px 44px -12px rgba(193,148,67,.55); }
.rkart-seviye.black:hover { box-shadow: 0 24px 48px -12px rgba(16,19,25,.6); }
.rkart-seviye > img { width: 100%; box-shadow: 0 14px 30px rgba(10,20,50,.15); margin-bottom: 24px; }
.rkart-seviye-ad { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--metin-gri); margin-bottom: 8px; }
.rkart-seviye h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 10px; }
.rkart-seviye p { font-size: 14px; line-height: 1.7; color: var(--metin-soluk); margin-bottom: 18px; }
.rkart-seviye-vurgu { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; color: var(--metin-gri); margin-bottom: 10px; }
.rkart-seviye ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rkart-seviye li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--metin-orta); }
.rkart-seviye li span { color: #8a929e; }
.rkart-seviye.gold { background: linear-gradient(#f7ecd6, #fcf7ee); border-color: #ecdcb8; }
.rkart-seviye.gold > img { box-shadow: 0 14px 30px rgba(120,80,20,.2); }
.rkart-seviye.gold .rkart-seviye-ad, .rkart-seviye.gold .rkart-seviye-vurgu { color: #9a6f22; }
.rkart-seviye.gold p { color: #4b4433; }
.rkart-seviye.gold li { color: #3a3426; }
.rkart-seviye.gold li span { color: #c19443; }
.rkart-seviye.black { background: linear-gradient(#1b1f27, #101319); border-color: #232833; color: #fff; }
.rkart-seviye.black > img { box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.rkart-seviye.black .rkart-seviye-ad, .rkart-seviye.black .rkart-seviye-vurgu, .rkart-seviye.black li span { color: var(--altin); }
.rkart-seviye.black p { color: #c4c9d3; }
.rkart-seviye.black li { color: #e6e8ec; }

/* 06 Nasıl çalışır */
.rkart-adimlar { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; padding-top: 24px; }
.rkart-adimlar li { border-top: 2px solid var(--lacivert); padding-top: 22px; }
.rkart-adim-no {
    width: 48px; height: 48px; border-radius: 50%; margin: -47px 0 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lacivert); color: var(--altin); font-size: 16px; font-weight: 700;
}
.rkart-adimlar h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.rkart-adimlar p { font-size: 14px; line-height: 1.65; color: var(--metin-soluk); }
.rkart-adimlar li.son { border-top-color: var(--altin); }
.rkart-adimlar li.son .rkart-adim-no { background: var(--altin); color: var(--lacivert); }

/* 07 Tek üyelik */
.rkart-uc-kart { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 36px; }
.rkart-ozellik { border: 1px solid var(--cizgi); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; }
.rkart-ozellik-gorsel { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.rkart-ozellik-gorsel img.kart { height: 100px; width: auto; box-shadow: 0 10px 24px rgba(10,20,50,.15); }
.rkart-ozellik-gorsel.kolaj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rkart-ozellik-gorsel.kolaj img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.rkart-ozellik-gorsel img.logo { height: 32px; width: auto; }
.rkart-ozellik-no { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--lacivert); margin-bottom: 6px; }
.rkart-ozellik h3 { font-size: 18px; font-weight: 700; }
.rkart-ozellik.lacivert { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.rkart-ozellik.lacivert .rkart-ozellik-no { color: var(--altin); }

/* 08 Seviye ilerlemesi */
.rkart-gece .rkart-h2 { color: #fff; }
.rkart-ilerleme-ust { display: flex; flex-wrap: wrap; gap: 20px 64px; margin-bottom: 44px; }
.rkart-ilerleme-ust > div { flex: 1 1 360px; }
.rkart-ilerleme { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 40px; }
.rkart-ilerleme-kartlar, .rkart-ilerleme-etiketler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.rkart-ilerleme-kartlar { margin-bottom: 28px; }
.rkart-ilerleme-kartlar > div { display: flex; justify-content: flex-start; }
.rkart-ilerleme-kartlar > .gold { justify-content: center; }
.rkart-ilerleme-kartlar > .black { justify-content: flex-end; }
.rkart-ilerleme-kartlar img { width: 100%; max-width: 210px; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.rkart-ilerleme-kartlar > .black img { outline: 1px solid rgba(255,255,255,.12); }
.rkart-ilerleme-cubuk { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); margin: 0 9px; }
.rkart-ilerleme-cubuk .dolu {
    position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 999px;
    background: linear-gradient(90deg, #c9cdd4, var(--altin) 55%, #f1dcae);
}
.rkart-ilerleme-cubuk .nokta {
    position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
    border: 3px solid var(--gece);
}
.rkart-ilerleme-cubuk .nokta.silver { left: 0; margin-left: -9px; background: #c9cdd4; }
.rkart-ilerleme-cubuk .nokta.gold { left: 50%; margin-left: -11px; background: var(--altin); }
.rkart-ilerleme-cubuk .nokta.black { right: 0; margin-right: -9px; background: #2a2f3a; border-color: var(--altin); }
.rkart-ilerleme-etiketler { margin-top: 22px; gap: 12px; }
.rkart-ilerleme-etiketler b { display: block; font-size: 13px; letter-spacing: 2px; color: #e6e8ec; }
.rkart-ilerleme-etiketler span { display: block; font-size: 13px; color: #aebbdc; margin-top: 4px; }
.rkart-ilerleme-etiketler .gold { text-align: center; }
.rkart-ilerleme-etiketler .gold b { color: var(--altin); }
.rkart-ilerleme-etiketler .black { text-align: right; }
.rkart-ilerleme-etiketler .black b { color: #fff; }

/* 09 Card restoranları */
.rkart-restoranlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.rkart-restoran { border-radius: 16px; overflow: hidden; border: 1px solid var(--cizgi); background: #fff; transition: transform .18s ease, box-shadow .18s ease; }
.rkart-restoran:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(8,16,40,.10); }
.rkart-restoran-gorsel { position: relative; height: 180px; background: #f1f3f6; }
.rkart-restoran-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rkart-restoran-govde { padding: 16px; }
.rkart-restoran-govde .ad { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.rkart-restoran-govde .meta { font-size: 12.5px; color: var(--metin-gri); }

/* 10 Kapanış CTA */
.rkart-cta-dis { padding-top: 0; }
.rkart-cta {
    position: relative; overflow: hidden; border-radius: 28px; color: #fff;
    background: linear-gradient(135deg, var(--lacivert), var(--gece));
    display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding: 56px;
}
.rkart-cta-metin { flex: 1 1 420px; min-width: 0; }
.rkart-cta h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.12; margin-bottom: 16px; }
.rkart-cta p { font-size: 15px; line-height: 1.75; color: #d7ddec; margin-bottom: 28px; max-width: 540px; }
.rkart-cta-butonlar { display: flex; flex-wrap: wrap; gap: 12px; }
.rkart-cta-kartlar { flex: 0 1 340px; position: relative; aspect-ratio: 1.35 / 1; margin: 0 auto; }
.rkart-cta-kartlar img { width: 74%; box-shadow: 0 20px 44px rgba(0,0,0,.45); }
.rkart-cta-kartlar .black { left: 0; top: 4%; transform: rotate(-10deg); }
.rkart-cta-kartlar .gold { left: 13%; top: 20%; transform: rotate(-3deg); }
.rkart-cta-kartlar .silver { left: 26%; top: 36%; transform: rotate(4deg); }

/* Sağ altta sabit "Nasıl Katılırım?" butonu */
.rkart-yuzen-buton {
    position: fixed; right: 24px; bottom: 24px; z-index: 50;
    display: flex; align-items: center; gap: 10px; border-radius: 999px; padding: 8px 20px 8px 8px;
    background: var(--lacivert); color: #fff; font-size: 14px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,26,77,.35), 0 0 0 1px rgba(228,194,126,.35);
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.rkart-yuzen-buton:hover { transform: translateY(-2px); background: #E4C27E; color: var(--lacivert); }
.rkart-yuzen-buton .ikon {
    width: 34px; height: 34px; border-radius: 50%; flex: none; color: var(--lacivert);
    background: #E4C27E; display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.rkart-yuzen-buton:hover .ikon { background: var(--lacivert); color: #E4C27E; }
html:has(.rkart) { scroll-behavior: smooth; }
/* Sabit buton sayfanın en altında footer linklerinin üstüne binmesin */
.rkart ~ .site-footer { padding-bottom: 88px; }

@media (max-width: 1024px) {
    .rkart-seviye { padding: 20px; }
    .rkart-telefon-cerceve { max-width: 220px; border-radius: 34px; }
    .rkart-telefon-ekran { border-radius: 25px; }
    .rkart-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
    .rkart-restoranlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rkart-hero-kartlar { max-width: 420px; }
}
/* Tablet: üç kartlı bölümler 2+1 dizilsin — iki kart yan yana, üçüncüsü altta yarım genişlikte */
@media (min-width: 641px) and (max-width: 1024px) {
    .rkart-seviyeler, .rkart-uc-kart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .rkart-bolum { padding: 44px 20px; }
    .rkart-hero-ic { padding: 44px 20px; gap: 32px; }
    .rkart-hero h1 { font-size: 30px; letter-spacing: -0.6px; }
    .rkart-h2 { font-size: 24px; }
    .rkart-h2.kucuk { font-size: 22px; }
    .rkart-iki-kolon { gap: 36px; }
    .rkart-logo-seridi { margin: 0 -20px; }
    .rkart-logo-kutu { width: 130px; }
    .rkart-merdiven { gap: 10px; padding-top: 32px; }
    .rkart-adimlar, .rkart-restoranlar { grid-template-columns: 1fr; }
    .rkart-ilerleme { padding: 24px 18px; }
    .rkart-ilerleme-kartlar { gap: 12px; }
    .rkart-ilerleme-ust { margin-bottom: 28px; }
    .rkart-cta { padding: 32px 22px; border-radius: 22px; }
    .rkart-cta h2 { font-size: 26px; }
    .rkart-cta-dis { padding-top: 0; }
    .rkart-yuzen-buton { right: 16px; bottom: 16px; }
}