/* =========================================================
   Locanda — split-screen layout (Gusto referansına sadık)
   Sol: full-bleed hero slideshow + quote overlay
   Sağ: koyu dikey sidebar panel (kartlar, saatler, menü)

   NOT: Google Fonts artık burada @import EDİLMİYOR — CSS içindeki
   @import render-blocking'dir (tarayıcı, CSS'i indirip @import'u
   görene kadar font isteğini başlatmaz, sonra onu bekler). Font
   linki her sayfanın <head>'inde <link rel="preconnect"> + <link
   rel="stylesheet"> olarak, CSS dosyasıyla PARALEL yükleniyor.
   ========================================================= */

:root {
    --panel:    #0A0906;
    --panel-2:  #151310;
    --card:     #171410;
    --shell:    #F6F1E7;
    --clay:     #B5472B;
    --gold:     #D9A98A;
    --stone:    #8A8071;
    --line:     rgba(246,241,231,.12);

    --display: 'Sorts Mill Goudy', serif;
    --body: 'Figtree', sans-serif;

    /* Gusto'nun tüm sayfayı saran 12px'lik panel bandı.
       Header bu bandın sol üst köşesine OTURUR (üstünde yüzmez). */
    --frame: 12px;
    /* Yarıçap ölçeği: kart 12, kontrol/görsel 8. Dosyada 3/6/10/12 karışık
       kullanılıyordu; tek ölçeğe indirildi. */
    --r-card: 12px;
    --r-control: 8px;
    --notch: 18px;      /* header ve "beri" rozetindeki içbükey köşe yarıçapı */
    --media-top: 12px;  /* görselin üst kenarı — mobilde header şeridi kadar iniyor */
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--panel);
    color: var(--shell);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 3px;
}

/* =========================================================
   Sayfa iskeleti — split screen
   ========================================================= */
.split {
    display: grid;
    /* --side-w her sayfada .split üzerinde inline set ediliyor (config.php) */
    grid-template-columns: minmax(0, 1fr) var(--side-w, 424px);
    height: 100vh;
    position: relative;
}

/* Sayfanın SAĞ köşeleri.
   Sol köşeleri görselin kendi border-radius'u yuvarlıyor; sağda ise
   sidebar kartları duruyor. Kartların kendi 12px yarıçapı üstteki köşeyi
   zaten yuvarlıyor; bu parçalar köşede kart olmayan durumları (kaydırma,
   diğer sayfalar) da kapsıyor. Yöntem header ve rozetteki ile aynı. */
.split::before,
.split::after {
    content: '';
    position: absolute;
    right: var(--frame);
    width: var(--frame);
    height: var(--frame);
    z-index: 6;
    pointer-events: none;
}
.split::before {
    top: var(--frame);
    background: radial-gradient(
        circle var(--frame) at 0 100%,
        transparent calc(var(--frame) - 1px),
        var(--panel) var(--frame)
    );
}
.split::after {
    bottom: var(--frame);
    background: radial-gradient(
        circle var(--frame) at 0 0,
        transparent calc(var(--frame) - 1px),
        var(--panel) var(--frame)
    );
}

/* ---------- SOL: sahne (hero / görsel) ---------- */
.stage {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: var(--panel);
    /* sol / üst / alt kenarda 12px'lik bant; sağda sidebar zaten ayırıyor */
    padding: var(--frame) 0 var(--frame) var(--frame);
}

.stage-media {
    position: absolute;
    inset: var(--media-top) 0 var(--frame) var(--frame);
    z-index: 1;
    overflow: hidden;
    /* Dört köşe de yuvarlak. Sağ kenar sidebar'a dayandığı için sağdaki
       yuvarlaklıklar panel rengini ortaya çıkarıyor — sidebar da aynı
       renk olduğu için köşe kesintisiz görünüyor. */
    border-radius: 12px;
}

.stage-slides { position: absolute; inset: 0; }

.stage-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.stage-slide.is-active { opacity: 1; }

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

.stage-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
}

/* =========================================================
   ÜST BAR
   Gusto'daki mantık: header ayrı bir "kapsül" değil — çerçevenin
   sol üst köşesini kaplayan, sadece sağ alt köşesi yuvarlatılmış
   bir uzantı. Görselin üstüne yapıştırılmış gibi durmamasının
   sebebi bu. Ölçüler orijinalden alındı:
   padding 4/16/12, gruplar arası 16px, link arası 20px, radius 20px.
   ========================================================= */
.stage-topbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 22px;
    width: max-content;
    max-width: calc(100% - var(--frame));
    background: var(--panel);
    /* üstte 11px: logonun tepesi ekran kenarına yapışmasın diye.
       altta 13px: barın görselin içine doğru "aktığı" his korunsun.
       Gusto'da 4/16/12; bizde iki satırlı logo yüzünden biraz daha geniş. */
    padding: 11px 18px 13px;
    border-radius: 0 0 20px 0;
}

/* Gusto'nun "Rounded Edge" parçaları: barın görselle buluştuğu iki noktada
   18px'lik İÇBÜKEY köşe. Bar dışarı doğru yuvarlanıyor (20px), görsel ise
   içeri doğru — ikisi tek bir kesilmiş yüzey gibi birleşiyor.
   ::before → barın hemen sol altı   ::after → barın hemen sağ üstü */
.stage-topbar::before,
.stage-topbar::after {
    content: '';
    position: absolute;
    width: var(--notch);
    height: var(--notch);
    background: radial-gradient(
        circle var(--notch) at 100% 100%,
        transparent calc(var(--notch) - 1px),
        var(--panel) var(--notch)
    );
    pointer-events: none;
}
/* 1px'lik bindirme: kutu, yapıştığı elemana doğru 1px büyütülüyor ki
   ondalık genişliklerde araya saç teli kalınlığında bir çizgi girmesin.
   Gradyanın merkezi köşede sabit kaldığı için eğri kaymıyor. */
.stage-topbar::before {
    left: var(--frame);
    top: calc(100% - 1px);
    height: calc(var(--notch) + 1px);
}
.stage-topbar::after {
    top: var(--media-top);
    left: calc(100% - 1px);
    width: calc(var(--notch) + 1px);
}

/* ---------- Logo ---------- */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 0;
    /* Nefes payı: logo dosyası tam kırpılmış olduğu için mürekkep kutunun
       kenarına değiyor. Boşluğu dosyaya geri koymak yerine burada veriyoruz —
       böylece hem miktarı tek yerden ayarlanabiliyor hem de logo yüksekliği
       ölçülebilir bir sayı olarak kalıyor.
       Dikeyde 2px + 2px, yatayda 3px + 3px. Bu pay, aşağıdaki img
       yüksekliğinden DÜŞÜLDÜ (32 → 28), yani bar'ın toplam yüksekliği
       değişmiyor: 11 + (2+28+2) + 13 = 56px. */
    padding: 2px 3px;
}
.logo-word {
    font-family: var(--display);
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .005em;
    color: var(--shell);
    white-space: nowrap;
}
.logo img {
    display: block;
    /* logo.png artık şeffaf kenar payı OLMADAN, tam kırpılmış kaydediliyor
       (645×160 = mürekkebin kendi oranı). Bu yüzden buradaki yükseklik
       doğrudan görünen logo yüksekliği demek — v75'teki optik boyutun
       (34px kutu içinde ~32px mürekkep) birebir karşılığı 32px.
       Kenar payı olan bir dosya gelirse burayı büyütmek yerine dosyayı
       yeniden kırpın; aksi halde header şişer.
       .logo'daki 2px'lik dikey nefes payı buradan düşüldü: 32 - 4 = 28. */
    height: 28px;
    width: auto;
}


/* ---------- Navigasyon ---------- */
.stage-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Gusto'nun imza detayı: link 17px yüksekliğinde kırpılır, etiket iki kez
   basılır, hover'da yukarı kayarak ikinci kopya girer. */
.stage-nav a {
    display: block;
    height: 17px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    color: var(--shell);
}
.stage-nav .roll {
    display: block;
    transition: transform .34s cubic-bezier(.4, 0, .1, 1);
}
.stage-nav .roll span {
    display: block;
    height: 17px;
    line-height: 17px;
    white-space: nowrap;
}
.stage-nav a:hover .roll,
.stage-nav a:focus-visible .roll { transform: translateY(-17px); }
.stage-nav a.is-current { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
    .stage-nav .roll { transition: none; }
}

/* Buton etiketi menü açılınca "Menü" → "Kapat" olarak yukarı kayıyor.
   Bu kırpma MEDIA QUERY DIŞINDA duruyor: içeride olsaydı kural herhangi
   bir sebeple uygulanmadığında iki etiket birden görünüp "Menü Kapat"
   gibi okunurdu. Kırpma her koşulda geçerli olmalı. */
.nav-toggle-roll {
    display: block;
    height: 17px;
    overflow: hidden;
}
.nav-toggle-roll .roll {
    display: block;
    transition: transform .3s cubic-bezier(.4, 0, .1, 1);
}
.nav-toggle-roll .roll span {
    display: block;
    height: 17px;
    line-height: 17px;
}
body.nav-open .nav-toggle-roll .roll { transform: translateY(-17px); }

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-roll .roll { transition: none; }
}

/* ---------- Mobil menü butonu ----------
   Sade hâli sadece overlay içindeki "Kapat" için; sahnedeki "Menü"
   mobil kırılımında görselden oyulmuş bir bloğa dönüşüyor (aşağıda). */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 2px;
    font-size: 15px;
    line-height: 1;
    color: var(--shell);
    font-family: var(--body);
}

/* Slideshow ok butonları */
/* Oklar Gusto'daki yerinde: solda ve sağda, görselin dikey ortasında.
   Kartla çakışmayı okları oynatarak değil, kartı sağa alarak çözüyoruz
   (bkz. .stage-quote). Ok kutusu 30px ve kenardan 12px içeride —
   soldaki ok görselin 12–54px'lik şeridinde kalıyor, kart da hemen
   onun sağında başlıyor. Sol boşluk bu üçlüyle mümkün olduğunca dar
   tutuluyor: 12 kenar + 12 boşluk + 30 ok + 16 boşluk. */
.stage-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    pointer-events: none;
}
.stage-arrow {
    pointer-events: all;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.08);
    color: var(--shell);
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.stage-arrow:hover { background: rgba(255,255,255,.18); }

/* Dot'lar (alt orta) */
.stage-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}
.stage-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    border: none;
    background: rgba(246,241,231,.35);
    cursor: pointer;
    padding: 0;
}
.stage-dot.is-active { background: var(--shell); }

/* "1981'den beri" rozeti (sağ alt) — header'ın aynadaki hâli:
   çerçevenin sağ alt köşesine oturur, sol üst köşesi dışa yuvarlak,
   görselle buluştuğu iki noktada içbükey köşe. */
/* "1981'den beri" rozeti — .stage-media'nın İÇİNDE, resmin sağ alt
   köşesine oturur (Gusto'daki "© Since 1997" gibi). Sol üst köşesi
   resme doğru dışbükey yuvarlanır; ::before / ::after ise rozetin üst
   ve sol kenarının resimle buluştuğu yerde içbükey (concave) köşe
   dolgusu yapar. Medya konteynerinin çocuğu olduğu için hem masaüstü
   hem mobilde her zaman resmin köşesine yapışır. */
.stage-since {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    background: var(--panel);
    padding: 12px 20px 14px;
    border-radius: 20px 0 0 0;
    font-size: 13px;
    line-height: 1;
    color: rgba(246, 241, 231, .68);
    white-space: nowrap;
}
.stage-since::before,
.stage-since::after {
    content: '';
    position: absolute;
    width: var(--notch);
    height: var(--notch);
    background: radial-gradient(
        circle var(--notch) at 0 0,
        transparent calc(var(--notch) - 1px),
        var(--panel) var(--notch)
    );
    pointer-events: none;
}
/* İçbükey köşe, rozetin dışa yuvarlanan sol üst köşesine DEĞİL, rozetin
   resimle birleştiği iki kenara konur:
   ::before → rozetin üst kenarı   ::after → rozetin sol kenarı */
.stage-since::before {
    right: 0;
    bottom: calc(100% - 1px);
    height: calc(var(--notch) + 1px);
}
.stage-since::after {
    bottom: 0;
    right: calc(100% - 1px);
    width: calc(var(--notch) + 1px);
}

/* Quote kartı (sol alt) */
/* Alıntı kartı: köşeye yapıştırılmış bir blok DEĞİL — görselin içinde
   yüzen, dört köşesi de yuvarlak bağımsız bir kart. Gusto'da 440px
   genişlik, 48px iç boşluk, kenarlardan 40px açık. */
.stage-quote {
    position: absolute;
    /* Gusto'da 40px; bizde 58px — aradaki fark soldaki slider okunun
       şeridi. Kart okun bittiği yerden 16px sonra başlıyor: çakışma
       hiçbir ekran boyunda mümkün değil, sol boşluk da gereğinden
       fazla açılmıyor. */
    left: calc(var(--frame) + 58px);
    bottom: calc(var(--frame) + 40px);
    z-index: 3;
    width: min(440px, calc(100% - var(--frame) - 98px));
    max-height: calc(100% - var(--frame) - 40px - 90px);
    overflow-y: auto;
    background: rgba(23, 20, 16, 0.9); /* --card (#171410) rengiyle aynı, %10 saydam */
    border-radius: 12px;
    padding: 44px;
}
/* Birden fazla yorum varsa (index sayfası): sadece aktif olan
   gösteriliyor, display:none/block ile — mutlak konumlu üst üste
   bindirme (fade) kullanmadık çünkü yorumlar çok farklı uzunlukta
   (Ceyhun Ö.'nün yorumu diğerlerinin ~4 katı); üst üste binseydi kart
   ya taşardı ya da en uzuna göre sabitlenip kısa yorumlarda boşluk
   bırakırdı. display değişimi kart boyunu her zaman aktif içeriğe
   göre doğru hesaplatıyor. */
.stage-review { display: none; }
.stage-review.is-active { display: block; }
.stage-quote h2 {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: 48px;
    line-height: 1.1;
    margin: 0;
    color: var(--shell);
}
.stage-quote p {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(246,241,231,.65);
    max-width: 42ch;
}
.quote-meta {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Yorumların kaynağını gösteren rozet. Gri daire yerine Google işareti:
   yorumlar gerçekten Google'dan alındı, rozet bunu söylüyor.
   Krem disk sidebar'daki "Masa Ayırt" butonuyla aynı yüzey. */
.quote-source {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--shell);
}
.quote-source svg { width: 15px; height: 15px; display: block; }
.quote-rating {
    font-family: var(--display);
    font-style: italic;
    font-size: 17px;
    color: var(--shell);
}
.quote-stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.quote-count { font-size: 12px; color: var(--stone); }

/* ---------- SAĞ: sidebar panel ---------- */
/* Panelin yatay iç boşluğu çerçeveyle aynı: 12px. Görselle kartlar
   arasındaki ayrımı bu bant yapıyor, ayrı bir çizgiye gerek yok —
   Gusto da öyle. Böylece kartlar panel genişliğinin tamamını kullanıyor. */
.side {
    height: 100vh;
    background: var(--panel);
    padding: var(--frame) var(--side-pad, var(--frame));
    display: flex;
    flex-direction: column;
    gap: var(--frame);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Panel dikey flex; içerik taştığında (ki hep taşıyor) tarayıcı flex
   elemanlarını ezerek sığdırmaya çalışıyordu. Yüksekliğini aspect-ratio'dan
   alan bloklar — harita, Hakkımızda'daki fotoğraf — bu yüzden 0-2px'e
   iniyor, yani hiç görünmüyordu. */
.side > * { flex-shrink: 0; }

/* =========================================================
   Sidebar kartları (Mekanımız / Menü)
   Gusto'da etiket, görselin ÜSTÜNDE ayrı bir şerit değil — görselin
   sol üst köşesinden oyulmuş bir blok. Sayfa header'ıyla birebir aynı
   dil: bloğun görsele bakan köşesi dışa yuvarlak, kartın kenarlarıyla
   birleştiği iki noktada içbükey. Bizde şerit vardı, oyuk yoktu.
   Orijinal ölçüler: iç boşluk 8/16/12, yarıçap 18, oyuk 18.
   ========================================================= */
.side-card {
    position: relative;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--r-card);
    background: var(--card);
    aspect-ratio: 16 / 8.5;
}

/* Görsel kartın tamamını kaplıyor ve %2 büyük duruyor: bulanıklaşınca
   kenarlardan boşluk sızmasın diye (orijinalde de böyle). */
.side-card-media {
    position: absolute;
    inset: -1%;
    display: block;
}
.side-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .45s ease;
}
.side-card:hover .side-card-media img,
.side-card:focus-visible .side-card-media img { filter: blur(8px); }

.side-card-tab {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background: var(--panel);
    border-bottom-right-radius: 18px;
    padding: 8px 16px 12px;
    font-size: 13.5px;
    color: var(--shell);
}
.side-card-tab::before,
.side-card-tab::after {
    content: '';
    position: absolute;
    width: var(--notch);
    height: var(--notch);
    background: radial-gradient(
        circle var(--notch) at 100% 100%,
        transparent calc(var(--notch) - 1px),
        var(--panel) var(--notch)
    );
    pointer-events: none;
}
/* altta kartın sol kenarıyla, sağda kartın üst kenarıyla birleşim */
.side-card-tab::before {
    left: 0;
    top: calc(100% - 1px);
    height: calc(var(--notch) + 1px);
}
.side-card-tab::after {
    top: 0;
    left: calc(100% - 1px);
    width: calc(var(--notch) + 1px);
}

/* Ok hover'da yer açarak giriyor; kapalıyken genişliği 0 ve negatif
   margin ile gap'i de yutuyor, böylece blok gereksiz yere geniş durmuyor. */
.side-card-arrow {
    display: inline-block;
    width: 0;
    margin-left: -8px;
    opacity: 0;
    overflow: hidden;
    font-weight: 300;
    transition: width .28s cubic-bezier(.4, 0, .1, 1),
                margin-left .28s cubic-bezier(.4, 0, .1, 1),
                opacity .2s ease;
}
.side-card:hover .side-card-arrow,
.side-card:focus-visible .side-card-arrow {
    width: 14px;
    margin-left: 0;
    opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
    .side-card-media img,
    .side-card-arrow { transition: none; }
}

.side-block {
    padding-top: 4px;
}

/* Gusto'da çalışma saatleri ve alt menü, panelin üstünde yüzen içerik
   değil — kendi iç boşluğu olan kartlar. Bizde satırlar panelin iki
   kenarına yayılıyordu, özellikle geniş panelde çok uzuyordu. */
.side-panel {
    background: var(--card);
    border-radius: var(--r-card);
    padding: 22px 24px 18px;
}
.side-heading {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 0 0 12px;
}

/* 404'teki "Menüden birkaç lezzet" bloğu: başlığın hemen ardından
   .menu-item geliyor, kendi üst padding'i (16px) görsel olarak
   .side-heading'in margin-bottom'una (12px) çok yakın kalıp sıkışık
   duruyordu — menü sayfasındaki .menu-category (kategori başlığı +
   ayırıcı çizgi) ile aynı ferahlığı vermiyordu. Genel .side-heading'e
   dokunmadan (çalışma saatleri, adres gibi başka yerlerde de kullanılıyor),
   sadece 404.php'deki bu bloğa eklenen .menu-teaser sınıfı üzerinden
   boşluk veriyoruz.
   ÜÇ YANLIŞ DENEME, sonunda doğrusu:
   (1) .menu-item'a margin-top verdik — komşu marginler collapse olur,
       .side-heading'in margin-bottom:12px'i büyük olduğu için eklenen
       margin hiç görünmedi.
   (2) .menu-item'a padding-top verdik — işe yaramadı çünkü ölçtüğümüz
       boşluk kutunun DIŞ sınırına göre; padding sadece içeriği kutunun
       içinde öteliyor, üst kenarı olduğu yerde bırakıyor.
   (3) .side-heading'e padding-bottom:1px ekleyip collapse'ı kırmaya
       çalıştık — bu da yetmedi, çünkü o padding elemanın kendi içeriğiyle
       margin'i arasındaki collapse'ı keser, komşu elemanın margin'iyle
       aradaki collapse'ı DEĞİL.
   DOĞRUSU: margin'i tamamen devre dışı bırakıp .side-heading'e (sadece
   bu bağlamda) margin-bottom yerine padding-bottom vermek — padding
   hiçbir zaman collapse olmaz, kesin ve öngörülebilir. */
.menu-teaser > .side-heading {
    margin-bottom: 0;
    padding-bottom: 20px;
}

.hours-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    font-size: 13.5px;
}
.hours-row .day { font-weight: 600; color: var(--shell); white-space: nowrap; }
.hours-row .fill {
    flex: 1;
    border-bottom: 1px dotted rgba(246,241,231,.25);
    transform: translateY(-4px);
}
.hours-row .time { color: rgba(246,241,231,.65); white-space: nowrap; }

/* ---------- Sosyal butonlar ----------
   Gusto'da etiket solda, ikon sağda; hover'da ikon yukarı kayıp yerini
   dış bağlantı okuna bırakıyor (18px'lik kırpılmış kutu, üst üste iki
   ikon). Header linklerindeki roll-up'ın aynısı. */
.side-social {
    display: flex;
    gap: 12px;
}
.side-social a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    font-size: 13.5px;
    color: var(--shell);
    transition: border-color .2s ease, background .2s ease;
}
.side-social a:hover { border-color: rgba(246,241,231,.3); background: var(--card); }

.icon-roll {
    display: block;
    flex: none;
    width: 18px;
    height: 18px;
    overflow: hidden;
}
.icon-roll svg {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform .3s cubic-bezier(.4, 0, .1, 1);
}
.side-social a:hover .icon-roll svg,
.side-social a:focus-visible .icon-roll svg { transform: translateY(-18px); }

.side-spacer { flex: 1; }

.side-menu {
    text-align: center;
    background: var(--card);
    border-radius: var(--r-card);
    padding: 24px;
}
.side-menu .side-heading { text-align: center; font-family: var(--display); font-style: italic; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--shell); margin-bottom: 14px; }
.side-menu ul li { margin-bottom: 10px; }

/* Header'daki roll-up burada da var: etiket iki kez basılı, 17px'lik
   kutuda kırpılıyor, hover'da yukarı kayıyor. */
.side-menu ul a {
    display: block;
    height: 17px;
    overflow: hidden;
    font-size: 13.5px;
    color: rgba(246, 241, 231, .6);
    transition: color .2s ease;
}
.side-menu ul a .roll {
    display: block;
    transition: transform .32s cubic-bezier(.4, 0, .1, 1);
}
.side-menu ul a .roll span {
    display: block;
    height: 17px;
    line-height: 17px;
}
.side-menu ul a:hover,
.side-menu ul a:focus-visible { color: var(--shell); }
.side-menu ul a:hover .roll,
.side-menu ul a:focus-visible .roll { transform: translateY(-17px); }
.side-menu ul a.is-current { color: var(--shell); }

@media (prefers-reduced-motion: reduce) {
    .side-menu ul a .roll,
    .icon-roll svg { transition: none; }
}

.side-menu-foot {
    margin-top: 18px;
}
.side-foot-meta {
    text-align: center;
    font-size: 11px;
    line-height: 1.6;
    color: var(--stone);
}
.side-foot-links {
    text-align: center;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--stone);
}
.side-foot-meta a,
.side-foot-links a { color: var(--stone); text-decoration: none; }
.side-foot-meta a:hover,
.side-foot-links a:hover { color: var(--shell); text-decoration: underline; text-underline-offset: 2px; }
.side-foot-sep { color: var(--line); margin: 0 6px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
    /* Mobilde TEK kaydırma katmanı: sayfanın kendisi (body). İç
       konteynerlerin hiçbiri kendi başına dikey kaymamalı — aksi halde
       parmak bir kartın/panelin üstündeyken sayfa yerine o eleman
       kayıyor ("takılma" hissi) ya da kartın içinde ince bir scrollbar
       beliriyor. overscroll-behavior zincirleme kaymayı da kesiyor. */
    html, body { overscroll-behavior-y: none; }
    body { overflow-x: hidden; overflow-y: auto; }
    .split { grid-template-columns: 1fr; height: auto; }
    /* Tek sütuna düşünce sağ köşeleri görselin kendi radius'u hallediyor */
    .split::before,
    .split::after { display: none; }
    .side {
        height: auto;
        border-top: 1px solid var(--line);
        /* Masaüstünde panel kendi içinde kayan sabit yükseklikli bir
           sütun (height:100vh + overflow-y:auto). Mobilde ise tek sütuna
           düşüp sayfa akışının parçası oluyor — burada overflow:auto
           kalırsa panel İKİNCİ bir kaydırma alanı (nested scroll) yaratıp
           parmak sayfayı kaydırırken "takılma" hissine ve kartların
           içinde ayrı bir scroll bar'a yol açıyor. Mobilde iç kaydırmayı
           tamamen kapatıyoruz — overflow-x'i de clip'liyoruz ki
           Samsung Internet bağımsız bir yatay/dikey scroll konteyneri
           kurmasın. */
        overflow: visible;
    }
    /* Kartlarda görsel kartfrom ~5px uzun olduğu için scrollHeight birkaç
       px taşıyordu; bazı mobil tarayıcılar bunu iç scroll sayıp ince bir
       çubuk çiziyordu. overflow:clip taşmayı kaydırılamaz biçimde kesiyor. */
    .side-card { overflow: clip; }
    /* Blur sadece hover'da; mobilde hover yok, dolayısıyla görseli
       karttan %1 büyük tutmaya (kenar sızması önlemi) gerek yok. Tam
       oturtmak taşmayı da tümden kaldırıyor. */
    .side-card-media { inset: 0; }
    .stage { height: auto; overflow: visible; padding: 0; }

    /* Dar ekranda sayfa kayıyor. Header sayfayla birlikte kaybolmuyor:
       üstte sabit duruyor ve içerik altından geçiyor — oyuğun şekli
       sabit, arkasındaki şey değişiyor. Gusto'nun mobil davranışı bu.
       Üst çerçeve bandı da sabitlenmek zorunda; yoksa kayan içerik
       header'ın sağındaki 12px'lik şeritten görünür ve oyuk anlamını
       kaybeder. */
    .stage-topbar { position: fixed; }
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--frame);
        background: var(--panel);
        z-index: 5;
    }
    .stage-media {
        position: relative;
        inset: auto;
        margin: var(--frame);
        height: 64vh;
        overflow: hidden;
        z-index: auto;
        border-radius: 12px;
    }
    .stage-quote {
        position: static;
        width: auto;
        margin: var(--frame);
        margin-top: 0;
        padding: 36px;
        /* Masaüstünde alıntı kartı sabit yükseklikli hero'nun içinde
           yüzdüğü için max-height + overflow-y:auto ile kendi içinde
           kayıyordu. Mobilde sayfa akışına girince bu iç kaydırma yine
           "takılma"ya yol açar — kaldırıyoruz, kart içeriği kadar uzuyor. */
        max-height: none;
        overflow: visible;
    }
    /* Rozet artık .stage-media'nın çocuğu olduğu için mobilde de resmin
       sağ alt köşesinde doğru konumlanıyor — gizlemeye gerek yok. */
}

@media (max-width: 640px) {
    .stage-nav { display: none; }
    .nav-toggle { display: block; }

    /* Mobilde görsel, header'ın ÜSTÜNE binmiyor: 40px'lik bir şerit
       açılıyor ve görsel onun altından başlıyor. Logo bloğu bu şeritten
       24px daha aşağı sarkıyor, sarktığı iki noktada da içbükey köşe var
       — yani görselde header için gerçekten bir oyuk açılmış oluyor.
       Şeridin sağ ucu "Menü" butonuna kalıyor. Gusto'nun mobil kurgusu bu.

       Görsel tepeden başlıyor; iki üst köşesi OYULUYOR: solda logo
       bloğu, sağda "Menü" bloğu. İkisi de panel renginde, görsele bakan
       köşeleri dışa yuvarlak, çerçeve bantlarıyla birleştikleri iki
       noktada içbükey. Yani "Menü" görselin üstünde yüzmüyor, görselin
       içine oturuyor — Gusto'nun mobil kurgusu bu.
       Mobilde yarıçap 14 / oyuk 10; masaüstündeki 20/18 bu ölçekte kaba
       kalıyor. */
    :root { --notch: 10px; }

    .stage-topbar {
        padding: 15px 18px 19px;
        border-radius: 0 0 14px 0;
    }
    .logo img { height: 24px; }  /* mobilde de nefes payı düşüldü: 28 - 4 = 24 */

    /* Sağ üst oyuk: logo bloğunun aynası. İç boşluk üstte 23px çünkü
       "Menü" yazısı logonun optik ortasıyla hizalanmalı. */
    .stage > .nav-toggle {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 6;
        background: var(--panel);
        border-radius: 0 0 0 14px;
        padding: 23px 18px 20px;
        font-size: 15px;
    }
    .stage > .nav-toggle::before,
    .stage > .nav-toggle::after {
        content: '';
        position: absolute;
        width: var(--notch);
        height: var(--notch);
        background: radial-gradient(
            circle var(--notch) at 0 100%,
            transparent calc(var(--notch) - 1px),
            var(--panel) var(--notch)
        );
        pointer-events: none;
    }
    /* solda üst bantla, altta sağ bantla birleşim */
    .stage > .nav-toggle::before {
        top: var(--frame);
        right: calc(100% - 1px);
        width: calc(var(--notch) + 1px);
    }
    .stage > .nav-toggle::after {
        right: var(--frame);
        top: calc(100% - 1px);
        height: calc(var(--notch) + 1px);
    }

    .stage-media {
        height: 62vh;
        margin: var(--frame);
        border-radius: 18px;
    }

    /* Alıntı kartı mobilde gizli (Gusto da öyle yapıyor) — dar ekranda
       hero'nun önüne geçiyor ve ilk ekranı doldurup görseli eziyordu. */
    .stage-quote { display: none; }

    /* Kart mobilde gizli, dolayısıyla çakışma da yok; sadece yatay
       boşluk daraltılıyor. */
    .stage-arrows { padding: 0 12px; }

}

/* =========================================================
   Mobil tam ekran menü (Gusto orijinaline sadık)
   body'nin doğrudan altında, .stage'in DIŞINDA yaşar —
   böylece overflow:hidden / stacking context sorunları oluşmaz.
   ========================================================= */
.mobile-nav {
    display: none;
}

@media (max-width: 640px) {
    /* Overlay tam ekranı kaplayan opak bir sayfa DEĞİL: sayfanın geri
       kalanı gibi 12px'lik çerçevenin içine oturan, köşeleri yuvarlak bir
       yüzey. Zemini --panel-2 — sayfa zemininden (--panel) bir ton açık.
       Kritik nokta bu: header blokları --panel olduğu için üzerinde
       oyulmuş gibi duruyor ve içbükey köşeler görünür kalıyor. Aynı renk
       olsaydı (önceki hâli) menü ayrı bir katman gibi görünüyordu.
       Gusto'da da üç kademe var: çerçeve / yüzey / satır kartları. */
    .mobile-nav {
        display: block;
        position: fixed;
        inset: var(--frame);
        z-index: 4;
        background: var(--panel-2);
        border-radius: 18px;
        /* Çevresindeki 12px'lik bandı da sayfa zeminiyle doldur; yoksa
           arkadaki içeriğin kenar çizgileri banttan sızıyor. */
        box-shadow: 0 0 0 100vmax var(--panel);
        padding: 74px 14px 24px;   /* üstteki 74px sabit header'a ayrılıyor */
        overflow-y: auto;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
    }
    .mobile-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .24s ease, transform .24s ease, visibility 0s linear 0s;
    }
}

/* Satırlar kendi kartları — yüzeyin üstünde bir kademe daha açık.
   Videoda ölçtüm: çerçeve #0A0906, yüzey #151310, satır #171410. */
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    background: var(--card);
    border-radius: var(--r-card);
    color: var(--shell);
    font-family: var(--body);
    font-weight: 500;
    font-size: 17px;
}
.mobile-nav-link .mobile-nav-arrow {
    font-size: 15px;
    opacity: .55;
    transition: transform .25s ease, opacity .25s ease;
}
.mobile-nav-link:hover .mobile-nav-arrow { transform: translateX(4px); opacity: 1; }
.mobile-nav-link[data-current="1"] { color: var(--gold); }

/* Sosyal bağlantılar da aynı satır kartı biçiminde, sadece üstte
   ayırıcı bir boşlukla. İkonun hover'da oka dönmesi .side-social'dan. */
.mobile-nav-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
}
.mobile-nav-social a {
    border: none;
    border-radius: var(--r-card);
    background: var(--card);
    padding: 20px;
    font-size: 17px;
    font-weight: 500;
}
.mobile-nav-social a:hover { background: var(--card); }

/* =========================================================
   Sidebar içeriği — sayfa-özel bloklar
   (Menü / Hakkımızda / Rezervasyon / Mekan sayfaları)
   ========================================================= */

.side-title {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: 42px;
    line-height: 1.1;
    margin: 4px 0 0;
    color: var(--shell);
}
.side-lead {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(246,241,231,.65);
}

/* ---------- Menü sayfası: accordion + ürün listesi ---------- */
.menu-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(246,241,231,.75);
}
.menu-category-label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu-category-icon {
    border-radius: 50%;
    flex-shrink: 0;
}
.menu-category .chev { font-size: 12px; opacity: .6; }

.menu-item {
    display: flex;
    gap: 14px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
}
.menu-item-media {
    width: 64px; height: 64px;
    flex-shrink: 0;
    border-radius: var(--r-control);
    overflow: hidden;
}
.menu-item-media img { width: 100%; height: 100%; object-fit: cover; }
.menu-item-body { flex: 1; min-width: 0; }
.menu-item-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.menu-item-row h3 {
    font-family: var(--body);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--shell);
    display: flex;
    align-items: center;
    gap: 8px;
}
.menu-item-marker { flex-shrink: 0; opacity: 1; }
.menu-item-price { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--gold); white-space: nowrap; }
.menu-item-price-split {
    display: flex;
    align-items: center;
    gap: 12px;
    font-style: normal;
}
.price-option {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.price-option-label {
    font-family: var(--body);
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: .85;
}
.price-option-value {
    font-family: var(--display);
    font-style: italic;
    font-size: 17px;
    color: var(--gold);
}
.price-option-sep {
    width: 1px;
    height: 26px;
    background: var(--line);
}
.price-symbol {
    font-family: var(--body);
    font-style: normal;
    font-weight: 600;
    margin-right: 1px;
}
.menu-item-desc { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--stone); }

/* ---------- About sayfası: kişi kartı ---------- */
.about-figure {
    border-radius: var(--r-card);
    overflow: hidden;
    aspect-ratio: 16/10;
    position: relative;
}
.about-figure img { width: 100%; height: 100%; object-fit: cover; }
.about-figure figcaption {
    position: absolute;
    right: 12px; bottom: 10px;
    font-size: 12.5px;
    color: var(--shell);
    background: rgba(10,9,6,.5);
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* ---------- Restaurant sayfası: adres/iletişim/harita ---------- */
.info-line { margin: 4px 0 0; font-size: 13.5px; color: rgba(246,241,231,.75); }
.info-line a { text-decoration: underline; text-underline-offset: 2px; }
.info-line a:hover { color: var(--gold); }
.info-heading-spaced { margin-top: 18px; }

.side-map {
    border-radius: var(--r-card);
    overflow: hidden;
    aspect-ratio: 4/3;
    border: 1px solid var(--line);
}
.side-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4) invert(.92) contrast(.9); }

/* ---------- Rezervasyon sayfası: form ---------- */
.res-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin-top: 24px;
}
.res-field input,
.res-field select,
.res-field textarea {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    padding: 11px 10px;
    font-family: var(--body);
    font-size: 13px;
    color: var(--shell);
    width: 100%;
    min-width: 0;
}
.res-field textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}
.res-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.res-field.full { grid-column: 1 / -1; }
.res-field label {
    font-family: var(--body);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--shell);
}
.res-field input::placeholder,
.res-field textarea::placeholder { color: rgba(246,241,231,.35); }
.res-field input:focus,
.res-field select:focus,
.res-field textarea:focus {
    outline: none;
    border-color: rgba(246,241,231,.4);
}
.res-submit {
    grid-column: 1 / -1;
    background: var(--shell);
    color: var(--panel);
    border: none;
    border-radius: var(--r-control);
    padding: 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease;
}
.res-submit:hover { background: var(--gold); }
.res-note {
    grid-column: 1 / -1;
    font-size: 12.5px;
    color: var(--stone);
    margin-top: -6px;
}

@media (max-width: 1080px) {
    .res-form { grid-template-columns: 1fr; }
}

/* =========================================================
   Ek bloklar: not, "neden biz" kartları, SSS accordion
   ========================================================= */

.why-item {
    padding: 16px 0;
    border-top: 1px solid var(--line);
}
.why-item:first-of-type { border-top: none; }
.why-item h3 {
    font-family: var(--body);
    font-weight: 600;
    font-size: 15px;
    color: var(--shell);
    margin: 0 0 6px;
}
.why-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(246,241,231,.65);
}

.faq-list { display: flex; flex-direction: column; }
.faq-item {
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 2px;
    cursor: pointer;
    list-style: none;
    font-family: var(--body);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--shell);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-chev {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--stone);
    transition: transform .2s ease;
}
.faq-item[open] .faq-chev { transform: rotate(45deg); }
.faq-item p {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(246,241,231,.65);
    padding-right: 4px;
}

/* Ekran okuyucular için: roll animasyonunda etiket iki kez basıldığından
   görsel kopyalar aria-hidden, gerçek metin burada saklanıyor.
   .sr-only absolute olduğu için KENDİ bağlayıcı bloğunu bulmalı; yoksa
   en yakın konumlu ataya (burada .split) tutunup panelin kaydırma
   kutusundan kaçıyor ve belgeyi uzatıyordu. */
.stage-nav a,
.side-menu ul a { position: relative; }

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

/* =========================================================
   Geniş panelde okuma genişliği
   Panel 660–720px'e çıkınca satırlar 90+ karaktere uzuyor ve okumak
   yoruyor. Panel geniş kalsın (başlıklar, formlar, listeler ondan
   faydalanıyor) ama düz metin ~72 karakterde dursun.
   ========================================================= */
.side-lead,
.why-item p,
.faq-item p,
.side-block > .side-text {
    max-width: 72ch;
}


/* =========================================================
   GİRİŞ ANİMASYONU + SAYFA GEÇİŞİ
   Gusto'da bloklar sayfa açılınca topluca değil, ekrana girdikçe
   beliriyor: 20px aşağıdan yukarı süzülüp opaklaşıyorlar. Kaynakta da
   bu değerler duruyor (opacity:0; transform:translateY(20px)).
   Tetikleme main.js'teki IntersectionObserver ile; JS yoksa ya da
   IntersectionObserver desteklenmiyorsa .reveal-on sınıfı hiç
   eklenmiyor ve her şey normal görünür kalıyor — içerik hiçbir
   koşulda gizli kalmıyor.
   ========================================================= */
html.reveal-on .reveal {
    opacity: 0;
    transform: translateY(20px);
}
html.reveal-on .reveal.is-visible {
    opacity: 1;
    transform: none;
}
html.reveal-on .reveal {
    transition: opacity .55s cubic-bezier(.2, .6, .2, 1),
                transform .55s cubic-bezier(.2, .6, .2, 1);
}

/* Sayfalar arası çapraz erime. Tarayıcı desteklemezse (şu an Firefox)
   sayfa normal yüklenir — hiçbir şey bozulmaz. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.2, .6, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* =========================================================
   Legal içerik (KVKK sayfası) — uzun paragraf + alt başlık akışı.
   Diğer sayfalarda kart/liste bileşenleri var, burada düz metin
   akışı gerektiği için ayrı, sade bir tipografi seti tanımlandı.
   ========================================================= */
.legal-content h2 {
    font-family: var(--body);
    font-size: 17px;
    font-weight: 600;
    color: var(--shell);
    margin: 34px 0 12px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
    font-family: var(--body);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--shell);
    margin: 22px 0 8px;
}
.legal-content p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(246,241,231,.68);
}
.legal-content ul,
.legal-content ol {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(246,241,231,.68);
}
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin-bottom: 6px; }
.legal-content strong { color: var(--shell); font-weight: 600; }
.legal-content a { color: var(--gold); text-decoration: underline; }
.legal-content .legal-meta {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--stone);
}
.legal-content .legal-updated { font-weight: 600; color: rgba(246,241,231,.68); }

/* =========================================================
   Çerez izni banner + özelleştirme paneli
   ========================================================= */
.cookie-banner {
    position: fixed;
    left: 20px; right: 20px; bottom: 20px;
    z-index: 200;
    max-width: 460px;
    margin-left: auto;
    background: var(--card);
    border-radius: var(--r-card);
    padding: 22px 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.cookie-banner.is-visible {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity .3s ease, transform .3s ease;
}
.cookie-banner h2 {
    font-family: var(--body);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--shell);
    margin: 0 0 10px;
}
.cookie-banner p {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(246,241,231,.65);
}
.cookie-banner p a { color: var(--gold); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-btn {
    flex: 1;
    min-width: 100px;
    padding: 10px 14px;
    border-radius: var(--r-control);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
}
.cookie-btn-outline {
    background: transparent;
    border-color: var(--line);
    color: var(--shell);
}
.cookie-btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.cookie-btn-solid {
    background: var(--clay);
    color: #fff;
}
.cookie-btn-solid:hover { background: #c8532f; }

@media (max-width: 560px) {
    .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 18px 20px; }
}

/* Özelleştirme paneli (modal) */
.cookie-modal-overlay {
    position: fixed; inset: 0;
    z-index: 210;
    background: rgba(10,9,6,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.cookie-modal-overlay.is-visible {
    opacity: 1; visibility: visible;
    transition: opacity .2s ease;
}
.cookie-modal {
    background: var(--card);
    border-radius: var(--r-card);
    max-width: 560px;
    width: 100%;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cookie-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}
.cookie-modal-head h2 {
    font-family: var(--body);
    font-size: 16px;
    font-weight: 600;
    color: var(--shell);
    margin: 0;
}
.cookie-modal-close {
    background: transparent;
    border: 0;
    color: var(--stone);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.cookie-modal-close:hover { color: var(--shell); }
.cookie-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(246,241,231,.65);
}
.cookie-modal-body > p { margin: 0 0 14px; }
.cookie-modal-body a { color: var(--gold); text-decoration: underline; }
.cookie-cat {
    border-top: 1px solid var(--line);
    padding: 16px 0;
}
.cookie-cat:last-child { padding-bottom: 4px; }
.cookie-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.cookie-cat-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--shell);
}
.cookie-cat-always {
    font-size: 11px;
    font-weight: 600;
    color: #86A96B;
    white-space: nowrap;
}
.cookie-cat-desc {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: rgba(246,241,231,.55);
}

/* Zorunlu-dışı kategoriler için toggle switch */
.cookie-switch {
    position: relative;
    width: 40px; height: 22px;
    flex: none;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
}
.cookie-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--stone);
    transition: transform .18s ease, background .18s ease;
}
.cookie-switch.is-on { background: rgba(178,71,43,.35); border-color: var(--clay); }
.cookie-switch.is-on::after { transform: translateX(18px); background: var(--clay); }

.cookie-modal-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid var(--line);
}
.cookie-modal-foot .cookie-btn { flex: 1; min-width: 120px; }