/* Demo Kurumsal — siteye ÖZEL tasarım katmanı.
   İskeletin nötr varsayılanının ÜZERİNE gelir (assets sırası: iskelet → site).
   Tasarım dili: sıcak nötr kâğıt zemin, derin teal, ince çizgiler, editöryel
   tipografi. Gradyan/gölge yığını YOK — sakin ve kurumsal.
   DESIGN.md: mor yasak · min font-weight 500 · coarse pointer 44px · CLS=0. */

:root {
  --d-kagit: #fbfaf8;
  --d-kagit-2: #f3f1ed;
  --d-murekkep: #14181c;
  --d-murekkep-2: #4a545c;
  --d-teal: #0d6b63;
  --d-teal-koyu: #0a544d;
  --d-bakir: #c8763a;
  --d-cizgi: #e4e0d9;
  --d-kap: 1180px;
  --d-bosluk: clamp(64px, 9vw, 128px);
}

body.ki-govde {
  background: var(--d-kagit);
  color: var(--d-murekkep);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* hidden DEĞİL — sticky'yi öldürür */
}

.ki-kap { width: 100%; max-width: var(--d-kap); margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px); }

/* ── Üst bilgi: ince, sabit, çizgiyle ayrılan ── */
.ki-ustbilgi {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--d-kagit) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid var(--d-cizgi);
  padding-block: 14px;
  padding-inline-start: env(safe-area-inset-left);
  padding-inline-end: env(safe-area-inset-right);
}
.ki-ustbilgi-ic { display: flex; align-items: center; gap: 20px; }
.ki-marka { text-decoration: none; display: flex; align-items: center; min-height: 44px; }
.ki-marka-ad {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--d-murekkep);
}
/* Marka altındaki ince bakır çizgi — imza detayı */
.ki-marka-ad::after {
  content: ""; display: block; width: 26px; height: 2px;
  background: var(--d-bakir); margin-block-start: 4px;
}
.ki-menu { margin-inline-start: auto; }
.ki-menu-liste { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ki-menu-oge > a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px;
  font-size: 15px; font-weight: 600; color: var(--d-murekkep-2); text-decoration: none;
  border-radius: 3px;
}
.ki-menu-oge > a:hover { color: var(--d-teal); background: var(--d-kagit-2); }
.ki-menu-oge > a[aria-current="page"] { color: var(--d-teal); }

.ki-menu-dugme {
  display: none; margin-inline-start: auto;
  width: 44px; height: 44px; border: 1px solid var(--d-cizgi); border-radius: 3px;
  background: transparent; cursor: pointer; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
.ki-menu-cizgi { display: block; width: 18px; height: 1.5px; background: var(--d-murekkep); }

@media (max-width: 860px) {
  .ki-menu-dugme { display: flex; }
  .ki-menu {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    background: var(--d-kagit); border-block-end: 1px solid var(--d-cizgi);
    padding: 8px clamp(20px, 5vw, 48px) calc(16px + env(safe-area-inset-bottom));
  }
  .ki-menu.acik { display: block; }
  .ki-menu-liste { flex-direction: column; gap: 0; }
  .ki-menu-oge > a { min-height: 52px; width: 100%; font-size: 17px; }
}

/* ── Hero: asimetrik, editöryel ── */
.ki-hero {
  padding-block: clamp(56px, 8vw, 104px) var(--d-bosluk);
  border-block-end: 1px solid var(--d-cizgi);
}
.ki-hero .ki-kap { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.ki-hero-gorselli .ki-kap { grid-template-columns: 1fr; }
@media (min-width: 920px) {
  .ki-hero-gorselli .ki-kap { grid-template-columns: 1.05fr .95fr; }
}
/* Görsel yoksa hero tek sütun kalır ama metin sonsuz genişlemez */
.ki-hero:not(.ki-hero-gorselli) .ki-kap { max-width: 900px; margin-inline: auto; }
.ki-hero-baslik {
  font-size: clamp(34px, 5.6vw, 62px); font-weight: 700; line-height: 1.06;
  letter-spacing: -.028em; margin: 0 0 20px; max-width: 15ch;
}
.ki-hero-alt {
  font-size: clamp(17px, 2vw, 20px); font-weight: 500; line-height: 1.6;
  color: var(--d-murekkep-2); max-width: 46ch; margin: 0 0 32px;
}
/* Başlık üstü göz kırpması */
.ki-hero .ki-kap > div:first-child::before {
  content: "KURUMSAL ÇÖZÜMLER";
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--d-bakir); margin-block-end: 18px;
}
.ki-hero-gorsel-kap img, .ki-hero-gorsel-kap picture {
  width: 100%; height: auto; border-radius: 3px; display: block;
}
.ki-hero-gorsel-kap { position: relative; }
/* Görselin arkasında hafif kayık bir teal blok — derinlik, gölge kullanmadan */
.ki-hero-gorsel-kap::before {
  content: ""; position: absolute; inset-block-start: 18px; inset-inline-start: -18px;
  width: 100%; height: 100%; border: 1px solid var(--d-teal); opacity: .35;
  border-radius: 3px; pointer-events: none;
}

/* ── Düğmeler ── */
.ki-dugme, .ki-btn, a.ki-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  background: var(--d-murekkep); color: var(--d-kagit);
  font-size: 16px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--d-murekkep); border-radius: 3px;
}
.ki-dugme:hover, .ki-btn:hover, a.ki-cta:hover { background: var(--d-teal); border-color: var(--d-teal); }

/* ── Bölümler ── */
.ki-bolum { padding-block: var(--d-bosluk); }
.ki-bolum + .ki-bolum { border-block-start: 1px solid var(--d-cizgi); }
.ki-bolum-baslik, .ki-sayfa-baslik {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 700;
  letter-spacing: -.022em; line-height: 1.14; margin: 0 0 18px; max-width: 20ch;
}
.ki-bolum-alt { font-size: 17px; font-weight: 500; color: var(--d-murekkep-2); max-width: 56ch; }

/* ── Özellik ızgarası: KUTU DEĞİL, çizgiyle ayrılmış sütunlar ──
   İskelet .ki-kart'ı kutu olarak çiziyor; burada kutuyu kaldırıp editöryel
   bir ızgaraya çeviriyoruz. Sınıf adları İSKELETİN ürettikleri olmak zorunda
   (.ki-izgara / .ki-kart) — kendi uydurduğum adlar hiçbir şeyi seçmez. */
.ki-ozellik-blok .ki-izgara {
  display: grid; gap: 0; margin-block-start: clamp(36px, 5vw, 60px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  border-block-start: 1px solid var(--d-cizgi);
  list-style: none; padding: 0;
}
.ki-ozellik-blok .ki-kart {
  background: transparent; border: 0; border-radius: 0;
  border-block-end: 1px solid var(--d-cizgi);
  padding: 30px 0; gap: 8px;
}
@media (min-width: 720px) {
  .ki-ozellik-blok .ki-kart {
    border-inline-end: 1px solid var(--d-cizgi); padding-inline: 28px;
  }
  .ki-ozellik-blok .ki-kart:first-child { padding-inline-start: 0; }
  .ki-ozellik-blok .ki-kart:last-child { border-inline-end: 0; }
}
.ki-ozellik-blok .ki-kart-baslik {
  font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 0;
}
/* Başlık üstünde ince bakır işaret — kutusuz ızgarada ritim kurar */
.ki-ozellik-blok .ki-kart-baslik::before {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--d-bakir); margin-block-end: 12px;
}
.ki-ozellik-blok .ki-kart-metin {
  font-size: 15px; font-weight: 500; color: var(--d-murekkep-2); line-height: 1.68; margin: 0;
}
.ki-bolum-aciklama { font-size: 17px; font-weight: 500; color: var(--d-murekkep-2); max-width: 56ch; }

/* ── Metin blokları ── */
/* Metin bloğu: İSKELETİN yapısı `.ki-richtext > .ki-kap.ki-dar > .ki-metin`.
   Sınıfı doğru hedeflemek şart — .ki-richtext'e max-width vermek dış kabı
   daraltmıyordu, metin solda sıkışıp sağda boşluk denizi kalıyordu.
   (Ekrana BAKARAK görüldü; otomatik denetim bunu yakalayamaz.) */
.ki-richtext .ki-dar { max-width: 780px; margin-inline: auto; }
.ki-richtext .ki-metin { font-size: 17.5px; line-height: 1.78; }
.ki-richtext .ki-metin > *:first-child { margin-block-start: 0; }
.ki-richtext .ki-metin h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 42px 0 14px; letter-spacing: -.018em; }
.ki-richtext .ki-metin h3 { font-size: 20px; font-weight: 700; margin: 32px 0 10px; }
.ki-richtext .ki-metin p { margin: 0 0 20px; }
.ki-richtext .ki-metin strong { font-weight: 700; }
.ki-richtext a { color: var(--d-teal); text-underline-offset: 3px; }

/* ── Görsel bloğu ── */
.ki-gorsel-blok img, .ki-gorsel-blok picture { width: 100%; height: auto; border-radius: 3px; display: block; }
.ki-gorsel-aciklama { font-size: 14px; font-weight: 500; color: var(--d-murekkep-3, #7c8791); margin-block-start: 12px; }

/* ── CTA şerit ──
   ⚠️ Koyu zemini .ki-cta-serit'e vermek YETMEZ: iskelet iç kutuya
   (.ki-cta-ic) AÇIK zemin veriyor → koyu üstüne koyu metin, okunmaz.
   Bunu ancak ekrana BAKARAK gördüm; kontrast denetimi hesaplanan renkleri
   ayrı ayrı doğru bulmuştu. Zemin İÇ KUTUDA olmalı. */
.ki-cta-serit { padding-block: 0 var(--d-bosluk); }
.ki-cta-serit .ki-cta-ic {
  background: var(--d-murekkep); border: 0; border-radius: 3px;
  padding: clamp(36px, 5vw, 56px);
  align-items: center;
}
.ki-cta-serit .ki-cta-baslik { color: var(--d-kagit); letter-spacing: -.02em; margin: 0; }
.ki-cta-serit .ki-cta-aciklama { color: #cfd4d8; margin-block-start: 10px; max-width: 52ch; }
.ki-cta-serit .ki-dugme {
  background: var(--d-kagit); color: var(--d-murekkep); border-color: var(--d-kagit);
}
.ki-cta-serit .ki-dugme:hover { background: var(--d-bakir); border-color: var(--d-bakir); color: #fff; }

/* ── İletişim formu ── */
.ki-form { display: grid; gap: 18px; max-width: 560px; margin-block-start: 32px; }
.ki-form label { display: block; font-size: 14px; font-weight: 600; margin-block-end: 6px; }
.ki-form input, .ki-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 500 16px/1.5 inherit; /* 16px: iOS odakta zoom yapmasın */
  background: #fff; color: var(--d-murekkep);
  border: 1px solid var(--d-cizgi); border-radius: 3px;
}
.ki-form input:focus, .ki-form textarea:focus {
  outline: none; border-color: var(--d-teal); box-shadow: 0 0 0 3px rgba(13,107,99,.16);
}
.ki-form textarea { min-height: 130px; resize: vertical; }

/* ── Alt bilgi ── */
.ki-altbilgi {
  border-block-start: 1px solid var(--d-cizgi); background: var(--d-kagit-2);
  padding-block: clamp(40px, 5vw, 64px) calc(28px + env(safe-area-inset-bottom));
  font-size: 15px; color: var(--d-murekkep-2);
}
.ki-altbilgi a { color: var(--d-murekkep-2); text-decoration: none; }
.ki-altbilgi a:hover { color: var(--d-teal); }

/* ── Atla bağlantısı ── */
.ki-atla {
  position: absolute; inset-inline-start: -9999px;
  background: var(--d-murekkep); color: var(--d-kagit); padding: 12px 18px; z-index: 100;
}
.ki-atla:focus { inset-inline-start: 12px; inset-block-start: 12px; }

@media (pointer: coarse) {
  .ki-dugme, .ki-btn, a.ki-cta, .ki-menu-oge > a { min-height: 48px; }
  .ki-form input, .ki-form textarea { min-height: 48px; }
}