/* ============================================================
   "Kor" bileşen sistemi — ecol.com.tr · bayimplus.com · rotamplus.com.tr
   Üç sitede AYNI dosya. Kararlar ECOLWebsite/DESIGN.md'de.

   Bileşenler marka rengini değil ROLÜ çağırır:
     --accent*   birincil vurgu — Ecol'de turuncu, ürünlerde teal
     --accent2*  ikincil vurgu
   Rolün hangi renge bağlandığı her sitenin tokens.css'inde yazar;
   böylece markalar ayrışırken bileşen sistemi tek kalır.
   ============================================================ */

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-normal);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.k-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.k-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent2-ink);
}

/* ---------- tema anahtarı ----------
   Ikonlu tek dugme yerine toggle switch: iki durum oldugu ve tiklayinca
   degisecegi bakinca anlasiliyor. Switch "acik" = koyu tema. */
.theme-switch {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}
.theme-switch__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 56px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--switch-track);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.theme-switch__ico {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: color var(--t-fast), opacity var(--t-fast);
}
/* Aktif tarafin ikonu belirgin, digeri geri planda */
.theme-switch__ico--sun  { color: var(--accent-ink); opacity: 1; }
.theme-switch__ico--moon { color: var(--text-subtle); opacity: 0.75; }
.theme-switch[aria-checked="true"] .theme-switch__ico--sun  { color: var(--text-subtle); opacity: 0.75; }
.theme-switch[aria-checked="true"] .theme-switch__ico--moon { color: var(--accent-ink); opacity: 1; }

.theme-switch__knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--switch-knob);
  transition: transform var(--t-base);
}
.theme-switch[aria-checked="true"] .theme-switch__knob { transform: translateX(26px); }

.theme-switch:hover .theme-switch__track { border-color: var(--accent-ink); }
.theme-switch:focus-visible .theme-switch__track {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
/* Hareket kisitliysa kaymadan yer degistirsin */
@media (prefers-reduced-motion: reduce) {
  .theme-switch__knob { transition: none; }
}

/* ---------- header: eski stiller lacivert temaya göreydi, tokenlara bağlanıyor ---------- */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { border-bottom-color: var(--border); }
.site-header__inner { gap: var(--sp-3); }

.brand__name { color: var(--text); }
.brand__sub { color: var(--text-mute); }

.nav { gap: 0; }
.nav a:not(.btn):not(.k-btn) {
  padding: 0.5rem 0.6875rem;
  font-size: 0.9375rem;
  color: var(--text-soft);
  white-space: nowrap;
}
.nav a:not(.btn):not(.k-btn):hover { color: var(--text); background: var(--bg-mute); }
.nav a.is-active:not(.btn):not(.k-btn) { color: var(--text); }
/* gradyan kaldırıldı — düz aksan çizgisi */
.nav a.is-active:not(.btn):not(.k-btn)::after { background: var(--accent-ink); }

.nav__cta,
.nav a.btn.btn--brand {
  background: var(--accent-ink);
  color: var(--text-on-fill);
  border-color: transparent;
  margin-left: var(--sp-2);
  white-space: nowrap;
}
.nav a.btn.btn--brand:hover { background: var(--accent); color: var(--text-on-fill); }
:root[data-theme="dark"] .nav a.btn.btn--brand:hover { color: #17110C; }

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after { background: var(--text); }

/* Tema düğmesi eklendiği için menü 760px'te değil, 1040px'te toplanmalı —
   aksi halde nav sağa taşıyor. Eski kırılma noktası korunuyor, öne alınıyor. */
@media (max-width: 1040px) {
  .menu-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: calc(var(--header-h) + 8px);
    right: var(--container-pad);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: var(--sp-3);
    background: var(--bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    transform-origin: top right;
    transition: opacity var(--t-base), transform var(--t-base);
  }
  .nav.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .nav a:not(.btn):not(.k-btn) { padding: 0.625rem 0.875rem; }
  .nav a.is-active:not(.btn):not(.k-btn)::after { display: none; }
  .nav__cta, .nav a.btn.btn--brand { margin-left: 0; margin-top: 0.25rem; text-align: center; }
  .menu-toggle.is-open span { background: transparent; }
  .menu-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------- hero ---------- */
.k-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem var(--sp-2) 3rem;
}
.k-hero__field {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* Isik alani metnin ALTINA girmez. Metin sutunu (max 40rem) solda kalir,
     alan yalnizca sag tarafta yasar — boylece hicbir yazi hareketli parlak
     hucrelerin uzerine dusmez. Perdeye guvenmek yerine sorun yapisal olarak
     kaldiriliyor. */
  width: clamp(0px, calc(100% - 44rem), 46%);
  height: 100%;
  display: block;
  z-index: 0;
  /* sol kenar yumusak baslasin */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
/* Perde artik yalniz alanin sol kenarini yumusatmak icin; metnin altinda
   canvas olmadigi icin kontrast gorevi yok. */
.k-hero::after { content: none; }

.k-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}
.k-hero h1 {
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0;
  max-width: 21ch;
}
.k-hero h1 em {
  font-style: normal;
  color: var(--accent-ink);
}
.k-hero__lede {
  margin: var(--sp-6) 0 0;
  max-width: 48ch;
  font-size: var(--fs-lg);
  color: var(--text-soft);
}
.k-hero__cta {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-8);
}
.k-hero__meta {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.k-hero__meta b { color: var(--text-soft); font-weight: 500; }

/* ---------- butonlar ---------- */
.k-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
/* dolgu: turuncu — kontrast DESIGN.md §3.3'te ölçüldü */
.k-btn--fill { background: var(--accent-ink); color: var(--text-on-fill); }
.k-btn--fill:hover { background: var(--accent); color: var(--text-on-fill); }
:root[data-theme="dark"] .k-btn--fill:hover { color: #17110C; }
.k-btn--line { border-color: var(--border); color: var(--text); }
.k-btn--line:hover { border-color: var(--text-soft); }
.k-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ---------- bölüm ---------- */
.k-sec { padding: 3.5rem var(--sp-2); }
.k-sec--sunk { background: var(--bg-soft); border-block: 1px solid var(--border); }
.k-sec__head { margin-bottom: 2rem; display: grid; gap: 0.625rem; }
.k-sec__head > * { max-width: 46rem; }
@media (min-width: 940px) {
  .k-sec__head {
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
    margin-bottom: 3rem;
  }
  /* etiket sol rayda, basligin ustunde degil yaninda */
  .k-sec__head .k-label {
    grid-column: 1;
    grid-row: 1 / span 3;
    padding-top: 0.5rem;
    border-top: 2px solid var(--accent-ink);
  }
  .k-sec__head h1,
  .k-sec__head h2,
  .k-sec__head p { grid-column: 2; }
}
/* Sayfanin ANA basligi h1'dir; bolum basliklari h2. Ikisi de ayni
   gorunur — anlam etiketten gelir, boyuttan degil. */
.k-sec__head h1,
.k-sec__head h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  margin: var(--sp-4) 0 0;
}
.k-sec__head p {
  margin: 0;
  max-width: var(--measure);
  color: var(--text-soft);
}

/* ---------- hizmetler: ikon kutusu YOK, tipografik ---------- */
.k-services { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 860px) { .k-services { grid-template-columns: repeat(3, 1fr); } }
.k-service {
  background: var(--bg);
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.k-service h3 { font-size: var(--fs-xl); font-weight: 600; margin: 0; line-height: 1.2; }
.k-service p { margin: 0; color: var(--text-soft); flex: 1; max-width: var(--measure); }
.k-service a {
  font-weight: 600;
  color: var(--accent2-ink);
  text-decoration: none;
  align-self: start;
}
.k-service a:hover { text-decoration: underline; }

/* ---------- ürünler ---------- */
.k-products { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .k-products { grid-template-columns: repeat(3, 1fr); } }
.k-product {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.k-product__top { display: flex; align-items: center; gap: var(--sp-3); }
.k-product__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; }
.k-product__live {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--success);
  background: var(--success-soft);
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-pill);
}
/* Rozetin "yapim asamasinda" hali.
   Ayrimi tasiyan sey RENK DEGIL, rozetin kendi metnidir ("Canli" /
   "Yapim asamasinda") — renk gormeyen de okur. Kesikli cerceve yalnizca
   gorsel pekistirmedir; olculdu, kart zeminine karsi 1.2-1.4:1, yani tek
   basina bir isaret sayilmaz. products.css'teki .k-prod__state--soon ile
   ayni gorunum. */
.k-product__live.is-soon {
  color: var(--text-mute);
  background: transparent;
  border: 1px dashed var(--border);
  letter-spacing: 0.06em;
}
.k-product p { margin: 0; color: var(--text-soft); flex: 1; max-width: var(--measure); }
.k-product__spec {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--text-mute);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-3);
}
.k-product__spec b { color: var(--accent2-ink); font-weight: 500; }
.k-product a.k-btn { align-self: start; }

/* ---------- ilkeler ---------- */
.k-principles { display: grid; gap: var(--sp-8); }
@media (min-width: 820px) { .k-principles { grid-template-columns: repeat(3, 1fr); } }
.k-principle h3 { font-size: var(--fs-lg); font-weight: 600; margin: var(--sp-3) 0 var(--sp-2); }
.k-principle p { margin: 0; color: var(--text-soft); max-width: var(--measure); }

/* ---------- kapanış ---------- */
.k-close {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  background: var(--bg-soft);
}
.k-close .k-label { display: none; }
.k-close h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 700; margin: 0; max-width: 22ch; }
.k-close p { margin: var(--sp-4) 0 0; max-width: var(--measure); color: var(--text-soft); }
.k-close__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

/* Bölüm nefesi ekran büyüdükçe artar. clamp() yerine basamak kullanılıyor —
   statik çözümleyiciler clamp içindeki değeri okuyamıyor ve dolguyu sıfır
   sanıp yanlış uyarı veriyor. */
@media (min-width: 700px) {
  .k-hero { padding: 5rem var(--sp-2) 3.5rem; }
  .k-sec  { padding: 5rem var(--sp-2); }
  .k-close { padding: 2.75rem; }
}
@media (min-width: 1000px) {
  .k-hero { padding: 7rem var(--sp-2) 4rem; }
  .k-sec  { padding: 6rem var(--sp-2); }
  .k-close { padding: 3.25rem; }
}

/* ============================================================
   ESKİ BİLEŞEN UYUMU — henüz yeniden inşa edilmemiş sayfalar
   (hizmetler, products, about, references, contact, compare, 404, blog)
   Bu bileşenler lacivert/gradyan varsayımıyla yazılmıştı ve koyu temada
   okunamaz hâle geliyordu. Sayfalar taşındıkça bu blok küçülüp silinecek.
   ============================================================ */

/* Dolgu butonları: zemin artık turuncu, metin tema-duyarlı */
.btn--primary,
.btn--brand,
.btn--accent {
  background: var(--accent-ink);
  background-image: none;
  color: var(--text-on-fill);
  box-shadow: none;
}
.btn--primary:hover,
.btn--brand:hover,
.btn--accent:hover {
  background: var(--accent);
  background-image: none;
  box-shadow: none;
  color: var(--text-on-fill);
}
:root[data-theme="dark"] .btn--primary:hover,
:root[data-theme="dark"] .btn--brand:hover,
:root[data-theme="dark"] .btn--accent:hover { color: #17110C; }

/* Outline/hayalet butonlar */
.btn--ghost,
.btn--secondary,
.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover,
.btn--secondary:hover,
.btn--outline:hover { border-color: var(--text-soft); background: transparent; }

.btn--link { color: var(--accent2-ink); }
.btn--link:hover { color: var(--accent-ink); }

/* Koyu zemin varsayan kartlar — gradyan kaldırıldı, düz sıcak zemin */
.product-card--featured,
.cta-band,
.logo-spotlight {
  background: var(--bg-mute);
  background-image: none;
  color: var(--text);
  border: 1px solid var(--border);
}
.product-card--featured h3,
.product-card--featured p,
.cta-band h2,
.cta-band p,
.logo-spotlight h3 { color: var(--text); }
.product-card--featured p,
.cta-band p { color: var(--text-soft); }
/* dekoratif renkli halkalar kaldırıldı */
.cta-band::before,
.cta-band::after { display: none; }
.product-card--featured .btn--accent { background: var(--accent-ink); }

/* Kartlar: kenarlık VE geniş gölge birlikte kullanılmaz */
.product-card, .feature, .value, .contact-card { box-shadow: none; }
.product-card:hover, .feature:hover { box-shadow: none; border-color: var(--text-subtle); }

/* Etiket/rozetler */
.eyebrow { color: var(--text-soft); background: var(--bg-mute); border-color: var(--border); }
.eyebrow.is-brand { color: var(--accent2-ink); background: var(--accent2-soft); border-color: transparent; }
.eyebrow.is-accent { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }
.eyebrow.is-deep { color: var(--text); background: var(--bg-mute); border-color: var(--border); }
.tag--live { color: var(--success); background: var(--success-soft); }
.tag--soon { color: var(--warning); background: var(--warning-soft); }

/* Bölüm zeminleri */
.section-bg-soft { background: var(--bg-soft); }
.hero { background: var(--bg); }

/* Sohbet baloncuğu — turuncu marka rengine hizalandı */
.chat-fab { background: var(--accent-ink); color: var(--text-on-fill); box-shadow: var(--shadow-md); }
.chat-panel { background: var(--surface); border: 0; }

/* Ardışık bölümlerde alt+üst dolgu üst üste binip aşırı boşluk bırakıyordu */
.k-sec + .k-sec:not(.k-sec--sunk) { padding-top: 0; }

/* ============================================================
   İÇ SAYFA BİLEŞENLERİ
   ============================================================ */

/* --- madde listesi --- */
.k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.k-list li {
  position: relative;
  padding-left: 1.125rem;
  color: var(--text-soft);
  font-size: 0.9375rem;
  max-width: var(--measure);
}
.k-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6875rem;
  width: 6px; height: 6px;
  background: var(--accent2);
}

/* --- iki sütunlu içerik bloğu --- */
.k-split { display: grid; gap: 2rem; }
@media (min-width: 860px) { .k-split { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }

/* --- çipler: Logo ürün ailesi, teknoloji yığını --- */
.k-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.k-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text);
}
.k-chip__mark {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent2-ink);
}
.k-chip small { color: var(--text-mute); font-size: 0.75rem; }
.k-chip--lead { border-color: var(--accent2-ink); }

/* --- resmi logo rozetleri --- */
.k-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* Logo'nun resmi rozetleri: marka renkleri bozulmasin diye ters cevrilmez,
   bunun yerine her temada acik bir zemine oturtulur. */
.k-badges img {
  /* Yer daha ILK BOYAMADA ayrilsin diye <img> uzerinde width/height var
     (bkz. hizmetler.html). Boyutsuz bir lazy gorsel yuklenene kadar 0 yer
     kaplar; satir once yassi durur, gorseller inince 40px'e sicrardi —
     duzen kaymasi (CLS). Oranin kaynagi ozniteliklerdir, bu kural degil:
     buradaki olcu yalnizca ust siniri koyar. */
  max-height: 40px;
  max-width: 190px;
  object-fit: contain;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

/* --- vurgulu panel (Logo uzmanlık, bilgi kutusu) --- */
.k-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-mute);
  padding: 1.75rem;
}
@media (min-width: 700px) { .k-panel { padding: 2.25rem; } }
.k-panel h3 { font-size: var(--fs-xl); font-weight: 700; margin: 0.5rem 0 0.75rem; }
.k-panel p { margin: 0; color: var(--text-soft); max-width: var(--measure); }
.k-panel p + p { margin-top: 0.75rem; }

/* --- not / yasal metin --- */
.k-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-mute);
  max-width: 70ch;
}

/* --- vaka/proje kartı --- */
.k-cases { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .k-cases { grid-template-columns: repeat(2, 1fr); } }
.k-case {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.k-case__top { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.k-case__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; }
.k-case__sector { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-mute); }
.k-case__state {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-pill);
  color: var(--success);
  background: var(--success-soft);
}
.k-case__state--soon { color: var(--warning); background: var(--warning-soft); }
.k-case__state--open { color: var(--accent2-ink); background: var(--accent2-soft); }
.k-case > p { margin: 0; color: var(--text-soft); max-width: var(--measure); }
.k-case__out {
  margin: 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.875rem;
  color: var(--text-mute);
}
.k-case__out b { color: var(--accent2-ink); font-weight: 500; }

/* --- zaman çizelgesi --- */
.k-time { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.k-time li { border-left: 2px solid var(--border); padding-left: 1.25rem; }
.k-time__y {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent-ink);
}
.k-time h3 { font-size: var(--fs-lg); font-weight: 600; margin: 0.375rem 0 0.5rem; }
.k-time p { margin: 0; color: var(--text-soft); font-size: 0.9375rem; max-width: var(--measure); }

/* --- referans logo duvarı --- */
.k-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.k-logo {
  background: var(--bg);
  min-height: 96px;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.k-logo img {
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity var(--t-fast);
}
.k-logo:hover img { opacity: 1; }

/* Musteri logolarinin cogu ACIK zemin icin tasarlandi. Koyu temada ters
   cevirmek yerine (bazi PNG'ler dolu blok haline geliyor) acik bir levhaya
   oturtuluyor — marka renkleri korunuyor. */
:root[data-theme="dark"] .k-logo img {
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  opacity: 0.9;
}
:root[data-theme="dark"] .k-logo:hover img { opacity: 1; }

/* Istisna: KOYU zemin icin tasarlanmis beyaz logolar. Acik temada ters
   cevrilir, koyu temada oldugu gibi birakilir. */
.k-logo--on-dark img { filter: invert(1) brightness(0.85); }
:root[data-theme="dark"] .k-logo--on-dark img {
  filter: none;
  background: none;
  padding: 0;
}

/* --- karar rehberi --- */
.k-guide { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 860px) { .k-guide { grid-template-columns: repeat(2, 1fr); } }
.k-guide__item { background: var(--bg); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.k-guide__item h3 { font-size: var(--fs-lg); font-weight: 600; margin: 0; line-height: 1.3; }
.k-guide__item p { margin: 0; color: var(--text-soft); font-size: 0.9375rem; flex: 1; max-width: var(--measure); }
.k-guide__pick { font-size: 0.9375rem; color: var(--text-mute); }
.k-guide__pick a { color: var(--accent2-ink); font-weight: 600; text-decoration: none; }
.k-guide__pick a:hover { text-decoration: underline; }

/* --- SSS --- */
.k-faq { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 800px) { .k-faq { grid-template-columns: repeat(2, 1fr); } }
.k-faq__item { background: var(--bg); padding: 1.5rem; }
.k-faq__item h3 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 0.5rem; line-height: 1.3; }
.k-faq__item p { margin: 0; color: var(--text-soft); font-size: 0.9375rem; max-width: var(--measure); }

/* --- iletişim kartları --- */
.k-contacts { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.k-contact { background: var(--bg); padding: 1.25rem 1.5rem; }
.k-contact__k {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.k-contact__v { margin: 0.375rem 0 0; font-size: var(--fs-lg); font-weight: 600; }
.k-contact__v a { color: var(--text); text-decoration: none; }
.k-contact__v a:hover { color: var(--accent-ink); }
.k-contact small { display: block; margin-top: 0.25rem; color: var(--text-mute); font-size: 0.8125rem; }

/* --- form --- */
.k-form { display: grid; gap: 1.25rem; }
.k-row { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .k-row { grid-template-columns: repeat(2, 1fr); } }
.k-field { display: grid; gap: 0.375rem; }
.k-field label { font-size: 0.875rem; font-weight: 600; color: var(--text-soft); }
.k-field input,
.k-field select,
.k-field textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.6875rem 0.875rem;
  width: 100%;
}
.k-field textarea { resize: vertical; min-height: 8rem; }
.k-field input:focus-visible,
.k-field select:focus-visible,
.k-field textarea:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 1px;
  border-color: var(--accent-ink);
}
.k-form__note { margin: 0; font-size: 0.875rem; color: var(--text-mute); }
.k-form__feedback:not(:empty) {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--accent2-soft);
  color: var(--accent2-ink);
  font-size: 0.9375rem;
}

/* ---------- çerez onayı (KVKK) ---------- */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-modal);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.consent__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.25rem var(--container-pad);
  display: grid;
  gap: 1rem;
}
@media (min-width: 880px) {
  .consent__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    padding-block: 1.5rem;
  }
}
.consent__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  margin: 0 0 0.375rem;
  color: var(--text);
}
.consent__text p { margin: 0; font-size: 0.9375rem; color: var(--text-soft); max-width: 68ch; }
.consent__text b { color: var(--text); font-weight: 600; }
/* Reddetmek kabul etmek kadar kolay olmali — ayni boyut, ayni yerlesim. */
.consent__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.consent__actions .k-btn { flex: 1 1 auto; text-align: center; white-space: nowrap; }

/* Bant acikken sohbet baloncugu ustune binmesin.
   SABIT 8.5rem/7rem tahminleri KALDIRILDI: bant metni sardikca yuksekligi
   111-321px arasinda degisiyor, sabit deger telefonda yetersiz kaliyordu.
   Kural asagida "RESPONSIVE DUZELTMELERI" 5. maddede. */

/* Altbilgi tanitim metni genis ekranda olcuyu asiyordu */
.site-footer__about p { max-width: 42ch; }
.k-form__note, .k-case__out, .k-contact small { max-width: var(--measure); }

/* ---------- referans logo şeridi (ana sayfa) ----------
   NOT: Sürekli kayan şerit DESIGN.md §6'da yasaklıydı; kullanıcı isteğiyle
   bilinçli istisna yapıldı (bkz. §6 notu). Hareketin bedelini azaltmak için:
   hover/odakta durur, prefers-reduced-motion'da HİÇ kaymaz (sarmalanmış
   sabit sıraya döner), kopya grup ekran okuyuculardan gizlenir. */
.k-strip {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--border);
  padding: 1.75rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.k-strip__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 3.5rem;
  animation: k-strip-scroll 46s linear infinite;
}
.k-strip:hover .k-strip__track,
.k-strip:focus-within .k-strip__track { animation-play-state: paused; }
@keyframes k-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 1.75rem)); }
}
.k-strip__item { flex-shrink: 0; display: grid; place-items: center; }
.k-strip__item img {
  max-height: 38px;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.78;
  transition: opacity var(--t-fast);
}
.k-strip__item:hover img { opacity: 1; }
/* Musteri logolarinin cogu ACIK zemin icin tasarlandi (bkz. .k-logo) */
:root[data-theme="dark"] .k-strip__item img {
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  padding: 0.4375rem 0.625rem;
  opacity: 0.9;
}
:root[data-theme="dark"] .k-strip__item:hover img { opacity: 1; }
/* Istisna: koyu zemin icin tasarlanmis beyaz logo */
.k-strip__item--on-dark img { filter: invert(1) brightness(0.85); }
:root[data-theme="dark"] .k-strip__item--on-dark img {
  filter: none; background: none; padding: 0;
}

/* Hareket kisitliysa: kaydirma yok, hepsi ayni anda gorunur */
@media (prefers-reduced-motion: reduce) {
  .k-strip { -webkit-mask-image: none; mask-image: none; }
  .k-strip__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
  }
  .k-strip__track [aria-hidden="true"] { display: none; }
}

/* ---------- rol kartlari ----------
   Ozellik/modul kartlarindan farkli bir sey anlatiyor: bir liste degil,
   bir kisinin gununde gordugu ekran. Ince cerceveli, sakin bir panel.
   (Once urun sitelerinin theme.css'indeydi; bilesen oldugu icin ortak
   dosyaya alindi — responsive kurallari tek yerde dursun.) */
.k-roles { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 900px) { .k-roles { grid-template-columns: repeat(3, 1fr); } }
.k-role {
  background: var(--bg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.k-role h3 { font-size: var(--fs-xl); font-weight: 600; margin: 0; line-height: 1.2; }
.k-role .k-list { margin-top: 0.25rem; }

/* ============================================================
   RESPONSIVE DÜZELTMELERİ
   Ölçümle bulundu: sayfalar 360 / 390 / 414 / 768 / 820 / 1024 / 1280 /
   1440 / 1920 genişliklerinde ve yatay telefonda (844x390) tarandı.
   Her madde gerçek bir bulgunun karşılığıdır, önlem değildir.
   ============================================================ */

/* ---- 1) Açık menü ekranın altından taşıyordu ----
   Yatay telefonda (844x390) menü 110px ekran dışına taşıyor ve
   kaydırılamıyordu: son iki bağlantıya ulaşmak imkânsızdı. */
@media (max-width: 1040px) {
  .nav {
    max-height: calc(100vh - var(--header-h) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
@supports (height: 100dvh) {
  @media (max-width: 1040px) {
    /* mobil tarayıcılarda adres çubuğu kayarken 100vh yanılır */
    .nav { max-height: calc(100dvh - var(--header-h) - 1.5rem); }
  }
}

/* ---- 2) Telefonda menü 211px'lik dar bir kutuydu ----
   360px'lik bir ekranda 9 satırlık menü için fazla dar; artık kenar
   boşluklarına kadar açılıyor. */
@media (max-width: 560px) {
  .nav {
    left: var(--container-pad);
    right: var(--container-pad);
    min-width: 0;
  }
}

/* ---- 3) Dokunma hedefleri ----
   Fare ile 30px'lik bir düğme sorun değil, parmakla değil. Yalnız DOKUNMATİK
   girdide büyütülüyor (pointer: coarse) — masaüstü yoğunluğu bozulmuyor. */
/* Menü satırları: bu kapı "dokunmatik mi" değil "menü açılır kutuya döndü mü"
   sorusuna bağlı. Açılır kutu zaten yalnız dar ekranda var ve orada satırlar
   parmakla seçilir; ayrıca bu hâliyle dar bir masaüstü penceresinde de
   doğrulanabiliyor (pointer: coarse fare ile test edilemiyordu). */
@media (max-width: 1040px) {
  .nav a:not(.btn):not(.k-btn),
  .nav__cta,
  .nav a.btn.btn--brand {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav__cta, .nav a.btn.btn--brand { justify-content: center; }
  .menu-toggle { min-width: 44px; min-height: 44px; }
}

@media (pointer: coarse) {

  /* Anahtarın GÖRSEL boyutu değişmesin, yalnız dokunma alanı büyüsün */
  .theme-switch { position: relative; }
  .theme-switch::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .site-footer__grid a { display: inline-block; padding: 0.35rem 0; }
  .k-btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger { min-height: 44px; }
}

/* ---- 4) Hero ışık alanı dar ekranda ince bir şerit oluyordu ----
   Alan "genişlik - 44rem" kadar yer kaplıyor; 704-900px arasında geriye
   40-190px kalıyor ve tasarım öğesi değil, ekranın kenarında unutulmuş bir
   çizgi gibi duruyordu. Anlamlı genişlik bulamadığı yerde hiç çizilmiyor. */
@media (max-width: 900px) {
  .k-hero__field { display: none; }
}

/* ---- 5) Çerez bandı sohbet baloncuğunu ve Ecol rozetini örtüyordu ----
   Önce bandın yüksekliği kadar yukarı itmeyi denedik; band 235px olunca
   baloncuk bu sefer hero'daki "Ürünleri inceleyin" düğmesinin üstüne oturdu.
   Doğru cevap itmek değil: canlı destek onay verilmeden ZATEN yüklenemiyor,
   yani band açıkken o düğmenin bir işi yok. Bir anda tek karar sorulur;
   karar verilince düğmeler kendiliğinden görünür. */
body.has-consent-banner .chat-fab,
body.has-consent-banner .ecol-badge { display: none; }

/* ---- 5b) Çerez bandı kısa ekranda ekranın yarısını yiyordu ----
   Yatay telefonda (844x390) bant ekranın %54'ünü kaplıyordu: metin alt alta,
   düğmeler ayrı satırda. Kısa ekranda yan yana dizilim ve daha sıkı iç boşluk
   aynı bilgiyi yarı yükseklikte veriyor. Kural yüksekliğe bakıyor, genişliğe
   değil — sorun dar ekran değil, ALÇAK ekran. */
@media (max-height: 520px) and (min-width: 620px) {
  .consent__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding-block: 0.75rem;
  }
  .consent__title { margin-bottom: 0.15rem; }
  .consent__text p { font-size: 0.875rem; }
}
/* Çok alçak ekranda (klavye açık, küçük yatay telefon) bant kaydırılabilir
   olsun ki düğmeler her hâlükârda erişilebilir kalsın. */
@media (max-height: 400px) {
  .consent__inner { padding-block: 0.6rem; }
  .consent__text p { font-size: 0.8125rem; }
  .consent { max-height: 78vh; overflow-y: auto; overscroll-behavior: contain; }
}

/* ---- 6) İşlevsel metnin okunabilirlik tabanı ----
   10px'lik etiket telefonda okunmuyor. */
.chat-channel__badge { font-size: 0.75rem; }

/* ---- 7) Blog etiket çipleri ----
   11.5px yazı ve 27px yükseklik; hem okunmuyor hem parmakla ıskalanıyordu. */
.tag, .tag--soft {
  font-size: 0.75rem;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
@media (pointer: coarse) {
  .tag, .tag--soft { min-height: 40px; padding-left: 0.85rem; padding-right: 0.85rem; }
  .post-card__more { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---- 8) Tablet dikeyde (768px) her izgara tek sutuna dusuyordu ----
   Kirilma noktalari 820-900px arasindaydi; 768px'lik iPad dikeyde 9 modul
   karti alt alta diziliyor, ekranin yarisi bos kaliyordu. Araya iki sutunlu
   bir adim konuldu.

   ⚠ Her bilesenin ust siniri KENDI uc-sutun esigidir. Once tek bir
   "min-width: 620px" blogu yazildi ve dosyada sonra geldigi icin 1280px'te
   uc sutunlu izgaralari da ikiye dusurdu — sinirlar bu yuzden acikca yazili.

   TEK KALAN KART: cerceveli izgaralarda (gap:1px + zemin) bos hucre dolu bir
   cizgi blogu olarak gorunuyor. Tek sayida ogede son kart iki sutuna
   yayiliyor — ":last-child:nth-child(odd)" tam olarak "toplam tek sayi"
   demektir.
   ============================================================ */

/* uc sutuna 860px'te geciyor */
@media (min-width: 620px) and (max-width: 859px) {
  .k-services { grid-template-columns: repeat(2, 1fr); }
  .k-services > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* uc sutuna 900px'te geciyor */
@media (min-width: 620px) and (max-width: 899px) {
  .k-roles { grid-template-columns: repeat(2, 1fr); }
  .k-roles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .k-products { grid-template-columns: repeat(2, 1fr); }
}
/* uc sutuna 820px'te geciyor */
@media (min-width: 620px) and (max-width: 819px) {
  .k-principles { grid-template-columns: repeat(2, 1fr); }
}
/* zaten iki sutunlu; yalnizca esik asagi cekiliyor */
@media (min-width: 620px) {
  .k-guide { grid-template-columns: repeat(2, 1fr); }
  .k-guide > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .k-faq   { grid-template-columns: repeat(2, 1fr); }
  .k-faq   > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .k-cases { grid-template-columns: repeat(2, 1fr); }
}