/*
    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: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/archivo-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: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/archivo-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;
}

/*
 * Ornek Kurumsal — 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).
 */

:root {
    --renk-metin: #1a2332;
    --renk-soluk: #5b6b7f;
    /*
        MARKA TURKUAZI - TON KONTRASTLA BELIRLENDI.

        Onceki deger (#52b2a8) uzerine beyaz metin yazilan her yerde
        kaliyordu: dugmeler 2.53:1, baglantilar beyaz zeminde ayni civarda.
        WCAG AA normal metin icin 4.5:1 ister.

        #256f68 ayni turkuaz ailesinde kalir ve beyaz metinle 5.91:1 verir.
        Deger tasarim katmaninin da baslangicidir (PrimaryColor islemi
        `--renk-vurgu` uzerinden calisir).
    */
    --renk-vurgu: #256f68;
    --renk-vurgu-koyu: #171f24;
    --renk-zemin: #ffffff;
    --renk-zemin-acik: #f2f4f4;
    --renk-cizgi: #dde5ed;
    --olcu: 1100px;
    --yuvarlak: 10px;
}

*,
*::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.5em;
}

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

p { margin: 0 0 1em; }

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

/* Klavye ile gezinenler icin gorunur odak (erisilebilirlik, 5.2). */
a:focus-visible,
.dugme:focus-visible {
    outline: 3px solid var(--renk-vurgu);
    outline-offset: 2px;
}

/* Ekran okuyucu ve klavye kullanicilari icin icerige atlama baglantisi. */
.atla {
    position: absolute;
    left: -9999px;
}

.atla:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    background: var(--renk-zemin);
    padding: 0.6rem 1rem;
    border-radius: var(--yuvarlak);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

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

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

/* --- Ust --- */

.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;
}

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

/* --- Vitrin --- */

.vitrin {
    padding: 3.5rem 0;
    background: var(--renk-zemin-acik);
    border-bottom: 1px solid var(--renk-cizgi);
}

/*
 * Vitrin: solda soz, sagda fotograf.
 *
 * Taban tek sutun (mobil once); iki sutuna gecis asagidaki 700px
 * kirilmasinda. Telefonda fotograf metnin ALTINA duser: ilk gorulmesi
 * gereken sey isletmenin adi ve iletisim dugmesidir.
 */
.vitrin-ic {
    display: grid;
    gap: 2rem;
    align-items: center;
}

/*
 * Kirpma YOK: dogal en-boy oraniyla akar.
 *
 * Sayfanin en buyuk ogesi (LCP) budur; `loading="lazy"` verilmez ve
 * `fetchpriority="high"` ile onceliklendirilir.
 */
.vitrin-gorsel {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--yuvarlak);
}

.slogan {
    font-size: 1.2rem;
    color: var(--renk-soluk);
    max-width: 46ch;
}

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

.dugme {
    display: inline-block;
    padding: 0.75rem 1.4rem;
    border-radius: var(--yuvarlak);
    background: var(--renk-vurgu);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

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

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

.dugme-ikincil:hover {
    background: rgba(28, 93, 153, 0.08);
}

/* --- Galeri --- */

/*
 * Taban tek sutun; 700px'te uc sutuna gecer (asagidaki kirilma).
 * Kart izgarasiyla ayni kirilma noktasi kullanildi, boylece iki bolum
 * birlikte daralir.
 */
.galeri {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.galeri figure {
    margin: 0;
}

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

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

/* --- Bolumler --- */

.bolum {
    padding: 3rem 0;
}

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

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

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

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

/* Sihirbazdan cok satirli gelen metnin satir sonlari korunur. */
.metin {
    white-space: pre-line;
}

/* --- Iletisim --- */

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

.iletisim dt {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--renk-soluk);
}

.iletisim dd {
    margin: 0.25rem 0 0;
    font-weight: 600;
}

/* --- Alt --- */

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

.alt p {
    margin: 0;
}

.kucuk {
    font-size: 0.9rem;
    margin-top: 0.35rem;
}

/* --- Genisletmeler --- */

@media (min-width: 700px) {
    h1 { font-size: 2.6rem; }
    h2 { font-size: 1.9rem; }

    .vitrin { padding: 5rem 0; }
    .bolum { padding: 4rem 0; }

    .izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .galeri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vitrin-ic { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .iletisim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .iletisim { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Hareket azaltma tercihi olan ziyaretciye 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(--renk-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 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); 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;
}


@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/manrope-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: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/manrope-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;
}

/* ========================================================================
   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: 'Manrope', 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: 'Archivo', 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;
    }
}

/*
    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(--renk-vurgu) 26%, transparent), transparent 66%),
        radial-gradient(520px 380px at 88% 0%, color-mix(in srgb, var(--renk-vurgu) 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; }