/* YAZI TİPLERİ KENDİ SUNUCUMUZDAN — Google Fonts değil.
   Sebep: dış kaynak engellenince tarayıcı yedek fonta düşüyor, yedek font
   aynı puntoda daha geniş yazıyor ve dev başlıklar taşıyor. Sayfa bizde
   düzgün, müşterinin ağında bozuk görünüyor (10 Eylül 2026, Mary Nails).
   Dosyalar `f/` altında, üreten araç: tools/font-yerelestir.mjs
   Yeni ağırlık/aile gerekiyorsa oraya ekle ve aracı tekrar koş. */
@font-face {
  font-family: 'Akshar';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('f/akshar-1-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: 'Akshar';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('f/akshar-2-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: 'Poppins';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('f/poppins-i3-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: 'Poppins';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('f/poppins-i4-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: 'Poppins';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('f/poppins-5-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: 'Poppins';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('f/poppins-6-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: 'Poppins';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/poppins-7-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: 'Poppins';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('f/poppins-8-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: 'Poppins';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/poppins-9-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: 'Poppins';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('f/poppins-10-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: 'Poppins';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/poppins-11-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: 'Poppins';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('f/poppins-12-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: 'Poppins';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('f/poppins-13-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: 'Poppins';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('f/poppins-14-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;
}

/* SÜRÜM 4 "KLON" — müşterinin örnek gösterdiği ozfilonakliyat.com'un birebir
   düzeni. Bölüm sırası, rozet-başlık-buton kalıbı, kart yapısı, fiyat tablosu
   ve renkler aynı; YALNIZCA fotoğraflar ve işletme bilgileri Midas'ın.
   Kullanıcı kararı, 21 Eylül 2026: "her şey aynı sadece fotoğraflar ve bilgiler
   farklı". Renk değerleri örnek sitenin Elementor global değişkenlerinden.

   YAZI TIPI: yuz tanimlari bu dosyanin basina tools/font-yerelestir.mjs
   tarafindan yaziliyor (Akshar + Poppins, ornek sitedeki ikili).
   Sarmalayici: node sites/_fable-midas/_fontkur.mjs 4 */


/* Yedek: Akshar dar bir baslik yuzu; Arial Narrow yoksa Arial genis yazar. */
@font-face { font-family: 'Yedek Baslik'; src: local('Arial Narrow'), local('Arial'); size-adjust: 88%; }

:root {
  --mavi: #1141BE; --mavi-koyu: #0D3496; --mavi-acik: #0D7BC4;
  --sari: #FFCD06; --sari-koyu: #E5B800;
  --ink: #3E3F41; --ink2: #6B6C6F; --gri: #919191;
  --beyaz: #FFFFFF; --acik: #F7F8FF; --acik2: #F6F8FF; --gri-acik: #F1F1F1;
  --krem: #FFFBED;
  --rule: #E4E7F2;
  /* YAZI TIPI — 21 Eylul 2026 olcumu: ornek sitenin CSS'i "Akshar" ve "Poppins" diyor ama
     sitede bu ailelerin TEK BIR @font-face'i yok; tarayici yedege (sans-serif) dusuyor.
     Musterinin telefonda gordugu ornek site cihazin kendi sans-serif'i (iOS Helvetica,
     Android Roboto, Windows Arial). Birebir ayni sonuc icin ayni yedege dusuyoruz;
     Akshar/Poppins dosyalari f/ altinda duruyor ama KULLANILMIYOR (indirilmez). */
  --disp: sans-serif;
  --govde: sans-serif;
  --kap: 1140px;                 /* ornek sitedeki --container-max-width */
  --pad: 20px;                   /* ornek sitede bolum yan dolgusu sabit 20px */
  --ease: cubic-bezier(.19, 1, .22, 1);
}
* { box-sizing: border-box; }
/* overflow-x HEM html HEM body: iOS Safari yalnız body'ye yazılanı dinlemiyor. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--beyaz); scroll-behavior: auto; }
body { margin: 0; background: var(--beyaz); color: var(--ink); font: 400 16px/22px var(--govde); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* Olcek ornek sitenin Elementor kit'inden (post-8.css): masaustu / <=1024 / <=767. */
h1, h2, h3, h4, h5, h6 { font-family: var(--disp); font-weight: 500; text-transform: capitalize; margin: 0; color: var(--ink); }
h1 { font-size: 65px; line-height: 71px; }
h2 { font-size: 44px; line-height: 50px; font-weight: 700; }
h3 { font-size: 24px; line-height: 30px; }
h4 { font-size: 22px; line-height: 28px; }
h5 { font-size: 20px; line-height: 26px; }
h6 { font-size: 18px; line-height: 24px; }
@media (max-width: 1024px) {
  body { font-size: 14px; line-height: 20px; }
  h1 { font-size: 50px; line-height: 56px; } h2 { font-size: 34px; line-height: 40px; }
  h3 { font-size: 22px; line-height: 28px; } h4 { font-size: 20px; line-height: 26px; }
  h5 { font-size: 18px; line-height: 24px; } h6 { font-size: 16px; line-height: 22px; }
}
@media (max-width: 767px) {
  h1 { font-size: 38px; line-height: 44px; } h2 { font-size: 30px; line-height: 36px; }
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }

/* Ornek sitede 1140px ICERIK genisligi; dolgu onun disinda (olcum: x=105, w=1140 @1350). */
.kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
/* BEKÇİ İKİ YERDE. `fadeInLeft/Right` ögesi animasyonun başında `translate3d(±100%)`
   ile bölümün dışına çıkıyor. Tek bekçi (`html`/`body` üzerindeki `overflow-x`)
   iOS'ta güvenilir değil; bölüm de kendi içini kırpıyor. `overflow-x: clip`
   `hidden`den farklı olarak kaydırma bağlamı yaratmıyor, yani sayfa içi çapalar
   ve `position: sticky` bozulmuyor. */
.bolum, .hero { overflow-x: clip; }
@supports not (overflow-x: clip) { .bolum, .hero { overflow-x: hidden; } }
.bolum { padding-block: 70px; }
@media (max-width: 1024px) { .bolum { padding-block: 50px; } }
.bolum-acik { background: var(--acik2); }
/* Hizmetler: ornek sitede ic kap ustten ve alttan 30px daha veriyor (olcum: 100/100). */
#hizmetler { padding-block: 100px; }
@media (max-width: 1024px) { #hizmetler { padding-block: 70px; } }
#hizmetler .kartlar + * { margin-top: 50px; }
.orta { text-align: center; }

/* Rozet: krem zemin, sarı çerçeve, küçük yazı — örnek sitedeki kalıp. */
.rozet { display: inline-block; padding: 10px 20px; border: 1px solid var(--sari); border-radius: 20px; background: var(--krem); font: 400 16px/22px var(--govde); color: var(--ink); }
@media (max-width: 1024px) { .rozet { font-size: 14px; line-height: 20px; } }

/* Dev punto EKRANA değil KABA bağlı: vw bölüm dolgusunu saymıyor (madde 8). */
.bas { container-type: inline-size; }
/* olcum: masaustu 28/50, mobil 28/36, agirlik 500, renk baslikla ayni */
.bas .ust { display: block; font: 500 28px/50px var(--disp); color: var(--ink); text-transform: capitalize; }
@media (max-width: 767px) { .bas .ust { line-height: 36px; } }
.bas h1 { font-weight: 700; margin-top: 4px; }
/* Yalniz arama motoru ve ekran okuyucu icin (ana sayfa h1'i) */
.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; }
/* `.alt` alt bilgide koyu zemin taşıyor; başlık altı paragrafı AYRI sınıf. */
.bas .aciklama { margin-top: 20px; color: var(--ink); }
/* Ortali bolum basinda metin 200 / 120 / 0 ic dolguyla daraliyor (olcum). */
.bas.orta .aciklama { padding-inline: 200px; }
@media (max-width: 1024px) { .bas.orta .aciklama { margin-top: 15px; padding-inline: 120px; } }
@media (max-width: 767px) { .bas.orta .aciklama { margin-top: 10px; padding-inline: 0; } }
.bas .rozet + h1, .bas .rozet + .ust, .bas .rozet + h2 { margin-top: 20px; }

/* düğmeler */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 14px 28px; border-radius: 8px; font: 500 16px/22px var(--govde); text-transform: capitalize; transition: background .3s, color .3s; }
.btn-mavi { background: #0077BE; color: #fff; }
.btn-mavi:hover, .btn-mavi:focus-visible { background: var(--sari); color: var(--ink); }
.btn-mavi2 { background: var(--mavi-acik); color: #fff; }
.btn-mavi2:hover { background: var(--mavi); }
.btn-sari { background: var(--sari); color: var(--ink); }
.btn-sari:hover, .btn-sari:focus-visible { background: #0077BE; color: #fff; }
@media (max-width: 767px) { .btn { font-size: 14px; line-height: 20px; } }
.eylem { display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width: 767px) { .eylem { gap: 14px; } }
.orta .eylem { justify-content: center; }

/* ---------------------------------------------------------------- nav */
.ust-bar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--rule); }
/* Logo ortaya alininca menu + logo + CTA 1140px'e sigmiyor ve "Ana Sayfa" iki
   satira dusuyordu. Ust bar icerikten daha genis: sutunlar rahat nefes aliyor. */
.ust-bar .kap { max-width: 1320px; }
.menu a { white-space: nowrap; }
/* LOGO ORTADA (kullanıcı isteği, 21 Eylül 2026). Örnek sitede logo SOLDA;
   bu bilerek yapılan tek sapma. Üç sütun: menü solda, logo ortada, CTA sağda.
   HTML sırası değişmiyor, yerleşim `order` ile kuruluyor — 187 sayfanın
   tamamı aynı `ustBar()`tan besleniyor. */
.ust-ic { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 76px; }
.marka { order: 2; justify-self: center; display: flex; align-items: center; gap: 10px; }
.ust-ic nav { order: 1; justify-self: start; }
.ust-cta { order: 3; justify-self: end; }
.marka img { width: 38px; height: auto; }
.marka b { font: 700 22px/1 var(--disp); color: var(--mavi); letter-spacing: .01em; }
.marka span { display: block; font: 500 8.5px/1.3 var(--govde); letter-spacing: .18em; text-transform: uppercase; color: var(--gri); margin-top: 3px; white-space: nowrap; }
.menu { display: flex; align-items: center; gap: 22px; font: 500 15px/1 var(--govde); }
.menu > li { position: relative; }
.menu a { padding: 10px 0; display: inline-block; transition: color .25s; }
.menu a:hover { color: var(--mavi); }
.alt-menu { position: absolute; top: 100%; left: -14px; z-index: 2; min-width: 232px; background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 8px; box-shadow: 0 16px 40px rgba(17, 65, 190, .1); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .25s, visibility .25s; }
.menu > li:hover .alt-menu, .menu > li:focus-within .alt-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.alt-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14.5px; }
.alt-menu a:hover { background: var(--acik); color: var(--mavi); }
.ust-cta { flex: 0 0 auto; }
.menu-ac { display: none; }

/* mobil menü */
.mobil-menu { position: fixed; inset: 0; z-index: 48; background: #fff; padding: 88px var(--pad) 40px; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .3s; }
.mobil-menu.acik { opacity: 1; pointer-events: auto; }
.mobil-menu a { display: block; padding: 13px 0; border-bottom: 1px solid var(--rule); font: 500 18px/1.3 var(--govde); }
.mobil-menu .ic a { padding-left: 16px; font-size: 15.5px; color: var(--ink2); }
.mobil-menu .btn { margin-top: 20px; width: 100%; }

/* ---------------------------------------------------------------- hero */
.hero { padding-block: 70px; text-align: center; }
@media (max-width: 1024px) { .hero { padding-block: 50px; } }
.hero .aciklama { padding-inline: 200px; color: var(--ink); }
@media (max-width: 1024px) { .hero .aciklama { padding-inline: 120px; } }
@media (max-width: 767px) { .hero .aciklama { padding-inline: 0; } }
.hero-kare { margin-top: 30px; border-radius: 40px 40px 0 0; overflow: hidden; background: var(--gri-acik); }
.hero-kare img { width: 100%; aspect-ratio: 1140 / 412; object-fit: cover; }

/* --------------------------------------------------------- metin blokları */
/* Ornek sitede metin blogu 1140px kabin icinde 200 / 120 / 0 yan dolguyla daraliyor;
   govde 16/22 (tablet-mobil 14/20), renk baslikla ayni, paragraf arasi .9rem. */
.metin { text-align: center; }
.metin h2 { padding-top: 20px; margin-bottom: 20px; }
.metin p { padding-inline: 200px; color: var(--ink); }
.metin p + p { margin-top: 14.4px; }
@media (max-width: 1024px) { .metin h2 { margin-bottom: 15px; } .metin p { padding-inline: 120px; } }
@media (max-width: 767px) { .metin h2 { margin-bottom: 10px; } .metin p { padding-inline: 0; } }
.metin b, .metin strong { color: var(--ink); font-weight: 600; }

/* ikili kare (örnek sitede iki video) */
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 69px; }
@media (max-width: 767px) { .ikili { margin-top: 19px; } }
.ikili figure { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--gri-acik); }
/* aspect-ratio'lu çerçevede görsel AKIŞTA durmaz (Safari kutuyu uzatıyor):
   çerçeve relative, görsel absolute (CLAUDE.md tuzak listesi). */
.ikili img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ hizmetler */
/* Örnek sitedeki gibi 3 sütun × 2 satır = 6 kart. */
.kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 41px 30px; margin-top: 20px; }
@media (max-width: 1024px) { .kartlar { gap: 20px; margin-top: 20px; } }
.kart { display: flex; flex-direction: column; border-radius: 40px; box-shadow: 0 25px 40px rgba(0, 0, 0, .1); }
/* Ust: 160px (10em) sabit yukseklik, hover'da yalniz GORSEL buyuyor (scale 1.1). */
.kart-kare { position: relative; height: 180px; border-radius: 40px 40px 0 0; overflow: hidden; background: var(--gri-acik); }
.kart-kare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.kart:hover .kart-kare img { transform: scale(1.1); }
.kart-ic { padding: 30px 35px; display: flex; flex-direction: column; flex: 1; text-align: center; background: #F2F2F2; border-radius: 0 0 40px 40px; }
.kart h3 { margin: 8px 0 20px; }
.kart p { color: var(--ink); font-size: 14px; line-height: 20px; margin-bottom: 14.4px; }
@media (max-width: 767px) { .kart-ic { padding: 20px; } .kart h3 { margin: 10px 0; } }
.kart .inc { margin-top: auto; align-self: center; padding: 15px 30px; font: 500 16px/25px var(--govde); color: #0077BE; transition: color .3s; }
.kart .inc:hover { color: var(--ink); }
.kart .inc::after { content: ' \2192'; }

/* ----------------------------------------------------------- neden biz */
/* Ornek sitede iki 570px sutun, arada bosluk yok; ic kap 30px daha veriyor (100/100). */
.ikili-blok { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
#hakkimizda-ozet { padding-block: 100px; }
@media (max-width: 1024px) { #hakkimizda-ozet { padding-block: 70px; } }
#hakkimizda-ozet .eylem { margin-top: 40px; }
/* iki ozellik kutusu: 228px, 1px mavi cerceve, 20px kose, yalniz 18/24 baslik */
#hakkimizda-ozet .bas .rozet + h2 { margin-top: 28px; }
.ozellik-ikili { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 29px; }
.ozellik-kutu { flex: 0 0 228px; padding: 28px 0 22px; border: 1px solid var(--mavi); border-radius: 20px; text-align: center; }
/* KOLAJ — konumlar olcumden (570px sutun): A 50,0 270x266 · B 300,116 270x450 · C 0,326 370x244 · sayac 342,10 228x90 */
.kolaj { position: relative; height: 570px; margin-top: -10px; }
.kolaj figure { position: absolute; margin: 0; border-radius: 40px; overflow: hidden; background: var(--gri-acik); }
.kolaj img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.kolaj-a { left: 50px; top: 0; width: 270px; height: 266px; }
.kolaj-b { left: 300px; top: 116px; width: 270px; height: 450px; }
.kolaj-c { left: 0; top: 326px; width: 370px; height: 244px; z-index: 1; }
.kolaj-sayac { position: absolute; left: 342px; top: 10px; z-index: 2; width: 228px; min-height: 90px; padding: 20px 15px; border-radius: 20px; background: var(--sari); color: var(--ink); display: flex; align-items: center; gap: 10px; }
.kolaj-sayac b { flex: 1; text-align: center; font: 700 44px/50px var(--disp); }
.kolaj-sayac span { flex: 1; font: 400 14px/20px var(--govde); }
@media (max-width: 1024px) {
  .ikili-blok { grid-template-columns: 1fr; gap: 40px; }
  .kolaj { width: 570px; max-width: 100%; margin-inline: auto; }
}
@media (max-width: 620px) {
  /* dar ekranda mutlak konum yerine akis: sutun disina tasan oge kalmasin */
  .kolaj { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .kolaj figure { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 1 / 1; border-radius: 28px; }
  .kolaj-c { grid-column: 1 / -1; aspect-ratio: 370 / 244 !important; }
  .kolaj-sayac { position: static; width: auto; grid-column: 1 / -1; justify-content: center; }
  .ozellik-kutu { flex: 1 1 140px; }
}
.ozellik { display: flex; gap: 14px; margin-top: 22px; }
.ozellik i { flex: 0 0 44px; height: 44px; border-radius: 10px; background: var(--krem); border: 1px solid var(--sari); display: grid; place-items: center; font-style: normal; font-size: 20px; }
.ozellik h4 { font-size: 19px; font-weight: 500; }
.ozellik p { margin-top: 4px; color: var(--ink2); font-size: 14.8px; }
.yil-rozet { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 128px; height: 128px; border-radius: 50%; background: var(--sari); color: #111; text-align: center; }
.yil-rozet b { font: 700 40px/1 var(--disp); }
.yil-rozet span { font: 500 12px/1.3 var(--govde); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.blok-kare { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--gri-acik); }
.blok-kare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------- fiyat tablo */
.tablo-sar { margin-top: clamp(26px, 3.5vw, 40px); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: #fff; }
.tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablo th { background: var(--mavi); color: #fff; font: 500 15.5px/1.3 var(--govde); text-align: left; padding: 15px 18px; }
.tablo td { padding: 14px 18px; border-top: 1px solid var(--rule); color: var(--ink2); }
.tablo td:first-child { color: var(--ink); font-weight: 500; }
.tablo tr:nth-child(even) td { background: var(--acik2); }
.tablo-not { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--gri); }

/* -------------------------------------------------------- neden biz 4'lü */
.neden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(30px, 4vw, 46px); }
.neden li { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 26px 22px; text-align: center; }
.neden i { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--krem); border: 1px solid var(--sari); font-style: normal; font-size: 24px; }
.neden h3 { font-size: 20px; font-weight: 500; }
.neden p { margin-top: 8px; color: var(--ink2); font-size: 14.5px; line-height: 1.6; }

/* ------------------------------------------------------------- sayaçlar */
.sayac { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(28px, 4vw, 44px); }
.sayac li { text-align: center; padding: 26px 16px; border-radius: 12px; background: var(--acik); }
.sayac b { display: block; font: 700 clamp(32px, 4vw, 46px)/1 var(--disp); color: var(--mavi); }
.sayac h3 { margin-top: 8px; font-size: 18px; font-weight: 500; }
.sayac p { margin-top: 5px; color: var(--ink2); font-size: 13.8px; line-height: 1.5; }

/* ------------------------------------------------------------- iletişim */
/* Harita (ana sayfa 18b + iletişim). iframe akışta değil: Safari aspect-ratio tuzağı. */
.harita { position: relative; aspect-ratio: 16 / 7; margin-top: 26px; border-radius: 40px; overflow: hidden; box-shadow: 0 25px 40px rgba(0,0,0,.1); background: #e9eef2; }
.harita iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) { .harita { aspect-ratio: 4 / 5; border-radius: 24px; } }
.hizli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(24px, 3vw, 34px); }
.hizli a { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; transition: border-color .3s, box-shadow .3s; }
.hizli a:hover { border-color: var(--mavi); box-shadow: 0 12px 30px rgba(17, 65, 190, .1); }
.hizli i { flex: 0 0 46px; height: 46px; border-radius: 50%; background: var(--mavi); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 20px; }
.hizli span { display: block; font-size: 13px; color: var(--gri); }
.hizli b { display: block; font: 500 18px/1.3 var(--govde); color: var(--ink); overflow-wrap: anywhere; }

/* -------------------------------------------------------------- yorumlar */
.yorumlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(30px, 4vw, 46px); }
.yorum { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; }
.yildiz { color: var(--sari); font-size: 16px; letter-spacing: .1em; }
.yorum p { margin-top: 14px; color: var(--ink2); font-size: 14.8px; line-height: 1.7; flex: 1; }
.yorum footer { margin-top: 18px; }
.yorum b { display: block; font: 500 16px/1.3 var(--govde); color: var(--ink); }
.yorum span { display: block; font-size: 13px; color: var(--gri); margin-top: 2px; }

/* -------------------------------------------------------------- cta bant */
.cta-bant { background: var(--mavi); color: #fff; text-align: center; }
.cta-bant h2 { color: #fff; font-size: clamp(26px, 4.4vw, 44px); }
.cta-bant .rozet { background: rgba(255, 255, 255, .12); border-color: rgba(255, 205, 6, .8); color: #fff; }
.cta-bant .aciklama { color: rgba(255, 255, 255, .82); }

/* ----------------------------------------------------------------- blog */
.yazilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin-top: clamp(30px, 4vw, 46px); }
.yazi { background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s var(--ease); }
.yazi:hover { box-shadow: 0 18px 44px rgba(17, 65, 190, .12); transform: translateY(-4px); }
.yazi-kare { position: relative; aspect-ratio: 2 / 1; background: var(--gri-acik); }
.yazi-kare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yazi-ic { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.yazi h3 { font-size: 20px; font-weight: 500; }
.yazi p { color: var(--ink2); font-size: 14.5px; line-height: 1.6; }
.yazi .inc { margin-top: auto; padding-top: 6px; font: 500 14.5px/1 var(--govde); color: var(--mavi); }
.yazi .inc::after { content: ' \2192'; }

/* ------------------------------------------------------------ bölge ağı */
.bolgeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); gap: 10px; margin-top: clamp(26px, 3.4vw, 40px); }
.bolgeler a { display: block; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; font-size: 14.5px; transition: border-color .25s, color .25s; overflow-wrap: anywhere; }
.bolgeler a:hover { border-color: var(--mavi); color: var(--mavi); }

/* ------------------------------------------------------------------ SSS */
.sss { max-width: 860px; margin: clamp(26px, 3.4vw, 40px) auto 0; }
.sss details { border: 1px solid var(--rule); border-radius: 10px; background: #fff; margin-bottom: 10px; }
.sss summary { cursor: pointer; padding: 17px 52px 17px 20px; font: 500 16.5px/1.4 var(--govde); position: relative; list-style: none; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--mavi); line-height: 1; }
.sss details[open] summary::after { content: '\2212'; }
.sss p { padding: 0 20px 18px; color: var(--ink2); font-size: 15px; line-height: 1.7; }

/* ---------------------------------------------------------------- makale */
.makale { max-width: 860px; margin-inline: auto; }
.makale h2 { font-size: clamp(24px, 3.6vw, 34px); margin-top: 34px; }
.makale h3 { font-size: clamp(19px, 2.6vw, 24px); margin-top: 26px; font-weight: 500; }
.makale p { margin-top: 14px; color: var(--ink2); font-size: 15.8px; line-height: 1.8; }
.makale ul { margin-top: 14px; }
.makale ul li { position: relative; padding-left: 24px; margin-bottom: 9px; color: var(--ink2); font-size: 15.5px; line-height: 1.7; }
.makale ul li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--sari); }
.makale .oz { margin-top: 20px; padding: 20px 22px; background: var(--acik); border-left: 4px solid var(--mavi); border-radius: 0 10px 10px 0; }
.makale .oz p { margin-top: 0; color: var(--ink); }
.yol { font-size: 13.5px; color: var(--gri); }
.yol a:hover { color: var(--mavi); }

/* ------------------------------------------------------------------- alt */
/* ALT BILGI — olcum: #0077BE, h517; y100 logo 57px · y157 sosyal 44px · y271 uc sutun · y465 baglantilar; sari serit 51px */
.alt { background: #0077BE; color: #fff; padding: 0; }
.alt > .kap { padding-block: 100px 30px; text-align: center; }
/* block: satir ici logonun altinda 6px taban cizgisi boslugu kaliyordu (olcum 277 -> 271) */
.alt-logo { display: block; width: max-content; margin-inline: auto; }
.alt-logo img { display: block; height: 57px; width: auto; }
.alt-sosyal { display: flex; justify-content: center; gap: 10px; padding-top: 30px; }
.alt-sosyal a { width: 44px; height: 44px; border-radius: 100px; display: grid; place-items: center; color: #fff; transition: color .3s, background .3s; }
.alt-sosyal a:hover { background: var(--sari); color: var(--ink); }
.alt-sosyal svg { width: 22px; height: 22px; }
.alt-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; text-align: left; }
.alt-uclu > div { display: flex; align-items: flex-start; }
.alt-uclu i { flex: 0 0 95px; padding-top: 10px; display: grid; justify-items: center; font-style: normal; color: #fff; }
.alt-uclu svg { width: 44px; height: 44px; }
.alt h4 { color: #fff; font-size: 22px; line-height: 28px; font-weight: 500; margin: 10px 0 0; }
.alt-uclu p { padding: 5px 30px 0 0; color: #fff; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.alt a:hover { color: var(--sari); }
.alt-baglanti { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 71px; }
.alt-baglanti li { flex: 0 0 148px; font-size: 16px; line-height: 22px; }
.alt-serit { background: var(--sari); color: var(--ink); }
.alt-son { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 24px; min-height: 51px; padding-block: 14px; font-size: 16px; line-height: 22px; }
.alt-serit a:hover { color: #0077BE; }
@media (max-width: 1024px) {
  .alt > .kap { padding-block: 70px 30px; }
  .alt-uclu p, .alt-baglanti li, .alt-son { font-size: 14px; line-height: 20px; }
}
@media (max-width: 767px) {
  .alt-uclu { grid-template-columns: 1fr; gap: 24px; }
  .alt-baglanti { margin-top: 40px; }
  .alt-baglanti li { flex: 0 0 50%; padding-block: 6px; }
}
.alt-imza { display: inline-flex; align-items: center; gap: .5rem; opacity: .85; transition: opacity .3s; }
.alt-imza:hover { opacity: 1; }
.imza-yildiz { width: 13px; height: 13px; color: var(--sari); transition: transform .6s var(--ease); }
.alt-imza:hover .imza-yildiz { transform: rotate(90deg); }
.imza-ad { font-weight: 600; color: inherit; }   /* sari serit ustunde beyaz okunmuyordu */

/* ===================== GİRİŞ ANİMASYONLARI =====================
   Örnek site Elementor'ün animate.css sınıflarını kullanıyor: öge
   `elementor-invisible` ile görünmez başlıyor, görünüme girince `animated
   fadeInLeft|fadeInRight|zoomIn|rotateIn` ekleniyor (süre 1.25s).
   Burada aynısı `[data-anim]` + `.gorundu` ile yapılıyor; tetikleyici main.js.

   YATAY TAŞMA: fadeInLeft/Right `translate3d(±100%)` ile başlıyor. Ögenin
   kendisi ekran dışına çıkıyor; `html`/`body`de `overflow-x: clip` olmasaydı
   sayfa yana kayardı (CLAUDE.md tuzak listesi: iOS'ta yalnız body yetmiyor). */
.js [data-anim] { opacity: 0; }
.js [data-anim].gorundu { opacity: 1; animation-duration: 1.25s; animation-fill-mode: both; }
.js [data-anim="fadeInLeft"].gorundu { animation-name: fadeInLeft; }
.js [data-anim="fadeInRight"].gorundu { animation-name: fadeInRight; }
.js [data-anim="zoomIn"].gorundu { animation-name: zoomIn; }
.js [data-anim="rotateIn"].gorundu { animation-name: rotateIn; }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes rotateIn { from { opacity: 0; transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); } to { opacity: 1; transform-origin: center; transform: none; } }

/* Marka şeridi (örnek sitede hero'nun altındaki logo dizisi) */
/* Ornek sitede karenin altina binen beyaz kart: -37px, 35/70 dolgu, 40px kose. */
.marka-serit { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: -37px; padding: 35px 70px; border-radius: 40px; background: #fff; box-shadow: 0 25px 40px rgba(0, 0, 0, .1); }
@media (max-width: 1024px) { .marka-serit { padding: 20px 50px; justify-content: center; } }
.marka-serit span { font: 500 14px/1.4 var(--govde); color: var(--gri); display: inline-flex; align-items: center; gap: 9px; }
.marka-serit i { width: 8px; height: 8px; border-radius: 50%; background: var(--sari); font-style: normal; }

/* Hero'daki dönerek gelen süs karesi (örnek sitede mobilde gizli) */
.hero { position: relative; }
/* Ornek sitede 61px'lik sus basligin SAGINDA: kap icinde left 795 / 490 / 223. */
.hero { position: relative; }
.hero-sus { position: absolute; left: calc(50% - 570px + 795px); top: 194px; width: 61px; height: auto; }
@media (max-width: 1024px) { .hero-sus { left: calc(var(--pad) + 490px); top: 150px; } }
@media (max-width: 767px) { .hero-sus { left: calc(var(--pad) + 223px); top: 120px; width: 44px; } }

/* --------------------------------------------------------- yüzen butonlar */
.wa-yuzen { position: fixed; right: 18px; bottom: 18px; z-index: 46; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(37, 211, 102, .4); transition: transform .3s var(--ease); }
.wa-yuzen:hover { transform: scale(1.07); }
.wa-yuzen svg { width: 30px; height: 30px; }
.mobil-bar { display: none; }

/* --------------------------------------------------------- kırılımlar */
@media (max-width: 1024px) {
  .kartlar, .yorumlar, .yazilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .neden, .sayac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ikili-blok { grid-template-columns: 1fr; }
  .alt-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .menu, .ust-cta { display: none; }
  /* Sol sütun hamburger kadar boş: logo optik değil GERÇEK ortada durur.
     `order` ızgarada HANGİ HÜCREYE düşüleceğini belirlemiyor — yalnızca sırayı.
     Menü ve CTA gizlenince otomatik yerleşim logoyu 1. sütuna (44px) atıyor ve
     logo oraya sıkışıp iki satıra bölünüyordu. Hücre açıkça veriliyor. */
  .ust-ic { grid-template-columns: 44px 1fr 44px; gap: 10px; }
  .ust-ic nav { display: none; }
  .marka { grid-column: 2; justify-self: center; }
  .menu-ac { grid-column: 3; order: 3; justify-self: end; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 9px; border: 0; background: transparent; cursor: pointer; }
  .menu-ac span { display: block; height: 2px; background: var(--ink); transition: transform .35s var(--ease); }
  .menu-ac.acik span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-ac.acik span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hizli { grid-template-columns: 1fr; }
  .wa-yuzen { display: none; }   /* ornek sitede mobilde yuzen balon yok, alt bar var */


  /* eski yuzen bar icin birakilan 82px kalkti: sari seridin altinda mavi bosluk kaliyordu; pay artik body'de (58px) */
}
@media (max-width: 620px) {
  .kartlar, .yorumlar, .yazilar, .neden, .sayac, .ikili { grid-template-columns: 1fr; }
  .alt-izgara { grid-template-columns: 1fr; }
  .tablo { font-size: 13.8px; }
  .tablo th, .tablo td { padding: 12px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .kart, .yazi, .wa-yuzen { transition: none; }
  /* Animasyon çalışmazsa içerik GÖRÜNMEZ kalmamalı. */
  .js [data-anim] { opacity: 1; }
  .js [data-anim].gorundu { animation: none; }
}

/* ===================================================================
   OLCUMLU YENIDEN KURULAN BOLUMLER (21 Eylul 2026) — degerler ornek sitenin
   canli computed stillerinden; 1350px'te bolum-ici konumlar yorumda.
   =================================================================== */
.rozet-gri { background: var(--gri-acik); border-color: var(--mavi); }
/* iki tonlu baslik: ilk satir 700, ikinci satir 400 */
.iki-ton b, .iki-ton span { display: block; }
.iki-ton b { font-weight: 700; }
.iki-ton span { font-weight: 400; }

/* gorselli zemin + kaplama: cover, ortali, fixed (ornek sitede background-attachment: fixed) */
.zeminli { position: relative; background: var(--zemin) center / cover no-repeat fixed; isolation: isolate; }
.zeminli::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #000; opacity: .68; }
.zemin-sayac::before { background: #fff; opacity: .9; }
/* iOS fixed zemini cizmiyor; dokunmatik ve dar ekranda akisa birak */
@media (max-width: 1024px), (hover: none) { .zeminli { background-attachment: scroll; } }

/* NEDEN BIZ — sol 523px (471x423 + iki 225x252), sag 607px; bolum h925, ust 100 */
#neden-biz { padding-block: 100px; }
.neden-blok { display: grid; grid-template-columns: 523px minmax(0, 1fr); align-items: start; }
.neden-kareler { display: grid; grid-template-columns: 225px 225px; gap: 20px 21px; }
.neden-kareler figure { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--gri-acik); }
.neden-kareler img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.nk-buyuk { grid-column: 1 / -1; height: 423px; }
.nk-kucuk { height: 252px; }
.neden-metin { padding-top: 10px; }
.neden-metin .rozet + h2 { margin-top: 40px; }
.neden-metin .aciklama { margin-top: 48px; padding-right: 50px; }
.neden-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 31px 0; margin: 30px 0 0 -10px; }
.neden-liste li { display: flex; gap: 15px; align-items: flex-start; min-height: 115px; }
.neden-liste i { flex: 0 0 84px; height: 84px; border-radius: 100px; background: var(--sari); color: var(--ink); display: grid; place-items: center; box-shadow: 0 25px 40px rgba(0, 0, 0, .1); font-style: normal; }
.neden-liste h3 { font-weight: 500; }
.neden-liste p { padding: 5px 10px 0 0; max-width: 214px; }
.neden-metin .eylem { margin: 40px 0 0 -10px; }
@media (max-width: 1024px) {
  #neden-biz { padding-block: 70px; }
  .neden-blok { grid-template-columns: 1fr; gap: 40px; }
  .neden-kareler { grid-template-columns: 1fr 1fr; max-width: 523px; margin-inline: auto; width: 100%; }
  .neden-liste, .neden-metin .eylem { margin-left: 0; }
}
@media (max-width: 767px) {
  .neden-liste { grid-template-columns: 1fr; gap: 24px; }
  .neden-liste li { min-height: 0; }
  .neden-liste p { max-width: none; }
  .neden-metin .rozet + h2 { margin-top: 20px; }
  .neden-metin .aciklama { margin-top: 20px; padding-right: 0; }
  .nk-buyuk { height: auto; aspect-ratio: 471 / 423; }
  .nk-kucuk { height: auto; aspect-ratio: 225 / 252; }
}

/* VIZYON + SAYACLAR — sol 550px (kare 550x259 r40), sag 2x2 sayac x721/x1006, y136/y393; bolum h685 */
#vizyon { padding-block: 100px; }
.sayac-blok { display: grid; grid-template-columns: 550px minmax(0, 1fr); align-items: start; }
.sayac-blok .aciklama { padding-right: 50px; }
.sayac-kare { position: relative; margin: 30px 0 0; height: 259px; border-radius: 40px; overflow: hidden; background: var(--gri-acik); }
.sayac-kare img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sayac-blok .sayac { display: grid; grid-template-columns: 193px 193px; gap: 87px 92px; margin: 36px 0 0 66px; }
.sayac-blok .sayac li { padding: 0; border-radius: 0; background: none; text-align: center; min-height: 170px; }
.sayac-blok .sayac b { display: block; font: 500 65px/71px var(--disp); color: #0077BE; }
.sayac-blok .sayac h3 { margin-top: 0; font-size: 24px; line-height: 30px; font-weight: 500; }
.sayac-blok .sayac p { margin-top: 0; padding-top: 15px; color: var(--ink); font-size: 14px; line-height: 20px; }
@media (max-width: 1024px) {
  #vizyon { padding-block: 70px; }
  .sayac-blok { grid-template-columns: 1fr; gap: 40px; }
  .sayac-blok .sayac { margin: 0 auto; gap: 40px 60px; justify-content: center; }
  .sayac-blok .sayac b { font-size: 50px; line-height: 56px; }
}
@media (max-width: 480px) { .sayac-blok .sayac { grid-template-columns: 1fr 1fr; gap: 30px 16px; } .sayac-blok .sayac b { font-size: 38px; line-height: 44px; } }

/* FORM CAGRISI — gorselli zemin + siyah .68; beyaz baslik (yan dolgu 270) ve metin (260); form 741px */
.zemin-form { padding-block: 120px 105px; color: #fff; }
.zemin-form h2, .zemin-form .aciklama { color: #fff; }
.zemin-form .bas.orta h2 { padding-inline: 270px; }
.zemin-form .bas.orta .aciklama { padding-inline: 260px; }
.teklif-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 15px; width: 741px; max-width: 100%; margin: 30px auto 0; }
.teklif-form input { min-width: 0; height: 50px; padding: 0 20px; border: 1px solid #fff; border-radius: 8px; background: #fff; color: var(--ink); font: 400 16px/22px var(--govde); }
.teklif-form input::placeholder { color: var(--gri); }
.teklif-form input:focus { outline: none; border-color: var(--sari); }
.teklif-form .btn { border: 0; cursor: pointer; }
@media (max-width: 1024px) {
  .zemin-form { padding-block: 70px; }
  .zemin-form .bas.orta h2, .zemin-form .bas.orta .aciklama { padding-inline: 120px; }
}
@media (max-width: 767px) {
  .zemin-form .bas.orta h2, .zemin-form .bas.orta .aciklama { padding-inline: 0; }
  .teklif-form { grid-template-columns: 1fr; }
}

/* SSS — ortali bas (metin yan dolgu 290), solda 470x500 kare r40, sagda 570px akordeon (olcum: kare y200, akordeon y280) */
.bas.orta.dar .aciklama, .metin.dar p { padding-inline: 290px; }
/* ornek sitede bu bolum ust dolgusuz basliyor (rozet y0); bosluk onceki bolumun alt dolgusundan */
#sss { padding-top: 0; }
.sss-blok { display: grid; grid-template-columns: 570px 570px; align-items: center; margin-top: 22px; }
.sss-kare { position: relative; margin: 0; width: 470px; height: 500px; border-radius: 40px; overflow: hidden; background: var(--gri-acik); }
.sss-kare img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sss-blok .sss { max-width: none; margin: 0; }
/* MAVI BASLIKLI METIN — h2 #0077BE, ust 20 dolgu; bloklar arasi olcum: metin sonu -> sonraki baslik 20 */
.mavi-metin h2 { color: #0077BE; }
.mavi-metin p + h2 { margin-top: 20px; }
/* ON BOLUM — ustten 150, kare 367x401 bolumun 181px ustune tasiyor; alt bilgi -50 ile biniyor */
/* Binme bolumun KENDI alt kenarindan: alt bilgi <main>'in disinda, kardes secici eslesmiyor. */
.on-alt { margin: 150px 0 -50px; position: relative; z-index: 1; }
.on-alt-ic { display: grid; grid-template-columns: 419px minmax(0, 1fr); min-height: 220px; }
.on-alt-kare { position: relative; margin: -181px 0 0 20px; width: 367px; height: 401px; border-radius: 40px; overflow: hidden; background: var(--gri-acik); box-shadow: 0 25px 40px rgba(0, 0, 0, .1); }
.on-alt-kare img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.on-alt-metin { padding-top: 50px; min-width: 0; }
.on-alt-metin h3 { font-weight: 500; }
.on-alt-metin .teklif-form { width: 701px; max-width: 100%; margin: 20px 0 0; }
.on-alt-metin .teklif-form input { border-color: var(--rule); }
@media (max-width: 1024px) {
  .bas.orta.dar .aciklama, .metin.dar p { padding-inline: 120px; }
  .sss-blok { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .sss-blok .sss { width: 100%; }
  .on-alt { margin: 70px 0 40px; }
  /* `1fr`in alt siniri `auto`: 701px'lik form sutunu sisiriyordu (390'da 20->721). */
  .on-alt-ic { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .on-alt-kare { display: none; }
  .on-alt-metin { padding-top: 0; text-align: center; }
  .on-alt-metin .teklif-form { margin-inline: auto; }
}
@media (max-width: 767px) {
  .bas.orta.dar .aciklama, .metin.dar p { padding-inline: 0; }
  .sss-kare { width: 100%; height: auto; aspect-ratio: 470 / 500; }
}

/* SABIT PIKSEL SUTUNLU BLOKLAR 1180'IN ALTINDA ALT ALTA.
   Kolaj, neden-biz, sayac ve SSS ornek sitenin 1140px kabindaki OLCULEN konumlariyla
   kurulu; kap 1140'tan daraldiginda (1025-1180 arasi pencere) sutunlar tasiyordu.
   Dekoratif ogeyi sutun disina tasiran mutlak konum yasak (kok CLAUDE.md). */
@media (max-width: 1180px) {
  .ikili-blok, .neden-blok, .sayac-blok, .sss-blok { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kolaj { width: 570px; max-width: 100%; margin-inline: auto; }
  .neden-kareler { grid-template-columns: 1fr 1fr; max-width: 523px; width: 100%; margin-inline: auto; }
  .neden-liste, .neden-metin .eylem { margin-left: 0; }
  .sayac-blok .sayac { margin: 0 auto; justify-content: center; }
  .sss-blok { justify-items: center; }
  .sss-blok .sss { width: 100%; }
  .sss-kare { max-width: 100%; }
}

/* MOBIL ALT BAR — ornek sitenin olculen degerleri (kirilim 768): dipte sabit, ZEMINSIZ,
   iki bitisik yarim #0060AE, dolgu 10/0/10/45, ikon left 12 / 22px, 16px kalin + 12px (.9), Arial. */
@media (max-width: 768px) {
  .mobil-bar { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 999; display: flex; font-family: Arial, sans-serif; padding-bottom: env(safe-area-inset-bottom); background: #0060AE; }
  .mobil-bar a { position: relative; width: 50%; display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 10px 0 10px 45px; background: #0060AE; color: #fff; border-radius: 0; }
  .mobil-bar svg { position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); }
  .mobil-bar .mb-tel svg { transform: translateY(-50%) rotateY(180deg); }
  /* satir yuksekligi govdeden miras: 20 + 20 - 2 + 20 dolgu = 58px (olcum) */
  .mobil-bar .mb-baslik { font-size: 16px; font-weight: bold; line-height: 20px; }
  .mobil-bar .mb-alt { font-size: 12px; line-height: 20px; opacity: .9; margin-top: -2px; }
  body { padding-bottom: 58px; }
}
@media (min-width: 769px) { .mobil-bar { display: none !important; } }

/* ============ MOBIL/TABLET UST BAR + MENU — ornek sitenin olculen hali (<=1024) ============
   Masaustunde logo ORTADA kalmaya devam ediyor (kullanici karari); hamburger gorunen
   genisliklerde ornek siteyle ayni: logo SOLDA, sagda siyah 8px koseli dugme, alt cizgi yok. */
@media (max-width: 1024px) {
  .ust-bar { border-bottom: 0; }
  .ust-ic { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; min-height: 70px; }
  .ust-ic .marka { grid-column: 1; order: 1; justify-self: start; }
  .ust-ic .marka img { width: 40px; }
  .ust-ic .marka b { font-size: 26px; }
  .ust-ic .ust-cta { display: none; }
  .menu-ac { grid-column: 2; order: 2; justify-self: end; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 48px; height: 47px; padding: 0; border: 1px solid #000; border-radius: 8px; background: #000; cursor: pointer; }
  .menu-ac span { display: block; width: 22px; height: 3px; border-radius: 1px; background: #fff; transition: none; }
  .menu-ac.acik span:first-child, .menu-ac.acik span:last-child { transform: none; }
  .menu-ac:hover span { background: var(--sari); }
}
/* panel: soldan kayar; kapaliyken ekran disinda (left -110%) */
.mobil-menu { position: fixed; inset: auto; top: 0; left: -110%; z-index: 1000; width: 100%; max-width: 360px; height: 100%; padding: 0; overflow-y: auto; overflow-x: hidden; background: #f1f1f1; opacity: 1; pointer-events: auto; transition: left .6s cubic-bezier(.6, .1, .68, .53); }
.mobil-menu.acik { left: 0; }
.mm-ust { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.mm-ust .marka { margin: 5px 0 0 10px; order: 0; justify-self: auto; }
.mm-ust .marka img { width: 34px; }
.mm-ust .marka b { font-size: 20px; }
.mm-kapat { width: 50px; margin: 0 20px 0 0; padding: 10px 0 5px; border: 0; border-radius: 8px; background: #000; color: #fff; font: 400 20px/24px Arial, sans-serif; cursor: pointer; }
.mm-kapat:hover { color: var(--sari); }
.mobil-menu nav a { display: block; padding: 15px; border: 0; font: 500 14px/20px var(--govde); color: #000; text-transform: capitalize; }
.mobil-menu nav a:hover, .mobil-menu nav a[aria-current] { color: var(--mavi); }
.mobil-menu .ic a { padding: 10px 15px 10px 30px; font-size: 14px; color: #000; }
.mm-perde { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .0); opacity: 0; pointer-events: none; }
.mm-perde.acik { pointer-events: auto; }

/* ============ HERO — mobil farklar (olcum 390) ============ */
.hero .rozet { min-width: 280px; text-align: center; }
@media (max-width: 767px) {
  .hero .rozet { min-width: 262px; }
  .hero-sus { display: none; }          /* basligin ustune biniyordu; ornek sitede mobilde gorunmuyor */
}
/* kayan serit: tek satir, sarmaz; masaustu 5, tablet 3, mobil 2 oge */
.marka-serit { display: block; overflow: hidden; }
.ms-ray { display: flex; flex-wrap: nowrap; transition: transform .5s ease; will-change: transform; }
.ms-ray > span { flex: 0 0 20%; justify-content: center; white-space: nowrap; }
@media (max-width: 1024px) { .ms-ray > span { flex-basis: 33.3333%; } }
@media (max-width: 767px) { .ms-ray > span { flex-basis: 50%; font-size: 13px; } }

/* FIYAT TABLOSU bolumu: ornek sitede basliksiz, zeminsiz; ustunde/altinda 89px bosluk var (olcum) */
.bolum-tablo { padding-block: 19px; }
.bolum-tablo .tablo-sar { margin-top: 0; }

/* ILETISIM (koyu zemin) — olcum 390: baslik 30/36 beyaz, metin beyaz, sari daire 44px + beyaz bilgi */
.zemin-iletisim::before { opacity: .76; }
.zemin-iletisim h2, .zemin-iletisim .aciklama, .zemin-iletisim a { color: #fff; }
.ilt-liste { display: flex; justify-content: center; gap: 30px 80px; flex-wrap: wrap; margin-top: 30px; }
.ilt-liste a { display: flex; flex-direction: column; align-items: center; gap: 18px; font-size: 16px; line-height: 22px; }
.ilt-liste i { width: 44px; height: 44px; border-radius: 100px; background: var(--sari); color: var(--ink); display: grid; place-items: center; font-style: normal; transition: background .3s, color .3s; }
.ilt-liste svg { width: 22px; height: 22px; }
.ilt-liste a:hover i { background: #0077BE; color: #fff; }
@media (max-width: 767px) { .ilt-liste { flex-direction: column; align-items: center; gap: 30px; } .ilt-liste a { font-size: 14px; line-height: 20px; } }
/* VIDEO CAGRISI — siyah .63; gri rozet, beyaz baslik, sari buton, beyaz yuvarlak oynat dugmesi */
.zemin-video::before { opacity: .63; }
.zemin-video h2 { color: #fff; }
.zemin-video .eylem { margin-top: 20px; justify-content: center; }
.oynat { display: grid; place-items: center; width: 58px; height: 58px; margin: 18px auto 0; border-radius: 50%; background: #fff; color: #0077BE; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); transition: transform .3s; }
.oynat svg { width: 30px; height: 30px; }
.oynat:hover { transform: scale(1.08); }
/* form cagrisi artik formsuz: ornek sitedeki gibi rozet + baslik + metin */
.zemin-form { padding-block: 70px; }
@media (max-width: 1024px) { .zemin-form { padding-block: 50px; } }

/* UST BAR YAPISKAN DEGIL — ornek sitede position: static (olcum); sayfayla birlikte kayiyor */
.ust-bar { position: relative; top: auto; }

/* YORUMLAR — ornek sitede kayan serit: masaustu 3, tablet 2, mobil 1 yorum gorunur (bolum 390'da 650px) */
.yorumlar { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.yorumlar::-webkit-scrollbar { display: none; }
.yorum { scroll-snap-align: start; }
.js .yorumlar [data-anim] { opacity: 1; animation: none; }   /* kaydirilan kapta giris animasyonu ogeyi kap disina itiyordu */
@media (max-width: 1024px) { .yorumlar { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 767px) { .yorumlar { grid-auto-columns: 100%; } }

/* SALT METIN BOLUMLERI — ornek sitede dikey dolgusu yok; aralari ayri bosluk bolumleriyle
   aciliyor (masaustu 70-89px, mobil 19-39px). Klonda her bolum 70/50 dolgu aliyordu ve ayni
   uzunlukta metin ~140px daha fazla yer kapliyordu (olcum 390: 676'ya karsi 515). */
.bolum:has(> .kap.metin) { padding-block: 40px; }
@media (max-width: 767px) { .bolum:has(> .kap.metin) { padding-block: 15px; } .metin h2 { padding-top: 10px; } }

/* ===== MOBIL KURGU DUZELTMELERI — ornek sitenin 390px goruntusunden (21 Eylul 2026) ===== */
/* alt bilgi: sosyal ve bilgi ikonlari beyaz CERCEVELI dairede (tum genislikler) */
.alt-sosyal a { width: 40px; height: 40px; border: 1px solid #fff; }
.alt-sosyal svg { width: 20px; height: 20px; }
.alt-uclu i svg { width: 40px; height: 40px; padding: 9px; border: 1px solid #fff; border-radius: 100px; }
@media (max-width: 767px) {
  /* NEDEN BIZ: kareler tek sutun ve ortali (buyuk tam genislik, kucukler 225x252), metin ortali,
     maddeler ortali sutun: daire ustte, baslik ve metin altinda */
  .neden-kareler { grid-template-columns: 1fr; justify-items: center; max-width: none; gap: 20px; }
  .nk-buyuk { width: 100%; height: auto; aspect-ratio: 350 / 314; }
  .nk-kucuk { width: 225px; height: 252px; aspect-ratio: auto; }
  .neden-metin { text-align: center; padding-top: 0; }
  .neden-metin .aciklama { padding-right: 0; }
  .neden-liste { grid-template-columns: 1fr; gap: 20px; margin: 24px 0 0; }
  .neden-liste li { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .neden-liste i { flex: 0 0 auto; width: 98px; height: 68px; }
  .neden-liste p { padding: 5px 0 0; max-width: 290px; margin-inline: auto; }
  .neden-metin .eylem { margin: 30px 0 0; justify-content: center; }
  /* BIZ KIMIZ ve SAYACLAR da mobilde ortali */
  #hakkimizda-ozet .bas, .sayac-blok .bas { text-align: center; }
  #hakkimizda-ozet .eylem, .ozellik-ikili { justify-content: center; }
  .sayac-blok .aciklama { padding-right: 0; }
  /* ALT BILGI: ortali sutun, ikon ustte; baglanti satiri mobilde yok */
  .alt > .kap { padding-block: 60px 20px; }
  .alt-uclu { gap: 22px; margin-top: 26px; text-align: center; }
  .alt-uclu > div { flex-direction: column; align-items: center; }
  .alt-uclu i { flex: 0 0 auto; padding-top: 0; }
  .alt h4 { font-size: 20px; line-height: 26px; margin-top: 8px; }
  .alt-uclu p { padding: 8px 0 0; font-size: 14px; line-height: 20px; }
  .alt-baglanti { display: none; }
}

/* ON BOLUM = SARI KART (olcum 1366 ve 390): 1140px, r40, 220px; figur karttan 181px yukari tasiyor;
   alt bilgiye 50px biniyor. Mobilde kart kenarlardan 20px iceride, yazilar ortali, gorsel yok. */
.on-alt-ic { background: var(--sari); border-radius: 40px; padding-inline: 0; max-width: var(--kap); }
.on-alt-metin { padding: 50px 40px 0 0; }
.on-alt-metin h3 { font-weight: 400; }
@media (max-width: 1180px) { .on-alt-ic { margin-inline: var(--pad); width: auto; } }
@media (max-width: 1024px) {
  .on-alt { margin: 60px 0 -50px; }
  .on-alt-ic { min-height: 200px; align-content: center; }
  .on-alt-metin { padding: 30px 20px; text-align: center; }
  .on-alt-metin h3 { font-size: 22px; line-height: 28px; margin-bottom: 14px; }
}

/* SAYAC KARTLARI — ornek sitede her sayac 1px mavi cerceveli, 40px koseli kartta, ortali.
   Masaustu olcum: sayac 193px, kart araligi 285 -> kart 265px (36px ic dolgu), satir araligi 257.
   Ilk iki sayida "+" soneki var; mobilde dort kart alt alta. */
.sayac-blok .sayac { grid-template-columns: 265px 265px; gap: 20px; margin: 0 0 0 30px; }
.sayac-blok .sayac li { border: 1px solid var(--mavi); border-radius: 40px; padding: 35px 36px; min-height: 237px; background: transparent; }
.sayac-blok .sayac li:nth-child(-n+2) b::after { content: '+'; }
@media (max-width: 1180px) { .sayac-blok .sayac { margin: 0 auto; } }
@media (max-width: 767px) {
  .sayac-blok .sayac { grid-template-columns: 1fr; gap: 20px; width: 100%; }
  .sayac-blok .sayac li { min-height: 0; padding: 30px 20px; }
  .sayac-blok .sayac b { font-size: 38px; line-height: 44px; }
  .sayac-blok .sayac h3 { font-size: 22px; line-height: 28px; }
  .sayac-kare { height: 165px; margin-top: 20px; }
}

/* BLOG KARTLARI — olcum 390: gorsel 300px (ust kose 40), govde beyaz + golge (alt kose 40),
   baslik 22/28 alti cizili, baglanti #0077BE ve oksuz */
.yazilar { gap: 30px; margin-top: 30px; }
.yazi { border: 0; border-radius: 40px; overflow: visible; box-shadow: 0 25px 40px rgba(0, 0, 0, .1); transition: none; }
.yazi:hover { transform: none; box-shadow: 0 25px 40px rgba(0, 0, 0, .1); }
.yazi-kare { aspect-ratio: auto; height: 250px; border-radius: 40px 40px 0 0; overflow: hidden; }
.yazi-kare img { transition: transform .4s ease; }
.yazi:hover .yazi-kare img { transform: scale(1.1); }
.yazi-ic { padding: 25px; gap: 10px; border-radius: 0 0 40px 40px; background: #fff; }
.yazi h3 { font-size: 22px; line-height: 28px; text-decoration: underline; text-underline-offset: 3px; }
.yazi p { color: var(--ink); font-size: 14px; line-height: 20px; }
.yazi .inc { padding-top: 14px; font: 500 14px/20px var(--govde); color: #0077BE; }
.yazi .inc::after { content: none; }
.yazi .inc:hover { color: var(--ink); }
@media (max-width: 1024px) { .yazilar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .yazilar { grid-template-columns: 1fr; gap: 26px; } .yazi-kare { height: 300px; } }

/* HIZMET KARTLARI mobil (olcum 390): gorsel 140px, govde 20px dolgu, baslik 22/28,
   aciklama iki satirda kesilir, baglantinin yaninda ok */
.kart p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kart .inc::after { content: '\2192'; display: inline-block; margin-left: 8px; font-size: 22px; line-height: 1; vertical-align: -2px; }
@media (max-width: 767px) {
  .kart-kare { height: 140px; }
  .kart h3 { font-size: 22px; line-height: 28px; }
  #hizmetler { padding-block: 50px; }
  .kartlar { gap: 20px; }
}

/* BIZ KIMIZ mobil (olcum 390): her sey ortali; iki ozellik kutusu ALT ALTA (230px);
   gorseller kolaj degil alt alta ve ortali; sari sayac ILK karenin ustune biniyor */
@media (max-width: 620px) {
  .ozellik-ikili { flex-direction: column; align-items: center; gap: 20px; }
  .ozellik-kutu { flex: 0 0 auto; width: 230px; padding: 24px 0; }
  #hakkimizda-ozet .eylem { margin-top: 20px; }
  .kolaj { display: flex; flex-direction: column; align-items: center; gap: 20px; height: auto; margin-top: 0; }
  .kolaj figure { position: relative; left: auto; top: auto; border-radius: 40px; aspect-ratio: auto; }
  /* `.kolaj figure` (0,1,1) tek sinifli kurali eziyordu: kareler sifir yukseklige cokmustu */
  .kolaj .kolaj-a { width: 270px; height: 266px; }
  .kolaj .kolaj-b { width: 270px; height: 450px; }
  .kolaj .kolaj-c { width: 100%; max-width: 370px; height: 244px; aspect-ratio: auto !important; grid-column: auto; }
  /* sayac akista degil: ilk karenin ust ortasinda (kolaj'in ustunden 20px) */
  .kolaj .kolaj-sayac { position: absolute; left: 50%; top: 20px; grid-column: auto; transform: translateX(-50%); width: 182px; min-height: 78px; padding: 14px 12px; z-index: 3; }
  .kolaj-sayac b { font-size: 30px; line-height: 36px; }
}

/* "Yillik Deneyim" sayacinda ornek sitedeki gibi "+" soneki (sayim metni degistirdigi icin sozde ogeyle) */
.kolaj-sayac b::after { content: '+'; }

/* IKILI KARE = ornek sitedeki iki DIKEY video. Elementor'daki --video-aspect-ratio: 0.5625
   genislik/yukseklik oranidir (9/16), 16:9 DEGIL — onceki turda yanlis okunmustu.
   Olcum: masaustu 560x995, mobil 175x310; her genislikte iki sutun, 22px kose, 20px ara. */
.ikili { grid-template-columns: 1fr 1fr; gap: 20px; }
.ikili figure { aspect-ratio: 9 / 16; border-radius: 22px; }
@media (max-width: 767px) { .ikili { gap: 20px; } }

/* ===== TABLET 768-1180: ORNEK SITE MASAUSTU KURGUSUNU KORUYOR (olcum 768 ve 1024) =====
   Biz Kimiz, Neden Biz, sayaclar ve SSS iki sutun; hizmet kartlari uc sutun. Alt alta inis
   yalnizca <=767. Sabit piksel konumlar burada 570px'lik sutuna ORANLA yaziliyor (cqw):
   kap daralinca bloklar kuculuyor, sutun disina tasan oge olmuyor. */
@media (min-width: 768px) and (max-width: 1180px) {
  .ikili-blok, .sss-blok { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; justify-items: stretch; }
  .neden-blok { grid-template-columns: minmax(0, 523fr) minmax(0, 617fr); gap: 0; }
  .sayac-blok { grid-template-columns: minmax(0, 550fr) minmax(0, 590fr); gap: 0; }
  .kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  /* kolaj: oran 570x570; konumlar olculen px / 570 */
  .kolaj { container-type: inline-size; width: auto; max-width: none; height: auto; aspect-ratio: 1 / 1; margin: 0; display: block; }
  .kolaj .kolaj-a { left: 8.77cqw; top: 0; width: 47.37cqw; height: 46.67cqw; }
  .kolaj .kolaj-b { left: 52.63cqw; top: 20.35cqw; width: 47.37cqw; height: 78.95cqw; }
  .kolaj .kolaj-c { left: 0; top: 57.19cqw; width: 64.91cqw; height: 42.81cqw; }
  .kolaj .kolaj-sayac { left: 60cqw; top: 1.75cqw; width: 40cqw; min-height: 0; padding: 3cqw 2.5cqw; }
  .kolaj .kolaj-sayac b { font-size: 7.7cqw; line-height: 1.15; }
  .kolaj figure { border-radius: 7cqw; }
  .ozellik-kutu { flex: 1 1 0; min-width: 0; }
  /* neden biz: kareler sutunun %90'i (471/523), oranlar korunur */
  .neden-kareler { grid-template-columns: 1fr 1fr; gap: 20px; width: 90%; max-width: none; margin: 0; }
  .nk-buyuk { height: auto; aspect-ratio: 471 / 423; }
  .nk-kucuk { height: auto; aspect-ratio: 225 / 252; }
  .neden-liste { margin-left: -10px; gap: 24px 0; }
  .neden-liste i { flex-basis: 64px; height: 64px; }
  .neden-liste svg { width: 32px; height: 32px; }
  .neden-metin .eylem { margin-left: -10px; }
  /* sayaclar */
  .sayac-blok .sayac { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 0 0 0 5%; }
  .sayac-blok .sayac li { padding: 24px 14px; min-height: 0; border-radius: 30px; }
  .sayac-kare { height: auto; aspect-ratio: 550 / 259; }
  /* SSS */
  .sss-kare { width: 82%; height: auto; aspect-ratio: 470 / 500; }
  .sss-blok .sss { width: auto; }
}
/* koyu zeminli uc bolumun masaustu boyu (olcum 1366: 447 / 497 / 524) */
@media (min-width: 1025px) {
  .zemin-form { padding-block: 130px; }
  .zemin-iletisim { padding-block: 135px; }
  .zemin-video { padding-block: 132px; }
}

/* TABLET INCE AYAR (olcum 768/1024) */
@media (max-width: 1024px) {
  .ust-ic nav { display: none; }                 /* 1024'te menu gizlenmiyor, ikinci satira sariyordu (ust bar 105px) */
  .kart-kare { height: 140px; }                  /* ornek sitede 10em @14px */
  .kart-ic { padding: 15px; }
  .kart h3 { margin: 10px 0; }
}
@media (max-width: 767px) { .kart-ic { padding: 20px; } }