/* ==========================================================================
   Destekler Gıda — Kurumsal Site Tasarım Sistemi
   desteklergida.com

   Tüm sayfalar bu dosyayı kullanır. Sayfa dosyalarına <style> YAZMAYIN;
   yeni bir bileşen gerekiyorsa buraya yeni bir sınıf ekleyin.

   İÇİNDEKİLER
     1.  Değişkenler ve sıfırlama
     2.  Tipografi ve yardımcı sınıflar
     3.  Düzen: kapsayıcı, bölüm, ızgara
     4.  Butonlar
     5.  Üst bar ve menü
     6.  Manşet (hero)
     7.  Rakam şeridi
     8.  Kartlar: kategori, marka, bölge, özellik
     9.  Sayfa başlığı ve kırıntı yolu
     10. İçerik tipografisi
     11. SSS akordiyon
     12. Form ve uyarılar
     13. Çağrı bandı (CTA) ve alt bilgi
     14. Mobil alt eylem çubuğu
     15. Duyarlı (responsive) düzeltmeler
     16. Yazdırma
   ========================================================================== */

/* ==========================================================================
   1. DEĞİŞKENLER VE SIFIRLAMA
   ========================================================================== */

:root {
    /* Marka renkleri — logodan */
    --lacivert:       #2b2a68;
    --lacivert-koyu:  #1b1a45;
    --lacivert-acik:  #3f3d94;
    --yesil:          #17743c;
    --yesil-koyu:     #115c2f;
    --yesil-acik:     #1e9450;

    /* Yüzeyler */
    --zemin:          #ffffff;
    --zemin-yumusak:  #f6f7fb;
    --zemin-koyu:     #10102c;
    --kart:           #ffffff;

    /* Metin */
    --metin:          #15182a;
    --metin-orta:     #4a5068;
    --soluk:          #757c94;
    --kenarlik:       #e6e9f2;
    --kenarlik-koyu:  #d2d7e6;

    /* Vurgu */
    --sari:           #f0b429;
    --kirmizi:        #d93b3b;

    /* Gölgeler */
    --golge-xs:       0 1px 2px rgba(17, 20, 45, .06);
    --golge-sm:       0 2px 6px rgba(17, 20, 45, .06), 0 1px 2px rgba(17, 20, 45, .04);
    --golge:          0 4px 12px rgba(17, 20, 45, .07), 0 1px 3px rgba(17, 20, 45, .05);
    --golge-lg:       0 16px 40px rgba(17, 20, 45, .12), 0 2px 8px rgba(17, 20, 45, .06);
    --golge-marka:    0 10px 30px rgba(43, 42, 104, .22);

    /* Köşeler */
    --r-sm:           8px;
    --r:              14px;
    --r-lg:           22px;
    --r-tam:          999px;

    /* Ölçüler */
    --en:             1200px;
    --en-dar:         820px;
    --bar-yukseklik:  76px;

    --gecis:          .22s cubic-bezier(.4, 0, .2, 1);
}

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

/* hidden özniteliği, display:flex/grid veren sınıfları da bastırsın */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bar-yukseklik) + 16px);
    -webkit-text-size-adjust: 100%;

    /* Mobilde ekran dışında bekleyen yan menü sayfayı yana kaydırmasın.
       "clip" tercih edilir: "hidden"dan farklı olarak yapışkan üst barı bozmaz. */
    overflow-x: hidden;
}
@supports (overflow: clip) {
    html { overflow-x: clip; }
}

body {
    margin: 0;
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--lacivert); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--yesil); }
button { font: inherit; }

/* Klavye ile gezinenler için görünür odak — erişilebilirlik */
:focus-visible {
    outline: 3px solid var(--yesil-acik);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Ekran okuyucuya özel (görsel olarak gizli) */
.gizli-metin {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Klavyeyle gelen "içeriğe atla" bağlantısı */
.atla {
    position: absolute; left: 12px; top: -80px; z-index: 2000;
    background: var(--yesil); color: #fff; padding: 12px 20px;
    border-radius: var(--r-sm); font-weight: 700;
    transition: top var(--gecis);
}
.atla:focus { top: 12px; color: #fff; }

/* ==========================================================================
   2. TİPOGRAFİ
   ========================================================================== */

h1, h2, h3, h4, h5 {
    margin: 0 0 .5em;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--lacivert-koyu);
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .6vw, 1.5rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.ust-etiket {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--yesil);
    margin-bottom: 14px;
}
.ust-etiket::before {
    content: ''; width: 26px; height: 2px;
    background: var(--yesil); border-radius: 2px;
}

.giris-metin {
    font-size: 1.08rem;
    color: var(--metin-orta);
    max-width: 62ch;
}

.bolum-basi        { margin-bottom: 44px; max-width: 760px; }
.bolum-basi.ortali { margin-left: auto; margin-right: auto; text-align: center; }
.bolum-basi.ortali .ust-etiket::before { display: none; }
.bolum-basi.ortali .giris-metin { margin-left: auto; margin-right: auto; }

.soluk-yazi { color: var(--soluk); font-size: .92rem; }
.vurgu      { color: var(--yesil); }

/* Rozet */
.rozet {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--r-tam);
    background: rgba(43, 42, 104, .07);
    color: var(--lacivert);
    font-size: .76rem; font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.rozet.yesil { background: rgba(23, 116, 60, .1);  color: var(--yesil); }
.rozet.sari  { background: rgba(240, 180, 41, .16); color: #8a6100; }
.rozet.acik  { background: rgba(255, 255, 255, .16); color: #fff; }

/* ==========================================================================
   3. DÜZEN
   ========================================================================== */

.kapsayici {
    width: 100%;
    max-width: var(--en);
    margin: 0 auto;
    padding: 0 20px;
}
.kapsayici.dar { max-width: var(--en-dar); }

.bolum          { padding: 84px 0; }
.bolum.ince     { padding: 56px 0; }
.bolum.yumusak  { background: var(--zemin-yumusak); }
.bolum.cizgili  { border-top: 1px solid var(--kenarlik); }

/* Koyu bölüm — lacivert zemin, açık metin */
.bolum.koyu {
    background: linear-gradient(160deg, var(--lacivert) 0%, var(--zemin-koyu) 100%);
    color: rgba(255, 255, 255, .82);
}
.bolum.koyu h1, .bolum.koyu h2, .bolum.koyu h3 { color: #fff; }
.bolum.koyu .giris-metin { color: rgba(255, 255, 255, .78); }
.bolum.koyu .ust-etiket  { color: #6fe09b; }
.bolum.koyu .ust-etiket::before { background: #6fe09b; }

/* Izgaralar */
.izgara       { display: grid; gap: 22px; }
.izgara-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.izgara-oto   { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.izgara-dar   { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }

/* Yan yana metin + görsel */
.ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

/* ==========================================================================
   4. BUTONLAR
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border: 1.5px solid transparent;
    border-radius: var(--r-tam);
    font-size: .97rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--gecis), box-shadow var(--gecis),
                background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.btn:active { transform: translateY(1px); }

.btn-yesil {
    background: var(--yesil);
    color: #fff;
    box-shadow: 0 6px 18px rgba(23, 116, 60, .3);
}
.btn-yesil:hover {
    background: var(--yesil-koyu); color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(23, 116, 60, .36);
}

.btn-lacivert {
    background: var(--lacivert);
    color: #fff;
    box-shadow: var(--golge-marka);
}
.btn-lacivert:hover {
    background: var(--lacivert-koyu); color: #fff;
    transform: translateY(-2px);
}

.btn-cerceve {
    background: transparent;
    color: var(--lacivert);
    border-color: var(--kenarlik-koyu);
}
.btn-cerceve:hover {
    border-color: var(--lacivert);
    background: rgba(43, 42, 104, .04);
    color: var(--lacivert);
}

/* Koyu zemin üzerinde çerçeveli buton */
.btn-beyaz-cerceve {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border-color: rgba(255, 255, 255, .34);
    backdrop-filter: blur(4px);
}
.btn-beyaz-cerceve:hover {
    background: #fff; color: var(--lacivert);
    border-color: #fff; transform: translateY(-2px);
}

.btn-beyaz {
    background: #fff; color: var(--lacivert);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.btn-beyaz:hover { background: #fff; color: var(--yesil); transform: translateY(-2px); }

.btn-kucuk { padding: 9px 18px; font-size: .87rem; }
.btn-buyuk { padding: 17px 34px; font-size: 1.05rem; }
.btn-blok  { display: flex; width: 100%; }

.btn-grup { display: flex; flex-wrap: wrap; gap: 14px; }

/* Metin bağlantısı — "Tümünü gör →" */
.ok-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: .95rem; color: var(--yesil);
}
.ok-link::after { content: '→'; transition: transform var(--gecis); }
.ok-link:hover::after { transform: translateX(4px); }

/* ==========================================================================
   5. ÜST BAR VE MENÜ
   ========================================================================== */

/* İnce bilgi şeridi */
.ince-bar {
    background: var(--lacivert-koyu);
    color: rgba(255, 255, 255, .78);
    font-size: .84rem;
}
.ince-bar .kapsayici {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; min-height: 40px; flex-wrap: wrap;
}
.ince-bar a { color: rgba(255, 255, 255, .88); font-weight: 600; }
.ince-bar a:hover { color: #fff; }
.ince-bar-sag { display: flex; align-items: center; gap: 20px; }
.ince-bar-oge { display: inline-flex; align-items: center; gap: 7px; }

/* Ana menü */
.ust {
    position: sticky; top: 0; z-index: 900;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--kenarlik);
    transition: box-shadow var(--gecis);
}
.ust.kaydi { box-shadow: var(--golge); }

.ust .kapsayici {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; min-height: var(--bar-yukseklik);
}

.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo img { height: 46px; width: auto; }
.logo-yazi { display: flex; flex-direction: column; line-height: 1.1; }
.logo-yazi b { font-size: 1.06rem; font-weight: 800; color: var(--lacivert); letter-spacing: -.02em; }
.logo-yazi span { font-size: .68rem; color: var(--soluk); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.menu { display: flex; align-items: center; gap: 4px; }

.menu > li { position: relative; list-style: none; }
.menu, .menu ul { margin: 0; padding: 0; list-style: none; }

.menu > li > a {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 13px;
    border-radius: var(--r-sm);
    font-size: .95rem; font-weight: 700;
    color: var(--metin);
    white-space: nowrap;   /* "Hizmet Bölgeleri" iki satıra kırılmasın */
}

/* Dar masaüstlerinde menü sığsın diye kademeli daraltma */
@media (max-width: 1320px) {
    .menu > li > a       { padding: 10px 10px; font-size: .9rem; }
    .ust-islem .btn      { padding: 11px 16px; font-size: .88rem; }
    .logo img            { height: 40px; }
}
@media (max-width: 1140px) {
    .logo-yazi           { display: none; }
    .ust-islem .btn span { display: none; }
}
.menu > li > a:hover,
.menu > li.acik > a { background: rgba(43, 42, 104, .06); color: var(--lacivert); }
.menu > li.aktif > a { color: var(--yesil); }
.menu > li.aktif > a::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px;
    height: 2px; background: var(--yesil); border-radius: 2px;
}

/* Açılır alt menü */
.menu .ok { font-size: .6rem; opacity: .55; transition: transform var(--gecis); }
.menu > li.acik .ok { transform: rotate(180deg); }

.alt-menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 254px;
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
    box-shadow: var(--golge-lg);
    padding: 8px;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.menu > li:hover > .alt-menu,
.menu > li.acik > .alt-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.alt-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--r-sm);
    font-size: .92rem; font-weight: 600; color: var(--metin);
}
.alt-menu a:hover { background: var(--zemin-yumusak); color: var(--lacivert); }
.alt-menu .ikon { font-size: 1.05rem; width: 22px; text-align: center; }

/* Açılır menünün başındaki "Tüm …" bağlantısı — sayfanın kendisine gider,
   diğer maddelerden ayrılsın diye buton gibi vurgulanır. */
.alt-menu .alt-tumu {
    background: rgba(23, 116, 60, .09);
    color: var(--yesil);
    font-weight: 800;
    margin-bottom: 6px;
}
.alt-menu .alt-tumu:hover { background: var(--yesil); color: #fff; }
.alt-menu li:has(.alt-tumu) { border-bottom: 1px solid var(--kenarlik); padding-bottom: 6px; margin-bottom: 4px; }

.ust-islem { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Hamburger */
.hamburger {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-sm);
    background: #fff;
    cursor: pointer;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
}
.hamburger span {
    display: block; width: 20px; height: 2px;
    background: var(--lacivert); border-radius: 2px;
    transition: transform var(--gecis), opacity var(--gecis);
}
body.menu-acik .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-acik .hamburger span:nth-child(2) { opacity: 0; }
body.menu-acik .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.perde {
    position: fixed; inset: 0;
    background: rgba(16, 16, 44, .5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--gecis), visibility var(--gecis);
    z-index: 890;
}
body.menu-acik .perde { opacity: 1; visibility: visible; }

/* ==========================================================================
   6. MANŞET (HERO)
   ========================================================================== */

.mansat {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--lacivert) 0%, #232252 48%, var(--zemin-koyu) 100%);
    color: rgba(255, 255, 255, .84);
    padding: 92px 0 96px;
}

/* Arka plan dokusu — ince ızgara + yeşil ışık */
.mansat::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 20%, transparent 78%);
}
.mansat::after {
    content: '';
    position: absolute;
    top: -180px; right: -140px;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(30, 148, 80, .42) 0%, transparent 66%);
    filter: blur(20px);
    pointer-events: none;
}
.mansat > .kapsayici { position: relative; z-index: 2; }

.mansat h1 { color: #fff; margin-bottom: 20px; }
.mansat h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #6fe09b, #9df3bd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mansat-metin {
    font-size: 1.12rem;
    color: rgba(255, 255, 255, .8);
    max-width: 58ch;
    margin-bottom: 30px;
}

.mansat-izgara {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: center;
}

/* Manşet sağındaki cam kart */
.cam-kart {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-lg);
    padding: 28px;
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.cam-kart h3 { color: #fff; font-size: 1.12rem; margin-bottom: 18px; }

.cam-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cam-liste li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: .95rem; color: rgba(255, 255, 255, .86);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cam-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.cam-liste .tik {
    flex-shrink: 0;
    width: 24px; height: 24px; margin-top: 1px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(111, 224, 155, .18);
    color: #6fe09b;
    font-size: .74rem; font-weight: 900;
}
.cam-liste b { color: #fff; display: block; font-size: .96rem; }
.cam-liste small { color: rgba(255, 255, 255, .62); font-size: .84rem; }

/* Güven satırı — manşetin altındaki küçük etiketler */
.guven-satir {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    margin-top: 30px; padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    font-size: .9rem; color: rgba(255, 255, 255, .72);
}
.guven-satir span { display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   7. RAKAM ŞERİDİ
   ========================================================================== */

.rakam-serit {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--kenarlik);
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--golge);
}
.rakam-kutu {
    background: #fff;
    padding: 30px 22px;
    text-align: center;
}
.rakam-kutu b {
    display: block;
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 800;
    color: var(--lacivert);
    letter-spacing: -.03em;
    line-height: 1.1;
}
.rakam-kutu span {
    display: block; margin-top: 6px;
    font-size: .88rem; font-weight: 600; color: var(--soluk);
}

/* Manşetin üstüne taşan konum */
.rakam-tasan { margin-top: -54px; position: relative; z-index: 5; }

/* ==========================================================================
   8. KARTLAR
   ========================================================================== */

/* --- Kategori kartı --- */
.kategori-kart {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-lg);
    padding: 30px 26px 26px;
    overflow: hidden;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.kategori-kart::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--yesil), var(--yesil-acik));
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.kategori-kart:hover {
    transform: translateY(-5px);
    box-shadow: var(--golge-lg);
    border-color: transparent;
}
.kategori-kart:hover::before { transform: scaleX(1); }

.kategori-ikon {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: linear-gradient(140deg, rgba(43, 42, 104, .1), rgba(23, 116, 60, .1));
    font-size: 1.7rem;
    margin-bottom: 18px;
}
.kategori-kart h3 { margin-bottom: 8px; }
.kategori-kart p { color: var(--metin-orta); font-size: .95rem; margin-bottom: 18px; }
.kategori-kart .ok-link { margin-top: auto; }

/* Kart içindeki küçük marka isimleri */
.mini-markalar {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 18px;
}
.mini-markalar span {
    font-size: .76rem; font-weight: 700;
    padding: 3px 9px; border-radius: var(--r-sm);
    background: var(--zemin-yumusak);
    color: var(--metin-orta);
    border: 1px solid var(--kenarlik);
}

/* --- Marka kartı (logolu ızgara) --- */
.marka-kart {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    min-height: 118px;
    padding: 20px 14px;
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
    text-align: center;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.marka-kart:hover {
    transform: translateY(-3px);
    border-color: var(--lacivert-acik);
    box-shadow: var(--golge);
}
/* Logolar farklı boyutlarda geliyor (kimi 32px favicon, kimi geniş yazı-logosu).
   Sabit yükseklikli kutu + object-fit sayesinde hepsi aynı ölçekte görünür:
   küçükler büyütülür, büyükler küçültülür, oranları bozulmaz. */
.marka-kart img {
    width: 100%;
    height: 44px;
    object-fit: contain;
    object-position: center;
}

/* Marka sayfasındaki büyük logo çerçevesi.
   Logolar her orandan geliyor (kare favicon, uzun yazı-logosu, dikey amblem);
   sabit yükseklikte beyaz bir kutu + object-fit hepsini düzgün yerleştirir. */
.marka-logo-cerceve {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
    box-shadow: var(--golge-xs);
}
.marka-logo-cerceve img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Logo yoksa: markanın baş harfleri */
.marka-harf {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--lacivert), var(--lacivert-acik));
    color: #fff;
    font-weight: 800; font-size: 1.05rem;
    letter-spacing: -.02em;
}
.marka-kart b { font-size: .93rem; font-weight: 700; color: var(--metin); line-height: 1.25; }
.marka-kart small { font-size: .74rem; color: var(--soluk); }

/* --- Bayilik kartı (bayiliklerimiz sayfası) --- */
.bayilik-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 30px 20px 24px;
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.bayilik-kart::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--yesil), var(--yesil-acik));
}
.bayilik-kart:hover {
    transform: translateY(-5px);
    box-shadow: var(--golge-lg);
    border-color: transparent;
}

.bayilik-rozet {
    align-self: center;
    padding: 4px 12px;
    border-radius: var(--r-tam);
    background: rgba(23, 116, 60, .1);
    color: var(--yesil);
    font-size: .7rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
}

/* Logolar farklı oranlarda; ortak kutuda ortalanır */
.bayilik-logo {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 72px;
    margin: 6px 0 2px;
}
.bayilik-logo img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
}

.bayilik-ad   { font-size: 1.12rem; font-weight: 800; color: var(--lacivert-koyu); letter-spacing: -.02em; }
.bayilik-grup { font-size: .82rem; color: var(--soluk); font-weight: 600; }
.bayilik-kart .ok-link { margin-top: 6px; font-size: .88rem; }

/* --- Bölge (ilçe) kartı --- */
.bolge-kart {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
    font-weight: 700; color: var(--metin);
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.bolge-kart:hover {
    transform: translateY(-3px);
    border-color: var(--yesil);
    box-shadow: 0 8px 22px rgba(23, 116, 60, .13);
    color: var(--lacivert);
}
.bolge-kart .pin {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(23, 116, 60, .1);
    font-size: 1rem;
}
.bolge-kart span { display: block; font-size: .74rem; font-weight: 600; color: var(--soluk); }

/* Koyu bölüm içindeki bölge kartı */
.bolum.koyu .bolge-kart {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
}
.bolum.koyu .bolge-kart:hover { background: rgba(255, 255, 255, .12); border-color: #6fe09b; color: #fff; }
.bolum.koyu .bolge-kart .pin { background: rgba(111, 224, 155, .18); }
.bolum.koyu .bolge-kart span { color: rgba(255, 255, 255, .6); }

/* --- Özellik kartı (neden biz) --- */
.ozellik {
    display: flex; gap: 16px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
    transition: box-shadow var(--gecis), transform var(--gecis);
}
.ozellik:hover { box-shadow: var(--golge); transform: translateY(-3px); }
/* İkon üstte, metin altta — dar ızgaralarda kullanılır */
.ozellik.dikey { flex-direction: column; }
.ozellik .ikon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(23, 116, 60, .1);
    font-size: 1.3rem;
}
.ozellik h3 { font-size: 1.04rem; margin-bottom: 5px; }
.ozellik p  { font-size: .93rem; color: var(--metin-orta); margin: 0; }

/* --- Adım kartı (nasıl çalışır) --- */
.adim {
    position: relative;
    padding: 28px 24px 24px;
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
}
.adim .no {
    position: absolute; top: -16px; left: 24px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--yesil); color: #fff;
    font-weight: 800; font-size: .92rem;
    box-shadow: 0 4px 12px rgba(23, 116, 60, .35);
}
.adim h3 { font-size: 1.02rem; margin: 8px 0 6px; }
.adim p  { font-size: .93rem; color: var(--metin-orta); margin: 0; }

/* --- Bilgi kutusu --- */
.bilgi-kutu {
    display: flex; gap: 14px;
    padding: 20px 22px;
    background: var(--zemin-yumusak);
    border: 1px solid var(--kenarlik);
    border-left: 4px solid var(--yesil);
    border-radius: var(--r-sm);
    font-size: .95rem;
    color: var(--metin-orta);
}
.bilgi-kutu .ikon { font-size: 1.2rem; flex-shrink: 0; }
.bilgi-kutu b { color: var(--metin); }

/* ==========================================================================
   9. SAYFA BAŞLIĞI VE KIRINTI YOLU
   ========================================================================== */

.sayfa-basi {
    position: relative;
    background: linear-gradient(150deg, var(--lacivert) 0%, var(--zemin-koyu) 100%);
    color: rgba(255, 255, 255, .8);
    padding: 52px 0 58px;
    overflow: hidden;
}
.sayfa-basi::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 100% at 20% 0%, #000 10%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 20% 0%, #000 10%, transparent 76%);
}
.sayfa-basi > .kapsayici { position: relative; z-index: 2; }
.sayfa-basi h1 { color: #fff; margin-bottom: 12px; }
.sayfa-basi p  { color: rgba(255, 255, 255, .76); max-width: 68ch; margin: 0; }

/* Kırıntı yolu */
.kirinti {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    margin-bottom: 18px;
    font-size: .84rem;
    color: rgba(255, 255, 255, .58);
}
.kirinti a { color: rgba(255, 255, 255, .78); }
.kirinti a:hover { color: #6fe09b; }
.kirinti .ayrac { opacity: .45; }
.kirinti [aria-current] { color: #fff; font-weight: 600; }

/* ==========================================================================
   10. İÇERİK TİPOGRAFİSİ (panelden girilen HTML metinler)
   ========================================================================== */

.icerik-metin { font-size: 1.02rem; color: var(--metin-orta); }
.icerik-metin h2 {
    font-size: 1.5rem; margin: 2em 0 .6em;
    padding-bottom: .4em; border-bottom: 1px solid var(--kenarlik);
}
.icerik-metin h2:first-child { margin-top: 0; }
.icerik-metin h3 { font-size: 1.2rem; margin: 1.6em 0 .5em; }
.icerik-metin p  { margin: 0 0 1.15em; }
.icerik-metin strong { color: var(--metin); font-weight: 700; }
/* Metin içi bağlantılar altı çizili olur — ama buton görünümlüler hariç */
.icerik-metin a:not(.btn):not(.ok-link) {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.icerik-metin ul, .icerik-metin ol { margin: 0 0 1.3em; padding-left: 0; }
.icerik-metin ul { list-style: none; }
.icerik-metin ul li {
    position: relative; padding-left: 28px; margin-bottom: .6em;
}
.icerik-metin ul li::before {
    content: '';
    position: absolute; left: 6px; top: .62em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--yesil);
}
.icerik-metin ol { padding-left: 22px; }
.icerik-metin ol li { margin-bottom: .6em; }

.icerik-metin blockquote {
    margin: 1.6em 0; padding: 18px 24px;
    border-left: 4px solid var(--yesil);
    background: var(--zemin-yumusak);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-style: italic;
}
.icerik-metin table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.icerik-metin th, .icerik-metin td { padding: 11px 14px; border: 1px solid var(--kenarlik); text-align: left; }
.icerik-metin th { background: var(--zemin-yumusak); font-weight: 700; color: var(--metin); }

/* ==========================================================================
   11. SSS AKORDİYON
   ========================================================================== */

.sss-liste { display: grid; gap: 12px; }

.sss-oge {
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.sss-oge.acik { border-color: var(--yesil); box-shadow: 0 6px 20px rgba(23, 116, 60, .1); }

.sss-soru {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    width: 100%;
    padding: 20px 24px;
    background: none; border: 0;
    text-align: left; cursor: pointer;
    font-size: 1.02rem; font-weight: 700; color: var(--lacivert-koyu);
}
.sss-soru:hover { color: var(--yesil); }
.sss-isaret {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--zemin-yumusak);
    color: var(--yesil);
    font-size: 1.05rem; font-weight: 800;
    transition: transform var(--gecis), background var(--gecis);
}
.sss-oge.acik .sss-isaret { transform: rotate(45deg); background: rgba(23, 116, 60, .12); }

.sss-cevap {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1);
}
.sss-oge.acik .sss-cevap { grid-template-rows: 1fr; }
.sss-cevap > div { overflow: hidden; }
.sss-cevap p {
    padding: 0 24px 22px;
    margin: 0;
    color: var(--metin-orta);
    font-size: .98rem;
}

/* ==========================================================================
   12. FORM VE UYARILAR
   ========================================================================== */

.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.alan { display: flex; flex-direction: column; gap: 7px; }
.alan.tam { grid-column: 1 / -1; }

.alan label {
    font-size: .88rem; font-weight: 700; color: var(--metin);
}
.alan label .zorunlu { color: var(--kirmizi); }

.alan input,
.alan select,
.alan textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--kenarlik-koyu);
    border-radius: var(--r-sm);
    background: #fff;
    font-family: inherit;
    font-size: .97rem;
    color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan textarea { min-height: 148px; resize: vertical; }
.alan input:focus,
.alan select:focus,
.alan textarea:focus {
    outline: none;
    border-color: var(--yesil);
    box-shadow: 0 0 0 3px rgba(23, 116, 60, .14);
}
.alan input::placeholder, .alan textarea::placeholder { color: #a6acc0; }
.alan .ipucu { font-size: .8rem; color: var(--soluk); }

/* Bal küpü — botlar doldurur, insanlar görmez */
.bal-kupu {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
}

/* Uyarı kutuları */
.uyari {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 15px 18px;
    border-radius: var(--r-sm);
    font-size: .95rem; font-weight: 600;
    margin-bottom: 22px;
    border: 1px solid transparent;
}
.uyari.basarili { background: #e8f7ee; color: #12622f; border-color: #bfe6cd; }
.uyari.hata     { background: #fdecec; color: #a32020; border-color: #f5c6c6; }
.uyari.bilgi    { background: #eaf0fb; color: #1c3f83; border-color: #c7d6f0; }

/* İletişim bilgi satırı */
.iletisim-liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.iletisim-liste li {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
}
.iletisim-liste .ikon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: rgba(43, 42, 104, .07);
    font-size: 1.15rem;
}
.iletisim-liste b { display: block; font-size: .82rem; color: var(--soluk); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.iletisim-liste a, .iletisim-liste span.deger { font-size: 1.02rem; font-weight: 700; color: var(--metin); }
.iletisim-liste a:hover { color: var(--yesil); }

/* Harita */
.harita {
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
    overflow: hidden;
    line-height: 0;
    box-shadow: var(--golge-sm);
}
.harita iframe { width: 100%; height: 340px; border: 0; }

/* ==========================================================================
   13. ÇAĞRI BANDI (CTA) VE ALT BİLGİ
   ========================================================================== */

.cagri {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--yesil) 0%, #0f5e2f 100%);
    color: rgba(255, 255, 255, .88);
    border-radius: var(--r-lg);
    padding: 48px 44px;
    box-shadow: 0 20px 50px rgba(17, 92, 47, .28);
}
.cagri::after {
    content: '';
    position: absolute; right: -90px; bottom: -120px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255, 255, 255, .13) 0%, transparent 65%);
}
.cagri > * { position: relative; z-index: 2; }
.cagri h2 { color: #fff; margin-bottom: 10px; }
.cagri p  { color: rgba(255, 255, 255, .84); max-width: 58ch; margin-bottom: 26px; }

.cagri-ikili {
    display: flex; align-items: center; justify-content: space-between;
    gap: 36px; flex-wrap: wrap;
}
.cagri-ikili p { margin-bottom: 0; }

/* --- Alt bilgi --- */
.alt {
    background: var(--zemin-koyu);
    color: rgba(255, 255, 255, .62);
    font-size: .93rem;
    padding: 62px 0 0;
}
.alt-izgara {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 46px;
}
.alt h4 {
    color: #fff; font-size: .84rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 18px;
}
.alt a { color: rgba(255, 255, 255, .66); }
.alt a:hover { color: #6fe09b; }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.alt-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.alt-logo img { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.alt-logo b { color: #fff; font-size: 1.08rem; font-weight: 800; }
.alt-tanim { max-width: 40ch; margin-bottom: 20px; line-height: 1.7; }

.sosyal { display: flex; gap: 10px; }
.sosyal a {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 1.05rem;
    transition: background var(--gecis), transform var(--gecis);
}
.sosyal a:hover { background: var(--yesil); transform: translateY(-2px); }

/* Alt bilgideki ilçe bulutu — iç bağlantı ağı, SEO için önemli */
.ilce-bulut {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
/* Arka arkaya gelen bulutlarda tek çizgi görünsün */
.ilce-bulut + .ilce-bulut { border-top: 0; padding-top: 0; }
.ilce-bulut a {
    font-size: .82rem; font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--r-tam);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}
.ilce-bulut a:hover { background: rgba(23, 116, 60, .3); border-color: var(--yesil-acik); color: #fff; }
.ilce-bulut .basi {
    font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .5);
    padding: 5px 4px 5px 0;
    text-transform: uppercase; letter-spacing: .05em;
}

.alt-son {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 22px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .86rem;
    color: rgba(255, 255, 255, .5);
}
.alt-son-link { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ==========================================================================
   12c. OKLU BAĞLANTI LİSTESİ  (bayilik sayfaları, ilgili aramalar)
   ========================================================================== */

.ok-liste { display: grid; gap: 10px; }
.ok-liste li { list-style: none; }
.ok-liste a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--kenarlik);
    border-radius: var(--r);
    background: #fff;
    font-weight: 600; color: var(--lacivert);
    transition: var(--gecis);
}
.ok-liste a::before {
    content: "→";
    color: var(--yesil); font-weight: 800;
    transition: var(--gecis);
}
.ok-liste a:hover {
    border-color: var(--yesil);
    box-shadow: var(--golge-sm);
    transform: translateX(3px);
}
.ok-liste a:hover::before { transform: translateX(2px); }

@media (max-width: 640px) {
    .ok-liste a { padding: 13px 15px; font-size: .92rem; }
}
/* ==========================================================================
   13b. EN ÜSTE ÇIK DÜĞMESİ
   ========================================================================== */

.yukari-cik {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 870;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--lacivert);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--golge-marka);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--gecis), transform var(--gecis), background var(--gecis);
}
.yukari-cik.gorunur { opacity: 1; transform: translateY(0); }
.yukari-cik:hover   { background: var(--yesil); }
.yukari-cik:active  { transform: translateY(1px); }

/* Mobilde alt eylem çubuğunun üstüne çıksın ki üst üste binmesin */
@media (max-width: 992px) {
    .yukari-cik { bottom: 86px; width: 44px; height: 44px; right: 14px; }
}

/* ==========================================================================
   14. MOBİL ALT EYLEM ÇUBUĞU (ara / whatsapp)
   ========================================================================== */

.mobil-eylem {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 880;
    background: #fff;
    border-top: 1px solid var(--kenarlik);
    box-shadow: 0 -6px 22px rgba(17, 20, 45, .1);
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    gap: 9px;
}
.mobil-eylem a {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 10px;
    border-radius: var(--r-tam);
    font-size: .93rem; font-weight: 800;
}
.mobil-eylem .ara { background: var(--lacivert); color: #fff; }
.mobil-eylem .wp  { background: #25d366; color: #fff; }

/* ==========================================================================
   15. DUYARLI DÜZELTMELER
   ========================================================================== */

@media (max-width: 1080px) {
    .mansat-izgara { grid-template-columns: 1fr; gap: 42px; }
    .alt-izgara    { grid-template-columns: 1.4fr 1fr 1fr; }
    .alt-izgara > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 992px) {
    :root { --bar-yukseklik: 66px; }

    .hamburger { display: flex; }

    /* ÖNEMLİ: backdrop-filter, içindeki position:fixed öğeler için yeni bir
       "kapsayıcı blok" yaratır. Bu yüzden mobil menü panelinin yüksekliği
       ekran değil ÜST BARIN yüksekliği kadar oluyordu ve menü maddeleri
       görünmez hale geliyordu. Mobilde bulanıklığı kaldırıp bar'ı düz beyaz
       yapıyoruz — menü böylece tam ekran yüksekliğinde açılıyor. */
    .ust {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
    }

    /* Menü mobilde sağdan açılan panel olur */
    .menu {
        position: fixed; top: 0; right: 0; bottom: 0;
        width: min(330px, 86vw);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        padding: 82px 18px 28px;
        overflow-y: auto;
        box-shadow: -10px 0 40px rgba(17, 20, 45, .16);
        transform: translateX(105%);
        visibility: hidden;                 /* kapalıyken odaklanılamasın ve taşma yapmasın */
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
        z-index: 901;
    }
    body.menu-acik .menu { transform: translateX(0); visibility: visible; }

    .menu > li > a { padding: 14px 12px; font-size: 1rem; border-radius: var(--r-sm); }
    .menu > li.aktif > a::after { display: none; }
    .menu > li.aktif > a { background: rgba(23, 116, 60, .08); }

    .alt-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; border-left: 2px solid var(--kenarlik);
        border-radius: 0; margin: 2px 0 8px 14px; padding: 0 0 0 8px;
        display: none; min-width: 0;
    }
    .menu > li.acik > .alt-menu { display: block; }

    .ust-islem .btn { display: none; }

    .bolum { padding: 62px 0; }
    .mansat { padding: 64px 0 74px; }
    .izgara-3, .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ikili { grid-template-columns: 1fr; gap: 36px; }
    .rakam-serit { grid-template-columns: repeat(2, 1fr); }
    .rakam-tasan { margin-top: -34px; }
    .cagri { padding: 36px 28px; }
    .ince-bar-sag .gizle-mobil { display: none; }

    /* Mobilde alt eylem çubuğu görünür, sayfa altına boşluk bırakılır */
    .mobil-eylem { display: flex; }
    body { padding-bottom: 72px; }
    .alt { padding-bottom: 8px; }

    /* --- Dokunma hedefleri ---
       Parmakla basılan her bağlantı en az 40px yüksekliğinde olmalı;
       metin bağlantıları varsayılan olarak ~22px kalıyor. */
    .alt ul a,
    .alt-son-link a,
    .ince-bar a,
    .ok-link,
    .kategori-kart h3 a,
    .iletisim-liste a,
    .bilgi-kutu a,
    .icerik-metin a:not(.btn) {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* Kırıntı yolu ve bölüm başlığı bağlantıları — biraz daha küçük ama yine rahat */
    .kirinti a,
    h2 > a, h3 > a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }
    .kirinti { gap: 4px 10px; }
    .alt ul { gap: 2px; }
    .alt-son-link { gap: 4px 18px; }
    .ilce-bulut a { padding: 8px 14px; }
    .mini-markalar span,
    .mini-markalar a { padding: 7px 12px; }
}

@media (max-width: 640px) {
    body { font-size: 15.5px; }
    .kapsayici { padding: 0 16px; }
    .bolum { padding: 50px 0; }
    .bolum-basi { margin-bottom: 30px; }

    .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: 1fr; }
    .izgara-dar { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .form-izgara { grid-template-columns: 1fr; }

    .logo img { height: 38px; }
    .logo-yazi span { display: none; }
    .ince-bar { font-size: .8rem; }
    .ince-bar .kapsayici { justify-content: center; }
    .ince-bar-sol { display: none; }

    .btn { padding: 13px 22px; font-size: .93rem; }
    .btn-grup { gap: 10px; }
    .btn-grup .btn { flex: 1 1 100%; }

    .cagri { padding: 30px 22px; }
    .cagri-ikili { flex-direction: column; align-items: flex-start; }
    .alt-izgara { grid-template-columns: 1fr; gap: 32px; }
    .alt-son { flex-direction: column; align-items: flex-start; gap: 10px; }
    .sayfa-basi { padding: 36px 0 42px; }
    .sss-soru { padding: 16px 18px; font-size: .96rem; }
    .sss-cevap p { padding: 0 18px 18px; }
    .harita iframe { height: 260px; }
}

/* Hareketi azalt tercihi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   16. YAZDIRMA
   ========================================================================== */

@media print {
    .ince-bar, .ust, .mobil-eylem, .perde, .cagri, .atla, .alt .ilce-bulut { display: none !important; }
    body { padding: 0; font-size: 12pt; color: #000; }
    .mansat, .sayfa-basi, .bolum.koyu { background: none !important; color: #000 !important; }
    .mansat h1, .sayfa-basi h1, .bolum.koyu h2 { color: #000 !important; }
    a { color: #000; text-decoration: underline; }
    .bolum { padding: 18px 0; }
}