/* =============================================================================
 * SAYFA DUZENI / BOSLUK SISTEMI
 * Tum sayfalarda header -> icerik -> footer arasi ve bolumler arasi bosluklar
 * buradaki degiskenlerle tek yerden yonetilir. (marka-tema.css'ten sonra yuklenir)
 * ========================================================================== */
:root {
    --zn-sayfa-ust: 32px;   /* menu / breadcrumb ile ilk icerik arasi */
    --zn-sayfa-alt: 64px;   /* son icerik ile footer arasi */
    --zn-bolum: 28px;       /* sayfa icindeki bolumler arasi */
    --zn-izgara: 20px;      /* kart izgaralarinda yatay ve dikey aralik */
}
@media (max-width: 991px) {
    :root { --zn-sayfa-ust: 24px; --zn-sayfa-alt: 48px; --zn-bolum: 24px; --zn-izgara: 16px; }
}
@media (max-width: 576px) {
    :root { --zn-sayfa-ust: 20px; --zn-sayfa-alt: 40px; --zn-bolum: 20px; --zn-izgara: 12px; }
}

/* ---- Gorseller: <img width height> nitelikleri yalnizca en-boy oranini bildirsin (CLS onlemi).
        height: auto olmadan tarayici height="1000" niteligini gercek yukseklik olarak uygular ve
        width: 100% verilen gorseller uzar. Sabit yukseklik isteyen kurallar (slider, logo) bunu ezer. ---- */
img { height: auto; }

/* ---- Sayfa iskeleti ---- */
.znYol { margin-bottom: 0 !important; }
.znFooter { margin-top: 0 !important; }
.znSayfaGovde { padding-top: var(--zn-sayfa-ust); padding-bottom: var(--zn-sayfa-alt); }

/* Sayfanin ilk ve son blogunun kendi dis bosluklari sifirlanir; bosluk yalnizca .znSayfaGovde'den gelir */
.znSayfaGovde > :first-child { margin-top: 0 !important; padding-top: 0 !important; }
.znSayfaGovde > div:last-of-type { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Anasayfa slider'i menuye yapisik ve tam genislik; altinda standart bolum boslugu */
.znSayfaGovde > .homeSlider:first-child { margin-top: calc(-1 * var(--zn-sayfa-ust)) !important; margin-bottom: var(--zn-sayfa-ust) !important; }

/* ---- Anasayfa ---- */
.homeKategoriBaslik { margin: 0 0 var(--zn-bolum) !important; }
.homeImg { gap: var(--zn-izgara) !important; margin: 0 !important; }
.homeImg > [class*="col-"] { width: auto; max-width: none; margin: 0; padding: 0; }
.homeImg .hizala { margin: 0 !important; height: 100%; }

/* ---- Liste sayfalari (kategori / arama) ---- */
.znListeSayfa { padding-top: 0; padding-bottom: 0; }
.znListeSayfa > .row { --bs-gutter-x: calc(var(--zn-bolum) + 4px); row-gap: var(--zn-bolum); }
.znYan > :last-child, .znListeAna > :last-child { margin-bottom: 0 !important; }
.znSayfaBaslik { margin: 0 0 var(--zn-bolum) !important; }
.znAltKatlar { margin: 0 0 var(--zn-bolum) !important; }
.znAltKatlar > .row,
.znUrunIzgara { --bs-gutter-x: var(--zn-izgara); --bs-gutter-y: var(--zn-izgara); }
.znListeArac { margin: 0 0 var(--zn-izgara) !important; }
.znSayfalama { margin: var(--zn-bolum) 0 0 !important; }
.znListeBos { margin: 0; }

/* ---- SEO metin bloklari ---- */
.znSeoMetin { margin: calc(var(--zn-bolum) * 1.5) 0 0 !important; }
.znSayfaBaslik .znSayfaOzet { margin-top: 8px; }

/* ---- Urun detay ---- */
.udSayfa { padding-top: 0; padding-bottom: 0; }
.udIzgara { gap: calc(var(--zn-bolum) + 8px); }
.udBolum { margin-top: var(--zn-bolum); }
.udKarusel { margin-top: calc(var(--zn-bolum) * 2) !important; }
.udKaruselSerit { gap: var(--zn-izgara); }
.udSecenekler { gap: calc(var(--zn-izgara) / 2); }

/* ---- Iletisim ---- */
.znIletisim { padding-bottom: 0; }
.znIletisimUst { margin: 0 0 var(--zn-bolum) !important; }
.znIletisimKartlar { margin: 0 0 var(--zn-bolum) !important; gap: var(--zn-izgara); }
.znIletisimGovde { margin: 0 !important; }

/* ---- Sepet / tesekkurler / 404 ---- */
.znSepet { padding-bottom: 0; }
.znSepetBos, .znSepetBasari { margin: 0 auto !important; }
.znSepetBaslik { margin-bottom: var(--zn-bolum); }
.znSepetIzgara { --bs-gutter-x: var(--zn-bolum); --bs-gutter-y: var(--zn-bolum); }
.znSepetKart { margin-top: var(--zn-bolum); }
.znSepetUyari { margin-bottom: var(--zn-bolum); }
.zn404Ust { padding-top: 8px !important; }
.zn404Kategoriler { margin-top: var(--zn-bolum); }

/* =============================================================================
 * ANASAYFA SLIDER (inc/slider.php)
 *   .znSlayt--gorsel : yalnizca gorsel
 *   .znSlayt--yan    : gorsel sol/sag + metin   (.znSlayt--gorsel-sol / -sag)
 *   .znSlayt--zemin  : tam zemin gorsel + metin (.znSlayt--hiza-sol / -orta / -sag)
 * Tum tipler ayni yukseklikte. Asil deger config slider_boyut'tan header-lib.php'de uretilir;
 * asagidaki yalnizca yedek (1920x600).
 * ========================================================================== */
:root { --zn-slayt-h: clamp(300px, 31.25vw, 560px); }
@media (max-width: 767px) { :root { --zn-slayt-h: 340px; } }

.homeSlider .slayt > .znSlayt { display: block; position: relative; overflow: hidden; text-decoration: none; }
.znSlayt, .znSlayt:hover, .znSlayt:focus-visible { color: var(--zn-white) !important; }

/* 1) Sadece gorsel */
.znSlayt--gorsel picture, .znSlayt--gorsel img { display: block; width: 100%; }
.znSlayt--gorsel img { height: var(--zn-slayt-h) !important; object-fit: cover; }
@media (max-width: 767px) {
    /* mobilde gorsel kirpilmadan kendi oraninda (mobil gorsel verilmisse o kullanilir) */
    .znSlayt--gorsel img { height: auto !important; }
}

/* Ortak metin blogu */
.znSlaytIc { position: relative; z-index: 2; display: grid !important; align-items: center; height: 100%; padding-top: 36px; padding-bottom: 52px; /* alttaki noktalar icin pay */ }
.znSlaytYazi { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 540px; }
.znSlaytEtiket { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.znSlaytBaslik { display: block; font-size: clamp(24px, 2.8vw, 38px); font-weight: 600; line-height: 1.18; letter-spacing: -.4px; }
.znSlaytAciklama { display: block; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.65; }
.znSlaytButonlar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.znSlaytButon, .znSlaytButon2 {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 8px;
    font-size: 14.5px; font-weight: 600; text-decoration: none !important;
    transition: background var(--zn-t), border-color var(--zn-t), color var(--zn-t);
}
.znSlaytButon { background: var(--zn-red); color: var(--zn-white) !important; border: 1px solid var(--zn-red); }
.znSlaytButon:hover { background: var(--zn-red-dark); border-color: var(--zn-red-dark); }
.znSlaytButon2 { background: transparent; border: 1px solid currentColor; }
.znSlaytButon .fa { font-size: 13px; transition: transform var(--zn-t); }
.znSlaytButon:hover .fa, .znSlayt:hover > .znSlaytIc .znSlaytButon .fa { transform: translateX(3px); }

/* 2) Gorsel + metin yan yana: duz zemin (gradyan / parlama yok) */
.znSlayt--yan { height: var(--zn-slayt-h); }
.znSlayt--yan .znSlaytIc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
.znSlayt--yan.znSlayt--gorselsiz .znSlaytIc { grid-template-columns: 1fr; }
.znSlayt--yan.znSlayt--gorselsiz .znSlaytYazi { max-width: 720px; }
.znSlaytGorsel { display: block; justify-self: end; width: 100%; max-width: 460px; }
.znSlaytGorsel img {
    display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
    border-radius: 12px;
}
.znSlayt--gorsel-sol .znSlaytIc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.znSlayt--gorsel-sol .znSlaytGorsel { order: -1; justify-self: start; }

/*   'acik' zemin (varsayilan): kirik beyaz, koyu yazi; ana renk yalnizca etiket ve butonda */
.znSlayt--yan.znSlayt--acik { background: #F4F4F2; border-bottom: 1px solid var(--zn-200); }
.znSlayt--yan.znSlayt--acik, .znSlayt--yan.znSlayt--acik:hover { color: var(--zn-900) !important; }
.znSlayt--acik .znSlaytEtiket { color: var(--zn-red-dark); }
.znSlayt--acik .znSlaytBaslik { color: var(--zn-900); }
.znSlayt--acik .znSlaytAciklama { color: var(--zn-700); }
.znSlayt--acik .znSlaytGorsel img { border: 1px solid var(--zn-200); background: var(--zn-white); }
.znSlayt--acik .znSlaytButon2 { color: var(--zn-900) !important; border-color: var(--zn-300); }
.znSlayt--acik .znSlaytButon2:hover { border-color: var(--zn-900); background: var(--zn-white); }

/*   'koyu' zemin: temanin koyu zemin rengi, beyaz yazi, solda ince ana renk cizgisi */
.znSlayt--yan.znSlayt--koyu { background: var(--zn-surface-dark-2); box-shadow: inset 4px 0 0 var(--zn-red); }
.znSlayt--koyu .znSlaytEtiket { color: rgba(255, 255, 255, .7); }
.znSlayt--koyu .znSlaytBaslik { color: var(--zn-white); }
.znSlayt--koyu .znSlaytAciklama { color: rgba(255, 255, 255, .8); }
.znSlayt--koyu .znSlaytButon2 { color: var(--zn-white) !important; border-color: rgba(255, 255, 255, .45); }
.znSlayt--koyu .znSlaytButon2:hover { border-color: var(--zn-white); background: rgba(255, 255, 255, .08); }

/* 3) Tam zemin gorsel + metin: duz, notr koyulastirma (marka renkli gradyan yok) */
.znSlayt--zemin { height: var(--zn-slayt-h); background: var(--zn-surface-dark-2); }
.znSlaytZemin, .znSlaytZemin img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.znSlaytZemin img { object-fit: cover; }
.znSlaytPerde { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(18, 18, 20, .52); }
.znSlayt--zemin .znSlaytEtiket { color: rgba(255, 255, 255, .75); }
.znSlayt--zemin .znSlaytBaslik { color: var(--zn-white); }
.znSlayt--zemin .znSlaytAciklama { color: rgba(255, 255, 255, .88); }
.znSlayt--zemin .znSlaytYazi { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.znSlayt--zemin .znSlaytButon { background: var(--zn-white); border-color: var(--zn-white); color: var(--zn-900) !important; text-shadow: none; }
.znSlayt--zemin .znSlaytButon:hover { background: rgba(255, 255, 255, .88); }
.znSlayt--zemin .znSlaytButon2 { color: var(--zn-white) !important; border-color: rgba(255, 255, 255, .55); text-shadow: none; }
.znSlayt--hiza-sag .znSlaytIc { justify-items: end; }
.znSlayt--hiza-sag .znSlaytYazi { align-items: flex-end; text-align: right; }
.znSlayt--hiza-orta .znSlaytIc { justify-items: center; }
.znSlayt--hiza-orta .znSlaytYazi { align-items: center; text-align: center; }

/* Acik zeminde slider oklari ve noktalari okunakli olsun */
.homeSlider:has(.znSlayt--acik.active) .lSAction > a { filter: invert(1) brightness(.35); }

@media (max-width: 767px) {
    .znSlayt--yan .znSlaytIc, .znSlayt--gorsel-sol .znSlaytIc { grid-template-columns: 1fr; gap: 16px; align-content: center; padding-top: 24px; padding-bottom: 44px; }
    .znSlayt--yan .znSlaytGorsel { order: -1; justify-self: start; max-width: 140px; }
    .znSlayt--yan .znSlaytGorsel img { border-radius: 10px; }
    .znSlaytYazi { gap: 8px; }
    .znSlaytButonlar { gap: 8px; }
    .znSlaytButon, .znSlaytButon2 { height: 42px; padding: 0 16px; font-size: 14px; }
    .znSlayt--zemin .znSlaytIc { align-items: end; }
}

/* ---- Urun karti alt satiri: fiyat ve stok her kartta ayni hizada, tasma/kirilma olmadan ---- */
.znUrunGovde { gap: 6px; }
.znUrunAlt { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; row-gap: 4px; padding-top: 10px; }
.znUrunFiyat { white-space: nowrap; }

/* ---- Slider: mobilde oklar metnin ustune binmesin (kaydirma + noktalar yeterli) ---- */
@media (max-width: 767px) {
    .homeSlider .lSAction { display: none !important; }   /* lightSlider inline display:block verir */
}

/* =============================================================================
 * SEO / GEO icerik bloklari: SSS, teknik ozellik tablosu, kategori ozeti, statik sayfa
 * ========================================================================== */
.znSss { margin: calc(var(--zn-bolum) * 1.5) 0 0; }
.znSss h2 { font-size: var(--zn-fs-lg); font-weight: 650; color: var(--zn-ink); margin: 0 0 var(--zn-sp-3); }
.znSssOge { border: 1px solid var(--zn-200); border-radius: var(--zn-radius-sm); background: var(--zn-white); margin-bottom: 8px; }
.znSssOge summary { cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 600; color: var(--zn-ink); list-style: none; position: relative; }
.znSssOge summary::-webkit-details-marker { display: none; }
.znSssOge summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--zn-500); }
.znSssOge[open] summary::after { content: "−"; }
.znSssOge[open] summary { border-bottom: 1px solid var(--zn-100); }
.znSssCevap { padding: 12px 16px 14px; color: var(--zn-700); font-size: 14px; line-height: 1.65; }
.znSssCevap p { margin: 0; }

.udSss { margin-top: calc(var(--zn-bolum) * 1.5); }
.udSss .znSss { margin-top: 0; }

.udOzellikTablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.udOzellikTablo th, .udOzellikTablo td { padding: 9px 12px; border-bottom: 1px solid var(--zn-100); vertical-align: top; text-align: left; }
.udOzellikTablo th { width: 40%; font-weight: 500; color: var(--zn-500); background: var(--zn-50); }
.udOzellikTablo td { color: var(--zn-ink); font-weight: 500; }
.udOzellikTablo tr:last-child th, .udOzellikTablo tr:last-child td { border-bottom: 0; }
.udOzellikTablo { border: 1px solid var(--zn-200); border-radius: var(--zn-radius-sm); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.udMetaTarih { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--zn-500); }

.znKatOzet { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--zn-700); }
.znKatOzet li { position: relative; }
.znKatOzet li + li::before { content: "·"; position: absolute; left: -11px; color: var(--zn-300); }
.znKatOzet strong { color: var(--zn-ink); font-weight: 600; }
.znKatOzet small { color: var(--zn-500); }

/* Statik sayfa: header ile ayni kapsayici genisliginde (sola hizali); metin sutunun tamamini kullanir.
   Yan panelli sayfada sagda iletisim / saatler / teklif kartlari. */
.znStatik--yan { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--zn-sp-7); align-items: start; }
.znStatikYan { position: sticky; top: 16px; display: flex; flex-direction: column; gap: var(--zn-sp-4); }
.znYanKutu { padding: var(--zn-sp-5); border: 1px solid var(--zn-200); border-radius: var(--zn-radius); background: var(--zn-white); }
.znYanKutu h2 { margin: 0 0 var(--zn-sp-3); font-size: 15px; font-weight: 650; color: var(--zn-ink); }
.znYanKutu p { margin: 0 0 var(--zn-sp-4); font-size: 14px; line-height: 1.6; color: var(--zn-700); }
.znYanIletisim, .znYanSaatler { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.znYanIletisim li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; line-height: 1.5; }
.znYanIletisim li + li { border-top: 1px solid var(--zn-100, #f1f2f3); }
.znYanIletisim .fa { flex: none; width: 16px; text-align: center; color: var(--zn-red); }
.znYanIletisim a { color: var(--zn-700); overflow-wrap: anywhere; }
.znYanIletisim a:hover { color: var(--zn-red); }
.znYanSaatler li { padding: 3px 0; color: var(--zn-700); }
.znYanCta { background: var(--zn-red-soft); border-color: rgba(var(--zn-red-rgb), .18); }
.znYanCtaButon { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--zn-radius-sm); background: var(--zn-red); color: var(--zn-white) !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.znYanCtaButon:hover { background: var(--zn-red-dark); }
@media (max-width: 991px) {
    .znStatik--yan { grid-template-columns: 1fr; gap: var(--zn-sp-6); }
    .znStatikYan { position: static; }
}

/* Statik sayfa galerisi (or. Makine Parkuru): iki kolon, tiklayinca buyur */
.znGaleri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zn-sp-5); margin: var(--zn-sp-5) 0; }
/* Gorsel her zaman hafif buyutulmus durur: kaynak gorsellerin kenarindaki ince cerceve / koselerdeki zemin
   (~%2) kartin disinda kalir. isolation: koseler hover gecisinde de duzgun kirpilir. */
.znGaleriOge { display: block; overflow: hidden; isolation: isolate; border: 1px solid var(--zn-200); border-radius: var(--zn-radius); background: var(--zn-white); text-decoration: none; }
.znGaleriOge img { display: block; width: 100%; height: auto; aspect-ratio: 628 / 440; object-fit: cover; transform: scale(1.04); transition: transform .35s ease; }
.znGaleriOge:hover img { transform: scale(1.08); }
@media (max-width: 575px) { .znGaleri { grid-template-columns: 1fr; gap: var(--zn-sp-4); } }
.znStatikIcerik { font-size: 15.5px; line-height: 1.75; color: var(--zn-700); }
.znStatikIcerik h1 { margin: 0 0 var(--zn-sp-4); font-size: var(--zn-fs-xl); font-weight: 650; letter-spacing: -.3px; color: var(--zn-ink); }
.znStatikIcerik h2 { margin: 1.6em 0 .5em; font-size: var(--zn-fs-lg); font-weight: 650; color: var(--zn-ink); }
.znStatikIcerik p { margin: 0 0 1em; }

/* Tema secici (config tema.secici = true veya yonetici onizlemesi) */
.znTemaSecici { position: fixed; left: 12px; bottom: 12px; z-index: 9999; max-width: calc(100% - 24px); font-size: 13px; color: #fff; }
.znTemaSecici summary { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #1f2022; cursor: pointer; list-style: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); user-select: none; }
.znTemaSecici summary::-webkit-details-marker { display: none; }
.znTemaSecici[open] summary { border-radius: 12px 12px 0 0; box-shadow: none; }
.znTemaSeciciIc { width: 290px; max-width: 100%; padding: 12px 14px 14px; border-radius: 0 12px 12px 12px; background: #1f2022; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.znTemaSeciciIc .baslik { margin: 4px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.znTemaSeciciIc .temalar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; max-height: min(320px, 45vh); overflow-y: auto; padding-right: 2px; }
.znTemaSeciciIc .tema { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; color: #fff !important; text-decoration: none; font-size: 12.5px; line-height: 1.2; }
.znTemaSeciciIc .tema:hover { border-color: rgba(255, 255, 255, .45); }
.znTemaSeciciIc .tema.aktif { border-color: #fff; background: rgba(255, 255, 255, .08); }
.znTemaSeciciIc .renk { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.znTemaSeciciIc .zeminler { display: flex; gap: 6px; margin-bottom: 12px; }
.znTemaSeciciIc .zeminler a { flex: 1; padding: 7px; text-align: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; color: #fff !important; text-decoration: none; }
.znTemaSeciciIc .zeminler a.aktif { border-color: #fff; background: rgba(255, 255, 255, .08); }
.znTemaSeciciIc .alt { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
.znTemaSeciciIc .alt a { color: #fff !important; text-decoration: underline; }
.znTemaSeciciIc .alt small { color: rgba(255, 255, 255, .55); font-size: 11.5px; line-height: 1.4; }

/* Logo: yukseklige gore boyutlanir (config firma.logo_boyut). Eski sabit 190px genislik
   yatay logolari cok kucultuyordu. object-fit: oran bozulmadan max genislige sigdirir. */
.headerTop .siteLogo {
    width: auto;
    height: var(--zn-logo-h, 64px);
    max-width: var(--zn-logo-maxw, 320px);
    object-fit: contain;
    object-position: left center;
}
.znMobLogo img {
    height: var(--zn-logo-h-mob, 44px);
    max-width: min(60vw, var(--zn-logo-maxw, 320px));
    object-fit: contain;
}
@media (min-width: 993px) and (max-width: 1199px) {
    .headerTop .siteLogo { height: var(--zn-logo-h-dar, 52px); }
    /* dar masaustunde e-posta yalnizca ikon: arama kutusuna yer acar */
    .headerActionItem[href^="mailto"] .headerActionText { display: none; }
}

/* XML'de kirmiziurun=1 olan urunler: kart, urun sayfasi ve "diger urunler" basligi kirmizi (config tema.kirmizi_urun_renk) */
/* !important: sfrk.css tum linklere "a { color: ... !important }" veriyor */
.znUrunAd.znUrunAd--kirmizi a, .udBaslik.udBaslik--kirmizi, .udSecenekRenk.udKirmizi { color: var(--zn-kirmizi-urun, #D0101C) !important; }
.znUrun:hover .znUrunAd.znUrunAd--kirmizi a { text-decoration: underline; text-underline-offset: 3px; }

/* Footer imzasi (config imza): normalde siyah-beyaz/soluk, uzerine gelince kendi renkleri */
.znImza { display: inline-flex; align-items: center; line-height: 0; }
.znImza img { display: block; width: auto; max-width: 160px; transition: filter .3s ease, opacity .3s ease; }
.znImza--soluk img { filter: grayscale(1); opacity: .5; }
.znImza--beyaz img { filter: brightness(0) invert(1); opacity: .55; }
.znImza:hover img, .znImza:focus-visible img { filter: none; opacity: 1; }

/* Footer alt satiri: imza en saga yaslanir. Sag alttaki sabit WhatsApp butonu ekranin sag kenarindan
   ~84px yer kaplar; (100vw - 100%) / 2 satirin sag kenari ile ekran kenari arasindaki mesafedir.
   Mesafe yetmiyorsa yalnizca eksik kadar bosluk birakilir (genis ekranda 0, dar ekranda ~70px). */
.znFooterAlt .znFooterAltLinkler { margin-left: auto; margin-right: max(0px, calc(88px - (100vw - 100%) / 2)); }