/* ==========================================================================
   Kandemir Mimarlık — Kurumsal Tema
   Bootstrap 5 üzerine özel katman
   --------------------------------------------------------------------------
   Tasarım ilkeleri
   • Sakin hareket: uzun, tek yönlü geçişler; süsleme amaçlı animasyon yok
   • Dikey görsel disiplini: tüm görseller portre oranlı, aspect-ratio ile sabit
   • Ölçülü vurgu: bronz yalnızca hiyerarşi kurmak için, geniş alanlarda değil
   • Çizgi ağırlıklı ayrım: gölge yerine ince kenarlıklar
   ========================================================================== */

:root {
  /* Koyu tonlar */
  --kn-ink: #14181c;
  --kn-ink-2: #1b2126;
  --kn-ink-3: #242b31;

  /* Vurgu */
  --kn-accent: #a8814a;
  --kn-accent-soft: #c6a577;
  --kn-accent-tint: rgba(168, 129, 74, .1);

  /* Nötr */
  --kn-text: #454b52;
  --kn-muted: #79818a;
  --kn-line: #e3dfd8;
  --kn-line-dark: rgba(255, 255, 255, .1);
  --kn-surface: #f7f5f2;

  /* Tipografi */
  --kn-font-head: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kn-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Hareket */
  --kn-ease: cubic-bezier(.22, .61, .36, 1);

  /* Geriye dönük uyumluluk için eski değişken adları */
  --kn-dark: var(--kn-ink);
  --kn-dark-2: var(--kn-ink-2);
  --kn-dark-3: var(--kn-ink-3);
  --kn-gold: var(--kn-accent-soft);
  --kn-gold-2: var(--kn-accent);
  --kn-light: var(--kn-surface);
  --kn-body: var(--kn-text);
  --kn-shadow: 0 16px 40px rgba(20, 24, 28, .09);
}

/* ---------- Temel ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--kn-font-body);
  color: var(--kn-text);
  background: #fff;
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .kn-head {
  font-family: var(--kn-font-head);
  color: var(--kn-ink);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.24;
}

a { text-decoration: none; transition: color .3s var(--kn-ease); }
img { max-width: 100%; height: auto; }
::selection { background: var(--kn-accent); color: #fff; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--kn-accent);
  outline-offset: 3px;
  box-shadow: none;
}

.kn-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--kn-ink);
  color: #fff;
  padding: .75rem 1.25rem;
}
.kn-skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

/* ---------- Düzen yardımcıları ---------- */
.kn-bg-dark { background: var(--kn-ink) !important; }
.kn-bg-light { background: var(--kn-surface) !important; }
.kn-section { padding: 7rem 0; }
.kn-section-sm { padding: 4.5rem 0; }
.kn-lead { font-size: 1.0625rem; line-height: 1.8; color: var(--kn-text); }


/* Bölüm üst etiketi */
.kn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--kn-font-head);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kn-accent);
  margin-bottom: 1.1rem;
}
.kn-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .65;
}
.kn-eyebrow.text-center::before { display: none; }

.kn-title { font-size: clamp(1.7rem, 3.1vw, 2.5rem); margin-bottom: 1.1rem; }

.kn-on-dark { color: rgba(255, 255, 255, .72); }
.kn-on-dark h1, .kn-on-dark h2, .kn-on-dark h3,
.kn-on-dark h4, .kn-on-dark h5, .kn-on-dark h6 { color: #fff; }
.kn-on-dark .kn-eyebrow { color: var(--kn-accent-soft); }
.kn-on-dark .kn-lead { color: rgba(255, 255, 255, .72); }

.kn-divider {
  width: 48px;
  height: 1px;
  background: var(--kn-accent);
  border: 0;
  opacity: 1;
  margin: 1.75rem 0;
}
.kn-divider.mx-auto { margin-left: auto; margin-right: auto; }

/* Görsel oran kutuları — tüm fotoğraflar portre olduğu için varsayılan 3:4 */
.kn-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--kn-ink-2);
  aspect-ratio: 3 / 4;
}
.kn-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kn-media-11 { aspect-ratio: 1 / 1; }
.kn-media-23 { aspect-ratio: 2 / 3; }
.kn-media-45 { aspect-ratio: 4 / 5; }
.kn-media-32 { aspect-ratio: 3 / 2; }

/* ---------- Butonlar ---------- */
.btn {
  --bs-btn-border-radius: 0;
  font-family: var(--kn-font-head);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .05em;
  border-radius: 0;
  padding: .85rem 1.9rem;
  border-width: 1px;
  transition: background-color .3s var(--kn-ease), border-color .3s var(--kn-ease), color .3s var(--kn-ease);
}
.btn-kn {
  background: var(--kn-accent);
  border-color: var(--kn-accent);
  color: #fff;
}
.btn-kn:hover, .btn-kn:focus { background: #8f6c3b; border-color: #8f6c3b; color: #fff; }

.btn-kn-dark {
  background: var(--kn-ink);
  border-color: var(--kn-ink);
  color: #fff;
}
.btn-kn-dark:hover, .btn-kn-dark:focus { background: var(--kn-accent); border-color: var(--kn-accent); color: #fff; }

.btn-kn-outline {
  background: transparent;
  border-color: var(--kn-ink);
  color: var(--kn-ink);
}
.btn-kn-outline:hover, .btn-kn-outline:focus { background: var(--kn-ink); color: #fff; }

.btn-kn-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.btn-kn-light:hover, .btn-kn-light:focus { background: #fff; border-color: #fff; color: var(--kn-ink); }

/* Metin bağlantısı */
.kn-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--kn-font-head);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kn-accent);
}
.kn-more i { transition: transform .3s var(--kn-ease); }
.kn-more:hover { color: var(--kn-ink); }
.kn-more:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Üst şerit — açık zemin
   Metin rengi --kn-muted değil --kn-text: muted bu zeminde 4.0:1 kalıyor,
   12–13 px boyutunda AA eşiği olan 4.5:1'in altına düşüyordu.
   -------------------------------------------------------------------------- */
.kn-topbar {
  background: var(--kn-surface);
  color: var(--kn-text);
  font-size: .82rem;
  border-bottom: 1px solid var(--kn-line);
}
.kn-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
}
.kn-topbar a { color: var(--kn-text); }
.kn-topbar a:hover { color: var(--kn-accent); }
.kn-topbar i { color: var(--kn-accent); margin-right: .5rem; }

.kn-topbar-addr { margin: 0; }
.kn-topbar-right { display: flex; align-items: center; gap: 1.25rem; }
.kn-topbar-sep {
  width: 1px;
  height: 14px;
  background: var(--kn-line);
}
.kn-topbar-social { display: flex; gap: .35rem; margin-left: .5rem; }
.kn-topbar-social a {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--kn-line);
  color: var(--kn-text);
}
.kn-topbar-social a i { margin: 0; }
.kn-topbar-social a:hover {
  background: var(--kn-accent);
  border-color: var(--kn-accent);
  color: #fff;
}
.kn-topbar-social a:hover i { color: #fff; }

/* --------------------------------------------------------------------------
   Navbar — beyaz zemin
   Logo renkli (kırmızı + bronz) olduğu için koyu zemin yerine beyaz
   kullanılır; logonun kendi renkleri bozulmadan okunur. Marka metni
   ayrıca yazılmaz, logo görselinin içinde zaten bulunuyor.
   -------------------------------------------------------------------------- */
.kn-navbar {
  background: #fff;
  padding: .7rem 0;
  border-bottom: 1px solid var(--kn-line);
  transition: padding .3s var(--kn-ease), box-shadow .3s var(--kn-ease);
}
.kn-navbar.kn-scrolled {
  padding: .35rem 0;
  box-shadow: 0 8px 28px rgba(20, 24, 28, .08);
}

/* Logo 266x160 (≈1.66:1) saydam PNG. Sabit kare ölçü + object-fit:cover
   kullanılmaz; öyle olsa logonun sağı ve solu kırpılırdı. Yükseklik
   sabitlenir, genişlik kendi oranından gelir. */
.kn-navbar .navbar-brand { display: flex; align-items: center; padding: 0; }
.kn-navbar .navbar-brand img {
  width: auto;
  height: 58px;
  transition: height .3s var(--kn-ease);
}
.kn-navbar.kn-scrolled .navbar-brand img { height: 48px; }

.kn-navbar .navbar-nav .nav-link {
  font-family: var(--kn-font-head);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--kn-text);
  padding: .6rem .9rem;
  position: relative;
}
.kn-navbar .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .15rem;
  height: 2px;
  background: var(--kn-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--kn-ease);
}
.kn-navbar .navbar-nav .nav-link:hover,
.kn-navbar .navbar-nav .nav-link.active { color: var(--kn-ink); }
.kn-navbar .navbar-nav .nav-link:hover::after,
.kn-navbar .navbar-nav .nav-link.active::after { transform: scaleX(1); }

.kn-nav-cta { margin-left: 1.25rem; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Mobil menü tetikleyicisi — üç çizgi
   Bootstrap'in navbar-toggler'ı yerine kendi düğmemiz: ölçüsü, çizgi
   kalınlığı ve odak halkası tema ile birebir uyumlu olsun diye.
   -------------------------------------------------------------------------- */
.kn-nav-toggle {
  width: 46px;
  height: 46px;
  margin-left: auto;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 5px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--kn-line);
  cursor: pointer;
}
.kn-nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--kn-ink);
  transition: width .3s var(--kn-ease), background-color .3s var(--kn-ease);
}
/* Orta ve alt çizgi kısa: hareketsiz durumda bile grafik bir kimlik verir */
.kn-nav-toggle span:nth-child(2) { width: 15px; }
.kn-nav-toggle:hover { border-color: var(--kn-accent); }
.kn-nav-toggle:hover span { width: 22px; background: var(--kn-accent); }

/* CTA butonu yalnızca menünün sığdığı genişlikte gösterilir. Daha
   darda navbar taşacağı için gizlenir; telefon zaten üst şeritte,
   sabit yan butonda ve footer'da bulunuyor. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .kn-nav-cta { display: none; }
  .kn-navbar .navbar-nav .nav-link { padding: .6rem .7rem; font-size: .86rem; }
}

@media (max-width: 991.98px) {
  .kn-navbar .navbar-brand img { height: 48px; }
}

/* ==========================================================================
   Mobil menü paneli (offcanvas, sağdan sola)
   ========================================================================== */
.kn-mnav {
  width: min(88vw, 400px);
  background: var(--kn-ink);
  color: rgba(255, 255, 255, .72);
  border-left: 1px solid var(--kn-line-dark);
  display: flex;
  flex-direction: column;
}
/* Perde: panel koyu olduğu için perde de daha koyu, ayrım net kalsın */
.offcanvas-backdrop.show { opacity: .6; }

.kn-mnav-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--kn-line-dark);
}
/* Logo beyaz zeminli PNG; koyu panelde okunması için beyaz bir alan üstünde */
.kn-mnav-brand {
  display: inline-flex;
  background: #fff;
  padding: .4rem .6rem;
}
.kn-mnav-brand img { width: auto; height: 40px; display: block; }

.kn-mnav-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--kn-line-dark);
  color: #fff;
  font-size: 1.05rem;
  transition: background-color .3s var(--kn-ease), border-color .3s var(--kn-ease);
}
.kn-mnav-close:hover,
.kn-mnav-close:focus-visible {
  background: var(--kn-accent);
  border-color: var(--kn-accent);
  color: #fff;
}

.kn-mnav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 1.75rem;
}

/* ---------- Menü satırları ---------- */
.kn-mnav-links { list-style: none; margin: 0; padding: 0; }
.kn-mnav-link {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: 1.05rem 1.5rem;
  border-bottom: 1px solid var(--kn-line-dark);
  color: #fff;
  font-family: var(--kn-font-head);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background-color .3s var(--kn-ease), padding-left .3s var(--kn-ease);
}
.kn-mnav-num {
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--kn-accent-soft);
  font-weight: 500;
}
.kn-mnav-text { flex: 1 1 auto; }
.kn-mnav-link i {
  font-size: .8rem;
  color: rgba(255, 255, 255, .3);
  transition: transform .3s var(--kn-ease), color .3s var(--kn-ease);
}
.kn-mnav-link:hover,
.kn-mnav-link:focus-visible {
  color: #fff;
  background: var(--kn-ink-2);
  padding-left: 1.75rem;
}
.kn-mnav-link:hover i,
.kn-mnav-link:focus-visible i {
  color: var(--kn-accent-soft);
  transform: translateX(3px);
}
/* Aktif sayfa: bronz metin yerine bronz çubuk. Bronz koyu zeminde yeterli
   olsa da tutarlılık için masaüstündeki aktif işaretiyle aynı dil. */
.kn-mnav-active {
  background: var(--kn-ink-2);
  box-shadow: inset 3px 0 0 var(--kn-accent);
}
.kn-mnav-active .kn-mnav-text { color: var(--kn-accent-soft); }

/* ---------- İletişim bloğu ---------- */
.kn-mnav-contact { padding: 1.75rem 1.5rem 0; }
.kn-mnav-label {
  display: block;
  font-family: var(--kn-font-head);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .35rem;
}
.kn-mnav-phone {
  display: inline-block;
  font-family: var(--kn-font-head);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}
.kn-mnav-phone:hover { color: var(--kn-accent-soft); }

.kn-mnav-actions {
  display: grid;
  gap: .5rem;
  margin: 1.25rem 0 1.75rem;
}

.kn-mnav-info {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kn-line-dark);
}
.kn-mnav-info > div + div { margin-top: 1.1rem; }
.kn-mnav-info dt {
  font-family: var(--kn-font-head);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .25rem;
}
.kn-mnav-info dd {
  margin: 0;
  font-size: .94rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
  overflow-wrap: anywhere;
}
.kn-mnav-info dd a { color: #fff; }
.kn-mnav-info dd a:hover { color: var(--kn-accent-soft); }

.kn-mnav .kn-social { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--kn-line-dark); }

/* ==========================================================================
   Hero — asimetrik bölünmüş düzen
   Sol koyu metin paneli, sağ tam yüksekliği kaplayan fotoğraf. Kaynak
   fotoğraflar 3:4 portre; grid kolonu kendi yüksekliğini metin panelinden
   aldığı için görsel object-fit ile kırpılır, oran kutusu kullanılmaz.
   ========================================================================== */
.kn-hero {
  position: relative;
  background: var(--kn-ink);
  color: rgba(255, 255, 255, .72);
}
.kn-hero-grid { display: grid; }

/* Sol panel */
.kn-hero-panel { display: flex; align-items: center; }
/* Yatay dolgu .75rem: Bootstrap container'ının dolgusuyla aynı, böylece
   hero metni hemen altındaki şerit ve bölümlerle aynı hizada başlar. */
.kn-hero-panel-inner {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  padding: 3.25rem .75rem 3.5rem;
}
.kn-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.14;
  margin-bottom: 1.35rem;
}
.kn-hero h1 em { font-style: normal; color: var(--kn-accent-soft); }
.kn-hero-panel-inner > p {
  color: rgba(255, 255, 255, .7);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 2.25rem;
}
.kn-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Panel altındaki üç rakam */
.kn-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kn-line-dark);
}
.kn-hero-stats dt {
  font-family: var(--kn-font-head);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 500;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.kn-hero-stats dd {
  margin: .5rem 0 0;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Sağ görsel kolonu
   Karusel bilinçli olarak akıştan çıkarılır (absolute). Akışta bırakılırsa
   3:4 portre fotoğrafın doğal oranı kolon yüksekliğini belirliyor
   (1440 px'de 720x960) ve object-fit:cover hiç devreye girmiyor; hero
   gereksiz uzuyordu. Absolute ile kolon yüksekliğini metin paneli belirler,
   fotoğraf da o kutuya kırpılarak oturur.
   -------------------------------------------------------------------------- */
.kn-hero-visual {
  position: relative;
  overflow: hidden;
  background: var(--kn-ink-2);
}
/* Tek sabit fotoğraf — görsel döngüsü kullanılmaz: sayfa daha sakin açılır,
   ilk boyama tek görselle tamamlanır. */
.kn-hero-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portre fotoğraflarda ilgi alanı üst yarıda kalıyor */
  object-position: center 35%;
}

/* Görselin sol kenarını panele bağlayan yumuşak geçiş */
.kn-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  z-index: 2;
  background: linear-gradient(to right, var(--kn-ink) 0%, rgba(20, 24, 28, 0) 100%);
  pointer-events: none;
}

.kn-hero-caption {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  z-index: 3;
  margin: 0;
  padding-left: .9rem;
  border-left: 1px solid var(--kn-accent);
}
.kn-hero-caption strong {
  display: block;
  font-family: var(--kn-font-head);
  font-size: .95rem;
  font-weight: 500;
  color: #fff;
}
.kn-hero-caption span { font-size: .85rem; color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------------------
   Masaüstü: iki kolon.
   Sol paneldeki metin, alttaki bölümlerin container hizasına oturmalı.
   Bunun için panel kutusu sağa yaslanır (margin-left:auto) ve genişliği
   container'ın yarısı eksi container yatay dolgusu olarak verilir. 100vw
   kullanılmaz: dikey kaydırma çubuğu 100vw'ye dahil olduğu için hizayı
   birkaç piksel kaydırırdı. Grid kolonu ise gerçek içerik genişliğini alır.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .kn-hero-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .kn-hero-panel-inner {
    margin-left: auto;
    padding: 4rem 3.5rem 4.25rem 0;
    max-width: calc(480px - .75rem);   /* container 960 / 2 */
  }
  .kn-hero-visual { min-height: 560px; }
}
@media (min-width: 1200px) {
  .kn-hero-panel-inner { max-width: calc(570px - .75rem); }  /* container 1140 / 2 */
}
@media (min-width: 1400px) {
  .kn-hero-panel-inner { max-width: calc(660px - .75rem); }  /* container 1320 / 2 */
}
@media (max-width: 991.98px) {
  .kn-hero-panel-inner { max-width: none; margin: 0 auto; }
  .kn-hero-visual { height: 62vw; min-height: 300px; max-height: 460px; }
  .kn-hero-visual::before { display: none; }
}
@media (max-width: 575.98px) {
  .kn-hero-stats { gap: .75rem; }
  .kn-hero-stats dd { font-size: .72rem; letter-spacing: .06em; }
}

/* Hero altı bilgi şeridi */

.kn-strip {
  position: relative;
  z-index: 2;
  background: var(--kn-ink-2);
  border-top: 1px solid var(--kn-line-dark);
}
.kn-strip-item {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.9rem 1.5rem 1.9rem 0;
}
.kn-strip-item i {
  flex: 0 0 auto;
  font-size: 1.35rem;
  color: var(--kn-accent-soft);
  line-height: 1.4;
}
.kn-strip-item strong {
  display: block;
  font-family: var(--kn-font-head);
  font-size: .98rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: .02em;
  margin-bottom: .15rem;
}
.kn-strip-item span { display: block; font-size: .88rem; color: rgba(255, 255, 255, .58); line-height: 1.6; }
@media (min-width: 992px) {
  .kn-strip [class*="col-"]:not(:last-child) .kn-strip-item { border-right: 1px solid var(--kn-line-dark); }
  .kn-strip [class*="col-"]:not(:first-child) .kn-strip-item { padding-left: 2rem; }
}
@media (max-width: 991.98px) {
  .kn-strip [class*="col-"]:not(:last-child) .kn-strip-item { border-bottom: 1px solid var(--kn-line-dark); }
}

/* --------------------------------------------------------------------------
   Alt sayfa başlığı
   Tüm alt sayfalarda tek bir ince koyu şerit: yalnızca konum izi
   (breadcrumb) taşır. Sayfa h1'i ve açıklaması ilk içerik bölümünde,
   .kn-page-intro bloğunda durur. Böylece koyu bant minimumda kalır ve
   hiyerarşi içerik alanında tipografiyle kurulur.
   -------------------------------------------------------------------------- */
.kn-page-head {
  background: var(--kn-ink);
  border-bottom: 1px solid var(--kn-line-dark);
  padding: 1.1rem 0;
}
.kn-page-head .breadcrumb { margin: 0; }
.kn-page-head .breadcrumb-item,
.kn-page-head .breadcrumb-item a { color: rgba(255, 255, 255, .48); font-size: .82rem; }
.kn-page-head .breadcrumb-item a:hover { color: var(--kn-accent-soft); }
.kn-page-head .breadcrumb-item.active { color: rgba(255, 255, 255, .8); }
.kn-page-head .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .26); }


/* Sayfa h1'i ve açıklaması — ilk içerik bölümünün başında */
.kn-page-intro { max-width: 660px; margin-bottom: 3rem; }
.kn-page-intro .kn-title { margin-bottom: 1rem; }
.kn-page-intro > p:last-child { margin-bottom: 0; }
.text-center .kn-page-intro { margin-left: auto; margin-right: auto; }

/* ---------- Görsel düzenleri ---------- */
.kn-frame { position: relative; }
.kn-frame::after {
  content: "";
  position: absolute;
  inset: auto -1.25rem -1.25rem auto;
  width: 55%;
  height: 55%;
  border-right: 1px solid var(--kn-accent);
  border-bottom: 1px solid var(--kn-accent);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}
.kn-frame > .kn-media { z-index: 1; }

/* İkili görsel yığını */
.kn-stack { position: relative; }
.kn-stack .kn-stack-main { width: 82%; }
.kn-stack .kn-stack-sub {
  position: absolute;
  right: 0;
  bottom: -2.5rem;
  width: 46%;
  border: 6px solid #fff;
}
@media (max-width: 991.98px) {
  .kn-stack .kn-stack-main { width: 100%; }
  .kn-stack .kn-stack-sub { position: static; width: 100%; border: 0; margin-top: 1rem; }
}

.kn-exp-badge {
  position: absolute;
  left: 0;
  bottom: 1.75rem;
  z-index: 3;
  background: var(--kn-accent);
  color: #fff;
  padding: 1.15rem 1.4rem;
  text-align: left;
}
.kn-exp-badge strong {
  display: block;
  font-family: var(--kn-font-head);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}
.kn-exp-badge span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .92; }

/* ---------- Listeler ---------- */
.kn-check-list { list-style: none; padding: 0; margin: 0; }
.kn-check-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .6rem;
  color: var(--kn-text);
}
.kn-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-left: 1px solid var(--kn-accent);
  border-bottom: 1px solid var(--kn-accent);
  transform: rotate(-45deg);
}
.kn-on-dark .kn-check-list li { color: rgba(255, 255, 255, .72); }

/* Küçük, aralıklı başlık etiketi */
.kn-label {
  font-family: var(--kn-font-head);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kn-muted);
}

/* Künye tablosu */
.kn-specs { list-style: none; padding: 0; margin: 0; }
.kn-specs li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--kn-line);
  font-size: .92rem;
}
.kn-specs li:last-child { border-bottom: 0; }
.kn-specs .kn-spec-label { color: var(--kn-muted); }
.kn-specs .kn-spec-value {
  font-family: var(--kn-font-head);
  font-weight: 500;
  color: var(--kn-ink);
  text-align: right;
}

/* ---------- Hizmet kartları ---------- */
.kn-service {
  position: relative;
  background: #fff;
  border: 1px solid var(--kn-line);
  padding: 2.35rem 1.9rem;
  height: 100%;
  transition: border-color .35s var(--kn-ease), background-color .35s var(--kn-ease);
}
.kn-service::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--kn-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--kn-ease);
}
.kn-service:hover { border-color: #d5cfc5; }
.kn-service:hover::before { transform: scaleY(1); }
.kn-service-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kn-line);
  color: var(--kn-accent);
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
  transition: border-color .35s var(--kn-ease), color .35s var(--kn-ease);
}
.kn-service:hover .kn-service-icon { border-color: var(--kn-accent); }
/* Kart başlığı: sayfadaki başlık sırasına göre h2 ya da h3 olabilir,
   ikisi de kart ölçeğinde aynı boyda görünür. */
.kn-service h2,
.kn-service h3 { font-size: 1.12rem; margin-bottom: .7rem; }
.kn-service p { font-size: .94rem; margin-bottom: 1rem; color: var(--kn-text); }
.kn-service .kn-check-list li { color: var(--kn-text); font-size: .94rem; }
.kn-service-num {
  position: absolute;
  right: 1.4rem;
  top: 1.4rem;
  font-family: var(--kn-font-head);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--kn-muted);
}
.kn-service.kn-service-dark {
  background: var(--kn-ink-2);
  border-color: var(--kn-line-dark);
}
.kn-service-dark h2,
.kn-service-dark h3 { color: #fff; }
.kn-service-dark p, .kn-service-dark .kn-check-list li { color: rgba(255, 255, 255, .68); }
.kn-service-dark .kn-service-icon { border-color: var(--kn-line-dark); color: var(--kn-accent-soft); }
.kn-service-dark .kn-service-num { color: rgba(255, 255, 255, .38); }
.kn-service-dark:hover { border-color: rgba(255, 255, 255, .2); }

/* ---------- Proje kartları ---------- */
.kn-project {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--kn-ink);
}
.kn-project > img,
.kn-project .kn-media > img {
  transition: transform 1.1s var(--kn-ease);
}
.kn-project::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(20, 24, 28, .9) 0%, rgba(20, 24, 28, .25) 45%, rgba(20, 24, 28, .05) 100%);
  transition: opacity .4s var(--kn-ease);
}
.kn-project:hover > img,
.kn-project:hover .kn-media > img { transform: scale(1.04); }
.kn-project-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.6rem 1.5rem;
}
.kn-project-cat {
  display: block;
  font-family: var(--kn-font-head);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kn-accent-soft);
  margin-bottom: .45rem;
}
.kn-project-body h3 {
  color: #fff;
  font-size: 1.12rem;
  margin: 0;
}
.kn-project-meta {
  color: rgba(255, 255, 255, .62);
  font-size: .86rem;
  margin: .35rem 0 0;
}

/* ==========================================================================
   Portföy sayfası — künye şeridi, süzgeç, proje kartı
   Kayıt sayısı arttıkça bozulmayan bir ızgara için kart yüksekliği içerikle
   değil yapıyla belirlenir: görsel sabit oranlı, gövde flex ile alta yayılır.
   ========================================================================== */

/* Giriş bölümündeki üç haneli künye şeridi */
.kn-pstats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--kn-line);
}
.kn-pstats li { padding: 1.35rem 1rem 0 0; }
.kn-pstats li + li { padding-left: 1rem; border-left: 1px solid var(--kn-line); }
.kn-pstats strong {
  display: block;
  font-family: var(--kn-font-head);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--kn-ink);
}
.kn-pstats span {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--kn-muted);
}

/* Araç şeridi: süzgeç + toplam kayıt */
.kn-ptoolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--kn-line);
}
.kn-ptoolbar-count {
  margin: 0;
  font-family: var(--kn-font-head);
  font-size: .88rem;
  color: var(--kn-muted);
}
.kn-ptoolbar-count i { color: var(--kn-accent); margin-right: .5rem; }
.kn-ptoolbar-count strong { color: var(--kn-ink); font-weight: 500; }

/* Kategori süzgeci */
.kn-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.kn-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  background: #fff;
  border: 1px solid var(--kn-line);
  border-radius: 0;
  font-family: var(--kn-font-head);
  font-size: .86rem;
  color: var(--kn-text);
  cursor: pointer;
  transition: color .3s var(--kn-ease), border-color .3s var(--kn-ease),
              background-color .3s var(--kn-ease);
}
.kn-chip:hover { border-color: var(--kn-accent); color: var(--kn-ink); }
.kn-chip.kn-active {
  background: var(--kn-ink);
  border-color: var(--kn-ink);
  color: #fff;
}
.kn-chip-num {
  font-size: .74rem;
  color: var(--kn-muted);
  letter-spacing: .04em;
}
.kn-chip.kn-active .kn-chip-num { color: rgba(255, 255, 255, .6); }

/* Süzgeç boş döndüğünde */
.kn-pempty {
  margin: 0;
  padding: 3rem 0 0;
  text-align: center;
  color: var(--kn-muted);
}

/* ---------- Proje kartı ----------
   Kart tamamı tek bağlantıdır; iç öğeler <span> olarak kurulduğu için
   geçersiz iç içe bağlantı oluşmaz. */
.kn-pcard { height: 100%; }
.kn-pcard-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--kn-line);
  color: var(--kn-text);
  transition: border-color .35s var(--kn-ease), transform .35s var(--kn-ease);
}
.kn-pcard-link:hover { border-color: var(--kn-accent); transform: translateY(-4px); }

.kn-pcard-media { overflow: hidden; background: var(--kn-ink-2); }
.kn-pcard-media > img { transition: transform 1.1s var(--kn-ease); }
.kn-pcard-link:hover .kn-pcard-media > img { transform: scale(1.05); }

/* Sıra numarası ve kategori etiketi görselin üstünde durur */
.kn-pcard-index {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: .5rem .85rem;
  background: rgba(20, 24, 28, .82);
  font-family: var(--kn-font-head);
  font-size: .78rem;
  letter-spacing: .08em;
  color: #fff;
}
.kn-pcard-cat {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: .45rem .85rem;
  background: var(--kn-accent);
  font-family: var(--kn-font-head);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

.kn-pcard-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.5rem 1.5rem 1.35rem;
}
.kn-pcard-title {
  font-size: 1.18rem;
  margin: 0 0 1rem;
  color: var(--kn-ink);
}
.kn-pcard-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: .86rem;
  color: var(--kn-muted);
}
.kn-pcard-meta li { display: flex; gap: .55rem; }
.kn-pcard-meta li + li { margin-top: .35rem; }
.kn-pcard-meta i { color: var(--kn-accent); line-height: 1.75; }

/* Alta sabitlenen çağrı satırı — kart yükseklikleri eşitlenir */
.kn-pcard-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--kn-line);
  font-family: var(--kn-font-head);
  font-size: .86rem;
  color: var(--kn-ink);
}
.kn-pcard-cta i { color: var(--kn-accent); transition: transform .3s var(--kn-ease); }
.kn-pcard-link:hover .kn-pcard-cta i { transform: translateX(4px); }

/* ---------- Çalışma biçimi adımları ---------- */
.kn-pstep { padding-top: 1.35rem; border-top: 1px solid var(--kn-line); height: 100%; }
.kn-pstep-num {
  display: block;
  font-family: var(--kn-font-head);
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--kn-accent);
  margin-bottom: .6rem;
}
.kn-pstep h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.kn-pstep p { font-size: .92rem; }

/* ---------- Galeri ---------- */
.kn-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--kn-ink-2);
  cursor: zoom-in;
}
.kn-thumb > img { transition: transform 1.1s var(--kn-ease); }
.kn-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 28, .35);
  opacity: 0;
  transition: opacity .35s var(--kn-ease);
  z-index: 1;
}
.kn-thumb::after {
  content: "\F4FE";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  color: #fff;
  font-size: 1.35rem;
  opacity: 0;
  transition: opacity .35s var(--kn-ease), transform .35s var(--kn-ease);
  z-index: 2;
}
.kn-thumb:hover > img { transform: scale(1.05); }
.kn-thumb:hover::before { opacity: 1; }
.kn-thumb:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Sayaçlar ---------- */
.kn-counter { padding: 1.5rem 0; }
.kn-counter strong {
  display: block;
  font-family: var(--kn-font-head);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 500;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.kn-counter span {
  display: block;
  margin-top: .7rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
@media (min-width: 768px) {
  .kn-counters [class*="col-"]:not(:last-child) .kn-counter { border-right: 1px solid var(--kn-line-dark); }
  .kn-counters [class*="col-"]:not(:first-child) .kn-counter { padding-left: 2rem; }
}

/* ---------- Video ---------- */
.kn-video-band {
  position: relative;
  background: var(--kn-ink);
  overflow: hidden;
}
/* Görsel kolonu, yanındaki metin kolonunun yüksekliğini alır.
   Tek kolona düştüğünde min-height devreye girer. */
.kn-video-band-media {
  position: relative;
  overflow: hidden;
  background: var(--kn-ink-2);
  height: 100%;
  min-height: 320px;
}
.kn-video-band-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kn-video-band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(20, 24, 28, .55), rgba(20, 24, 28, .15));
}
.kn-play {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kn-accent);
  color: #fff;
  font-size: 1.5rem;
  border: 0;
  transition: background-color .3s var(--kn-ease), transform .3s var(--kn-ease);
}
.kn-play:hover { background: #fff; color: var(--kn-ink); }
.kn-play-inline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.kn-video-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--kn-ink-2);
  overflow: hidden;
  text-align: left;
}
.kn-video-card > img,
.kn-video-card .kn-media > img { opacity: .78; transition: opacity .4s var(--kn-ease), transform 1.1s var(--kn-ease); }
.kn-video-card:hover > img,
.kn-video-card:hover .kn-media > img { opacity: 1; transform: scale(1.04); }
.kn-video-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(168, 129, 74, .95);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  z-index: 3;
  transition: background-color .3s var(--kn-ease);
}
.kn-video-card:hover .kn-video-icon { background: #fff; color: var(--kn-ink); }
.kn-video-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 2.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(20, 24, 28, .9), transparent);
  color: #fff;
  font-family: var(--kn-font-head);
  font-size: .92rem;
  letter-spacing: .02em;
}

/* ---------- Sayfalama ----------
   Düğmeler JavaScript ile yazılır; nav boşsa görünür bir iz bırakmaz. */
.kn-pager { margin-top: 3rem; }
.kn-pager:empty { display: none; }
.kn-pager-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kn-pager-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 .8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--kn-line);
  color: var(--kn-text);
  font-family: var(--kn-font-head);
  font-size: .92rem;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background-color .3s var(--kn-ease), border-color .3s var(--kn-ease), color .3s var(--kn-ease);
}
.kn-pager-btn:hover:not(:disabled) { border-color: var(--kn-accent); color: var(--kn-ink); }
.kn-pager-btn[aria-current="page"] {
  background: var(--kn-accent);
  border-color: var(--kn-accent);
  color: #fff;
}
.kn-pager-btn:disabled { opacity: .35; cursor: default; }
.kn-pager-gap { border-color: transparent; background: transparent; }
.kn-pager-info {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .84rem;
  color: var(--kn-muted);
}

/* ---------- Süreç adımları ---------- */
.kn-step { position: relative; padding-top: 1.75rem; border-top: 1px solid var(--kn-line); }
.kn-step-num {
  font-family: var(--kn-font-head);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--kn-accent);
  display: block;
  margin-bottom: .9rem;
}
.kn-step h3 { font-size: 1.08rem; margin-bottom: .55rem; }
.kn-step p { font-size: .93rem; margin: 0; }
.kn-on-dark .kn-step { border-top-color: var(--kn-line-dark); }
.kn-on-dark .kn-step p { color: rgba(255, 255, 255, .65); }

/* ---------- Referanslar ---------- */
.kn-quote {
  background: #fff;
  border: 1px solid var(--kn-line);
  padding: 2.2rem 1.9rem;
  height: 100%;
}
.kn-quote-mark {
  font-family: var(--kn-font-head);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--kn-accent);
  opacity: .5;
  display: block;
  margin-bottom: .5rem;
}
.kn-quote p { margin: 0 0 1.6rem; font-size: .98rem; }
.kn-quote-author { display: flex; align-items: center; gap: .85rem; padding-top: 1.3rem; border-top: 1px solid var(--kn-line); }
.kn-quote-author .kn-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: var(--kn-surface);
  color: var(--kn-accent);
  display: grid;
  place-items: center;
  font-family: var(--kn-font-head);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.kn-quote-author strong { display: block; font-family: var(--kn-font-head); font-weight: 500; color: var(--kn-ink); font-size: .95rem; }
.kn-quote-author span { font-size: .82rem; color: var(--kn-muted); }

/* ---------- İletişim ---------- */
.kn-contact-card {
  background: #fff;
  border: 1px solid var(--kn-line);
  padding: 2rem 1.6rem;
  height: 100%;
  transition: border-color .35s var(--kn-ease);
}
.kn-contact-card:hover { border-color: var(--kn-accent); }
.kn-contact-card i {
  font-size: 1.3rem;
  color: var(--kn-accent);
  display: block;
  margin-bottom: 1.1rem;
}
.kn-contact-card h3 {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kn-muted);
  margin-bottom: .6rem;
}
.kn-contact-card p { margin: 0; font-size: .96rem; color: var(--kn-text); }
.kn-contact-card a { color: var(--kn-ink); }
.kn-contact-card a:hover { color: var(--kn-accent); }

.kn-form .form-control,
.kn-form .form-select {
  border-radius: 0;
  border: 1px solid var(--kn-line);
  padding: .8rem 1rem;
  font-size: .95rem;
  background: #fff;
  color: var(--kn-ink);
}
.kn-form .form-control:focus,
.kn-form .form-select:focus {
  border-color: var(--kn-accent);
  box-shadow: 0 0 0 3px var(--kn-accent-tint);
}
.kn-form .form-label {
  font-family: var(--kn-font-head);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kn-muted);
  margin-bottom: .45rem;
}

/* Koyu iletişim paneli */
.kn-info-panel {
  background: var(--kn-ink);
  color: rgba(255, 255, 255, .7);
  padding: 2.25rem 1.75rem;
}
@media (min-width: 992px) { .kn-info-panel { padding: 2.75rem 2.5rem; } }
.kn-info-panel h2, .kn-info-panel h3 { color: #fff; }
.kn-info-panel .kn-eyebrow { color: var(--kn-accent-soft); }

/* Etiket / değer çiftleri anlamsal olarak <dl> ile kurulur; ikon yerine
   yalnızca tipografi kullanılır (sade kurumsal görünüm). */
.kn-info-list { margin: 0; padding: 0; }
.kn-info-item {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--kn-line-dark);
}
.kn-info-item:last-child { border-bottom: 0; padding-bottom: 0; }
.kn-info-label {
  display: block;
  font-family: var(--kn-font-head);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* .42 opaklık koyu zeminde 4.0:1 veriyordu; ikonlar kaldırıldığı için
     anlamı artık yalnızca bu etiket taşıyor, AA eşiğine çıkarıldı. */
  color: rgba(255, 255, 255, .55);
  margin-bottom: .3rem;
}
/* dd olduğu için Bootstrap'in alt boşluğu sıfırlanır */
.kn-info-value {
  display: block;
  margin: 0;
  color: #fff;
  font-size: .98rem;
  line-height: 1.7;
}
.kn-info-value a { color: #fff; }
.kn-info-value a:hover { color: var(--kn-accent-soft); }

/* Değerin altına düşen ikincil bağlantı (örn. yol tarifi) */
.kn-info-link {
  display: inline-block;
  margin-top: .45rem;
  font-family: var(--kn-font-head);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kn-accent-soft);
}
.kn-info-link:hover { color: #fff; }

/* Form kartı
   height: 100% bilinçli olarak kullanılmaz. Kart, içinde giriş bloğuyla
   birlikte duran bir kolonun çocuğu; yüzde yükseklik kolon yüksekliğine
   çözülüp kartı kardeşi kadar aşağı taşırdı (kart bölümün dışına çıkıp
   footer'a yapışıyordu). Yükseklik içerikten gelir. */
.kn-form-card {
  background: #fff;
  border: 1px solid var(--kn-line);
  padding: 2rem 1.75rem;
}
@media (min-width: 992px) { .kn-form-card { padding: 2.75rem 2.5rem; } }


/* ---------- İletişim sayfası ---------- */

/* Koyu panelin sessiz başlığı — belge hiyerarşisinde h2 olarak durur ama
   görsel olarak öne çıkmaz. */
.kn-panel-title {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1.75rem;
}

/* Zorunluluk yıldızı kullanılmaz; yalnızca isteğe bağlı alan işaretlenir.
   Tek istisnayı etiketlemek, her alana yıldız koymaktan daha sakin. */
/* Renk --kn-muted değil --kn-text: muted beyaz üzerinde 3.9:1 kalıyor,
   WCAG AA eşiği olan 4.5:1'in altında. */
.kn-optional {
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--kn-text);
}

.kn-form .form-check-label {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--kn-text);
}



/* Sağ kolon
   position: sticky denendi ve geri alındı: panel içeriği 880–940px, yani
   her kırılımda görüntü alanından uzun. Görüntü alanından uzun bir sticky
   öğe hiç sabitlenmez, sayfayla birlikte kayar; kazanç yok, davranış
   öngörülemez oluyordu. Panel normal akışta bırakıldı. */

/* Panel içindeki öne çıkan telefon numarası */
.kn-info-phone {
  display: inline-block;
  font-family: var(--kn-font-head);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 500;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1.2;
  margin-top: .5rem;
}
.kn-info-phone:hover { color: var(--kn-accent-soft); }

.kn-info-panel .kn-info-list {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kn-line-dark);
}


/* ==========================================================================
   Footer
   Beyaz header ile koyu footer bilinçli bir karşıtlık: sayfa açık başlar,
   ağırlığını altta bulur.

   Not: Footer'ın üstündeki eylem şeridi (.kn-footer-cta) kaldırıldı; ona ait
   kurallar da silindi. Footer artık doğrudan bilgi ızgarasıyla başlar.
   ========================================================================== */
.kn-footer {
  background: var(--kn-ink);
  color: rgba(255, 255, 255, .62);
  font-size: .94rem;
}

/* --- Bilgi ızgarası --- */
.kn-footer > .container { padding-top: 4.5rem; }
.kn-footer h4 {
  color: #fff;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.kn-footer p { font-size: .94rem; line-height: 1.8; }
.kn-footer a { color: rgba(255, 255, 255, .62); }
.kn-footer a:hover { color: var(--kn-accent-soft); }

.kn-footer-brand h4 { margin-bottom: 1rem; }
.kn-footer-brand p { margin-bottom: 0; }

.kn-footer-links { list-style: none; padding: 0; margin: 0; }
.kn-footer-links li { margin-bottom: .6rem; }
.kn-footer-links a { position: relative; }

.kn-footer-contact { list-style: none; padding: 0; margin: 0; }
.kn-footer-contact li { display: flex; gap: .8rem; margin-bottom: 1rem; line-height: 1.7; }
.kn-footer-contact i { color: var(--kn-accent); font-size: .9rem; margin-top: .42rem; flex: 0 0 auto; }
/* E-posta adresi boşluksuz tek kelime olduğu için flex öğesi min-content
   genişliğinin altına inemiyor; 992px'de kolonu aşıp sayfayı yatay
   kaydırıyordu. Kırılabilir hale getiriliyor. */
.kn-footer-contact a,
.kn-footer-contact span { min-width: 0; overflow-wrap: anywhere; }

.kn-social { display: flex; gap: .5rem; margin-top: 1.6rem; }
.kn-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kn-line-dark);
  color: rgba(255, 255, 255, .66);
  transition: background-color .3s var(--kn-ease), border-color .3s var(--kn-ease), color .3s var(--kn-ease);
}
.kn-social a:hover { background: var(--kn-accent); border-color: var(--kn-accent); color: #fff; }

.kn-footer-bottom {
  margin-top: 3.5rem;
  border-top: 1px solid var(--kn-line-dark);
  padding: 1.5rem 0;
  font-size: .84rem;
}

@media (max-width: 767.98px) {
  .kn-footer > .container { padding-top: 3.25rem; }
}

/* --------------------------------------------------------------------------
   Sabit aksiyon butonları — sağ alt köşe
   "Sayfa başına dön" butonu kaldırıldı. Yığın alttan hizalandığı için
   kalan iki buton kendiliğinden aşağı, kaldırılan butonun yerine oturur.
   Konum güvenli alanı da hesaba katar (iOS'ta alt çubuk).
   -------------------------------------------------------------------------- */
.kn-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .65rem;
}

.kn-float-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.25rem;
  border: 0;
  /* İki katmanlı gölge: yakın katman kenarı tanımlar, uzak katman
     butonu zeminden ayırır. Açık ve koyu bölümlerin üzerinde de okunur. */
  box-shadow: 0 2px 6px rgba(20, 24, 28, .18),
              0 10px 24px rgba(20, 24, 28, .22);
  transition: transform .3s var(--kn-ease),
              box-shadow .3s var(--kn-ease),
              background-color .3s var(--kn-ease);
}
.kn-float-btn:hover,
.kn-float-btn:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(20, 24, 28, .22),
              0 16px 32px rgba(20, 24, 28, .28);
}
.kn-float-btn:active { transform: translateY(-1px); }

.kn-float .kn-wa { background: #25d366; }
.kn-float .kn-wa:hover, .kn-float .kn-wa:focus-visible { background: #1eb85a; }
.kn-float .kn-tel { background: var(--kn-accent); }
.kn-float .kn-tel:hover, .kn-float .kn-tel:focus-visible { background: #8f6c3b; }

@media (max-width: 575.98px) {
  .kn-float { right: 1rem; gap: .55rem; }
  .kn-float-btn { width: 48px; height: 48px; font-size: 1.15rem; }
}

/* ---------- Bootstrap bileşen uyumu ---------- */
.accordion {
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-border-color: var(--kn-line);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--kn-ink);
  --bs-accordion-btn-padding-y: 1.15rem;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: .25rem 1.5rem;
  --bs-accordion-bg: transparent;
}
.accordion-item { background: transparent; }
.accordion-button {
  font-family: var(--kn-font-head);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--kn-ink);
  background: transparent;
}
.accordion-button:not(.collapsed) { box-shadow: none; color: var(--kn-accent); }
.accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2379818a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a8814a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-body { padding-bottom: 1.5rem; font-size: .96rem; }

.alert { border-radius: 0; }
.form-check-input { border-radius: 0; border-color: #c9c3b8; }
.form-check-input:checked { background-color: var(--kn-accent); border-color: var(--kn-accent); }
.form-check-input:focus { border-color: var(--kn-accent); box-shadow: 0 0 0 3px var(--kn-accent-tint); }
.modal-content { border-radius: 0; }

/* ---------- Görünüme girme animasyonu ---------- */
.kn-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--kn-ease), transform .8s var(--kn-ease);
}
.kn-reveal.kn-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .kn-reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ince ayar ---------- */
@media (max-width: 991.98px) {
  .kn-section { padding: 4.5rem 0; }
  .kn-section-sm { padding: 3.25rem 0; }
  .kn-frame::after { display: none; }

}
@media (max-width: 575.98px) {
  .btn { padding: .78rem 1.5rem; font-size: .88rem; }
  .kn-service { padding: 1.9rem 1.5rem; }
  .kn-exp-badge { padding: .9rem 1.1rem; }
  .kn-exp-badge strong { font-size: 1.6rem; }

  /* Portföy: üç haneli künye şeridi dar ekranda ikiye iner, üçüncü hane
     alta tam genişlikte geçer; sayılar kırpılmaz. */
  .kn-pstats { grid-template-columns: repeat(2, 1fr); }
  .kn-pstats li:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 1.1rem;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--kn-line);
  }
  .kn-ptoolbar { margin-bottom: 2rem; }
  .kn-pcard-body { padding: 1.25rem 1.25rem 1.15rem; }
}


/* ==========================================================================
   Lightbox — Fancybox 5 tema uyumu
   --------------------------------------------------------------------------
   Fancybox varsayılanları yuvarlak köşeli, mavi odak halkalı ve mavi ilerleme
   çubuklu gelir; tema ise keskin köşe + bronz vurgu kullanıyor. Aşağıdaki
   değişkenler bileşeni temaya bağlar, kendi CSS'ine dokunmaya gerek kalmaz.

   Dikey video
   Fancybox, html5video kabına varsayılan olarak 960x540 (16:9) verir;
   kayıtlarımız dikey (472x850, 720x1280) olduğu için video bu kutunun
   ortasında küçük kalıyor, iki yanında ~660 px siyah bant oluşuyordu.
   Oran artık her video bağlantısına yazılan data-width/data-height ile
   geliyor (bkz. tools/build.py > add_video_dims); Fancybox kabı doğru
   oranda kuruyor. Buradaki kurallar yalnızca varsayılan 960x540 ölçüsünü
   ve kap dolgusunu etkisiz kılar, oranı belirlemez.
   ========================================================================== */
.fancybox__container {
  --fancybox-bg: rgba(16, 19, 22, .94);
  --fancybox-color: rgba(255, 255, 255, .92);
  --fancybox-hover-color: #fff;
  --f-spinner-color-2: var(--kn-accent-soft);
  --f-progress-color: var(--kn-accent);
  --f-button-border-radius: 0;
  --f-button-bg: rgba(255, 255, 255, .08);
  --f-button-hover-bg: var(--kn-accent);
  --f-button-active-bg: var(--kn-accent);
  --f-button-color: rgba(255, 255, 255, .92);
  --f-button-hover-color: #fff;
  --f-button-outline-color: var(--kn-accent-soft);
  --f-thumb-border-radius: 0;
  --f-thumb-outline: 2px;
  --f-thumb-outline-color: var(--kn-accent);
  font-family: var(--kn-font-body);
}

/* Sayaç ("3 / 28") ve başlık alanı temaya çekilir. */
.fancybox__counter { font-family: var(--kn-font-head); letter-spacing: .06em; }

/* --- Video kabı: sabit 960x540 yerine oranına göre ---
   Fancybox kabı ölçerken satır içi stilleri temizler ve stil sayfasından
   gelen boyutu okur. Varsayılan 960x540 kaldığında ölçüm ekran boyutundan
   bağımsız sabit bir değere kilitleniyor, video 1440 px genişlikte de
   390 px genişlikte de aynı küçük ölçüde açılıyordu. Kap slaytın tamamına
   yayılınca ölçüm gerçek boşluğu görür; yükseklik videonun doğal boyunu
   aşmaz, bu yüzden görüntü büyütülüp bulanıklaşmaz. */
.fancybox__container .fancybox__slide.has-html5video .fancybox__content {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  background: #000;
}
.fancybox__container .fancybox__html5video { display: block; }