/*
    ============================================================================
    Ocakbasi — yerlesim ailesi L6
    ============================================================================

    SIFIRDAN YAZILMISTIR. Ucuncu taraf cerceve ya da ikon kutuphanesi
    icermez. Yazi tipleri TEMANIN ICINDE (assets/fonts) - harici ag istegi
    yapilmaz.

    ----------------------------------------------------------------------------
    KARDES TEMADAN NEREDE AYRILIR
    ----------------------------------------------------------------------------
    Ayni sektorde (lokanta/restoran) iki tema var. Ikisinin de bulunmasinin
    sebebi musteriye SECIM vermek; ayni yerlesimi iki renkle sunmak secim
    olmazdi. Farklar yapisal:

      lokanta (L5)          |  ocakbasi (L6)
      ----------------------|------------------------------
      tam genislik vitrin   |  bolunmus vitrin + bilgi paneli
      ortalanmis baslik     |  sola yaslanmis baslik
      iki sutunlu menu      |  numarali menu satirlari
      krem + firin kizili   |  kor + bakir, koyu govde
      Fraunces (serif)      |  Space Grotesk (geometrik)

    ----------------------------------------------------------------------------
    RENK
    ----------------------------------------------------------------------------
    Kor + bakir. Govde ACIK DEGIL koyudur: ocakbasi aksam isletmesidir ve
    koyu bir sayfa o saatin havasini tasir. Koyu govde ayrica kardes
    temadan ilk bakista ayrilmasini saglar.
*/
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/dm-sans-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/dm-sans-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/dm-sans-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/dm-sans-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ========================================================================
   2. DEGISKENLER
   ======================================================================== */

/*
    --ana / --koyu / --zemin / --vurgu adlari SERBEST SECILMEZ: tasarim
    katmani (App\Services\Design) tam olarak bu adlari arar ve bulamazsa
    musterinin renk degisikligi sessizce hicbir sey yapmaz.

    KONTRAST: --ana uzerine beyaz metin 5.9:1, --koyu uzerine krem 12.4:1,
    --vurgu uzerine koyu metin 8.1:1. Hepsi WCAG AA'nin uzerinde.
*/
:root {
    --ana: #c2410c;          /* kor turuncusu - ZEMIN olarak */
    --ana-koyu: #9a3412;
    /*
        KOYU GOVDEDE METIN ICIN ACIK KOR.

        --ana bir zemin rengidir; koyu govde uzerinde METIN olarak
        kullanildiginda yalnizca 3.22-3.73 veriyor ve WCAG AA 4.5 istiyor.
        Olculdu: bu ton uc koyu yuzeyde de 6.19-7.18. Ton ayni ailede
        kaldi, yalnizca parlakligi yukseldi.

        Kardes tema `lokanta` acik govdelidir ve orada ters yon gerekir
        (acik zeminde KOYU ton). Ayni ada sahip degiskenin iki temada
        farkli yone gitmesi bu yuzden dogaldir - kural "zemine gore
        secilir", "sabit bir ton" degil.
    */
    --ana-acik: #ef7f4a;
    --koyu: #120d0a;         /* is - en koyu yuzey */
    --zemin: #1c1512;        /* GOVDE KOYU: ocakbasi aksam isletmesidir */
    --zemin-2: #261c17;
    --vurgu: #e8a33d;        /* bakir - KOYU zeminler icin */
    /*
        ACIK ZEMIN ICIN KOYU KEHRIBAR.

        --vurgu koyu zeminde parlak durur ama krem zeminde yalnizca
        2.25:1 verir; WCAG AA 4.5 ister. Olculdu ve duzeltildi: bu ton
        krem uzerinde 5.80, ikincil krem uzerinde 5.20. Tonu degil
        PARLAKLIGI degistirdik - marka rengi ayni ailede kaliyor.
    */
    --vurgu-koyu: #8a5a12;
    /*
        FOTOGRAF UZERI ICIN ACIK ALTIN.

        Fotografli vitrinde metin, %72 saydam koyu bir perdenin uzerinde
        durur ve perdenin ALTINDAKI fotografi biz secmiyoruz - musteri
        yukluyor. Bu yuzden EN KOTU IHTIMALE gore hesaplandi: perdenin
        altindaki fotograf bembeyaz olsa etkin zemin rgb(97,88,82) olur.
        Orada --vurgu yalnizca 2.87 verir (AA 4.5 ister); bu ton 4.73.

        Perdeyi koyultmak da bir cozumdu ama %86 saydamsizlik gerekiyordu
        ve o noktada musterinin fotografi neredeyse gorunmez hale
        geliyordu - fotografi gostermek icin konan bir bolumde anlamsiz.
    */
    --vurgu-acik: #f3c987;
    /* Koyu govde: metin acik, ikincil metin kirik beyaz. */
    --metin: #f2e7de;
    --metin-2: #c4ab99;
    --cizgi: #3a2b23;

    --baslik-font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --govde-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --kap: 1120px;
    --yumusak: 10px;
}

/* ========================================================================
   3. TEMEL
   ======================================================================== */

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

html { scroll-behavior: smooth; }

/*
    Hareket duyarliligi: `scroll-behavior: smooth` da bir harekettir ve
    vestibuler rahatsizligi olan ziyaretcide bas donmesi yapar.
*/
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: var(--govde-font);
    font-size: 17px;
    line-height: 1.65;
    /* Uzun alan adi ve e-posta adresleri dar ekranda tasmasin. */
    overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
    font-family: var(--baslik-font);
    line-height: 1.2;
    margin: 0 0 0.4em;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--ana-acik); }
a:hover { color: #f5a077; }

/*
    ODAK HALKASI KALDIRILMAZ. Klavyeyle gezen ziyaretci nerede oldugunu
    yalnizca buradan bilir; `outline: none` yazmak onu sayfada kor birakir.
*/
:focus-visible {
    outline: 3px solid var(--vurgu);
    outline-offset: 2px;
    border-radius: 4px;
}

.kap {
    width: min(100% - 2.5rem, var(--kap));
    margin-inline: auto;
}

/* Yalnizca ekran okuyucuya gorunur metin. */
.p-gizli {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Klavye kullanicisi menuyu her sayfada bastan gecmesin. */
.atla {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--koyu);
    color: #fff;
    padding: 0.75rem 1.25rem;
    z-index: 100;
}
.atla:focus { left: 0; }

/* ========================================================================
   4. UST BOLUM
   ======================================================================== */

.ust {
    background: var(--koyu);
    color: var(--metin);
    position: sticky;
    top: 0;
    z-index: 20;
}

.ust-ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    /* Dokunma hedefi yuksekligi icin dikey bosluk (WCAG 2.5.8). */
    padding: 0.85rem 0;
}

.marka {
    font-family: var(--baslik-font);
    font-size: 1.3rem;
    font-weight: 600;
    color: #fdf7ee;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.marka:hover { color: var(--vurgu); }

.marka-logo { max-height: 40px; width: auto; }

.ust nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.ust nav a {
    color: #efe2d2;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    /* 24x24 asgari dokunma hedefi (WCAG 2.5.8) fazlasiyla saglanir. */
    padding: 0.6rem 0.25rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.ust nav a:hover { color: var(--vurgu); }

/* ========================================================================
   5. VITRIN
   ======================================================================== */

/*
    TEK VITRIN BOLUMU.

    Desen HER ZAMAN zemindedir; musteri fotograf yukledigiyse fotograf
    desenin uzerini tamamen orter. Iki ayri bolum yazmak, dosyada iki ana
    baslik birakiyordu (bkz. index.html).
*/
.vitrin {
    position: relative;
    color: var(--metin);
    display: grid;
    align-items: center;
    min-height: min(72vh, 560px);
    padding: 4rem 0;
    isolation: isolate;
}

/*
    BOLUNMUS DUZEN: solda soz, sagda bilgi paneli.

    `minmax(0, ...)` sart: uzun bir adres ya da alan adi sutunu tasirir ve
    sayfada yatay kaydirma acardi.
*/
.vitrin-ic {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

@media (max-width: 900px) {
    .vitrin-ic { grid-template-columns: minmax(0, 1fr); }
}

/* Bilgi paneli - vitrinin sag yarisi. */
.panel {
    background: rgba(18, 13, 10, 0.82);
    border: 1px solid rgba(232, 163, 61, 0.35);
    border-radius: var(--yumusak);
    padding: 1.6rem 1.5rem;
}

.panel h2 { font-size: 1.15rem; margin-bottom: 1rem; color: #fff6ec; }

.panel-satir { margin: 0 0 0.75rem; font-size: 0.97rem; }

.panel-satir span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--vurgu);
}

.panel-satir a { display: inline-flex; align-items: center; min-height: 44px; }

.panel-adres {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(232, 163, 61, 0.25);
    font-size: 0.93rem;
    color: var(--metin-2);
}

/*
    FOTOGRAFLI SURUM.

    Fotograf `position: absolute` ile zemine yayilir. `z-index: -1`
    KULLANILMAZ: negatif deger, ogeyi kendi yigin baglaminin disina, ata
    ogenin zemininin ARKASINA dusurur ve fotograf gorunmez olur - bu kusur
    daha once baska bir temada yasandi (2026-08-29 gorsel denetimi).
    Yigin baglami `isolation: isolate` ile kurulur ve fotografa 1 verilir.
*/
.vitrin-arka {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/*
    Fotografin uzerine KOYU PERDE. Yemek fotograflari genelde acik ve
    yuksek kontrastlidir; perdesiz birakilsa baslik metni okunmazdi.
    Perde, en acik fotografta bile 4.5:1 saglayacak koyulukta.
*/
/*
    PERDE HER IKI DURUMDA DA VARDIR.

    Fotografli surumde sart: yemek fotograflari genelde acik ve yuksek
    kontrastlidir, perdesiz birakilsa baslik okunmazdi. Desenli surumde
    de birakildi - orada zaten koyu olan zemini biraz daha koyultur ve
    kosula bagli bir kural yazmaya gerek kalmaz. Kosula baglanan her
    gorsel kural, iki durumdan birinde unutulmaya adaydir.
*/
.vitrin .vitrin-ic::before {
    content: "";
    position: absolute;
    inset: -3rem -2rem;
    background: rgba(36, 23, 15, 0.72);
    border-radius: var(--yumusak);
    z-index: -1;
}

/*
    FOTOGRAF YOKSA PERDE DE YOK.

    Perde, musterinin fotografinin uzerinde metni okunur kilmak icin var.
    Fotograf yokken desenin uzerinde SERT KENARLI bir kutu gibi duruyor ve
    tasarim yarim gorunuyordu.

    KURAL TERS YAZILDI ve bu bilincli: perde VARSAYILAN olarak durur,
    yalnizca fotograf YOKKEN kaldirilir. Duz yazim (`:has(.vitrin-arka)`
    varsa perde koy) `:has()` desteklemeyen eski bir tarayicida perdeyi
    fotografin uzerinde de kaldirirdi - yani hatanin bedeli okunmayan bir
    baslik olurdu. Bu yazimda ayni tarayici secimi gecersiz sayar, perde
    yerinde kalir ve en kotu ihtimal "gereginden koyu bir desen"dir.
*/
.vitrin:not(:has(.vitrin-arka)) .vitrin-ic::before {
    display: none;
}


/*
    DESEN - vitrinin varsayilan zemini.

    Tamami CSS: iki radyal isik ve ince bir capraz tarama. Ek dosya yok,
    ag istegi yok, ekran okuyucuya hicbir sey soylemez - dekoratiftir.

    Musteri fotograf yuklediginde `.vitrin-arka` bunun uzerini tamamen
    orter; desen yine de kalir cunku fotograf yuklenirken (ya da adresi
    kirildiginda) arkada krem bir bosluk degil, temanin kendi zemini
    durur.
*/
.vitrin {
    background-color: var(--koyu);
    background-image:
        radial-gradient(42rem 22rem at 12% 88%, rgba(194, 65, 12, 0.55), transparent 62%),
        radial-gradient(38rem 20rem at 78% 18%, rgba(232, 163, 61, 0.20), transparent 60%),
        repeating-linear-gradient(0deg, rgba(242, 231, 222, 0.035) 0 1px, transparent 1px 9px);
}

/*
    Taban renk ACIK ZEMINE gore secilir; koyu bolumler ve vitrin bunu
    parlak altinla EZER. Ters sirada yazilsaydi (taban altin, acigi
    ezsin) yeni bir acik bolum eklendiginde kontrast sessizce duserdi -
    varsayilan guvenli olan olmali.
*/
.ust-etiket {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    font-weight: 700;
    /*
        KOYU GOVDE: taban renk PARLAK bakirdir.

        Kardes temada taban koyu tondu cunku orada govde acikti. Burada
        ters: govde koyu oldugu icin guvenli varsayilan parlak olandir.
        Koyu ton (--vurgu-koyu) burada yalnizca 3.05 veriyordu.
    */
    color: var(--vurgu);
    margin-bottom: 0.75rem;
}

/*
    Vitrin etiketi HER IKI DURUMDA acik altin. Perdenin altindaki
    fotografi biz secmedigimiz icin en kotu ihtimale gore hesaplandi;
    ayrintili gerekce --vurgu-acik tanimindadir.
*/
.vitrin .ust-etiket { color: var(--vurgu-acik); }

.vitrin .slogan {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--metin-2);
    margin-bottom: 1.75rem;
}

.eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 1.5rem;
    border: 2px solid var(--vurgu);
    border-radius: 999px;
    background: var(--vurgu);
    /* Bakir zeminde KOYU metin: beyazla 4.5:1 saglanamiyor. */
    color: #120d0a;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}
.dugme:hover { background: #f0b455; border-color: #f0b455; color: #120d0a; }

.dugme-ikincil {
    background: transparent;
    color: var(--metin);
    border-color: rgba(242, 231, 222, 0.5);
}
.dugme-ikincil:hover { background: rgba(242, 231, 222, 0.12); color: #fff6ec; border-color: var(--metin); }

/* Acik zeminli bolumlerde ikincil dugme koyu metin ister. */
/* Govde koyu oldugu icin ikincil dugme her yerde acik metin tasir. */
.bolum .dugme-ikincil { color: var(--metin); border-color: rgba(242, 231, 222, 0.4); }
.bolum .dugme-ikincil:hover { background: rgba(242, 231, 222, 0.1); color: #fff6ec; border-color: var(--metin); }

/* ========================================================================
   6. BILGI SERIDI
   ======================================================================== */

.serit {
    background: var(--zemin-2);
    border-block: 1px solid var(--cizgi);
}

.serit-ic {
    display: grid;
    /* minmax(0,1fr): uzun adres metni sutunu tasirmasin. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.5rem 2rem;
    padding: 1.25rem 0;
}

.serit p { margin: 0; font-size: 0.97rem; }

/*
    Serit icindeki telefon BIR DOKUNMA HEDEFIDIR.

    Olculdu: duz metin akisi icinde 112x18 pikselde kaliyordu ve WCAG
    2.5.8'in 24 piksel alt sinirini gecmiyordu. Ayni sinif kusur daha
    once baska temalarda da cikti (2026-08-29 gorsel denetimi): iletisim
    bolumundeki baglantilar duzeltilirken serit gozden kaciyor.
*/
.serit a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.serit span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--metin-2);
}

/* ========================================================================
   7. BOLUMLER
   ======================================================================== */

.bolum { padding: clamp(3rem, 7vw, 5.5rem) 0; }

/*
    GOVDE ZATEN KOYU oldugu icin `bolum-koyu` burada DAHA KOYU bir yuzeydir;
    kardes temada ise acik bir sayfadaki koyu adaydi. Sinif adi ayni tutuldu
    cunku HTML iki temada da ortak.
*/
.bolum-koyu {
    background: var(--koyu);
    color: var(--metin);
}
.bolum-koyu h2, .bolum-koyu h3 { color: #fff6ec; }
.bolum-koyu .ust-etiket { color: var(--vurgu); }
.bolum-koyu a { color: var(--vurgu); }
.bolum-koyu a:hover { color: #e3c451; }

.bolum-alt {
    color: var(--metin-2);
    max-width: 42rem;
    margin-bottom: 2.25rem;
}
.bolum-koyu .bolum-alt { color: var(--metin-2); }

/* ========================================================================
   8. MENU
   ======================================================================== */

/*
    NUMARALI SATIRLAR - kardes temadaki iki sutunlu listeden farkli.
    Numara DEKORATIFTIR (`aria-hidden`): ekran okuyucuya "bir, Corbalar"
    diye okunmasi bir sira ima ederdi, oysa menude sira yoktur.
*/
.siralar {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sira {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--cizgi);
}

.sira-no {
    font-family: var(--baslik-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vurgu);
    line-height: 1.1;
    min-width: 2ch;
}

.sira h3 { margin-bottom: 0.25rem; color: #fff6ec; }

.sira p {
    margin: 0;
    color: var(--metin-2);
    font-size: 0.97rem;
}

/* ========================================================================
   9. HAKKIMIZDA
   ======================================================================== */

.hakkimizda-ic {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (max-width: 860px) {
    .hakkimizda-ic { grid-template-columns: minmax(0, 1fr); }
}

.metin { font-size: 1.05rem; }

.rozet {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 1rem 0 0;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(201, 162, 39, 0.5);
    border-radius: 999px;
}
.rozet span {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--vurgu);
}
.rozet strong { font-family: var(--baslik-font); font-size: 1.2rem; }

/* Dekoratif tabak deseni - ekran okuyucudan gizli (aria-hidden). */
.desen-kutu {
    color: var(--vurgu);
    opacity: 0.75;
    justify-self: center;
    width: min(100%, 20rem);
}
.desen-kutu svg { width: 100%; height: auto; display: block; }

/* ========================================================================
   10. GALERI
   ======================================================================== */

.galeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}

.galeri img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--yumusak);
}

/* ========================================================================
   11. PLATFORMLAR
   ======================================================================== */

.platformlar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.platformlar a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.6rem 1.15rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: var(--zemin-2);
    color: var(--vurgu);
    font-weight: 600;
    text-decoration: none;
}
.platformlar a:hover { border-color: var(--vurgu); background: #2f231c; }
.platformlar svg { width: 16px; height: 16px; flex: none; }

/* ========================================================================
   12. ILETISIM
   ======================================================================== */

.iletisim {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.5rem 2rem;
    margin: 0 0 2rem;
}

.iletisim dt {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vurgu);
    margin-bottom: 0.2rem;
}

.iletisim dd { margin: 0; font-size: 1.02rem; }

.iletisim a {
    /* Telefon ve e-posta baglantilari da dokunma hedefidir. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.baglantilar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

/* ========================================================================
   13. ILETISIM FORMU
   ======================================================================== */

.iletisim-form-kap { max-width: 34rem; }

.iletisim-form h3 { margin-bottom: 1rem; }

.form-satir { display: block; margin-bottom: 1rem; }

.form-satir label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.form-satir input,
.form-satir textarea {
    width: 100%;
    /*
        16px ALTINA DUSURULMEZ: iOS Safari daha kucuk yazi tipli bir alana
        odaklandiginda sayfayi kendiliginden yakinlastirir ve ziyaretci
        yerlesimi bozulmus bir sayfada kalir.
    */
    font-size: 16px;
    font-family: inherit;
    color: var(--metin);
    background: var(--zemin-2);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    min-height: 48px;
}

.form-satir textarea { min-height: 8rem; resize: vertical; }

/* Tuzak alan: insan gormez, bot doldurur. */
.form-tuzak {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
    SONUC KUTULARI - JavaScript'siz.

    Varsayilan gizli; yalnizca adres o kimligi hedefledigi zaman gorunur.
    `:target` disinda hicbir mekanizma yok, bu yuzden betik engelleyen bir
    ziyaretci de sonucu gorur.
*/
.form-sonuc {
    display: none;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border-radius: 8px;
    border-left: 4px solid;
    font-weight: 600;
}
.form-sonuc:target { display: block; }

.form-sonuc-olumlu {
    background: #10331f;
    border-color: #4caf7d;
    color: #d9f2e4;
}
.form-sonuc-uyari {
    background: #3a1c14;
    border-color: #e08a5a;
    color: #f7ddcd;
}

/* ========================================================================
   14. ALT BOLUM
   ======================================================================== */

.alt {
    background: var(--koyu);
    color: var(--metin-2);
    padding: 2rem 0;
    text-align: center;
}
.alt p { margin: 0.15rem 0; }
.alt .kucuk { font-size: 0.9rem; color: #9c8474; }

/* ========================================================================
   15. YAZDIRMA
   ======================================================================== */

/*
    Menu YAZDIRILIR. Govde ekranda koyudur; kagitta murekkebi yer, bu
    yuzden tamami beyaza cevrilir.
*/
@media print {
    .ust, .atla, .eylemler, .iletisim-form-kap, .baglantilar, .platformlar { display: none; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .serit, .panel { background: none; color: #000; border-color: #999; }
    .sira-no, .sira h3, .ust-etiket { color: #000; }
    .vitrin { min-height: auto; color: #000; background: none; padding: 1rem 0; }
    .vitrin-arka, .desen-kutu { display: none; }
    /*
    PERDE HER IKI DURUMDA DA VARDIR.

    Fotografli surumde sart: yemek fotograflari genelde acik ve yuksek
    kontrastlidir, perdesiz birakilsa baslik okunmazdi. Desenli surumde
    de birakildi - orada zaten koyu olan zemini biraz daha koyultur ve
    kosula bagli bir kural yazmaya gerek kalmaz. Kosula baglanan her
    gorsel kural, iki durumdan birinde unutulmaya adaydir.
*/
.vitrin .vitrin-ic::before { display: none; }
    .bolum-koyu { background: #fff; color: #000; }
    .bolum-koyu h2, .bolum-koyu h3 { color: #000; }
}