/*
  Cleanbulans — Vitrin (public storefront)
  Yönetim panellerinden (admin.css/personel.css) TAMAMEN AYRI bir görsel dil:
  bu, gerçek müşterilerin gördüğü pazarlama sitesi — panel bileşen kütüphanesi
  (koyu/kurumsal palet) buraya UYGUN DEĞİL, kasıtlı olarak reuse edilmedi.
  Sıfır dış bağımlılık: web fontu henüz bağlanmadı (admin panelindeki "sistem
  fontu, marka fontu tasarım fazına bırakıldı" kararıyla aynı gerekçe) —
  gerçek marka fontu geldiğinde SADECE --site-font değişkeni güncellenecek.
*/

:root {
    --site-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --site-blue: #1656d6;
    --site-blue-dark: #0d3aa8;
    --site-navy: #0b1c3d;
    --site-navy-soft: #13285a;
    --site-red: #e5352b;
    --site-red-dark: #c92a21;
    --site-bg-soft: #f5f7fb;
    --site-text: #16213a;
    --site-text-muted: #64748b;
    --site-border: #e6e9f0;
    --site-radius: 14px;
}

* {
    box-sizing: border-box;
}

body.site-govde {
    margin: 0;
    font-family: var(--site-font);
    color: var(--site-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* Tarayıcının kaydırma çubuğu GÖRSEL olarak gizleniyor — kaydırma işlevi
   (fare tekerleği, dokunmatik, klavye) tamamen çalışmaya devam ediyor,
   sadece sağ kenardaki çubuk görünmüyor. */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

.site-govde img {
    max-width: 100%;
    display: block;
}

/* max-width 1320px — yaygın/standart bir "geniş masaüstü" konteynır genişliği
   (Bootstrap 5'in en büyük breakpoint container'ıyla aynı değer). Kullanıcı
   1180px'in gerçek geniş ekranlarda (1900px+) çok fazla boş kenar bıraktığını
   bildirdi — TEK bu değeri artırmak, siteyi TAMAMEN oluşturan HER bölümü
   (header, hero, güven barı, kesif kutusu, istatistik, hizmetler, markalar,
   referans, footer) aynı anda düzeltiyor çünkü hepsi bu TEK class'ı paylaşıyor. */
.site-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.site-btn svg {
    width: 17px;
    height: 17px;
}

.site-btn--mavi {
    background: var(--site-blue);
    color: #fff;
    box-shadow: 0 10px 24px rgba(22, 86, 214, 0.28);
}

.site-btn--mavi:hover {
    background: var(--site-blue-dark);
    transform: translateY(-1px);
}

.site-btn--kirmizi {
    background: var(--site-red);
    color: #fff;
    box-shadow: 0 10px 24px rgba(229, 53, 43, 0.28);
}

.site-btn--kirmizi:hover {
    background: var(--site-red-dark);
    transform: translateY(-1px);
}

.site-btn--outline {
    background: #fff;
    color: var(--site-blue);
    border-color: var(--site-border);
}

.site-btn--outline:hover {
    border-color: var(--site-blue);
}

.site-etiket {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-red);
    margin-bottom: 0.6rem;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--site-border);
}

/* KÖK NEDEN BUG (2026-08-06) — `padding: 1rem 0;` bir KISALTMA (shorthand)
   idi, TÜM 4 kenarı birden set ediyordu (top/bottom=1rem, left/right=0).
   Bu element `.site-container`'la (padding: 0 1.5rem) AYNI DOM elementinde
   birleştirilmiş (class="site-container site-header-satir") — CSS'te bu
   kural `.site-container`'dan SONRA tanımlı olduğu için, eşit specificity'de
   (ikisi de tek class) kaynak sırası kazanıyor ve `.site-container`'ın
   24px sol/sağ padding'ini SESSİZCE SIFIRLIYORDU. Sonuç: header içeriği
   (logo/nav/butonlar) sayfanın DİĞER TÜM bölümlerinden (hero, güven barı,
   keşif kutusu — hepsi sadece `.site-container` kullanıyor) 24px daha
   DIŞARIDA/kenara yakın duruyordu — kullanıcı bunu "alt sayfa daha içe
   dar duruyor" diye fark etti. Düzeltme: SADECE dikey padding set edilip
   sol/sağ `.site-container`'dan miras kalması sağlandı. */
.site-header-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-family: var(--site-font);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Gerçek logo dosyası (assets/images/site/logo.png, şeffaf arka plan) —
   header VE footer'da (koyu navy zemin) AYNI dosya kullanılıyor, logo'nun
   kendi arka planı zaten şeffaf olduğu için footer'da beyaz kutu sorunu
   oluşmuyor. */
.site-logo-img {
    height: 38px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.9rem;
}

.site-nav a {
    color: var(--site-text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover {
    color: var(--site-blue);
}

.site-nav a.aktif {
    color: var(--site-blue);
    border-bottom-color: var(--site-blue);
}

/* Hizmetlerimiz/Kurumsal açılır menüleri — `.site-hesap-menu` (Müşteri
   Paneli) ile AYNI teknik: masaüstünde :hover ile açılıyor, dokunmatik
   cihazlarda (tablet/touch-laptop) GERÇEK tıklama ile aç-kapa (bkz.
   index.php JS, `.acik` class'ı). */
.site-nav-dropdown {
    position: relative;
}

.site-nav-tetik {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.site-nav-tetik svg {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}

.site-nav-dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.9rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: 12px;
    box-shadow: 0 20px 40px -16px rgba(11, 28, 61, 0.25);
    padding: 0.5rem;
    z-index: 20;
}

.site-nav-dropdown-panel a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 7px;
    color: var(--site-text);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    border-bottom: none;
}

.site-nav-dropdown-panel a:hover {
    background: var(--site-bg-soft);
    color: var(--site-blue);
}

.site-nav-dropdown.acik .site-nav-dropdown-panel {
    display: block;
}

.site-nav-dropdown.acik .site-nav-tetik svg {
    transform: rotate(180deg);
}

.site-header-sag {
    display: flex;
    align-items: center;
    gap: 1.3rem;
}

/* Telefon + WhatsApp — sadece ikon (numara metni kaldırıldı, header'da yer
   kaplamasın diye — numara zaten footer'da ve tıklanan ikonların `title`/
   `aria-label`'ında mevcut). WhatsApp için GERÇEK logo çizilmiyor (Melonel
   projesindeki AYNI karar/gerekçe: trademarked bir logoyu elle taklit etmek
   yerine jenerik bir mesaj/konuşma balonu ikonu kullanılıyor). */
.site-iletisim-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--site-blue);
    background: rgba(22, 86, 214, 0.08);
    text-decoration: none;
    transition: background 0.15s ease;
}

.site-iletisim-ikon:hover {
    background: rgba(22, 86, 214, 0.16);
}

.site-iletisim-ikon svg {
    width: 18px;
    height: 18px;
}

.site-iletisim-ikon--whatsapp {
    color: #22a755;
    background: rgba(34, 167, 85, 0.1);
}

.site-iletisim-ikon--whatsapp:hover {
    background: rgba(34, 167, 85, 0.18);
}

/* Müşteri Paneli — üstüne gelince (masaüstü) Giriş Yap / Kayıt Ol açılır
   menüsü. Header butonu proje genelindeki .site-btn'i kullanıyor ama BURADA
   (header context'inde) daha kompakt bir boyutla — "Teklif Al" hâlindeyken
   kullanıcı butonun gereksiz büyük durduğunu belirtmişti, header'a özel
   küçültülmüş padding/font-size ile bu da düzeltildi. */
.site-header-sag .site-btn {
    padding: 0.55rem 1.05rem;
    font-size: 0.86rem;
}

.site-hesap-menu {
    position: relative;
}

.site-hesap-tetik {
    border: none;
    cursor: pointer;
}

.site-hesap-tetik svg {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}

.site-hesap-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: 10px;
    box-shadow: 0 16px 32px -12px rgba(11, 28, 61, 0.25);
    padding: 0.4rem;
    z-index: 60;
}

.site-hesap-dropdown a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 7px;
    color: var(--site-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}

.site-hesap-dropdown a:hover {
    background: var(--site-bg-soft);
    color: var(--site-blue);
}

/* Açılma/kapanma artık SADECE JS ile yönetiliyor (`.acik` class'ı,
   mouseenter/mouseleave + gecikme, bkz. index.php içindeki JS) — saf CSS
   `:hover` KALDIRILDI çünkü header `position:sticky` olduğundan sayfa
   kaydırılırken hover fiziksel olarak kopabiliyordu (kullanıcı bunu fark
   etti). Dokunmatik cihazlarda da AYNI `.acik` mekanizması tıklamayla
   çalışıyor, ayrı bir yol gerekmiyor. */
.site-hesap-menu.acik .site-hesap-dropdown {
    display: block;
}

.site-hesap-menu.acik .site-hesap-tetik svg {
    transform: rotate(180deg);
}

.site-mobil-iletisim {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem 0 0.2rem;
}

.site-hamburger {
    display: none;
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--site-navy);
}

.site-hamburger svg {
    width: 24px;
    height: 24px;
}

/* KÖK NEDEN DÜZELTMESİ (2026-08-06) — mobil menü ÖNCEDEN `display:none->flex`
   ile header'ın (position:sticky) İÇİNDE, normal doküman akışında bir
   "dropdown" olarak açılıyordu — bu YUKARIDAN-AŞAĞI açılma hissi veriyordu
   VE header'ın yüksekliğini gerçekten DEĞİŞTİRDİĞİ için (accordion alt
   menüsü açılınca da AYNI şekilde) altındaki sayfa içeriği her açılış/
   kapanışta REFLOW oluyordu — kullanıcının "titreme" olarak fark ettiği
   şey büyük olasılıkla buydu (sayfa gerçekten yukarı/aşağı kayıyordu).
   Admin panelindeki `.sidebar` off-canvas deseniyle AYNI teknik uygulandı
   (bkz. assets/css/admin.css → `.sidebar`/`.sidebar-overlay`): artık
   `position:fixed` ile dokümandan TAMAMEN bağımsız, sağdan `translateX`
   ile kayan bir panel — sayfanın geri kalanı asla reflow olmaz, accordion
   SADECE panelin kendi içinde (gerekirse scroll ile) büyür/küçülür. */
.site-mobil-nav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: #fff;
    flex-direction: column;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
    z-index: 60;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    box-shadow: -8px 0 24px rgba(11, 28, 61, 0.18);
}

.site-mobil-nav.acik {
    transform: translateX(0);
}

.site-mobil-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 28, 61, 0.45);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.site-mobil-nav-overlay.acik {
    opacity: 1;
    pointer-events: auto;
}

.site-mobil-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.site-mobil-nav-close {
    background: none;
    border: none;
    padding: 0.4rem;
    color: var(--site-text-muted);
    cursor: pointer;
}

.site-mobil-nav-close svg {
    width: 22px;
    height: 22px;
}

/* KÖK NEDEN (2026-08-06) — `:not(.site-btn)` EKLENDİ: bu genel "a" seçicisi
   (specificity: sınıf+etiket = 0,1,1) "Müşteri Paneli" butonunun (`.site-btn
   .site-btn--mavi`, specificity 0,1,0) kendi `color:#fff`'ini SESSİZCE eziyordu
   — buton koyu/okunmaz bir metin rengiyle kalıyordu (kullanıcı fark etti:
   "belli olmuyor"). `.site-kesif-madde span:not(.site-kesif-madde-ikon)`
   ile AYNI desen: bir kapsayıcı içindeki genel etiket seçicisi, içeride farklı
   bir amaçla (buton) kullanılan aynı etiketi de yakalıyorsa `:not()` ile
   hariç tut. `border-bottom` de aynı sebeple butona sızıp gereksiz bir çizgi
   ekliyordu, o da bu düzeltmeyle birlikte ortadan kalktı. */
.site-mobil-nav a:not(.site-btn) {
    padding: 0.75rem 0;
    color: var(--site-text);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--site-border);
}

.site-mobil-nav a.aktif {
    color: var(--site-blue);
}

.site-mobil-nav .site-btn {
    margin-top: 0.9rem;
}

/* Mobil açılır alt menü (Hizmetlerimiz/Kurumsal) — yükseklik JS ile
   ölçülüp max-height'e yazılıyor (admin panelindeki sidebar akordeonuyla
   AYNI, güvenilir teknik — bkz. assets/js/admin.js). */
.site-mobil-nav-grup {
    border-bottom: 1px solid var(--site-border);
}

.site-mobil-nav-grup-satir {
    display: flex;
    align-items: center;
}

.site-mobil-nav-grup-satir a {
    flex: 1;
    border-bottom: none;
}

.site-mobil-nav-toggle {
    background: none;
    border: none;
    padding: 0.75rem 0.5rem;
    color: var(--site-text-muted);
    cursor: pointer;
}

.site-mobil-nav-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.site-mobil-nav-grup--acik .site-mobil-nav-toggle svg {
    transform: rotate(180deg);
}

.site-mobil-nav-alt {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.site-mobil-nav-alt a {
    display: block;
    padding: 0.6rem 0 0.6rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--site-text-muted);
    border-bottom: none;
}

/* ---------- Müşteri Paneli — Giriş/Kayıt/Şifremi Unuttum modalı ----------
   Kullanıcı isteği: masaüstünde DİKEY değil, YATAY (sol: görsel, sağ: form)
   2 sütunlu bir modal. `.site-mobil-nav-overlay`/`.sidebar-overlay` ile AYNI
   overlay+scroll-kilidi deseni — bkz. assets/js/admin.js ve bu dosyanın
   üstündeki mobil menü JS bloğu. */
.site-auth-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 28, 61, 0.55);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.site-auth-overlay.acik {
    display: flex;
    opacity: 1;
}

.site-auth-modal {
    position: relative;
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 3rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(11, 28, 61, 0.35);
}

.site-auth-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background: var(--site-bg-soft);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-text-muted);
    cursor: pointer;
}

.site-auth-close svg {
    width: 18px;
    height: 18px;
}

/* Gerçek fotoğraf assets/images/site/musteri-paneli-gorsel.jpg eklenene
   kadar altta duran navy gradient görünür (hero fotoğrafındaki AYNI
   çok-katmanlı background-image deseni) — dosya eklenince kod dokunmadan
   otomatik devreye girer. Mobilde (bkz. breakpoint) tamamen gizli. */
.site-auth-gorsel {
    display: none;
    background-image: url("/assets/images/site/musteri-paneli-gorsel.jpg"), linear-gradient(135deg, var(--site-navy), var(--site-navy-soft));
    background-size: cover;
    background-position: center;
}

@media (min-width: 641px) {
    .site-auth-gorsel {
        display: block;
    }
}

.site-auth-icerik {
    padding: 2.75rem 2.5rem 2.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.site-auth-sekmeler {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--site-border);
}

.site-auth-sekme {
    flex: 1;
    background: none;
    border: none;
    padding: 0 0 0.85rem;
    font-size: 0.95rem;
    font-family: var(--site-font);
    font-weight: 700;
    color: var(--site-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.site-auth-sekme.aktif {
    color: var(--site-blue);
    border-bottom-color: var(--site-blue);
}

/* KÖK NEDEN BUG (2026-08-06) — `.site-auth-panel { display:flex }` KOŞULSUZ
   set edilmişti; bu, tarayıcının `hidden` özniteliği için varsayılan UA
   kuralını (`[hidden]{display:none}`) EZİYORDU — çünkü CSS "cascade origin"
   kuralına göre AUTHOR (site) stilleri her zaman UA (tarayıcı varsayılan)
   stillerini kazanır, specificity'den BAĞIMSIZ olarak. Sonuç: JS `panel.hidden
   = true` yapsa da panel GÖRÜNMEYE devam ediyordu — Giriş Yap VE Kayıt Ol
   formları AYNI ANDA, alt alta yığılmış şekilde görünüyordu (kullanıcı
   "hepsi bir ekranda, bozuk bu" diye fark etti). Çözüm: display artık
   SADECE `.aktif` class'ıyla (JS'in ZATEN set ettiği, ama önceden CSS'te
   hiç kullanılmayan bir class) tetikleniyor — projenin diğer tüm show/hide
   akordeonlarıyla (`.sekme-filtre`, `.medya-karti` vb.) AYNI "class'a
   bağlı görünürlük" deseni. */
.site-auth-panel {
    display: none;
}

.site-auth-panel.aktif {
    display: flex;
    flex-direction: column;
}

.site-auth-form-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -0.4rem 0 1.2rem;
    font-size: 0.83rem;
}

/* KÖK NEDEN BUG (2026-08-06) — checkbox'ın yanındaki metin ÖNCEDEN çıplak
   bir metin düğümü (text node) olarak duruyordu, `<span>` İÇİNE SARILMAMIŞTI.
   `display:flex` bir konteynırda, sarılmamış bir metin düğümü tarayıcı
   tarafından "anonim" bir flex item'a çevrilir ama bu anonim item'ın
   `min-width` değeri VARSAYILAN OLARAK `auto` kalır — bu da onu, mevcut
   boşluğa göre KÜÇÜLMEYE/SARILMAYA (wrap) ZORLAMAZ, tam tersine kendi
   doğal/kesintisiz genişliğini korumaya çalışır. Sonuç: uzun "Kullanım
   Şartları..." metni konteynırın dışına taştı (modal içinde yatay scrollbar
   oluştu, checkbox ile metin görsel olarak KOPUK/BOZUK durdu — kullanıcı
   ekran görüntüsüyle gösterdi). Düzeltme: metin artık GERÇEK bir `<span>`
   içinde, bu span'e `flex:1; min-width:0` verildi — flex item artık
   konteynırın kalan genişliğini alıp İÇİNDE normal şekilde satır kırıyor,
   asla taşmıyor. */
.site-auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--site-text-muted);
    cursor: pointer;
    line-height: 1.4;
}

.site-auth-checkbox input {
    margin: 0.15rem 0 0;
    flex-shrink: 0;
}

.site-auth-checkbox span {
    flex: 1;
    min-width: 0;
}

.site-auth-checkbox--sart {
    font-size: 0.8rem;
    margin-bottom: 1.2rem;
}

.site-auth-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--site-blue);
    font-weight: 600;
    font-family: var(--site-font);
    font-size: inherit;
    cursor: pointer;
    text-decoration: none;
}

.site-auth-link:hover {
    text-decoration: underline;
}

.site-auth-geri {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1.25rem;
    color: var(--site-text-muted);
    font-weight: 600;
    font-family: var(--site-font);
    font-size: 0.85rem;
    cursor: pointer;
}

.site-auth-geri svg {
    width: 15px;
    height: 15px;
    transform: rotate(180deg);
}

.site-auth-baslik {
    font-size: 1.3rem;
    margin: 0 0 0.5rem;
    color: var(--site-navy);
}

.site-auth-aciklama {
    font-size: 0.88rem;
    color: var(--site-text-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.site-auth-alt-metin {
    text-align: center;
    font-size: 0.85rem;
    color: var(--site-text-muted);
    margin: 1.1rem 0 0;
}

.site-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.site-btn:disabled:hover {
    transform: none;
}

/* ---------- Hero ----------
   SON MİMARİ KARAR (kullanıcı onayıyla, tüm full-bleed denemeleri TERK
   EDİLDİ): sitede HİÇBİR full-bleed/viewport-kenarına-yayılan istisna
   YOK — foto DAHİL her şey (header, hero metni+fotoğrafı, güven barı,
   ve zaten böyle olan diğer tüm bölümler) AYNI `.site-container`
   (max-width:1180px, ortalı) genişliğinde. Bu, hero'yu normal bir
   2-sütunlu Grid'e (container İÇİNDE) geri döndürüyor — daha önceki
   "foto viewport kenarına kadar tam genişlik" denemelerinin (calc()
   hizalama, position:absolute+inset:0, dinamik clip-path) hepsi artık
   GEREKSİZ ve KALDIRILDI: container zaten sınırlı (max 1132px içerik)
   olduğu için metin/foto oranı hiçbir ekran genişliğinde aşırı
   büyüyüp küçülmüyor, eski "1fr/yüzde sütun" tuzakları da oluşmuyor. */

/* overflow:hidden KASITLI OLARAK KALDIRILDI: diyagonal clip-path artık yok
   (kullanıcı onayıyla düz dikdörtgene çevrildi), yani section'ın taşan bir
   şeyi "kırpması" gerekmiyor. Bu ayrıca güven barının transform:translateY
   ile yukarı taşan kısmının YANLIŞLIKLA kesilmesi riskini de kökten
   ortadan kaldırıyor — overflow:hidden + bir çocuğun negatif transform'la
   dışarı taşması KIRILGAN bir kombinasyondu, ihtiyaç kalmayınca kaldırıldı. */
/* Gradient beyaz→gri→BEYAZ (sadece beyaz→gri değil) — eskiden bölüm gri
   tonda (--site-bg-soft) BİTİYORDU, hemen altındaki body'nin düz beyazıyla
   (#fff) sert bir kenar/çizgi oluşturuyordu (kullanıcı ekran görüntüsüyle
   gösterdi). Şimdi bölümün EN ALTI da beyaza dönüyor, gri sadece ORTADA bir
   bant olarak kalıyor — bir sonraki bölümle (body'nin beyazı) renk uyuşuyor,
   görünür bir kesim/seam kalmıyor. */
.site-hero {
    background: linear-gradient(180deg, #fff 0%, var(--site-bg-soft) 55%, #fff 100%);
}

/* Satırın KENDİSİNDE artık dikey padding YOK — foto bu sayede header'ın
   hemen altından (sıfır boşluk) başlayıp satırın tam altına (güven barının
   ARKASINA/ÜSTÜNE binecek şekilde) kadar uzanıyor. Dikey nefes payı SADECE
   metin tarafında (.site-hero-metin'in kendi padding'i) — align-items:stretch
   (grid'in varsayılanı) foto'yu satırın TAM yüksekliğine (metnin kendi
   padding'iyle oluşan yükseklik neyse) geriyor. */
.site-hero-row {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 2.5rem;
}

.site-hero-metin {
    max-width: 480px;
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-hero h1 {
    font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.7rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    color: var(--site-navy);
}

/* "güveniniz." vurgusu: markanın mavi rengiyle uyumlu + altında inceden
   kalına giden bir çizgi (::after, clip-path polygon ile üçgen/kama şekli —
   sağa doğru kalınlaşıyor). Ayrı bir SVG/görsel gerekmedi, sıfır bağımlılık. */
.site-hero-vurgu {
    position: relative;
    display: inline-block;
    color: var(--site-blue);
}

.site-hero-vurgu::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.28em;
    width: 100%;
    height: 8px;
    background: var(--site-blue);
    border-radius: 0 4px 4px 0;
    clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 60%);
}

.site-hero p {
    color: var(--site-text-muted);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 1.8rem;
    max-width: 460px;
}

.site-hero-btns {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Foto alanları: gerçek dosya (assets/images/site/...) 404 olursa CSS'in
   çok-katmanlı background-image özelliği sayesinde ALTTAKİ gradient katmanı
   otomatik görünür (tarayıcı standardı — başarısız katman "none" sayılır,
   altındaki katmanlar etkilenmez). Gerçek fotoğraf o dosya yoluna eklenince
   TEK bir dosya kopyalamayla, kod dokunmadan devreye girer.
   Diyagonal clip-path kullanıcının çizdiği referansla GERİ getirildi — bu
   kez yüzdeleri FOTONUN KENDİ (container-içi, sınırlı ~1.05fr genişliğindeki)
   grid kolonunun yüzdeleri, viewport'un değil, bu yüzden `.site-hero`'ya
   `overflow:hidden` eklemeye GEREK YOK (clip-path kendi kutusunun dışına
   taşmıyor, sadece kendi kutusunu diyagonal kırpıyor — güven barının
   transform'la taşması bu yüzden hiçbir riske girmiyor). */
.site-hero-foto {
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
    align-self: stretch;
    min-height: 420px;
    background-image: url("/assets/images/site/hero-ekip.jpg"), linear-gradient(135deg, #dbe6fb, #eef2fb);
    background-size: cover, cover;
    background-position: center, center;
}

/* ---------- Güven Barı ----------
   İKİ turdur (-64px, sonra -44px, sonra -49px) TAHMİNİ bir piksel değeriyle
   "çizgi kartın merkezinden geçsin" hedefine ulaşmaya çalışıldı — her
   seferinde gerçek render'da kart yüksekliği tahminimden farklı çıktığı
   için çizgi merkeze değil başka bir yere düşüyordu. KALICI/matematiksel
   çözüm: piksel TAHMİN ETMEK YERİNE `transform: translateY(-50%)` — bu,
   kartın KENDİ GERÇEK render edilmiş yüksekliğinin TAM YARISI kadar
   yukarı kaydırır, kart kaç piksel olursa olsun SONUÇ HER ZAMAN kesin
   merkez olur (tahmin/font-metrics riski sıfıra iner). Transform akışı
   (sonraki elemanların konumunu) ETKİLEMEDİĞİ için, kartın ORİJİNAL
   (kaymadan önceki) konumundan sonra normalde kalacak boşluğu telafi etmek
   için `.site-hero-alt`'a sabit bir `margin-bottom` eklendi (bu değerin
   piksel-kesin olması KRİTİK DEĞİL — sadece altındaki bölümle makul bir
   boşluk kalsın diye, asıl "merkezden geçme" garantisi transform'dan geliyor). */
.site-hero-alt {
    position: relative;
    z-index: 2;
    margin-bottom: -25px;
}

/* translateY yüzdesi %50'den %25'e düşürüldü — kullanıcı çizimiyle "kart
   fotoğrafın TAM yarısına gömülmüş" değil, "fotoğrafın alt kısmına hafifçe
   binen/yükselen bir kart" istediğini gösterdi. Yüzde-tabanlı olduğu için
   (kartın KENDİ gerçek yüksekliğine göre) hâlâ tahmin riski taşımıyor. */
.site-guven-bari {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    box-shadow: 0 20px 40px -24px rgba(11, 28, 61, 0.25);
    transform: translateY(-25%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* min-height sabit bir kart yüksekliği garantiliyor (görsel tutarlılık için,
   artık merkez hesaplamasının kendisi transform:translateY(-50%) ile
   yapıldığından kesinlik açısından ZORUNLU değil ama yine de faydalı).
   align-items:center'a çevrildi — ikon artık metinle dikey ORTALI (önceki
   flex-start ile ikon üst hizada, metinle tam hizalı görünmüyordu). */
.site-guven-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 96px;
    padding: 0 1.6rem;
    border-right: 1px solid var(--site-border);
}

.site-guven-item:last-child {
    border-right: none;
}

/* Kullanıcı referansında ikonların arkasında KUTU/KARE zemin YOK — sadece
   çıplak, mavi renkli ikon. Önceki `background:rgba(...)` + `border-radius`
   BİLİNÇSİZCE eklenmiş bir süslemeydi (referansta olmayan), kaldırıldı. */
.site-guven-ikon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: var(--site-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Renk `--site-blue` (#1656d6) yerine daha koyu/doygun `--site-blue-dark`
   (#0d3aa8) yapıldı — ince SVG çizgileri (stroke) beyaz zemin üzerinde açık
   renklerde soluk/gri algılanabiliyor (özellikle sıkıştırılmış ekran
   görüntülerinde), daha koyu ton bu etkiye karşı daha dayanıklı. stroke-width
   CSS'te ELLE artırıldı — SVG'nin kendi presentation attribute'u (1.7, global
   ikon() fonksiyonundan) CSS ile override edilebiliyor (SVG2 kuralı) — global
   ikon() fonksiyonuna DOKUNMADAN (o, admin+personel panelindeki YÜZLERCE
   ikonu etkiler), sadece bu tek slotta 2.6'ya çıkarıldı. */
.site-guven-ikon svg {
    width: 34px;
    height: 34px;
    stroke-width: 2.6;
}

.site-guven-item strong {
    display: block;
    font-size: 0.92rem;
    margin-bottom: 0.15rem;
}

/* :not(.site-guven-ikon) — AYNI kök neden (bkz. Ücretsiz Keşif kutusundaki
   düzeltme): bu genel "span" seçicisi ikon çemberini de yakalayıp
   display:flex'i eziyordu, ikon hiç merkezlenmiyordu. */
.site-guven-item span:not(.site-guven-ikon) {
    display: block;
    font-size: 0.8rem;
    color: var(--site-text-muted);
    line-height: 1.4;
}

/* ---------- Ücretsiz Keşif kutusu ---------- */

.site-kesif {
    margin: 4.5rem 0;
}

/* Eski "form kartı sağ kenara tam yapışık" deneyi GERİ ALINDI — kullanıcı
   bunun tam tersini istedi, form kartının kutunun sağ kenarında da diğer
   kenarlarla (sol/üst/alt) tutarlı bir boşluk/dolgu olması gerekiyor.
   padding artık simetrik. */
.site-kesif-kutu {
    background: linear-gradient(135deg, var(--site-navy), var(--site-navy-soft));
    border-radius: 22px;
    padding: 3rem;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.5rem;
    color: #fff;
    overflow: hidden;
}

.site-kesif-kutu h2 {
    font-size: 1.7rem;
    line-height: 1.3;
    margin: 0 0 1.5rem;
}

.site-kesif-madde {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.2rem;
}

/* flex yerine CSS Grid place-items:center — bu, bir "yerleştirilmiş eleman"ı
   (SVG gibi) bir kutu içinde tam ortalamak için flex'ten daha garantili/
   tutarlı bir teknik (tarayıcı motorları arası tutarlılık farkı yaşanmaz).
   Radial-gradient/parlaklık daha önce kaldırıldı (kullanıcı "saçma" dedi). */
.site-kesif-madde-ikon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(120, 165, 255, 0.55);
    color: #eef3fd;
    display: grid;
    place-items: center;
}

/* display:block + line-height:0 — inline SVG'nin varsayılan "baseline"
   hizalaması bazı tarayıcılarda alt kısımda birkaç piksellik ekstra boşluk
   bırakabiliyor (metin gibi davranıp descender payı ayırıyor), bu da flex
   ortalamasına rağmen ikonun optik olarak yukarı kaymış görünmesine yol
   açabilir. Projede aynı düzeltme başka ikon butonlarında da kullanılıyor
   (bkz. "button svg{display:block}" deseni) — riski sıfır, garanti ortalama. */
.site-kesif-madde-ikon svg {
    display: block;
    line-height: 0;
    width: 21px;
    height: 21px;
    stroke-width: 2.3;
}

.site-kesif-madde strong {
    display: block;
    font-size: 0.92rem;
    margin-bottom: 0.15rem;
}

/* :not(.site-kesif-madde-ikon) EKLENDİ — KÖK NEDEN: bu genel "span" seçicisi
   (specificity: sınıf+etiket) ikon çemberinin `<span class="site-kesif-madde-
   ikon">`'ini de yakalıyordu (o da bir .site-kesif-madde içindeki span'dır) ve
   specificity'si `.site-kesif-madde-ikon` kuralından (sadece sınıf) YÜKSEK
   olduğu için `display:block`'u HER ZAMAN eziyordu — ikon merkezleme
   denemelerimin (flex/grid, align-items vb.) hiçbirinin görünürde etkisi
   olmamasının gerçek sebebi buydu, `display` zaten gasp ediliyordu. */
.site-kesif-madde span:not(.site-kesif-madde-ikon) {
    display: block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

.site-kesif-form {
    background: #fff;
    border-radius: 16px;
    padding: 1.6rem;
    color: var(--site-text);
}

.site-kesif-form input,
.site-kesif-form select {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--site-border);
    border-radius: 9px;
    font-size: 0.9rem;
    font-family: var(--site-font);
    margin-bottom: 0.8rem;
    background: #fff;
    color: var(--site-text);
}

.site-kesif-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 16px;
    padding-right: 2.4rem;
}

.site-kesif-form .site-btn {
    width: 100%;
    padding: 0.9rem;
}

.site-kesif-form-not {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--site-text-muted);
    margin-top: 0.7rem;
}

.site-kesif-form-not svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.site-kesif-basari {
    display: none;
    text-align: center;
    padding: 1.5rem 0.5rem;
}

.site-kesif-basari.gorunur {
    display: block;
}

.site-kesif-basari svg {
    width: 40px;
    height: 40px;
    color: #16a34a;
    margin-bottom: 0.6rem;
}

/* ---------- Ücretsiz Keşif formu — 2 adımlı (flip) ----------
   İki AYRI <form> (adım1/adım2), tek 3D-flip konteynır içinde iki "yüz"
   olarak duruyor — adım1 submit edilince JS değerleri adım2'nin hidden
   input'larına kopyalayıp konteynırı 180° çevirir (bkz. site_footer.php).
   Yükseklik SABİT değil — JS aktif yüzün scrollHeight'ını ölçüp inline
   yazıyor (admin.js'teki akordeon yükseklik-ölçme deseniyle aynı teknik),
   min-height sadece JS çalışmadan önceki ilk an için güvenlik payı. */

.site-kesif-adim-gosterge {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 1.1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--site-text-muted);
}

.site-kesif-adim-gosterge .aktif {
    color: var(--site-blue);
}

.site-kesif-form-flip {
    perspective: 1600px;
}

/* min-height ÖNCEDEN 320px'ti — Adım 1'in gerçek içerik yüksekliği (3 alan +
   buton) bunun altında olduğu için, CSS min-height JS'in doğru (küçük)
   height değerini EZİYORDU (min-height her zaman daha küçük bir height'ı
   kazanır) — kutunun altında büyük, gereksiz bir boşluk oluşuyordu (gerçek
   bug, kullanıcı ekran görüntüsüyle gösterdi). Değer artık SADECE JS hiç
   çalışmazsa diye bir alt güvenlik payı — gerçek içerik yüksekliğini asla
   zorlamaz. */
.site-kesif-form-flip-ic {
    position: relative;
    min-height: 120px;
    transition: transform 0.55s ease, height 0.3s ease;
    transform-style: preserve-3d;
}

.site-kesif-form-flip-ic.donuk {
    transform: rotateY(180deg);
}

.site-kesif-form-yuz {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.site-kesif-form-yuz--arka {
    transform: rotateY(180deg);
}

/* KRİTİK: backface-visibility:hidden bir yüzü GÖRSEL olarak gizler ama
   tıklama/klavye hedeflemesini (hit-testing/tab-sırası) otomatik olarak
   engellemez — arkada duran yüzün üstteki gizli alanı gerçek tıklamayı
   çalabiliyordu (Puppeteer ile doğrulanan gerçek bug). Aktif OLMAYAN yüz
   her zaman pointer-events:none olur, sadece görünen yüz tıklanabilir. */
.site-kesif-form-flip-ic:not(.donuk) .site-kesif-form-yuz--arka {
    pointer-events: none;
}

.site-kesif-form-flip-ic.donuk .site-kesif-form-yuz:not(.site-kesif-form-yuz--arka) {
    pointer-events: none;
}

.site-kesif-form-btn-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-kesif-form-btn-satir .site-btn {
    width: auto;
    flex: 1;
}

.site-kesif-form-geri {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--site-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.site-kesif-form-geri:hover {
    color: var(--site-text);
}

.site-kesif-form-geri svg {
    width: 15px;
    height: 15px;
    transform: rotate(180deg);
}

/* ---------- İstatistik barı ---------- */

.site-istatistik {
    background: linear-gradient(120deg, var(--site-blue), var(--site-blue-dark));
    border-radius: 20px;
    padding: 2.2rem 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: #fff;
}

.site-istatistik-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    justify-content: center;
    padding: 0 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.site-istatistik-item:last-child {
    border-right: none;
}

.site-istatistik-ikon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.site-istatistik-ikon svg {
    width: 21px;
    height: 21px;
}

.site-istatistik-item strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1.1;
}

/* :not(.site-istatistik-ikon) — AYNI kök neden (bkz. Ücretsiz Keşif kutusundaki
   düzeltme): bu genel "span" seçicisi ikon çemberini de yakalayıp
   display:flex'i eziyordu, ikon hiç merkezlenmiyordu. */
.site-istatistik-item span:not(.site-istatistik-ikon) {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.15rem;
}

/* ---------- Hizmetlerimiz ---------- */

.site-hizmetler {
    padding: 4.5rem 0;
    text-align: center;
}

.site-bolum-baslik {
    max-width: 560px;
    margin: 0 auto 2.6rem;
}

.site-bolum-baslik h2 {
    font-size: 2rem;
    margin: 0;
    color: var(--site-navy);
    letter-spacing: -0.01em;
}

/* 5 → 8 kart (yeni: Bahçe & Çim Bakımı, Havuz Temizliği, İlaçlama) — 4
   sütun × 2 satır düzenine geçildi, eşit/temiz bölünüyor. */
.site-hizmet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    text-align: left;
}

/* display:flex + flex-direction:column — KÖK NEDEN düzeltmesi: kart içindeki
   ok butonu (.site-hizmet-ok) önceden metnin hemen ardından, normal akışta
   duruyordu; açıklama metni kartlar arasında farklı uzunlukta olduğu için
   (örn. "Ofis Temizliği" tek satır, "Ev Temizliği" üç satır) ok her kartta
   FARKLI bir yükseklikte kalıyordu (kullanıcı ekran görüntüsüyle gösterdi).
   Grid zaten aynı satırdaki kartları eşit yüksekliğe geriyordu (align-items
   varsayılan stretch) ama kartın İÇİNDEKİ ok o eşit yüksekliği kullanmıyordu
   — flex-column + ok'un margin-top:auto ile alta sabitlenmesi bunu çözüyor. */
.site-hizmet-karti {
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.site-hizmet-karti:hover {
    box-shadow: 0 20px 40px -20px rgba(11, 28, 61, 0.3);
    transform: translateY(-3px);
}

.site-hizmet-foto {
    display: block;
    aspect-ratio: 4 / 3;
    position: relative;
    background-image: linear-gradient(135deg, #dbe6fb, #eef2fb);
    background-size: cover;
    background-position: center;
}

.site-hizmet-foto-ikon {
    position: absolute;
    left: 0.9rem;
    bottom: -18px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--site-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px -4px rgba(22, 86, 214, 0.5);
}

.site-hizmet-foto-ikon svg {
    width: 19px;
    height: 19px;
}

.site-hizmet-metin {
    padding: 1.6rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.site-hizmet-metin h3 {
    font-size: 1.02rem;
    margin: 0 0 0.5rem;
    color: var(--site-navy);
}

.site-hizmet-metin p {
    font-size: 0.82rem;
    color: var(--site-text-muted);
    line-height: 1.55;
    margin: 0 0 1rem;
}

.site-hizmet-ok {
    margin-top: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--site-bg-soft);
    color: var(--site-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.site-hizmet-ok:hover {
    background: var(--site-blue);
    color: #fff;
}

.site-hizmet-ok svg {
    width: 16px;
    height: 16px;
}


/* ---------- Referanslar / Testimonial ---------- */

/* Üst padding 4.5rem → 1.8rem — bir önceki bölüm (.site-hizmetler) zaten
   kendi 4.5rem alt padding'ini taşıyordu, ikisi üst üste binince aralarında
   gereksiz büyük bir boşluk oluşuyordu (kullanıcı ekran görüntüsüyle
   gösterdi). Alt padding aynı kaldı — footer'ın "çekmece" bindirme efekti
   (negatif margin) buna göre ayarlanmıştı. */
.site-referans {
    padding: 1.8rem 0 4.5rem;
}

/* İnce/yatay banner formatı — eskiden kare/uzun bir kutuydu (aspect-ratio
   4/3 fotoğraf + geniş dikey boşluklar), kullanıcı "slider'da yaptığımız
   gibi ama daha yatayda ince olacak" dedi. min-height ile satır kısa
   tutuluyor, fotoğraf o kısa satırın TAMAMINI dolduruyor (height:100%),
   metin tarafı da flex+center ile o kısa alana dikey ortalanıyor. */
/* Dolgu (padding) DIŞ KUTUDAN TAMAMEN KALDIRILDI — sadece sağ değil, üst/alt
   da boşluk bırakıyordu (kullanıcı ekran görüntüsüyle gösterdi). Dolgu artık
   SADECE .site-referans-icerik'te (metin tarafı) — foto hiçbir kısıtlama
   olmadan dört yandan (çapraz kesim hariç) kartın gerçek sınırına kadar
   uzanıyor. overflow:hidden güvenlik ağı — foto kendi köşe yarıçapıyla
   zaten uyumlu ama garantiye alınıyor. */
.site-referans-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: stretch;
    background: var(--site-bg-soft);
    border-radius: 22px;
    min-height: 180px;
    overflow: hidden;
}

.site-referans-icerik {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.8rem 0 1.8rem 2.2rem;
}

.site-referans-tirnak {
    width: 26px;
    height: 26px;
    color: var(--site-blue);
    opacity: 0.3;
    margin-bottom: 0.5rem;
}

.site-referans-metin {
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--site-navy);
    margin: 0 0 0.6rem;
}

.site-referans-kisi strong {
    display: block;
    font-size: 0.88rem;
}

.site-referans-kisi span {
    display: block;
    font-size: 0.75rem;
    color: var(--site-text-muted);
    margin-top: 0.1rem;
}

/* Görsel HER ZAMAN SABİT (rotasyon sadece metinde) — kısa/yatay satırın
   tamamını dolduruyor, eski aspect-ratio:4/3 (uzun/kare) kaldırıldı. Diyagonal
   clip-path — hero fotoğrafındaki (.site-hero-foto) BİREBİR AYNI değerler,
   kullanıcı "diğer alanlarımız nasıl ise aynısı olacak" dedi, tutarlılık
   için aynı kesim tekrarlandı. */
.site-referans-foto {
    height: 100%;
    min-height: 140px;
    border-radius: 0 22px 22px 0;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-image: linear-gradient(135deg, #dbe6fb, #eef2fb);
    background-size: cover;
    background-position: right center;
}

/* ---------- Footer ---------- */

/* "Çekmece" (drawer) efekti — footer üst kenarı yuvarlatılıp negatif
   margin-top ile referans bölümünün altına doğru YUKARI çekiliyor, sanki
   koyu kutu içerik alanının altından dışarı kayıyormuş gibi. Aynı "üste
   binen yuvarlak köşeli koyu kutu" deseni sayfada zaten iki kez kullanıldı
   (hero fotoğrafı → güven barı, kesif kutusu) — burada footer'a genişletildi.
   z-index + box-shadow, kutunun gerçekten üstte/yükseltilmiş durduğu
   hissini güçlendiriyor. */
.site-footer {
    background: var(--site-navy);
    color: rgba(255, 255, 255, 0.7);
    padding: 3.5rem 0 0;
    border-radius: 28px 28px 0 0;
    margin-top: -3rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 -24px 48px -28px rgba(11, 28, 61, 0.35);
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 2.5rem;
    padding-bottom: 2.8rem;
}

.site-footer .site-logo span:first-child {
    color: #fff;
}

.site-footer-marka p {
    font-size: 0.85rem;
    line-height: 1.65;
    margin: 1rem 0 1.4rem;
    max-width: 280px;
}

.site-footer-sosyal {
    display: flex;
    gap: 0.6rem;
}

.site-footer-sosyal a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.site-footer-sosyal a:hover {
    background: var(--site-blue);
}

.site-footer-sosyal a svg {
    width: 16px;
    height: 16px;
}

.site-footer h4 {
    color: #fff;
    font-size: 0.95rem;
    margin: 0 0 1.1rem;
}

.site-footer-linkler {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer-linkler li {
    margin-bottom: 0.7rem;
}

.site-footer-linkler a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.85rem;
}

.site-footer-linkler a:hover {
    color: #fff;
}

.site-footer-iletisim li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* KÖK NEDEN (2026-08-06) — `var(--site-blue)` (#1656d6) koyu navy footer
   zemininde (`var(--site-navy)`, #0b1c3d) çok düşük kontrastla "kaybolan"
   bir ikon rengiydi. İLK düzeltmede `--site-blue-light` (açık mavi) denendi
   ama kullanıcı bunun da HÂLÂ mavi tonda olduğunu, navy zeminle "aynı renk
   farklı tonaj" gibi durup uyumsuz göründüğünü belirtti — istenen tam BEYAZ
   (diğer footer ikonlarıyla — sosyal medya ikonu, logo — AYNI renk). */
.site-footer-iletisim svg {
    width: 16px;
    height: 16px;
    color: #fff;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.site-footer-alt {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.3rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.78rem;
}

.site-footer-alt-linkler {
    display: flex;
    gap: 1.2rem;
}

.site-footer-alt-linkler a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.site-footer-alt-linkler a:hover {
    color: #fff;
}

/* ---------- İçerik sayfaları (hizmet/kurumsal/blog/referans/iletişim detay) ----------
   Anasayfa dışındaki tüm vitrin sayfalarının paylaştığı genel bileşenler —
   aynı renk/radius/boşluk token'larını (--site-*) kullanır, yeni bir görsel
   dil icat edilmedi. .site-sayfa header'ın altındaki ilk bölüm için üst
   boşluk + footer'ın -3rem'lik üste binmesinden önce yeterli alt boşluk
   sağlar (bkz. .site-footer'daki negatif margin notu). */

.site-sayfa {
    padding: 3rem 0 4.5rem;
}

.site-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--site-text-muted);
    margin-bottom: 1.8rem;
}

.site-breadcrumb a {
    color: var(--site-blue);
    text-decoration: none;
    font-weight: 600;
}

.site-breadcrumb a:hover {
    text-decoration: underline;
}

.site-breadcrumb svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.site-sayfa-baslik {
    max-width: 720px;
    margin-bottom: 2.6rem;
}

.site-sayfa-baslik h1 {
    font-size: 2.1rem;
    margin: 0 0 0.8rem;
    color: var(--site-navy);
    letter-spacing: -0.01em;
}

.site-sayfa-baslik p {
    font-size: 1rem;
    color: var(--site-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* İki sütunlu detay şablonu (hizmet/kurumsal/blog detay) — sol: içerik, sağ: .site-yan-liste */
.site-detay-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.8rem;
    align-items: start;
}

.site-detay-foto {
    aspect-ratio: 16 / 9;
    border-radius: var(--site-radius);
    background-size: cover;
    background-position: center;
    margin-bottom: 1.8rem;
}

.site-prose p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--site-text);
    margin: 0 0 1.2rem;
}

.site-prose p:last-child {
    margin-bottom: 0;
}

/* Yan liste — "Diğer Hizmetlerimiz" / "Diğer Kurumsal Sayfalar" / "İlgili Yazılar"
   ihtiyaçlarının HEPSİNDE kullanılan tek/paylaşılan bileşen. */
.site-yan-liste {
    background: var(--site-bg-soft);
    border-radius: var(--site-radius);
    padding: 1.5rem;
}

.site-yan-liste h3 {
    font-size: 1rem;
    margin: 0 0 1rem;
    color: var(--site-navy);
}

.site-yan-liste ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.site-yan-liste a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: #fff;
    color: var(--site-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid var(--site-border);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.site-yan-liste a:hover {
    border-color: var(--site-blue);
    color: var(--site-blue);
}

.site-yan-liste a svg {
    width: 14px;
    height: 14px;
    color: var(--site-blue);
    flex-shrink: 0;
}

/* ---------- Blog liste ---------- */

.site-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.site-blog-karti {
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.site-blog-karti:hover {
    box-shadow: 0 20px 40px -20px rgba(11, 28, 61, 0.3);
    transform: translateY(-3px);
}

.site-blog-karti-gorsel {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--site-bg-soft), #eef2fb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-blue);
}

.site-blog-karti-gorsel svg {
    width: 32px;
    height: 32px;
}

.site-blog-karti-metin {
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.site-blog-karti-kategori {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--site-red);
    margin-bottom: 0.5rem;
}

.site-blog-karti-metin h3 {
    font-size: 1.02rem;
    margin: 0 0 0.6rem;
    color: var(--site-navy);
    line-height: 1.35;
}

.site-blog-karti-metin p {
    font-size: 0.85rem;
    color: var(--site-text-muted);
    line-height: 1.55;
    margin: 0 0 1rem;
    flex: 1;
}

.site-blog-karti-tarih {
    font-size: 0.78rem;
    color: var(--site-text-muted);
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 1px solid var(--site-border);
}

/* ---------- Referanslarımız (yorum grid'i) ---------- */

.site-yorum-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.site-yorum-karti {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 1.6rem;
}

.site-yorum-karti-ikon {
    color: var(--site-blue);
    display: block;
    margin-bottom: 0.8rem;
}

.site-yorum-karti-ikon svg {
    width: 26px;
    height: 26px;
}

.site-yorum-karti p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--site-text);
    margin: 0 0 1rem;
}

.site-yorum-karti strong {
    display: block;
    font-size: 0.88rem;
    color: var(--site-navy);
}

.site-yorum-karti span {
    font-size: 0.78rem;
    color: var(--site-text-muted);
}

/* ---------- İletişim ---------- */

.site-iletisim-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
    margin-bottom: 2.8rem;
}

.site-iletisim-kart {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    padding: 1.5rem 1.2rem;
    text-align: center;
}

.site-iletisim-kart-ikon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--site-bg-soft);
    color: var(--site-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.9rem;
}

.site-iletisim-kart-ikon svg {
    width: 20px;
    height: 20px;
}

.site-iletisim-kart h3 {
    font-size: 0.92rem;
    margin: 0 0 0.4rem;
    color: var(--site-navy);
}

.site-iletisim-kart p {
    font-size: 0.85rem;
    color: var(--site-text-muted);
    margin: 0;
    line-height: 1.5;
}

.site-iletisim-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.8rem;
    align-items: start;
}

/* KÖK NEDEN BUG (2026-08-06) — `:not([type="checkbox"])` EKLENDİ: bu genel
   kural `<input type="checkbox">`'a da uygulanıyordu — `width:100%` bir
   checkbox'ı, kendi flex konteynırının (`.site-auth-checkbox`) TÜM
   genişliğine (ölçüldü: 380px!) yayıyordu, yanındaki metin span'ine SIFIR
   alan kalıyordu (flex:1 olan span 0'a kadar küçüldü). Checkbox'ın yanındaki
   metnin "kopuk/taşmış" görünmesinin GERÇEK kök nedeni buydu — önceki
   `<span>` sarma düzeltmesi doğruydu ama bu YAN ETKİYİ ortaya çıkardı
   (span'in flex:1'i çalıştı, ama paylaşacağı alan checkbox tarafından
   gasp edilmişti). */
.site-form input:not([type="checkbox"]),
.site-form select,
.site-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--site-border);
    border-radius: 10px;
    font-family: var(--site-font);
    font-size: 0.92rem;
    color: var(--site-text);
    margin-bottom: 1rem;
    background: #fff;
}

.site-form textarea {
    min-height: 130px;
    resize: vertical;
}

.site-harita-bos {
    background: var(--site-bg-soft);
    border: 1px dashed var(--site-border);
    border-radius: var(--site-radius);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--site-text-muted);
}

.site-harita-bos svg {
    width: 32px;
    height: 32px;
    color: var(--site-blue);
    margin-bottom: 0.8rem;
}

.site-harita-bos p {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
}

/* ---------- Hizmet bölgesi kartları (il/ilçe link grid'i) ----------
   views/bolge_detay.php (il modu) ve views/hizmet_bolgelerimiz.php (hub) */

.site-bolge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.site-bolge-karti {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    background: var(--site-bg-soft);
    color: var(--site-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid var(--site-border);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.site-bolge-karti:hover {
    border-color: var(--site-blue);
    background: #fff;
}

.site-bolge-karti > svg:first-child {
    width: 16px;
    height: 16px;
    color: var(--site-blue);
    flex-shrink: 0;
}

.site-bolge-karti > span {
    flex: 1;
}

.site-bolge-karti > svg:last-child {
    width: 14px;
    height: 14px;
    color: var(--site-text-muted);
    flex-shrink: 0;
}

/* ---------- SSS (FAQ) — JS ile yükseklik ölçülüp animasyonlu açılıp kapanıyor ----------
   Anasayfa, hizmet bölgelerimiz hub'ı ve her bölge detay sayfasında kullanılıyor.
   FAQPage şemasıyla (bkz. ilgili PHP dosyaları) AYNI soru-cevap verisinden
   beslenir. ÖNCEDEN native <details>/<summary> kullanılıyordu (sıfır JS) —
   kullanıcı "yağ gibi" (buttery/smooth) bir açılış-kapanış istediği için,
   native <details> bunu güvenilir şekilde animasyonlayamadığından (tarayıcı
   desteği tutarsız) JS ile ölçülen max-height geçişine çevrildi — bu proje
   genelinde zaten kurulu akordeon deseniyle (bkz. assets/js/admin.js, keşif
   formu flip yüksekliği) AYNI teknik. JS bkz. views/partials/site_footer.php. */

.site-faq-item {
    border: 1px solid var(--site-border);
    border-radius: 12px;
    margin-bottom: 0.8rem;
    background: #fff;
    overflow: hidden;
}

.site-faq-soru {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.2rem;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--site-font);
    color: var(--site-navy);
    text-align: left;
}

.site-faq-soru svg {
    width: 16px;
    height: 16px;
    color: var(--site-text-muted);
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.site-faq-soru.acik svg {
    transform: rotate(180deg);
}

.site-faq-cevap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.site-faq-cevap p {
    margin: 0;
    padding: 0 1.2rem 1.1rem;
    font-size: 0.88rem;
    color: var(--site-text-muted);
    line-height: 1.6;
}

/* Yatay bölüm başlığı — küçük etiket SOLDA, büyük başlık SAĞDA (+ dekoratif
   bar) — .site-bolum-baslik'in varsayılan ortalanmış/dikey blok deseninden
   BİLEREK farklı, PAYLAŞILAN bir düzen. Şu an 2 yerde kullanılıyor:
   anasayfadaki "Hizmetlerimiz" VE "Aklınıza Gelen Sorular" başlıkları — ikisi
   de AYNI class'ı kullandığı için otomatik olarak aynı düzen+font boyutunu
   paylaşıyor (kullanıcı "ikisi de aynı olacak" dedi, önceden Hizmetlerimiz
   hâlâ eski .site-bolum-baslik'te kalıp tutarsızlık yaratıyordu — düzeltildi).
   .site-bolum-baslik'in KENDİSİ değiştirilmedi — bolge_detay.php ve
   hizmet_bolgelerimiz.php'deki 4 farklı (ortalanmış olması GEREKEN)
   kullanımını kırmamak için BİLEREK ayrı bir class olarak tutuldu.
   text-align:left EKLENDİ — .site-hizmetler gibi text-align:center olan bir
   ebeveynin içinde kullanılsa da kendi hizalamasını garantiliyor. */
.site-bolum-baslik-yatay {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem 1.5rem;
    margin-bottom: 1.8rem;
    text-align: left;
}

.site-bolum-baslik-yatay .site-etiket {
    margin-bottom: 0;
}

.site-bolum-baslik-yatay h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    font-size: 1.8rem;
    color: var(--site-navy);
    letter-spacing: -0.01em;
}

/* Dekoratif "yağ gibi silinen" bar — renkten şeffafa yumuşak geçiş, başlık
   metninin hemen ardına ekleniyor (Hizmetlerimiz + Aklınıza Gelen Sorular). */
.site-baslik-cizgi {
    display: inline-block;
    height: 3px;
    width: clamp(50px, 12vw, 140px);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--site-blue), rgba(22, 86, 214, 0));
    flex-shrink: 0;
}

.site-faq-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    align-items: start;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
    .site-hizmet-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .site-footer-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
    }

    .site-footer-grid > div:last-child {
        grid-column: 1 / -1;
    }

    .site-blog-grid,
    .site-yorum-grid,
    .site-bolge-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-iletisim-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 960px) {
    .site-nav,
    .site-header-sag .site-iletisim-ikon,
    .site-header-sag .site-hesap-menu {
        display: none;
    }

    .site-hamburger {
        display: inline-flex;
    }

    .site-mobil-nav {
        display: flex;
    }

    .site-mobil-nav-overlay {
        display: block;
    }

    .site-hero-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .site-hero-metin {
        max-width: none;
        padding: 1.5rem 0 0;
    }

    .site-hero-foto {
        min-height: 240px;
        clip-path: none;
        border-radius: 16px;
    }

    .site-hero-alt {
        margin-bottom: 0;
    }

    .site-guven-bari {
        transform: none;
    }

    .site-hero h1 {
        font-size: 2.1rem;
    }

    .site-hero p {
        max-width: none;
    }

    .site-guven-bari {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-guven-item:nth-child(2) {
        border-right: none;
    }

    .site-guven-item {
        border-bottom: 1px solid var(--site-border);
    }

    .site-guven-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .site-kesif-kutu {
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .site-istatistik {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1.6rem;
    }

    .site-istatistik-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        padding-bottom: 1.4rem;
    }

    .site-istatistik-item:nth-last-child(-n+2) {
        border-bottom: none;
        padding-bottom: 0;
    }

    .site-hizmet-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-referans-grid {
        grid-template-columns: 1fr;
        padding: 2rem;
        min-height: 0;
    }

    /* Dolgu mobilde tekrar dış kutuya (.site-referans-grid) taşındı — metin
       tarafının kendi dolgusu (masaüstünde kullanılan) SIFIRLANIYOR, aksi
       halde iki dolgu üst üste binip metin mobilde aşırı içeri kayardı. */
    .site-referans-icerik {
        padding: 0;
    }

    /* Tek sütuna düşünce satır artık fotoğrafın height:100% için referans
       alacağı bir "satır yüksekliği" taşımıyor (grid tek sütuna iniyor) —
       sabit bir yükseklik veriliyor ki fotoğraf sıfıra çökmesin. */
    .site-referans-foto {
        order: -1;
        height: 200px;
        min-height: 0;
        border-radius: 14px;
    }

    .site-detay-grid,
    .site-iletisim-form-grid,
    .site-faq-columns {
        grid-template-columns: 1fr;
    }

    .site-bolum-baslik-yatay h2 {
        font-size: 1.5rem;
    }

    .site-baslik-cizgi {
        width: clamp(40px, 20vw, 90px);
    }

    .site-sayfa-baslik h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 640px) {
    /* Modal 2 sütun (görsel+form) sadece daha geniş ekranlarda anlamlı —
       dar telefonlarda görsel gizlenip form tam genişlik tek sütun olur
       (bkz. .site-auth-gorsel'in varsayılan `display:none`'ı, üstteki
       @media (min-width:641px) bloğu SADECE bu breakpoint'in üstünde
       gösteriyor). */
    .site-auth-modal {
        grid-template-columns: 1fr;
        max-height: calc(100vh - 2rem);
    }

    .site-auth-icerik {
        padding: 2.25rem 1.5rem 1.75rem;
    }

    .site-hero-metin {
        padding: 1rem 0 0;
    }

    .site-hero h1 {
        font-size: 1.7rem;
    }

    .site-guven-bari,
    .site-hizmet-grid {
        grid-template-columns: 1fr;
    }

    .site-guven-item,
    .site-hizmet-karti {
        border-right: none;
        border-bottom: 1px solid var(--site-border);
    }

    .site-guven-item:last-child {
        border-bottom: none;
    }

    .site-istatistik {
        grid-template-columns: 1fr;
    }

    .site-istatistik-item {
        justify-content: flex-start;
        padding-bottom: 1.2rem;
        margin-bottom: 1.2rem;
    }

    .site-istatistik-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .site-kesif-kutu {
        padding: 1.5rem;
    }

    .site-footer-grid {
        grid-template-columns: 1fr;
    }

    .site-footer-grid > div:last-child {
        grid-column: auto;
    }

    .site-footer-alt {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-blog-grid,
    .site-yorum-grid,
    .site-iletisim-grid,
    .site-bolge-grid {
        grid-template-columns: 1fr;
    }

    .site-sayfa {
        padding: 2rem 0 3.5rem;
    }

}

/* Çok dar telefonlar (iPhone SE ~375px, küçük Android'ler) — admin.css'teki
   480px breakpoint konvansiyonuyla tutarlı ince ayar katmanı. */
@media (max-width: 480px) {
    .site-hero-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .site-hero-btns .site-btn {
        width: 100%;
    }

    .site-guven-item {
        padding: 1rem 1.2rem;
    }

    .site-kesif-form {
        padding: 1.2rem;
    }

    .site-referans-metin {
        font-size: 1.05rem;
    }

    .site-referans-grid {
        padding: 1.5rem;
    }
}