@charset "UTF-8";
/* ==========================================================================
   VEKTÖR BİLİŞİM — 2026 Tasarım Sistemi  ("Mühendislik Arşivi" yönü)
   --------------------------------------------------------------------------
   Bu dosya YALNIZCA yeni tasarıma geçmiş sayfalarda yüklenir.
   Eski sayfalar Assets/css/main.css kullanmaya devam eder — ikisi çakışmasın
   diye bu dosyadaki her şey .vk kökü altında tanımlıdır.

   Sayfa taşındıkça: includes/header-2026.php + includes/footer-2026.php
   çiftini kullanın, bu dosya otomatik yüklenir.
   ========================================================================== */

/* ---------- 1. Jetonlar ---------------------------------------------- */
/* Kaynak: tasarim/temel-tahtasi.html (Ekim 2026 kararı) ve DESIGN.md.
   Kural: bu dosyada renk YALNIZCA buradaki jetonlarla yazılır. Yeni bir
   renk gerekiyorsa önce buraya eklenir. Saf beyaz (#fff) ve saydamlık
   katmanları (rgba beyaz/siyah) istisna. */
.vk {
  /* marka — logodan piksel ölçümüyle (android-chrome-512.png) */
  --kirmizi:      #E30A17;     /* asıl eylem, hero vurgusu, seçili durum */
  --kirmizi-koyu: #B00712;     /* üzerine gelme; açık zeminde küçük kırmızı metin */

  /* koyu yüzeyler — yalnız header, hero ve footer */
  --ink-950: #06080F;          /* footer ve sayfa altı */
  --ink-900: #0A0D18;          /* hero */
  --ink-800: #10141F;          /* header, mega menü */
  --ink-700: #171C2C;          /* koyu alandaki kutu */
  --ink-600: #212741;          /* koyu alanda seçili / üzerine gelinmiş */
  --hair-d:  rgba(255, 255, 255, .10);
  --hair-d2: rgba(255, 255, 255, .20);

  /* açık yüzeyler — gövde TEK zemin: beyaz. Bölüm zemini değişmez;
     --zemin-2 yalnız bölümün içindeki bir öğede (panel, form, tablo). */
  --zemin:   #FFFFFF;
  --zemin-2: #F3F5F8;
  --cizgi:   #E1E5EB;          /* bölüm ayıracı, liste satırı, kart kenarı */
  --cizgi-2: #C6CCD6;          /* form alanı, ikincil düğme kenarı */
  --cizgi-3: #A7AFBD;          /* cetvel çentiği, ölçü işareti (metin değil) */

  /* metin */
  --tx:       #12151F;
  --tx-mut:   #5C6273;
  --tx-d:     #EDEEF2;
  --tx-d-mut: #99A0B6;

  /* işlev — yalnız gerçek durumlar (form sonucu vb.) */
  --basari: #1D7A46;
  --basari-d: #3FB37A;         /* koyu zeminde başarı işareti (metin değil) */
  --hata:   #B42318;

  /* Göksima Yazılım'ın imzası. YALNIZ "Göksima" adının yanında;
     Vektör'ün kendi düğmesi, rozeti, bağlantısı bu rengi kullanmaz. */
  --goksima: #00A6C8;

  /* Eski adlar — mevcut kural tabanı bozulmasın diye yeni değerlere
     bağlandı. Yeni koda yazmayın; bölümler yeniden yapıldıkça silinecek. */
  --red:      var(--kirmizi);
  --red-deep: var(--kirmizi-koyu);
  --white:    var(--zemin);
  --paper:    var(--zemin-2);
  --paper-2:  var(--zemin-2);
  --kagit-2:  var(--zemin-2);
  --hair:     var(--cizgi);
  --cetvel:   var(--cizgi-3);
  --gok:      var(--goksima);

  /* ölçü — kap hero ile aynı, böylece bütün bölümler aynı hizada başlıyor */
  --wrap: 1440px;
  --gut: clamp(22px, 4vw, 76px);
  --hdr-h: 76px;

  /* tipografi */
  /* Display: Source Serif 4 — yalnız büyük başlıklarda, gövdede ve küçük
     etikette asla. Optik boyut ekseni sayesinde büyüdükçe kontrast artıyor.
     Gövde: Public Sans — kamu sitelerinin standardı için çizilmiş, nötr ve
     çok okunaklı; serif başlığın karakterini öne bırakıyor (IBM Plex'in
     yerine, Ekim 2026). Mono: Red Hat Mono — YALNIZ veri: model kodu,
     telefon, saat, ölçü. Süs etiketi olarak kullanılmaz. */
  --f-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* tip ölçeği — yeniden yapılan bölümler YALNIZ bunları kullanır.
     Eski bölümlerdeki tek seferlik clamp() değerleri, bölüm yenilendikçe
     bu basamaklara iner. */
  --fs-display: clamp(30px, 2.75vw, 52px);   /* hero başlığı (serif) */
  --fs-h2:      clamp(26px, 2.35vw, 40px);   /* bölüm başlığı (serif) */
  --fs-h3:      clamp(22px, 1.8vw, 30px);    /* bölüm içi grup başlığı (serif) */
  --fs-h4:      clamp(18px, 1.3vw, 21px);    /* öğe adı (sans 600) */
  --fs-lede:    18px;                         /* bölüm girişi */
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-data:    13px;                         /* mono: kod, telefon, saat */

  /* hareket */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* ---------- 2. Temel ------------------------------------------------- */
.vk *,
.vk *::before,
.vk *::after { box-sizing: border-box; }

/* Taban tipografi .vk üzerinde, gövdeye ait olanlar body.vk'da.
   Sebep: iç sayfaların gövdesi hâlâ main.css'e ait, yeni tasarım oraya
   ADA olarak giriyor (<div class="vk">...). Yazı tipi ve rengi adanın
   içinde de geçerli olmalı; margin/zemin/taşma ise yalnızca gövdenin. */
.vk {
  color: var(--tx);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.vk {
  margin: 0;
  padding: 0;
  background: var(--ink-950);
  overflow-x: hidden;
}

.vk :where(a) { color: var(--red); text-decoration: none; }
.vk :where(a:hover) { color: var(--red-deep); }
.vk :where(h1, h2, h3, h4, h5, h6, p, figure, ul, ol) { margin: 0; padding: 0; }
.vk :where(ul, ol) { list-style: none; }
.vk img { max-width: 100%; height: auto; display: block; }
.vk button { font: inherit; }

.vk :focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Tarayıcının kendi yüzeyleri de tasarıma dahil — seçim, imleç, kaydırma
   çubuğu ve altı çizili bağlantılar varsayılan hâllerinde hiçbir tasarım
   sistemine ait değil. */
.vk ::selection { background: var(--red); color: #fff; }
.vk { accent-color: var(--red); caret-color: var(--red); }
.vk { scrollbar-color: var(--ink-600) var(--ink-900); scrollbar-width: thin; }
.vk ::-webkit-scrollbar { width: 12px; height: 12px; }
.vk ::-webkit-scrollbar-track { background: var(--ink-900); }
.vk ::-webkit-scrollbar-thumb { background: var(--ink-600); border: 3px solid var(--ink-900); border-radius: 6px; }
.vk ::-webkit-scrollbar-thumb:hover { background: var(--hair-d2); }
.vk :where(a) { text-underline-offset: .18em; text-decoration-thickness: 1px; }

.vk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: 12px 20px; font-weight: 600;
}
.vk-skip:focus { left: 0; color: #fff; }

/* Eski sayfalarda main.css'in genel eleman kuralları adanın içine sızıyor
   (en belirgini: section { margin-top: 120px }). Ada kendi ölçüsünü kendi
   padding'iyle kuruyor; dışarıdan gelen boşluk burada sıfırlanıyor.
   .sb'de ayrıca yazılı — orada ilk kez bu yüzden fark edilmişti. */
.vk > section,
.vk > footer { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---------- 3. Tipografi --------------------------------------------- */
.lab {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.03;
  letter-spacing: -.02em;
  color: #fff;
  margin-top: 24px;
  text-wrap: pretty;
}
.h1 em { font-style: italic; color: var(--red); }

.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 2.35vw, 40px);
  line-height: 1.12;
  letter-spacing: -.018em;
  margin-top: 16px;
  text-wrap: pretty;
}
.h3 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }

.lede    { font-size: 18px; line-height: 1.68; color: var(--tx-d-mut); margin-top: 26px; max-width: 560px; }
.lede-l  { font-size: 18px; line-height: 1.68; color: var(--tx-mut);   margin-top: 22px; max-width: 620px; }

.head { max-width: 720px; }

/* ---------- 5. Butonlar ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border-radius: 3px;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn svg { flex-shrink: 0; }

.btn.btn-red        { background: var(--red); color: #fff; border-color: var(--red); }
.btn.btn-red:hover  { background: var(--red-deep); border-color: var(--red-deep); color: #fff; transform: translateY(-1px); }
.btn.btn-ghost-d       { background: transparent; color: var(--tx-d); border-color: var(--hair-d2); }
.btn.btn-ghost-d:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.05); color: #fff; }
.btn.btn-ghost-l       { background: transparent; color: var(--tx); border-color: var(--cizgi-2); }
.btn.btn-ghost-l:hover { border-color: var(--tx); background: rgba(18,21,31,.03); color: var(--tx); }

.btn-sm { min-height: 46px; padding: 12px 20px; font-size: 14px; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600;
}
.arrow-link svg { transition: transform .2s ease; }
.arrow-link:hover svg { transform: translateX(3px); }

/* ---------- 6. Üst şerit --------------------------------------------- */
.util { background: var(--ink-900); border-bottom: 1px solid var(--hair-d); }
.util-in { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 20px; }
.util-l { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.util .lab { font-size: 10.5px; }
.util :where(a), .util span { color: var(--tx-d-mut); }
.util :where(a:hover) { color: #fff; }
.util-item { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- 7. Header ------------------------------------------------ */
.hdr {
  background: var(--ink-900);
  border-bottom: 1px solid var(--hair-d);
  position: sticky; top: 0; z-index: 60;
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--hdr-h); }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 10px 16px;
  background: none; border: 0; cursor: pointer; border-radius: 3px;
  color: var(--tx-d); font-size: 15px; font-weight: 500;
  transition: color .16s ease, background .16s ease;
}
.nav-btn:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-btn[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.07); }
.nav-btn .car { transition: transform .2s ease; }
.nav-btn[aria-expanded="true"] .car { transform: rotate(180deg); }


/* Portal girişi: masaüstünde header'da, mobilde çekmecede */
.nav-portal-mobil { display: none; }

/* mega menü */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink-800); border-bottom: 1px solid var(--hair-d);
  box-shadow: 0 32px 64px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .42s cubic-bezier(0.16, 1, 0.3, 1),
              transform .42s cubic-bezier(0.16, 1, 0.3, 1),
              visibility .42s cubic-bezier(0.16, 1, 0.3, 1);
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-in {
  display: grid; grid-template-columns: 1fr 1fr 1fr 300px; gap: 40px;
  padding: 40px var(--gut) 44px; max-width: var(--wrap); margin-inline: auto;
}
.mega-col h5 { margin-bottom: 16px; color: var(--tx-d-mut); }
.mega-list { display: flex; flex-direction: column; gap: 2px; }
.mega-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 3px;
  color: var(--tx-d); font-size: 15px;
  transition: background .14s ease, color .14s ease;
}
.mega-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.mega-link svg { color: var(--red); flex-shrink: 0; }
.mega-card { background: var(--ink-700); border: 1px solid var(--hair-d); border-radius: 4px; padding: 24px; }
.mega-card h4 { font-size: 17px; font-weight: 600; color: #fff; margin: 12px 0 8px; }
.mega-card p { font-size: 13.5px; line-height: 1.6; color: var(--tx-d-mut); margin-bottom: 18px; }

/* öne çıkan hizmet spotu / slider */
.mega-spotlight {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}
.mega-spot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 20px;
}
.mega-spot-etiket {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  transition: opacity .35s ease, color .35s ease;
}
.mega-spot-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.mega-spot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tx-d-mut);
  opacity: .3;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .5s cubic-bezier(0.25, 1, 0.5, 1);
}
.mega-spot-dot:hover {
  opacity: .7;
}
.mega-spot-dot.is-active {
  opacity: 1;
  background: var(--red);
  width: 18px;
  border-radius: 4px;
}
.mega-spot-slides {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: start;
  margin-top: 6px;
  flex: 1;
}
.mega-spot-slide {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .85s cubic-bezier(0.25, 1, 0.5, 1),
              transform .85s cubic-bezier(0.25, 1, 0.5, 1),
              visibility .85s ease;
}
.mega-spot-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.mega-spot-slide h4 {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 12px 0 8px;
  min-height: 24px;
}
.mega-spot-slide p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tx-d-mut);
  margin-bottom: 18px;
  min-height: 64px;
}

/* Ürünler mega menü slider thumbnail & detay stilleri */
.mega-urun-thumb-link {
  display: block;
  text-decoration: none;
}
.mega-urun-thumb {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hair-d);
  border-radius: 4px;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: border-color .2s ease, background .2s ease;
}
.mega-spot-slide:hover .mega-urun-thumb {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}
.mega-urun-thumb img {
  max-height: 75px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  transition: transform .25s ease;
}
.mega-spot-slide:hover .mega-urun-thumb img {
  transform: scale(1.04);
}
.mega-urun-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  min-height: 20px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-urun-desc {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: var(--tx-d-mut) !important;
  margin-bottom: 14px !important;
  min-height: 35px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* portal açılırı */
.mega-r {
  position: absolute; right: var(--gut); top: 100%; width: 400px; max-width: calc(100vw - 32px);
  background: var(--ink-800); border: 1px solid var(--hair-d2); border-top: 0;
  border-radius: 0 0 4px 4px; box-shadow: 0 32px 64px rgba(0,0,0,.5);
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .42s cubic-bezier(0.16, 1, 0.3, 1),
              transform .42s cubic-bezier(0.16, 1, 0.3, 1),
              visibility .42s cubic-bezier(0.16, 1, 0.3, 1);
}
.mega-r.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.mega-r h4 { font-family: var(--f-display); font-weight: 400; font-size: 24px; color: #fff; margin: 18px 0 0; line-height: 1.15; }

.field {
  min-height: 46px; border: 1px solid var(--hair-d2); border-radius: 3px;
  background: rgba(255,255,255,.03); display: flex; align-items: center;
  padding: 0 14px; color: var(--tx-d-mut); font-size: 14px; width: 100%;
}
.field::placeholder { color: var(--tx-d-mut); }
.field:focus { outline: none; border-color: var(--red); background: rgba(255,255,255,.06); color: #fff; }

.scrim {
  position: fixed; inset: 0; background: rgba(5,7,14,.58); z-index: 50;
  border: 0; padding: 0; margin: 0; cursor: default;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity .35s ease, visibility .35s ease;
}
.scrim.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* mobil menü tetiği */
.burger {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hair-d2); border-radius: 3px; color: var(--tx-d); cursor: pointer;
}
.burger:hover { border-color: rgba(255,255,255,.45); color: #fff; }

/* ==========================================================================
   8. İLK EKRAN — bina kesiti
   --------------------------------------------------------------------------
   Header + üst şerit + bu bölüm birlikte tam olarak bir ekran eder.
   --ust-h değerini vektor-2026.js gerçek yükseklikten hesaplayıp yazar;
   aşağıdaki 128px yalnızca JS çalışmadan önceki tahmindir.
   ========================================================================== */
.ilk {
  position: relative;
  min-height: calc(100dvh - var(--ust-h, 128px));
  display: flex; align-items: center;
  background: var(--ink-900);
  overflow: hidden;
  border-bottom: 6px solid var(--kirmizi-koyu);
}
.ilk::before {
  content: ''; position: absolute; top: -20%; right: -12%;
  width: min(1000px, 70vw); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(227, 10, 23,.15), transparent 62%);
}
.ilk-in {
  position: relative; width: 100%;
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 3.4vw, 64px); align-items: center;
  padding-block: clamp(16px, 2.4vh, 40px);
}

/* --- sol: söz --- */
/* Boyut, dönen ifadelerin TEK satıra sığmasına göre seçildi: iki satıra
   sardıklarında altlarında kalan boşluk kötü duruyordu. */
.ilk-h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(30px, 2.75vw, 52px);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: #fff;
}
/* Dönen sözcüğün kutusu: yüksekliği JS en uzun ifadeye göre ölçüp yazar
   (ifadeler sütun genişliğine göre bir ya da iki satıra sarıyor). Aşağıdaki
   min-height yalnızca JS çalışana kadar geçerli taban. */
.ilk-donen { position: relative; display: block; min-height: 1.02em; }
.ilk-donen span {
  position: absolute; left: 0; top: 0; width: 100%;
  color: var(--red); font-style: italic;
  opacity: 0; transform: translateY(.14em);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.ilk-donen span.on { opacity: 1; transform: none; }

.ilk-tez {
  font-size: clamp(16px, 1.35vw, 21px); line-height: 1.5; color: var(--tx-d);
  margin-top: clamp(16px, 2.2vh, 30px); max-width: 30ch;
}
.ilk-aciklama {
  font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.62; color: var(--tx-d-mut);
  margin-top: 14px; max-width: 46ch;
  min-height: 4.9em;              /* metin uzunluğu değişince zıplamasın */
  transition: opacity .34s ease;
}
.ilk-aciklama.degisiyor { opacity: 0; }
.ilk-aciklama b { color: var(--tx-d); font-weight: 600; }
.ilk-cta { display: flex; gap: 14px; margin-top: clamp(18px, 2.6vh, 34px); flex-wrap: wrap; }

/* --- hizmet şeridi: metin sütununun altında, iki sütunlu künye listesi --- */
.ilk-isaretler {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  margin-top: clamp(14px, 1.9vh, 24px);
}
.ilk-isaret {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  min-height: 26px; padding: 5px 0;
  background: none; border: 0; border-bottom: 1px solid var(--hair-d);
  color: var(--tx-d-mut); cursor: pointer;
  font-family: var(--f-mono); font-size: 9.8px;
  letter-spacing: .105em; text-transform: uppercase; line-height: 1.2;
  transition: color .2s ease, border-color .2s ease;
}
.ilk-isaret .im {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.24); transition: background .2s ease;
}
.ilk-isaret:hover { color: #fff; }
.ilk-isaret[aria-pressed="true"] { color: #fff; border-bottom-color: var(--red); }
.ilk-isaret[aria-pressed="true"] .im { background: var(--red); }

/* ══════════════════════════════════════════════════════════════════════
   Bina kesiti — tasarım aracından gelen paket (port/bolum8-bina.css)
   Çizim kendi renklerini SVG içinde taşır; buradaki kurallar yalnızca
   vurgu, sönme ve hizmete özel animasyonları yönetir.
   ══════════════════════════════════════════════════════════════════════ */
/* Çizim dikey formatta: genişliğe göre boyutlanırsa kutunun sağında ve
   solunda ölü alan kalıyor (letterbox) ve çizim olduğundan küçük görünüyor.
   Bu yüzden yüksekliğe göre boyutlanıyor, genişliği kendi oranından geliyor. */
.ilk-bina svg {
  display: block;
  height: min(1400px, calc(100dvh - var(--ust-h, 116px) - 5.2vh - 20px));
  width: auto; max-width: 100%;
  margin-inline: auto;
}

:is(.ilk-bina, .kat-cizim) .bina-kabuk,
:is(.ilk-bina, .kat-cizim) .bina-notr,
:is(.ilk-bina, .kat-cizim) .bina-grup { transition: opacity .85s ease; }

/* bir hizmet etkinken: kabuk yarı, mobilya sönük, diğer hizmetler sönük */
:is(.ilk-bina, .kat-cizim).secili .bina-kabuk { opacity: .62; }
:is(.ilk-bina, .kat-cizim).secili .bina-notr  { opacity: .28; }
:is(.ilk-bina, .kat-cizim).secili .bina-grup  { opacity: .22; }
:is(.ilk-bina, .kat-cizim).secili .bina-grup.aktif { opacity: 1; }

:is(.ilk-bina, .kat-cizim) .bina-hitler { fill: rgba(0,0,0,0); }
:is(.ilk-bina, .kat-cizim) .bina-hit { cursor: pointer; outline: none; }
:is(.ilk-bina, .kat-cizim) .bina-hit:focus-visible rect { fill: rgba(227, 10, 23,.12); }

/* — hizmete özel animasyonlar: yalnızca kendi grubu etkinken çalışır — */
:is(.ilk-bina, .kat-cizim) .an-duman,
:is(.ilk-bina, .kat-cizim) .hr-dalga,
:is(.ilk-bina, .kat-cizim) .ag-port,
:is(.ilk-bina, .kat-cizim) .ag-paket,
:is(.ilk-bina, .kat-cizim) .sv-led,
:is(.ilk-bina, .kat-cizim) .sb-sol,
:is(.ilk-bina, .kat-cizim) .sb-sag,
:is(.ilk-bina, .kat-cizim) .km-isin,
:is(.ilk-bina, .kat-cizim) .km-halka,
:is(.ilk-bina, .kat-cizim) .yzk-halka { opacity: 0; }
:is(.ilk-bina, .kat-cizim) .an-duman,
:is(.ilk-bina, .kat-cizim) .hr-dalga,
:is(.ilk-bina, .kat-cizim) .ag-port,
:is(.ilk-bina, .kat-cizim) .km-isin { transition: opacity .4s ease; }

/* yangın */
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .an-duman { opacity: 1; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .an-led { animation: vk-blink .9s steps(1, end) infinite; }
:is(.ilk-bina, .kat-cizim) .an-d1,
:is(.ilk-bina, .kat-cizim) .an-d2,
:is(.ilk-bina, .kat-cizim) .an-d3 { transform-box: fill-box; transform-origin: center; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .an-d1 { animation: vk-duman 2.9s ease-out infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .an-d2 { animation: vk-duman 3.2s ease-out .32s infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .an-d3 { animation: vk-duman 3.5s ease-out .64s infinite; }

/* hırsız alarm */
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .hr-dalga { opacity: 1; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .hr-siren { animation: vk-blink .7s steps(1, end) infinite; }
:is(.ilk-bina, .kat-cizim) .hr-w1,
:is(.ilk-bina, .kat-cizim) .hr-w2,
:is(.ilk-bina, .kat-cizim) .hr-w3 { transform-box: fill-box; transform-origin: 100% 50%; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .hr-w1 { animation: vk-dalga 2.1s ease-out infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .hr-w2 { animation: vk-dalga 2.1s ease-out .28s infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .hr-w3 { animation: vk-dalga 2.1s ease-out .56s infinite; }

/* network */
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .ag-port { animation: vk-port var(--sn) steps(1, end) var(--gc) infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .ag-paket { animation: vk-paket 1.9s linear .4s infinite; }

/* sunucu */
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .sv-led { animation: vk-veri 1.6s steps(1, end) var(--gc) infinite; }

/* siber güvenlik */
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .sb-sol { animation: vk-sol 2.6s linear infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .sb-sag { animation: vk-sag 2.6s linear infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .sb-kilit { animation: vk-kilit 2.6s ease-out infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .sb-fwled { animation: vk-blink 1.1s steps(1, end) infinite; }

/* kamera */
:is(.ilk-bina, .kat-cizim) .km-isin { transform-origin: 0 0; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .km-isin { opacity: .13; animation: vk-tara 3.6s ease-in-out infinite alternate; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .km-led { animation: vk-blink 1.5s steps(1, end) infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .km-iled { animation: vk-blink var(--sn) steps(1, end) var(--gc) infinite; }
:is(.ilk-bina, .kat-cizim) .km-halka { transform-box: fill-box; transform-origin: center; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .km-halka { animation: vk-halka 2.8s ease-out var(--gc) infinite; }

/* yapay zekâ */
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .yzk-satir { animation: vk-satir 2.2s ease-in-out var(--gc) infinite; }
:is(.ilk-bina, .kat-cizim) .yzk-halka { transform-box: fill-box; transform-origin: center; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .yzk-halka { animation: vk-halka 2.4s ease-out infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .yzk-led { animation: vk-blink 1.3s steps(1, end) infinite; }

/* yazılım */
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .yz-kod { animation: vk-yaz 3.4s ease-out var(--gc) infinite; }
:is(.ilk-bina, .kat-cizim) .bina-grup.aktif .yz-imlec { animation: vk-blink .85s steps(1, end) var(--gc) infinite; }

@keyframes vk-blink { 0%, 42% { opacity: 1; } 50%, 92% { opacity: .12; } }
@keyframes vk-duman {
  0%   { opacity: 0;   transform: translateY(6px)   scaleX(.7); }
  22%  { opacity: .7; }
  72%  { opacity: .34; transform: translateY(-16px) scaleX(1.2); }
  100% { opacity: 0;   transform: translateY(-18px) scaleX(1.6); }
}
@keyframes vk-dalga {
  0%   { opacity: 0;  transform: translateX(5px) scale(.72); }
  25%  { opacity: .7; }
  100% { opacity: 0;  transform: translateX(-8px) scale(1.14); }
}
@keyframes vk-port { 0%, 100% { opacity: .08; } 46%, 64% { opacity: .95; } }
@keyframes vk-paket {
  0%   { opacity: 0; transform: translateX(0); }
  14%  { opacity: .9; }
  86%  { opacity: .9; }
  100% { opacity: 0; transform: translateX(62px); }
}
@keyframes vk-veri { 0%, 100% { opacity: .07; } 8%, 24% { opacity: .9; } }
@keyframes vk-sol {
  0%   { opacity: 0;  transform: translateX(0); }
  8%   { opacity: .9; }
  34%  { opacity: .9; transform: translateX(36px); }
  40%, 100% { opacity: 0; transform: translateX(36px); }
}
@keyframes vk-sag {
  0%, 52% { opacity: 0;  transform: translateX(0); }
  58%  { opacity: .9; }
  86%  { opacity: .9; transform: translateX(36px); }
  92%, 100% { opacity: 0; transform: translateX(36px); }
}
@keyframes vk-kilit { 0%, 34% { opacity: .5; } 42%, 52% { opacity: 1; } 62%, 100% { opacity: .5; } }
@keyframes vk-tara { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
@keyframes vk-halka {
  0%   { opacity: .22; transform: scale(.5); }
  70%  { opacity: 0;   transform: scale(2.1); }
  100% { opacity: 0;   transform: scale(2.1); }
}
@keyframes vk-satir { 0%, 100% { opacity: .38; } 14%, 30% { opacity: 1; } }
@keyframes vk-yaz {
  0%   { stroke-dashoffset: 1; }
  20%  { stroke-dashoffset: 0; }
  88%  { stroke-dashoffset: 0; }
  93%, 100% { stroke-dashoffset: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.ilk-bina, .kat-cizim) .bina-kabuk,
  :is(.ilk-bina, .kat-cizim) .bina-notr,
  :is(.ilk-bina, .kat-cizim) .bina-grup { transition: none; }
  :is(.ilk-bina, .kat-cizim) .bina-grup.aktif [class*="an-"],
  :is(.ilk-bina, .kat-cizim) .bina-grup.aktif [class*="hr-"],
  :is(.ilk-bina, .kat-cizim) .bina-grup.aktif [class*="ag-"],
  :is(.ilk-bina, .kat-cizim) .bina-grup.aktif [class*="sv-"],
  :is(.ilk-bina, .kat-cizim) .bina-grup.aktif [class*="sb-"],
  :is(.ilk-bina, .kat-cizim) .bina-grup.aktif [class*="km-"],
  :is(.ilk-bina, .kat-cizim) .bina-grup.aktif [class*="yz"] { animation: none !important; }
  .ilk-bina .km-isin { display: none; }
}

/* Alçak ekranlarda hero yine tam bir ekran kalsın: başlık ve boşluklar
   yüksekliğe göre de kısılır. */
/* Masaüstünde iki düğme tek satırda kalmalı: hizmet adı değiştikçe butonun
   sarması hero'nun yüksekliğini oynatıyordu. */
@media (min-width: 1001px) {
  .ilk-cta { flex-wrap: nowrap; }
  .ilk-cta .btn { min-width: 0; }
  #ilk-hizmet-etiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 1001px) and (max-height: 860px) {
  /* Alçak ekranda hero yine bir ekranı doldurur (.ilk min-height ile), ama
     başlığın büyümesi gerekmiyor. Eski kural tersine çalışıyordu: ekran
     alçaldıkça yazı büyüyor, en dar yerde en iri tipografi çıkıyordu. */
  .ilk-h1 { font-size: clamp(30px, min(3.1vw, 5.6vh), 44px); }
  .ilk-aciklama { min-height: 3.4em; font-size: 14.5px; }
  .ilk-isaret { min-height: 24px; padding: 4px 0; }
  .ilk-in { padding-block: clamp(20px, 3vh, 48px); }
}

/* ---------- 9. Bölümler ---------------------------------------------- */
.sec { position: relative; }
.sec-d { background: var(--ink-900); color: var(--tx-d); }
.sec-l { background: var(--paper); }
.sec-w { background: var(--white); }
.sec-pad { padding: clamp(56px, 7vh, 86px) 0; }
.sec-pad-sm { padding: clamp(46px, 5.6vh, 70px) 0; }

/* Bölüm ızgarası — hero ile aynı sol/sağ oran. Başlık solda, içerik sağda;
   böylece sayfa boyunca tek bir dikey hiza çizgisi oluşuyor. */
.sec-grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
}
.sec-yan { position: sticky; top: calc(var(--hdr-h) + 28px); }
.sec-yan .h2 { margin-top: 12px; }
.sec-yan > p { margin-top: 16px; font-size: 16px; line-height: 1.62; }
.sec-d .sec-yan > p { color: var(--tx-d-mut); }
.sec-l .sec-yan > p, .sec-w .sec-yan > p { color: var(--tx-mut); }
.sec-yan .arrow-link { margin-top: 22px; }
.sec-in { position: relative; }

/* ---------- 10a. Ortak bölüm başı ve bant ---------------------------- */
/* Bölümler aynı dili konuşsun ama aynı kalıba girmesin (Ekim 2026):
   her bölüm aynı başla açılır — başlık solda, metin sağda, sütunlar
   Hizmetler'in sütunlarıyla aynı çizgide; başın altındaki içerik ise
   her bölümde kendi biçiminde (liste, vitrin, raf, duvar…).
   Zemin bölüm bölüm değil konu konu değişir: "neyle yapıyoruz"
   (Yazılım + Ürünler) tek gri bantta. İki bant bölümü arasında tam
   genişlik kenar yok; içerik genişliğinde ince bir çizgi var. */
.bas {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 18px clamp(32px, 4.4vw, 88px);
  align-items: start;
  margin-bottom: clamp(44px, 6vh, 72px);
}
.bas h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.018em;
  max-width: 15ch; text-wrap: balance;
}
/* metnin ilk satırı başlığın ilk satırıyla aynı hizada başlasın */
.bas-sag { padding-top: clamp(4px, .55vw, 10px); }
.bas-sag > p { max-width: 58ch; font-size: var(--fs-lede); line-height: 1.62; color: var(--tx-mut); }
.bas-sag > p b { color: var(--tx); font-weight: 600; }

section.bant { background: var(--zemin-2); }
section.bant + section.bant { border-top: 0; padding-top: 0; }
section.bant + section.bant > .wrap {
  border-top: 1px solid var(--cizgi-2);
  padding-top: clamp(64px, 9vh, 120px);
}

@media (max-width: 900px) {
  .bas { grid-template-columns: minmax(0, 1fr); }
  .bas-sag { padding-top: 0; }
}

/* ---------- 10b. Hizmetler: üç katman, tek sorumluluk hattı ---------- */
/* Eski kapsam hattı ve hizmet sahnesinin yerine (Ekim 2026). Solda yapışkan
   başlık ve katman dizini, sağda saha → altyapı → yazılım diye inen liste.
   Listenin solundaki kırmızı hat okundukça dolar (--dolum, JS 3b); JS yoksa
   ya da hareket azaltılmışsa baştan dolu. Kart yok: satırlar çizgiyle ayrılır. */
.kat-bl {
  background: var(--zemin); color: var(--tx);
  padding-block: clamp(72px, 10vh, 136px);
}
.kat-grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 4.4vw, 88px);
  align-items: start;
}

/* --- sol: başlık + dizin --- */
.kat-yan { position: sticky; top: calc(var(--hdr-h) + 32px); }
.kat-yan h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.018em;
  max-width: 18ch; text-wrap: balance;
}
.kat-yan > p {
  margin-top: 20px; max-width: 46ch;
  font-size: var(--fs-lede); line-height: 1.62; color: var(--tx-mut);
}
.kat-dizin { margin-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--cizgi); }
/* Dizin sağdaki hattın aynası: her satırın altındaki çubuk o katman
   okundukça dolar (--p, JS 3b). Geçişler yumuşak; yazı kalınlığı
   değişmiyor (eskiden 500→600 sıçrıyordu), yalnız renk ve işaret. */
.kat-dizin a {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  /* Tam piksel aralığı: dolum çizgileri kesirli satır yüksekliğiyle incelmesin. */
  min-height: 52px; padding: 13px 0 12px; line-height: 1.5;
  border-bottom: 1px solid var(--cizgi);
  color: var(--tx-mut); font-size: var(--fs-body); font-weight: 500;
  transition: color .45s var(--ease-out);
  --p: 0;
}
.kat-dizin a small { font-size: var(--fs-small); font-weight: 400; color: var(--tx-mut); }
.kat-dizin a:hover { color: var(--tx); }
.kat-dizin a[aria-current="true"] { color: var(--tx); }
/* işaret metin akışının dışında, sol boşlukta: belirip kaybolurken yazı kaymaz */
.kat-dizin a::before {
  content: ''; position: absolute; left: -17px; top: 50%;
  width: 7px; height: 7px; margin-top: -3px;
  background: var(--kirmizi);
  opacity: 0; transform: scale(.4);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.kat-dizin a[aria-current="true"]::before { opacity: 1; transform: none; }
.kat-dizin-dolum {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--kirmizi);
  transform: scaleX(var(--p)); transform-origin: left center;
  transition: transform .18s linear;
}

/* --- sağ: katman listesi + hat --- */
.kat-liste {
  position: relative;
  padding-left: clamp(32px, 3.2vw, 52px);
  --dolum: 1;
}
.kat-hat {
  position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px;
  background: var(--cizgi);
}
.kat-hat i {
  position: absolute; inset: 0; background: var(--kirmizi);
  transform: scaleY(var(--dolum)); transform-origin: top center;
}

.kat + .kat { margin-top: clamp(48px, 6.4vh, 80px); }
.kat-bas { position: relative; padding-bottom: 18px; }
/* Katmanın hat üzerindeki düğümü: hat oraya varınca kırmızı dolar. */
.kat-bas::before {
  content: ''; position: absolute; top: .55em;
  left: calc(-1 * clamp(32px, 3.2vw, 52px));
  width: 9px; height: 9px; background: var(--zemin);
  border: 1px solid var(--cizgi-3);
  transition: background .3s ease, border-color .3s ease;
}
.kat.is-on .kat-bas::before { background: var(--kirmizi); border-color: var(--kirmizi); }
.kat-bas h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.014em;
}
.kat-bas p { margin-top: 6px; font-size: var(--fs-body); color: var(--tx-mut); }

.kat-hiz { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tx); }
.hz {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr) auto;
  gap: 6px clamp(18px, 2.2vw, 36px);
  align-items: baseline;
  padding: 20px 0 21px;
  border-bottom: 1px solid var(--cizgi);
}
.hz-ad { font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.hz-ad a { color: var(--tx); display: inline-flex; align-items: center; gap: 8px; }
/* Satırın tamamı hizmet sayfasına götürür; "Ürünler" bağlantısı üstte kalır. */
.hz-ad a::after { content: ''; position: absolute; inset: 0; }
.hz-ad svg {
  color: var(--kirmizi); opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .25s var(--ease-out);
}
.hz:hover .hz-ad a, .hz-ad a:focus-visible { color: var(--kirmizi-koyu); }
.hz:hover .hz-ad svg, .hz-ad a:focus-visible svg { opacity: 1; transform: none; }
.hz-kapsam { font-size: var(--fs-body); line-height: 1.6; color: var(--tx); max-width: 58ch; }
.hz-kapsam b { font-weight: 600; }
.hz-marka { margin-top: 6px; font-size: var(--fs-small); color: var(--tx-mut); }
.hz-urun {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-size: var(--fs-small); font-weight: 600; color: var(--tx);
  text-decoration: underline; text-decoration-color: var(--cizgi-2);
  text-underline-offset: .3em;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.hz-urun:hover { color: var(--kirmizi-koyu); text-decoration-color: currentColor; }

/* --- hattın sonu: kurulum sonrası --- */
.kat-son {
  position: relative;
  margin-top: clamp(40px, 5.6vh, 64px);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 28px;
}
.kat-son::before {
  content: ''; position: absolute; top: .5em;
  left: calc(-1 * clamp(32px, 3.2vw, 52px));
  width: 9px; height: 9px; background: var(--zemin);
  border: 1px solid var(--cizgi-3);
  transition: background .3s ease, border-color .3s ease;
}
.kat-son.is-on::before { background: var(--kirmizi); border-color: var(--kirmizi); }
.kat-son p { max-width: 52ch; font-size: var(--fs-body); color: var(--tx-mut); }
.kat-son strong { color: var(--tx); font-weight: 600; }

@media (max-width: 1100px) {
  .hz { grid-template-columns: minmax(0, 10em) minmax(0, 1fr); }
  .hz-urun { grid-column: 2; justify-self: start; min-height: 40px; }
}
@media (max-width: 900px) {
  .kat-grid { grid-template-columns: minmax(0, 1fr); }
  .kat-yan { position: static; }
  .kat-dizin { display: none; }
}
@media (max-width: 620px) {
  .kat-liste { padding-left: 26px; }
  .kat-bas::before, .kat-son::before { left: -26px; }
  .hz { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0 16px; }
  .hz-urun { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kat-hat i { transform: none; }
  .hz-ad svg, .kat-bas::before, .kat-son::before,
  .kat-dizin a, .kat-dizin a::before, .kat-dizin-dolum { transition: none; }
}

/* ---------- 10d. Referanslar: Türkiye haritası ---------------------- */
/* Ekim 2026, ikinci hâl. Solda şehir listesi (Hizmetler dizininin
   akrabası: aynı satır, aynı kırmızı işaret), sağda hero'daki teknik
   çizimin dilinde ince çizgili harita: sınır, ızgara, Kayseri'den
   şehirlere kavisli hatlar. Altında seçili şehrin kurumları.
   Yapışkan düzen yok. */
.rf-bl {
  background: var(--zemin); color: var(--tx);
  border-top: 1px solid var(--cizgi);
  padding-block: clamp(72px, 10vh, 136px);
  scroll-margin-top: 110px;
}
.rf-harita-blok {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 24px clamp(32px, 4.4vw, 88px);
  align-items: center;
}

/* --- solda dikey liste; şehir grupları yatay sayfalanır --- */
.rf-sehir-pencere { position: relative; overflow: hidden; margin-inline: -18px; padding-inline: 18px; }
.rf-sehirler {
  min-width: 0;
}
.rf-sehirler.is-sayfali { display: flex; transition: transform 200ms var(--ease-out); }
.rf-sehir-sayfa { flex: 0 0 100%; min-width: 0; padding-inline: 18px; }
.rf-sehirler.is-sayfali { margin-inline: -18px; }
.rf-yogun .rf-sehirler.is-sayfali { min-height: 336px; }
.rf-sehirler button {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 56px; padding: 12px 0;
  background: none; border: 0; border-bottom: 1px solid var(--cizgi);
  font-family: var(--f-sans); font-size: var(--fs-body); font-weight: 500;
  color: var(--tx-mut); text-align: left; cursor: pointer;
  transition: color .2s var(--ease-out);
}
.rf-sehir-sayfa button:first-child, .rf-sehirler > button:first-child { border-top: 1px solid var(--cizgi); }
.rf-sehirler button::before { content: ''; position: absolute; left: -16px; top: 50%; width: 7px; height: 7px; margin-top: -3px; background: var(--kirmizi); opacity: 0; }
.rf-sehirler button small { flex-shrink: 0; font-size: var(--fs-small); font-weight: 400; color: var(--tx-mut); }
.rf-sehirler button:hover { color: var(--tx); }
.rf-sehirler button[aria-pressed="true"] { color: var(--tx); }
.rf-sehirler button[aria-pressed="true"]::before { opacity: 1; }
.rf-sehirler button:focus-visible { outline: 2px solid var(--kirmizi-koyu); outline-offset: -2px; }

/* Arama yalnız şehirler çoğaldığında açılır; sayfalama listenin altında. */
.rf-sehir-secici { min-width: 0; }
.rf-sehir-ust { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.rf-sehir-bilgi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; font-size: var(--fs-small); font-weight: 600; }
.rf-sehir-arama { position: relative; width: 100%; }
.rf-sehir-arama label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rf-sehir-arama input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--cizgi-2); border-radius: 3px;
  background: var(--zemin); color: var(--tx); font: inherit; font-size: var(--fs-body);
}
.rf-sehir-arama input::placeholder { color: var(--tx-mut); }
.rf-sehir-arama input:focus { border-color: var(--kirmizi-koyu); outline: 2px solid var(--kirmizi-koyu); outline-offset: 2px; }
.rf-sehir-sonuc { margin: 0; font-size: var(--fs-small); font-weight: 400; color: var(--tx-mut); }
.rf-sayfalama { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.rf-sayfa-noktalari { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.rf-sayfa-noktalari button { display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.rf-sayfa-noktalari button::before { content: ''; width: 7px; height: 7px; border-radius: 8px; background: var(--cizgi-3); }
.rf-sayfa-noktalari button[aria-current="page"]::before { width: 22px; background: var(--kirmizi); }
.rf-sayfa-noktalari button:focus-visible, .rf-yon:focus-visible { outline: 2px solid var(--kirmizi-koyu); outline-offset: 2px; }
.rf-yon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
  width: 44px; height: 44px; border: 1px solid var(--cizgi-2); border-radius: 3px;
  background: var(--zemin); color: var(--tx); cursor: pointer;
}
.rf-yon:hover:not(:disabled) { border-color: var(--kirmizi-koyu); color: var(--kirmizi-koyu); }
.rf-yon:disabled { opacity: .35; cursor: default; }
.rf-onceki svg { transform: rotate(180deg); }
.rf-sehirler button[hidden], .rf-sehir-arama[hidden], .rf-sehir-bos[hidden], .rf-sayfalama[hidden] { display: none; }
.rf-sehir-bos { position: absolute; inset: 16px 18px auto; margin: 0; color: var(--tx-mut); font-size: var(--fs-small); }

/* --- harita --- */
.rf-harita { min-width: 0; margin: 0; }
.rf-harita svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-sinir { fill: none; stroke: var(--tx-mut); stroke-width: 1.2; stroke-linejoin: round; }
.rf-hat {
  fill: none; stroke: var(--cizgi-3); stroke-width: 1.2;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  transition: stroke .3s ease, stroke-width .3s ease;
}
.rf-hat.is-secili { stroke: var(--kirmizi); stroke-width: 1.8; }
/* Sinyal: hat boyunca Kayseri'den şehre akan kısa ışık (hero'daki sinyal
   tekniği: pathLength=100 + dashoffset). Seçili şehrin sinyali kırmızı ve hızlı. */
.rf-sinyal {
  fill: none; stroke: var(--kirmizi); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 5 95; stroke-dashoffset: 105; opacity: 0;
  pointer-events: none;
}
/* Açılış sırası: hatlar Kayseri'den çizilir, ardından noktalar sırayla belirir,
   sonra sinyaller akmaya başlar. Hareket azaltılmışsa hepsi baştan yerinde. */
@media (prefers-reduced-motion: no-preference) {
  .rf-harita-blok:not(.is-in) .rf-hat { stroke-dashoffset: 100; }
  .rf-harita-blok.is-in .rf-hat {
    transition: stroke-dashoffset 1.1s var(--ease-out) calc(.15s + var(--i, 0) * .09s), stroke .3s ease, stroke-width .3s ease;
  }
  .rf-harita-blok:not(.is-in) .rf-nokta:not(.rf-merkez) { opacity: 0; transform-origin: center; }
  .rf-nokta { transition: opacity .5s var(--ease-out) calc(.7s + var(--i, 0) * .09s); }
  .rf-harita-blok.is-in .rf-sinyal {
    opacity: .55;
    animation: rf-sinyal 3.6s linear infinite;
    animation-delay: calc(1.6s + var(--i, 0) * .45s);
  }
  .rf-harita-blok.is-in .rf-sinyal.is-secili { opacity: 1; stroke-width: 3; animation-duration: 1.6s; }
}
@keyframes rf-sinyal { from { stroke-dashoffset: 105; } to { stroke-dashoffset: 0; } }

.rf-nokta { cursor: pointer; }
.rf-nokta-ic { fill: var(--tx); stroke: var(--zemin); stroke-width: 2; transition: fill .3s ease; }
.rf-vurgu { fill: none; stroke: var(--kirmizi); stroke-width: 1.5; opacity: 0; transition: opacity .3s ease; }
.rf-nokta text {
  font-family: var(--f-sans); font-size: 18px; font-weight: 600; fill: var(--tx);
  paint-order: stroke; stroke: var(--zemin); stroke-width: 5px; stroke-linejoin: round;
}
.rf-nokta .rf-sayi { font-family: var(--f-mono); font-weight: 400; fill: var(--tx-mut); }
.rf-nokta:hover .rf-nokta-ic, .rf-nokta.is-secili .rf-nokta-ic { fill: var(--kirmizi); }
.rf-nokta.is-secili .rf-vurgu { opacity: 1; }
.rf-nokta:focus-visible { outline: none; }
.rf-nokta:focus-visible .rf-vurgu { opacity: 1; stroke-width: 3; }
/* Kalabalık haritada şehir adları ve ışıklar üst üste binmez. */
.rf-yogun .rf-nokta text { opacity: 0; pointer-events: none; }
.rf-yogun .rf-nokta.is-secili text {
  opacity: 1; paint-order: stroke; stroke: var(--zemin); stroke-width: 5px; stroke-linejoin: round;
}
.rf-yogun .rf-nokta { transition-delay: 0s; }
.rf-yogun .rf-hat:not(.is-secili) { opacity: 0; }
.rf-harita-blok.rf-yogun.is-in .rf-sinyal:not(.is-secili) { opacity: 0; animation: none; }
.rf-merkez .rf-nokta-ic { fill: var(--kirmizi); }
.rf-halka { fill: none; stroke: var(--kirmizi); stroke-width: 1; opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .rf-halka { transform-origin: center; transform-box: fill-box; animation: rf-nabiz 3.2s var(--ease-out) infinite; }
}
@keyframes rf-nabiz { 0% { transform: scale(.5); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
/* seçili şehrin halkası hafifçe nefes alır */
@media (prefers-reduced-motion: no-preference) {
  .rf-nokta.is-secili:not(.rf-merkez) .rf-vurgu { transform-box: fill-box; transform-origin: center; animation: rf-nefes 2.4s ease-in-out infinite; }
}
@keyframes rf-nefes { 50% { transform: scale(1.25); opacity: .45; } }

/* --- seçili şehrin kurumları --- */
.rf-paneller { margin-top: clamp(32px, 4.4vh, 52px); }
.rf-panel h3 {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--tx);
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.014em;
}
.rf-panel h3 span { font-family: var(--f-sans); font-size: var(--fs-small); color: var(--tx-mut); letter-spacing: 0; }
.rf-panel ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.rf-panel li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 16px 16px 16px 0; border-bottom: 1px solid var(--cizgi);
}
.rf-panel .rf-logo { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; }
.rf-panel .rf-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.rf-panel .rf-ad { align-self: end; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; }
.rf-panel .rf-tur { align-self: start; margin-top: 2px; font-size: 13px; color: var(--tx-mut); }
@media (prefers-reduced-motion: no-preference) {
  .rf-panel:not([hidden]) { animation: rf-panel-gir .4s var(--ease-out); }
}
@keyframes rf-panel-gir { from { opacity: 0; transform: translateY(6px); } }
.rf-panel .rf-daha { padding: 0; }
.rf-daha a {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  height: 100%; min-height: 88px; padding: 16px 16px 16px 0; color: var(--tx);
}
.rf-daha b { font-size: var(--fs-small); font-weight: 600; }
.rf-daha span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tx-mut); transition: color .18s ease; }
.rf-daha span svg { color: var(--kirmizi); transition: transform .2s var(--ease-out); }
.rf-daha a:hover span { color: var(--kirmizi-koyu); }
.rf-daha a:hover span svg { transform: translateX(3px); }
.rf-panel li { grid-column: auto; }
.rf-panel .rf-daha { display: block; }
.rf-tum { margin-top: 24px; color: var(--tx); }
.rf-tum:hover { color: var(--kirmizi-koyu); }

@media (max-width: 900px) {
  .rf-harita-blok { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rf-harita { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-hat, .rf-nokta-ic, .rf-vurgu, .rf-sehirler button, .rf-sehirler button::before, .rf-sehirler.is-sayfali { transition: none; }
  .rf-sinyal { display: none; }
}

/* ---------- 10e. Yazılım: Göksima (dipnot) --------------------------- */
/* Ekim 2026, dördüncü hâl: bir dipnot. Tek satır — solda başlık ve logo
   (Hizmetler sütun çizgisinde), ortada iki cümle ve bağlantılar, sağda
   küçük Pusula ekranı. Ayrıntı Göksima'nın kendi sayfalarında. Gri
   bandın ikinci konusu, Ürünler'in altında. Yapışkan düzen yok. */
.gk-bl {
  color: var(--tx);
  border-top: 1px solid var(--cizgi);
  padding-block: clamp(52px, 7vh, 84px);
}
/* bantta Ürünler'in arkasından gelince üst boşluk dipnot ölçüsünde kalsın */
section.bant + section.gk-bl > .wrap { padding-top: clamp(44px, 6vh, 72px); }
.gk-not {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) minmax(0, .28fr);
  gap: 24px clamp(28px, 3.6vw, 64px);
  align-items: center;
}
.gk-not-bas h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.014em;
}
.gk-imza { display: inline-block; margin-top: 14px; }
.gk-imza img { width: auto; height: 30px; }
.gk-not-govde p { max-width: 58ch; font-size: var(--fs-body); line-height: 1.62; color: var(--tx-mut); }
.gk-not-govde p b { color: var(--tx); font-weight: 600; }
.gk-baglar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 14px; }
.gk-baglar .arrow-link { color: var(--tx); font-size: var(--fs-small); }
.gk-baglar .arrow-link:hover { color: var(--kirmizi-koyu); }
.gk-giris {
  font-size: var(--fs-small); font-weight: 500; color: var(--tx-mut);
  text-decoration: underline; text-decoration-color: var(--cizgi-2); text-underline-offset: .3em;
}
.gk-giris:hover { color: var(--kirmizi-koyu); text-decoration-color: currentColor; }
.gk-kucuk {
  display: block; justify-self: end; width: 100%; max-width: 220px;
  border: 1px solid var(--cizgi-2); border-radius: 4px; overflow: hidden;
  box-shadow: 0 16px 30px -22px rgba(10, 13, 24, .45);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.gk-kucuk img { display: block; width: 100%; height: auto; }
.gk-kucuk:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -22px rgba(10, 13, 24, .55); }

@media (max-width: 900px) {
  .gk-not { grid-template-columns: minmax(0, 1fr) 160px; }
  .gk-not-bas { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .gk-not { grid-template-columns: minmax(0, 1fr); }
  .gk-kucuk { justify-self: start; max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .gk-kucuk { transition: none; }
}

/* ---------- 10e1. Ürünler köprüsü ----------------------------------- */
/* Ekim 2026. Ürün kataloğuna (ayrı site) kapı: üstte başlık ve arama,
   altında kataloğun ana kategorileri. Arama düz form, kataloğun arama
   sayfasına gider. Raf görüntü önde: ürün fotoğrafları beyaz levhaya
   multiply ile oturuyor (beyaz zeminli çekimlerin kutusu kayboluyor).
   Referanslardaki saç telli duvardan bilerek farklı: çizgi yok, levha var.
   Yapışkan düzen yok. */
.ur-bl {
  background: var(--zemin); color: var(--tx);
  border-top: 1px solid var(--cizgi);
  padding-block: clamp(72px, 10vh, 136px);
}

/* --- arama --- */
/* Öneri paneli (katalog/assets/oneri.css) başın içinde açılıyor; raf onu örtmesin. */
.ur-bl .bas { position: relative; z-index: 2; }
.ur-ara { margin-top: 26px; max-width: 620px; }
.ur-ara label { display: block; margin-bottom: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--tx); }
.ur-ara-alan { position: relative; display: flex; }
.ur-ara-ik {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--tx-mut); pointer-events: none;
}
.ur-ara input {
  flex: 1 1 auto; min-width: 0; height: 58px;
  padding: 0 18px 0 52px;
  background: var(--zemin); color: var(--tx);
  border: 1px solid var(--cizgi-2); border-right: 0; border-radius: 3px 0 0 3px;
  font-family: var(--f-sans); font-size: var(--fs-body); letter-spacing: 0;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ur-ara input::placeholder { color: var(--tx-mut); }
.ur-ara input:hover { border-color: var(--tx-mut); }
.ur-ara input:focus { outline: none; border-color: var(--tx); box-shadow: 0 0 0 3px rgba(227, 10, 23, .14); }
.ur-ara input::-webkit-search-cancel-button { cursor: pointer; }
.ur-ara button {
  flex: 0 0 auto; height: 58px; padding: 0 26px;
  background: var(--kirmizi); color: #fff; border: 0; border-radius: 0 3px 3px 0;
  font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background .18s ease;
}
.ur-ara button:hover { background: var(--kirmizi-koyu); }

/* --- raf --- */
.ur-raf {
  list-style: none; margin: clamp(40px, 5.6vh, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.4vh, 40px) clamp(16px, 1.8vw, 28px);
}
.ur-kat { display: flex; flex-direction: column; height: 100%; color: var(--tx); }
.ur-gor {
  display: grid; place-items: center; color: var(--cizgi-3);
  aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden;
  background: var(--zemin);           /* bant gri; levhalar beyaz */
}
.ur-gor img {
  max-width: 68%; max-height: 72%; width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .45s var(--ease-out);
}
.ur-kat:hover .ur-gor img { transform: scale(1.05); }
.ur-ad {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; letter-spacing: -.01em;
  transition: color .18s ease;
}
.ur-kat:hover .ur-ad { color: var(--kirmizi-koyu); }
.ur-bilgi { margin-top: 4px; font-size: var(--fs-small); color: var(--tx-mut); }

/* "Tüm ürünler": görselsiz, çerçeveli levha; sayı büyük. */
.ur-tum .ur-tum-sayi {
  display: flex; align-items: flex-end;
  aspect-ratio: 4 / 3; padding: 20px 22px;
  background: var(--zemin); border: 1px solid var(--cizgi-2); border-radius: 4px;
  font-family: var(--f-display); font-size: clamp(48px, 5vw, 76px); line-height: 1; letter-spacing: -.02em;
  transition: border-color .18s ease;
}
.ur-tum:hover .ur-tum-sayi { border-color: var(--tx); }
.ur-tum .ur-ad svg { color: var(--kirmizi); transition: transform .2s var(--ease-out); }
.ur-tum:hover .ur-ad svg { transform: translateX(3px); }

@media (max-width: 1100px) {
  .ur-raf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
}
@media (max-width: 620px) {
  .ur-raf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ur-ara button { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ur-gor img, .ur-ara input { transition: none; }
  .ur-kat:hover .ur-gor img { transform: none; }
}

/* ---------- 10e3. Çözüm ortakları ----------------------------------- */
/* Ekim 2026: tek satırlık şerit. Logolar eşit ölçülü görünmez kutularda
   (kenarlık, zemin yok) — farklı oranlı logolar aynı optik boyda dursun.
   Soluk ve gri; imleç gelince şerit durur (JS 3f), üzerindeki logo
   renklenir. Kenarlarda maske ile soluklaşır. Referanslar'ın arkasında,
   aynı beyaz zeminde; arada ince çizgi. */
.mk-bl { background: var(--zemin); color: var(--tx); padding-bottom: clamp(72px, 10vh, 136px); }
.mk-bl > .wrap { border-top: 1px solid var(--cizgi); padding-top: clamp(64px, 9vh, 112px); }
.mk-bl .bas { margin-bottom: clamp(28px, 4vh, 44px); }

.mk-serit {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.mk-iz {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(16px, 2vw, 32px);
  width: max-content;
  will-change: transform;
}
/* görünmez kutu: sabit ölçü, iç boşluk; logo içine sığar */
.mk-iz li {
  flex: none; display: grid; place-items: center;
  width: 200px; height: 96px; padding: 18px 24px;
}
.mk-iz img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1); opacity: .5;
  transition: filter .3s ease, opacity .3s ease, transform .3s var(--ease-out);
}
.mk-iz li:hover img { filter: none; opacity: 1; transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .mk-serit { -webkit-mask-image: none; mask-image: none; }
  .mk-iz { flex-wrap: wrap; justify-content: center; width: auto; }
  .mk-iz li[aria-hidden="true"] { display: none; }
  .mk-iz img { transition: none; }
}
@media (max-width: 620px) {
  .mk-iz li { width: 150px; height: 76px; padding: 14px 18px; }
}

/* ---------- 10f. Sayfa başı (iç sayfa hero) --------------------------- */
/* Eski .page-heading yerine geçer: 215px dolgulu, tam kanama fotoğraf,
   üstüne %70 koyu perde, ortalanmış 56px başlık. Her sayfada aynıydı ve
   fotoğrafı okunmaz hâle getiriyordu — perdenin altında ne olduğu
   seçilmiyordu bile.

   Buradaki hâli anasayfa hero'sunun küçültülmüş kardeşi: aynı koyu zemin
   (üstteki header'la tek blok olur, dikiş görünmez), aynı 6px kırmızı
   bitiş çizgisi, aynı sol-metin/sağ-görsel yerleşimi. Fotoğraf perdenin
   altında değil kendi çerçevesinde duruyor, yani gerçekten görülüyor.
   Ölçü satırı isteğe bağlı ve kapsama bölümündeki cetvelin aynı aygıtı. */
.sb {
  position: relative;
  /* Eski sayfalarda main.css genel bir section kuralıyla 120px üst boşluk
     veriyor; ada kendi ölçüsünü kendisi kuruyor. */
  margin: 0;
  background: var(--ink-900);
  color: var(--tx-d);
  border-bottom: 6px solid var(--kirmizi-koyu);
  overflow: hidden;
}
/* Anasayfa hero'sundaki kırmızı halenin zayıf hâli — süreklilik için. */
.sb::before {
  content: ''; position: absolute; top: -60%; right: -8%;
  width: min(680px, 52vw); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(227, 10, 23, .12), transparent 62%);
}
.sb-in {
  position: relative; z-index: 1;
  padding-block: clamp(30px, 4.6vh, 62px);
}

/* --- yol (breadcrumb) --- */
.sb-yol { margin-bottom: clamp(16px, 2vh, 26px); }
.sb-yol ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 9px;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase;
}
.sb-yol li { display: flex; align-items: center; gap: 9px; color: var(--tx-d-mut); }
.sb-yol li + li::before { content: '/'; color: rgba(255, 255, 255, .26); }
.sb-yol a { color: var(--tx-d-mut); transition: color .16s ease; }
.sb-yol a:hover { color: #fff; }
.sb-yol [aria-current] { color: #fff; }

/* --- gövde: solda söz, sağda görsel --- */
.sb-govde {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 52px); align-items: center;
}
.sb-govde.sb-gorselli { grid-template-columns: minmax(0, 1fr) minmax(0, 33%); }

.sb-h1 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(27px, 3vw, 44px); line-height: 1.08;
  letter-spacing: -.022em; color: #fff; text-wrap: pretty;
}
.sb-giris {
  margin-top: 14px; max-width: 58ch;
  font-size: 16px; line-height: 1.62; color: var(--tx-d-mut);
}
.sb-eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 2.4vh, 28px); }

.sb-gor {
  display: block; overflow: hidden; border-radius: 4px;
  border: 1px solid var(--hair-d); background: var(--ink-700);
  aspect-ratio: 4 / 3;
}
.sb-gor img { width: 100%; height: 100%; object-fit: cover; }

/* --- ölçü satırı: kapsama bölümündeki parantezin aynısı --- */
.sb-olcu {
  display: flex; flex-wrap: wrap;
  margin-top: clamp(24px, 3vh, 38px);
  list-style: none; padding: 0;
}
.sb-olcu li {
  flex: 1 1 0; min-width: 128px; position: relative;
  border-top: 1px solid var(--hair-d2); padding: 12px 14px 0 0;
}
.sb-olcu li::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 1px; height: 10px; background: var(--hair-d2);
}
.sb-olcu li:last-child::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 1px; height: 10px; background: var(--red);
}
.sb-olcu-ad {
  display: block; font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 600; color: var(--tx-d-mut);
}
.sb-olcu-dg {
  display: block; margin-top: 6px;
  font-family: var(--f-sans); font-weight: 500;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.2;
  letter-spacing: -.02em; color: #fff;
}

@media (max-width: 900px) {
  .sb-govde.sb-gorselli { grid-template-columns: minmax(0, 1fr); }
  .sb-gor { max-width: 420px; }
}
@media (max-width: 560px) {
  .sb-olcu li { flex: 1 1 46%; margin-bottom: 12px; }
}

/* ---------- 10j. Ürün kategori sayfası -------------------------------- */
/* Kart ızgarası yerine satır: kategori başına 3–6 ürün var, liste kısa.
   Satır düzeni her ürünün beş özelliğini de gösterebiliyor; kartta
   bunlar sıkışıp okunmuyordu. Ayırıcı yine cetvel çizgisi. */
.ukat-bl { background: var(--white); color: var(--tx); padding-block: clamp(46px, 6vh, 88px); }
.ukat-bos { font-size: 15.5px; color: var(--tx-mut); }
.vk .ukat-bos a { color: var(--red); text-decoration: underline; }

.ukat-liste { list-style: none; margin: 0; padding: 0; }
.ukat-liste li { border-top: 1px solid var(--cetvel); }
.ukat-liste li:first-child { border-top: 0; }
.ukat-liste li:last-child { border-bottom: 1px solid var(--cetvel); }

.ukat-liste a {
  display: grid;
  grid-template-columns: clamp(120px, 13vw, 168px) minmax(0, 1fr) minmax(0, 1.05fr) auto;
  gap: clamp(18px, 2.4vw, 40px); align-items: center;
  padding: clamp(18px, 2.4vh, 28px) 0;
  color: var(--tx); text-decoration: none;
}

.ukat-gor {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--kagit-2); border-radius: 3px;
  position: relative;
}
.ukat-gor img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.ukat-gor-yok {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cetvel);
}

.ukat-marka {
  display: block; font-family: var(--f-mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-mut); margin-bottom: 6px;
}
.ukat-ad {
  display: block; font-family: var(--f-sans); font-weight: 600;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.25;
  letter-spacing: -.014em; color: var(--tx);
  transition: color .16s ease;
}
/* model_kodu alanı bazı kayıtlarda model kodu, bazılarında tanıtım
   cümlesi. Etiketsiz alt satır ikisini de doğru okutuyor. */
.ukat-alt {
  display: block; margin-top: 6px;
  font-size: 13.5px; line-height: 1.45; color: var(--tx-mut);
}
.ukat-rozet {
  display: inline-block; margin-top: 10px;
  padding: 4px 9px 5px; border-radius: 2px;
  background: rgba(227, 10, 23, .08); color: var(--red-deep);
  font-family: var(--f-mono); font-size: 10px;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}

.ukat-oz { display: block; }
.ukat-oz span {
  display: block; position: relative; padding-left: 16px;
  font-size: 13.5px; line-height: 1.5; color: var(--tx-mut);
}
.ukat-oz span + span { margin-top: 5px; }
.ukat-oz span::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 1px; background: var(--red);
}

.ukat-ok {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--tx-mut);
  transition: color .16s ease;
}
.ukat-ok svg { transition: transform .2s ease; }
.vk .ukat-liste a:hover .ukat-ad,
.vk .ukat-liste a:hover .ukat-ok { color: var(--red); }
.vk .ukat-liste a:hover .ukat-ok svg { transform: translateX(3px); }

/* --- kapanış --- */
.ukat-kapanis { background: var(--kagit-2); color: var(--tx); padding-block: clamp(42px, 5.6vh, 74px); }
.ukat-kapanis-in {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 22px clamp(28px, 3.4vw, 60px);
}
.ukat-kapanis-in h2 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(22px, 2.2vw, 34px); line-height: 1.12;
  letter-spacing: -.022em; color: var(--tx);
}
.ukat-kapanis-in p {
  margin-top: 10px; max-width: 48ch;
  font-size: 15.5px; line-height: 1.6; color: var(--tx-mut);
}
.ukat-kapanis-ey { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1080px) {
  .ukat-liste a {
    grid-template-columns: clamp(110px, 15vw, 150px) minmax(0, 1fr);
    row-gap: 14px; align-items: start;
  }
  .ukat-oz { grid-column: 2; }
  .ukat-ok { grid-column: 2; }
}
@media (max-width: 620px) {
  .ukat-liste a { grid-template-columns: minmax(0, 1fr); }
  .ukat-gor { max-width: 200px; }
  .ukat-oz, .ukat-ok { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ukat-ad, .ukat-ok, .ukat-ok svg { transition: none; }
}

/* ---------- 10i. İletişim sayfası ------------------------------------- */
/* Bu sayfa tamamen 2026 katmanında: Bootstrap ızgarası ve .form-control
   kaldırıldı, form kendi ızgarasını kullanıyor. Alan adları ve JS kancaları
   dokunulmadan korundu (bkz. contact-us.php başındaki sözleşme notu).
   Ekim 2026: sayfa başı .hzb; sütunlar diğer sayfalarla aynı oran
   (.72fr / 1.28fr); büyük harfli aralıklı etiketler sade etikete döndü. */
.ilt-bl { background: var(--zemin); color: var(--tx); padding-block: clamp(64px, 9vh, 112px); }
.ilt-in {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 40px clamp(32px, 4.4vw, 88px); align-items: start;
}
.ilt-kanal h2,
.ilt-form h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.014em; color: var(--tx);
  padding-bottom: 14px; margin-bottom: clamp(20px, 2.6vh, 28px);
  border-bottom: 1px solid var(--tx);
}

/* --- kanallar: kart yok, cetvel satırları --- */
.ilt-liste { list-style: none; margin: 0; padding: 0; }
.ilt-liste li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0 16px;
  padding: clamp(14px, 1.8vh, 19px) 0;
  border-top: 1px solid var(--cetvel);
}
.ilt-liste li:first-child { padding-top: 0; border-top: 0; }
.ilt-ik {
  display: flex; align-items: flex-start; justify-content: center;
  width: 20px; color: var(--red); padding-top: 2px;
}
.ilt-liste b {
  display: block; font-size: var(--fs-small); font-weight: 600; color: var(--tx-mut);
  margin-bottom: 6px;
}
.ilt-liste div > span {
  display: block; font-size: 15px; line-height: 1.55; color: var(--tx);
}
.ilt-liste div > a {
  display: block; font-size: 15px; line-height: 1.6;
  color: var(--tx); transition: color .16s ease;
}
.vk .ilt-liste div > a:hover { color: var(--red); }
.ilt-liste .arrow-link { margin-top: 9px; font-size: var(--fs-small); color: var(--red); }

/* canlı mesai durumu (JS 3d; footer kapanışındaki .kp-durum'un açık zemin hâli) */
.ilt-liste .ilt-durum { display: inline-flex; margin-top: 8px; font-size: var(--fs-small); color: var(--tx-mut); }
.ilt-liste .ilt-durum i { background: var(--cizgi-3); }
.ilt-liste .ilt-durum.is-acik i { background: var(--basari); box-shadow: 0 0 0 3px rgba(29, 122, 70, .16); }
.ilt-liste .ilt-durum.is-acik span { color: var(--tx); }

/* mevcut müşteriler: Pusula */
.ilt-portal { margin-top: clamp(28px, 4vh, 40px); padding: 20px 22px; background: var(--zemin-2); border-radius: 4px; }
.ilt-portal b { display: block; font-size: var(--fs-body); font-weight: 600; }
.ilt-portal p { margin-top: 6px; font-size: var(--fs-small); line-height: 1.6; color: var(--tx-mut); }
.ilt-portal .arrow-link { margin-top: 12px; font-size: var(--fs-small); color: var(--tx); }
.ilt-portal .arrow-link:hover { color: var(--kirmizi-koyu); }

/* --- form --- */
.ilt-sek {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--cetvel);
  margin-bottom: clamp(20px, 2.6vh, 30px);
}
.c-tab-btn {
  background: none; border: 0; cursor: pointer;
  padding: 11px 20px 13px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: var(--f-sans); font-size: 14.5px; font-weight: 600;
  color: var(--tx-mut);
  transition: color .16s ease, border-color .16s ease;
}
.c-tab-btn:first-child { padding-left: 0; }
.c-tab-btn:hover { color: var(--tx); }
.c-tab-btn.active { color: var(--tx); border-bottom-color: var(--red); }

/* Sekme içeriği: JS .active sınıfını taşıyor. */
.c-tab-content { display: none; }
.c-tab-content.active { display: block; }

/* Honeypot: ekranda ve ekran okuyucuda yok, ama otomatik doldurucu görür. */
.ilt-tuzak {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.ilt-izgara {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 22px);
}
.ilt-tam { grid-column: 1 / -1; }

.ilt-alan { display: block; }
.ilt-alan > span {
  display: block; margin-bottom: 8px;
  font-size: var(--fs-small); font-weight: 600; color: var(--tx);
}
.ilt-alan input,
.ilt-alan textarea {
  display: block; width: 100%;
  padding: 13px 14px; border-radius: 3px;
  border: 1px solid var(--cetvel); background: #fff;
  font-family: var(--f-sans); font-size: 15px; line-height: 1.5; color: var(--tx);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ilt-alan textarea { resize: vertical; min-height: 120px; }
.ilt-alan input::placeholder,
.ilt-alan textarea::placeholder { color: var(--tx-mut); }
.ilt-alan input:focus,
.ilt-alan textarea:focus {
  outline: 0; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(227, 10, 23, .12);
}
/* Tarayıcının kendi geçersizlik işareti yalnızca gönderim denemesinden
   sonra çıksın: boş forma kırmızı çerçeve basmak yersiz. */
.ilt-alan input:user-invalid,
.ilt-alan textarea:user-invalid { border-color: var(--red); }

.ilt-gonder { margin-top: clamp(18px, 2.4vh, 26px); }
.ilt-not {
  margin-top: 14px; max-width: 56ch;
  font-size: 13px; line-height: 1.55; color: var(--tx-mut);
}
.vk .ilt-not a { color: var(--red); text-decoration: underline; }

/* --- harita --- */
.ilt-harita { display: block; line-height: 0; border-top: 1px solid var(--cetvel); }
.ilt-harita iframe {
  display: block; width: 100%; height: clamp(280px, 42vh, 440px);
  border: 0; filter: grayscale(1) contrast(.92);
  transition: filter .3s ease;
}
.ilt-harita:hover iframe { filter: none; }

/* --- bildirim --- */
#toast-container {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  z-index: 9999; visibility: hidden; opacity: 0;
  min-width: 280px; max-width: min(520px, calc(100vw - 32px));
  padding: 15px 20px; border-radius: 3px;
  background: var(--ink-800); color: var(--tx-d);
  border-left: 3px solid var(--cetvel);
  font-size: 14.5px; line-height: 1.45; text-align: left;
  box-shadow: 0 12px 34px rgba(6, 8, 15, .3);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#toast-container.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
#toast-container.success { border-left-color: var(--basari); }
#toast-container.error   { border-left-color: var(--red); }

@media (max-width: 960px) {
  .ilt-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ilt-izgara { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ilt-harita iframe, #toast-container, .ilt-alan input, .ilt-alan textarea { transition: none; }
}

/* ---------- 10h. Hizmet sayfası --------------------------------------- */
/* Ekim 2026 yeniden kurulum. Anasayfayla aynı ritim: koyu baş → beyaz →
   gri bant → beyaz → koyu footer. Ortak bölüm başı (.bas) her bölümde;
   ürün rafı anasayfanın .ur-raf bileşeni. Sayfa başındaki çizim hero'nun
   çiziminden o hizmetin katı (.kat-cizim, includes/bina-kesiti.php).
   Yapışkan düzen yok. */

/* --- sayfa başı --- */
.hzb {
  background: var(--ink-900); color: var(--tx-d);
  border-bottom: 6px solid var(--kirmizi-koyu);
  position: relative; overflow: hidden;
}
.hzb::before {   /* hero'daki gibi sağda hafif kırmızı ışık */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 90% at 82% 55%, rgba(227, 10, 23, .14), transparent 70%);
}
.hzb-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 32px clamp(32px, 4.4vw, 88px);
  align-items: center;
  padding-block: clamp(48px, 7vh, 88px);
}
.hzb-yol { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-small); color: var(--tx-d-mut); }
.vk .hzb-yol a { color: var(--tx-d-mut); }
.vk .hzb-yol a:hover { color: #fff; }
.hzb-yol [aria-current] { color: var(--tx-d); }
.hzb h1 {
  margin-top: 18px;
  font-family: var(--f-display); font-weight: 400; color: #fff;
  font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.02em;
  text-wrap: balance;
}
.hzb-giris { margin-top: 18px; max-width: 46ch; font-size: var(--fs-lede); line-height: 1.62; color: var(--tx-d-mut); }
.hzb-eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hzb-cizim svg { display: block; width: 100%; height: auto; max-height: 340px; }

/* --- kapsamımız: solda başlık, sağda iş tanımları (anasayfa Hizmetler
       satırlarının akrabası; yapışkan değil) --- */
.hzs-bl { background: var(--zemin); color: var(--tx); padding-block: clamp(72px, 10vh, 128px); scroll-margin-top: var(--ust-h, 96px); }
.hzs-grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 28px clamp(32px, 4.4vw, 88px);
  align-items: start;
}
.hzs-yan h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.018em;
  max-width: 15ch; text-wrap: balance;
}
.hzs-yan p { margin-top: 16px; max-width: 40ch; font-size: var(--fs-lede); line-height: 1.62; color: var(--tx-mut); }
.hzs-yan > p + .arrow-link,
.hzu-bl .bas-sag > p + .arrow-link { margin-top: 20px; }
.hzs-kapsam { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tx); }
.hzs-kapsam li {
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 6px clamp(18px, 2.2vw, 36px); align-items: baseline;
  padding: 18px 0 19px; border-bottom: 1px solid var(--cizgi);
}
.hzs-kapsam h3 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.hzs-kapsam p { font-size: var(--fs-body); line-height: 1.6; color: var(--tx-mut); max-width: 56ch; }

/* --- sık sorulan sorular --- */
.hzf-bl { background: var(--zemin); color: var(--tx); border-top: 1px solid var(--cizgi); padding-block: clamp(72px, 10vh, 128px); }
.hzf-bl { scroll-margin-top: 110px; }
.hzf-liste { border-top: 1px solid var(--tx); }
.hzf-liste details { border-bottom: 1px solid var(--cizgi); }
.hzf-liste summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 18px 44px 18px 0;
  font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; letter-spacing: -.01em;
  transition: color .18s ease;
}
.hzf-liste summary::-webkit-details-marker { display: none; }
.hzf-liste summary::before, .hzf-liste summary::after {   /* artı → eksi */
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 14px; height: 1.5px; background: var(--kirmizi);
  transition: transform .22s var(--ease-out);
}
.hzf-liste summary::after { transform: rotate(90deg); }
.hzf-liste details[open] summary::after { transform: rotate(0deg); }
.hzf-liste details[data-genis="false"] summary::after { transform: rotate(90deg); }
.hzf-liste details.is-animating { overflow: hidden; }
.hzf-liste details[data-anlik] summary::after { transition: none; }
.hzf-liste summary:hover { color: var(--kirmizi-koyu); }
.hzf-liste summary:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 4px; }
.hzf-liste details p { padding: 0 44px 20px 0; max-width: 64ch; font-size: var(--fs-body); line-height: 1.62; color: var(--tx-mut); }
.hzf-cevap { display: flow-root; }
/* --- gri bant: sistem ne sağlıyor --- */
.hzk-bl { color: var(--tx); border-top: 1px solid var(--cizgi); padding-block: clamp(72px, 10vh, 128px); }
.hzk-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vh, 44px) clamp(24px, 3vw, 48px);
}
.hzk-liste li { padding-top: 16px; border-top: 1px solid var(--cizgi-2); }
.hzk-liste h3 { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; }
.hzk-liste p { margin-top: 6px; font-size: var(--fs-small); line-height: 1.6; color: var(--tx-mut); }

/* --- gri bant: ürünler (raf anasayfadan) --- */
.hzu-bl { color: var(--tx); border-top: 1px solid var(--cizgi); padding-block: clamp(72px, 10vh, 128px); scroll-margin-top: 110px; }
.hzu-tum { color: var(--tx); }
.hzu-tum:hover { color: var(--kirmizi-koyu); }
.hzu-raf { margin-top: 0; }

/* Yazılım vitrini: fotoğraf levhası yok; dört açık, kutusuz bağlantı. */
.hzu-yazilim-simge {
  display: flex; align-items: center; min-height: 128px;
  padding-bottom: 24px; border-bottom: 1px solid var(--cizgi-2);
  color: var(--tx);
}
.hzu-yazilim-simge svg { width: 64px; height: 64px; stroke-width: 1.35; }
.hzu-yazilim-raf .ur-ad { align-items: flex-start; justify-content: space-between; }
.hzu-yazilim-raf .ur-ad > svg { flex: none; margin-top: 4px; }
.hzu-yazilim-raf .ur-kat:is(:hover, :focus-visible) .hzu-yazilim-simge,
.hzu-yazilim-raf .ur-kat:focus-visible .ur-ad { color: var(--kirmizi-koyu); }
@media (max-width: 1100px) {
  .hzu-yazilim-raf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hzu-yazilim-simge { min-height: 104px; padding-bottom: 20px; }
  .hzu-yazilim-simge svg { width: 52px; height: 52px; }
  .hzu-yazilim-raf .ur-ad { font-size: var(--fs-body); }
}

/* --- diğer hizmetler --- */
.hzd-bl { background: var(--zemin); color: var(--tx); border-top: 1px solid var(--cizgi); padding-block: clamp(72px, 10vh, 128px); }
.hzd-katmanlar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(24px, 3vw, 48px);
}
.hzd-katman h3 {
  padding-bottom: 12px; border-bottom: 1px solid var(--tx);
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.014em;
}
.hzd-katman ul { list-style: none; margin: 0; padding: 0; }
.hzd-katman li { border-bottom: 1px solid var(--cizgi); }
.hzd-katman a, .hzd-bu {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 0;
  font-size: var(--fs-body); font-weight: 500;
}
.vk .hzd-katman a { color: var(--tx); }
.hzd-katman a svg { color: var(--kirmizi); opacity: .5; transition: opacity .2s ease, transform .25s var(--ease-out); }
.vk .hzd-katman a:hover { color: var(--kirmizi-koyu); }
.hzd-katman a:hover svg { opacity: 1; transform: translateX(3px); }
.hzd-bu { color: var(--tx-mut); }
.hzd-bu small { font-size: 13px; font-weight: 400; color: var(--tx-mut); }

@media (max-width: 1100px) {
  .hzk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hzb-in { grid-template-columns: minmax(0, 1fr); }
  .hzb-cizim { order: -1; }
  .hzs-grid, .hzd-katmanlar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hzk-liste { grid-template-columns: minmax(0, 1fr); }
  .hzs-kapsam li { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hzd-katman a svg, .hzf-liste summary::before, .hzf-liste summary::after { transition: none; }
}

/* ---------- 10h2. Hakkımızda ----------------------------------------- */
/* Ekim 2026. Hizmet sayfalarının bileşenlerini paylaşıyor: .hzb (koyu sayfa
   başı), .hzs-grid (solda başlık, sağda içerik), .hzk-liste (gri bant
   maddeleri). Kendine özgü olanlar: başta Kayseri merkezli Türkiye
   haritası, künye, grup yapısı, misyon/vizyon. */
.hk-harita { margin: 0; }
.hk-harita svg { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.hk-sinir { fill: none; stroke: var(--tx-d-mut); stroke-width: 1.3; stroke-linejoin: round; opacity: .7; }
.hk-nokta { fill: var(--kirmizi); }
.hk-halka { fill: none; stroke: var(--kirmizi); stroke-width: 1.2; opacity: .5; }
.hk-harita text { font-family: var(--f-sans); font-size: 20px; font-weight: 600; fill: var(--tx-d); }
@media (prefers-reduced-motion: no-preference) {
  .hk-halka { transform-box: fill-box; transform-origin: center; animation: rf-nabiz 3.2s var(--ease-out) infinite; }
}

/* künye: veri satırları (değerler veri, etiketler sade) */
.hk-kunye { margin: clamp(24px, 3.4vh, 36px) 0 0; border-top: 1px solid var(--tx); max-width: 420px; }
.hk-kunye div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0 10px; border-bottom: 1px solid var(--cizgi);
}
.hk-kunye dt { font-size: var(--fs-small); color: var(--tx-mut); }
.hk-kunye dd { margin: 0; font-size: var(--fs-body); font-weight: 600; text-align: right; }

.hk-metin p { max-width: 62ch; font-size: var(--fs-lede); line-height: 1.68; color: var(--tx); }
.hk-metin p + p { margin-top: 18px; }
.hk-metin p b { font-weight: 600; }
.hk-bag { margin-top: 26px; color: var(--tx); }
.hk-bag:hover { color: var(--kirmizi-koyu); }

/* grup yapısı + misyon/vizyon + diğer kurumsal sayfalar */
.hk-grup-bl { background: var(--zemin); color: var(--tx); border-top: 1px solid var(--cizgi); padding-block: clamp(72px, 10vh, 128px); }
.hk-grup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); }
.hk-marka { padding-top: 20px; border-top: 1px solid var(--tx); }
.hk-marka-logo {
  display: flex; align-items: center; height: 72px; padding: 0 22px; margin-bottom: 18px;
  background: var(--zemin-2); border-radius: 4px;
}
.hk-marka-logo img { width: auto; height: 34px; }
.hk-marka-koyu { background: var(--ink-900); }
.hk-marka h3 { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.014em; }
.hk-marka p { margin-top: 8px; max-width: 52ch; font-size: var(--fs-body); line-height: 1.6; color: var(--tx-mut); }
.hk-marka .arrow-link { margin-top: 16px; color: var(--tx); }
.hk-marka .arrow-link:hover { color: var(--kirmizi-koyu); }

.hk-mv {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 6.4vh, 72px);
}
.hk-mv div { padding-top: 18px; border-top: 1px solid var(--cizgi-2); }
.hk-mv h3 { font-size: var(--fs-h4); font-weight: 600; }
.hk-mv p { margin-top: 8px; max-width: 52ch; font-size: var(--fs-lede); line-height: 1.6; color: var(--tx); }

.hk-diger {
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  margin-top: clamp(48px, 6.4vh, 72px); padding-top: 20px; border-top: 1px solid var(--cizgi);
}
.hk-diger a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-body); font-weight: 500; }
.vk .hk-diger a { color: var(--tx); }
.vk .hk-diger a:hover { color: var(--kirmizi-koyu); }
.hk-diger a svg { color: var(--kirmizi); }

@media (max-width: 900px) {
  .hk-harita { order: -1; }
  .hk-grup, .hk-mv { grid-template-columns: minmax(0, 1fr); }
  .hk-kunye { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .hk-halka { animation: none; } }

/* ---------- 10h3. Kurumsal: Referanslar, Çözüm ortakları, Galeri ------- */
/* Ekim 2026. Hakkımızda ile aynı bileşenler: .hzb (koyu sayfa başı),
   .hzs-grid (solda başlık, sağda içerik), .hzk-liste, .hk-diger.
   Sayfa başında çizim yoksa .hzb-tek ile tek sütun. */
.hzb-tek { grid-template-columns: minmax(0, 1fr); }

.rfs-bl, .co-bl, .gl-bl { background: var(--zemin); color: var(--tx); padding-block: clamp(72px, 10vh, 128px); }
/* gruplar arası: ince çizgi, bant değil (aynı konu) */
.rfs-grup + .rfs-grup, .co-alan + .co-alan {
  margin-top: clamp(56px, 8vh, 96px); padding-top: clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--cizgi);
}

/* --- Referanslarımız: sayfa başı sayıları ve harita --- */
.rfs-sayilar {
  display: flex; flex-wrap: wrap; gap: 12px clamp(28px, 3vw, 48px);
  margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--ink-600);
}
.rfs-sayilar dt { font-size: var(--fs-small); color: var(--tx-d-mut); }
.rfs-sayilar dd { margin: 4px 0 0; font-family: var(--f-mono); font-size: 22px; line-height: 1.2; color: #fff; }

.rfs-harita { margin: 0; }
.rfs-harita svg { display: block; width: 100%; height: auto; max-height: 320px; overflow: visible; }
.rfs-sinir { fill: none; stroke: var(--tx-d-mut); stroke-width: 1.3; stroke-linejoin: round; opacity: .7; }
.rfs-hat { fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 1.2; }
.rfs-sinyal {   /* anasayfa haritasındaki sinyal: merkezden şehre akan kısa ışık */
  fill: none; stroke: var(--kirmizi); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 5 95; stroke-dashoffset: 105; opacity: 0;
}
.rfs-nokta circle { fill: var(--tx-d); }
.rfs-merkez circle { fill: var(--kirmizi); }
.rfs-nokta .rfs-halka { fill: none; stroke: var(--kirmizi); stroke-width: 1.2; opacity: .5; }
.rfs-nokta text { font-family: var(--f-sans); font-size: 20px; font-weight: 600; fill: var(--tx-d); }
@media (prefers-reduced-motion: no-preference) {
  .rfs-sinyal { opacity: .9; animation: rf-sinyal 3.6s linear infinite; animation-delay: calc(.4s + var(--i, 0) * .45s); }
  .rfs-halka { transform-box: fill-box; transform-origin: center; animation: rf-nabiz 3.2s var(--ease-out) infinite; }
}

/* --- Referanslarımız: tür grupları --- */
.hzs-yan .rfs-adet { margin-top: 12px; font-family: var(--f-mono); font-size: var(--fs-data); color: var(--tx-mut); }
.rfs-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(16px, 2vw, 28px);
}
.rfs-liste li { display: flex; flex-direction: column; }
.rfs-logo {
  display: flex; align-items: center; justify-content: center;
  height: clamp(104px, 9vw, 128px); padding: 18px 24px;
  border: 1px solid var(--cizgi); border-radius: 4px;
}
.rfs-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.rfs-ad { margin-top: 12px; font-size: var(--fs-body); font-weight: 600; line-height: 1.35; }
.rfs-sehir { margin-top: 2px; font-size: var(--fs-small); color: var(--tx-mut); }
.rfs-not {
  margin-top: clamp(56px, 8vh, 96px); padding-top: 20px; border-top: 1px solid var(--cizgi);
  max-width: 64ch; font-size: var(--fs-small); line-height: 1.6; color: var(--tx-mut);
}

/* --- Referanslarımız: şehir şehir (gri bant) --- */
.rfs-sehir-bl { color: var(--tx); border-top: 1px solid var(--cizgi); padding-block: clamp(72px, 10vh, 128px); }
.rfs-sehirler { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tx); }
.rfs-sehirler li {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 6px clamp(32px, 4.4vw, 88px); align-items: baseline;
  padding: 16px 0 17px; border-bottom: 1px solid var(--cizgi-2);
}
.rfs-sehirler h3 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
.rfs-sehirler h3 span { margin-left: 8px; font-family: var(--f-mono); font-size: var(--fs-data); font-weight: 400; color: var(--tx-mut); }
.rfs-sehirler p { max-width: 70ch; font-size: var(--fs-body); line-height: 1.6; color: var(--tx-mut); }

/* --- Çözüm ortaklarımız: alanlar --- */
.co-alan { scroll-margin-top: calc(var(--ust-h, 96px) + 24px); }
.co-hizmet { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.co-hizmet a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-body); font-weight: 500; }
.vk .co-hizmet a { color: var(--tx); }
.vk .co-hizmet a:hover { color: var(--kirmizi-koyu); }
.co-hizmet a svg { color: var(--kirmizi); }
.co-logolar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.co-logolar li {
  display: flex; align-items: center; justify-content: center;
  height: clamp(104px, 10vw, 140px); padding: 24px 32px;
  border: 1px solid var(--cizgi); border-radius: 4px;
}
.co-logolar img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.co-logo-bag { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* --- Galeri --- */
.gl-izgara {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vh, 44px) clamp(16px, 2vw, 28px);
}
.gl-izgara li:first-child { grid-column: span 2; }   /* ilk kare öne çıkar */
.gl-izgara figure { margin: 0; }
.gl-izgara a { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--zemin-2); }
.gl-izgara li:first-child a { aspect-ratio: 16 / 9; }
.gl-izgara img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.gl-izgara a:hover img { transform: scale(1.03); }
.gl-izgara a:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 3px; }
.gl-izgara figcaption { margin-top: 12px; font-size: var(--fs-body); font-weight: 500; line-height: 1.4; }
.gl-bos p { font-size: var(--fs-lede); color: var(--tx-mut); }
.gl-bos .arrow-link { margin-top: 16px; color: var(--tx); }

/* büyük görünüm: tam ekran yerel <dialog> */
.gl-kutu {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(6, 8, 15, .95); color: var(--tx-d);
}
.gl-kutu::backdrop { background: transparent; }
.gl-kutu-ic {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 72px clamp(16px, 8vw, 120px) 32px;
}
.gl-kutu-ic img { max-width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 2px; }
.gl-kutu-alt { font-size: var(--fs-body); text-align: center; }
.gl-kutu-sira { margin-left: 10px; font-family: var(--f-mono); font-size: var(--fs-data); color: var(--tx-d-mut); }
.gl-kutu button {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
  background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.gl-kutu button:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.gl-kutu button:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 3px; }
.gl-kutu-kapat { top: 16px; right: 16px; }
.gl-kutu-onceki, .gl-kutu-sonraki { top: 50%; transform: translateY(-50%); }
.gl-kutu-onceki { left: 16px; }
.gl-kutu-onceki svg { transform: rotate(180deg); }
.gl-kutu-sonraki { right: 16px; }

@media (max-width: 1100px) {
  .rfs-liste, .co-logolar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rfs-harita { order: -1; }
  .rfs-sehirler li { grid-template-columns: minmax(0, 1fr); }
  .gl-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .gl-izgara { grid-template-columns: minmax(0, 1fr); }
  .gl-izgara li:first-child { grid-column: auto; }
  .gl-kutu-onceki, .gl-kutu-sonraki { top: auto; bottom: 16px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-izgara img, .gl-kutu button { transition: none; }
}

/* --- Banka hesaplarımız --- */
/* Solda alıcı adı, sağda bankalara göre IBAN satırları. IBAN veri olduğu
   için mono; 4'lü gruplar okunurken hane kaçırılmasın. */
.bk-bl { background: var(--zemin); color: var(--tx); padding-block: clamp(72px, 10vh, 128px); }
.bk-alici {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-top: clamp(24px, 3.4vh, 36px); padding-top: 16px; border-top: 1px solid var(--tx);
  max-width: 420px;
}
.bk-etiket { font-size: var(--fs-small); color: var(--tx-mut); }
.bk-alici b { font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; }
.bk-alici .bk-kopyala { margin-top: 6px; }

.bk-banka + .bk-banka { margin-top: clamp(32px, 4.4vh, 48px); }
.bk-banka h3 {
  padding-bottom: 12px; border-bottom: 1px solid var(--tx);
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.014em;
}
.bk-banka li {
  display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto;
  gap: 8px clamp(16px, 2vw, 28px); align-items: center;
  min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--cizgi);
}
.bk-para { font-family: var(--f-mono); font-size: var(--fs-data); font-weight: 500; color: var(--tx-mut); }
.bk-iban {
  font-family: var(--f-mono); font-size: clamp(15px, 1.25vw, 18px); letter-spacing: .02em;
  white-space: nowrap; overflow-wrap: normal; user-select: all;
}

.bk-kopyala {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--cizgi-2); border-radius: 4px; background: var(--zemin);
  font-size: var(--fs-small); font-weight: 500; color: var(--tx); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.bk-kopyala:hover { border-color: var(--tx); }
.bk-kopyala svg { color: var(--tx-mut); transition: color .2s ease; }
.bk-kopyala.is-tamam { border-color: var(--basari); color: var(--basari); }
.bk-kopyala.is-tamam svg { color: var(--basari); }
.bk-durum { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 620px) {
  .bk-banka li { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-iban { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-kopyala, .bk-kopyala svg { transition: none; }
}

/* --- KVKK aydınlatma metni --- */
/* Okuma sayfası: solda içindekiler (yapışkan değil), sağda en fazla ~68ch
   satırlı metin. Bölüm numaraları metnin yapısı (hukuki atıf için), süs
   değil; başlığın içinde düz yazı. Başvuru bölümü gri bantta. */
.kv-bl { background: var(--zemin); color: var(--tx); padding-block: clamp(64px, 9vh, 112px); }
.kv-icindekiler h2 { font-size: var(--fs-small); font-weight: 600; color: var(--tx-mut); }
.kv-icindekiler ol { margin-top: 12px; border-top: 1px solid var(--tx); max-width: 340px; }
.kv-icindekiler li { border-bottom: 1px solid var(--cizgi); }
.kv-icindekiler a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 0;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.4;
}
.vk .kv-icindekiler a { color: var(--tx); }
.vk .kv-icindekiler a:hover { color: var(--kirmizi-koyu); }

.kv-metin { max-width: 68ch; }
.kv-metin section { scroll-margin-top: calc(var(--ust-h, 96px) + 24px); }
.kv-metin section + section { margin-top: clamp(40px, 5.6vh, 64px); padding-top: clamp(40px, 5.6vh, 64px); border-top: 1px solid var(--cizgi); }
.kv-metin h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.014em;
  margin-bottom: 18px;
}
.kv-metin p, .kv-metin li, .kv-veri dd { font-size: var(--fs-body); line-height: 1.72; color: var(--tx); }
.kv-metin p + p, .kv-metin p + ul, .kv-metin p + dl { margin-top: 14px; }
.kv-metin strong { font-weight: 600; }
.kv-metin ul li { position: relative; padding-left: 22px; }
.kv-metin ul li + li { margin-top: 8px; }
.kv-metin ul li::before {   /* kısa kırmızı çizgi: madde imi */
  content: ''; position: absolute; left: 0; top: .85em;
  width: 10px; height: 1.5px; background: var(--kirmizi);
}
.kv-veri { margin: 0; border-top: 1px solid var(--cizgi-2); }
.kv-veri div {
  display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 20px;
  padding: 12px 0; border-bottom: 1px solid var(--cizgi);
}
.kv-veri dt { font-size: var(--fs-body); font-weight: 600; line-height: 1.72; }
.kv-veri dd { margin: 0; }

.kv-basvuru { color: var(--tx); border-top: 1px solid var(--cizgi); padding-block: clamp(64px, 9vh, 112px); scroll-margin-top: var(--ust-h, 96px); }
.kv-kanal { margin: 0; border-top: 1px solid var(--tx); }
.kv-kanal div {
  display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr); gap: 4px 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--cizgi-2);
}
.kv-kanal dt { font-size: var(--fs-small); color: var(--tx-mut); }
.kv-kanal dd { margin: 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.5; }
.vk .kv-kanal a { color: var(--tx); text-decoration: underline; text-decoration-color: var(--cizgi-3); text-underline-offset: 3px; }
.vk .kv-kanal a:hover { color: var(--kirmizi-koyu); text-decoration-color: currentColor; }
.kv-not {
  margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--kirmizi);
  max-width: 64ch; font-size: var(--fs-small); line-height: 1.65; color: var(--tx-mut);
}

@media (max-width: 620px) {
  .kv-veri div, .kv-kanal div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 10h4. Blog: liste ve yazı ---------------------------------- */
/* Ekim 2026. Liste: kategori bağlantıları, ilk yazı geniş (.bl-kart-one),
   kalanı üçlü ızgara. Yazı: kapak, solda künye (yapışkan değil), sağda
   ~68ch metin; altta gri bantta aynı kartlarla "Diğer yazılar".
   Kartın tamamı tıklanır: başlık bağlantısının ::after'ı kartı kaplar. */
.bl-bl { background: var(--zemin); color: var(--tx); padding-block: clamp(56px, 8vh, 104px) clamp(72px, 10vh, 128px); }

.bl-kategoriler { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: clamp(32px, 4.4vh, 48px); border-bottom: 1px solid var(--cizgi); }
.bl-kategoriler a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: var(--fs-body); font-weight: 500;
}
.vk .bl-kategoriler a { color: var(--tx-mut); }
.vk .bl-kategoriler a:hover { color: var(--tx); }
.vk .bl-kategoriler a[aria-current="page"] { color: var(--tx); border-bottom-color: var(--kirmizi); }
.bl-kategoriler span { font-family: var(--f-mono); font-size: var(--fs-data); color: var(--tx-mut); }

/* --- kart --- */
.bl-kart { position: relative; display: flex; flex-direction: column; }
.bl-gorsel { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 4px; background: var(--zemin-2); }
.bl-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.bl-gorsel-bos { display: grid; place-items: center; height: 100%; background: var(--ink-900); }
.bl-gorsel-bos img { width: auto; height: 28px; opacity: .5; }
.bl-kart:hover .bl-gorsel img { transform: scale(1.03); }
.bl-govde { display: flex; flex-direction: column; flex: 1; padding-top: 18px; }
.bl-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: var(--fs-small); color: var(--tx-mut); }
.bl-ust time { font-family: var(--f-mono); font-size: var(--fs-data); }
.bl-kat { position: relative; z-index: 1; font-weight: 500; }
.vk .bl-kat { color: var(--kirmizi-koyu); }
.vk .bl-kat:hover { color: var(--tx); }
.bl-baslik { margin-top: 10px; font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.vk .bl-baslik a { color: var(--tx); }
.bl-baslik a::after { content: ''; position: absolute; inset: 0; }
.bl-baslik a:focus-visible { outline: none; }
.bl-kart:has(.bl-baslik a:focus-visible) { outline: 2px solid var(--kirmizi); outline-offset: 6px; border-radius: 4px; }
.vk .bl-kart:hover .bl-baslik a { color: var(--kirmizi-koyu); }
.bl-ozet {
  margin-top: 8px; font-size: var(--fs-body); line-height: 1.6; color: var(--tx-mut);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.bl-oku { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: var(--fs-small); font-weight: 600; color: var(--tx); }
.bl-oku svg { color: var(--kirmizi); transition: transform .25s var(--ease-out); }
.bl-kart:hover .bl-oku svg { transform: translateX(3px); }

/* ilk yazı: geniş, görsel solda */
.bl-kart-one {
  display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr);
  gap: 24px clamp(32px, 4.4vw, 72px); align-items: center;
}
.bl-kart-one .bl-govde { padding-top: 0; }
.bl-kart-one .bl-baslik { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.018em; }
.bl-kart-one .bl-ozet { font-size: var(--fs-lede); -webkit-line-clamp: 4; }
.bl-kart-one .bl-oku { margin-top: 0; padding-top: 22px; }
.bl-kart-one + .bl-izgara { margin-top: clamp(48px, 6.4vh, 72px); padding-top: clamp(48px, 6.4vh, 72px); border-top: 1px solid var(--cizgi); }

.bl-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5.6vh, 56px) clamp(20px, 2.4vw, 36px); }
.bl-bos p { font-size: var(--fs-lede); color: var(--tx-mut); }
.bl-bos .arrow-link { margin-top: 16px; color: var(--tx); }

/* --- sayfalama --- */
.bl-sayfalar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: clamp(48px, 6.4vh, 72px); padding-top: 20px; border-top: 1px solid var(--cizgi);
}
.bl-sayfalar ol { display: flex; gap: 4px; }
.bl-sayfalar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; border-radius: 4px; font-weight: 500; }
.vk .bl-sayfalar a { color: var(--tx); }
.vk .bl-sayfalar a:hover { color: var(--kirmizi-koyu); }
.vk .bl-sayfalar a[aria-current="page"] { background: var(--ink-900); color: #fff; }
.bl-yon svg { color: var(--kirmizi); }
.bl-geri svg, .by-geri svg { transform: rotate(180deg); }

/* --- yazı sayfası --- */
.by-ust { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; font-size: var(--fs-small); color: var(--tx-d-mut); }
.by-ust time { font-family: var(--f-mono); font-size: var(--fs-data); }
.by-bl { display: block; background: var(--zemin); color: var(--tx); padding-block: clamp(48px, 6.4vh, 80px) clamp(72px, 10vh, 128px); }
.by-kapak { margin: 0 0 clamp(40px, 5.6vh, 64px); overflow: hidden; border-radius: 4px; background: var(--zemin-2); }
.by-kapak img { display: block; width: 100%; max-height: 560px; object-fit: cover; }

.by-kunye dl { margin: 0; border-top: 1px solid var(--tx); max-width: 320px; }
.by-kunye dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0 10px; border-bottom: 1px solid var(--cizgi); }
.by-kunye dt { font-size: var(--fs-small); color: var(--tx-mut); }
.by-kunye dd { margin: 0; font-size: var(--fs-small); font-weight: 600; text-align: right; }
.vk .by-kunye dd a { color: var(--tx); }
.vk .by-kunye dd a:hover { color: var(--kirmizi-koyu); }
.by-geri { margin-top: 22px; color: var(--tx); }
.by-geri:hover { color: var(--kirmizi-koyu); }

/* metin: admin editöründen gelen HTML'e genel tipografi */
.by-icerik { max-width: 68ch; }
.by-ozet { font-size: var(--fs-lede); line-height: 1.62; color: var(--tx-mut); padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--cizgi); }
.by-icerik > :where(p, ul, ol, blockquote, figure, table) + :where(p, ul, ol, blockquote, figure, table) { margin-top: 18px; }
.by-icerik :where(p, li) { font-size: var(--fs-body); line-height: 1.75; color: var(--tx); }
.by-icerik :where(h2, h3, h4) { margin-top: clamp(36px, 5vh, 52px); margin-bottom: 14px; color: var(--tx); text-wrap: balance; }
.by-icerik > :where(h2, h3, h4):first-child { margin-top: 0; }
.by-icerik h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.014em; }
.by-icerik :where(h3, h4) { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
.by-icerik :where(h2, h3, h4) b, .by-icerik :where(h2, h3, h4) strong { font-weight: inherit; }
.by-icerik :where(b, strong) { font-weight: 600; }
.by-icerik ul { list-style: none; }
.by-icerik ul li { position: relative; padding-left: 22px; }
.by-icerik ul li::before { content: ''; position: absolute; left: 0; top: .85em; width: 10px; height: 1.5px; background: var(--kirmizi); }
.by-icerik ol { list-style: decimal; padding-left: 1.4em; }
.by-icerik li + li { margin-top: 8px; }
.by-icerik img { max-width: 100%; height: auto; margin-block: 8px; border-radius: 4px; }
.vk .by-icerik a { color: var(--kirmizi-koyu); text-decoration: underline; text-underline-offset: 3px; }
.by-icerik blockquote { padding-left: 18px; border-left: 2px solid var(--kirmizi); font-family: var(--f-display); font-size: var(--fs-lede); line-height: 1.55; }

.by-galeri { margin-top: clamp(40px, 5.6vh, 64px); padding-top: 28px; border-top: 1px solid var(--cizgi); }
.by-galeri h2 { margin-top: 0; }
.by-galeri-izgara { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.by-galeri-izgara li { padding: 0; }
.by-galeri-izgara li::before { content: none; }
.by-galeri-izgara a { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--zemin-2); }
.by-galeri-izgara img { width: 100%; height: 100%; margin: 0; object-fit: cover; transition: transform .6s var(--ease-out); }
.by-galeri-izgara a:hover img { transform: scale(1.04); }

.by-diger { color: var(--tx); border-top: 1px solid var(--cizgi); padding-block: clamp(72px, 10vh, 128px); }
.vk .by-diger .bas-sag .arrow-link { color: var(--tx); }

@media (max-width: 1100px) {
  .bl-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bl-kart-one { grid-template-columns: minmax(0, 1fr); }
  .by-kunye dl { max-width: none; }
}
@media (max-width: 620px) {
  .bl-izgara { grid-template-columns: minmax(0, 1fr); }
  .by-galeri-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-gorsel img, .bl-oku svg, .by-galeri-izgara img { transition: none; }
}

/* ---------- 10g. 404 --------------------------------------------------- */
/* Sayfa başı koyu, gövde açık: sitenin geri kalanıyla aynı ritim. */
.hata-bl { background: var(--white); color: var(--tx); padding-block: clamp(48px, 6.5vh, 92px); }
.hata-h2 {
  font-family: var(--f-sans); font-weight: 500;
  font-size: clamp(19px, 1.7vw, 27px); line-height: 1.24;
  letter-spacing: -.016em; color: var(--tx);
  margin-bottom: clamp(22px, 3vh, 36px);
}
.hata-izgara {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 54px);
}
/* Sütun başlıkları kapsama bölümündeki parantezin aynısı. */
.hata-izgara > div { position: relative; border-top: 1px solid var(--cetvel); padding-top: 13px; }
.hata-izgara > div::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 1px; height: 10px; background: var(--cetvel);
}
.hata-izgara > div:last-child::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 1px; height: 10px; background: var(--red);
}
.hata-et {
  display: block; font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 600; color: var(--tx);
}
.hata-liste { list-style: none; margin: 14px 0 0; padding: 0; }
.hata-liste li + li { margin-top: 9px; }
.hata-liste a {
  font-size: 14.5px; line-height: 1.4; color: var(--tx-mut);
  transition: color .16s ease;
}
.vk .hata-liste a:hover { color: var(--red); }

@media (max-width: 760px) {
  .hata-izgara { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hata-izgara > div:last-child::after { display: none; }
}

/* ---------- 11. Rozet ------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 26px; padding: 4px 11px;
  border-radius: 2px; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}

/* ---------- 12. Hizmet sekmeleri ------------------------------------- */
.svc { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 3.4vw, 64px); }
.svc-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--hair-d); }
.svc-tab {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 17px 14px 17px 0; background: none; border: 0;
  border-bottom: 1px solid var(--hair-d);
  color: var(--tx-d-mut); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: color .16s ease;
  overflow: hidden;
}
/* Kayma efekti iç sarmalayıcıya transform ile veriliyor: padding animasyonu
   her karede yeniden yerleşim hesabı yaptırıyordu. Görünen sonuç aynı —
   içerik sağa kayar, alt çizgi yerinde kalır. */
.svc-tab-in {
  display: flex; align-items: center; gap: 14px; width: 100%;
  transition: transform .2s ease;
}
.svc-tab:hover { color: #fff; }
.svc-tab:hover .svc-tab-in { transform: translateX(8px); }
.svc-tab[aria-selected="true"] { color: #fff; }
.svc-tab[aria-selected="true"] .svc-tab-in { transform: translateX(14px); }
.svc-tab .dot {
  width: 6px; height: 6px; border-radius: 50%; background: transparent; flex-shrink: 0;
  transition: background .16s ease;
}
.svc-tab[aria-selected="true"] .dot { background: var(--red); }
.svc-tab .no { font-size: 10.5px; opacity: .55; }

.svc-panel { animation: vk-fade .3s ease both; }
.svc-panel[hidden] { display: none; }
@keyframes vk-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.svc-panel h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.018em; color: #fff; margin-top: 14px; }
.svc-panel > p { font-size: 17px; line-height: 1.7; color: var(--tx-d-mut); margin-top: 22px; max-width: 620px; }

.svc-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--hair-d); border: 1px solid var(--hair-d); margin-top: 34px;
}
.svc-cell { background: var(--ink-900); padding: 24px 26px 26px; }
.svc-cell h4 { margin: 12px 0 8px; font-size: 16px; font-weight: 600; color: #fff; }
.svc-cell p { font-size: 14px; line-height: 1.6; color: var(--tx-d-mut); }
.svc-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- 13. Kart ızgaraları -------------------------------------- */
.cards { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Yoğun kart ızgarası — dar sütunda kategori kartları için */
.kart-sik .card { padding: 16px 16px 18px; }
.kart-sik .card-ic { margin-bottom: 12px; }
.kart-sik .card h4 { font-size: 14.5px; margin-bottom: 0; line-height: 1.3; }
.kart-sik .card-go { margin-top: 10px; font-size: 12px; }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: #fff; color: var(--tx); display: block;
  padding: 22px 22px 24px; position: relative;
  transition: background .2s ease;
}
.card:hover { background: var(--paper); color: var(--tx); }
.card-ic { color: var(--red); margin-bottom: 20px; display: block; }
.card h4 { margin-bottom: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.008em; }
.card p { font-size: 14.5px; line-height: 1.62; color: var(--tx-mut); }
.card-go {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--red);
  opacity: 0; transform: translateX(-6px); transition: opacity .22s ease, transform .22s ease;
}
.card:hover .card-go, .card:focus-visible .card-go { opacity: 1; transform: none; }

.card-media { padding: 0; }
.card-media .card-thumb {
  height: 172px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
}
.card-media .card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-media .card-tag { position: absolute; left: 24px; bottom: 20px; color: var(--red); z-index: 2; }
.card-media .card-body { padding: 26px 28px 30px; }

/* ---------- 17. Marka / referans duvarı ------------------------------ */
.brands { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--hair); }
.brand-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 22px; align-items: center; }
.brand-word { font-size: 15px; font-weight: 600; color: var(--tx-mut); letter-spacing: .02em; }
.brand-logo { max-height: 34px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.brand-logo:hover { filter: none; opacity: 1; }

.ref-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.ref {
  min-height: 64px;
  background: #fff; padding: 16px 18px;
  display: flex; align-items: center; font-size: 14px; font-weight: 500;
  color: var(--tx); line-height: 1.4;
  transition: background .18s ease, color .18s ease;
}
.ref:hover { background: var(--ink-900); color: #fff; }

/* ---------- 18. İletişim --------------------------------------------- */
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair-d); border: 1px solid var(--hair-d); }
.ct { background: var(--ink-900); padding: 30px 28px 32px; }
.ct p { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--tx-d); }
.ct :where(a) { color: var(--tx-d); }
.ct :where(a:hover) { color: var(--red); }
.ct-glow {
  position: absolute; bottom: -260px; right: -140px; width: 760px; height: 760px;
  pointer-events: none; background: radial-gradient(circle, rgba(227, 10, 23,.14), transparent 62%);
}

/* ---------- 19. Footer (kapanış + bağlantılar + harita) -------------- */
/* Kapanış: solda teklif daveti, sağda iki sade iletişim satırı.
   Koyu zemin alt katla kesintisiz sürer; kırmızı yalnız asıl eylemdedir.
   Alt kat: marka | hizmetler | kurumsal | harita (korunan düzen). */
.ft { background: var(--ink-950); color: var(--tx-d); }

/* --- üst kat: kapanış --- */
.ft-kp {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 32px clamp(32px, 4.4vw, 88px); align-items: center;
  padding-block: clamp(52px, 7vh, 80px);
  scroll-margin-top: 100px;
}
.kp-giris h2 {
  max-width: 19ch; color: var(--tx-d); font-family: var(--f-display);
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.12;
  letter-spacing: -.018em; text-wrap: balance;
}
.kp-giris p { max-width: 44ch; margin-top: 16px; font-size: var(--fs-body); line-height: 1.65; color: var(--tx-d-mut); }
.kp-teklif { margin-top: 24px; }
.vk .kp-teklif:hover { transform: none; }
.ft-kp a:focus-visible { outline: 2px solid var(--tx-d); outline-offset: 5px; }

.kp-kanallar {
  min-width: 0;
  border-top: 1px solid var(--hair-d2);
}
.kp-kanal {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) 18px;
  align-items: baseline; gap: 20px; min-height: 100px; padding-block: 22px;
  border-bottom: 1px solid var(--hair-d);
}
.vk .kp-kanal, .vk .kp-kanal:hover { color: var(--tx-d); }
.kp-et { font-size: var(--fs-small); color: var(--tx-d-mut); }
.kp-detay { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.kp-deger {
  font-size: var(--fs-h4); font-weight: 500; line-height: 1.4;
  color: var(--tx-d); overflow-wrap: anywhere;
}
.kp-tel { font-variant-numeric: tabular-nums; }
.kp-alt { font-size: var(--fs-small); color: var(--tx-d-mut); }
.kp-ok { align-self: start; margin-top: 5px; color: var(--tx-d-mut); }
.kp-kanal:hover .kp-deger, .kp-kanal:focus-visible .kp-deger { text-decoration: underline; text-underline-offset: 5px; }
.kp-kanal:hover .kp-ok, .kp-kanal:focus-visible .kp-ok { color: var(--tx-d); }

/* canlı mesai durumu */
.kp-durum { display: inline-flex; align-items: center; gap: 8px; }
.kp-durum i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: rgba(255, 255, 255, .28); }
.kp-durum.is-acik i { background: var(--basari-d); box-shadow: 0 0 0 3px rgba(63, 179, 122, .18); }
.kp-durum.is-acik span { color: var(--tx-d); }

/* --- alt kat --- */
.ft-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.35fr);
  gap: clamp(28px, 3.2vw, 56px);
  padding-block: clamp(44px, 6vh, 72px);
  border-top: 1px solid var(--hair-d);
}
.ft-in:first-child { border-top: 0; }   /* kapanışsız sayfada (iletişim) gereksiz üst ayıraç olmasın */
.ft h6 { margin-bottom: 18px; color: #fff; font-size: var(--fs-small); font-weight: 600; letter-spacing: .01em; }
.ft-about { margin-top: 18px; font-size: var(--fs-small); line-height: 1.66; color: var(--tx-d-mut); max-width: 300px; }
.ft-list { display: flex; flex-direction: column; gap: 11px; }
/* Tek ortak kaynak: eski Bootstrap a:hover kuralı footer rengini ezemez. */
.vk .ft-list a { color: var(--tx-d-mut); font-size: var(--fs-small); }
.vk .ft-list a:hover, .vk .ft-list a:focus-visible { color: var(--tx-d); }

.soc { display: flex; gap: 8px; margin-top: 24px; }
.vk .soc a {
  width: 40px; height: 40px; border: 1px solid var(--hair-d); border-radius: 3px;
  display: flex; align-items: center; justify-content: center; color: var(--tx-d-mut);
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.vk .soc a:hover { border-color: var(--kirmizi); color: var(--zemin); background: var(--kirmizi); }

/* sağ sütun: harita + adres */
.ft-harita {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px;
  background: var(--ink-700); border: 1px solid var(--hair-d);
}
.ft-harita iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(1) invert(.92) contrast(.86);   /* Google renkleri paleti bozmasın */
}
.ft-harita-ort {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(6, 8, 15, 0); transition: background-color .2s ease;
}
.ft-harita-ort span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; background: var(--red); color: #fff;
  font-size: 12.5px; font-weight: 600;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.ft-harita-ort:hover, .ft-harita-ort:focus-visible { background: rgba(6, 8, 15, .55); }
.ft-harita-ort:hover span, .ft-harita-ort:focus-visible span { opacity: 1; transform: none; }
.ft-adres {
  margin-top: 14px; font-style: normal;
  font-size: var(--fs-small); line-height: 1.6; color: var(--tx-d);
}
.ft-adres span { display: block; margin-top: 4px; color: var(--tx-d-mut); }
.vk .ft-adres a { color: var(--tx-d-mut); }
.vk .ft-adres a:hover { color: #fff; }

.ft-bot {
  border-top: 1px solid var(--hair-d); padding-block: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap;
  font-size: 13px; color: var(--tx-d-mut);
}
.ft-bot span:first-child { margin-right: auto; }
.vk .ft-bot a { color: var(--tx-d-mut); }
.vk .ft-bot a:hover { color: #fff; }

@media (max-width: 1100px) {
  .ft-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ft-konum { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px 28px; align-items: end; }
  .ft-adres { margin-top: 0; }
}
@media (max-width: 900px) {
  .ft-kp { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kp-giris h2 { max-width: 24ch; }
}
@media (max-width: 620px) {
  .kp-kanal { grid-template-columns: minmax(0, 1fr) 18px; gap: 7px 16px; min-height: 0; padding-block: 20px; }
  .kp-et { grid-column: 1; }
  .kp-detay { grid-column: 1; }
  .kp-ok { grid-column: 2; grid-row: 1 / 3; }
  .ft-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ft-konum { display: block; }
  .ft-adres { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-harita-ort, .ft-harita-ort span, .kp-kanal, .kp-ok { transition: none; }
}

/* ---------- 20. Çerez bildirimi -------------------------------------- */
.cookie {
  position: fixed; right: 30px; bottom: 30px; z-index: 90; max-width: 380px;
  background: var(--ink-600); color: #fff; border-radius: 6px; padding: 22px;
  border: 1px solid var(--hair-d); box-shadow: 0 15px 40px rgba(0,0,0,.35);
  transform: translateY(24px); opacity: 0; visibility: hidden;
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.cookie.is-on { transform: none; opacity: 1; visibility: visible; }
.cookie p { font-size: 13.5px; line-height: 1.6; color: var(--tx-d); margin-top: 12px; }
.cookie-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.cookie-btns button { border-radius: 3px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cookie-yes { background: var(--red); color: #fff; border: 1px solid var(--red); }
.cookie-yes:hover { background: var(--red-deep); }
.cookie-no { background: transparent; color: var(--tx-d-mut); border: 1px solid var(--hair-d2); }
.cookie-no:hover { color: #fff; border-color: var(--tx-d-mut); }

/* ---------- 21. Görünüme giriş animasyonu ---------------------------- */
.vk-reveal { opacity: 0; transform: translateY(20px); }
.vk-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.vk-reveal.d1.is-in { transition-delay: .08s; }
.vk-reveal.d2.is-in { transition-delay: .16s; }
.vk-reveal.d3.is-in { transition-delay: .24s; }
/* JS yoksa hiçbir şey gizli kalmasın */
.no-js .vk-reveal { opacity: 1; transform: none; }

/* ==========================================================================
   22. Duyarlı davranış
   ========================================================================== */

/* Geniş ekranlar. 1280px'lik kap 2K ve 4K'da içeriği ortada küçük bir ada
   gibi bırakıyor, bina kesiti de genişliğe bağlı olduğu için büyüyemiyordu.
   Kap kademeli açılıyor; metin ölçüleri kendi max-width'leriyle korunuyor. */
@media (min-width: 1700px) {
  .vk { --wrap: 1560px; }
}
@media (min-width: 2300px) {
  .vk { --wrap: 1760px; }
  .ilk-isaret { font-size: 12px; }
}

@media (max-width: 1180px) {
  .vk { --gut: 48px; }
  .ilk-in { gap: 40px; }
  .mega-in { grid-template-columns: 1fr 1fr 1fr; }
  .mega-card { grid-column: 1 / -1; }
  .svc { grid-template-columns: 260px 1fr; gap: 40px; }
}

@media (max-width: 1000px) {
  /* masaüstü menüsü kapanır, mobil çekmece açılır */
  .burger { display: flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-800); border-bottom: 1px solid var(--hair-d);
    padding: 12px var(--gut) 24px;
    max-height: calc(100vh - var(--hdr-h)); overflow-y: auto;
    box-shadow: 0 32px 64px rgba(0,0,0,.5);
  }
  .nav.is-open { display: flex; }
  .nav-btn { justify-content: space-between; width: 100%; border-bottom: 1px solid var(--hair-d); border-radius: 0; }
  .mega { position: static; box-shadow: none; border-bottom: 0; background: transparent; animation: none; }
  /* Statik konumda kapalı panel görünmez olsa da yer kaplıyordu: header
     telefonda 2.600px+ uzayıp sayfayı siyah blokla örtüyordu. */
  .mega:not(.is-open) { display: none; }
  .mega-in { grid-template-columns: 1fr; gap: 24px; padding: 16px 0 20px; }
  .mega-card { grid-column: auto; }
  .mega-r { position: absolute; right: 16px; left: 16px; width: auto; }

  .hdr-portal-btn { display: none; }
  .nav-portal-mobil { display: inline-flex; margin-top: 16px; width: 100%; }

  /* Dar ekranda bina alta geçiyor, şerit tek sütuna iniyor. */
  .ilk { min-height: 0; }
  .ilk-in { grid-template-columns: 1fr; gap: 32px; }
  /* Bölüm ızgarası dar ekranda tek sütuna iniyor, başlık sabitlenmiyor. */
  .sec-grid { grid-template-columns: 1fr; gap: 28px; }
  .sec-yan { position: static; }
  .cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ilk-bina svg { max-height: 52vh; }
  .ilk-isaretler { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .ilk-isaret { min-height: 44px; }


  .svc { grid-template-columns: 1fr; gap: 32px; }
  .svc-tabs { flex-direction: row; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--hair-d); -webkit-overflow-scrolling: touch; }
  .svc-tab { width: auto; flex-shrink: 0; border-bottom: 2px solid transparent; padding: 14px 18px; }
  /* Yatay sekme şeridinde kayma efekti anlamsız — kapatıyoruz. */
  .svc-tab:hover .svc-tab-in,
  .svc-tab[aria-selected="true"] .svc-tab-in { transform: none; }
  .svc-tab[aria-selected="true"] { border-bottom-color: var(--red); }
  .svc-tab .no { display: none; }
  .svc-grid { grid-template-columns: 1fr 1fr; }

  .c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-grid { grid-template-columns: 1fr; }
  .brand-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .vk { --gut: 20px; --hdr-h: 72px; }
  .util-in { justify-content: center; padding-block: 8px; }
  .util-item:nth-child(n+2), .util-l:last-child { display: none; }
  .util-l:first-child { justify-content: center; }


  .sec-pad { padding: 64px 0 68px; }
  .sec-pad-sm { padding: 56px 0 60px; }
  .ilk-in { gap: 28px; }
  .lede, .lede-l { font-size: 16.5px; }


  .svc-grid { grid-template-columns: 1fr; }
  .c2, .c3, .c4 { grid-template-columns: 1fr; }

  .pl-body { grid-template-columns: 1fr; }
  .pl-side { border-left: 0; border-top: 1px solid var(--hair-d); padding: 28px 24px 32px; }

  .ref-grid { grid-template-columns: 1fr 1fr; }
  .ref { min-height: 78px; font-size: 13px; padding: 18px 16px; }
  .brand-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ft-about { max-width: none; }
  .ft-bot { justify-content: center; text-align: center; }

  .cookie { right: 12px; left: 12px; bottom: 12px; max-width: none; }

  .ilk-cta .btn, .svc-cta .btn { flex: 1 1 100%; }

  /* Dokunma hedefleri: bağımsız bağlantılar parmakla rahat tutulsun. */
  .arrow-link { min-height: 44px; }
  .ft-list :where(a) { padding-block: 7px; }
  .ct :where(a) { display: inline-block; padding-block: 5px; }
}

/* ---------- 23. Erişilebilirlik & baskı ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .vk *,
  .vk *::before,
  .vk *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .vk-reveal { opacity: 1; transform: none; }
}

@media print {
  .util, .hdr, .scrim, .cookie, .ct-glow, .ilk::before { display: none !important; }
  body.vk { background: #fff; color: #000; }
  .sec-d, .ft { background: #fff !important; color: #000 !important; }
  .h1, .h2 { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hz-gor img { transition: none; }
  .hz-sat:hover .hz-gor img { transform: none; }
}