/*
    YAZI TIPLERI - TEMANIN ICINDE, harici ag istegi yok.

    Latin ve latin-ext AYRI dosyalardir: Turkce'nin g-breve (U+011F),
    s-cedilla (U+015F) ve 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-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-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: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-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: 'Jost';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jost-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: 'Jost';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jost-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: 'Jost';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jost-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: 'Jost';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jost-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: 'Jost';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/jost-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: 'Jost';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/jost-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;
}

/*
 * Turizm Otel — stil dosyasi.
 *
 * Bu proje icin sifirdan yazildi; ucuncu taraf CSS cercevesi, font ya da ikon
 * icermez. HARICI AG ISTEGI YOKTUR - sistem fontlari kullanilir. Bu hem
 * lisans sorununu ortadan kaldirir hem de sayfayi hizlandirir (FR-7.3).
 *
 * Mobil oncelikli: taban stiller telefon icin, genisletmeler medya
 * sorgularinda (requirements.md 5.2).
 *
 * Turizmde gorsel beklentisi yuksek ama bu tema DOSYA tipli yer tutucu
 * kullanmiyor (bkz. theme.json "files" notu). Gorselin yerini, vitrinde
 * CSS ile uretilen yumusak bir renk gecisi tutuyor - harici dosya
 * gerektirmez ve musteri hicbir sey yuklemese de sayfa bos gorunmez.
 */

:root {
    --renk-metin: #1d2b39;
    --renk-soluk: #5c7183;
    --renk-vurgu: #d9a441;
    /*
        ALTININ METIN HALI - AYRI TON, SUS DEGIL ZORUNLULUK.

        `--renk-vurgu` (#d9a441) bir DOLGU rengidir: dugme zemininde koyu
        metinle 7.50:1 verir. Ama METIN olarak beyaz zeminde yalnizca
        2.25:1 - WCAG AA'nin istedigi 4.5:1'in cok altinda. Baglantilar ve
        etiketler bu tonla yazildiginda okunmuyordu.

        Ayni altin ailesinde kalan koyu ton beyaz zeminde 5.35:1 verir.
        Tek bir degeri koyulastirip her yerde kullanmak, dugmelerin sicak
        altin kimligini kaybettirirdi - bu yuzden ikiye ayrildi.
    */
    --renk-vurgu-metin: #8f6212;
    --renk-vurgu-koyu: #2e1520;
    --renk-sicak: #c9762c;
    --renk-zemin: #ffffff;
    --renk-zemin-acik: #faf4ef;
    --renk-cizgi: #d9e6f0;
    --olcu: 1100px;
    --yuvarlak: 14px;
}

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

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--renk-metin);
    background: var(--renk-zemin);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
    line-height: 1.25;
    margin: 0 0 0.6rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

a { color: var(--renk-vurgu-metin); }

/* Klavye kullanicisi icin gorunur odak halkasi - kaldirilmaz. */
a:focus-visible,
.dugme:focus-visible {
    outline: 3px solid var(--renk-vurgu);
    outline-offset: 3px;
}

.atla {
    position: absolute;
    left: -9999px;
}

.atla:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    padding: 0.6rem 1rem;
    background: var(--renk-vurgu);
    color: #fff;
    border-radius: var(--yuvarlak);
}

.kap {
    width: 100%;
    max-width: var(--olcu);
    margin: 0 auto;
    padding: 0 1.1rem;
}

.kap.dar {
    max-width: 720px;
}

/* --- Ust serit --- */

.ust {
    border-bottom: 1px solid var(--renk-cizgi);
    background: var(--renk-zemin);
}

.ust-ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.marka {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--renk-metin);
    text-decoration: none;
}

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

.ust nav a {
    color: var(--renk-soluk);
    text-decoration: none;
    font-size: 0.95rem;
}

.ust nav a:hover {
    color: var(--renk-metin);
}

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

/* --- Vitrin --- */

/*
 * Vitrin: fotograf zemin uzerinde metin.
 *
 * Burada eskiden gorselin YERINE gecen bir renk gecisi vardi; tema artik
 * kendi kapak fotografiyla geliyor. Renk gecisi yine de duruyor ama artik
 * yedek: gorsel yuklenene kadar (ya da hic yuklenmezse) beyaz metnin
 * altinda okunur bir zemin kalmali.
 *
 * `isolation: isolate` SART: fon gorseli ve karartma katmani negatif
 * z-index tasir, vitrin kendi yigin baglamini kurmazsa ikisi de <body>
 * zemininin arkasina duser ve gorunmez.
 */
/*
    VITRIN, FOTOGRAFIN KENDISIDIR.

    Onceden burasi sabit yukseklikli bir renk gecisiydi ve fotograf uzerine
    cok agir bir karartma biniyordu; sonuc, arkasinda 1600 piksellik bir
    fotograf DURUYORKEN duz lacivert bir blok gibi gorunuyordu. Sattigimiz
    seyin ilk izlenimi tam olarak burasi - fotograf gorunmezse tema
    "sablon" hissi veriyor.

    Yukseklik ekrana gore: fotograf nefes alsin ve baslik alt kenara otursun.
    `overflow: hidden` fotografin `object-fit: cover` tasmasini keser.
*/
.vitrin {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    /*
        YUKSEKLIK TELEFONDA VERILMEZ - bilerek.

        Tema mobil-once yazilmistir; buradaki temel deger telefonun degeri
        olmalidir. Tam ekran bir vitrin, ziyaretcinin oda tiplerini ya da
        fiyati gormek icin bir tam ekran KAYDIRMASI demek. Ekran
        genisledikce (asagida `min-width: 640px`) vitrin ekrana yayilir;
        orada kaydirma maliyeti yok, kazanc ise fotografin etkisi.

        Ayni ayrim butik-pansiyon'da da var ve gerekcesi orada yazili.
    */
    padding-block: clamp(5rem, 18vw, 7rem) clamp(2.5rem, 6vw, 3.5rem);
    overflow: hidden;
    /*
        DUZ YEDEK RENK - dekoratif gecis DEGIL.

        Burasi eskiden opak bir renk gecisiydi ve fotograf onun arkasinda
        kaliyordu. Zeminin tek isi, gorsel hic yuklenmezse metnin okunur
        bir yuzeyde durmasi.
    */
    background: #12314a;
    color: #fff;
    border-bottom: 1px solid var(--renk-cizgi);
}

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

    `.vitrin` bir izgara; genislik verilmezse sutun icerige gore daralir ve
    blok kazara ORTALANIR - yani duzen firma adinin UZUNLUGUNA gore
    degisir. Bu tuzak butik-pansiyon'da bir kez yasandi.
*/
.vitrin > .kap {
    /*
        `position: relative` ZORUNLU: fotograf ve ortu konumlandirilmis
        ogeler, icerik ise akista. Konumlandirilmazsa metin ikisinin de
        ALTINDA kalir ve gorunmez.
    */
    position: relative;
    width: 100%;
}

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

/*
 * Karartma katmani.
 *
 * Fotografin uzerine dogrudan beyaz metin yazmak okunabilirligi kadraja
 * birakir: acik gokyuzune ya da mermer zemine denk gelen satir kaybolur.
 * Sabit bir karartma her kadrajda ayni kontrasti verir.
 *
 * IKI KATMAN, tek duz karartma degil. Bu temada vitrin metni SOLA yaslidir;
 * yatay gecis metnin durdugu tarafi belirgin sekilde karartir, sag taraf ise
 * acik kalir ve fotograf gorunmeye devam eder. Tek bir dikey gecis
 * denendiginde, otel lobisinin parlak mermer zeminine denk gelen satirlar
 * (ozellikle telefonda) okunmuyordu.
 */
.vitrin-ortu {
    position: absolute;
    inset: 0;
    /*
        ORTASI ACIK, IKI UCU KOYU.

        Onceki hali yataydi (solda 0.82) ve metnin durdugu tarafi neredeyse
        tamamen kapatiyordu; fotograf hic okunmuyordu. Yeni gecis KARARTMAYI
        IHTIYAC OLAN YERE koyuyor: ustte menunun arkasi, altta basligin
        arkasi. Ortada fotograf aciliyor.

        Alt uc (0.90) tesadufi degil: baslik ve dugmeler oraya oturuyor ve
        beyaz metin, otel lobisinin parlak mermer zeminine denk geldiginde
        bile okunmali. Daha acik bir deger denendiginde telefonda slogan
        satiri kayboluyordu.
    */
    background: linear-gradient(180deg,
        rgba(8, 24, 36, 0.62) 0%,
        rgba(8, 24, 36, 0.14) 32%,
        rgba(8, 24, 36, 0.58) 70%,
        rgba(8, 24, 36, 0.90) 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.
*/
.vitrin h1,
.vitrin .slogan,
.vitrin .not {
    text-shadow: 0 1px 18px rgba(8, 24, 36, .55);
}

.vitrin h1 {
    color: #fff;
}

.slogan {
    max-width: 42rem;
    font-size: 1.15rem;
    color: #eaf2f8;
}

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

.not {
    margin-top: 1.1rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #d7e6f0;
}

.dugme {
    display: inline-block;
    padding: 0.8rem 1.4rem;
    border-radius: var(--yuvarlak);
    background: var(--renk-vurgu);
    /*
        ALTIN ZEMINDE BEYAZ METIN OKUNMUYOR: 2.25:1.

        Koyu metin ayni zeminde 7.50:1 veriyor. Rengi koyulastirmak yerine
        metni koyulastirmak, temanin sicak altin kimligini koruyor - ayni
        cozum butik-pansiyon'un terrakotasinda da uygulandi.
    */
    color: var(--renk-vurgu-koyu);
    font-weight: 600;
    text-decoration: none;
    /* Dokunma hedefi 44px'in altina inmemeli (Apple HIG / Material). */
    min-height: 44px;
    line-height: 1.6;
}

.dugme:hover {
    background: var(--renk-vurgu-koyu);
}

.dugme-ikincil {
    background: transparent;
    color: var(--renk-vurgu-koyu);
    border: 1px solid var(--renk-cizgi);
}

.dugme-ikincil:hover {
    background: var(--renk-zemin);
}

/*
 * Vitrindeki dugmeler fotograf uzerinde durur.
 *
 * Birincil dugmenin mavi zemini karartilmis bir fotografta yeterince
 * ayrismiyordu; beyaz zemin her kadrajda ayni kontrasti veriyor.
 */
.vitrin .dugme {
    background: #fff;
    color: var(--renk-vurgu-koyu);
}

.vitrin .dugme:hover {
    background: var(--renk-sicak);
    color: #fff;
}

.vitrin .dugme-ikincil {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}

.vitrin .dugme-ikincil:hover {
    background: #fff;
    color: var(--renk-vurgu-koyu);
}

/* --- Galeri --- */

/*
 * Taban tek sutun; kart izgarasiyla ayni kirilma noktalarinda (640px iki,
 * 960px uc sutun) daralir - iki bolum birlikte hareket etsin.
 */
.galeri {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.galeri figure {
    margin: 0;
}

.galeri img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: var(--yuvarlak);
}

.galeri figcaption {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    color: var(--renk-soluk);
}

/* --- Bolumler --- */

.bolum {
    padding: 2.75rem 0;
}

.bolum-acik {
    background: var(--renk-zemin-acik);
}

.izgara {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 1.25rem;
}

.kart {
    padding: 1.35rem;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yuvarlak);
    background: var(--renk-zemin);
}

.kart h3 {
    color: var(--renk-vurgu-koyu);
}

.kart p {
    margin: 0;
    color: var(--renk-soluk);
}

.metin {
    color: var(--renk-soluk);
    white-space: pre-line;
}

.kurulus {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--renk-sicak);
}

/* --- Iletisim --- */

.iletisim {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin: 1.25rem 0 0;
}

.iletisim dt {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--renk-soluk);
}

.iletisim dd {
    margin: 0.15rem 0 0;
    /* Uzun e-posta ve adresler mobilde yatay kaydirma yaratmasin. */
    overflow-wrap: anywhere;
}

/* --- Alt bilgi --- */

.alt {
    padding: 1.75rem 0;
    border-top: 1px solid var(--renk-cizgi);
    color: var(--renk-soluk);
}

.alt p {
    margin: 0;
}

.kucuk {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* --- Genisletmeler --- */

@media (min-width: 640px) {
    /* Genis ekranda vitrin ekrana yayilir - bkz. `.vitrin` yorumu. */
    .vitrin {
        min-height: min(88vh, 800px);
        padding-block: clamp(9rem, 22vw, 13rem) clamp(3rem, 7vw, 5rem);
    }

    h1 { font-size: 2.5rem; }

    .izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .galeri {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .iletisim {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .izgara {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .galeri {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .iletisim {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ========================================================================
   BULUNDUGUMUZ PLATFORMLAR
   ========================================================================

   Kartlar DEGIL, ROZET BICIMINDE baglantilar: platform adlari kisa ve tek
   satirlik. Kart yapilsalardi kartin icindeki bosluk metinden buyuk olur,
   izgara "doldurulmamis" gorunurdu.

   LOGO KULLANILMIYOR - bilerek. Platform logolari o sirketlerin tescilli
   markalaridir ve bir tema paketinin icinde dagitilmalari lisans sorunu
   yaratir. Ustelik musteri serbest metin giriyor: hangi logonun gelecegini
   bilemeyiz.
*/
.p-etiket {
    font-size: .78rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--renk-vurgu-metin);
}
.p-alt { margin-top: 10px; opacity: .78; }

.platformlar {
    margin: 30px 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 12px;
}
.platformlar a {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 1.02rem;
    padding: 15px 26px;
    border: 1px solid rgba(15, 23, 42, .14); border-radius: 999px;
    background: #fff; color: var(--renk-metin);
    text-decoration: none; font-weight: 700;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.platformlar a:hover, .platformlar a:focus-visible {
    transform: translateY(-2px);
    border-color: var(--renk-vurgu);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}
.platformlar svg { width: 16px; height: 16px; color: var(--renk-vurgu-metin); flex: none; }

/* Ekran okuyucu metni: "yeni sekmede acilir" uyarisi gorsel olarak ikonla
   veriliyor ve ikon tek basina bilgi tasimaz. */
.p-gizli {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ========================================================================
   TASARIM YUKSELTMESI v2
   ========================================================================

   Tema kendi YERLESIMINI korur; burada degisen tipografi, dugme dili,
   bosluk ritmi ve derinliktir.

   Onceki surum `system-ui` yiginiyla ciziliyordu ve gerekce olarak
   "harici font istegi yapilmaz (FR-7.3)" yaziliyordu. FR-7.3 boyle bir
   sey SOYLEMIYOR - hiz optimizasyonundan soz ediyor; kural kendi
   koydugumuz bir yorumdu. Bedeli agirdi: tema her isletim sisteminde
   baska bir yazi tipiyle ciziyordu.

   Font dosyalari TEMANIN ICINDE (assets/fonts). Kisit korundu -
   musterinin sitesi hicbir ucuncu tarafa istek atmaz - ama tipografi
   geri geldi.
*/

body {
    font-family: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.018em;
    line-height: 1.1;
    text-wrap: balance;
}

/* Akiskan olcek: 375-1440 arasi kirilma noktasi gerektirmez. */
h1 { font-size: clamp(2.15rem, 5.2vw, 3.5rem); }
.bolum h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.02em; }
h3 { font-size: 1.18rem; }

/* Bolum ritmi: onceki 64px her yerde aynıydı ve sayfa tek duze akiyordu. */
.bolum { padding-block: clamp(58px, 7vw, 92px); }
.bolum-alt { margin-top: 12px; font-size: 1.06rem; max-width: 62ch; }

/* Odak halkasi KALDIRILMAZ, guzellestirilir. */
:focus-visible {
    outline: 3px solid var(--renk-vurgu);
    outline-offset: 3px;
    border-radius: 4px;
}

/*
    DUGMELER: hap bicimli, uzerine gelince YUKSELIR.

    Uzerine gelme rengi degistirmiyor: `--ana` tasarim katmani tarafindan
    degistirilebilir ve ikinci bir renk degiskeni geride kalirdi.
*/
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700; font-size: 1.01rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.dugme:hover, .dugme:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(15, 23, 42, .24);
}
.dugme-ikincil { box-shadow: none; }
.dugme-ikincil:hover, .dugme-ikincil:focus-visible { box-shadow: none; }

/*
    KART DERINLIGI.

    Onceki surumde kartlar yalnizca 1px kenarlikla ayrisiyordu ve sayfa
    "cizgilerle bolunmus bir belge" gibi duruyordu. Golge cok hafif:
    amaci kartlari yuzdurmek degil, zeminden ayirmak.
*/
.madde, .kart, .panel, .olcu, .secenek {
    border-radius: 14px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.madde:hover, .kart:hover, .secenek:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 40px rgba(15, 23, 42, .1);
}

/* Gorsellerin kosesi govdeyle ayni dilde. */
.galeri img, .yan-gorsel, .vitrin img { border-radius: 14px; }

/* Platform rozetleri yukseltilmis dugme diliyle uyumlu. */
.platformlar a { padding: 15px 26px; font-size: 1.02rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/*
    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)
   ---------------------------------------------------------------
   Asagidaki metinler olculdu ve esigin ALTINDA kaldi. Kucuk puntolu
   bir etiketin acik bir vurgu renginde yazilmasi tasarimda hos durur
   ama parlak isikta telefondan bakan ziyaretci onu okuyamaz.

   Renkler TONU KORUNARAK ayarlandi: RGB oranlari siyaha (ya da acik
   zeminde beyaza) dogru olceklendi, yani vurgu rengi ayni renk ailesinde
   kaldi - yalnizca okunur hale geldi. Vurgu rengi dugme, cerceve ve
   buyuk ogelerde DEGISMEDI; degisen yalnizca kucuk metin.
   --------------------------------------------------------------- */

/* .kurulus: #c9762c -> #ad6526   (kontrast 3.44 -> 4.50, esik 4.5) */
.kurulus { color: #ad6526; }