/* =============================================================
   Baranlar Yemek — tabeladan türeyen kimlik
   Kırmızı slab + lacivert + fildişi: dükkân tabelasının paleti.
   ============================================================= */

:root {
    --kirmizi: #A8261D;
    --kirmizi-koyu: #851D15;
    --lacivert: #242B3E;
    --lacivert-koyu: #1A2030;
    --zemin: #FAF5EB;
    --panel: #FFFDF7;
    --murekkep: #2B2620;
    --gri: #6E675C;
    --bakir: #B97F3E;
    --cizgi: #E6DECD;
    --golge: 0 10px 30px -12px rgba(36, 43, 62, .18);
    --f-slab: 'Alfa Slab One', 'Rockwell', serif;
    --f-govde: 'Manrope', system-ui, sans-serif;
    --radius: 10px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--f-govde);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--murekkep);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--kirmizi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kirmizi-koyu); }
ul { list-style: none; }
address { font-style: normal; }

:focus-visible {
    outline: 3px solid var(--bakir);
    outline-offset: 2px;
    border-radius: 2px;
}

.kap { max-width: 1120px; margin-inline: auto; padding-inline: 1.25rem; }

.atlama {
    position: absolute; left: -999px; top: 0;
    background: var(--lacivert); color: #fff; padding: .6rem 1rem; z-index: 99;
}
.atlama:focus { left: 0; }

/* ---- Tipografi ---------------------------------------------- */

h1, h2, h3 { color: var(--lacivert); line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -.015em; }
h3 { font-size: 1.15rem; font-weight: 800; }

.eyebrow {
    display: inline-block;
    font-size: .78rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--kirmizi);
    margin-bottom: .75rem;
}

/* ---- Düğmeler ------------------------------------------------ */

.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 800; font-size: .95rem;
    padding: .8rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    border: 2px solid transparent;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.dugme:active { transform: translateY(1px); }
.dugme-kirmizi { background: var(--kirmizi); color: #fff; }
.dugme-kirmizi:hover { background: var(--kirmizi-koyu); color: #fff; }
.dugme-lacivert { background: var(--lacivert); color: #fff; }
.dugme-lacivert:hover { background: var(--lacivert-koyu); color: #fff; }
.dugme-cerceve { border-color: currentColor; color: inherit; }
.dugme-beyaz { background: var(--panel); color: var(--kirmizi); }
.dugme-beyaz:hover { background: #fff; color: var(--kirmizi-koyu); }
.dugme-yesil { background: #1E9E54; color: #fff; }
.dugme-yesil:hover { background: #187F43; color: #fff; }

/* ---- Üst şerit (tabelanın kırmızı çerçevesi) ----------------- */

.ust-serit {
    background: var(--lacivert);
    color: #cfd3de;
    font-size: .85rem;
    border-top: 5px solid var(--kirmizi);
}
.ust-serit a { color: #fff; font-weight: 700; text-decoration: none; }
.ust-serit a:hover { text-decoration: underline; }
.ust-serit-ic {
    display: flex; justify-content: space-between; gap: 1rem;
    padding-block: .45rem; flex-wrap: wrap;
}

/* ---- Başlık / menü ------------------------------------------- */

.baslik {
    background: var(--panel);
    border-bottom: 1px solid var(--cizgi);
    position: sticky; top: 0; z-index: 50;
}
.baslik-ic {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-block: .7rem;
    flex-wrap: wrap;
}

.marka { text-decoration: none; line-height: 1; }
.marka-ad {
    display: block;
    font-family: var(--f-slab);
    font-size: 1.7rem;
    color: var(--kirmizi);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.marka-alt {
    display: block;
    font-size: .72rem; font-weight: 800;
    letter-spacing: .34em; text-transform: uppercase;
    color: var(--lacivert);
    margin-top: .2rem;
}

.menu > ul { display: flex; align-items: center; gap: 1.4rem; }
.menu a {
    text-decoration: none; color: var(--lacivert);
    font-weight: 700; font-size: .97rem;
    padding-block: .5rem;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--kirmizi); }
.menu-cta a { padding: .8rem 1.5rem; color: #fff; }

.menu-acilir { position: relative; }
.acilir {
    position: absolute; top: 100%; left: -1rem;
    background: var(--panel);
    border: 1px solid var(--cizgi); border-radius: var(--radius);
    box-shadow: var(--golge);
    min-width: 240px;
    padding: .5rem;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    z-index: 60;
    text-align: left;
}
.menu-acilir:hover .acilir,
.menu-acilir:focus-within .acilir { display: flex; }
.acilir a {
    display: block; padding: .5rem .75rem; border-radius: 6px; font-size: .92rem;
}
.acilir a:hover { background: var(--zemin); }

.menu-dugme {
    display: none;
    font: inherit; font-weight: 800;
    background: none; border: 2px solid var(--lacivert);
    color: var(--lacivert);
    border-radius: var(--radius);
    padding: .45rem .9rem;
    cursor: pointer;
    align-items: center; gap: .5rem;
}
.menu-cizgi, .menu-cizgi::before, .menu-cizgi::after {
    content: ''; display: block; width: 16px; height: 2px;
    background: currentColor; position: relative;
}
.menu-cizgi::before { position: absolute; top: -5px; }
.menu-cizgi::after { position: absolute; top: 5px; }

/* ---- Hero: tabela panosu ------------------------------------- */

.hero { padding-block: 3.5rem 4rem; position: relative; overflow: hidden; }
.hero::before {
    /* Selçuklu yıldızı (sekiz köşe) dokusu — Konya'ya selam, çok silik */
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg stroke='%23242B3E' stroke-opacity='.055' fill='none' stroke-width='1.5'%3E%3Crect x='26' y='26' width='20' height='20'/%3E%3Crect x='26' y='26' width='20' height='20' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.hero-ic {
    position: relative;
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: 3rem; align-items: center;
}

.hero h1 { margin-block: .4rem 1.1rem; }
.hero h1 .vurgu {
    font-family: var(--f-slab);
    font-weight: 400;
    color: var(--kirmizi);
    display: block;
    font-size: clamp(2.4rem, 6vw, 4rem);
    letter-spacing: .01em;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 rgba(36, 43, 62, .12);
}
.hero-metin p { max-width: 34rem; color: var(--gri); font-size: 1.1rem; }

.hero-dugmeler { display: flex; gap: .8rem; margin-top: 1.6rem; flex-wrap: wrap; }

.hero-notlar {
    display: flex; gap: 1.75rem; margin-top: 2rem; flex-wrap: wrap;
    border-top: 1px dashed var(--cizgi); padding-top: 1.25rem;
}
.hero-not strong { display: block; color: var(--lacivert); font-size: 1rem; }
.hero-not span { font-size: .85rem; color: var(--gri); }

/* Menü kartı: kazanın bugünkü menüsü, lokanta panosu gibi */
.menu-karti {
    background: var(--panel);
    border: 1px solid var(--cizgi);
    border-top: 6px solid var(--kirmizi);
    border-radius: var(--radius);
    box-shadow: var(--golge);
    padding: 1.75rem;
    rotate: 1.2deg;
}
.menu-karti-baslik {
    font-family: var(--f-slab);
    color: var(--lacivert);
    font-size: 1.05rem;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 1rem;
    display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
}
.menu-karti-baslik small {
    font-family: var(--f-govde); font-weight: 700;
    font-size: .72rem; color: var(--bakir);
    letter-spacing: .12em; text-transform: uppercase;
}
.menu-karti li {
    display: flex; align-items: baseline; gap: .5rem;
    padding-block: .5rem;
    font-weight: 600; font-size: .97rem;
}
.menu-karti li + li { border-top: 1px dashed var(--cizgi); }
.menu-karti li::before {
    content: '●'; color: var(--kirmizi); font-size: .55rem; translate: 0 -2px;
}

/* ---- Bölümler ------------------------------------------------ */

.bolum { padding-block: 4rem; }
.bolum-beyaz { background: var(--panel); border-block: 1px solid var(--cizgi); }
.bolum-baslik { max-width: 40rem; margin-bottom: 2.25rem; }
.bolum-baslik p { color: var(--gri); margin-top: .6rem; }

/* Hizmet kartları */
.hizmet-izgara {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
}
.hizmet-kart {
    background: var(--panel);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex; flex-direction: column; gap: .6rem;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, translate .15s ease, box-shadow .15s ease;
}
.hizmet-kart:hover {
    border-color: var(--kirmizi);
    translate: 0 -3px;
    box-shadow: var(--golge);
    color: inherit;
}
.hizmet-kart h3 { color: var(--kirmizi); }
.hizmet-kart p { font-size: .92rem; color: var(--gri); flex: 1; }
.hizmet-kart .kart-ok { font-weight: 800; font-size: .88rem; color: var(--lacivert); }
.hizmet-kart:hover .kart-ok { color: var(--kirmizi); }

/* Özellik listesi (hizmet sayfaları) */
.ozellik-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ozellik {
    background: var(--panel);
    border: 1px solid var(--cizgi);
    border-left: 4px solid var(--bakir);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
}
.ozellik h3 { margin-bottom: .35rem; }
.ozellik p { font-size: .95rem; color: var(--gri); }

/* Süreç adımları */
.surec-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: adim; }
.surec-adim { counter-increment: adim; padding-top: .5rem; border-top: 3px solid var(--cizgi); position: relative; }
.surec-adim::before {
    content: counter(adim);
    font-family: var(--f-slab);
    color: var(--kirmizi);
    font-size: 1.6rem;
    display: block;
    margin-block: .5rem .3rem;
}
.surec-adim h3 { margin-bottom: .3rem; }
.surec-adim p { font-size: .92rem; color: var(--gri); }

/* SSS */
.sss { max-width: 46rem; }
.sss details {
    background: var(--panel);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    margin-bottom: .7rem;
}
.sss summary {
    cursor: pointer;
    font-weight: 800; color: var(--lacivert);
    padding: 1rem 1.25rem;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; font-family: var(--f-slab); color: var(--kirmizi); font-size: 1.1rem; }
.sss details[open] summary::after { content: '–'; }
.sss details p { padding: 0 1.25rem 1.1rem; color: var(--gri); }

/* CTA bandı */
.cta-band { background: var(--kirmizi); color: #fff; }
.cta-band-ic {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; padding-block: 3rem; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; max-width: 32rem; }
.cta-band p { color: #f6d9d5; margin-top: .5rem; max-width: 34rem; }
.cta-band-dugmeler { display: flex; gap: .8rem; flex-wrap: wrap; }
.cta-band .dugme-cerceve { color: #fff; }
.cta-band .dugme-cerceve:hover { background: rgba(255,255,255,.12); }

/* Sayfa girişi (iç sayfalar) */
.sayfa-giris { padding-block: 3.25rem 1rem; }
.sayfa-giris .eyebrow { margin-bottom: .5rem; }
.sayfa-giris p { max-width: 44rem; color: var(--gri); font-size: 1.08rem; margin-top: 1rem; }

.ekmek { font-size: .85rem; color: var(--gri); margin-bottom: 1.25rem; }
.ekmek a { color: var(--gri); }
.ekmek a:hover { color: var(--kirmizi); }

/* Hizmet sayfası: içerik + yan menü kartı */
.hizmet-yerlesim {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem;
    align-items: start;
}
.hizmet-yan { position: sticky; top: 90px; display: grid; gap: 1.1rem; }

.ara-kart {
    background: var(--lacivert); color: #cfd3de;
    border-radius: var(--radius);
    padding: 1.5rem;
}
.ara-kart h3 { color: #fff; margin-bottom: .5rem; }
.ara-kart a.tel { color: #fff; font-weight: 800; font-size: 1.25rem; text-decoration: none; display: block; margin-top: .3rem; }
.ara-kart .dugme { margin-top: 1rem; }

/* ---- Galeri -------------------------------------------------- */

.filtreler { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.filtre {
    display: inline-block;
    font-weight: 700; font-size: .88rem;
    color: var(--lacivert);
    background: var(--panel);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    padding: .45rem 1rem;
    text-decoration: none;
}
.filtre:hover { border-color: var(--kirmizi); color: var(--kirmizi); }
.filtre-secili, .filtre-secili:hover { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }

.galeri-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.galeri-kart {
    background: var(--panel);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--golge);
}
.galeri-kart img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.galeri-kart figcaption {
    padding: .8rem 1rem;
    font-weight: 700; font-size: .95rem; color: var(--lacivert);
    display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
}
.galeri-kart figcaption small { font-weight: 600; font-size: .75rem; color: var(--bakir); text-align: right; }

.galeri-devam { margin-top: 1.75rem; }

/* ---- Form ---------------------------------------------------- */

.form-yerlesim { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }

.form {
    background: var(--panel);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--golge);
}
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label {
    display: block; font-weight: 700; font-size: .9rem;
    color: var(--lacivert); margin-bottom: .3rem;
}
.form .alan { margin-bottom: 1.1rem; }
.form input, .form select, .form textarea {
    width: 100%;
    font: inherit; font-size: .97rem;
    padding: .7rem .85rem;
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    background: #fff;
    color: var(--murekkep);
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: 2px solid var(--bakir); border-color: var(--bakir);
}
.form textarea { min-height: 110px; resize: vertical; }
.form button { width: 100%; cursor: pointer; border: none; font-family: inherit; }

.bal-tuzagi { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.uyari {
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    font-weight: 600;
}
.uyari-tamam { background: #E8F3E4; color: #2C5E24; border: 1px solid #BCD9B2; }
.uyari-hata { background: #F9E5E2; color: var(--kirmizi-koyu); border: 1px solid #ECC4BE; }

/* ---- Alt (footer) -------------------------------------------- */

.alt { background: var(--lacivert); color: #B8BECB; margin-top: 4rem; }
.alt a { color: #DFE3EC; text-decoration: none; }
.alt a:hover { color: #fff; text-decoration: underline; }
.alt-ic {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr;
    gap: 2.5rem; padding-block: 3rem;
}
.alt-baslik {
    color: #fff; font-size: .85rem;
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: .9rem;
}
.alt-kol li { margin-bottom: .45rem; font-size: .93rem; }
.alt-kol p { font-size: .93rem; margin-bottom: .8rem; }
.alt-marka .marka-ad-alt { font-size: 1.5rem; color: #E05548; }
.alt-marka .marka-alt { color: #8E96A8; margin-bottom: .9rem; }
.alt .dugme-cerceve { color: #fff; font-size: .88rem; padding: .6rem 1.2rem; }
.alt .dugme-cerceve:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.alt-imza { border-top: 1px solid #333B50; padding-block: 1rem; font-size: .82rem; }

/* ---- Sabit Ara + WhatsApp düğmeleri -------------------------- */

.sabit-ctalar {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 80;
    display: flex; flex-direction: column; gap: .6rem;
}
.sabit-cta {
    display: flex; align-items: center; gap: .6rem;
    color: #fff;
    font-weight: 800; font-size: 1.02rem;
    padding: .9rem 1.4rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .4);
    transition: transform .15s ease, background .15s ease;
}
.sabit-cta:hover { color: #fff; transform: translateY(-2px); }
.tel-sabit { background: var(--kirmizi); animation: nabiz 2.4s ease-in-out infinite; }
.tel-sabit:hover { background: var(--kirmizi-koyu); }
.wa-sabit { background: #24A75C; }
.wa-sabit:hover { background: #1E8F4E; }

@keyframes nabiz {
    0%, 100% { box-shadow: 0 10px 28px -8px rgba(0,0,0,.4), 0 0 0 0 rgba(168, 38, 29, .45); }
    50%      { box-shadow: 0 10px 28px -8px rgba(0,0,0,.4), 0 0 0 12px rgba(168, 38, 29, 0); }
}

/* ---- Hareket azaltma ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Duyarlılık ---------------------------------------------- */

@media (max-width: 960px) {
    .hero-ic { grid-template-columns: 1fr; gap: 2.25rem; }
    .menu-karti { rotate: 0deg; max-width: 26rem; }
    .hizmet-izgara { grid-template-columns: 1fr 1fr; }
    .galeri-izgara { grid-template-columns: 1fr 1fr; }
    .surec-izgara { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }
    .hizmet-yerlesim, .form-yerlesim { grid-template-columns: 1fr; gap: 2rem; }
    .hizmet-yan { position: static; }
    .alt-ic { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    body { font-size: 1rem; }
    .ust-serit-ic { justify-content: center; text-align: center; }
    .ust-adres { display: none; }

    .menu-dugme { display: inline-flex; }
    .menu { display: none; width: 100%; }
    .menu.acik { display: block; }
    .menu > ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: .5rem; }
    .menu a { display: block; padding: .6rem .25rem; }
    .acilir {
        position: static; display: flex; box-shadow: none;
        border: none; border-left: 3px solid var(--cizgi);
        border-radius: 0; padding-left: .75rem; margin-bottom: .5rem;
    }
    .menu-cta { margin-top: .5rem; }
    .menu-cta a { text-align: center; }

    .hero { padding-block: 2.5rem; }
    .hizmet-izgara, .ozellik-izgara, .surec-izgara { grid-template-columns: 1fr; }
    .galeri-izgara { grid-template-columns: 1fr; }
    .form-satir { grid-template-columns: 1fr; }
    .alt-ic { grid-template-columns: 1fr; gap: 2rem; }
    .cta-band-ic { flex-direction: column; align-items: flex-start; }

    /* Mobilde tam genişlik alt bar: Ara + WhatsApp yan yana */
    .sabit-ctalar {
        right: 0; bottom: 0; left: 0;
        flex-direction: row; gap: 0;
    }
    .sabit-cta {
        flex: 1; justify-content: center;
        border-radius: 0;
        padding: 1rem .5rem;
        font-size: 1.05rem;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
    }
    .sabit-cta:hover { transform: none; }
    body { padding-bottom: 3.6rem; }
    .alt-imza { padding-bottom: 1.5rem; }
}