/* ============================================================
   RENK PALETİ:
     Ana arka plan   → Saf beyaz (#ffffff)
     Altern. bölüm   → Açık gri (#f8fafc)
     Başlık metni    → Derin antrasit (#1e293b)
     Gövde metni     → Slate gri (#475569)
     Vurgu rengi     → Kurumsal Derin Mavi (#004a99)
     Kenarlıklar     → Açık gri (#e2e8f0)

   İÇİNDEKİLER:
   1.  Google Font & Sıfırlama
   2.  CSS Değişkenleri (Açık Mod Tasarım Sistemi)
   3.  Genel Yardımcılar
   4.  Butonlar
   5.  Üst Başlık & Navigasyon
   6.  Hamburger & Mobil Menü
   7.  Giriş Ekranı
   8.  Hizmetler Bölümü
   9.  Neden Biz? Bölümü
   10. Müşteri Görüşleri
   11. İletişim Bölümü
   12. SSS (Sıkça Sorulan Sorular)
   13. Sayfa En Altı (Footer)
   14. Yukarı Dön Butonu
   15. Animasyonlar
   16. Medya Sorguları (Responsive)
   ============================================================ */


/*1. GOOGLE FONT İÇE AKTARMA & SIFIRLAMA*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

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


/*2. CSS DEĞİŞKENLERİ — AÇIK MOD TASARIM SİSTEMİ
  :root → Sayfa kökü; tüm değişkenler buradan erişilebilir */
:root {
  /* ---- ARKA PLAN RENKLERİ ---- */
  --bg_beyaz:       #ffffff;   /* Ana arka plan: Saf beyaz */
  --bg_acik:        #f8fafc;   /* Dönüşümlü bölüm arka planı: Çok açık gri */
  --bg_cok_acik:    #f1f5f9;   /* Kart içi arka plan */
  --bg_mavi_hafif:  #eef4ff;   /* Hafif mavi tint — öne çıkan kartlar */

  /* ---- METİN RENKLERİ ---- */
  --metin_baslik:   #1e293b;   /* Derin Slate: Başlıklar */
  --metin_govde:    #475569;   /* Slate Gri: Gövde metni */
  --metin_soluk:    #94a3b8;   /* Açık Slate: Yardımcı, placeholder */
  --metin_cok_acik: #cbd5e1;   /* En açık — ikincil açıklamalar */
  --beyaz:          #ffffff;

  /* ---- KURUMSAL MAVİ VURGU (#004a99) ---- */
  --kurumsal_mavi:      #004a99;            /* Ana vurgu — butonlar, ikonlar */
  --koyu_kurumsal_mavi: #003a7a;            /* Hover/aktif durumu */
  --acik_kurumsal_mavi: #0060c8;            /* Açık ton hover parlaklığı */
  --mavi_parcil:        rgba(0,74,153,0.08); /* Şeffaf mavi arka plan */
  --mavi_kenar:         rgba(0,74,153,0.2);  /* Mavi kenarlık */
  --mavi_glow:          rgba(0,74,153,0.18); /* Mavi gölge/parıltı */

  /* ---- KENARLIKLAR ---- */
  --kenar_rengi:    #e2e8f0;   /* Standart kenarlık: Açık gri */
  --kenar_acik:     #f1f5f9;   /* Çok açık kenarlık */

  /* ---- GÖLGELER — Minimal, Professional ---- */
  /* Açık modda gölgeler koyu moddan çok daha hafif olmalı */
  --golge_cok_hafif: 0 1px 2px rgba(15,23,42,0.04);
  --golge_hafif:     0 2px 8px rgba(15,23,42,0.06);
  --golge_orta:      0 4px 20px rgba(15,23,42,0.08);
  --golge_belirgin:  0 8px 40px rgba(15,23,42,0.1);
  --golge_derin:     0 20px 60px rgba(15,23,42,0.12);
  --mavi_golgesi:    0 4px 20px rgba(0, 74, 153, 0.22);

  /* ---- KÖŞE YARICAPLARI ---- */
  --radius_kucuk:     8px;
  --radius_orta:      12px;
  --radius_buyuk:     20px;
  --radius_cok_buyuk: 32px;

  /* ---- GEÇİŞ ANİMASYONU ---- */
  --gecis: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- YAZI TİPİ ---- */
  --font: 'Poppins', sans-serif;
}


/* 3. GENEL YARDIMCI SINIFLAR */

/* Yumuşak sayfa kaydırma */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* Body: Açık arka plan + koyu metin */
body {
  font-family: var(--font);
  background-color: var(--bg_beyaz);
  color: var(--metin_govde);
  line-height: 1.7;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

button,
input,
textarea,
select { font-family: var(--font); }

button { border: none; cursor: pointer; }

/* Özel kaydırma çubuğu — Kurumsal mavi */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg_acik); }
::-webkit-scrollbar-thumb {
  background: var(--kurumsal_mavi);
  border-radius: 4px;
}

/* .konteyner: İçeriği ortalar, maksimum genişlik */
.konteyner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* .bolum: Her bölüm üst/alt boşluk */
.bolum {
  padding: 96px 0;
  position: relative;
}

/* Vurgu (kurumsal mavi) metin rengi */
.vurgu_rengi { color: var(--kurumsal_mavi); }

/* Bölüm etiketi rozeti */
.bolum_etiketi {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kurumsal_mavi);
  background: var(--mavi_parcil);
  border: 1px solid var(--mavi_kenar);
  padding: 5px 16px;
  border-radius: 50px;
  margin-bottom: 14px;
}

/* Bölüm başlık grubu */
.bolum_baslik_grubu {
  text-align: center;
  margin-bottom: 60px;
}

/* Bölüm ana başlığı */
.bolum_baslik {
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  font-weight: 700;
  color: var(--metin_baslik);
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.sol_hizali { text-align: left; }

/* Bölüm alt açıklaması */
.bolum_alt_baslik {
  max-width: 540px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--metin_govde);
}

/* Gradyan metin efekti: Kurumsal mavi ton */
.altin_metin {
  background: linear-gradient(135deg, #60a5fa, #93c5fd, #bfdbfe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ============================================================
   4. BUTONLAR
   Açık modda butonlar belirgin ve net olmalı
   ============================================================ */
.buton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: var(--gecis);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}

/* Ana (birincil) buton: Kurumsal mavi dolgu */
.buton_birincil {
  background: var(--kurumsal_mavi);
  color: var(--beyaz);
  border-color: var(--kurumsal_mavi);
  box-shadow: var(--mavi_golgesi);
}

.buton_birincil:hover {
  background: var(--koyu_kurumsal_mavi);
  border-color: var(--koyu_kurumsal_mavi);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,74,153,0.3);
}

/* İkincil buton: Bakım Takip — Outlined mavi
   Birincil butona kıyasla görsel olarak daha sakin ancak belirgin */
.buton_ikincil {
  background: transparent;
  color: var(--kurumsal_mavi);
  border-color: var(--kurumsal_mavi);
}

.buton_ikincil:hover {
  background: var(--mavi_parcil);
  transform: translateY(-2px);
}

/* Beyaz buton: Giriş ekranı içi ikincil aksiyon */
.buton_beyaz {
  background: rgba(255,255,255,0.15);
  color: var(--beyaz);
  border-color: rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
}

.buton_beyaz:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

/* Tam genişlik: Form gönder butonu */
.tam_genislik_buton {
  width: 100%;
  justify-content: center;
}


/* ============================================================
   5. ÜST BAŞLIK & NAVİGASYON
   ============================================================ */
.ust_baslik {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* Başlangıçta şeffaf */
  background: rgba(255,255,255,0);
  padding: 20px 0;
  transition: var(--gecis);
}

/* Kaydırılınca: Beyaz katı arka plan + altı çizgi */
.ust_baslik.kaydirilan {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--kenar_rengi);
  padding: 14px 0;
  box-shadow: var(--golge_hafif);
}

/* Navigasyon: Flexbox yatay düzeni */
.ust_menu_alani {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--metin_baslik);
  transition: var(--gecis);
}

.logo:hover { opacity: 0.85; }

/* Logo ikonu: Kurumsal mavi kare */
.logo_ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--kurumsal_mavi);
  border-radius: 10px;
  font-size: 1rem;
  color: var(--beyaz);
  box-shadow: 0 2px 10px rgba(0,74,153,0.3);
}

/* Menü linkleri */
.menu_linkleri {
  display: flex;
  align-items: center;
  gap: 4px;
}

.menu_link {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--metin_govde);
  transition: var(--gecis);
  position: relative;
}

/* Alt çizgi efekti: Kurumsal mavi */
.menu_link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--kurumsal_mavi);
  border-radius: 2px;
  transition: var(--gecis);
}

.menu_link:hover  { color: var(--kurumsal_mavi); background: var(--mavi_parcil); }
.menu_link.aktif  { color: var(--kurumsal_mavi); font-weight: 600; }

.menu_link:hover::after,
.menu_link.aktif::after { width: 55%; }

/* Nav buton grubu: Bakım Takip + Teklif Al */
.nav_buton_grubu {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ============================================================
   6. HAMBURGER & MOBİL MENÜ
   ============================================================ */
.hamburger_menu {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 6px;
  border-radius: 8px;
}

.hamburger_menu span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--metin_baslik);
  border-radius: 2px;
  transition: var(--gecis);
}

.hamburger_menu.acik span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger_menu.acik span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger_menu.acik span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobil menü: Beyaz panel (Açık mod) */
.mobil_menu {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  padding-top: 100px;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  border-left: 1px solid var(--kenar_rengi);
}

.mobil_menu.acik { transform: translateX(0); }

.mobil_menu ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 32px;
}

.mobil_link {
  display: block; width: 100%; text-align: center;
  padding: 14px; font-size: 1.1rem; font-weight: 600;
  color: var(--metin_baslik); border-radius: var(--radius_orta);
  transition: var(--gecis);
}

.mobil_link:hover { background: var(--mavi_parcil); color: var(--kurumsal_mavi); }

.mobil_buton { margin-top: 8px; width: 100%; text-align: center; }


/* ============================================================
   7. GİRİŞ EKRANI (HERO)
   Koyu hero + açık sayfa: Schindler/Otis yaklaşımı
   Kurumsal mavi kaplama üst kat → Güçlü kontrast
   ============================================================ */
.giris_ekrani {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Profesyonel mimari asansör arka planı */
  background:
    url('https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=1920&q=80')
    center / cover no-repeat;
}

/* Kaplama: Kurumsal derin mavi gradyan
   Şeffaflık: Fotoğraf hafifçe görünsün ama mavi hakim olsun */
.giris_kaplama {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 30, 80, 0.96)  0%,    /* Çok koyu kurumsal mavi — sol üst */
    rgba(0, 60, 140, 0.90) 45%,   /* Kurumsal #004a99 benzeri */
    rgba(0, 20, 60, 0.95)  100%   /* Derin lacivert — sağ alt */
  );
}

/* Parçacık konteyneri */
.parcaciklar {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}

/* Parçacık elemanları: Açık mavi tonda */
.parcacik {
  position: absolute;
  bottom: -10px;
  background: rgba(147, 197, 253, 0.6);  /* Açık mavi parçacık */
  border-radius: 50%;
  animation: yukariUcus linear infinite;
}

/* Giriş içerik bloğu */
.giris_icerik {
  position: relative; z-index: 2;
  text-align: center;
  padding: 120px 24px 80px;
  max-width: 880px; margin: 0 auto;
}

/* Rozet: Lokasyon + 7/24 */
.giris_rozet {
  display: inline-flex;
  align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 7px 18px;
  font-size: 0.8rem; font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  animation: yukariGel 0.8s ease both;
}

.giris_rozet i { color: #93c5fd; }

/* Ana başlık */
.giris_baslik {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--beyaz);
  line-height: 1.12;
  margin-bottom: 22px;
  animation: yukariGel 0.9s ease 0.15s both;
  letter-spacing: -0.02em;
}

/* Alt başlık */
.giris_alt_baslik {
  font-size: clamp(0.98rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.8);
  max-width: 600px; margin: 0 auto 36px;
  animation: yukariGel 0.9s ease 0.25s both;
  line-height: 1.8;
}

/* Buton grubu */
.giris_butonlar {
  display: flex; gap: 14px;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 56px;
  animation: yukariGel 0.9s ease 0.35s both;
}

/* ---- RAKAMLARLA BİZ (rakamlarla_biz)
   Glassmorphism üstüne açık yüzey — Premium cam kartı
   ============================================================ */
.rakamlarla_biz {
  display: flex;
  align-items: center; justify-content: center;
  /* Şeffaf beyaz cam yüzey — hero için */
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius_cok_buyuk);
  backdrop-filter: blur(16px);
  padding: 24px 48px;
  animation: yukariGel 0.9s ease 0.45s both;
}

.rakam_ogesi { text-align: center; padding: 0 36px; }

/* Büyük rakam sayacı */
.sayi_sayaci {
  font-size: 2.3rem; font-weight: 900;
  color: var(--beyaz); display: inline;
}

.sayi_artisi {
  font-size: 1.6rem; font-weight: 900;
  color: #93c5fd;  /* Mavi açık tonu — rakamla uyum */
}

.rakam_etiketi {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 4px;
}

/* Dikey ayırıcı */
.rakam_cubugu {
  width: 1px; height: 46px;
  background: rgba(255,255,255,0.2);
}

/* Aşağı kaydir oku */
.asagi_kaydir_oku {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6); font-size: 0.8rem;
  animation: zipla 2.5s infinite;
  z-index: 2; transition: var(--gecis);
}

.asagi_kaydir_oku:hover {
  border-color: #93c5fd; color: #93c5fd;
}


/* ============================================================
   8. HİZMETLER BÖLÜMÜ (hizmet_kutulari)
   Arka plan: Açık gri (#f8fafc) — Sayfa içi kontrast
   ============================================================ */
.hizmetler_bolumu {
  background: var(--bg_acik);
}

/* CSS Grid: 3 eşit sütun */
.hizmet_kutulari {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Hizmet kartı: Beyaz yüzey, hafif gölge — Açık mod premium */
.hizmet_karti {
  background: var(--bg_beyaz);
  border: 1px solid var(--kenar_rengi);
  border-radius: var(--radius_buyuk);
  padding: 36px 28px;
  transition: var(--gecis);
  position: relative;
  overflow: hidden;
}

/* Sol kenarlık çizgisi efekti — Hover'da görünür
   Açık modda bu tarz ince detaylar çok etkili */
.hizmet_karti::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--kurumsal_mavi);
  border-radius: 4px 0 0 4px;
  transform: scaleY(0);
  transition: var(--gecis);
}

/* Kartların üzerine gelince gölge + sol çizgi belirir */
.hizmet_karti:hover {
  transform: translateY(-6px);
  border-color: var(--mavi_kenar);
  box-shadow: var(--golge_belirgin);
}

.hizmet_karti:hover::before { transform: scaleY(1); }

/* Öne çıkan kart: Hafif mavi arka plan */
.one_cikan_kart {
  background: var(--bg_mavi_hafif);
  border-color: var(--mavi_kenar);
  box-shadow: var(--golge_orta);
}

/* "En Popüler" rozeti */
.en_populer_rozeti {
  display: inline-flex;
  position: absolute; top: 20px; right: 20px;
  background: var(--kurumsal_mavi);
  color: var(--beyaz);
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 12px; border-radius: 50px;
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* İkon sarmalayıcı */
.hizmet_ikon_sarmali {
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 20px;
}

/* İkon: Mavi arka planlı daire */
.hizmet_ikonu {
  font-size: 1.8rem;
  color: var(--kurumsal_mavi);
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mavi_parcil);
  border-radius: 50%;
  border: 1px solid var(--mavi_kenar);
  transition: var(--gecis);
}

.hizmet_karti:hover .hizmet_ikonu {
  background: var(--kurumsal_mavi);
  color: var(--beyaz);
  transform: scale(1.05);
}

.hizmet_karti_basligi {
  font-size: 1.2rem; font-weight: 700;
  color: var(--metin_baslik); margin-bottom: 10px;
}

.hizmet_karti_aciklamasi {
  font-size: 0.9rem; color: var(--metin_govde);
  line-height: 1.7; margin-bottom: 18px;
}

.hizmet_ozellik_listesi {
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 24px;
}

.hizmet_ozellik_listesi li {
  font-size: 0.85rem; color: var(--metin_govde);
  display: flex; align-items: center; gap: 8px;
}

.hizmet_ozellik_listesi li .fa-check {
  color: var(--kurumsal_mavi); font-size: 0.72rem; flex-shrink: 0;
}

.hizmet_detay_linki {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.88rem; font-weight: 600;
  color: var(--kurumsal_mavi); transition: var(--gecis);
}

.hizmet_detay_linki:hover { gap: 12px; }


/* ============================================================
   9. NEDEN BİZ? BÖLÜMÜ
   Arka plan: Beyaz — Hizmetlerden sonra nefes alınan alan
   ============================================================ */
.neden_biz_bolumu {
  background: var(--bg_beyaz);
}

/* İki sütun grid */
.neden_biz_izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.neden_giris_metni {
  color: var(--metin_govde); font-size: 1rem;
  line-height: 1.8; margin-bottom: 36px;
}

.ozellik_listesi {
  display: flex; flex-direction: column; gap: 22px;
}

.ozellik_ogesi {
  display: flex; gap: 18px; align-items: flex-start;
  transition: var(--gecis);
}

.ozellik_ogesi:hover { transform: translateX(4px); }

/* İkon kutusu: Kurumsal mavi */
.ozellik_ikon_kutusu {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--kurumsal_mavi);
  border-radius: var(--radius_kucuk);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--beyaz);
  box-shadow: var(--mavi_golgesi);
}

.ozellik_metni h4 {
  font-size: 0.98rem; font-weight: 700;
  color: var(--metin_baslik); margin-bottom: 3px;
}

.ozellik_metni p {
  font-size: 0.86rem; color: var(--metin_govde); line-height: 1.7;
}

/* Sağ görsel: Merkez animasyon */
.neden_biz_gorsel {
  position: relative; display: flex;
  align-items: center; justify-content: center;
}

/* Ana daire: Açık modda beyaz/açık arka plan */
.gorsel_ic_cerceve {
  position: relative;
  width: 200px; height: 200px;
  background: linear-gradient(135deg, var(--bg_cok_acik), var(--bg_mavi_hafif));
  border-radius: 50%;
  border: 2px solid var(--mavi_kenar);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(0,74,153,0.1);
  animation: mavi_parcilParilti 3s ease-in-out infinite;
}

.merkez_asansor_ikonu {
  font-size: 4.5rem; color: var(--kurumsal_mavi);
  filter: drop-shadow(0 4px 16px rgba(0,74,153,0.3));
}

.yorunge { position: absolute; width: 46px; height: 46px; }

.yorunge span {
  width: 46px; height: 46px;
  background: var(--bg_beyaz);
  border: 1px solid var(--mavi_kenar);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--kurumsal_mavi);
  box-shadow: var(--golge_hafif);
}

.yorunge_1 { animation: yoRungeEfekti1 8s  linear infinite; }
.yorunge_2 { animation: yoRungeEfekti2 12s linear infinite; }
.yorunge_3 { animation: yoRungeEfekti3 10s linear infinite; }

/* Ödül kartı: Beyaz kart */
.basari_karti {
  position: absolute; bottom: -10px; right: -10px;
  background: var(--bg_beyaz);
  border: 1px solid var(--kenar_rengi);
  border-radius: var(--radius_orta);
  padding: 14px 18px;
  box-shadow: var(--golge_orta);
  display: flex; align-items: center; gap: 10px;
  color: var(--metin_baslik);
}

.basari_karti i { font-size: 1.4rem; color: #f59e0b; }

.basari_karti strong { display: block; font-size: 0.9rem; font-weight: 700; }
.basari_karti span { font-size: 0.75rem; color: var(--metin_soluk); }


/* ============================================================
   10. MÜŞTERİ GÖRÜŞLERİ
   Arka plan: Açık gri (#f8fafc)
   ============================================================ */
.musteri_gorusleri_bolumu {
  background: var(--bg_acik);
  border-top: 1px solid var(--kenar_rengi);
  border-bottom: 1px solid var(--kenar_rengi);
}

.gorusler_izgarasi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Görüş kartı: Beyaz kart — Gri arka planda belirgin */
.gorus_karti {
  background: var(--bg_beyaz);
  border: 1px solid var(--kenar_rengi);
  border-radius: var(--radius_buyuk);
  padding: 28px;
  transition: var(--gecis);
  position: relative; overflow: hidden;
}

.gorus_karti::before {
  content: '"';
  position: absolute; top: 12px; right: 20px;
  font-size: 4rem; font-weight: 900; line-height: 1;
  color: var(--mavi_parcil);
  font-family: Georgia, serif;
  -webkit-text-fill-color: initial;
}

.gorus_karti:hover {
  transform: translateY(-4px);
  border-color: var(--mavi_kenar);
  box-shadow: var(--golge_belirgin);
}

.yildiz_puani {
  color: #f59e0b;  /* Sarı yıldızlar — açık modda klasik */
  font-size: 0.82rem; margin-bottom: 14px;
  display: flex; gap: 3px;
}

.gorus_metni {
  font-size: 0.9rem; color: var(--metin_govde);
  line-height: 1.75; margin-bottom: 20px;
  font-style: italic;
}

.gorus_yazar { display: flex; align-items: center; gap: 12px; }

/* Avatar: Kurumsal mavi */
.yazar_avatar {
  width: 42px; height: 42px;
  background: var(--kurumsal_mavi);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800;
  color: var(--beyaz); flex-shrink: 0;
}

.gorus_yazar strong { display: block; font-size: 0.88rem; color: var(--metin_baslik); font-weight: 600; }
.gorus_yazar span   { font-size: 0.75rem; color: var(--metin_soluk); }


/* ============================================================
   11. İLETİŞİM BÖLÜMÜ
   Arka plan: Beyaz
   ============================================================ */
.iletisim_bolumu { background: var(--bg_beyaz); }

/* İki sütun grid */
.iletisim_izgarasi {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px; align-items: start;
}

.ofis_bilgileri { display: flex; flex-direction: column; gap: 14px; }

/* Bilgi kartı: Sol mavi ikon + metin */
.bilgi_karti {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg_beyaz);
  border: 1px solid var(--kenar_rengi);
  border-radius: var(--radius_orta);
  padding: 18px; transition: var(--gecis);
}

.bilgi_karti:hover {
  border-color: var(--mavi_kenar);
  box-shadow: var(--golge_hafif);
  transform: translateX(4px);
}

.bilgi_ikonu {
  flex-shrink: 0;
  width: 42px; height: 42px;
  background: var(--mavi_parcil);
  border: 1px solid var(--mavi_kenar);
  border-radius: var(--radius_kucuk);
  display: flex; align-items: center; justify-content: center;
  color: var(--kurumsal_mavi); font-size: 0.95rem;
}

.bilgi_detayi h4 { font-size: 0.87rem; font-weight: 700; color: var(--metin_baslik); margin-bottom: 3px; }
.bilgi_detayi p  { font-size: 0.83rem; color: var(--metin_govde); line-height: 1.6; }

.bilgi_detayi a { color: var(--metin_govde); transition: var(--gecis); }
.bilgi_detayi a:hover { color: var(--kurumsal_mavi); }

/* ---- GOOGLE MAPS EMBED KONTEYNERI ----
   position: relative → İçindeki "Büyük Haritada Gör" linki için gerekli
   overflow: hidden → Iframe kenar taşmalarını keser */
.harita_alani_gercek {
  position: relative;
  border-radius: var(--radius_orta);
  overflow: hidden;
  border: 1px solid var(--kenar_rengi);
  height: 240px;
  box-shadow: var(--golge_hafif);
}

/* <iframe>: Google Haritası elemanı
   border: 0 → Varsayılan iframe kenarlığını kaldır */
.google_harita {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* "Büyük Haritada Gör" bağlantı çubuğu
   Haritanın altında sabit bir bant olarak konumlanır */
.harita_buyut_linki {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0, 74, 153, 0.9);
  color: var(--beyaz);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  backdrop-filter: blur(4px);
  transition: var(--gecis);
  text-align: center;
  justify-content: center;
}

/* Üzerine gelince tam opak kurumsal mavi */
.harita_buyut_linki:hover {
  background: var(--kurumsal_mavi);
  letter-spacing: 0.02em;
}

/* Form sarmalayıcı */
.form_sarmali {
  background: var(--bg_beyaz);
  border: 1px solid var(--kenar_rengi);
  border-radius: var(--radius_cok_buyuk);
  padding: 44px;
  box-shadow: var(--golge_orta);
}

.form_basligi {
  font-size: 1.4rem; font-weight: 700;
  color: var(--metin_baslik); margin-bottom: 28px; text-align: center;
}

.form_satiri { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form_grubu { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }

.form_grubu label {
  font-size: 0.82rem; font-weight: 600;
  color: var(--metin_govde); letter-spacing: 0.03em;
}

/* Input/select/textarea: Açık mod stili
   Açık arka plan, gri kenarlık — mavi focus */
.form_grubu input,
.form_grubu select,
.form_grubu textarea {
  background: var(--bg_beyaz);
  border: 1.5px solid var(--kenar_rengi);
  border-radius: var(--radius_kucuk);
  padding: 12px 16px; font-size: 0.9rem;
  color: var(--metin_baslik); outline: none;
  transition: var(--gecis);
}

.form_grubu select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 42px;
}

.form_grubu select option { background: var(--bg_beyaz); color: var(--metin_baslik); }

.form_grubu input::placeholder,
.form_grubu textarea::placeholder { color: var(--metin_soluk); }

/* Odaklanınca kurumsal mavi kenarlık */
.form_grubu input:focus,
.form_grubu select:focus,
.form_grubu textarea:focus {
  border-color: var(--kurumsal_mavi);
  background: var(--bg_beyaz);
  box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.08);
}

.form_grubu textarea { resize: vertical; min-height: 110px; }

/* KVKK onay */
.onay_kutusu_satiri {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 24px; font-size: 0.83rem; color: var(--metin_govde);
}

.onay_kutusu_satiri input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  margin-top: 2px; accent-color: var(--kurumsal_mavi); cursor: pointer;
}

.onay_kutusu_satiri a { color: var(--kurumsal_mavi); font-weight: 500; }
.onay_kutusu_satiri a:hover { text-decoration: underline; }

/* Başarı mesajı */
.basari_mesaji {
  display: none; align-items: center; gap: 10px;
  background: #f0fdf4; border: 1px solid #86efac;
  border-radius: var(--radius_kucuk);
  padding: 14px 18px; margin-top: 18px;
  color: #15803d; font-size: 0.88rem; font-weight: 500;
}

.basari_mesaji.gorunur { display: flex; animation: yukariGel 0.4s ease; }
.basari_mesaji i { font-size: 1.2rem; flex-shrink: 0; }


/* ============================================================
   12. SSS BÖLÜMÜ (sss_bolumu)
   Arka plan: Açık gri (#f8fafc)
   ============================================================ */
.sss_bolumu {
  background: var(--bg_acik);
  border-top: 1px solid var(--kenar_rengi);
}

/* Akordeon liste */
.sss_liste {
  max-width: 800px;
  margin: 0 auto 48px;
  display: flex; flex-direction: column; gap: 12px;
}

/* SSS kartı: Her bir <details> elemanı */
.sss_karti {
  background: var(--bg_beyaz);
  border: 1px solid var(--kenar_rengi);
  border-radius: var(--radius_orta);
  overflow: hidden;
  transition: var(--gecis);
}

.sss_karti[open] {
  border-color: var(--mavi_kenar);
  box-shadow: var(--golge_orta);
}

/* Soru başlığı: <summary> etiketi
   cursor: pointer → Tıklanabilir olduğunu göster
   list-style: none → Varsayılan üçgen oku kaldır */
.sss_soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--metin_baslik);
  list-style: none;
  /* Webkit prefix ile de oku kaldır */
  -webkit-appearance: none;
  user-select: none;
  transition: var(--gecis);
}

/* Tarayıcıların eklediği varsayılan açılım okunu kaldır */
.sss_soru::-webkit-details-marker { display: none; }

.sss_soru:hover { color: var(--kurumsal_mavi); background: var(--mavi_parcil); }

/* SSS ikonu: + ve - (JavaScript) */
.sss_ikon {
  font-size: 0.85rem;
  color: var(--kurumsal_mavi);
  flex-shrink: 0;
  transition: var(--gecis);
}

/* Cevap kutusu açılınca görünen metin */
.sss_cevap {
  padding: 0 24px 22px;
  border-top: 1px solid var(--kenar_rengi);
}

.sss_cevap p {
  font-size: 0.9rem;
  color: var(--metin_govde);
  line-height: 1.8;
  padding-top: 16px;
}

.sss_cevap p strong { color: var(--metin_baslik); font-weight: 600; }

.sss_cevap p a {
  color: var(--kurumsal_mavi); font-weight: 500;
}

.sss_cevap p a:hover { text-decoration: underline; }

/* SıkçaSorulanSorular CTA */
.sss_cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.sss_cta p {
  font-size: 1rem; color: var(--metin_govde); font-weight: 500;
}


/* 13. SAYFA EN ALTI  */
.sayfa_en_alti {
  background: var(--metin_baslik);  /* #1e293b — Derin Slate */
  color: var(--metin_cok_acik);
}

/* Footer'daki logo renk düzeltmesi: Koyu arka plan için beyaz metin */
.sayfa_en_alti .logo_yazi { color: var(--beyaz); }
.sayfa_en_alti .logo_ikon { box-shadow: none; }

.sayfa_en_alti_ust { padding: 72px 0 56px; }

/* 4 sütunlu grid */
.sayfa_en_alti_izgarasi {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
}

.sayfa_en_alti_aciklamasi {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.8; margin-top: 14px; margin-bottom: 16px;
  max-width: 280px;
}

/* Adres satırı: Yerel SEO */
.sayfa_en_alti_adres {
  display: flex; align-items: center; gap: 8px;
  font-style: normal;
  font-size: 0.87rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 20px;
}

.sayfa_en_alti_adres i { color: #93c5fd; font-size: 0.9rem; }
.sayfa_en_alti_adres strong { color: var(--beyaz); }

/* Sosyal medya ikonları */
.sosyal_medya_linkleri { display: flex; gap: 8px; flex-wrap: wrap; }

.sosyal_buton {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55); font-size: 0.88rem;
  transition: var(--gecis);
}

.sosyal_buton:hover {
  background: var(--kurumsal_mavi);
  border-color: var(--kurumsal_mavi);
  color: var(--beyaz);
  transform: translateY(-2px);
}

.sayfa_en_alti_sutun_basligi {
  font-size: 0.82rem; font-weight: 700;
  color: var(--beyaz); text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 18px;
}

.sayfa_en_alti_linkleri { display: flex; flex-direction: column; gap: 9px; }

.sayfa_en_alti_linkleri a,
.sayfa_en_alti_linkleri li {
  font-size: 0.87rem; color: rgba(255,255,255,0.5);
  transition: var(--gecis);
}

.sayfa_en_alti_linkleri a:hover { color: var(--beyaz); padding-left: 4px; }

.alt_iletisim_bilgileri li { display: flex; align-items: flex-start; gap: 9px; }

.alt_iletisim_bilgileri i {
  color: #93c5fd; font-size: 0.8rem;
  margin-top: 3px; flex-shrink: 0;
}

/* Footer alt şerit */
.sayfa_en_alti_alt {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 22px 0;
}

.sayfa_en_alti_alt .konteyner {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

.sayfa_en_alti_alt p { font-size: 0.83rem; color: rgba(255,255,255,0.35); }

.yasal_linkler { display: flex; gap: 20px; }

.yasal_linkler a { font-size: 0.8rem; color: rgba(255,255,255,0.35); transition: var(--gecis); }
.yasal_linkler a:hover { color: rgba(255,255,255,0.7); }


/* 14. YUKARI DÖN BUTONU */
.yukari_don_butonu {
  position: fixed; bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  background: var(--kurumsal_mavi);
  color: var(--beyaz); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  box-shadow: var(--mavi_golgesi);
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: var(--gecis); z-index: 999;
}

.yukari_don_butonu.gorunur {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}

.yukari_don_butonu:hover {
  transform: translateY(-3px);
  background: var(--koyu_kurumsal_mavi);
  box-shadow: 0 10px 28px rgba(0, 74, 153, 0.4);
}


/* 15. ANİMASYONLAR */

@keyframes yukariGel {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes yukariUcus {
  0%   { transform: translateY(0) rotate(0deg);       opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

@keyframes zipla {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* Mavi parıltı: Açık modda çok hafif */
@keyframes mavi_parcilParilti {
  0%, 100% { box-shadow: 0 0 40px rgba(0,74,153,0.08); }
  50%       { box-shadow: 0 0 70px rgba(0,74,153,0.18); }
}

/* Yörünge animasyonları */
@keyframes yoRungeEfekti1 {
  0%   { transform: rotate(0deg)   translateX(135px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(135px) rotate(-360deg); }
}
@keyframes yoRungeEfekti2 {
  0%   { transform: rotate(120deg) translateX(135px) rotate(-120deg); }
  100% { transform: rotate(480deg) translateX(135px) rotate(-480deg); }
}
@keyframes yoRungeEfekti3 {
  0%   { transform: rotate(240deg) translateX(135px) rotate(-240deg); }
  100% { transform: rotate(600deg) translateX(135px) rotate(-600deg); }
}

/* Scroll Reveal */
.gizli {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.gizli.gorundu { opacity: 1; transform: translateY(0); }


/* 16. MEDİA SORGULARI (RESPONSIVE TASARIM) */

/*  1100px  */
@media (max-width: 1100px) {
  .sayfa_en_alti_izgarasi { grid-template-columns: 1fr 1fr; }
  .sayfa_en_alti_marka    { grid-column: 1 / -1; }
  .neden_biz_izgara        { gap: 48px; }
}

/*  900px: Tablet  */
@media (max-width: 900px) {
  .hizmet_kutulari       { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .gorusler_izgarasi     { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .neden_biz_izgara      { grid-template-columns: 1fr; }
  .neden_biz_gorsel      { display: none; }
  .iletisim_izgarasi     { grid-template-columns: 1fr; }
  .menu_linkleri,
  .nav_buton_grubu       { display: none; }
  .hamburger_menu        { display: flex; }
  .mobil_menu            { display: block; }
  .rakamlarla_biz        { padding: 18px 24px; }
  .rakam_ogesi           { padding: 0 20px; }
  .sayi_sayaci           { font-size: 1.7rem; }
}

/*  680px: Büyük telefon  */
@media (max-width: 680px) {
  .bolum { padding: 64px 0; }
  .rakamlarla_biz    { flex-direction: column; gap: 16px; padding: 24px; }
  .rakam_cubugu      { width: 48px; height: 1px; }
  .form_sarmali      { padding: 24px 18px; }
  .form_satiri       { grid-template-columns: 1fr; }
  .sayfa_en_alti_izgarasi { grid-template-columns: 1fr; }
  .sayfa_en_alti_marka    { grid-column: auto; }
  .giris_butonlar    { flex-direction: column; align-items: center; }
  .sayfa_en_alti_alt .konteyner { flex-direction: column; text-align: center; }
}

/* 480px: Küçük telefon */
@media (max-width: 480px) {
  .giris_baslik   { font-size: 1.9rem; }
  .bolum_baslik   { font-size: 1.65rem; }
  .yukari_don_butonu { bottom: 16px; right: 16px; }
  .sss_soru       { padding: 16px 18px; font-size: 0.9rem; }
  .sss_cevap      { padding: 0 18px 18px; }
}

/* WHATSAPP BUTONU (Sol altta , sağda bir yerede alınabilir)*/
.whatsapp_butonu {
  position: fixed;
  bottom: 20px;
  left: 20px; 
  background-color: #25d366; /* orj WhatsApp rengi */
  color: #fff;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 999; /* Sayfadaki her şeyin üstünde dursun diye */
  transition: all 0.3s ease;
  text-decoration: none;
}

/* Üstüne fareyle gelince hafif büyüsün ve rengi koyulaşsın */
.whatsapp_butonu:hover {
  background-color: #128c7e;
  transform: scale(1.1); 
  color: #fff;
}