/*
    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: '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;
}

/*
    Oto Galeri — yerlesim ailesi L2 (bolunmus vitrin).

    Sifirdan yazilmistir; ucuncu taraf cerceve, font ya da ikon icermez.
    Sistem font yigini kullanilir: harici font istegi yapilmaz (FR-7.3).
*/

:root {
    --ana: #242a31;
    --koyu: #14181d;
    --vurgu: #d9a441;
    --zemin: #f4f5f6;
    --metin: #171717;
    --kenar: rgba(15, 23, 42, .12);
    --kap: 1080px;
}

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

body {
    margin: 0;
    background: #fff;
    color: var(--metin);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
}

h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }
a { color: inherit; }

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

/* Klavye kullanicisi icin atlama baglantisi: odaklanmadan gorunmez. */
.atla {
    position: absolute; left: -9999px;
    background: var(--koyu); color: #fff; padding: 10px 16px;
}
.atla:focus { left: 12px; top: 12px; z-index: 10; }

.ust { border-bottom: 1px solid var(--kenar); background: #fff; }
.ust-ic { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 16px; }
.marka { font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: -.01em; }
.ust nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; font-size: .95rem; }
.ust nav a { color: #475569; text-decoration: none; }
.ust nav a:hover, .ust nav a:focus { color: var(--ana); text-decoration: underline; }

/* --- Vitrin: iki sutun, dar ekranda alt alta --- */
.vitrin { background: var(--zemin); border-bottom: 1px solid var(--kenar); }
.vitrin-ic {
    display: grid; gap: 32px; padding-block: 64px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 860px) { .vitrin-ic { grid-template-columns: minmax(0, 1fr); padding-block: 44px; } }

.ust-baslik {
    text-transform: uppercase; letter-spacing: .12em;
    font-size: .78rem; font-weight: 700; color: var(--ana);
}
.vitrin h1 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 10px; letter-spacing: -.02em; }
.slogan { margin-top: 14px; font-size: 1.15rem; color: #475569; max-width: 34ch; }

.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dugme {
    display: inline-block; padding: 13px 22px; border-radius: 6px;
    background: var(--ana); color: #fff; font-weight: 600; text-decoration: none;
    border: 2px solid var(--ana);
}
.dugme:hover, .dugme:focus { background: var(--koyu); border-color: var(--koyu); }
.dugme-ikincil { background: transparent; color: var(--ana); }
.dugme-ikincil:hover, .dugme-ikincil:focus { background: var(--ana); color: #fff; }

.rozet { margin-top: 24px; font-size: .9rem; color: #475569; }
.rozet strong { color: var(--koyu); font-size: 1.05rem; }

/* Sag panel: iletisim bilgisi ilk ekranda kalsin. */
.panel { background: var(--koyu); color: #fff; border-radius: 10px; padding: 26px; }
.panel h2 { font-size: 1.1rem; margin-bottom: 16px; }
.panel-satir { margin-top: 10px; font-size: .97rem; }
.panel-satir span { display: block; color: var(--vurgu); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.panel-satir a { color: #fff; }
.panel-adres { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.22); font-size: .92rem; color: #e2e8f0; }

/* --- Bolumler --- */
.bolum { padding-block: 64px; }
.bolum h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.01em; }
.bolum-alt { margin-top: 10px; color: #475569; max-width: 60ch; }
.bolum-koyu { background: var(--koyu); color: #fff; }
.bolum-koyu .metin { color: #e2e8f0; }
.metin { margin-top: 16px; font-size: 1.05rem; }

/* Numarali satirlar - L1'in kart izgarasindan bilincli olarak farkli. */
.siralar { list-style: none; margin: 34px 0 0; padding: 0; }
.sira {
    display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px;
    padding: 22px 0; border-top: 1px solid var(--kenar);
}
.sira:last-child { border-bottom: 1px solid var(--kenar); }
.sira-no {
    font-size: 1.3rem; font-weight: 700; color: var(--ana);
    border: 2px solid var(--vurgu); border-radius: 50%;
    width: 44px; height: 44px; display: grid; place-items: center;
}
.sira h3 { font-size: 1.12rem; }
.sira p { margin-top: 6px; color: #475569; }
.bolum-koyu .sira p { color: #cbd5e1; }

/* --- Gorseller --- */

/*
    Vitrin serit gorseli.

    Bolunmus vitrinin ALTINDA tam genislikte durur, ICINDE degil: sagdaki
    koyu iletisim paneli bir fotografin uzerinde okunmaz hale gelirdi.
    Sayfanin en buyuk ogesi (LCP) budur; `loading="lazy"` YOK ve
    `fetchpriority="high"` VAR - gec yuklenirse ilk boyama dogrudan gecikir.

    Yukseklik `clamp` ile: kaynak 16:9, ama tam genislikte 16:9 birakilsaydi
    genis ekranda tek basina 900px yer kaplar ve sayfanin geri kalanini
    ekranin disina iterdi.
*/
.vitrin-gorsel { line-height: 0; }
.vitrin-gorsel img {
    display: block; width: 100%;
    height: clamp(200px, 30vw, 380px);
    object-fit: cover;
}

/* Hakkimizda: metin solda, gorsel sagda; dar ekranda alt alta. */
.hakkimizda-ic {
    display: grid; gap: 34px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
}
@media (max-width: 860px) { .hakkimizda-ic { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Kirpma YOK: dogal en-boy oraniyla akar, boylece hicbir kadraj bozulmaz. */
.yan-gorsel { display: block; width: 100%; height: auto; border-radius: 10px; }

/*
    Galeri.

    Sabit sutun sayisi yerine `auto-fit` + `minmax`: 300px'in altinda iki
    sutun kalsaydi gorseller okunamayacak kadar kucuk cikardi. Telefonda
    kendiliginden tek sutuna duser.
*/
.galeri {
    display: grid; gap: 18px; margin-top: 32px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.galeri figure { margin: 0; }
.galeri img {
    display: block; width: 100%;
    height: clamp(200px, 26vw, 290px);
    object-fit: cover; border-radius: 10px;
}
.galeri figcaption { margin-top: 10px; font-size: .93rem; color: #475569; }

/* --- Iletisim --- */
.iletisim {
    margin: 30px 0 0; display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.iletisim dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #475569; }
.iletisim dd { margin: 6px 0 0; font-weight: 600; }

.alt { background: var(--koyu); color: #fff; padding-block: 30px; margin-top: 0; }
.alt p { font-weight: 600; }
.alt .kucuk { margin-top: 6px; font-weight: 400; font-size: .88rem; color: #cbd5e1; }

/* Hareketi azalt tercihine saygi. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !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(--vurgu);
}
.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 var(--kenar); border-radius: 999px;
    background: #fff; color: var(--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(--vurgu);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}
.platformlar svg { width: 16px; height: 16px; color: var(--vurgu); 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: 'DM Sans', 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: 'Space Grotesk', 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(--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;
    }
}

/*
    KAHRAMAN ZEMINI: duz renk degil, YAYILIM.

    Onceki hali tek bir pastel dolguydu ve sayfanin en ust bolumu, altindaki
    beyaz bolumlerden yalnizca ton olarak ayriliyordu - derinlik yoktu.

    Iki dusuk yogunluklu radyal yayilim (marka rengi ve vurgu) beyaza baglanan
    bir gecisle birlesiyor. Yogunluk 0.10-0.16: amac renkli bir zemin degil,
    yuzeyin duz olmadigi hissi. `background-color` KORUNUYOR - yayilim
    desteklenmese bile tema kendi zeminiyle acilir.

    Bu tema FOTOGRAFSIZ bir kahraman kullaniyor; fotografli temalara
    uygulanmaz, orada gradyan gorselin ustune binerdi.
*/
.vitrin {
    background-image:
        radial-gradient(620px 420px at 12% -15%, color-mix(in srgb, var(--vurgu) 26%, transparent), transparent 66%),
        radial-gradient(520px 380px at 88% 0%, color-mix(in srgb, var(--ana) 16%, transparent), transparent 70%);
    background-repeat: no-repeat;
}

/*
    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; }

/*
    NOT: `#64748b` (slate-500) yerine `#475569` (slate-600).

    Acik zeminlerde slate-500 metin 4.31:1 ile 4.37:1 arasinda kaliyordu -
    WCAG 2.2 AA'nin 4.5:1 esiginin ALTINDA. Fark kucuk ama gercek:
    parlak isikta telefondan bakan ziyaretci o satirlari okuyamaz.

    Yeni deger temanin KENDI paletinden: ayni dosyada `.slogan` gibi
    yerlerde zaten `#475569` kullaniliyordu; degisiklik yeni bir renk
    getirmiyor, var olani tutarli kiliyor.
*/

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

/* .p-etiket: #d9a441 -> #94702c   (kontrast 2.25 -> 4.55, esik 4.5) */
.p-etiket { color: #94702c; }