/* ============================================================================
   ERÇELİK ELEKTROSTATİK FIRIN BOYA — style.css
   ----------------------------------------------------------------------------
   İÇİNDEKİLER
   01. Tasarım tokenları (renk / tipografi / boşluk)
   02. Sıfırlama ve temel
   03. Yardımcı sınıflar ve kapsayıcı
   04. Butonlar
   05. Üst bar (header) + mobil menü
   06. Hero + 3D sahne
   07. Güven şeridi
   08. Bölüm başlıkları
   09. Hizmet kartları
   10. Süreç akışı
   11. Sektör ızgarası
   12. Neden Erçelik + fırın görseli
   13. Teklif formu
   14. S.S.S.
   15. İletişim + harita
   16. Alt bilgi (footer)
   17. Yüzen WhatsApp + mobil aksiyon çubuğu
   18. Animasyonlar ve hareket tercihi
   19. Duyarlı (responsive) düzenlemeler
   20. Harita düğmesi, yasal bağlantılar, çerez bandı, alt sayfalar
   ============================================================================ */


/* ============================================================
   01. TASARIM TOKENLARI
   Renkler doğrudan verilen paletten türetilmiştir.
   Paleti değiştirmek isterseniz yalnızca bu blok yeterlidir.
   ============================================================ */
:root {
  /* --- Palet (ana 5 renk) --- */
  --gok-400:    #78C0E0;   /* açık mavi  — vurgu, koyu zeminde CTA */
  --mavi-500:   #449DD1;   /* orta mavi  — ikincil vurgu */
  --lacivert-800: #150578; /* koyu indigo */
  --lacivert-900: #0E0E52; /* en koyu lacivert — ana koyu zemin */
  --kral-600:   #3943B7;   /* kraliyet mavisi — açık zeminde ana CTA */

  /* --- Paletten türetilmiş ara tonlar --- */
  --gok-200:    #C4E3F2;
  --gok-300:    #9DD2E9;
  --gok-600:    #2E7FB0;
  --kral-500:   #4E58C9;
  --kral-700:   #2B3596;
  --lacivert-950: #080830;
  --lacivert-850: #111048;

  /* --- Nötrler --- */
  --beyaz:      #FFFFFF;
  --kirik-beyaz:#F6F9FC;
  --acik-gri:   #EDF2F8;
  --cizgi:      #DCE6F0;
  --metin:      #14183A;
  --metin-soluk:#4E5878;
  --metin-acik: #E8EEF7;
  --metin-acik-soluk: rgba(232,238,247,.76);

  /* --- WhatsApp (marka tanınırlığı için; tek satırda değiştirilebilir) --- */
  --wa:         #0E7B3E;   /* buton zemini — beyaz yazıyla AA kontrast */
  --wa-parlak:  #25D366;   /* yüzen balon */

  /* --- Anlamsal --- */
  --zemin:      var(--beyaz);
  --zemin-alt:  var(--kirik-beyaz);
  --odak:       var(--gok-400);
  --hata:       #C62828;

  /* --- Tipografi --- */
  --yazi-baslik: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --yazi-govde:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Akışkan ölçek: clamp ile — ekstra medya sorgusu gerekmez, CLS yaratmaz */
  --f-h1:   clamp(1.92rem, 1.3rem + 2.75vw, 3.4rem);
  --f-h2:   clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem);
  --f-h3:   clamp(1.12rem, 1.02rem + .42vw, 1.35rem);
  --f-govde:clamp(1rem, .97rem + .16vw, 1.075rem);
  --f-kucuk:.9rem;

  /* --- Boşluk ölçeği --- */
  --b-1: .25rem;  --b-2: .5rem;   --b-3: .75rem;  --b-4: 1rem;
  --b-5: 1.5rem;  --b-6: 2rem;    --b-7: 2.75rem; --b-8: 4rem;
  --b-9: 5.5rem;  --b-10: 7rem;

  /* --- Köşe / gölge / geçiş --- */
  --r-s: 10px;  --r-m: 16px;  --r-l: 24px;  --r-tam: 999px;
  --g-s: 0 1px 2px rgba(14,14,82,.06), 0 2px 8px rgba(14,14,82,.05);
  --g-m: 0 4px 14px rgba(14,14,82,.08), 0 12px 32px rgba(14,14,82,.07);
  --g-l: 0 10px 30px rgba(14,14,82,.11), 0 28px 64px rgba(14,14,82,.10);
  --g-koyu: 0 18px 50px rgba(0,0,0,.38);
  --gecis: 200ms cubic-bezier(.4,0,.2,1);

  --kapsayici: 1200px;
  --ust-bar-h: 74px;  /* üst çubuğun yüksekliği — açılır menü bunun altından başlar */
  --mobil-bar-h: 0px; /* JS/medya sorgusu ile mobilde büyütülür */
}


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

/* hidden niteliği her zaman kazanmalı.
   (Aksi hâlde .form-hata gibi display:flex tanımlı öğeler
   hidden olmasına rağmen ekranda görünür.) */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* sabit header'ın altına denk gelmesin */
}

body {
  margin: 0;
  font-family: var(--yazi-govde);
  font-size: var(--f-govde);
  line-height: 1.65;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--mobil-bar-h);
}

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 var(--b-4);
  text-wrap: balance;      /* başlıklarda tek kelimelik son satırı önler */
}
h1 { font-size: var(--f-h1); font-weight: 700; }
h2 { font-size: var(--f-h2); font-weight: 700; }
h3 { font-size: var(--f-h3); font-weight: 600; }

p { margin: 0 0 var(--b-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--kral-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kral-600); }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

address { font-style: normal; }

button { font: inherit; cursor: pointer; }

/* Klavye erişimi: odak halkası her yerde görünür */
:focus-visible {
  outline: 3px solid var(--odak);
  outline-offset: 3px;
  border-radius: 4px;
}

/* İçeriğe atla bağlantısı (ekran okuyucu + klavye kullanıcıları) */
.atla-baglantisi {
  position: absolute; left: 50%; top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--lacivert-900); color: var(--beyaz);
  padding: var(--b-3) var(--b-5);
  border-radius: 0 0 var(--r-s) var(--r-s);
  font-weight: 600; text-decoration: none;
  transition: top var(--gecis);
}
.atla-baglantisi:focus { top: 0; color: var(--beyaz); }


/* ============================================================
   03. YARDIMCI SINIFLAR
   ============================================================ */
.kapsayici {
  width: 100%;
  max-width: var(--kapsayici);
  margin-inline: auto;
  padding-inline: var(--b-5);
}

.ikon { width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

.ikon--kutu { width: 30px; height: 30px; }

.metin-baglanti { font-weight: 600; color: var(--kral-700); }
.metin-baglanti--acik { color: var(--gok-300); }
.metin-baglanti--acik:hover { color: var(--gok-200); }

.vurgu { color: var(--gok-400); display: block; }

/* Ekranda görünmeyen, ekran okuyucunun okuduğu başlık.
   Başlık hiyerarşisini bozmadan bölüm adı vermek için kullanılır. */
.gorsel-gizli {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Bal küpü (honeypot) — botlar görür, insanlar görmez */
.bal-kupu {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}


/* ============================================================
   04. BUTONLAR
   Minimum dokunma alanı 44px, görünür odak, yumuşak geçiş.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--b-2);
  min-height: 46px;
  padding: var(--b-3) var(--b-5);
  border: 2px solid transparent;
  border-radius: var(--r-tam);
  font-family: var(--yazi-baslik);
  font-size: .975rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gecis), color var(--gecis),
              border-color var(--gecis), transform var(--gecis),
              box-shadow var(--gecis);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn .ikon { width: 18px; height: 18px; }

/* Ana CTA — açık zeminlerde */
.btn--birincil {
  background: var(--kral-600); color: var(--beyaz);
  box-shadow: 0 6px 18px rgba(57,67,183,.28);
}
.btn--birincil:hover { background: var(--kral-700); color: var(--beyaz);
  box-shadow: 0 10px 26px rgba(57,67,183,.36); }

/* Ana CTA — koyu zeminlerde (açık mavi, lacivert yazı: 8.4:1 kontrast) */
.btn--acik {
  background: var(--gok-400); color: var(--lacivert-900);
  box-shadow: 0 8px 24px rgba(120,192,224,.26);
}
.btn--acik:hover { background: var(--gok-300); color: var(--lacivert-950); }

/* WhatsApp — marka tanınırlığı için yeşil.
   Tamamen palete dönmek isterseniz --wa değerini --kral-600 yapmanız yeterli. */
.btn--whatsapp { background: var(--wa); color: var(--beyaz);
  box-shadow: 0 6px 18px rgba(14,123,62,.28); }
.btn--whatsapp:hover { background: #0B6733; color: var(--beyaz); }

/* Çerçeveli — koyu zeminde üçüncül aksiyon */
.btn--cerceve {
  background: rgba(255,255,255,.06);
  color: var(--beyaz);
  border-color: rgba(196,227,242,.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn--cerceve:hover { background: rgba(255,255,255,.14); border-color: var(--gok-400); color: var(--beyaz); }

.btn--buyuk { min-height: 52px; padding: var(--b-3) var(--b-4); font-size: 1rem; }
.btn--kompakt { min-height: 44px; padding: var(--b-2) var(--b-4); font-size: .92rem; }
.btn--tam { width: 100%; }


/* ============================================================
   05. ÜST BAR + MOBİL MENÜ
   ============================================================ */
.ust-bar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14,14,82,.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(120,192,224,.16);
  transition: background-color var(--gecis), box-shadow var(--gecis);
}
.ust-bar.kaydirildi { background: rgba(8,8,48,.95); box-shadow: 0 6px 24px rgba(0,0,0,.28); }

.ust-bar__ic {
  display: flex; align-items: center; gap: var(--b-4);
  min-height: var(--ust-bar-h);
}

.logo { display: inline-flex; align-items: center; gap: var(--b-3);
  text-decoration: none; flex: none; }
.logo__isaret { width: 42px; height: 42px; display: block; flex: none; }
.logo__isaret svg { width: 100%; height: 100%; display: block; }
.logo__yazi { display: flex; flex-direction: column; line-height: 1.05; }
.logo__yazi strong {
  font-family: var(--yazi-baslik); font-size: 1.22rem; font-weight: 700;
  letter-spacing: .04em; color: var(--beyaz);
}
.logo__yazi small { font-size: .71rem; letter-spacing: .06em;
  color: var(--gok-300); text-transform: uppercase; font-weight: 500; }

.ana-menu { margin-left: auto; }
.ana-menu ul { display: flex; align-items: center; gap: var(--b-1); }
.ana-menu ul a {
  display: block; padding: var(--b-2) .6rem;
  border-radius: var(--r-s);
  color: var(--metin-acik); text-decoration: none;
  font-size: .9rem; font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--gecis), color var(--gecis);
}
/* Menü içi iletişim butonları yalnızca mobil menüde görünür
   (script.js bu bloğu menünün sonuna ekler) */
.ana-menu__aksiyon { display: none; }
.ana-menu ul a:hover { background: rgba(120,192,224,.14); color: var(--gok-200); }

.ust-bar__aksiyon { display: flex; align-items: center; gap: var(--b-3); flex: none; }

.ust-tel {
  display: inline-flex; align-items: center; gap: var(--b-2);
  color: var(--beyaz); text-decoration: none;
  padding: var(--b-2) var(--b-3); border-radius: var(--r-s);
  transition: background-color var(--gecis);
}
.ust-tel:hover { background: rgba(120,192,224,.14); color: var(--beyaz); }
.ust-tel .ikon { width: 20px; height: 20px; color: var(--gok-400); }
.ust-tel span { display: flex; flex-direction: column; line-height: 1.15; }
.ust-tel small { font-size: .68rem; color: var(--gok-300); letter-spacing: .04em; text-transform: uppercase; }
.ust-tel strong { font-size: .96rem; font-weight: 600; white-space: nowrap; }

.menu-dugme {
  display: none;
  width: 46px; height: 46px; margin-left: auto;
  background: rgba(120,192,224,.12);
  border: 1px solid rgba(120,192,224,.28);
  border-radius: var(--r-s);
  padding: 12px 11px;
  flex-direction: column; justify-content: space-between;
}
.menu-dugme span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--gok-200);
  transition: transform var(--gecis), opacity var(--gecis);
}
.menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Açılır menü açıkken sayfayı karartan perde (script.js ekler).
   Perdeye tıklamak menüyü kapatır; alttaki bağlantılara yanlışlıkla tıklanmaz. */
.menu-perde {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(4,4,24,.55);
  opacity: 0; visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
}
.menu-perde.acik { opacity: 1; visibility: visible; }


/* ============================================================
   06. HERO + 3D SAHNE
   ============================================================ */
.hero {
  position: relative;
  background: linear-gradient(165deg, var(--lacivert-850) 0%, var(--lacivert-900) 45%, var(--lacivert-950) 100%);
  color: var(--beyaz);
  overflow: hidden;
  isolation: isolate;
}

.hero__zemin { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__alan-cizgileri { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__partikul { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__izgara {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(120,192,224,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,192,224,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
}

.hero__ic {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: var(--b-7);
  padding-block: clamp(2.25rem, 1.5rem + 3.2vw, 4rem) clamp(3rem, 2rem + 4.5vw, 5.5rem);
}
/* Izgara öğelerinin içerik genişliğiyle kabı zorlamasını engeller */
.hero__ic > * { min-width: 0; }

.rozet {
  display: inline-flex; align-items: center; gap: var(--b-2);
  padding: var(--b-2) var(--b-4);
  border: 1px solid rgba(120,192,224,.32);
  background: rgba(120,192,224,.1);
  border-radius: var(--r-tam);
  font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  color: var(--gok-200);
  margin-bottom: var(--b-5);
  max-width: 100%;
}
.rozet .ikon { width: 15px; height: 15px; color: var(--gok-400); }

.hero h1 { margin-bottom: var(--b-4); max-width: 19ch; }
.hero h1 .vurgu {
  background: linear-gradient(100deg, var(--gok-400) 10%, var(--mavi-500) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__aciklama {
  font-size: clamp(1.02rem, .98rem + .35vw, 1.18rem);
  color: var(--metin-acik-soluk);
  max-width: 50ch;
  margin-bottom: var(--b-5);
}

.hero__ctalar { display: flex; flex-wrap: wrap; gap: var(--b-3); margin-bottom: var(--b-5); }

.hero__guven { display: flex; flex-wrap: wrap; gap: var(--b-2) var(--b-5); }
.hero__guven li {
  display: inline-flex; align-items: center; gap: var(--b-2);
  font-size: .9rem; color: var(--metin-acik-soluk);
}
.hero__guven .ikon { width: 17px; height: 17px; color: var(--gok-400); stroke-width: 2.6; }

/* Hero alt geçişi: koyu hero'dan açık bölüme yumuşak akış */
.hero__gecis {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--lacivert-950));
  pointer-events: none; opacity: .55;
}

/* ---------- 3D SAHNE ---------- */
.hero__sahne {
  position: relative;
  width: 100%;
  /* CLS önlemi: sahnenin yüksekliği en baştan rezerve ediliyor.
     min-height yerine min-block-size kullanılıyor ki aspect-ratio,
     dar ekranlarda kabı zorlayacak bir genişlik üretmesin. */
  aspect-ratio: 1 / .92;
  min-width: 0;
  perspective: 1200px;
}

.sahne3d { position: absolute; inset: 0; }

/* Gerçek zamanlı 3B sahnenin çizildiği tuval.
   Boyut CSS ile belirlenir; script.js tuvali cihaz piksel oranına göre ölçekler. */
.sahne3d__tuval {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* Sahne etiketleri */
.sahne3d__etiket {
  position: absolute; z-index: 4;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--b-3) var(--b-4);
  background: rgba(8,8,48,.78);
  border: 1px solid rgba(120,192,224,.26);
  border-radius: var(--r-m);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--g-koyu);
  max-width: 216px;
}
.sahne3d__etiket strong { font-family: var(--yazi-baslik); font-size: .87rem; color: var(--gok-200); }
.sahne3d__etiket span {
  font-size: .74rem; line-height: 1.45; color: rgba(232,238,247,.7);
  font-variant-numeric: tabular-nums;
}
/* Sağdaki etiket üstte duruyor: sağ altta yüzen WhatsApp butonu var */
.sahne3d__etiket--sag { right: -1%; top: 1%; }
.sahne3d__etiket--sol { left: 0; bottom: 2%; }


/* ============================================================
   07. GÜVEN ŞERİDİ
   ============================================================ */
.guven-serit {
  position: relative; z-index: 2;
  background: var(--zemin);
  margin-top: -46px;
  padding-bottom: var(--b-8);
}
.guven-serit__ic {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b-4);
}
.guven-kart {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
  padding: var(--b-5);
  box-shadow: var(--g-m);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.guven-kart:hover { transform: translateY(-4px); box-shadow: var(--g-l); border-color: var(--gok-300); }
.guven-kart .ikon--kutu { color: var(--kral-600); margin-bottom: var(--b-3); }
.guven-kart h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: var(--b-2); }
.guven-kart p { font-size: .92rem; color: var(--metin-soluk); }


/* ============================================================
   08. BÖLÜM BAŞLIKLARI
   ============================================================ */
.bolum { padding-block: clamp(3.5rem, 2.2rem + 5vw, var(--b-10)); position: relative; }
.bolum--acik-zemin { background: var(--zemin-alt); }

.bolum--koyu {
  background: linear-gradient(170deg, var(--lacivert-900), var(--lacivert-950));
  color: var(--metin-acik);
  overflow: hidden; isolation: isolate;
}
.bolum--koyu__zemin { position: absolute; inset: 0; z-index: 0; opacity: .38; pointer-events: none; }
.bolum--koyu__zemin svg { width: 100%; height: 100%; }
.bolum--koyu .kapsayici { position: relative; z-index: 1; }
.bolum--koyu h2, .bolum--koyu h3 { color: var(--beyaz); }

.bolum-basi { max-width: 62ch; margin: 0 auto var(--b-8); text-align: center; }
.bolum-etiket {
  display: inline-block;
  font-family: var(--yazi-baslik);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--kral-600);
  margin-bottom: var(--b-3);
}
.bolum--koyu .bolum-etiket, .bolum-basi--acik .bolum-etiket { color: var(--gok-400); }
.bolum-aciklama { color: var(--metin-soluk); font-size: 1.03rem; }
.bolum--koyu .bolum-aciklama { color: var(--metin-acik-soluk); }


/* ============================================================
   09. HİZMET KARTLARI
   ============================================================ */
.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--b-4);
}
.hizmet-kart {
  position: relative;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
  padding: var(--b-6) var(--b-5);
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
/* üst kenarda ince renk şeridi — hover'da açılır */
.hizmet-kart::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--gok-400), var(--kral-600));
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms cubic-bezier(.4,0,.2,1);
}
.hizmet-kart:hover { transform: translateY(-5px); box-shadow: var(--g-l); border-color: var(--gok-300); }
.hizmet-kart:hover::before { transform: scaleX(1); }

.hizmet-kart__ikon {
  width: 52px; height: 52px; margin-bottom: var(--b-4);
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(120,192,224,.2), rgba(57,67,183,.14));
  color: var(--kral-700);
}
.hizmet-kart__ikon svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.hizmet-kart p { font-size: .945rem; color: var(--metin-soluk); }

/* Izgara içi CTA kartı */
.hizmet-kart--cta {
  background: linear-gradient(150deg, var(--lacivert-800), var(--lacivert-900));
  border-color: transparent; color: var(--metin-acik);
  display: flex; flex-direction: column; justify-content: center;
}
.hizmet-kart--cta::before { display: none; }
.hizmet-kart--cta:hover { transform: translateY(-5px); }
.hizmet-kart--cta h3 { color: var(--beyaz); }
.hizmet-kart--cta p { color: var(--metin-acik-soluk); margin-bottom: var(--b-5); }
.hizmet-kart__ctalar { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.hizmet-kart--cta .btn--birincil { background: var(--gok-400); color: var(--lacivert-900); }
.hizmet-kart--cta .btn--birincil:hover { background: var(--gok-300); }
/* CTA kartı satırın kalan boşluğunu doldursun */
@media (min-width: 700px) { .hizmet-kart--cta { grid-column: span 2; } }


/* ============================================================
   10. SÜREÇ AKIŞI
   ============================================================ */
.surec-akis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--b-4);
  counter-reset: adim;
  position: relative;
}
/* adımları birleştiren çizgi */
.surec-akis::before {
  content: ""; position: absolute;
  left: 10%; right: 10%; top: 86px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(120,192,224,.42) 15%, rgba(120,192,224,.42) 85%, transparent);
}
.surec-adim {
  position: relative;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(120,192,224,.18);
  border-radius: var(--r-l);
  padding: var(--b-5) var(--b-4) var(--b-5);
  text-align: center;
  transition: transform var(--gecis), background-color var(--gecis), border-color var(--gecis);
}
.surec-adim:hover { transform: translateY(-4px); background: rgba(120,192,224,.1); border-color: rgba(120,192,224,.4); }
.surec-adim__ikon {
  width: 68px; height: 68px; margin: 0 auto var(--b-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--kral-600), var(--lacivert-800));
  border: 3px solid var(--lacivert-950);
  box-shadow: 0 0 0 1px rgba(120,192,224,.32), 0 10px 26px rgba(0,0,0,.34);
  position: relative; z-index: 1;
}
.surec-adim__ikon svg {
  width: 28px; height: 28px; color: var(--gok-200);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.surec-adim__no {
  font-family: var(--yazi-baslik); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; color: var(--gok-400);
  margin-bottom: var(--b-2);
}
.surec-adim h3 { font-size: 1.02rem; margin-bottom: var(--b-2); }
.surec-adim p { font-size: .875rem; color: var(--metin-acik-soluk); line-height: 1.6; }

.surec-cta { text-align: center; margin-top: var(--b-8); }
.surec-cta p { color: var(--metin-acik-soluk); margin-bottom: var(--b-4); font-size: 1.05rem; }


/* ============================================================
   11. SEKTÖR IZGARASI
   ============================================================ */
.sektor-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--b-3);
}
.sektor {
  display: flex; align-items: center; gap: var(--b-3);
  padding: var(--b-4) var(--b-4);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-m);
  font-weight: 500; font-size: .96rem;
  transition: transform var(--gecis), border-color var(--gecis),
              background-color var(--gecis), box-shadow var(--gecis);
}
.sektor:hover {
  transform: translateY(-3px);
  border-color: var(--gok-400);
  background: linear-gradient(135deg, rgba(120,192,224,.1), rgba(57,67,183,.05));
  box-shadow: var(--g-m);
}
.sektor svg {
  width: 26px; height: 26px; flex: none; color: var(--kral-600);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.sektor-not {
  margin-top: var(--b-6); text-align: center;
  color: var(--metin-soluk); font-size: .96rem;
}


/* ============================================================
   12. NEDEN ERÇELİK + FIRIN GÖRSELİ
   ============================================================ */
.neden { background: var(--zemin-alt); }
.neden__ic {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr);
  gap: var(--b-8); align-items: center;
}
.neden__metin .bolum-aciklama { margin-bottom: var(--b-6); }

.neden__liste { display: grid; gap: var(--b-4); margin-bottom: var(--b-7); }
.neden__liste li { display: flex; gap: var(--b-3); align-items: flex-start; }
.neden__liste .ikon {
  width: 22px; height: 22px; flex: none; margin-top: 3px;
  color: var(--beyaz); stroke-width: 3;
  background: var(--kral-600); border-radius: 50%; padding: 4px;
}
.neden__liste strong { display: block; font-family: var(--yazi-baslik);
  font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
.neden__liste span { font-size: .93rem; color: var(--metin-soluk); line-height: 1.55; }

/* Fırın görseli */
.neden__gorsel { position: relative; }
.firin {
  position: relative;
  border-radius: var(--r-l);
  background: linear-gradient(160deg, var(--lacivert-850), var(--lacivert-950));
  padding: var(--b-5);
  box-shadow: var(--g-l);
  overflow: hidden;
}
.firin__isi {
  position: absolute; left: 50%; top: 45%;
  width: 78%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(57,67,183,.6), rgba(120,192,224,.12) 52%, transparent 72%);
  filter: blur(26px);
  animation: isiNefes 4.5s ease-in-out infinite;
}
.firin__cizim { position: relative; width: 100%; height: auto; display: block; }
.firin__parcalar > g { animation: parcaAsili 5.5s ease-in-out infinite; transform-origin: top center; }
.firin__parcalar > g:nth-child(2) { animation-delay: -1.2s; }
.firin__parcalar > g:nth-child(3) { animation-delay: -2.4s; }
.firin__parcalar > g:nth-child(4) { animation-delay: -3.6s; }
.firin__dalga { animation: dalgaYuksel 3s ease-in-out infinite; }

.firin__olcum {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--b-3);
  margin-top: var(--b-4); padding: var(--b-4);
  background: rgba(120,192,224,.09);
  border: 1px solid rgba(120,192,224,.22);
  border-radius: var(--r-m);
}
.firin__olcum-nokta {
  width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px;
  background: var(--gok-400);
  box-shadow: 0 0 0 0 rgba(120,192,224,.55);
  animation: nabiz 2.4s ease-out infinite;
}
.firin__olcum strong { display: block; font-family: var(--yazi-baslik);
  font-size: .92rem; color: var(--gok-200); margin-bottom: 2px; }
.firin__olcum span { font-size: .8rem; color: rgba(232,238,247,.68); line-height: 1.5; }

/* RAL renk kartelası */
.renk-kartela {
  margin-top: var(--b-4);
  padding: var(--b-5);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
  box-shadow: var(--g-s);
}
.renk-kartela h3 { font-size: .98rem; margin-bottom: var(--b-4); }
.renk-kartela__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 8 renk = 4 × 2 düzen */
  gap: var(--b-3);
  margin-bottom: var(--b-4);
}
.renk-kartela__liste li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.renk-kartela__liste span {
  width: 100%; aspect-ratio: 3 / 2; border-radius: 8px;
  background: var(--renk);
  box-shadow: inset 0 0 0 1px rgba(20,24,58,.14), 0 2px 6px rgba(14,14,82,.12);
}
.renk-kartela__liste small {
  font-family: var(--yazi-baslik); font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; color: var(--metin-soluk);
}
.renk-kartela > p { font-size: .82rem; color: var(--metin-soluk); margin: 0; line-height: 1.55; }


/* ============================================================
   13. TEKLİF FORMU
   ============================================================ */
.teklif__ic {
  display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: var(--b-8); align-items: start;
}
.teklif__sol .bolum-aciklama { margin-bottom: var(--b-6); }

.teklif__hizli { display: grid; gap: var(--b-3); }
.teklif__hizli-kart {
  display: flex; align-items: center; gap: var(--b-4);
  padding: var(--b-4);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(120,192,224,.2);
  border-radius: var(--r-m);
  text-decoration: none; color: var(--metin-acik);
  transition: background-color var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.teklif__hizli-kart:hover {
  background: rgba(120,192,224,.12); border-color: var(--gok-400);
  color: var(--beyaz); transform: translateX(3px);
}
.teklif__hizli-kart .ikon { width: 28px; height: 28px; color: var(--gok-400); }
.teklif__hizli-kart strong { display: block; font-family: var(--yazi-baslik);
  font-size: .98rem; color: var(--beyaz); }
.teklif__hizli-kart span { font-size: .86rem; color: var(--metin-acik-soluk); }

/* "Ne göndermeliyim?" kontrol listesi — teklif sürecini kısaltır */
.teklif__kontrol {
  margin-top: var(--b-6);
  padding: var(--b-5);
  border: 1px solid rgba(120,192,224,.2);
  border-left: 3px solid var(--gok-400);
  border-radius: var(--r-m);
  background: rgba(120,192,224,.06);
}
.teklif__kontrol h3 {
  font-size: 1rem; color: var(--gok-200); margin-bottom: var(--b-3);
}
.teklif__kontrol ul { display: grid; gap: var(--b-2); margin-bottom: var(--b-4); }
.teklif__kontrol li {
  position: relative; padding-left: var(--b-5);
  font-size: .92rem; color: var(--metin-acik-soluk); line-height: 1.5;
}
.teklif__kontrol li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gok-400);
}
.teklif__kontrol p { font-size: .85rem; color: rgba(232,238,247,.62); margin: 0; }

.teklif__kutu {
  background: var(--beyaz);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--g-l);
  color: var(--metin);
}

.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b-4); }
.form-alan { margin-bottom: var(--b-4); display: flex; flex-direction: column; }

.form-alan label,
.form-etiket-benzeri {
  font-size: .9rem; font-weight: 600; color: var(--metin);
  margin-bottom: var(--b-2);
}
.zorunlu { color: var(--hata); }

.form-alan input,
.form-alan textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--b-3) var(--b-4);
  font: inherit; font-size: .975rem;
  color: var(--metin);
  background: var(--kirik-beyaz);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--r-s);
  transition: border-color var(--gecis), background-color var(--gecis), box-shadow var(--gecis);
}
.form-alan textarea { resize: vertical; min-height: 108px; line-height: 1.55; }
.form-alan input::placeholder,
.form-alan textarea::placeholder { color: #626E8C; }  /* 4.6:1 — okunur yer tutucu */
.form-alan input:hover, .form-alan textarea:hover { border-color: var(--gok-300); }
.form-alan input:focus, .form-alan textarea:focus {
  outline: none; background: var(--beyaz);
  border-color: var(--kral-600);
  box-shadow: 0 0 0 4px rgba(57,67,183,.14);
}
.form-alan input[aria-invalid="true"],
.form-alan textarea[aria-invalid="true"] {
  border-color: var(--hata); background: #FFF6F6;
}

.form-yardim { font-size: .8rem; color: var(--metin-soluk); margin: var(--b-2) 0 0; }
.form-hata {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 500; color: var(--hata);
  margin: var(--b-2) 0 0;
}
.form-hata::before {
  content: "!"; display: grid; place-items: center;
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--hata); color: #fff; font-size: .68rem; font-weight: 700;
}

/* Fotoğraf yükleme */
.yukleme {
  position: relative;
  display: flex; align-items: center; gap: var(--b-4);
  padding: var(--b-5);
  border: 2px dashed var(--cizgi);
  border-radius: var(--r-m);
  background: var(--kirik-beyaz);
  cursor: pointer;
  transition: border-color var(--gecis), background-color var(--gecis);
}
.yukleme:hover, .yukleme.suruklenıyor { border-color: var(--kral-600); background: rgba(57,67,183,.05); }
.yukleme__girdi {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.yukleme__girdi:focus-visible + .yukleme__ikon { outline: 3px solid var(--odak); outline-offset: 3px; }
.yukleme__ikon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(135deg, rgba(120,192,224,.24), rgba(57,67,183,.16));
  color: var(--kral-700);
}
.yukleme__ikon svg { width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.yukleme__yazi strong { display: block; font-size: .95rem; font-weight: 600; }
.yukleme__yazi small { font-size: .8rem; color: var(--metin-soluk); }

.yukleme__liste { margin-top: var(--b-3); display: grid; gap: var(--b-2); }
.yukleme__liste li {
  display: flex; align-items: center; gap: var(--b-3);
  padding: var(--b-2) var(--b-3);
  background: var(--acik-gri); border-radius: var(--r-s);
  font-size: .86rem;
}
.yukleme__liste img {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none;
}
.yukleme__liste span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yukleme__liste small { color: var(--metin-soluk); flex: none; }

.form-notu { margin-top: var(--b-4); font-size: .88rem; color: var(--metin-soluk); text-align: center; }

/* Gönderim sırasında buton */
.btn[disabled] { opacity: .72; cursor: progress; transform: none; }

/* Gönderim hatası (ör. fotoğraflar çok büyük) */
.form-durum {
  margin: var(--b-3) 0 0; padding: var(--b-3) var(--b-4);
  font-size: .88rem; line-height: 1.5; color: #8E1B1B;
  background: #FFF6F6; border: 1px solid #F1C4C4; border-radius: var(--r-s);
}
.form-durum a { color: #8E1B1B; font-weight: 600; }

/* Formun altındaki KVKK bilgilendirmesi */
.form-kvkk { margin: var(--b-3) 0 0; font-size: .8rem; line-height: 1.55; color: var(--metin-soluk); text-align: center; }
.form-kvkk a { color: var(--kral-700); font-weight: 600; }
.teklif__kutu .metin-baglanti--acik { color: var(--kral-700); }


/* ============================================================
   14. S.S.S.
   ============================================================ */
.sss-liste { max-width: 880px; margin-inline: auto; display: grid; gap: var(--b-3); }
.sss-oge {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.sss-oge[open] { border-color: var(--gok-300); box-shadow: var(--g-m); }
.sss-oge summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-4);
  padding: var(--b-4) var(--b-5);
  cursor: pointer; list-style: none;
  font-family: var(--yazi-baslik); font-size: 1.02rem; font-weight: 600;
  transition: background-color var(--gecis), color var(--gecis);
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary:hover { background: rgba(120,192,224,.07); color: var(--kral-700); }
.sss-oge summary i {
  position: relative; width: 20px; height: 20px; flex: none;
}
.sss-oge summary i::before,
.sss-oge summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--kral-600); border-radius: 2px;
  transform: translate(-50%,-50%);
  transition: transform 220ms cubic-bezier(.4,0,.2,1), opacity 220ms;
}
.sss-oge summary i::before { width: 14px; height: 2.5px; }
.sss-oge summary i::after  { width: 2.5px; height: 14px; }
.sss-oge[open] summary i::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.sss-oge__govde { padding: 0 var(--b-5) var(--b-5); }
.sss-oge__govde p { color: var(--metin-soluk); font-size: .96rem; max-width: 74ch; }


/* ============================================================
   15. İLETİŞİM + HARİTA
   ============================================================ */
.iletisim__izgara {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: var(--b-6); align-items: stretch;
}
.iletisim__bilgi { display: grid; gap: var(--b-3); align-content: start; }

.iletisim-kart {
  display: flex; align-items: center; gap: var(--b-4);
  padding: var(--b-4);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-m);
  text-decoration: none; color: var(--metin);
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
a.iletisim-kart:hover {
  transform: translateY(-3px); border-color: var(--gok-400);
  box-shadow: var(--g-m); color: var(--metin);
}
.iletisim-kart--duz { align-items: flex-start; }
.iletisim-kart__ikon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(135deg, rgba(120,192,224,.22), rgba(57,67,183,.14));
  color: var(--kral-700);
}
.iletisim-kart__ikon--wa { background: rgba(14,123,62,.12); color: var(--wa); }
.iletisim-kart__ikon svg { width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.iletisim-kart__ikon--wa svg { fill: currentColor; stroke: none; }
.iletisim-kart__yazi small {
  display: block; font-size: .76rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin-soluk); margin-bottom: 2px;
}
.iletisim-kart__yazi strong {
  font-family: var(--yazi-baslik); font-size: 1rem; font-weight: 600;
  line-height: 1.45; word-break: break-word;
}

.harita {
  position: relative;
  min-height: 380px;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  box-shadow: var(--g-m);
  background: var(--acik-gri);
}
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }

/* Harita yüklenemezse görünen yer tutucu (iframe'in altında durur) */
.harita__yer-tutucu {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-content: center; justify-items: center;
  gap: var(--b-2); padding: var(--b-6); text-align: center;
  background:
    linear-gradient(135deg, rgba(120,192,224,.12), rgba(57,67,183,.07)),
    var(--acik-gri);
}
.harita__yer-tutucu svg {
  width: 34px; height: 34px; color: var(--kral-600);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.harita__yer-tutucu strong { font-family: var(--yazi-baslik); font-size: 1rem; }
.harita__yer-tutucu span { font-size: .9rem; color: var(--metin-soluk); }
.harita__yol-tarifi {
  position: absolute; left: var(--b-4); bottom: var(--b-4); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--b-2);
  min-height: 44px; padding: var(--b-2) var(--b-4);
  background: var(--lacivert-900); color: var(--beyaz);
  border-radius: var(--r-tam);
  font-size: .9rem; font-weight: 600; text-decoration: none;
  box-shadow: var(--g-m);
  transition: background-color var(--gecis), transform var(--gecis);
}
.harita__yol-tarifi:hover { background: var(--kral-700); color: var(--beyaz); transform: translateY(-2px); }
.harita__yol-tarifi .ikon { width: 16px; height: 16px; }


/* ============================================================
   16. ALT BİLGİ
   ============================================================ */
.alt-bilgi {
  background: var(--lacivert-950); color: var(--metin-acik-soluk);
  padding-top: var(--b-8);
  border-top: 1px solid rgba(120,192,224,.14);
}
.alt-bilgi__ic {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--b-6); padding-bottom: var(--b-7);
}
.alt-bilgi__marka p { font-size: .9rem; line-height: 1.65; margin-top: var(--b-4); max-width: 42ch; }
.logo--alt .logo__yazi strong { font-size: 1.14rem; }

.alt-bilgi__sutun h2 {
  font-size: .82rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gok-400); margin-bottom: var(--b-4);
}
.alt-bilgi__sutun ul { display: grid; gap: var(--b-2); }
.alt-bilgi__sutun a {
  color: var(--metin-acik-soluk); text-decoration: none; font-size: .92rem;
  transition: color var(--gecis);
  display: inline-block; padding-block: 3px;
}
.alt-bilgi__sutun a:hover { color: var(--gok-200); text-decoration: underline; }
.alt-bilgi__iletisim address { font-size: .9rem; line-height: 1.65; margin-top: var(--b-2); }

.alt-bilgi__telif {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--b-3);
  padding-block: var(--b-4);
  border-top: 1px solid rgba(120,192,224,.14);
  font-size: .84rem;
}
.alt-bilgi__telif p { margin: 0; }
.alt-bilgi__bolge { color: var(--gok-300); }


/* ============================================================
   17. YÜZEN WHATSAPP + MOBİL AKSİYON ÇUBUĞU
   ============================================================ */
.yuzen-wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: var(--b-3);
  height: 58px; padding: 0 20px 0 16px;
  background: var(--wa-parlak); color: #062C16;
  border-radius: var(--r-tam);
  text-decoration: none; font-weight: 600; font-size: .94rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.yuzen-wa:hover { transform: translateY(-3px) scale(1.02); color: #062C16;
  box-shadow: 0 16px 36px rgba(0,0,0,.34); }
.yuzen-wa svg { width: 28px; height: 28px; flex: none; }
.yuzen-wa__balon { white-space: nowrap; }

.mobil-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: rgba(8,8,48,.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(120,192,224,.2);
  padding-bottom: env(safe-area-inset-bottom); /* iPhone çentik/çubuk alanı */
}
.mobil-bar__oge {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 60px; padding: var(--b-2) var(--b-1);
  color: var(--metin-acik); text-decoration: none;
  font-size: .76rem; font-weight: 600;
  transition: background-color var(--gecis);
}
.mobil-bar__oge:active { background: rgba(120,192,224,.14); }
.mobil-bar__oge svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.mobil-bar__oge--wa { color: #7BF0AE; }
.mobil-bar__oge--wa svg { fill: currentColor; stroke: none; }
.mobil-bar__oge--vurgu { background: var(--gok-400); color: var(--lacivert-900); }
.mobil-bar__oge--vurgu:active { background: var(--gok-300); }


/* ============================================================
   18. ANİMASYONLAR
   Tamamı transform/opacity üzerinden — düzen kaymasına (CLS) yol açmaz.
   ============================================================ */
@keyframes isiNefes {
  0%, 100% { opacity: .58; transform: translate(-50%,-50%) scale(.95); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.05); }
}
@keyframes parcaAsili {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.1deg); }
}
@keyframes dalgaYuksel {
  0%, 100% { opacity: .3; transform: translateY(4px); }
  50%      { opacity: .75; transform: translateY(-4px); }
}
@keyframes nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(120,192,224,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(120,192,224,0); }
  100% { box-shadow: 0 0 0 0 rgba(120,192,224,0); }
}

/* Kaydırmada belirme — JS ".gorunur" sınıfını ekler.
   Kurallar yalnızca <html class="js"> varken geçerli: JavaScript kapalıysa
   veya bir hata oluşursa tüm içerik normal şekilde görünür kalır. */
.js [data-goster] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 520ms cubic-bezier(.4,0,.2,1), transform 520ms cubic-bezier(.4,0,.2,1);
}
.js [data-goster].gorunur { opacity: 1; transform: none; }

/* --- Hareket azaltma tercihi: tüm süslemeler durur --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-goster] { opacity: 1; transform: none; }
  /* Canvas'lar script.js tarafından tek kare, hareketsiz çizilir */
}


/* ============================================================
   19. DUYARLI DÜZENLEMELER (mobile-first kontroller)
   ============================================================ */

/* ---- 1080px ve altı: dar masaüstü / yatay tablet ---- */
@media (max-width: 1080px) {
  .ust-tel small { display: none; }
  .guven-serit__ic { grid-template-columns: repeat(2, 1fr); }
  .surec-akis { grid-template-columns: repeat(3, 1fr); }
  .surec-akis::before { display: none; }
  .alt-bilgi__ic { grid-template-columns: 1fr 1fr; }
}

/* ---- 1280px ve altı: menü bağlantıları açılır panele geçer ----
   Bu genişliklerde logo + 6 menü bağlantısı + telefon + "Teklif Al" yan yana
   sığmıyordu (buton ekranın dışında kalıyordu). Telefon ve "Teklif Al"
   üst çubukta görünür kalır; bağlantılar ☰ düğmesiyle açılan panelde. */
@media (max-width: 1280px) {
  .menu-dugme { display: flex; margin-left: 0; }
  .ust-bar__aksiyon { margin-left: auto; }

  .ana-menu {
    /* DİKKAT: .ust-bar üzerindeki backdrop-filter, position:fixed öğeler için
       kapsayıcı blok oluşturur. Bu yüzden konum üst çubuğa göre verilir
       (top:100% = üst çubuğun hemen altı) ve yükseklik dvh ile açıkça yazılır. */
    position: fixed; top: 100%; left: 0; right: 0;
    height: calc(100dvh - var(--ust-bar-h));
    margin: 0;
    display: flex; flex-direction: column;
    background: var(--lacivert-950);
    border-bottom: 1px solid rgba(120,192,224,.2);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Açılış: yükseklik değil transform üzerinden — CLS yaratmaz */
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform 300ms cubic-bezier(.4,0,.2,1), visibility 300ms;
  }
  .ana-menu.acik { transform: translateY(0); visibility: visible; }
  .ana-menu ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--b-3) var(--b-5) var(--b-6); }
  .ana-menu li + li { border-top: 1px solid rgba(120,192,224,.12); }
  .ana-menu ul a { padding: var(--b-4) var(--b-2); font-size: 1.02rem; border-radius: 0; }

  /* Panelin altına iletişim aksiyonları eklenir (JS ile).
     margin-top:auto → butonlar panelin altına yaslanır, başparmakla kolay erişilir. */
  .ana-menu__aksiyon {
    display: grid; gap: var(--b-3);
    padding: var(--b-5) var(--b-5) calc(var(--b-7) + env(safe-area-inset-bottom));
    margin-top: auto;
  }
}

/* Tablet ve dizüstünde panel sağdan açılan dar bir çekmece olur.
   Kapalıyken ekran dışına kaydırılmaz (transform sayfada yatay kaydırma
   alanı yaratırdı); yerinde durur ve clip-path ile gizlenir. */
@media (min-width: 721px) and (max-width: 1280px) {
  .ana-menu {
    left: auto; width: min(380px, 100%);
    border-bottom: 0; border-left: 1px solid rgba(120,192,224,.2);
    box-shadow: -24px 0 48px rgba(0,0,0,.35);
    transform: none;
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    transition: clip-path 300ms cubic-bezier(.4,0,.2,1), -webkit-clip-path 300ms cubic-bezier(.4,0,.2,1), visibility 300ms;
  }
  .ana-menu.acik {
    transform: none;
    -webkit-clip-path: inset(0 0 0 -60px); /* sol taraftaki gölge görünsün */
    clip-path: inset(0 0 0 -60px);
  }
}

/* ---- 900px ve altı: tablet / telefon düzeni ---- */
@media (max-width: 900px) {
  html { scroll-padding-top: 78px; }

  .hero__ic { grid-template-columns: 1fr; gap: var(--b-7); padding-block: var(--b-7) var(--b-8); }
  .hero h1 { max-width: 20ch; }
  .hero__sahne { aspect-ratio: 16/11; max-width: 560px; margin-inline: auto; width: 100%; }
  .sahne3d__etiket { max-width: 170px; padding: var(--b-2) var(--b-3); }

  .neden__ic,
  .teklif__ic,
  .iletisim__izgara { grid-template-columns: 1fr; gap: var(--b-7); }
  .neden__gorsel { max-width: 520px; margin-inline: auto; width: 100%; }
  .harita { min-height: 320px; }
}

/* ---- 720px ve altı: telefon ---- */
@media (max-width: 720px) {
  :root { --mobil-bar-h: 62px; }

  /* Telefonda arama ve teklif butonları alttaki sabit çubukta; üst çubukta yalnızca logo + ☰ */
  .ust-bar__aksiyon { display: none; }
  .menu-dugme { margin-left: auto; }

  .mobil-bar { display: flex; }
  .yuzen-wa { display: none; } /* mobilde yerini sabit çubuk alıyor */

  .guven-serit { margin-top: -24px; }
  .guven-serit__ic { grid-template-columns: 1fr; }

  .surec-akis { grid-template-columns: 1fr; gap: var(--b-3); }
  .surec-adim { display: grid; grid-template-columns: 68px 1fr; gap: var(--b-4);
    text-align: left; align-items: center; padding: var(--b-4); }
  .surec-adim__ikon { margin: 0; grid-row: 1 / span 3; }
  .surec-adim__no { grid-column: 2; margin-bottom: 0; }
  .surec-adim h3 { grid-column: 2; margin-bottom: 4px; }
  .surec-adim p { grid-column: 2; }

  .form-satir { grid-template-columns: 1fr; gap: 0; }

  .hero__ctalar .btn { width: 100%; }
  .hizmet-kart__ctalar .btn { flex: 1 1 auto; }

  .alt-bilgi__ic { grid-template-columns: 1fr; gap: var(--b-6); }
  .alt-bilgi__telif { flex-direction: column; gap: var(--b-2); }

  .sahne3d__etiket--sol { left: 0; bottom: 0; }
  .sahne3d__etiket--sag { right: 0; top: 0; }

  .sss-oge summary { font-size: .96rem; padding: var(--b-4); }
  .sss-oge__govde { padding: 0 var(--b-4) var(--b-4); }
}

/* ---- 420px ve altı: küçük telefon ---- */
@media (max-width: 420px) {
  .kapsayici { padding-inline: var(--b-4); }
  .logo__yazi small { font-size: .64rem; }
  .sahne3d__etiket { max-width: 146px; padding: var(--b-2) var(--b-3); }
  .sahne3d__etiket strong { font-size: .76rem; }
  .sahne3d__etiket span { display: none; }
  .yukleme { flex-direction: column; text-align: center; }
}

/* ============================================================
   20. HARİTA DÜĞMESİ · YASAL BAĞLANTILAR · ÇEREZ BANDI · ALT SAYFALAR
   ============================================================ */

/* Harita tıklayınca yüklenir (script.js → bölüm 12).
   Alt boşluk: sol alttaki "Yol Tarifi Al" butonu yazıların üstüne binmesin */
.harita__yer-tutucu { padding-bottom: calc(var(--b-6) + 60px); }
.harita__goster { margin-top: var(--b-3); }
.harita__not { font-size: .78rem; color: var(--metin-soluk); }

/* Sayfa altı: KVKK / Çerez Politikası / Çerez tercihleri */
.alt-bilgi__yasal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--b-4); }
.alt-bilgi__yasal a,
.metin-dugme {
  display: inline-block; padding-block: 6px;
  color: var(--metin-acik-soluk); font-size: .84rem;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.metin-dugme { background: none; border: 0; padding-inline: 0; font-family: inherit; cursor: pointer; }
.alt-bilgi__yasal a:hover, .metin-dugme:hover { color: var(--gok-200); }

/* Çerez bandı (yalnızca site-ayarlari.js'e GTM kimliği girilince çıkar) */
.cerez-bandi {
  position: fixed; z-index: 120;
  left: var(--b-4); right: var(--b-4);
  bottom: calc(var(--mobil-bar-h) + var(--b-4));
  max-width: 560px;
  padding: var(--b-5);
  background: var(--lacivert-950); color: var(--metin-acik);
  border: 1px solid rgba(120,192,224,.28); border-radius: var(--r-l);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.cerez-bandi__baslik { font-size: 1.05rem; color: var(--beyaz); margin-bottom: var(--b-2); }
.cerez-bandi__metin { font-size: .88rem; line-height: 1.6; color: var(--metin-acik-soluk); margin-bottom: var(--b-4); }
.cerez-bandi__metin a { color: var(--gok-300); font-weight: 600; }
.cerez-bandi__metin a:hover { color: var(--gok-200); }
.cerez-bandi__tercihler { display: grid; gap: var(--b-3); margin-bottom: var(--b-4); }
.cerez-secim {
  display: flex; align-items: flex-start; gap: var(--b-3);
  font-size: .86rem; line-height: 1.5; color: var(--metin-acik-soluk); cursor: pointer;
}
.cerez-secim input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--gok-400); }
.cerez-secim strong { display: block; color: var(--beyaz); font-size: .9rem; }
.cerez-bandi__dugmeler { display: flex; flex-wrap: wrap; gap: var(--b-2); }
/* Reddet ve Kabul Et aynı görünür (KVKK: eşit seçenek) */
.cerez-bandi__dugme {
  flex: 1 1 120px; min-height: 46px;
  background: var(--gok-400); color: var(--lacivert-900);
}
.cerez-bandi__dugme:hover { background: var(--gok-300); color: var(--lacivert-950); }
.cerez-bandi__dugme--ikincil {
  background: transparent; color: var(--gok-200);
  border-color: rgba(196,227,242,.42);
}
.cerez-bandi__dugme--ikincil:hover { background: rgba(255,255,255,.08); color: var(--beyaz); }

/* Alt sayfalar: teşekkür, KVKK, çerez politikası */
.sayfa-alt { --mobil-bar-h: 0px; }
.sayfa-alt .ust-bar__ic { justify-content: space-between; }
.ust-bar__ana { white-space: nowrap; flex: none; }
/* Çok dar telefonlarda (360 px altı) logo alt yazısı gizlenir ki "Ana sayfa" sığsın */
@media (max-width: 360px) {
  .sayfa-alt .logo__yazi small { display: none; }
  .ust-bar__ana { padding-inline: var(--b-3); }
}
.alt-sayfa {
  background: var(--zemin-alt);
  padding-block: clamp(2.25rem, 1.8rem + 3vw, 4.5rem);
}
.alt-sayfa__kutu {
  max-width: 800px; margin-inline: auto;
  background: var(--beyaz);
  border: 1px solid var(--cizgi); border-radius: var(--r-l);
  padding: clamp(1.4rem, 1rem + 3vw, 3rem);
  box-shadow: var(--g-s);
}
.alt-sayfa h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.35rem); margin-bottom: var(--b-3); }
.alt-sayfa h2 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); margin: var(--b-6) 0 var(--b-3); }
.alt-sayfa p, .alt-sayfa li, .alt-sayfa td { color: var(--metin); }
.alt-sayfa .madde { list-style: disc; padding-left: 1.3em; display: grid; gap: var(--b-2); margin-bottom: var(--b-4); }
.alt-sayfa ol.madde { list-style: lower-alpha; }
.alt-sayfa .guncelleme { font-size: .86rem; color: var(--metin-soluk); }
.alt-sayfa .ozet { font-size: 1.02rem; color: var(--metin-soluk); }
.tablo-kaydir { overflow-x: auto; margin-bottom: var(--b-4); -webkit-overflow-scrolling: touch; }
.alt-sayfa table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .88rem; }
.alt-sayfa th, .alt-sayfa td { text-align: left; vertical-align: top; padding: var(--b-2) var(--b-3); border-bottom: 1px solid var(--cizgi); }
.alt-sayfa th { font-family: var(--yazi-baslik); font-weight: 600; background: var(--kirik-beyaz); }
.alt-bilgi--sade { padding-top: 0; }

.tesekkur { text-align: center; }
.tesekkur__ikon {
  width: 68px; height: 68px; margin: 0 auto var(--b-4);
  display: grid; place-items: center; border-radius: 50%;
  background: #EAF7EF; color: #0B6733;
}
.tesekkur__ikon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tesekkur__dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--b-3); margin: var(--b-5) 0; }
.tesekkur .btn--cerceve { color: var(--kral-700); border-color: var(--cizgi); background: var(--beyaz); }
.tesekkur .btn--cerceve:hover { border-color: var(--kral-600); color: var(--kral-600); }

/* ---- Yüksek kontrast / zorunlu renk modu ---- */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .hizmet-kart, .sektor, .sss-oge, .iletisim-kart { border: 1px solid CanvasText; }
}

/* ---- Baskı ---- */
@media print {
  .ust-bar, .mobil-bar, .yuzen-wa, .hero__zemin, .hero__sahne,
  .harita, .menu-dugme, .menu-perde, .cerez-bandi { display: none !important; }
  body { color: #000; background: #fff; }
  .bolum--koyu { background: #fff !important; color: #000 !important; }
  .bolum--koyu h2, .bolum--koyu h3 { color: #000 !important; }
}