/* ============================================================
   Kaleli Kit — Bileşenler
   ============================================================ */

/* ---------- Buton ---------- */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-2);
  padding: var(--k-3) var(--k-5);
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: var(--k-radius-sm);
  background: var(--k-brand);
  color: var(--k-brand-on);
  font-size: var(--k-text-sm);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--k-fast), border-color var(--k-fast),
              color var(--k-fast), transform var(--k-fast);
}
.k-btn:hover {
  background: var(--k-brand-ink);
  color: var(--k-brand-on);
  transform: translateY(-1px);
}
.k-btn:active { transform: none; }

.k-btn--ghost {
  background: transparent;
  border-color: var(--k-line-2);
  color: var(--k-ink);
}
.k-btn--ghost:hover {
  background: var(--k-bg-2);
  border-color: var(--k-brand);
  color: var(--k-brand-ink);
}
.k-btn--quiet {
  background: transparent;
  color: var(--k-brand-ink);
  padding-inline: var(--k-2);
}
.k-btn--quiet:hover { background: var(--k-brand-soft); color: var(--k-brand-ink); }

.k-btn--lg { padding: var(--k-4) var(--k-7); min-height: 3.25rem; font-size: var(--k-text); }
.k-btn--sm { padding: var(--k-2) var(--k-4); min-height: 2.25rem; font-size: var(--k-text-xs); }
.k-btn--block { display: flex; width: 100%; }

/* Koyu zeminde — .k-section--deep, .k-cta ve .k-footer aynı bağlam */
.k-on-deep .k-btn--ghost,
.k-section--deep .k-btn--ghost,
.k-cta .k-btn--ghost,
.k-footer .k-btn--ghost {
  background: transparent;
  border-color: var(--k-deep-line);
  color: #fff;
}
.k-on-deep .k-btn--ghost:hover,
.k-section--deep .k-btn--ghost:hover,
.k-cta .k-btn--ghost:hover,
.k-footer .k-btn--ghost:hover {
  background: rgb(255 255 255 / .10);
  border-color: var(--k-brand);
  color: #fff;
}

/* ---------- Kart ---------- */
.k-card {
  display: flex;
  flex-direction: column;
  background: var(--k-bg);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  overflow: hidden;
  transition: border-color var(--k-fast), box-shadow var(--k-fast),
              transform var(--k-fast);
}
.k-card--link:hover {
  border-color: var(--k-brand);
  box-shadow: var(--k-shadow);
  transform: translateY(-2px);
}
.k-card__media {
  aspect-ratio: 16 / 10;
  background: var(--k-bg-3);
  overflow: hidden;
}
.k-card__media img { width: 100%; height: 100%; object-fit: cover; }
.k-card__media--contain { display: grid; place-items: center; padding: var(--k-5); }
.k-card__media--contain img { width: auto; height: auto; max-height: 100%; object-fit: contain; }
.k-card__body { padding: var(--k-5); display: flex; flex-direction: column; gap: var(--k-2); flex: 1; }
.k-card__title { margin: 0; font-size: var(--k-h4); }
.k-card__title a { color: inherit; text-decoration: none; }
.k-card__title a:hover { color: var(--k-brand-ink); }
.k-card__text { margin: 0; color: var(--k-ink-3); font-size: var(--k-text-sm); }
.k-card__meta {
  margin-top: auto;
  padding-top: var(--k-3);
  color: var(--k-ink-4);
  font-size: var(--k-text-xs);
}

/* ---------- Özellik (ikon + metin) ---------- */
.k-feature { display: flex; gap: var(--k-4); align-items: flex-start; }
.k-feature__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--k-radius);
  background: var(--k-brand-soft);
  color: var(--k-brand-ink);
}
.k-feature__icon svg { width: 1.5rem; height: 1.5rem; }
.k-feature__title { margin: 0 0 var(--k-1); font-size: var(--k-text-md); font-weight: 650; color: var(--k-ink); }
.k-feature__text { margin: 0; color: var(--k-ink-3); font-size: var(--k-text-sm); }

.k-on-deep .k-feature__icon,
.k-section--deep .k-feature__icon { background: rgb(255 255 255 / .07); color: var(--k-brand); }
.k-on-deep .k-feature__title,
.k-section--deep .k-feature__title { color: #fff; }
.k-on-deep .k-feature__text,
.k-section--deep .k-feature__text { color: var(--k-deep-ink-2); }

/* ---------- İstatistik şeridi ---------- */
.k-stats {
  display: grid;
  gap: var(--k-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.k-stat__value {
  display: block;
  font-size: var(--k-h2);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: var(--k-ls-tight);
  color: var(--k-ink);
}
.k-stat__label { display: block; margin-top: var(--k-1); color: var(--k-ink-3); font-size: var(--k-text-sm); }
.k-on-deep .k-stat__value,
.k-section--deep .k-stat__value { color: var(--k-brand); }
.k-on-deep .k-stat__label,
.k-section--deep .k-stat__label { color: var(--k-deep-ink-2); }

/* ---------- Adım listesi (süreç anlatımı) ---------- */
.k-steps { display: grid; gap: var(--k-5); counter-reset: k-step; }
@media (min-width: 760px) { .k-steps { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.k-step { position: relative; padding-top: var(--k-6); }
.k-step::before {
  counter-increment: k-step;
  content: counter(k-step);
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--k-radius-full);
  background: var(--k-brand); color: var(--k-brand-on);
  font-size: var(--k-text-sm); font-weight: 700;
}
.k-step__title { margin: 0 0 var(--k-1); font-size: var(--k-text-md); font-weight: 650; color: var(--k-ink); }
.k-step__text { margin: 0; color: var(--k-ink-3); font-size: var(--k-text-sm); }
.k-on-deep .k-step__title,
.k-section--deep .k-step__title { color: #fff; }
.k-on-deep .k-step__text,
.k-section--deep .k-step__text { color: var(--k-deep-ink-2); }

/* ---------- Logo duvarı ---------- */
/* Sabit kolon sayısı: logo sayısı kolona tam bölünsün, yetim kutu kalmasın.
   Site --k-logo-cols ile değiştirebilir (varsayılan 4). */
.k-logos {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(var(--k-logo-cols, 4), minmax(0, 1fr));
  background: var(--k-line);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  overflow: hidden;
}
.k-logos__item {
  display: grid;
  place-items: center;
  padding: var(--k-5) var(--k-4);
  background: var(--k-bg);
  min-height: 7rem;
}
/* Logolar farklı en-boy oranlarında gelir; hem yükseklik hem genişlik
   sınırlanmazsa geniş olanlar kutuyu doldurup kareleri küçük gösterir.
   Kaynak dosyalar içerik sınırına kırpılmış olmalı (boş kenarlık yok). */
.k-logos__item img {
  max-height: 2.75rem;
  max-width: 76%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: .85;
  transition: opacity var(--k-fast), transform var(--k-fast);
}
.k-logos__item:hover img { opacity: 1; transform: scale(1.04); }

@media (max-width: 860px) { .k-logos { --k-logo-cols: 3; } }
@media (max-width: 560px) { .k-logos { --k-logo-cols: 2; } }

/* ---------- CTA bandı ---------- */
.k-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-5);
  padding: clamp(var(--k-5), 3vw, var(--k-8));
  border-radius: var(--k-radius-lg);
  background: var(--k-deep);
  color: var(--k-deep-ink);
}
.k-cta__title { margin: 0 0 var(--k-2); color: #fff; }
.k-cta__text { margin: 0; color: var(--k-deep-ink-2); max-width: 52ch; }
.k-cta__actions { display: flex; flex-wrap: wrap; gap: var(--k-3); }

/* ---------- Sayfa başlığı ---------- */
.k-pagehead {
  padding-block: var(--k-section-sm);
  background: var(--k-bg-2);
  border-bottom: 1px solid var(--k-line);
}
.k-pagehead__title { margin: 0 0 var(--k-2); }
.k-pagehead__lede { margin: 0; color: var(--k-ink-3); font-size: var(--k-text-md); max-width: var(--k-prose); }

/* ---------- Breadcrumb ---------- */
.k-crumbs { margin-bottom: var(--k-4); font-size: var(--k-text-sm); }
.k-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--k-2); margin: 0; padding: 0; list-style: none; }
.k-crumbs li { display: flex; align-items: center; gap: var(--k-2); margin: 0; color: var(--k-ink-3); }
.k-crumbs li + li::before { content: "›"; color: var(--k-ink-4); }
.k-crumbs a { color: var(--k-ink-3); text-decoration: none; }
.k-crumbs a:hover { color: var(--k-brand-ink); text-decoration: underline; }
.k-crumbs [aria-current] { color: var(--k-ink); font-weight: 600; }

/* ---------- Rozet ---------- */
.k-badge {
  display: inline-flex; align-items: center; gap: var(--k-1);
  padding: var(--k-1) var(--k-3);
  border-radius: var(--k-radius-full);
  background: var(--k-brand-soft);
  color: var(--k-brand-ink);
  font-size: var(--k-text-xs); font-weight: 650;
  letter-spacing: var(--k-ls-wide); text-transform: uppercase;
}

/* ---------- Bildirim ---------- */
.k-note {
  padding: var(--k-4) var(--k-5);
  border-left: 3px solid var(--k-brand);
  border-radius: 0 var(--k-radius-sm) var(--k-radius-sm) 0;
  background: var(--k-bg-2);
  font-size: var(--k-text-sm);
}
.k-note--ok  { border-color: var(--k-ok);  background: color-mix(in srgb, var(--k-ok) 7%, var(--k-bg)); }
.k-note--err { border-color: var(--k-err); background: color-mix(in srgb, var(--k-err) 7%, var(--k-bg)); }

/* ---------- Form ---------- */
.k-field { display: flex; flex-direction: column; gap: var(--k-2); }
.k-field__label { font-size: var(--k-text-sm); font-weight: 600; color: var(--k-ink); }
.k-field__hint { font-size: var(--k-text-xs); color: var(--k-ink-3); }
.k-field__error { font-size: var(--k-text-xs); color: var(--k-err); }
.k-field--invalid input, .k-field--invalid textarea, .k-field--invalid select { border-color: var(--k-err); }
.k-required { color: var(--k-err); }

/* ---------- İletişim paneli ---------- */
.k-contact { display: flex; flex-direction: column; gap: var(--k-3); margin: 0; padding: 0; list-style: none; }
.k-contact li { display: flex; gap: var(--k-3); align-items: flex-start; margin: 0; }
.k-contact__icon { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--k-brand-ink); margin-top: .2rem; }
.k-contact a { color: inherit; text-decoration: none; }
.k-contact a:hover { color: var(--k-brand-ink); text-decoration: underline; }

/* ---------- Akordeon (SSS) ---------- */
.k-acc { border-top: 1px solid var(--k-line); }
.k-acc__item { border-bottom: 1px solid var(--k-line); }
.k-acc__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--k-4);
  padding: var(--k-4) 0;
  color: var(--k-ink); font-weight: 650;
  cursor: pointer; list-style: none;
}
.k-acc__item > summary::-webkit-details-marker { display: none; }
.k-acc__item > summary::after {
  content: "+"; flex: 0 0 auto;
  font-size: var(--k-text-lg); font-weight: 400; color: var(--k-brand-ink);
  transition: transform var(--k-fast);
}
.k-acc__item[open] > summary::after { transform: rotate(45deg); }
.k-acc__item > summary:hover { color: var(--k-brand-ink); }
.k-acc__panel { padding: 0 0 var(--k-5); color: var(--k-ink-3); font-size: var(--k-text-sm); }

/* ---------- Kaydırmalı şerit (carousel yerine) ---------- */
.k-rail {
  display: flex;
  gap: var(--k-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--k-gutter);
  padding-bottom: var(--k-3);
  -webkit-overflow-scrolling: touch;
}
.k-rail > * { flex: 0 0 clamp(220px, 70vw, 300px); scroll-snap-align: start; }
.k-rail::-webkit-scrollbar { height: 6px; }
.k-rail::-webkit-scrollbar-track { background: var(--k-bg-3); border-radius: var(--k-radius-full); }
.k-rail::-webkit-scrollbar-thumb { background: var(--k-line-2); border-radius: var(--k-radius-full); }
.k-rail::-webkit-scrollbar-thumb:hover { background: var(--k-ink-4); }

/* ---------- Tablo sarmalayıcı (mobil taşma) ---------- */
.k-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Başa dön ---------- */
.k-top {
  position: fixed; right: var(--k-5); bottom: var(--k-5);
  z-index: var(--k-z-header);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-full);
  background: var(--k-bg);
  color: var(--k-ink);
  box-shadow: var(--k-shadow);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity var(--k-fast), visibility var(--k-fast), background var(--k-fast);
}
.k-top.is-on { opacity: 1; visibility: visible; }
.k-top:hover { background: var(--k-brand); color: var(--k-brand-on); border-color: var(--k-brand); }

/* ---------- Harita gömme (tıkla-yükle) ----------
   Harita ziyaretçi tıklayana kadar YÜKLENMEZ. Google'a istek gitmez,
   çerez oluşmaz — bu yüzden çerez onayı gerekmez. */
.k-map {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  background: var(--k-bg-3);
  aspect-ratio: 16 / 7;
}
.k-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .k-map { aspect-ratio: 4 / 3; } }

.k-map__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--k-3);
  padding: var(--k-5);
  width: 100%;
  border: 0;
  background:
    repeating-linear-gradient(0deg, var(--k-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--k-line) 0 1px, transparent 1px 40px),
    var(--k-bg-2);
  color: var(--k-ink-2);
  font: inherit; text-align: center; cursor: pointer;
  transition: background-color var(--k-fast);
}
.k-map__placeholder:hover { background-color: var(--k-bg-3); }
.k-map__placeholder svg { width: 2rem; height: 2rem; color: var(--k-brand-ink); }
.k-map__title { font-weight: 650; color: var(--k-ink); }
.k-map__note { max-width: 44ch; font-size: var(--k-text-sm); color: var(--k-ink-3); }