/* ==========================================================================
   CERVELIS LLP — Kurumsal web sitesi stilleri
   --------------------------------------------------------------------------
   İçindekiler:
   01. Değişkenler (renk, tipografi, ölçü)
   02. Sıfırlama ve temel tipografi
   03. Yardımcı sınıflar ve düzen (container, grid, bölüm)
   04. Butonlar
   05. Header ve mobil menü
   06. Hero ve sayfa başlıkları
   07. Kartlar
   08. Logo şeridi ve proje kartları
   09. Liste / özellik blokları
   10. İletişim formu
   11. CTA bandı ve footer
   12. Erişilebilirlik ve responsive
   ========================================================================== */

/* ==========================================================================
   01. DEĞİŞKENLER
   Renkleri buradan değiştirmeniz tüm siteyi günceller.
   ========================================================================== */
:root {
  /* Marka renkleri */
  --yesil: #1F6B34;          /* ana renk */
  --yesil-koyu: #164D26;     /* hover ve koyu zeminler */
  --yesil-derin: #10331B;    /* footer zemini */
  --altin: #C8A13A;          /* vurgu rengi */
  --altin-acik: #E0BE5E;

  /* Zeminler */
  --beyaz: #FFFFFF;
  --gri-acik: #F4F5F3;       /* açık gri bölüm zemini */
  --yesil-cok-acik: #EEF4EF; /* çok açık yeşil bölüm zemini */

  /* Metin */
  --metin: #23282A;          /* saf siyah yerine yumuşak koyu ton */
  --metin-ikincil: #566065;
  --cizgi: #E2E6E2;

  /* Tipografi */
  --font-baslik: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-metin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-teknik: "Inter", ui-monospace, "SFMono-Regular", monospace; /* etiketler için */

  /* Ölçüler */
  --genislik: 1180px;
  --radius: 10px;
  --radius-kucuk: 6px;
  --golge: 0 1px 2px rgba(16, 51, 27, .05), 0 6px 20px rgba(16, 51, 27, .06);
  --golge-hover: 0 2px 4px rgba(16, 51, 27, .06), 0 14px 32px rgba(16, 51, 27, .12);
  --gecis: .22s ease;
  --bolum-bosluk: 88px; /* dikey bölüm boşluğu */
}

/* ==========================================================================
   02. SIFIRLAMA VE TEMEL TİPOGRAFİ
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-metin);
  font-size: 17px;
  line-height: 1.65;
  color: var(--metin);
  background: var(--beyaz);
  overflow-x: hidden; /* yatay taşmayı engeller */
}

h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  color: var(--yesil-derin);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--yesil); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--altin); }

img, svg { max-width: 100%; height: auto; display: block; }

ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .4rem; }

/* Bölüm sonundaki bağlantı/buton satırı */
.bolum-link { margin-top: 28px; }

/* Metin genişliği — okunabilirlik için */
.metin-genis { max-width: 68ch; }

/* ==========================================================================
   03. YARDIMCI SINIFLAR VE DÜZEN
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 24px;
}

.bolum { padding: var(--bolum-bosluk) 0; }
.bolum--dar { padding: calc(var(--bolum-bosluk) * .65) 0; }
.bolum--gri { background: var(--gri-acik); }
.bolum--yesil-acik { background: var(--yesil-cok-acik); }

.bolum-basligi { max-width: 62ch; margin-bottom: 44px; }
.bolum-basligi p { color: var(--metin-ikincil); font-size: 1.05rem; }

/* "Etiket": bölümlerin üstündeki küçük teknik başlık.
   İmza öğesi — altın kare düğüm + ince akış çizgisi. */
.etiket {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-teknik);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--yesil);
  margin-bottom: 16px;
}
.etiket::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--altin);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.etiket::after {
  content: "";
  height: 1px;
  width: 56px;
  background: linear-gradient(90deg, var(--altin), rgba(31, 107, 52, 0));
}
.etiket--acik { color: rgba(255, 255, 255, .85); }
.etiket--acik::after { background: linear-gradient(90deg, var(--altin), rgba(255, 255, 255, 0)); }

/* Grid sistemi */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* İki sütunlu içerik + görsel düzeni */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split--ust { align-items: start; }
.split__gorsel img { border-radius: var(--radius); box-shadow: var(--golge); width: 100%; }

/* ==========================================================================
   04. BUTONLAR
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-kucuk);
  font-family: var(--font-metin);
  font-size: .96rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.btn:hover { transform: translateY(-1px); }

/* Birincil — yeşil */
.btn--birincil { background: var(--yesil); color: #fff; }
.btn--birincil:hover { background: var(--yesil-koyu); color: #fff; }

/* İkincil — şeffaf çerçeveli */
.btn--ikincil { background: transparent; color: var(--yesil); border-color: var(--cizgi); }
.btn--ikincil:hover { background: var(--beyaz); border-color: var(--yesil); color: var(--yesil); }

/* Koyu zeminde kullanılan beyaz çerçeveli buton */
.btn--acik { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--acik:hover { background: #fff; color: var(--yesil-derin); border-color: #fff; }

/* Altın vurgu butonu — sadece ana CTA'larda */
.btn--altin { background: var(--altin); color: var(--yesil-derin); }
.btn--altin:hover { background: var(--altin-acik); color: var(--yesil-derin); }

.btn--tam { width: 100%; }

/* Ok işaretli metin bağlantısı */
.baglanti-ok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .94rem;
}
.baglanti-ok::after { content: "→"; transition: transform var(--gecis); }
.baglanti-ok:hover::after { transform: translateX(4px); }

/* ==========================================================================
   05. HEADER VE MOBİL MENÜ
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--cizgi);
  backdrop-filter: saturate(140%) blur(6px);
}
.header__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
  position: relative;
  padding-left: 210px; /* aşağıdaki dairesel logoya ayrılan yer */
  transition: padding-left var(--gecis);
}

/* Logo — tam dairesel amblem.
   Görselin kendi beyaz çerçevesi vardır ve dışı saydamdır; bu yüzden
   kırpma veya arka plan rengi uygulanmaz. Header'da logo çubuğun altına
   taşar ve hero'nun üzerine oturur. */
.logo { display: block; flex: 0 0 auto; line-height: 0; }
.logo img { display: block; width: 100%; height: auto; }

/* Header sürümü — çubuğun altına taşan rozet */
.logo--header {
  position: absolute;
  left: 24px;
  top: 4px;
  z-index: 3;
  width: 164px;
  transition: width var(--gecis), top var(--gecis), transform var(--gecis);
}
/* Gölge drop-shadow ile verilir: kutunun değil, görselin saydam olmayan
   kısmının şeklini izler; böylece dairenin arkasında kare bir leke kalmaz. */
.logo--header img {
  filter:
    drop-shadow(0 1px 2px rgba(16, 51, 27, .16))
    drop-shadow(0 8px 18px rgba(16, 51, 27, .24));
}
.logo--header:hover { transform: translateY(-2px); }

/* Sayfa kaydırılınca logo çubuğun içine çekilir; böylece taşan daire
   kayan içeriğin üzerini örtmez. (main.js .header--kucuk sınıfını ekler) */
.header--kucuk .header__ic { padding-left: 108px; }
.header--kucuk .logo--header { width: 68px; top: 4px; }

/* Footer sürümü — koyu zeminde beyaz daire */
.logo--footer { width: 104px; margin-bottom: 20px; }

/* Ana menü */
.nav { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
.nav a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--metin);
  padding: 6px 0;
  position: relative;
  white-space: nowrap; /* menü başlıkları iki satıra bölünmesin */
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--altin);
  transition: width var(--gecis);
}
.nav a:hover::after,
.nav a.aktif::after { width: 100%; }
.nav a.aktif { color: var(--yesil); font-weight: 600; }

/* Header sağ blok: dil seçici + CTA + hamburger */
.header__sag { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.header__cta { padding: 12px 18px; font-size: .9rem; }
.nav__cta { display: none; } /* sadece mobil menüde görünür */

/* ---- Dil seçici ---- */
.dil { position: relative; }
.dil__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  font-family: var(--font-metin);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--metin);
  cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis);
}
.dil__btn:hover { border-color: var(--yesil); color: var(--yesil); }
.dil__kure { width: 16px; height: 16px; flex: 0 0 auto; }
.dil__ok { width: 10px; height: 7px; transition: transform var(--gecis); }
.dil__btn[aria-expanded="true"] .dil__ok { transform: rotate(180deg); }
.dil__btn[aria-expanded="true"] { border-color: var(--yesil); color: var(--yesil); }

.dil__liste {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  box-shadow: var(--golge-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.dil__liste.acik { opacity: 1; visibility: visible; transform: translateY(0); }
.dil__liste li { margin: 0; }
.dil__liste a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-kucuk);
  font-size: .92rem;
  font-weight: 500;
  color: var(--metin);
}
.dil__liste a:hover { background: var(--yesil-cok-acik); color: var(--yesil); }
.dil__liste a.aktif { color: var(--yesil); font-weight: 600; }
.dil__liste a.aktif .dil__kod { background: var(--yesil); color: #fff; border-color: var(--yesil); }
.dil__kod {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 2px 0;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  font-family: var(--font-teknik);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--metin-ikincil);
}

/* Hamburger butonu — sadece mobilde görünür */
.menu-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  cursor: pointer;
}
.menu-btn span {
  position: relative;
  display: block;
  width: 20px; height: 2px;
  background: var(--yesil-derin);
  transition: background var(--gecis);
}
.menu-btn span::before,
.menu-btn span::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: var(--yesil-derin);
  transition: transform var(--gecis), top var(--gecis);
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
/* Menü açıkken çarpı işaretine dönüşür */
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   06. HERO VE SAYFA BAŞLIKLARI
   ========================================================================== */
.hero {
  position: relative;
  background: var(--yesil-derin);
  color: #fff;
  overflow: hidden;
}
/* Arka plan görseli — assets/images/hero-su.svg dosyasını değiştirerek
   gerçek fotoğrafla (tesis, boru hattı, laboratuvar) güncelleyebilirsiniz. */
.hero__arkaplan {
  position: absolute;
  inset: 0;
  background: url("../images/hero-su.svg") center / cover no-repeat;
  opacity: .5;
}
.hero__ic {
  position: relative;
  padding: 108px 0 100px;
  max-width: 720px;
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero__alt {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, .82);
  max-width: 56ch;
  margin-bottom: 32px;
}
.hero__butonlar { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero altındaki teknik şerit — su kimyası göstergeleri */
.hero__seritler {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 22px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  margin-top: 8px;
}
.hero__serit {
  font-family: var(--font-teknik);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.hero__serit strong {
  display: block;
  font-family: var(--font-baslik);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--altin);
  text-transform: none;
}

/* İç sayfa başlığı */
.sayfa-basi {
  background: var(--yesil-derin);
  color: #fff;
  padding: 72px 0 68px;
  position: relative;
  overflow: hidden;
}
.sayfa-basi::after { /* ince akış çizgisi dokusu */
  content: "";
  position: absolute;
  right: -80px; top: 0; bottom: 0;
  width: 420px;
  background: url("../images/desen-akis.svg") right center / cover no-repeat;
  opacity: .35;
  pointer-events: none;
}
.sayfa-basi h1 { color: #fff; margin-bottom: 14px; position: relative; }
.sayfa-basi p {
  color: rgba(255, 255, 255, .8);
  max-width: 60ch;
  font-size: 1.06rem;
  position: relative;
}

/* ==========================================================================
   07. KARTLAR
   Çözüm, sektör, partner ve ürün kartları aynı tasarım dilini kullanır.
   ========================================================================== */
.kart {
  display: flex;
  flex-direction: column;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--golge);
  transition: box-shadow var(--gecis), transform var(--gecis), border-color var(--gecis);
}
.kart:hover {
  box-shadow: var(--golge-hover);
  transform: translateY(-3px);
  border-color: rgba(31, 107, 52, .3);
}
.kart__ikon {
  width: 44px; height: 44px;
  margin-bottom: 18px;
  color: var(--yesil);
}
.kart h3 { margin-bottom: 8px; }
.kart p { color: var(--metin-ikincil); font-size: .97rem; }
.kart ul { color: var(--metin-ikincil); font-size: .95rem; margin-top: 12px; }
.kart .baglanti-ok { margin-top: 16px; }

/* Güven kartı — "Neden CERVELIS?" bölümü, üstte altın çizgi */
.kart--guven { border-top: 3px solid var(--altin); }

/* Partner kartında marka logosu */
.kart__partner { max-width: 170px; margin-bottom: 16px; }

/* Ürün kartı — sade, yoğun grid için */
.urun-kart {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  padding: 16px 18px;
  font-weight: 500;
  font-size: .97rem;
  color: var(--metin);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.urun-kart::before {
  content: "";
  width: 6px; height: 6px;
  flex: 0 0 auto;
  background: var(--altin);
  transform: rotate(45deg);
}
.urun-kart:hover { border-color: var(--yesil); box-shadow: var(--golge); }

/* Sektör kartı */
.sektor-kart .kart__ikon { color: var(--yesil); }

/* ==========================================================================
   08. LOGO ŞERİDİ VE PROJE KARTLARI
   ========================================================================== */
.logo-serit {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: center;
}
.logo-serit__oge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 14px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
}
.logo-serit__oge img {
  max-height: 42px;
  width: auto;
  opacity: .75;
  transition: opacity var(--gecis);
}
.logo-serit__oge:hover img { opacity: 1; }

/* Proje kartı */
.proje-kart {
  display: flex;
  flex-direction: column;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--golge);
  transition: box-shadow var(--gecis), transform var(--gecis);
}
.proje-kart:hover { box-shadow: var(--golge-hover); transform: translateY(-3px); }
.proje-kart__gorsel {
  aspect-ratio: 16 / 10;
  background: var(--yesil-cok-acik);
  overflow: hidden;
}
.proje-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.proje-kart__govde { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.proje-kart__musteri {
  font-family: var(--font-teknik);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--altin);
  font-weight: 700;
  margin-bottom: 8px;
}
.proje-kart p { color: var(--metin-ikincil); font-size: .97rem; }

/* Ölçülebilir sonuç satırı */
.sonuc {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--cizgi);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.sonuc div {
  font-family: var(--font-teknik);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--metin-ikincil);
}
.sonuc strong {
  display: block;
  font-family: var(--font-baslik);
  font-size: 1.25rem;
  color: var(--yesil);
  letter-spacing: -0.02em;
  text-transform: none;
}

/* ==========================================================================
   09. LİSTE / ÖZELLİK BLOKLARI
   ========================================================================== */
.ozellik-liste { list-style: none; padding: 0; margin: 0; }
.ozellik-liste li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: var(--metin-ikincil);
}
.ozellik-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  background: var(--yesil);
  transform: rotate(45deg);
}
.ozellik-liste strong { color: var(--metin); }

/* Etiket havuzu — sistem kapsamı gibi kısa terim listeleri */
.etiket-havuz { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.etiket-havuz li {
  margin: 0;
  padding: 9px 16px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  font-size: .92rem;
  color: var(--metin);
}

/* Coğrafya / iletişim bilgi bloğu */
.bilgi-blok {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--golge);
}
.bilgi-blok h3 { margin-bottom: 14px; }
.bilgi-satir { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-satir:last-child { border-bottom: 0; }
.bilgi-satir .etiket-kucuk {
  font-family: var(--font-teknik);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--metin-ikincil);
  min-width: 92px;
  padding-top: 2px;
}

/* ==========================================================================
   10. İLETİŞİM FORMU
   ========================================================================== */
.form-baslik { font-size: 1.5rem; }
.form-kutu {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--golge);
}
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-alan { display: flex; flex-direction: column; margin-bottom: 18px; }
.form-alan label {
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--metin);
}
.form-alan .zorunlu { color: var(--altin); }
.form-alan input,
.form-alan select,
.form-alan textarea {
  font-family: var(--font-metin);
  font-size: .97rem;
  color: var(--metin);
  padding: 12px 14px;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  background: var(--beyaz);
  transition: border-color var(--gecis), box-shadow var(--gecis);
  width: 100%;
}
.form-alan textarea { resize: vertical; min-height: 130px; }
.form-alan input:focus,
.form-alan select:focus,
.form-alan textarea:focus {
  outline: none;
  border-color: var(--yesil);
  box-shadow: 0 0 0 3px rgba(31, 107, 52, .14);
}
.form-not { font-size: .86rem; color: var(--metin-ikincil); margin-top: 14px; }

/* Form gönderim mesajı — JavaScript ile gösterilir */
.form-mesaj {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: var(--radius-kucuk);
  background: var(--yesil-cok-acik);
  border: 1px solid rgba(31, 107, 52, .3);
  color: var(--yesil-derin);
  font-size: .95rem;
}
.form-mesaj.gorunur { display: flex; }
.form-mesaj strong { display: block; margin-bottom: 2px; }

/* Harita placeholder — gerçek harita gömme kodunu buraya ekleyebilirsiniz */
.harita-yer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
  margin-top: 24px;
  background: var(--gri-acik);
  border: 1px dashed var(--cizgi);
  border-radius: var(--radius);
  color: var(--metin-ikincil);
  font-size: .92rem;
  text-align: center;
  padding: 20px;
}

/* ==========================================================================
   11. CTA BANDI VE FOOTER
   ========================================================================== */
.cta-bant {
  background: var(--yesil);
  color: #fff;
  padding: 62px 0;
  position: relative;
  overflow: hidden;
}
.cta-bant__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
}
.cta-bant h2 { color: #fff; margin-bottom: 8px; max-width: 22ch; }
.cta-bant p { color: rgba(255,255,255,.85); max-width: 48ch; }

.footer {
  background: var(--yesil-derin);
  color: rgba(255, 255, 255, .74);
  padding: 66px 0 0;
  font-size: .94rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 46px;
}
.footer h4 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: var(--font-teknik);
  margin-bottom: 18px;
}
.footer a { color: rgba(255, 255, 255, .74); }
.footer a:hover { color: var(--altin); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer .logo__alt { color: rgba(255,255,255,.55); }
.footer__tanim { margin-top: 18px; max-width: 38ch; }
.footer__alt {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .87rem;
  color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   12. ERİŞİLEBİLİRLİK VE RESPONSIVE
   ========================================================================== */

/* Klavye ile gezinenler için görünür odak halkası */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--altin);
  outline-offset: 2px;
  border-radius: 3px;
}

/* İçeriğe atla bağlantısı */
.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--altin);
  color: var(--yesil-derin);
  padding: 12px 18px;
  font-weight: 600;
  z-index: 100;
}
.atla:focus { left: 12px; top: 12px; }

/* Sadece ekran okuyucular için */
.gizli-metin {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Dar masaüstü: menü aralığını daralt --- */
@media (max-width: 1400px) {
  .nav { gap: 17px; }
  .nav a { font-size: .92rem; }
}

/* --- Tablet --- */
@media (max-width: 1200px) {
  :root { --bolum-bosluk: 68px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .logo-serit { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Menü mobil moduna geçer */
  .menu-btn { display: flex; }
  .header__cta { display: none; }
  .nav__cta { display: inline-flex; }
  .nav {
    position: fixed;
    top: 76px; left: 0; right: 0;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--beyaz);
    border-bottom: 1px solid var(--cizgi);
    box-shadow: var(--golge-hover);
    padding: 8px 24px 24px;
    z-index: 5; /* açık menü, taşan logonun üzerinde kalsın */
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
  }
  .nav.acik { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--cizgi); font-size: 1rem; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 18px; border-bottom: 0; }
}

/* --- Mobil --- */
@media (max-width: 640px) {
  :root { --bolum-bosluk: 56px; }
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  /* Dar ekranda uzun buton metinleri satır kırabilsin */
  .btn { white-space: normal; max-width: 100%; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .logo-serit { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .form-satir { grid-template-columns: 1fr; gap: 0; }
  .form-baslik { font-size: 1.5rem; }
.form-kutu { padding: 22px; }
  .hero__ic { padding: 72px 0 64px; }
  .hero__seritler { gap: 26px; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .cta-bant__ic { flex-direction: column; align-items: flex-start; }
  .sayfa-basi { padding: 54px 0 50px; }

  /* Header'ı dar ekrana sığdır: logo, dil seçici ve hamburger */
  .header__ic { height: 68px; padding-left: 124px; }
  .header--kucuk .header__ic { padding-left: 86px; }
  .header--kucuk .logo--header { width: 56px; top: 6px; }
  .logo--header { left: 18px; top: 4px; width: 94px; }
  .logo--footer { width: 86px; }
  .header__sag { gap: 8px; }
  .dil__btn { padding: 8px 9px; gap: 5px; font-size: .8rem; }
  .dil__kure { display: none; }
  .nav { top: 68px; max-height: calc(100vh - 68px); }
}

/* --- Çok dar ekranlar (≤360 px) --- */
@media (max-width: 360px) {
  .header__ic { padding-left: 108px; }
  .logo--header { width: 80px; top: 6px; }
}

/* Hareket azaltma tercihi olan kullanıcılar için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .kart:hover, .proje-kart:hover { transform: none; }
}

/* Yazdırma */
@media print {
  .header, .cta-bant, .footer, .menu-btn { display: none; }
  body { font-size: 12pt; color: #000; }
}

.harita-yer--aktif {display:block;padding:0;overflow:hidden;border-style:solid;background:var(--beyaz);}
.harita-yer--aktif iframe {display:block;width:100%;height:320px;border:0;}
.harita-link {display:inline-block;margin:14px 18px 16px;}

/* Contact-form spam trap and error state */
.form-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
.form-mesaj--hata {
  border-color: #9b2c2c;
}