/* İşin Ehli Su Tesisatçısı — Profesyonel Görsel Tasarım ve Tema Stilleri
   Tasarım dili: Derin Lacivert (#091E36 / #0E2A47), Soğuk Hat Mavisi (#1769C2 / #3898FF)
   ve Sıcak Hat Turuncusu (#E8590C / #FF7A29). Mobil öncelikli, yüksek kontrastlı ve modern kart yapısı. */

:root {
  --lacivert-koyu: #071728;
  --lacivert: #0E2A47;
  --lacivert-acik: #163C63;
  --mavi: #1769C2;
  --mavi-parlak: #2B84E3;
  --mavi-koyu: #0F4F96;
  --buz: #EAF2FA;
  --buz-koyu: #DCE8F5;
  --krem: #FFF7F0;
  --sicak: #E8590C;
  --sicak-parlak: #FF7426;
  --sicak-metin: #B84300;
  --murekkep: #13202C;
  --gri: #4A5A6A;
  --cizgi: #CBD8E6;
  --beyaz: #FFFFFF;
  --sayfa-bg: #F4F7FB;
  --wa: #0B7A40;
  --wa-parlak: #109650;
  --hata: #B3261E;
  --basari: #0B6E3A;

  --golge-kucuk: 0 4px 14px rgba(9, 28, 48, 0.06);
  --golge-orta: 0 10px 28px rgba(9, 28, 48, 0.10);
  --golge-buyuk: 0 18px 42px rgba(7, 23, 40, 0.18);

  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --baslik: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;

  --b1: 0.25rem; --b2: 0.5rem; --b3: 0.75rem; --b4: 1rem; --b5: 1.5rem; --b6: 2rem; --b7: 3.25rem; --b8: 4.75rem;
  --kose: 14px;
  --kose-buyuk: 20px;
  --kose-kucuk: 8px;
  --genislik: 76rem;
  --olcu: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--yazi);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--murekkep);
  background: var(--sayfa-bg);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(23, 105, 194, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 88% 42%, rgba(232, 89, 12, 0.05) 0%, transparent 45%);
  padding-bottom: 4.25rem;
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--baslik);
  color: var(--lacivert);
  line-height: 1.15;
  margin: 0 0 var(--b4);
  font-weight: 700;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 5.8vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 3.8vw, 2.2rem); }
h3 { font-size: 1.22rem; line-height: 1.25; }
p { margin: 0 0 var(--b4); max-width: var(--olcu); }
ul, ol { margin: 0 0 var(--b4); padding-left: 1.25rem; }
a { color: var(--mavi-koyu); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
a:hover { color: var(--sicak-metin); }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--sicak); outline-offset: 3px; border-radius: 4px; }

.kap { width: min(100% - 2rem, var(--genislik)); margin-inline: auto; }
.kap--dar { width: min(100% - 2rem, 54rem); }
.atla { position: absolute; left: -999px; top: 0; background: var(--lacivert); color: #fff; padding: var(--b3) var(--b4); z-index: 100; }
.atla:focus { left: 0; }
.kucuk { font-size: 0.9375rem; color: var(--gri); }
.giris { font-size: 1.1875rem; color: var(--gri); max-width: 64ch; }

/* ---- ikonlar ---- */
.ikon { width: 2.5rem; height: 2.5rem; color: var(--lacivert); flex: none; }
.ikon .s { stroke: var(--sicak); }
.ikon .m { stroke: var(--mavi); }
.ikon--kucuk { width: 1.05rem; height: 1.05rem; color: inherit; }
.ikon--btn { width: 1.25rem; height: 1.25rem; color: inherit; }
.ikon--buyuk { width: 2.75rem; height: 2.75rem; }
.ikon--dev { width: 7rem; height: 7rem; }

/* ---- üst çubuk ---- */
.ust {
  background: linear-gradient(90deg, var(--lacivert-koyu) 0%, var(--lacivert) 50%, #12355B 100%);
  color: #fff;
  font-size: 0.9375rem;
  border-bottom: 2px solid rgba(232, 89, 12, 0.45);
}
.ust__ic { display: flex; justify-content: center; align-items: center; gap: var(--b5); min-height: 2.85rem; }
.ust p { margin: 0; max-width: none; }
.ust__adres { display: none; align-items: center; gap: var(--b2); color: #D7E6F5; }
.ust__adres svg { color: var(--sicak-parlak); }
.ust__iletisim { display: flex; gap: var(--b4); flex-wrap: nowrap; justify-content: center; font-size: 0.85rem; white-space: nowrap; }
.ust a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--b2);
  min-height: 2.25rem;
  padding: 0.2rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 700;
}
.ust a:hover { background: rgba(232, 89, 12, 0.9); color: #fff; text-decoration: none; }
.ust__iletisim a[href*="wa.me"] {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.35);
}
.ust__iletisim a[href*="wa.me"]:hover {
  background: linear-gradient(135deg, #2EE673 0%, #15A392 100%);
  transform: translateY(-1px);
}

/* ---- başlık / menü ---- */
.bas {
  background: #ffffff;
  border-bottom: 1px solid var(--cizgi);
  box-shadow: 0 4px 20px rgba(14, 42, 71, 0.08);
  position: sticky;
  top: 0;
  z-index: 40;
}
.bas__ic { display: flex; align-items: center; justify-content: space-between; gap: var(--b4); min-height: 5rem; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: var(--b3); text-decoration: none; color: var(--lacivert); padding-block: 0.25rem; }
.logo__gorsel {
  height: 4rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  display: block;
}
.alt__logo {
  height: 4.2rem;
  width: auto;
  max-width: 11.5rem;
  object-fit: contain;
  display: block;
  margin-bottom: 0.75rem;
  background: #ffffff;
  padding: 0.35rem 0.65rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.menu-dugme { display: inline-flex; align-items: center; gap: var(--b3); min-height: 2.75rem; padding: 0 var(--b4); background: var(--beyaz); border: 2px solid var(--lacivert); border-radius: var(--kose-kucuk); font: inherit; font-weight: 600; color: var(--lacivert); cursor: pointer; }
.menu-dugme__cizgi { width: 1.1rem; height: 2px; background: currentColor; box-shadow: 0 -6px currentColor, 0 6px currentColor; }
.menu { display: none; flex-basis: 100%; padding-bottom: var(--b4); }
.menu[data-acik] { display: block; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu__liste > li { border-top: 1px solid var(--cizgi); position: relative; }
.menu a { display: flex; align-items: center; min-height: 3rem; padding: 0 var(--b2); text-decoration: none; color: var(--murekkep); font-weight: 600; }
.menu a:hover { color: var(--mavi-koyu); }
.menu a[aria-current] { color: var(--mavi-koyu); box-shadow: inset 3px 0 var(--sicak); }
.menu__alt > a { margin-right: 3rem; }
.menu__ac { position: absolute; right: 0; top: 0; width: 3rem; height: 3rem; background: none; border: 0; cursor: pointer; }
.menu__ac::before { content: ""; display: block; width: 0.55rem; height: 0.55rem; margin: auto; border-right: 2px solid var(--lacivert); border-bottom: 2px solid var(--lacivert); transform: rotate(45deg) translate(-2px, -2px); }
.menu__ac[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-2px, -2px); }
.menu .menu__acilir { display: none; padding: 0 0 var(--b3) var(--b4); }
.menu .menu__ac[aria-expanded="true"] + .menu__acilir { display: block; }
.menu__acilir a { font-weight: 500; min-height: 2.6rem; color: var(--murekkep); }

/* ---- butonlar ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b3);
  min-height: 3.35rem;
  padding: var(--b3) var(--b5);
  border-radius: var(--kose-kucuk);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.btn:hover { transform: translateY(-2px); }
.btn--tel {
  background: linear-gradient(135deg, #E8590C 0%, #C24100 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(232, 89, 12, 0.32);
}
.btn--tel:hover { background: linear-gradient(135deg, #FF6B1A 0%, #D9480F 100%); color: #fff; }
.btn--wa {
  background: linear-gradient(135deg, #108548 0%, #096334 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(11, 110, 58, 0.28);
}
.btn--wa:hover { background: linear-gradient(135deg, #149E56 0%, #0B7A40 100%); color: #fff; }
.btn--ana {
  background: linear-gradient(135deg, var(--mavi) 0%, var(--lacivert) 100%);
  color: #fff;
}
.btn--ana:hover { background: linear-gradient(135deg, var(--mavi-parlak) 0%, var(--mavi-koyu) 100%); color: #fff; }
.btn--ikincil { background: var(--beyaz); color: var(--lacivert); border-color: var(--lacivert); }
.btn--tam { width: 100%; }
.ok {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 1.1rem;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  color: var(--lacivert);
  text-decoration: none;
  box-shadow: var(--golge-kucuk);
}
.ok:hover { background: var(--lacivert); color: #fff; border-color: var(--lacivert); transform: translateX(3px); }
.ok::after { content: ""; width: 0.5rem; height: 0.5rem; margin-left: var(--b2); border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }

/* ---- ANA SAYFA HERO ---- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(232, 89, 12, 0.26) 0%, transparent 40%),
    radial-gradient(circle at 15% 80%, rgba(56, 152, 255, 0.25) 0%, transparent 45%),
    linear-gradient(135deg, #061526 0%, #0E2A47 52%, #153E68 100%);
  color: #fff;
  padding-block: var(--b6) var(--b7);
  border-bottom: 4px solid var(--sicak);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.hero__ic { position: relative; z-index: 1; display: grid; gap: var(--b6); }
.hero__etiket {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFD8BE;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: var(--b4);
  backdrop-filter: blur(6px);
}
.hero__etiket::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FF7A29;
  box-shadow: 0 0 0 4px rgba(255, 122, 41, 0.28);
}
.hero h1 { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); }
.hero h1 span { color: #7CC0FF; }
.hero__alt { font-size: 1.15rem; color: #DCE8F5; max-width: 58ch; line-height: 1.65; }
.hero__rozetler {
  list-style: none;
  padding: 0;
  margin: var(--b4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.hero__rozetler li {
  background: rgba(15, 79, 150, 0.55);
  border: 1px solid rgba(124, 192, 255, 0.35);
  color: #F0F7FF;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}
.hero__btn { display: grid; gap: var(--b3); margin-block: var(--b5) var(--b4); }
.hero__not {
  font-size: 0.9375rem;
  color: #BFD4EA;
  margin: 0;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--sicak-parlak);
  border-radius: 0 8px 8px 0;
}
.hero__cizim {
  position: relative;
  display: grid;
  gap: var(--b3);
}
.hero__foto-kapsul {
  position: relative;
  border-radius: var(--kose-buyuk);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42);
  background: var(--lacivert-koyu);
}
.hero__foto-kapsul img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hero__foto-alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--b3);
}
.hero__mini-kart {
  display: flex;
  align-items: center;
  gap: var(--b3);
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--kose);
  padding: 0.65rem 0.85rem;
  color: #fff;
}
.hero__mini-kart img {
  width: 4.2rem;
  height: 3.2rem;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  flex: none;
}
.hero__mini-kart strong { display: block; font-size: 0.92rem; color: #fff; line-height: 1.2; }
.hero__mini-kart span { font-size: 0.8rem; color: #C5D9ED; }

/* ---- GÜVEN ŞERİDİ ---- */
.guven-serit {
  margin-top: -1.75rem;
  position: relative;
  z-index: 5;
  margin-bottom: var(--b4);
}
.guven-serit__izgara {
  display: grid;
  gap: var(--b3);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  padding: var(--b4) var(--b5);
  box-shadow: var(--golge-orta);
}
.guven-serit__oge {
  display: flex;
  align-items: center;
  gap: var(--b3);
  padding: var(--b2);
}
.guven-serit__ikon {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--buz) 0%, #D5E6F7 100%);
  color: var(--mavi-koyu);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.2rem;
  flex: none;
  border: 1px solid rgba(23, 105, 194, 0.2);
}
.guven-serit__oge:nth-child(even) .guven-serit__ikon {
  background: linear-gradient(135deg, #FFF3E8 0%, #FFE0C7 100%);
  color: var(--sicak-metin);
  border-color: rgba(232, 89, 12, 0.25);
}
.guven-serit__oge strong { display: block; font-family: var(--baslik); color: var(--lacivert); font-size: 1.05rem; }
.guven-serit__oge span { font-size: 0.875rem; color: var(--gri); }

/* ---- BÖLÜMLER ---- */
.bolum { padding-block: var(--b7); position: relative; }
.bolum--dar { padding-block: var(--b5); }
.bolum--buz {
  background: linear-gradient(180deg, #E7F0FA 0%, #F2F7FC 100%);
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}
.bolum--lacivert {
  background:
    radial-gradient(circle at 90% 15%, rgba(232, 89, 12, 0.22) 0%, transparent 40%),
    linear-gradient(135deg, #07192D 0%, #0E2A47 60%, #153B63 100%);
  color: #fff;
}
.bolum--lacivert h2, .bolum--lacivert h3, .bolum--lacivert dt { color: #fff; }
.bolum--lacivert p, .bolum--lacivert dd { color: #D2E2F2; }
.iki { display: grid; gap: var(--b6); }

/* İmza öğe: başlığın solunda soğuk + sıcak hat */
.hat { position: relative; padding-left: 1.5rem; }
.hat::before, .hat::after { content: ""; position: absolute; top: 0.1em; bottom: 0.1em; width: 5px; border-radius: 3px; }
.hat::before { left: 0; background: var(--mavi); }
.hat::after { left: 8px; background: var(--sicak); }
.bolum--lacivert .hat::before { background: #5BB0FF; }
.bolum--lacivert .hat::after { background: #FF853B; }
.hat a { color: inherit; text-decoration: none; }
.hat a:hover { text-decoration: underline; }

/* ---- HİZMET KOLEKTÖRÜ (Görselli Kartlar) ---- */
.kolektor {
  list-style: none;
  padding: 0;
  margin: var(--b5) 0 0;
  display: grid;
  gap: var(--b4);
  border-left: 6px solid var(--mavi);
  position: relative;
}
.kolektor::before { content: ""; position: absolute; left: 2px; top: 0; bottom: 0; width: 6px; background: var(--sicak); border-radius: 0 3px 3px 0; }
.kolektor__kol { position: relative; padding-left: 2.1rem; }
.kolektor__kol::before { content: ""; position: absolute; left: 8px; top: 2.4rem; width: 1.4rem; height: 4px; background: var(--mavi); }
.kolektor__kol::after { content: ""; position: absolute; left: 1.45rem; top: calc(2.4rem - 5px); width: 14px; height: 14px; border-radius: 50%; background: var(--beyaz); border: 3px solid var(--lacivert); z-index: 2; }
.kolektor__kol:nth-child(even)::before { background: var(--sicak); }
.kolektor a {
  display: flex;
  flex-direction: column;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  overflow: hidden;
  text-decoration: none;
  color: var(--murekkep);
  box-shadow: var(--golge-kucuk);
  height: 100%;
  padding: 0;
}
.kolektor a:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-orta);
  border-color: var(--mavi);
  background: var(--beyaz);
}
.kolektor__foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--lacivert);
  border-bottom: 3px solid var(--mavi);
}
.kolektor__kol:nth-child(even) .kolektor__foto {
  border-bottom-color: var(--sicak);
}
.kolektor__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.kolektor a:hover .kolektor__foto img {
  transform: scale(1.06);
}
.kolektor__icerik {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--b3);
  row-gap: 0.25rem;
  align-items: start;
  padding: var(--b4);
  flex: 1;
}
.kolektor .ikon {
  grid-row: span 2;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.4rem;
  border-radius: 10px;
  background: var(--buz);
  border: 1px solid var(--cizgi);
}
.kolektor__kol:nth-child(even) .ikon {
  background: var(--krem);
  border-color: #F6D5BE;
}
.kolektor__ad {
  font-family: var(--baslik);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--lacivert);
  line-height: 1.22;
}
.kolektor__ozet {
  font-size: 0.9375rem;
  color: var(--gri);
  line-height: 1.48;
}

/* ---- ÖNE ÇIKANLAR (En Çok Bunun İçin Arıyorlar) ---- */
.one { display: grid; gap: var(--b5); margin-top: var(--b5); }
.one__kart {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-top: 5px solid var(--mavi);
  border-radius: var(--kose);
  overflow: hidden;
  box-shadow: var(--golge-orta);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.one__kart:hover {
  transform: translateY(-5px);
  box-shadow: var(--golge-buyuk);
}
.one__kart:nth-child(even) { border-top-color: var(--sicak); }
.one__gorsel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lacivert);
}
.one__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.one__kart:hover .one__gorsel img { transform: scale(1.06); }
.one__etiket {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(14, 42, 71, 0.88);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.one__kart:nth-child(even) .one__etiket {
  background: rgba(232, 89, 12, 0.92);
}
.one__govde {
  padding: var(--b4) var(--b5) var(--b5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.one__govde .ikon--buyuk {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.45rem;
  background: var(--buz);
  border-radius: 10px;
  margin-top: -2.1rem;
  position: relative;
  z-index: 2;
  border: 2px solid var(--beyaz);
  box-shadow: var(--golge-kucuk);
}
.one__kart h3 { margin-top: var(--b3); font-size: 1.28rem; }
.one__kart h3 a { color: var(--lacivert); text-decoration: none; }
.one__kart h3 a:hover { color: var(--sicak-metin); text-decoration: underline; }
.one__kart p { margin: 0; color: var(--gri); font-size: 0.96rem; }

/* ---- NEDEN BİZ ---- */
.neden { margin: 0; display: grid; gap: var(--b4); }
.neden div {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-left: 5px solid var(--mavi);
  border-radius: var(--kose);
  padding: var(--b4) var(--b5);
  box-shadow: var(--golge-kucuk);
}
.neden div:nth-child(even) { border-left-color: var(--sicak); }
.bolum--lacivert .neden div {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  border-left: 5px solid #5BB0FF;
  backdrop-filter: blur(8px);
}
.bolum--lacivert .neden div:nth-child(even) {
  border-left-color: #FF853B;
}
.neden dt { font-family: var(--baslik); font-weight: 700; font-size: 1.18rem; color: var(--lacivert); margin-bottom: 0.25rem; }
.neden dd { margin: 0; color: var(--gri); }
.neden-gorsel-kutu {
  margin-top: var(--b5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--b3);
}
.neden-gorsel-kutu img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--kose);
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--golge-orta);
}

/* ---- ADIMLAR (Çalışma Süreci & Hizmet Aşamaları) ---- */
.adim { list-style: none; padding: 0; margin: var(--b5) 0; counter-reset: adim; display: grid; gap: var(--b4); }
.adim li {
  counter-increment: adim;
  position: relative;
  padding: var(--b5) var(--b5) var(--b5) 4.4rem;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-top: 4px solid var(--mavi);
  border-radius: var(--kose);
  box-shadow: var(--golge-kucuk);
}
.adim li:nth-child(even) { border-top-color: var(--sicak); }
.adim li::before {
  content: counter(adim);
  position: absolute;
  left: var(--b4);
  top: var(--b5);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lacivert) 0%, var(--mavi) 100%);
  color: #fff;
  font-family: var(--baslik);
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(14, 42, 71, 0.22);
}
.adim li:nth-child(even)::before {
  background: linear-gradient(135deg, var(--sicak) 0%, var(--sicak-metin) 100%);
}
.adim h3 { margin-bottom: var(--b1); }
.adim p { margin: 0; color: var(--gri); }
.adim--dikey { gap: var(--b3); }
.adim--dikey li {
  background: var(--sayfa-bg);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--mavi);
  border-top: 1px solid var(--cizgi);
  border-radius: var(--kose-kucuk);
  padding: var(--b4) var(--b4) var(--b4) 4.2rem;
}
.adim--dikey li:nth-child(even) { border-left-color: var(--sicak); }
.adim--dikey li::before { top: var(--b4); }

/* ---- TAMAMLANAN İŞLER & UYGULAMA VİTRİNİ ---- */
.vitrin-izgara {
  display: grid;
  gap: var(--b4);
  margin-block: var(--b4);
}
.vitrin-kart {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  overflow: hidden;
  box-shadow: var(--golge-kucuk);
  display: flex;
  flex-direction: column;
}
.vitrin-kart img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.vitrin-kart__ic { padding: var(--b4); }
.vitrin-kart__bolge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sicak-metin);
  background: var(--krem);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}
.vitrin-kart h3 { font-size: 1.12rem; margin-bottom: 0.35rem; }
.vitrin-kart p { font-size: 0.92rem; color: var(--gri); margin: 0; }

/* ---- BÖLGELER ---- */
.bolge-liste { list-style: none; padding: 0; margin: var(--b4) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--b3); }
.bolge-liste a {
  display: grid;
  padding: var(--b4);
  min-height: 4.2rem;
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--mavi);
  border-radius: var(--kose-kucuk);
  text-decoration: none;
  background: var(--beyaz);
  box-shadow: var(--golge-kucuk);
}
.bolge-liste li:nth-child(even) a { border-left-color: var(--sicak); }
.bolge-liste a:hover { border-color: var(--mavi); transform: translateY(-2px); box-shadow: var(--golge-orta); }
.bolge-liste strong { font-family: var(--baslik); font-size: 1.18rem; color: var(--lacivert); }
.bolge-liste span { font-size: 0.875rem; color: var(--gri); }

.bolge-kart { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--b5); }
.bolge-kart > li {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-top: 4px solid var(--mavi);
  border-radius: var(--kose);
  padding: var(--b5);
  box-shadow: var(--golge-kucuk);
}
.bolge-kart > li:nth-child(even) { border-top-color: var(--sicak); }
.bolge-kart > li > a { text-decoration: none; color: var(--murekkep); display: block; }
.bolge-kart h2 { margin-bottom: var(--b1); color: var(--mavi-koyu); text-decoration: underline; text-underline-offset: 0.15em; }

/* ---- BLOG KARTLARI (Görselli) ---- */
.yazi-izgara { list-style: none; padding: 0; margin: var(--b4) 0 var(--b6); display: grid; gap: var(--b5); }
.yazi-kart a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  overflow: hidden;
  text-decoration: none;
  color: var(--murekkep);
  box-shadow: var(--golge-kucuk);
}
.yazi-kart a:hover { border-color: var(--mavi); transform: translateY(-4px); box-shadow: var(--golge-orta); }
.yazi-kart__foto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--lacivert);
  border-bottom: 3px solid var(--sicak);
}
.yazi-kart:nth-child(odd) .yazi-kart__foto { border-bottom-color: var(--mavi); }
.yazi-kart__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.yazi-kart a:hover .yazi-kart__foto img { transform: scale(1.05); }
.yazi-kart__ic {
  display: grid;
  gap: var(--b2);
  padding: var(--b4) var(--b5) var(--b5);
  align-content: start;
  flex: 1;
}
.yazi-kart__kat {
  display: inline-block;
  width: max-content;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sicak-metin);
  background: var(--krem);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
}
.yazi-kart__baslik { font-family: var(--baslik); font-weight: 700; font-size: 1.25rem; line-height: 1.22; color: var(--lacivert); }
.yazi-kart__ozet { font-size: 0.9375rem; color: var(--gri); line-height: 1.5; }

/* ---- SSS (Modern Akordiyon Kutu) ---- */
.sss { display: grid; gap: var(--b3); margin-top: var(--b4); }
.sss details {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--mavi);
  border-radius: var(--kose-kucuk);
  padding-inline: var(--b4);
  box-shadow: var(--golge-kucuk);
}
.sss details:nth-child(even) { border-left-color: var(--sicak); }
.sss details[open] { background: #FAFDFE; border-color: var(--mavi); }
.sss summary { cursor: pointer; padding: var(--b4) 2.5rem var(--b4) 0; font-weight: 700; color: var(--lacivert); position: relative; list-style: none; min-height: 3.2rem; display: flex; align-items: center; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: ""; position: absolute; right: 0.5rem; top: 50%; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--sicak-metin); border-bottom: 2px solid var(--sicak-metin); transform: translateY(-65%) rotate(45deg); transition: transform 0.2s ease; }
.sss details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sss__cevap { padding-bottom: var(--b4); color: var(--gri); border-top: 1px dashed var(--cizgi); padding-top: var(--b3); }

/* ---- ÇAĞRI BANDI ---- */
.cagri {
  background:
    radial-gradient(circle at 85% 50%, rgba(232, 89, 12, 0.28) 0%, transparent 45%),
    linear-gradient(135deg, #07192D 0%, var(--lacivert) 60%, #164370 100%);
  color: #fff;
  padding-block: var(--b7);
  border-top: 4px solid var(--sicak);
}
.cagri h2 { color: #fff; }
.cagri p { color: #D7E3EF; }
.cagri__ic { display: grid; gap: var(--b5); align-items: center; }
.cagri__btn { display: grid; gap: var(--b3); }
.cagri .btn--tel { background: linear-gradient(135deg, #FF7A29 0%, #E8590C 100%); color: #fff; }
.cagri .btn--tel:hover { background: linear-gradient(135deg, #FF8E47 0%, #F76707 100%); color: #fff; }
.cagri .btn--wa { background: linear-gradient(135deg, #129A52 0%, #0B7A40 100%); }

/* ---- İÇ SAYFA BAŞLIĞI (Renkli & Görselli Hero) ---- */
.kirinti { padding-block: var(--b3); font-size: 0.875rem; }
.kirinti ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--b1) var(--b2); color: var(--gri); }
.kirinti li:not(:last-child)::after { content: "/"; margin-left: var(--b2); color: var(--cizgi); }
.kirinti a { display: inline-block; padding-block: var(--b1); font-weight: 600; }

.sayfa-bas {
  background:
    radial-gradient(circle at 88% 22%, rgba(232, 89, 12, 0.24) 0%, transparent 42%),
    radial-gradient(circle at 12% 85%, rgba(56, 152, 255, 0.22) 0%, transparent 45%),
    linear-gradient(135deg, #07182B 0%, #0E2A47 55%, #17426E 100%);
  color: #fff;
  padding-block: var(--b6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 4px solid var(--sicak);
  box-shadow: 0 10px 30px rgba(7, 23, 40, 0.12);
}
.sayfa-bas h1 { color: #fff; }
.sayfa-bas--sade { padding-block: var(--b5) var(--b6); }
.sayfa-bas__ic { display: grid; gap: var(--b6); align-items: center; }
.sayfa-bas__ikon { display: none; }
.sayfa-bas__gorsel {
  margin: 0;
  border-radius: var(--kose-buyuk);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  background: var(--lacivert-koyu);
  position: relative;
}
.sayfa-bas__gorsel img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.sayfa-bas__gorsel figcaption {
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #E2EEF9;
  background: rgba(7, 23, 40, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.sayfa-bas__giris { font-size: 1.1rem; color: #DCE8F5; }
.sayfa-bas__giris p { color: #DCE8F5; }
.sayfa-bas__ust {
  display: inline-block;
  font-weight: 700;
  font-size: 0.88rem;
  color: #FFD8BE;
  background: rgba(232, 89, 12, 0.28);
  border: 1px solid rgba(255, 138, 61, 0.45);
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  margin-bottom: var(--b3);
}
.sayfa-bas__ust a { color: #FFD8BE; text-decoration: none; }
.sayfa-bas .etiket--bag a {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.sayfa-bas .etiket--bag a:hover {
  background: var(--sicak);
  border-color: var(--sicak);
}

/* ---- İKİ SÜTUN İÇ SAYFA DÜZENİ (Kartlı & Renkli) ---- */
.duzen { display: grid; gap: var(--b6); padding-block: var(--b6) var(--b7); }
.duzen__ana { display: grid; gap: var(--b5); align-content: start; }
.duzen__ana > .bolum--dar {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  padding: var(--b5) var(--b6);
  box-shadow: var(--golge-kucuk);
}
.duzen__ana > .bolum--dar:nth-child(even) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F7FC 100%);
  border-color: #BDD0E4;
}
.hizmet-vitrin {
  display: grid;
  gap: var(--b4);
  background: linear-gradient(135deg, #0A223B 0%, #133A63 100%);
  color: #fff;
  padding: var(--b5);
  border-radius: var(--kose-buyuk);
  box-shadow: var(--golge-orta);
}
.hizmet-vitrin h2 { color: #fff; margin-bottom: var(--b2); }
.hizmet-vitrin p { color: #D4E4F4; margin-bottom: var(--b3); }
.hizmet-vitrin__izgara {
  display: grid;
  gap: var(--b4);
}
.hizmet-vitrin figure {
  margin: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--kose);
  overflow: hidden;
}
.hizmet-vitrin img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.hizmet-vitrin figcaption {
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  color: #EBF3FA;
  font-weight: 600;
}

.duzen__yan { display: grid; gap: var(--b4); align-content: start; }
.yan-kutu {
  border: 1px solid var(--cizgi);
  border-top: 4px solid var(--mavi);
  border-radius: var(--kose);
  padding: var(--b5);
  background: var(--beyaz);
  box-shadow: var(--golge-kucuk);
}
.yan-kutu--ara {
  background: linear-gradient(160deg, var(--lacivert) 0%, #163E69 100%);
  border-color: var(--lacivert);
  border-top: 4px solid var(--sicak);
  color: #fff;
  display: grid;
  gap: var(--b3);
  box-shadow: var(--golge-orta);
}
.yan-kutu--ara .yan-kutu__baslik { color: #fff; }
.yan-kutu__gorsel {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--kose-kucuk);
  border: 2px solid rgba(255, 255, 255, 0.22);
  margin-bottom: var(--b2);
}
.yan-kutu__baslik { font-family: var(--baslik); font-weight: 700; font-size: 1.2rem; color: var(--lacivert); margin-bottom: var(--b3); }
.yan-kutu ul { list-style: none; padding: 0; margin: 0; }
.yan-kutu li a { display: flex; align-items: center; justify-content: space-between; padding-block: 0.65rem; border-bottom: 1px solid var(--cizgi); text-decoration: none; font-weight: 600; }
.yan-kutu li a::after { content: "→"; color: var(--sicak); font-weight: 700; }
.yan-kutu li:last-child a { border-bottom: 0; }
.yan-kutu p:last-child { margin-bottom: 0; }

.liste { padding-left: 1.25rem; max-width: var(--olcu); }
.liste li { margin-bottom: var(--b2); }
.liste--isaret {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: var(--b3);
  max-width: none;
}
.liste--isaret li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.6rem;
  background: var(--sayfa-bg);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-kucuk);
  margin-bottom: 0;
  font-weight: 500;
}
.liste--isaret li::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 1.15rem;
  width: 0.95rem;
  height: 0.55rem;
  border-left: 3px solid var(--mavi);
  border-bottom: 3px solid var(--sicak);
  border-radius: 0 0 0 5px;
}
.liste--iki {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: var(--b3);
  max-width: none;
}
.liste--iki li {
  background: var(--buz);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--lacivert);
  border-radius: var(--kose-kucuk);
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--lacivert);
}

.alt-hizmet { display: grid; gap: var(--b4); }
.alt-hizmet div {
  background: var(--sayfa-bg);
  border: 1px solid var(--cizgi);
  border-left: 5px solid var(--mavi);
  border-radius: var(--kose);
  padding: var(--b4) var(--b5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.alt-hizmet div:nth-child(even) { border-left-color: var(--sicak); background: #FFFBF7; }
.alt-hizmet div:hover { transform: translateY(-2px); box-shadow: var(--golge-kucuk); }
.alt-hizmet h3 { margin-bottom: var(--b1); color: var(--lacivert); }
.alt-hizmet p { margin: 0; color: var(--gri); font-size: 0.96rem; }

.bag-liste { list-style: none; padding: 0; display: grid; gap: var(--b2); }
.bag-liste li a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: var(--buz);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-kucuk);
  font-weight: 600;
  text-decoration: none;
}
.bag-liste li a:hover { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.bag-liste--satir { display: flex; flex-wrap: wrap; gap: var(--b2); }

.etiket { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--b2); }
.etiket li { background: var(--buz); border: 1px solid var(--cizgi); border-radius: 999px; padding: var(--b2) var(--b4); font-size: 0.9375rem; font-weight: 600; color: var(--lacivert); }
.etiket--bag li { padding: 0; background: none; border: 0; }
.etiket--bag a { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 var(--b4); background: var(--buz); border: 1px solid var(--cizgi); border-radius: 999px; text-decoration: none; font-weight: 600; }
.etiket--bag a:hover { background: var(--sicak); color: #fff; border-color: var(--sicak); }

.uyari { border: 2px solid var(--sicak); border-radius: var(--kose); padding: var(--b5); background: #FFF6EF; margin-block: var(--b5); box-shadow: var(--golge-kucuk); }
.uyari h2 { font-size: 1.25rem; margin-bottom: var(--b2); color: var(--sicak-metin); }
.uyari p { margin: 0; max-width: none; }

/* ---- BLOG YAZISI & KURUMSAL GÖVDE ---- */
.yazi__govde {
  padding: var(--b6);
  margin-block: var(--b5) var(--b7);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  box-shadow: var(--golge-kucuk);
}
.yazi__kapak {
  margin: 0 0 var(--b5);
  border-radius: var(--kose);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-kucuk);
}
.yazi__kapak img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.yazi__govde h2 { margin-top: var(--b6); font-size: clamp(1.35rem, 3.4vw, 1.75rem); }
.yazi__govde h2:first-child { margin-top: 0; }
.yazi__giris { font-size: 1.1875rem; color: var(--gri); border-left: 4px solid var(--sicak); padding-left: var(--b4); margin-bottom: var(--b5); }
.yazi__hizmet {
  margin-top: var(--b6);
  padding: var(--b5);
  background: linear-gradient(135deg, var(--buz) 0%, #DCEBFA 100%);
  border: 1px solid #B7D0E8;
  border-left: 5px solid var(--mavi);
  border-radius: var(--kose);
}
.yazi__hizmet h2 { margin-top: 0; }

/* ---- FORM ---- */
.form {
  display: grid;
  gap: var(--b4);
  max-width: 48rem;
  background: var(--sayfa-bg);
  padding: var(--b5);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
}
.form__satir { display: grid; gap: var(--b4); }
.alan { display: grid; gap: var(--b2); }
.alan label { font-weight: 700; color: var(--lacivert); }
.alan input:not([type="checkbox"]), .alan select, .alan textarea {
  font: inherit;
  font-size: 1rem;
  padding: var(--b3) var(--b4);
  min-height: 3.1rem;
  border: 2px solid #94A7BA;
  border-radius: var(--kose-kucuk);
  background: var(--beyaz);
  color: var(--murekkep);
  width: 100%;
}
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--mavi); }
.alan textarea { resize: vertical; }
.alan [aria-invalid="true"] { border-color: var(--hata); }
.alan__hata { color: var(--hata); font-size: 0.9375rem; font-weight: 600; }
.alan--gizli { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alan--onay { grid-template-columns: auto 1fr; align-items: start; gap: var(--b3); }
.alan--onay input { width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; accent-color: var(--mavi-koyu); }
.alan--onay label { font-weight: 400; color: var(--murekkep); font-size: 0.9375rem; }
.alan--onay .alan__hata { grid-column: 1 / -1; }
.form__durum { margin: 0; font-weight: 700; }
.form__durum:empty { display: none; }
.form__durum[data-durum="basari"] { color: var(--basari); padding: var(--b4); background: #E9F6EE; border-radius: var(--kose-kucuk); }
.form__durum[data-durum="hata"] { color: var(--hata); padding: var(--b4); background: #FCEEEC; border-radius: var(--kose-kucuk); }

/* ---- İLETİŞİM ---- */
.iletisim-liste { margin: 0 0 var(--b5); }
.iletisim-liste div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--b3); padding-block: var(--b3); border-bottom: 1px solid var(--cizgi); }
.iletisim-liste dt { font-weight: 700; color: var(--lacivert); }
.iletisim-liste dd { margin: 0; }
.nap { margin-bottom: var(--b4); background: var(--beyaz); padding: var(--b4); border-radius: var(--kose-kucuk); border-left: 4px solid var(--sicak); box-shadow: var(--golge-kucuk); }
.harita { border: 1px solid var(--cizgi); border-radius: var(--kose); padding: var(--b5); background: var(--buz); display: grid; gap: var(--b3); justify-items: start; }
.harita iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--kose-kucuk); }
.harita[data-yuklendi] { padding: var(--b2); }
.harita[data-yuklendi] p, .harita[data-yuklendi] button { display: none; }

/* ---- ALT BİLGİ (Footer) ---- */
.alt { background: #071728; color: #D7E3EF; padding-block: var(--b7) var(--b5); font-size: 0.9375rem; border-top: 3px solid var(--mavi); }
.alt a { color: #E6F0FA; text-decoration: none; display: inline-block; padding-block: 0.3rem; }
.alt a:hover { color: #FF9248; text-decoration: underline; }
.alt ul { list-style: none; padding: 0; margin: 0; }
.alt__izgara { display: grid; gap: var(--b6); }
.alt__ad { font-family: var(--baslik); font-weight: 700; font-size: 1.4rem; color: #fff; }
.alt__baslik { font-family: var(--baslik); font-weight: 700; font-size: 1.12rem; color: #7CC0FF; margin-bottom: var(--b2); }
.alt__son { margin-top: var(--b6); padding-top: var(--b4); border-top: 1px solid #1E3650; display: grid; gap: var(--b3); align-items: center; }
.alt__son p { margin: 0; }
.alt__son ul { display: flex; flex-wrap: wrap; gap: var(--b2) var(--b5); }
.alt__ajans a { color: #7CC0FF; font-weight: 600; }

/* ---- MOBİL SABİT İLETİŞİM ÇUBUĞU & YÜZEN WHATSAPP BUTONU ---- */
.sabit { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 -4px 16px rgba(7, 23, 40, 0.28); }
.sabit a { display: flex; align-items: center; justify-content: center; gap: var(--b2); min-height: 3.5rem; color: #fff; font-weight: 700; text-decoration: none; }
.sabit__tel { background: linear-gradient(135deg, #E8590C 0%, #C24100 100%); }
.sabit__wa { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); }

@keyframes wa-nabiz {
  0% { transform: scale(1); opacity: 0.75; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.wa-yuzen {
  position: fixed;
  right: 1rem;
  bottom: 4.5rem;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1.15rem 0.55rem 0.65rem;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(18, 140, 126, 0.48), 0 4px 10px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.wa-yuzen::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 3px solid #25D366;
  animation: wa-nabiz 2s infinite ease-out;
  pointer-events: none;
}
.wa-yuzen:hover {
  transform: translateY(-3px) scale(1.03);
  background: linear-gradient(135deg, #2EE673 0%, #149E56 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgba(18, 140, 126, 0.62), 0 6px 14px rgba(0, 0, 0, 0.25);
}
.wa-yuzen__ikon {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #fff;
  color: #128C7E;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.wa-yuzen__ikon svg {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}
.wa-yuzen__ikon::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid #fff;
}
.wa-yuzen__metin {
  display: grid;
  line-height: 1.15;
  text-align: left;
}
.wa-yuzen__metin small {
  font-size: 0.72rem;
  font-weight: 600;
  color: #E6FFF0;
  letter-spacing: 0.02em;
}
.wa-yuzen__metin strong {
  font-family: var(--baslik);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.bas__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.32);
  white-space: nowrap;
}
.bas__wa:hover {
  background: linear-gradient(135deg, #2EE673 0%, #149E56 100%);
  transform: translateY(-1px);
  color: #fff !important;
}
.bas__wa svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* ---- ÇEREZ BİLDİRİMİ ---- */
.cerez { position: fixed; left: var(--b4); right: var(--b4); bottom: 5rem; z-index: 60; background: var(--beyaz); border: 2px solid var(--lacivert); border-radius: var(--kose); padding: var(--b5); max-width: 32rem; box-shadow: 0 8px 30px rgba(14, 42, 71, 0.25); }
.cerez p { font-size: 0.9375rem; }
.cerez__btn { display: flex; gap: var(--b3); flex-wrap: wrap; }

/* ================= GENİŞ EKRANLAR ================= */
@media (min-width: 40rem) {
  .hero__btn, .cagri__btn { grid-template-columns: repeat(2, max-content); }
  .cagri__btn--dikey { grid-template-columns: 1fr; align-content: start; justify-items: start; }
  .form__satir { grid-template-columns: 1fr 1fr; }
  .one { grid-template-columns: 1fr 1fr; }
  .yazi-izgara { grid-template-columns: 1fr 1fr; }
  .alt__izgara { grid-template-columns: 1fr 1fr; }
  .bolge-kart { grid-template-columns: 1fr 1fr; }
  .liste--iki { grid-template-columns: 1fr 1fr; }
  .liste--isaret { grid-template-columns: 1fr 1fr; }
  .alt-hizmet { grid-template-columns: 1fr 1fr; gap: var(--b4); }
  .vitrin-izgara { grid-template-columns: 1fr 1fr; }
  .hizmet-vitrin__izgara { grid-template-columns: 1fr 1fr; }
  .guven-serit__izgara { grid-template-columns: 1fr 1fr; }
  .ust__ic { justify-content: space-between; }
  .ust__adres { display: flex; }
  .ust__iletisim { font-size: 0.9rem; gap: var(--b3); }
}

@media (min-width: 56rem) {
  body { padding-bottom: 0; }
  .sabit { display: none; }
  .wa-yuzen { right: 1.5rem; bottom: 1.5rem; padding: 0.65rem 1.35rem 0.65rem 0.75rem; }
  .cerez { bottom: var(--b4); }
  .hero { padding-block: var(--b7) var(--b8); }
  .hero__ic { grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: var(--b7); }
  .iki { grid-template-columns: 1fr 1fr; gap: var(--b7); align-items: start; }
  .cagri__ic { grid-template-columns: 1fr auto; }
  .duzen { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--b6); }
  .duzen__yan { position: sticky; top: 5.5rem; }
  .sayfa-bas__ic { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .sayfa-bas__ikon { display: block; opacity: 0.9; }
  .adim:not(.adim--dikey) { grid-template-columns: repeat(3, 1fr); }
  .one { grid-template-columns: repeat(4, 1fr); }
  .yazi-izgara { grid-template-columns: repeat(3, 1fr); }
  .vitrin-izgara { grid-template-columns: repeat(3, 1fr); }
  .guven-serit__izgara { grid-template-columns: repeat(4, 1fr); }
  .alt__izgara { grid-template-columns: 1.3fr 1.2fr 1fr 1fr; }
  .alt__son { grid-template-columns: 1fr auto auto; }
  /* kolektör yatay: ana hat üstte, kollar aşağı iner */
  .kolektor { grid-template-columns: repeat(3, 1fr); border-left: 0; border-top: 6px solid var(--mavi); column-gap: var(--b4); row-gap: var(--b4); }
  .kolektor::before { left: 0; right: 0; top: 2px; bottom: auto; width: auto; height: 6px; border-radius: 0 0 3px 3px; }
  .kolektor__kol { padding-left: 0; padding-top: 2.1rem; }
  .kolektor__kol::before { left: 1.6rem; top: 8px; width: 4px; height: 1.4rem; }
  .kolektor__kol::after { left: calc(1.6rem - 5px); top: 1.45rem; }
}

@media (min-width: 72rem) {
  .logo__gorsel { height: 4.5rem; max-width: 13.5rem; }
  .menu-dugme { display: none; }
  .menu { display: block; flex-basis: auto; padding: 0; }
  .menu__liste { display: flex; align-items: center; gap: var(--b1); }
  .menu__liste > li { border: 0; }
  .menu a { min-height: 2.75rem; padding: 0 0.65rem; font-size: 0.9375rem; border-radius: var(--kose-kucuk); white-space: nowrap; }
  .menu a:hover { background: var(--buz); color: var(--lacivert); }
  .menu a[aria-current] { box-shadow: inset 0 -3px var(--sicak); }
  .menu__alt > a { margin-right: 0; padding-right: 1.5rem; }
  .menu__ac { width: 1.5rem; height: 2.75rem; right: 0; }
  .menu__ac::before { width: 0.4rem; height: 0.4rem; }
  .menu .menu__acilir { position: absolute; left: 0; top: 100%; min-width: 15rem; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: var(--b2); box-shadow: 0 14px 34px rgba(14, 42, 71, 0.16); z-index: 45; }
  .menu .menu__acilir a { color: var(--murekkep); }
  .menu .menu__acilir a:hover { background: var(--buz); color: var(--lacivert); }
  .menu__acilir--genis { columns: 2; min-width: 32rem; }
  .menu__acilir li { break-inside: avoid; }
  .menu .menu__alt:hover > .menu__acilir, .menu .menu__alt:focus-within > .menu__acilir { display: block; }
  .kolektor { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media print {
  .ust, .bas, .sabit, .cagri, .form, .duzen__yan, .cerez { display: none; }
  body { padding: 0; background: #fff; }
}