/*
    ============================================================================
    Butik Pansiyon — yerlesim ailesi L3
    ============================================================================

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

    ----------------------------------------------------------------------------
    NEDEN ARTIK SISTEM FONTU DEGIL
    ----------------------------------------------------------------------------
    Onceki surum `system-ui` yiginiyla ciziliyordu ve gerekce olarak "harici
    font istegi yapilmaz (FR-7.3)" yaziyordu. FR-7.3 boyle bir sey demiyor;
    hiz optimizasyonundan soz ediyor. Kural kendi koydugumuz bir yorumdu ve
    bedeli agirdi: her tema her isletim sisteminde baska bir yazi tipiyle
    ciziyor, tipografi diye bir sey kalmiyordu.

    Font dosyalari temanin ICINE kondu. Kisit korundu - musterinin sitesi
    hicbir ucuncu tarafa istek atmaz - ama tipografi geri geldi.

    ----------------------------------------------------------------------------
    RENK: SEKTORUN KENDI DILI
    ----------------------------------------------------------------------------
    Mavi DEGIL. Mavi, kurumsal yazilim vitrinlerinin varsayilan rengidir ve
    bir Ege konuk evinin anlatmaya calistigi seyle hicbir ilgisi yoktur.
    Zeytin yesili + terrakota + kum: isletmenin bulundugu yerin renkleri.
*/

/* ========================================================================
   1. YAZI TIPLERI
   ======================================================================== */

/*
    Latin ve latin-ext AYRI dosyalardir. Turkce'nin g-breve (U+011F),
    s-cedilla (U+015F) ve buyuk noktali I (U+0130) harfleri latin-ext
    kumesindedir; yalnizca latin yuklenseydi bu harfler yedek fonta duser
    ve metnin ortasinda gorunur bir kalinlik farki olusurdu.

    `font-display: swap`: font gelene kadar metin GORUNUR kalir (FOIT yok).
*/
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/fraunces-600-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: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/fraunces-600-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: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/karla-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: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/karla-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: 'Karla';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/karla-600-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: 'Karla';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/karla-600-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: 'Karla';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/karla-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: 'Karla';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/karla-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;
}

/* ========================================================================
   2. JETONLAR
   ======================================================================== */

/*
    ============================================================================
    DEGISKEN ADLARI BIR SOZLESMEDIR
    ============================================================================

    `--ana`, `--koyu`, `--zemin` ve `--vurgu` adlari SERBEST SECILMEZ. Yapay
    zeka destekli tasarim katmani (App\Services\Design) temanin `:root`
    bloğunu okuyup hangi islemleri yapabilecegini buradan belirler:
    `renk.ana` islemi `--ana` ve `--zemin`i yazar, `--koyu`yu ise ana renkten
    KARARTARAK turetir; `renk.vurgu` ise `--vurgu`yu yazar.

    Bu adlar olmadan islem SESSIZCE hicbir sey yapmaz - musteri "ana rengi
    yesil yap" der, "tamam" cevabini alir ve sitesinde hicbir sey degismez.
    Sessiz basarisizlik, acik bir "bu tasarimda bunu yapamiyorum" mesajindan
    cok daha kotudur (bkz. ThemeProfile).

    Bu temada esleme dogal olarak oturuyor:
      --ana   -> zeytin yesili: ust serit, iletisim blogu, alt bilgi
      --koyu  -> koyu zeytin (ana'dan turetilir)
      --zemin -> kum: acik bolum zemini
      --vurgu -> terrakota: dugmeler ve ust etiketler
*/
:root {
    /* Ege konuk evi paleti: zeytin, terrakota, kum. */
    --ink: #22291f;          /* koyu zeytin-antrasit: baslik ve govde */
    --ana: #45573a;          /* zeytin: koyu bloklarin rengi */
    --koyu: #2c3826;         /* koyu zeytin: serit ve alt bilgi */
    /*
        TERRAKOTA - TON SERBEST SECILMEDI, IKI KISITIN KESISIMI.

        1) Tasarim katmani `renk.vurgu` icin bu rengin KOYU YUZEYDE en az
           3.0 kontrast vermesini sart kosuyor (AccentColor): vurgu rengi
           koyu seritte baglanti vurgusu olarak da kullaniliyor.
        2) Dugmenin ustundeki metnin okunmasi gerekiyor.

        Ikisi BEYAZ METINLE AYNI ANDA SAGLANAMAZ: beyaz metin dolgunun koyu
        olmasini, koyu yuzey kurali ise acik olmasini istiyor - araliklar
        kesismiyor. Cozum metni beyazdan koyu kahveye cevirmek oldu.

        #d2691e ile: koyu yuzeyde 3.40, koyu kahve metinle 4.75.
    */
    --vurgu: #d2691e;
    --vurgu-uzeri: #2a1608;  /* vurgu dolgusu uzerindeki metin */
    --zemin: #f6f1e8;        /* kum: acik bolum zemini */
    --krem: #fffdf9;         /* sicak beyaz: kart zemini */
    --gri: #6d6558;          /* yardimci metin */
    --gri-acik: #8d8477;
    --kenar: #e7ddce;
    --kenar-koyu: rgba(255, 255, 255, .16);

    --kap: 1180px;
    --r: 18px;
    --r-kucuk: 12px;

    /* Golge sicak tonda: notr gri golge kum zemin uzerinde kirli durur. */
    --golge: 0 1px 2px rgba(52, 40, 24, .05), 0 10px 30px rgba(52, 40, 24, .07);
    --golge-yuksek: 0 2px 6px rgba(52, 40, 24, .07), 0 24px 56px rgba(52, 40, 24, .14);
}

/* ========================================================================
   3. TABAN
   ======================================================================== */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--krem);
    color: var(--ink);
    font-family: 'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.015em;
}

/* Baslik olcegi AKISKAN: 375px ile 1440px arasinda kirilma noktasi
   gerektirmeden olceklenir. Alt sinirlar mobilde okunabilirligi,
   ust sinirlar genis ekranda tasmayi belirler. */
h1 { font-size: clamp(2.4rem, 6.4vw, 4.3rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.22rem; letter-spacing: -.01em; }

p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* Odak halkasi KALDIRILMAZ, guzellestirilir: klavyeyle gezen ziyaretci
   nerede oldugunu gormek zorunda. */
:focus-visible {
    outline: 3px solid var(--vurgu);
    outline-offset: 3px;
    border-radius: 4px;
}

.kap { max-width: var(--kap); margin: 0 auto; padding: 0 22px; }
.kap.dar { max-width: 760px; }

.atla {
    position: absolute; left: -9999px;
    background: var(--ink); color: #fff;
    padding: 12px 18px; border-radius: 0 0 var(--r-kucuk) 0;
    font-weight: 600;
}
.atla:focus { left: 0; top: 0; z-index: 60; }

/* Bolum ust etiketi: baslik ile arasinda kisa bir cizgi.
   Sozcugun kendisi kucuk ama harf araligi genis - editoryal ritim. */
/*
    Ust etiket ACIK ZEMINDE ZEYTIN, terrakota degil.

    Terrakota (#d2691e) kum zemin uzerinde 3.23 kontrast veriyor; bu etiket
    12 pikselde ve WCAG'in "buyuk metin" tanimina girmiyor, yani 4.5
    gerekiyor. Zeytin ayni zeminde 6.97 veriyor. Koyu bolumlerde etiket
    kendi tonuna donuyor (asagida `.vitrin` ve `.iletisim-blok`).
*/
.ust-etiket {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: .76rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--ana);
}
.ust-etiket::before {
    content: ''; width: 34px; height: 2px;
    background: currentColor; opacity: .55;
}

/* ========================================================================
   4. DUGMELER
   ======================================================================== */

.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 30px;
    border: 2px solid transparent; border-radius: 999px;
    background: var(--vurgu); color: var(--vurgu-uzeri);
    font-weight: 700; font-size: 1.02rem; text-decoration: none;
    /*
        Golge NOTR bir koyu tondan, vurgu renginin kendisinden DEGIL.
        Tasarim katmani `--vurgu`yu degistirdiginde sabit yazilmis
        turuncu bir golge geride kalir ve dugmenin altinda yanlis renkte
        bir hale birakirdi.
    */
    box-shadow: 0 8px 22px rgba(52, 40, 24, .26);
    transition: transform .18s ease, box-shadow .18s ease;
}

/*
    UZERINE GELME RENGI DEGISTIRMEZ, YUKSEKLIGI DEGISTIRIR.

    Ikinci bir renk degiskeni (`--vurgu-koyu`) tanimlansaydi tasarim
    katmani yalnizca `--vurgu`yu degistirdigi icin uzerine gelme hali eski
    renkte kalirdi. `filter: brightness()` de calismazdi: dolguyu
    koyulastirmak, uzerindeki KOYU metinle kontrasti dusururdu.
*/
.dugme:hover, .dugme:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(52, 40, 24, .34);
}

/* Ikincil: vitrindeki koyu fon uzerinde durur, dolgusu saydam.
   Iki dolu dugme yan yana durdugunda hangisinin asil eylem oldugu
   anlasilmaz. */
.dugme-ikincil {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(6px);
}
.dugme-ikincil:hover, .dugme-ikincil:focus-visible {
    background: rgba(255, 255, 255, .22);
    border-color: #fff;
    box-shadow: none;
}

.dugme svg { width: 19px; height: 19px; flex: none; }

/* ========================================================================
   5. UST SERIT VE MENU
   ======================================================================== */

/*
    UST SERIT VE MENU TEK BLOK HALINDE FOTOGRAFIN UZERINDE.

    Once `.ust` tek basina `position: absolute` idi ve konumlandirilmis bir
    ust ogesi olmadigi icin SAYFANIN tepesine yapisiyordu - yani seridin
    UZERINE biniyordu: marka adi ile telefon numarasi ust uste geliyordu.

    Ikisi birlikte konumlandirildiginda sorun kokunden kalkiyor. Serit artik
    yari saydam: fotografin ustunu tamamen kesmiyor, uzerinde duruyor.
*/
.tepe { position: absolute; inset: 0 0 auto; z-index: 20; }

.serit {
    background: rgba(44, 56, 38, .78);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #e2dcd0;
    font-size: .88rem;
}
.serit-ic {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 26px; padding-block: 10px;
}
.serit-oge { display: inline-flex; align-items: center; gap: 8px; }
.serit-oge svg { width: 15px; height: 15px; opacity: .75; flex: none; }
.serit-tel { text-decoration: none; font-weight: 600; color: #fff; }
.serit-tel:hover { text-decoration: underline; }

/*
    Ust menu VITRININ UZERINDE duruyor (`position: absolute`), altinda degil.

    Vitrin gorseli tam ekran; menu ayri bir serit olarak ustte dursaydi
    gorsel asagi itilir ve ilk ekranda "bir fotograf" degil "bir menu
    cubugu ve altinda fotograf" gorunurdu. Konuk evinin satis noktasi
    fotograftir.
*/
.ust { padding-block: 20px; }
.ust-ic { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

.marka {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: 1.32rem; letter-spacing: -.01em;
    color: #fff; text-decoration: none;
    /* Fotograf uzerinde okunabilirlik: gorselin acik bir bolgesine denk
       gelirse metin kaybolmasin. */
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

.ust nav {
    margin-left: auto;
    display: flex; flex-wrap: wrap; gap: 6px 4px;
}
.ust nav a {
    padding: 9px 15px; border-radius: 999px;
    color: #fff; text-decoration: none;
    font-size: .94rem; font-weight: 600;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
    transition: background .18s ease;
}
.ust nav a:hover, .ust nav a:focus-visible { background: rgba(255, 255, 255, .18); }

/*
   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(--vurgu-uzeri);
    border-radius: 999px;
    padding-inline: 0.9rem;
}
.ust nav a.menu-vurgu:hover { background: var(--koyu); color: var(--vurgu-uzeri); }

/* ========================================================================
   6. VITRIN
   ======================================================================== */

.vitrin {
    position: relative;
    min-height: min(94vh, 860px);
    display: grid; align-items: end;
    /* Ust dolgu, serit + menu yuksekligini kapsar. */
    padding-block: 190px 84px;
    overflow: hidden;
    color: #fff;
}

.vitrin-fon {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/*
    KARARTMA KATMANI GERCEK BIR OGEDIR, `::after` DEGIL.

    Once `.vitrin::after` olarak yazilmisti ve fotograf HIC gorunmuyordu:
    sozde-oge, `display: grid` olan kapsayicinin bir IZGARA OGESI haline
    geliyor ve mutlak konumlandirilmis kardesiyle katman sirasi
    beklenmedik bicimde cozuluyordu - gorsel z-index 0'da, ortu 1'de
    olmasina ragmen ortu fotografi tamamen kapatiyordu.

    Gercek bir <span> ile sorun kendiliginden yok oluyor: boyama sirasi
    DOM sirasidir (gorsel, sonra ortu, sonra icerik) ve hicbir z-index
    gerekmiyor. Katman sirasini z-index yerine isaretleme sirasina
    birakmak, kirilgan olan tarafi bastan kaldiriyor.

    Gradyan UC duraklı: tek duraklı bir siyah ortu fotografi olduruyor.
    Alttan yukari koyulasan gecis metnin durdugu yeri karartir, gorselin
    ust yarisini serbest birakir.
*/
.vitrin-ortu {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            rgba(20, 26, 18, .58) 0%,
            rgba(20, 26, 18, .16) 30%,
            rgba(20, 26, 18, .62) 68%,
            rgba(20, 26, 18, .88) 100%);
}

/*
    `width: 100%` ZORUNLU, sus degil.

    `.vitrin` bir izgara ve `.kap`in `margin: 0 auto`si var; genislik
    verilmezse sutun icerige gore daraliyor ve blok kazara ORTALANIYOR.
    Kotusu su: genislik metnin uzunluguna bagli oluyor - uzun bir isletme
    adi girildiginde butun kahraman yatayda kayiyor. Duzen musterinin
    yazdigi metne gore degismemeli.

    `relative` yeterli: DOM'da ortuden SONRA geldigi icin zaten ustte.
*/
.vitrin .kap { position: relative; width: 100%; }

/*
    METIN GOLGESI - SUS DEGIL ZORUNLULUK.

    Vitrin fotografini MUSTERI YUKLUYOR ve ne yukleyecegini bilemeyiz:
    acik gokyuzu, beyaz bir duvar ya da kar manzarasi da olabilir. Ortu tek
    basina her fotografta yetmez; golge, metnin arkasinda ne olursa olsun
    okunabilir kalmasini garanti eder.
*/
.vitrin .ust-etiket,
.vitrin h1,
.vitrin .slogan { text-shadow: 0 2px 18px rgba(12, 16, 10, .55); }

.vitrin .ust-etiket {
    color: #ffe4c4;
    /* Cizgi de metinle ayni tonda olmali; varsayilan `currentColor`
       zaten bunu saglar ama opaklik dusuruldugunde fotograf uzerinde
       kayboluyordu. */
    text-shadow: 0 2px 14px rgba(12, 16, 10, .7);
}
.vitrin .ust-etiket::before { opacity: .9; }
.vitrin h1 { margin-top: 18px; max-width: 16ch; text-wrap: balance; }
.vitrin .slogan {
    margin-top: 20px; max-width: 46ch;
    font-size: clamp(1.06rem, 1.8vw, 1.32rem);
    color: rgba(255, 255, 255, .93);
}
.vitrin .eylemler {
    margin-top: 34px;
    display: flex; flex-wrap: wrap; gap: 14px;
}

/*
    Vitrinin altina binen BILGI KARTI.

    Konaklamada ziyaretcinin ilk sordugu uc sey: nerede, ne zaman acik,
    nasil ulasirim. Sayfanin dibindeki iletisim bolumune kadar
    kaydirmasini beklemek, aramayacagi anlamina gelir.
*/
.bilgi-serit {
    position: relative; z-index: 3;
    margin: -54px auto 0;
    max-width: calc(var(--kap) - 44px);
    background: var(--krem);
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    box-shadow: var(--golge-yuksek);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}
.bilgi-oge {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 26px 28px;
    text-decoration: none;
}
.bilgi-oge + .bilgi-oge { border-left: 1px solid var(--kenar); }
.bilgi-oge .ikon {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 12px;
    background: #f0e8da; color: var(--ana);
}
.bilgi-oge .ikon svg { width: 20px; height: 20px; }
.bilgi-oge dt {
    font-size: .74rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gri-acik);
}
.bilgi-oge dd { margin: 3px 0 0; font-weight: 600; line-height: 1.45; }
a.bilgi-oge:hover .ikon { background: var(--vurgu); color: #fff; }

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

.bolum { padding-block: clamp(64px, 8vw, 108px); }
.bolum-kum { background: var(--zemin); }
.bolum-basi { max-width: 640px; }
.bolum-basi h2 { margin-top: 16px; text-wrap: balance; }
.bolum-alt { margin-top: 14px; color: var(--gri); font-size: 1.08rem; }

/* --- Odalar ve olanaklar --- */
.maddeler {
    margin-top: 48px;
    display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.madde {
    position: relative;
    background: var(--krem);
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    padding: 30px 28px 32px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.madde:hover {
    transform: translateY(-4px);
    border-color: #d8c9b2;
    box-shadow: var(--golge);
}
/* Rakam BUYUK ve serif: kartlarin arasindaki ritmi o kuruyor.
   Dekoratif oldugu icin erisilebilirlik agacindan gizlenir (aria-hidden). */
.madde .rakam {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.5rem; line-height: 1; font-weight: 600;
    color: var(--vurgu); opacity: .5;
}
.madde h3 { margin-top: 14px; }
.madde p { margin-top: 10px; color: var(--gri); font-size: .99rem; }

/* --- Galeri: ASIMETRIK --- */
/*
    Uc esit kare, uc fotografi da ayni onemde gosterir ve izgara "doldurulmus"
    durur. Solda tam yukseklikte tek kare, sagda ust uste iki kare: goz once
    buyuk olana gider, digerleri onu destekler.
*/
.galeri {
    margin-top: 48px;
    display: grid; gap: 18px;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.galeri figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); }
.galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galeri figure:hover img { transform: scale(1.04); }
.galeri .buyuk { grid-row: span 2; }
.galeri .buyuk img { min-height: 420px; }
.galeri .kucuk img { height: 100%; min-height: 201px; }

.galeri figcaption {
    position: absolute; inset: auto 0 0;
    padding: 34px 20px 16px;
    background: linear-gradient(180deg, transparent, rgba(20, 26, 18, .82));
    color: #fff; font-size: .92rem; font-weight: 600;
}

/* --- Bulundugumuz platformlar --- */
/*
    Kartlar DEGIL, ROZET BICIMINDE baglantilar.

    Platform adlari kisa ("Jolly Tur", "Booking") ve tek satirlik. Kart
    yapilsalardi kartin icindeki bosluk metinden buyuk olur, izgara da
    "doldurulmamis" gorunurdu. Rozet, icerigin gercek agirligina uygun.

    LOGO KULLANILMIYOR - bilerek. Platform logolari o sirketlerin tescilli
    markalaridir; kullanimlari kendi marka kilavuzlarina tabidir ve bir
    tema paketinin icinde dagitilmalari lisans sorunu yaratir. Ustelik
    musteri serbest metin giriyor: hangi logonun gelecegini bilemeyiz.
*/
.platformlar {
    margin: 30px 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 14px;
}
.platformlar a {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 1.02rem;
    padding: 15px 26px;
    border: 1px solid var(--kenar); border-radius: 999px;
    background: var(--krem);
    text-decoration: none; font-weight: 700; font-size: 1.02rem;
    box-shadow: 0 1px 2px rgba(52, 40, 24, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.platformlar a:hover, .platformlar a:focus-visible {
    transform: translateY(-2px);
    border-color: var(--vurgu);
    box-shadow: var(--golge);
}
.platformlar svg { width: 16px; height: 16px; color: var(--vurgu); flex: none; }

/*
    Ekran okuyucu metni. Tema bir kez de olsa buna ihtiyac duyuyor:
    "yeni sekmede acilir" uyarisi gorsel olarak ikonla veriliyor ve ikon
    tek basina bilgi tasimaz.
*/
.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;
}

/* --- Hakkimizda --- */
.hakkinda {
    display: grid; gap: 48px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    align-items: start;
}
.hakkinda .metin { margin-top: 20px; color: var(--gri); font-size: 1.06rem; }

.olculer {
    margin: 0; display: grid; gap: 16px;
    background: var(--zemin);
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    padding: 30px 28px;
}
.olcu + .olcu { border-top: 1px solid var(--kenar); padding-top: 16px; }
.olcu dt {
    font-size: .74rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--gri-acik);
}
.olcu dd {
    margin: 6px 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.9rem; font-weight: 600; line-height: 1;
}
.olcu dd a { text-decoration: none; }
.olcu dd a:hover { color: var(--vurgu); }

/* --- Iletisim: koyu blok --- */
/*
    Sayfanin TEK koyu bolumu ve sonda duruyor: alt bilgiye dogru yumusak
    bir gecis kurar, ayrica iletisim bilgileri kum zemin uzerinde
    kaybolmaz.
*/
.iletisim-blok {
    background: var(--ana);
    color: #f2eee5;
}
.iletisim-blok h2 { color: #fff; }
.iletisim-blok .ust-etiket { color: #e8b98d; }
.iletisim-blok .bolum-alt { color: rgba(242, 238, 229, .82); }

.iletisim {
    margin: 46px 0 0;
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.iletisim > div {
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--kenar-koyu);
    border-radius: var(--r-kucuk);
    padding: 24px 22px;
}
.iletisim dt {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .74rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: #c3d0b6;
}
.iletisim dt svg { width: 15px; height: 15px; }
.iletisim dd { margin: 10px 0 0; font-size: 1.06rem; font-weight: 600; }
.iletisim dd a { text-decoration: none; }
.iletisim dd a:hover { text-decoration: underline; }

.iletisim-cagri { margin-top: 34px; }

/* ========================================================================
   8. ALT BILGI
   ======================================================================== */

.alt {
    background: var(--koyu);
    color: #b9b2a4;
    padding-block: 40px;
    font-size: .93rem;
}
.alt .marka-alt {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.3rem; font-weight: 600; color: #fff;
    text-shadow: none;
}
.alt .kucuk { margin-top: 10px; }

/* ========================================================================
   9. MOBIL ARAMA CUBUGU
   ======================================================================== */

/*
    Konaklamada donusum telefonla olur. Masaustunde vitrindeki dugme ve
    bilgi seridi yeterli; telefonda ziyaretci sayfayi kaydirdikca her
    ikisi de ekrandan cikiyor ve arama numarasi sayfanin dibinde kaliyordu.
    Cubuk YALNIZCA dar ekranda gorunur.
*/
.arama-cubugu { display: none; }

/* ========================================================================
   10. HAREKET
   ======================================================================== */

/*
    HAREKET YALNIZCA ETKILESIMDE: dugme ve kart gecisleri, galeride
    yakinlasma. Kaydirmayla belirme animasyonu BILEREK YOK.

    Boyle bir animasyon icerigi baslangicta gizler ve JavaScript'in onu geri
    getirmesini bekler; betik yarim calisirsa ziyaretci BOS SAYFA gorur. Bu
    tema yuzlerce kucuk isletmenin tek vitrini olacak ve ziyaretcilerinin
    tarayicisini biz secmiyoruz. Ayrinti icin bkz. index.html.

    Buradaki gecislerin hicbiri icerigi gizlemez: en kotu ihtimalle
    animasyon calismaz, icerik yine yerinde durur.
*/
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ========================================================================
   11. DAR EKRAN
   ======================================================================== */

@media (max-width: 900px) {
    .hakkinda { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .bilgi-serit { grid-template-columns: minmax(0, 1fr); }
    .bilgi-oge + .bilgi-oge { border-left: 0; border-top: 1px solid var(--kenar); }
    .galeri { grid-template-columns: minmax(0, 1fr); }
    .galeri .buyuk { grid-row: auto; }
    .galeri .buyuk img, .galeri .kucuk img { min-height: 240px; }
}

@media (max-width: 640px) {
    body { font-size: 16.5px; }

    /* Menu vitrinin uzerinde iki satira dusuyor ve basligi kapatiyordu;
       dar ekranda telefon dugmesi zaten alt cubukta. */
    .ust nav { display: none; }
    .ust { padding-block: 16px; }

    .vitrin { min-height: auto; padding-block: 96px 64px; }
    .bilgi-serit { margin-top: -34px; }

    /* Alt cubugun sayfanin son satirlarini ortmemesi icin bosluk. */
    .alt { padding-bottom: 92px; }

    .arama-cubugu {
        position: fixed; inset: auto 0 0; z-index: 50;
        display: flex; align-items: center; gap: 14px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 253, 249, .96);
        border-top: 1px solid var(--kenar);
        box-shadow: 0 -4px 22px rgba(52, 40, 24, .12);
        backdrop-filter: blur(10px);
    }
    .arama-cubugu .metin { flex: 1; min-width: 0; }
    .arama-cubugu .metin strong { display: block; font-size: .96rem; }
    .arama-cubugu .metin span { font-size: .8rem; color: var(--gri); }
    .arama-cubugu .dugme { flex: none; padding: 13px 24px; }
}

/*
    DOKUNMA HEDEFI - TELEFON VE E-POSTA BAGLANTILARI
    ================================================
    Bu iki baglanti, bu isletmeler icin sitenin ASIL DONUSUM EYLEMIDIR:
    ziyaretci telefona basar. Buna ragmen mobilde 20-23 piksel yuksekligle
    isleniyorlardi - WCAG 2.2 AA'nin 24 piksellik asgarisinin bile altinda,
    Apple HIG / Material'in onerdigi 44 pikselin cok altinda. Iletisim
    kutusundaki bir baglanti, cumle icindeki bir baglanti degildir; "satir
    ici baglanti" istisnasi burada gecerli olmaz.

    KURAL YALNIZCA DOKUNMATIK CIHAZLARDA calisir (`pointer: coarse`):
    masaustu duzeni oldugu gibi kalir, hedef buyutme yalnizca gerektigi
    yerde uygulanir.

    Dolgu yerine `min-height` + `inline-flex`: dolgu komsu hedeflerin
    tiklama alanlarini ust uste bindirebilirdi (telefona basarken e-postaya
    gitmek). Yukseklik verildiginde duzen acilir, alanlar ayrik kalir.

    `.dugme` DISARIDA: dugmelerin kendi yukseklik kurali zaten var.
*/
@media (pointer: coarse) {
    a[href^="tel:"]:not(.dugme),
    a[href^="mailto:"]:not(.dugme) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/*
    MARKA LOGOSU.

    Musteri logo yukleyebiliyordu ama hicbir tema onu basmiyordu; yuklenen
    dosya hicbir yerde gorunmuyordu. Logo yoksa yerinde firma adi metin
    olarak kalir (bkz. index.html'deki VARSA/YOKSA bloklari).

    YUKSEKLIK SABIT, GENISLIK SERBEST: musterinin yukleyecegi logonun en-boy
    orani bilinmiyor. Yukseklik sabitlenip genislik `auto` birakilmazsa dar
    bir logo ezilir, genis bir logo ust bilgiyi tasardi.

    `max-width` ust siniri dar ekranda menuyu kirmamak icin.
*/
.marka-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: min(220px, 46vw);
    object-fit: contain;
}

/* ---------------------------------------------------------------
   Iletisim formu
   ---------------------------------------------------------------
   Sonuc mesajlari JAVASCRIPT'SIZ calisir: adres kutuyu hedefledigi
   zaman `:target` onu gorunur kilar (bkz. index.html aciklamasi).

   Kenarlik rengi bilerek KOYU (#5f6368): girdi kutusunun sinirisi
   metin degil bir arayuz bileseni ve beyaz zeminde en az 3:1
   kontrast ister (WCAG 2.2 1.4.11). Acik gri bir cerceve guzel
   gorunur ama az goren bir ziyaretci kutunun nerede bittigini
   goremez.
   --------------------------------------------------------------- */
.iletisim-form-kap { margin-top: 40px; }

.form-sonuc {
    display: none;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 600;
}

.form-sonuc:target { display: block; }

.form-sonuc-olumlu { background: #e8f5e9; color: #14501a; border: 1px solid #86c78c; }
.form-sonuc-uyari { background: #fff8e1; color: #6b4400; border: 1px solid #e0bc63; }

.iletisim-form { display: grid; gap: 18px; max-width: 560px; }
.iletisim-form h3 { margin: 0; font-size: 1.25rem; }

.form-satir { display: grid; gap: 6px; margin: 0; }
.form-satir label { font-weight: 600; font-size: 0.95rem; }

.form-satir input,
.form-satir textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #5f6368;
    border-radius: 8px;
    font: inherit;
    color: inherit;
    background: #fff;
}

.form-satir textarea { resize: vertical; }

.form-satir input:focus-visible,
.form-satir textarea:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* Tuzak alan: ekran disinda ama DOM'da - bot doldursun diye. */
.form-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/*
    UZUN VE BOLUNEMEYEN KELIME SAYFAYI YANA KAYDIRMASIN.

    Metinlerin cogu MUSTERIDEN gelir: uzun bir firma adi, bir alan adi ya
    da bosluksuz bir baslik, kutusuna sigmazsa butun sayfayi yatayda
    kaydirir - ve bunu ancak telefondan bakan ziyaretci gorur.

    `break-word` (`anywhere` degil): yalnizca TASACAK kelimeyi boler,
    ogenin asgari genislik hesabina karismaz. Izgara sutunlari zaten
    `minmax(0, ...)` ile korunuyor; ikisi birlikte hem sutunun hem metnin
    tasmasini kapatir.
*/
body { overflow-wrap: break-word; }

/* ---------------------------------------------------------------
   KONTRAST DUZELTMESI (WCAG 2.2 AA - 1.4.3)
   ---------------------------------------------------------------
   Olculup esigin altinda kalan metinler. Renkler TONU KORUNARAK
   ayarlandi: acik zeminde siyaha, koyu zeminde beyaza dogru
   olceklendi - ayni renk ailesinde kaldilar.

   DIKKAT: `.ust-etiket` BURAYA GENEL OLARAK YAZILMAZ. Temanin kendi
   tasarimi onu acik zeminde zeytin renginde tutuyor (6.97) ve koyu
   bolumlerde ayrica gecersiz kiliyor. Genel bir kural o dengeyi
   bozuyordu; yalnizca koyu bolumdeki hali duzeltilir.
   --------------------------------------------------------------- */
/*
    Yalnizca KOYU bolumdeki etiket. Acik zemindeki `.ust-etiket` zaten zeytin renginde ve 6.97 veriyor - ona DOKUNULMAZ.
*/
/* .iletisim-blok .ust-etiket: #e8b98d -> #e9bc92   (kontrast 4.39 -> 4.51) */
.iletisim-blok .ust-etiket { color: #e9bc92; }
/* .bilgi-oge dt: #8d8477 -> #7c7469   (kontrast 3.63 -> 4.53) */
.bilgi-oge dt { color: #7c7469; }
/* .olculer dt: #8d8477 -> #746c62   (kontrast 3.28 -> 4.59) */
.olculer dt { color: #746c62; }
/* .iletisim dt: #c3d0b6 -> #d1dbc7   (kontrast 4.02 -> 4.53) */
.iletisim dt { color: #d1dbc7; }