/*
    ============================================================================
    Kuafor Salon — yerlesim ailesi L9
    ============================================================================

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

    ----------------------------------------------------------------------------
    L9 NEDIR
    ----------------------------------------------------------------------------
    Tam genislik vitrin (ortalanmis), numarali islem satirlari, esit
    galeri izgarasi. Kardes tema `guzellik-merkezi` L10'dur: bolunmus
    vitrin + calisma saatleri paneli, hizmet kart izgarasi, galeri
    mozaigi.

    ----------------------------------------------------------------------------
    RENK
    ----------------------------------------------------------------------------
    Kirik siyah + soguk gri + bakir. Kuaforde sik gorulen doygun mor ve
    altin varak bilerek KULLANILMADI: ikisi de tek bir musteri profiline
    (gelin/abiye) isaret eder ve erkek kesimi ya da bakim icin gelen
    ziyaretciyi disarida birakir. Notr bir zemin, salonun kendi
    fotograflari one ciktiginda onlarla yarismaz.
*/
@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: #6b5344;          /* bakir kahve */
    --ana-koyu: #523f34;
    --koyu: #17181a;         /* kirik siyah */
    --zemin: #f7f7f6;        /* soguk acik gri */
    --zemin-2: #ecebe9;
    --vurgu: #c8a07a;        /* 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: #7a5335;
    /*
        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: #e0c3a4;
    --metin: #1b1c1e;
    --metin-2: #5a5c60;
    --cizgi: #dcdbd8;

    --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: 1060px;
    --yumusak: 8px;
}

/* ========================================================================
   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.4vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--ana); }
a:hover { color: var(--ana-koyu); }

/*
    ODAK HALKASI KALDIRILMAZ. Klavyeyle gezen ziyaretci nerede oldugunu
    yalnizca buradan bilir; `outline: none` yazmak onu sayfada kor birakir.
*/
:focus-visible {
    outline: 3px solid var(--ana);
    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: #fdf7ee;
    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); }

/*
   Randevu baglantisi bir EYLEM: menudeki oteki maddeler sayfa icinde
   gezdirirken bu, ziyaretciyi randevu sayfasina goturur. Ayni
   gorunumde birakilsaydi vitrindeki en onemli dugme menude kaybolurdu.

   Renk DOGRUDAN YAZILMAZ, jetondan gelir (CLAUDE.md): tasarim katmani
   temanin rengini degistirdiginde bu dugme de degismeli.
*/
.ust nav a.menu-vurgu {
    background: var(--vurgu);
    color: var(--koyu);
    border-radius: 999px;
    padding-inline: 0.9rem;
}
.ust nav a.menu-vurgu:hover { background: var(--vurgu-acik); color: var(--koyu); }

/* ========================================================================
   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: #fdf7ee;
    text-align: center;
    display: grid;
    place-items: center;
    min-height: min(70vh, 560px);
    padding: 4.5rem 0;
    isolation: isolate;
}

.vitrin-ic { position: relative; z-index: 2; max-width: 46rem; }

/*
    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(44rem 22rem at 50% 8%, rgba(200, 160, 122, 0.24), transparent 64%),
        radial-gradient(56rem 28rem at 50% 100%, rgba(107, 83, 68, 0.5), transparent 62%),
        repeating-linear-gradient(0deg, rgba(247, 247, 246, 0.03) 0 1px, transparent 1px 7px);
}

/*
    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;
    color: var(--vurgu-koyu);
    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: #f2e5d5;
    margin-bottom: 1.75rem;
}

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

.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: #17181a;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}
.dugme:hover { background: #d3ae8b; border-color: #d3ae8b; color: #17181a; }

.dugme-ikincil {
    background: transparent;
    color: #fdf7ee;
    border-color: rgba(253, 247, 238, 0.55);
}
.dugme-ikincil:hover { background: rgba(253, 247, 238, 0.12); color: #fdf7ee; border-color: #fdf7ee; }

/* Acik zeminli bolumlerde ikincil dugme koyu metin ister. */
.bolum:not(.bolum-koyu) .dugme-ikincil { color: var(--ana); border-color: var(--ana); }
.bolum:not(.bolum-koyu) .dugme-ikincil:hover { background: rgba(140, 47, 31, 0.08); color: var(--ana-koyu); }

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

.serit {
    background: var(--zemin-2);
    border-bottom: 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; }

.bolum-koyu {
    background: var(--koyu);
    color: #f2e5d5;
}
.bolum-koyu h2, .bolum-koyu h3 { color: #fdf7ee; }
.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: #d9c7b2; }

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

/*
    NUMARALI ISLEM SATIRLARI.

    Numara DEKORATIFTIR (`aria-hidden`): ekran okuyucuya "bir, Kesim"
    diye okunmasi bir sira ima ederdi, oysa islemlerin sirasi 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.4rem;
    font-weight: 700;
    color: var(--vurgu-koyu);
    line-height: 1.15;
    min-width: 2ch;
}

.sira h3 { margin-bottom: 0.25rem; color: var(--metin); }

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

/* ESIT IZGARA - kardes temadaki mozaikten farkli. */
.galeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0.9rem;
}

.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: #fff;
    color: var(--ana);
    font-weight: 600;
    text-decoration: none;
}
.platformlar a:hover { border-color: var(--ana); background: var(--zemin-2); }
.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: #fff;
    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: #1a100a;
    color: #e0cfba;
    padding: 2rem 0;
    text-align: center;
}
.alt p { margin: 0.15rem 0; }
.alt .kucuk { font-size: 0.9rem; color: #bda88f; }

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

/*
    Islem listesi yazdirilabilir. Koyu zeminler murekkebi yer, gezinme ve
    form kagitta ise yaramaz.
*/
@media print {
    .ust, .atla, .eylemler, .iletisim-form-kap, .baglantilar, .platformlar { display: none; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .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; }
}


/* ========================================================================
   VITRIN MOTIFI VE YUKSELTILMIS BILGI SERIDI

   NEDEN EKLENDI: musteri kapak fotografi yuklemediginde vitrin, uzerinde
   yalnizca baslik duran genis bir renk alanina dusuyordu. Eski temalarda
   (butik-pansiyon, dis-klinigi) o alani bir FOTOGRAF dolduruyor; yeni
   temalarda bilerek stok fotografa dusulmedigi icin alan bos kaliyordu.

   Cozum stok fotograf DEGIL, sektore ait bir cizgi motifi: tema paketine
   ek dosya girmez (satir ici SVG), ag istegi yapmaz, ekran okuyucuya
   hicbir sey soylemez (aria-hidden) ve musteri kendi fotografini
   yukledigi anda isaretlemeden tamamen cikar ({{#YOKSA:KAPAK_GORSELI}}).

   Opaklik dusuk tutuldu: motif zeminde durur, basligin okunurlugunu
   dusurmez. Metin kontrasti motiften ETKILENMEZ cunku motif metnin
   ARKASINDA degil, ayri bir katmanda ve vitrin-ic z-index ile ustte.
   ======================================================================== */

/*
    Motif vitrinin kenarindan TASACAK sekilde kirpilir; taşan parca
    kirpilmezse sayfada YATAY KAYDIRMA olusur (mobilde en cok goze batan
    kusur). Kirpma vitrine ait, seride degil - serit vitrinin uzerine
    biner ve kirpilmamalidir.
*/
.vitrin { overflow: hidden; }

.vitrin-motif {
    position: absolute;
    top: 50%;
    inset-inline-end: -5%;
    width: 30%;
    max-width: 46rem;
    transform: translateY(-50%);
    color: var(--vurgu);
    opacity: 0.11;
    pointer-events: none;
    z-index: 0;
}

.vitrin-motif svg { width: 100%; height: auto; display: block; }

/*
    Dar ekranda motif metnin arkasina denk geliyordu; hem kuculur hem
    daha da soluklasir. Tamamen kaldirilmaz - kaldirilsa telefonda
    vitrin yeniden duz bir renk alanina duserdi.
*/
@media (max-width: 48rem) {
    .vitrin-motif { opacity: 0.08; width: 62%; inset-inline-end: -16%; }
}

/*
    BILGI SERIDI ARTIK VITRININ UZERINE BINEN BIR KART.

    Onceki hali sayfa zeminine oturan duz bir seritti ve vitrin ile
    govde arasinda gorsel bir kopus yaratiyordu. Kart, ikisini birbirine
    baglar; ayni cozum eski temalarda da kullaniliyor.

    Negatif ust bosluk vitrinin ALT DOLGUSUNU yer, icerigini degil:
    vitrin min-height ve 4rem dolguyla tanimli, 2.75rem geri cekmek
    basligi kirpmaz.
*/
.serit {
    background: transparent;
    border-bottom: 0;
    position: relative;
    z-index: 3;
    margin-top: -2.75rem;
}

.serit-ic {
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
    padding: 1.35rem 1.6rem;
    gap: 0.75rem 1.75rem;
}

/*
    Etiketin yanindaki ikon DEKORATIFTIR - yanindaki metin ("Adres",
    "Telefon") bilgiyi zaten tasir, bu yuzden erisilebilirlik agacindan
    gizlenir. Ikon tek basina anlam taşisaydi metin karsiligi sart olurdu.
*/
.serit span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.serit span svg {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

/*
    Baskida ne motif ne golge anlamli; serit de vitrinin uzerine
    binmemeli, kagitta ust uste binen kutu olur.
*/
@media print {
    .vitrin-motif { display: none; }
    .serit { margin-top: 0; }
    .serit-ic { box-shadow: none; border: 0; border-radius: 0; padding: 0.5rem 0; }
}


/*
    YEDEK GALERI - temanin kendi fotograflari.

    Musteri fotograf yuklemediginde cizilir. Musteri karelerinden farkli
    en-boy oraninda: musteri gorselleri 4/3 kadraja KIRPILIR (ne
    yukledigini bilmiyoruz), temanin kendi fotograflari ise 16/9
    uretildigi icin kirpilmadan gosterilir.
*/
.galeri-tema img { aspect-ratio: 16 / 9; }