/* ==========================================================================
   KAVELA V13 - TEMA
   Kaynak: duzeltilmis tasarim canvas'i (Kavela Katalog Tasarimi).
   Her olcu tasarimin kendi satir ici stilinden ALINDI, yeniden yorumlanmadi.
   Bir deger tasarimda yoksa yorum neden uydurulduguu soyler.

   ⚠⚠ DURUM MAKINESI: sunucu panelleri HER ZAMAN basar, kapatmayi CSS yapar.
   Kapatma `display:none` DEGIL -- height:0 + visibility:hidden. Panel metni
   DOM'da kalmali (parite kapisi word_count'u oradan sayiyor).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Kabuk temeli
   -------------------------------------------------------------------------- */
.k-site {
  font-family: var(--font-sans);
  color: var(--text-primary);
  letter-spacing: var(--ls-normal);
  background: var(--surface-page);
  min-height: 100vh;
}
.k-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.k-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.k-skip {
  position: absolute; left: var(--space-4); top: calc(var(--space-4) * -6);
  z-index: 100; padding: var(--space-3) var(--space-5);
  background: var(--surface-page); border-radius: var(--radius-chip);
  box-shadow: var(--shadow-3); font-size: var(--size-body-sm);
  transition: top var(--duration-fast) var(--ease-standard);
}
.k-skip:focus { top: var(--space-4); }

/* --------------------------------------------------------------------------
   1. Ust serit -- C1: sadelestirildi, sosyal ikonlar footer'a tasindi,
      WhatsApp'in ham yesili notrlendi.
   -------------------------------------------------------------------------- */
.k-topbar { position: relative; z-index: 61; background: var(--surface-subtle); }
.k-topbar__inner {
  min-height: var(--topbar-h);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-start; gap: var(--space-7);
  padding-block: var(--space-1);
}
.k-topbar__link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--size-caption); color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.k-topbar__link:hover { color: var(--text-primary); }
.k-topbar__icon { width: var(--space-5); height: var(--space-5); flex: none; }

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */
.k-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface-scrim);
  backdrop-filter: var(--blur-panel);
  -webkit-backdrop-filter: var(--blur-panel);
  box-shadow: 0 1px 24px rgba(29, 27, 25, .05);
}
.k-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-8);
}
.k-logo { display: inline-flex; align-items: center; flex: none; }
.k-logo__img { height: 18px; width: auto; display: block; }
.k-logo svg { height: 18px; width: auto; display: block; fill: currentColor; }

.k-nav { display: flex; gap: var(--space-7); margin-right: auto; }
.k-nav__link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--size-body-sm); font-weight: 500; white-space: nowrap;
  color: var(--text-primary); background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.k-nav__link:hover { color: var(--text-secondary); }
.k-nav__chev { transition: transform var(--duration-slow) var(--ease-out); }
.k-nav__link[aria-expanded="true"] .k-nav__chev { transform: rotate(180deg); }
.k-nav__link[aria-expanded="true"] { color: var(--text-secondary); }

.k-header__actions { display: flex; align-items: center; gap: var(--space-5); }
.k-lang {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--size-caption); color: var(--text-tertiary);
}
.k-lang a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-chip); color: var(--text-tertiary);
}
.k-lang a[aria-current="true"] { color: var(--text-primary); background: var(--grey-100); }
.k-lang__sep { opacity: .4; }

.k-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h-sm); height: var(--control-h-sm);
  border-radius: var(--radius-chip); color: var(--text-secondary);
  background: none; border: 0; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.k-iconbtn:hover { background: var(--grey-100); }
.k-burger { display: none; }

/* --------------------------------------------------------------------------
   3. Mega menu -- ⚠ durum makinesi: data-open / data-active
   -------------------------------------------------------------------------- */
/* ⚠ Panel OPAK. Tasarimda yari saydam scrim vardi ama hero artik tam
   genislikte bir FOTOGRAF; %93 beyaz uzerinden kanepe okunuyor ve menu
   metni zorlasiyordu (olculdu, ekran goruntusuyle yakalandi). */
.k-mega__panel {
  position: absolute; left: 0; right: 0; top: 100%; overflow: hidden;
  background: var(--surface-page);
  box-shadow: 0 1px 24px rgba(29, 27, 25, .05);
  transition: height var(--duration-slow) var(--ease-out),
              opacity var(--duration-base) var(--ease-standard);
}
/* Kapali durum: yukseklik 0 + gorunmez. display:none DEGIL -- metin DOM'da kalir. */
.k-mega__panel[data-open="false"] {
  height: 0; opacity: 0; pointer-events: none; visibility: hidden;
}
.k-mega__panel[data-open="true"] {
  height: auto; opacity: 1; pointer-events: auto; visibility: visible;
}
.k-mega__grid {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) 200px;
  gap: var(--space-10);
  padding-block: var(--space-9) var(--space-10);
}
.k-mega__col { display: flex; flex-direction: column; gap: var(--space-2); }
.k-mega__coltitle {
  font-size: var(--size-eyebrow); letter-spacing: var(--ls-wide);
  color: var(--text-tertiary); text-transform: uppercase; margin: 0 0 var(--space-3);
}
/* ⚠ HOVER KUTUSU YOK. Secili/uzerine gelinen kategori bir zemin dikdortgeni
   ile degil, yalniz METIN ile isaretleniyor (renk + oku kaydirma). Kutu
   projede istenmiyor. */
.k-mega__rootlink {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) 0;
  font-size: var(--size-body); font-weight: 500; color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.k-mega__rootlink:hover,
.k-mega__root[data-active="true"] > .k-mega__rootlink { color: var(--text-primary); }
.k-mega__caret {
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-base) var(--ease-out);
}
.k-mega__root[data-active="true"] .k-mega__caret { opacity: 1; transform: none; }

.k-mega__stage { min-width: 0; }
.k-mega__segs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); }
.k-mega__seg {
  display: inline-flex; align-items: center; height: var(--control-h-sm);
  padding: 0 var(--space-6); border-radius: var(--radius-chip);
  font-size: var(--size-body-sm); font-weight: 500; color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-default);
  transition: background var(--duration-fast) var(--ease-standard);
}
.k-mega__seg:hover { background: var(--grey-50); color: var(--text-primary); }
.k-mega__seg--prem { background: var(--brand-cream-50); box-shadow: none; }
.k-mega__seg--prem:hover { background: var(--brand-cream-200); }
.k-mega__sub[data-on="false"] { height: 0; opacity: 0; visibility: hidden; overflow: hidden; }
.k-mega__sub[data-on="true"] { height: auto; opacity: 1; visibility: visible; }
.k-mega__subtitle {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--size-display-3); letter-spacing: var(--ls-tight);
  font-weight: 600; margin: 0;
}
.k-mega__sublist {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-7); margin-top: var(--space-7);
  list-style: none; padding: 0;
}
.k-mega__sublink,
.k-mega__link {
  display: block; padding: var(--space-2) 0;
  font-size: var(--size-body-sm); color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.k-mega__sublink:hover,
.k-mega__link:hover { color: var(--text-primary); }
.k-mega__links { list-style: none; padding: 0; margin: 0;
                 display: flex; flex-direction: column; gap: var(--space-2); }

/* --------------------------------------------------------------------------
   4. Mobil cekmece -- tasarimda yok (masaustu prototip), mobil icin kuruldu.
      Dili mega menuden aliniyor: ayni radius, ayni ritim, ayni renkler.
   -------------------------------------------------------------------------- */
.k-drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--surface-overlay);
  transition: opacity var(--duration-base) var(--ease-standard);
}
.k-drawer[data-open="false"] { opacity: 0; pointer-events: none; visibility: hidden; }
.k-drawer[data-open="true"] { opacity: 1; pointer-events: auto; visibility: visible; }
.k-drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(88vw, 420px);
  background: var(--surface-page); padding: var(--space-6) var(--space-6) var(--space-10);
  overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}
.k-drawer[data-open="true"] .k-drawer__panel { transform: none; }
.k-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.k-drawer__list { list-style: none; padding: 0; margin: 0;
                  display: flex; flex-direction: column; gap: var(--space-1); }
.k-drawer__link {
  display: block; padding: var(--space-4) var(--space-4);
  margin-inline: calc(var(--space-4) * -1); border-radius: var(--radius-md);
  font-size: var(--size-body); color: var(--text-primary);
}
.k-drawer__link:hover { color: var(--text-link-hover); }
.k-drawer__link--sub { font-size: var(--size-body-sm); color: var(--text-secondary); }
.k-label {
  font-size: var(--size-eyebrow); letter-spacing: var(--ls-wide);
  color: var(--text-tertiary); text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Butonlar -- B1: chip geometrisi pill degil (--radius-chip = 6px)
   -------------------------------------------------------------------------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3); height: var(--control-h-lg); padding: 0 var(--space-8);
  white-space: nowrap; border: 0; cursor: pointer; font-family: inherit;
  border-radius: var(--radius-chip);
  font-size: var(--size-body-sm); font-weight: 500;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
/* Birincil = bordo. B2: bordo yalnizca aksiyon ve durum icin. */
.k-btn--primary { background: var(--surface-brand); color: var(--text-inverse); }
.k-btn--primary:hover { background: var(--surface-brand-hover); color: var(--text-inverse); }
.k-btn--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-primary); }
.k-btn--quiet:hover { background: var(--grey-50); }
.k-btn--light { background: var(--grey-0); color: var(--ink); }
.k-btn--light:hover { background: var(--grey-100); color: var(--ink); }
.k-btn--sm { height: var(--control-h-md); padding: 0 var(--space-6); }
.k-textlink {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--size-body-sm); color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.k-textlink:hover { color: var(--text-link-hover); }

/* --------------------------------------------------------------------------
   6. Footer -- C7: sosyal ikonlar burada
   -------------------------------------------------------------------------- */
/* Cerez tercihleri butonu.
   ⚠ OLCULDU: `k-footer__cky` sinifi footer.php'de VARDI ama bu dosyada HIC
   karsiligi YOKTU. Stil almayan bir <button> tarayicinin varsayilan kromunu
   basar; ekranda komsu metin baglantilarinin yaninda bir isletim sistemi
   butonu gibi duruyordu.
   Cozum yeni bir gorunum TANIMLAMAK degil, butonu komsu <a>'lardan MIRAS
   almaya zorlamak: ayni satirdaki baglantilarla birebir ayni dil, ayri bir
   token ya da renk gerekmiyor. Ayirac cizgisi/altcizgi YOK. */
.k-footer__cky {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}
.k-footer__cky:hover {
  color: var(--text-primary);
}
/* Klavye odagi gorunur kalmali; fare odaginda halka basilmaz. */
.k-footer__cky:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.k-footer { margin-top: var(--section-y); padding: var(--space-11) 0 var(--space-10); }
.k-footer__cols {
  display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--space-9);
}
/* ⚠ Logo SVG satir ici basiliyor; boyut sinirini SINIF veriyor. Sinif
   basilmadiginda footer'da dogal boyutuna aciliyordu (mobilde dev gorunum). */
.k-footer__logo { height: 18px; width: auto; display: block; }
.k-footer svg.k-footer__logo { height: 18px; width: auto; }
.k-footer__blurb {
  margin: var(--space-4) 0 0; max-width: 240px;
  font-size: var(--size-body-sm); color: var(--text-secondary);
}
.k-footer__title {
  font-size: var(--size-eyebrow); letter-spacing: var(--ls-wide);
  color: var(--text-tertiary); text-transform: uppercase; margin: 0;
}
.k-footer__list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
  margin: var(--space-5) 0 0;
}
.k-footer__list a { font-size: var(--size-body-sm); color: var(--text-secondary); }
.k-footer__list a:hover { color: var(--text-link-hover); }
.k-social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
            margin: var(--space-6) 0 0; list-style: none; padding: 0; }
.k-social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-8); height: var(--space-8);
  border-radius: var(--radius-circle); color: var(--text-tertiary);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.k-social__link:hover { background: var(--grey-100); color: var(--text-primary); }
.k-footer__bar {
  margin-top: var(--space-10);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-5); font-size: var(--size-caption); color: var(--text-tertiary);
}
.k-footer__bar a { color: var(--text-tertiary); }
.k-footer__bar a:hover { color: var(--text-link-hover); }

/* --------------------------------------------------------------------------
   7. Anasayfa
   -------------------------------------------------------------------------- */
.k-eyebrow {
  font-size: var(--size-eyebrow); letter-spacing: var(--ls-wide);
  text-transform: uppercase; margin: 0; opacity: .55;
}
.k-home-sec { margin-top: var(--section-y); }
/* ⚠ Renkli bant kendi ust dolgusunu ICERIDE tasiyor; onceki bolumun son satiri
   (urun etiketi) bandin kenarina yapisiyordu. Bosluk yalnizca banda KOMSU
   bolume verilir -- iki bant arasina beyaz serit sokmamak icin genel degil. */
.k-home-sec:has(+ .k-line) { margin-bottom: var(--section-y); }
.k-secline {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-5);
  padding-bottom: var(--space-9);
}
.k-secline__t {
  margin: 0; font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: var(--ls-tight); font-weight: 600; line-height: 1.05;
}

/* Hero -- tam genislikte tek gorsel (new.kavela.furniture ile ayni).
   Metin iki satir; H1 ekran okuyucuda (SEO), gorselin ustune yigilmiyor. */
.k-hero { position: relative; background: var(--surface-sunken); }
.k-banner { display: block; }
.k-banner img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3840 / 1646; object-fit: cover;
}
/* ⚠ Metin fotografin uzerinde: banner acik tonlu oldugu icin metin KOYU,
   ama garanti fotografa birakilmaz -- arkada acik bir perde var. */
.k-banner { position: relative; display: block; }
.k-banner::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 46%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.k-banner__text {
  position: absolute; left: 0; right: 0; top: clamp(24px, 5vw, 64px); z-index: 2;
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--gutter); color: var(--ink);
  text-align: center;
}
.k-banner__t {
  margin: 0; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.04;
  letter-spacing: var(--ls-tight); font-weight: 600;
  /* Kumas gecisi: bukle -> bordo -> deri -> zeytin -> ceviz.
     ⚠ TUM duraklar KOYU secildi -- banner acik tonlu bir fotograf, krem/bej
     bir durak metni okunmaz hale getirirdi. Gradyan renk verir, kontrast
     kaybettirmez. */
  background-image: linear-gradient(100deg,
    #3B322B 0%, #7E2B2B 26%, #8A4A2A 50%, #45503E 74%, #2E2B27 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Gradyan metin desteklenmiyorsa (ya da forced-colors) duz murekkebe don. */
@supports not (background-clip: text) {
  .k-banner__t { background-image: none; color: var(--ink); }
}
@media (forced-colors: active) {
  .k-banner__t { background-image: none; color: CanvasText; }
}
.k-banner__b {
  margin: var(--space-3) 0 0; font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  /* ⚠ --text-secondary (grey-600) fotograf uzerinde 3.46 olculdu: kucuk metin
     icin AA (4.5) ALTINDA. grey-700 ile 5.1'e cikiyor ve basligin altinda
     kalarak hiyerarsiyi hala koruyor. */
  color: var(--grey-700);
}

/* Essentials / Premium girisleri -- iki hattin mekanigi menude de burada da. */
.k-home-sec--tight { margin-top: var(--space-10); }
.k-segs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.k-seg {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-7); border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  transition: background var(--duration-fast) var(--ease-standard);
}
.k-seg:hover { background: var(--grey-100); }
.k-seg--prem { background: var(--brand-cream-50); }
.k-seg--prem:hover { background: var(--brand-cream-200); }
.k-seg__name { font-size: var(--size-h2); font-weight: 600; letter-spacing: var(--ls-snug); }
.k-seg__desc { font-size: var(--size-body-sm); color: var(--text-secondary); }
.k-segs--arch { grid-template-columns: repeat(2, max-content); gap: var(--space-3);
                margin-top: var(--space-7); }
.k-seg--sm { padding: 0 var(--space-6); height: var(--control-h-sm);
             justify-content: center; border-radius: var(--radius-chip); }
.k-seg--sm .k-seg__name { font-size: var(--size-body-sm); font-weight: 500; }
.k-seg--sm.is-now { background: var(--surface-brand); color: var(--text-inverse); }

/* Kategoriler -- C4: bes esit kart DEGIL; biri hakim, digerleri tali.
   ⚠ Etiket olcegi hepsinde AYNI: hakim karoda buyutulunce plate alt
   kenarlari 17px kayiyordu (canvas'ta olculdu). Hiyerarsi alandan gelir. */
.k-cats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6); grid-auto-rows: 1fr;
}
.k-cats__item { display: flex; flex-direction: column; }
/* ⚠ URUN KUPURLERI KIRPILMAZ. `cover` ile hakim kategori karosunda koltugun
   alt yarisi, izgarada Bridge'in uclari kesiliyordu (olculdu). Kupurler
   `contain` ile kendi orani icinde duruyor ve arkalarinda cerceve YOK --
   PDP ile ayni karar. */
.k-cats__plate {
  position: relative; aspect-ratio: 1 / 1; background: transparent;
  display: block;
}
/* Hakim karoda plate'in yuksekligi esnek; gorsel mutlak konumlanmazsa
   altta bos serit kaliyordu (1440'ta olculdu). */
.k-cats__plate img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
/* Sahne fotografi kutuyu DOLDURUR; kupur `contain` kalir. */
.k-cats__plate img.is-scene { object-fit: cover; }
.k-cats__plate:has(img.is-scene) { background: var(--surface-subtle);
                                   border-radius: var(--radius-xl); overflow: hidden; }
.k-cats__item:hover .k-cats__name { color: var(--text-link-hover); }
.k-cats__name {
  margin-top: var(--space-4); font-size: var(--size-h2);
  transition: color var(--duration-fast) var(--ease-standard);
  font-weight: 600; letter-spacing: var(--ls-snug);
}
.k-cats > :first-child { grid-column: span 2; grid-row: span 2; position: relative; }
.k-cats > :first-child .k-cats__plate { aspect-ratio: auto; flex: 1 1 auto; }

/* ⚠ HAKIM KARODA YAZI GORSELIN USTUNDE (Apple kartlari gibi), kucuklerde
   ALTINDA. Karisim kasitli: hangi kategorinin ana kategori oldugu tek
   bakista okunuyor -- ozellikle mobilde, etiket asagida kalinca kayboluyordu.
   ⚠ Kontrast fotografa birakilmaz: ustte koyudan seffafa bir perde var,
   metin daima onun uzerinde. */
.k-cats > :first-child .k-cats__name {
  position: absolute; left: 0; top: 0; right: 0; z-index: 2;
  margin: 0; padding: var(--space-7) var(--space-7) var(--space-11);
  color: #fff; font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: var(--ls-tight); line-height: 1.1;
  /* ⚠ Alfa degerleri OLCUMDEN turedi, gozden degil. Onceki scrim (.55/.28)
     ile beyaz basligin arkasindaki gercek piksel kontrasti 2.07 olculuyordu --
     baslik sahne fotografinda kayboluyordu. AA icin arka plan parlakligi
     <=0.18 gerekiyor; harf satirlarinin dustugu ust bantta bunu saglayan
     degerler asagidakiler. Degistirirsen `contrast.py` ile YENIDEN OLC. */
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .60) 34%,
    rgba(0, 0, 0, .22) 66%, rgba(0, 0, 0, 0) 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  pointer-events: none;
}
.k-cats > :first-child:hover .k-cats__name { color: #fff; }

/* Koyu bant -- C5: ortalanmis blok degil, sayfanin sol kenariyla hizali. */
/* ⚠ `display:grid` DEGIL: kap izgara ogesi olunca `margin:0 auto` merkezleme
   yerine asimetrik oturuyordu (olculdu: sol 185 / sag 15, olmasi gereken 100).
   Flex ogesinde `margin-inline:auto` deterministik calisiyor. */
.k-band {
  margin-top: var(--section-y); background: var(--surface-inverse);
  color: var(--text-inverse); display: flex; align-items: center;
}
/* ⚠ min-height YOK: icerik kisa oldugunda bandin altinda anlamsiz bir beyaz
   serit kaliyordu (olculdu). Yuksekligi artik yalniz dolgu belirliyor. */
.k-band > .k-container { width: 100%; }
.k-band__inner {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 5vw, 80px); align-items: end;
  padding-block: var(--section-y);
}
.k-band__t {
  margin: var(--space-7) 0 0; font-size: clamp(32px, 5.6vw, 84px);
  line-height: .99; letter-spacing: var(--ls-tight); font-weight: 600;
  text-wrap: pretty; max-width: 12ch;
}
.k-band__t--sm { font-size: clamp(26px, 3.4vw, 46px); line-height: 1.07; max-width: 16ch; }
.k-band__b {
  margin: 0 0 var(--space-7); max-width: 46ch;
  font-size: var(--size-body-lg); line-height: var(--lh-body-lg); opacity: .7;
}

/* Urun izgarasi */
.k-prodgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-11) var(--space-7); margin-top: var(--space-7);
}
.k-pcard__link { display: block; }
.k-pcard__media { display: block; aspect-ratio: 1 / 1; }
.k-pcard__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.k-pcard__link:hover .k-pcard__name { color: var(--text-link-hover); }
.k-pcard__body { display: block; margin-top: var(--space-4); }
.k-pcard__name { display: block; font-size: var(--size-h3); font-weight: 600;
                 transition: color var(--duration-fast) var(--ease-standard); }
.k-pcard__cat { display: block; margin-top: var(--space-1);
                font-size: var(--size-body-sm); color: var(--text-secondary); }

/* Journal */
.k-journal {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8); margin-top: var(--space-7);
}
.k-postcard { display: block; }
.k-postcard__plate {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  /* ⚠ Levha KREM olunca urun fotograflarinin kendi BEYAZ zemini icerde ayri bir
     kare olarak goruluyor -- cerceve icinde cerceve. Levha beyaza cekildi:
     fotografin zemini levhaya karisir, urun cercevesiz durur. */
  border-radius: var(--radius-xl); background: #FFFFFF;
  padding: var(--space-7);
}
/* ⚠ CIFT KIRPMA idi: kaynak zaten kavela-card (800x600 SERT kirpma), ustune
   object-fit:cover 16/10'a bir daha kirpiyordu -- karyola ve silindir ayakli
   masa fotograflari kesiliyordu. Kaynak artik kirpilmamis kavela-gallery,
   burada da contain: urun butun halde levhaya oturur, kesilmez. */
.k-postcard__plate img { width: 100%; height: 100%; object-fit: contain; display: block; }
.k-postcard__meta { display: block; margin-top: var(--space-4);
                    font-size: var(--size-caption); color: var(--text-tertiary); }
.k-postcard__t { display: block; margin-top: var(--space-2);
                 font-size: var(--size-h2); line-height: 1.22;
                 letter-spacing: var(--ls-snug); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. Ankara/showroom blogu

   ⚠ Bu bolumun MARKUP'i temada (template-parts/home/ankara.php) ama CSS'i
     bir MU-PLUGIN icinde (kavela-home-cta.php) satir ici geliyor -- eski
     tasarim dili (krem zemin, JetBrains Mono, 12px radius, siyah kart) ve
     `minmax(260px, .65fr)` yuzunden dar ekranda YATAY KAYDIRMA uretiyordu
     (olculdu: 500px viewport'ta kolon 626px).
   ⚠ Satir ici <style> bizden SONRA geldigi icin esit ozgullukte kaybederiz;
     bu yuzden hepsi `.k-site` onekiyle yaziliyor (0,2,0 > 0,1,0).
     Kalici cozum: blogu V13 sablonuna tasiyip mu-plugin CSS'ini emekliye ayirmak.
   -------------------------------------------------------------------------- */
/* ⚠ Krem YALNIZ Premium hattinin rengi. Ankara blogu da krem olunca iki
   bolge yan yana tek uzun krem serit gibi okunuyordu ve krem anlamini
   yitiriyordu. Burasi notr yuzeyde. */
.k-site .kvl-ankara {
  margin-top: var(--section-y); background: var(--surface-subtle);
}
.k-site .kvl-ankara__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .88fr);
  gap: var(--space-10); align-items: stretch;
}
.k-site .kvl-ankara h2 {
  margin: var(--space-5) 0 0; font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.12; letter-spacing: var(--ls-tight); font-weight: 600;
  max-width: 22ch; font-family: var(--font-sans);
}
.k-site .kvl-ankara__eyebrow,
.k-site .kvl-ankara__label {
  display: block; font-family: var(--font-sans);
  font-size: var(--size-eyebrow); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-tertiary);
}
.k-site .kvl-ankara__lead > p {
  margin: var(--space-5) 0 0; max-width: 62ch;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--text-secondary);
}
.k-site .kvl-ankara__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--space-6); margin: var(--space-9) 0 0; padding: 0; list-style: none;
}
.k-site .kvl-ankara__facts li { display: block; }
.k-site .kvl-ankara__facts strong {
  display: block; font-size: var(--size-h3); font-weight: 600; margin-bottom: var(--space-2);
}
.k-site .kvl-ankara__facts span {
  display: block; font-size: var(--size-body-sm); line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}
/* ⚠ Kartin ARKASINDAKI harita statik: assets/img/showroom-map.webp (OSM karolarindan
   BIR KEZ uretildi, calisma aninda dis istek YOK -- asset self-host kurali).
   Isaretci GORSELE GOMULU -- object-fit:cover kirpmasindan bagimsiz olarak dogru noktada.

   ⚠⚠ Karartma DUZ PERDE DEGIL. Duz perde tum karti esit karartip haritayi olduruyordu
   (kullanici: "cok opak kaldi"). Yerine metnin ARKASINA icerik yuksekliginde YEREL panel
   kondu; panelin altindaki 76px tuy gecisle harita tamamen aciliyor.
   Kazanc: metin zemini kart yuksekliginden BAGIMSIZ ve sabit -> olcum deterministik,
   panelin disinda harita %100 gorunur.

   Panel alfasi GOZLE degil HESAPLANDI (/tmp/kv_contrast.py, SUNULAN webp uzerinden):
   haritanin en parlak pikseli luma=199; .78 alfa ile en dusuk metin kontrasti 4.97:1
   (AA normal metin 4.5:1). ⚠ Alfayi dusuren ya da haritayi degistiren YENIDEN OLCSUN.
   ⚠ Tum metin panelin ICINDE olmali (OSM atfi dahil) -- disari tasan metin olculmemistir. */
.k-site .kvl-ankara__card {
  position: relative; overflow: hidden;
  font-style: normal; background: var(--surface-inverse); color: var(--text-inverse);
  border-radius: var(--radius-lg); padding: var(--space-9);
  min-height: 560px; display: flex; flex-direction: column;
}
.k-site .kvl-ankara__map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; display: block;
}
.k-site .kvl-ankara__cardin {
  position: relative;
  margin: calc(var(--space-9) * -1) calc(var(--space-9) * -1) 0;
  padding: var(--space-9) var(--space-9) var(--space-7);
  background: rgba(44, 42, 39, .78);
}
.k-site .kvl-ankara__cardin::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 76px;
  background: linear-gradient(180deg, rgba(44, 42, 39, .78) 0%, rgba(44, 42, 39, 0) 100%);
  pointer-events: none;
}
.k-site .kvl-ankara__attr {
  display: block; margin: var(--space-6) 0 0;
  font-size: 10px; line-height: 1.4; letter-spacing: var(--ls-wide);
  color: var(--text-inverse); opacity: .68;
}
.k-site .kvl-ankara__card .kvl-ankara__label { color: var(--text-inverse); opacity: .80; }
.k-site .kvl-ankara__card strong {
  display: block; margin: var(--space-4) 0 var(--space-3);
  font-size: var(--size-body); font-weight: 500;
}
.k-site .kvl-ankara__hours {
  display: block; margin: 0 0 var(--space-5); font-size: var(--size-caption);
  line-height: var(--lh-caption); color: var(--text-inverse); opacity: .82;
}
.k-site .kvl-ankara__links {
  display: flex; flex-direction: column; gap: var(--space-3);
  font-size: var(--size-body-sm);
}
.k-site .kvl-ankara__links a { color: var(--text-inverse); opacity: .96; }
.k-site .kvl-ankara__links a:hover { opacity: 1; color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   9. Katalog / kategori arsivi
   -------------------------------------------------------------------------- */
.k-arch { padding-top: var(--space-10); }
.k-crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  list-style: none; padding: 0; margin: 0;
  font-size: var(--size-caption); color: var(--text-tertiary);
}
.k-crumbs__list a { color: var(--text-tertiary); }
.k-crumbs__list a:hover { color: var(--text-link-hover); }
.k-arch__head { margin-top: var(--space-6); }
.k-arch__title {
  margin: 0; font-size: var(--size-display-2); line-height: var(--lh-display-2);
  letter-spacing: var(--ls-tight); font-weight: 600;
}
.k-arch__lead { margin-top: var(--space-4); color: var(--text-secondary); }
.k-prose { max-width: var(--container-narrow); }
.k-prose p { margin: 0 0 var(--space-5); font-size: var(--size-body); line-height: var(--lh-body); }
.k-prose p:last-child { margin-bottom: 0; }
.k-prose h2 { font-size: var(--size-h2); font-weight: 600; margin: var(--space-8) 0 var(--space-4); }
.k-prose h3 { font-size: var(--size-h3); font-weight: 600; margin: var(--space-7) 0 var(--space-3); }
.k-prose ul, .k-prose ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.k-prose li { margin-bottom: var(--space-2); }
.k-prose a { color: var(--text-link); text-decoration: underline;
             text-underline-offset: 3px; text-decoration-color: var(--grey-300); }
.k-prose a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }

.k-catnav { margin-top: var(--space-9); }
.k-catnav__list { display: flex; flex-wrap: wrap; gap: var(--space-2);
                  list-style: none; padding: 0; margin: 0; }
/* ⚠ Iki ayri is, iki ayri gorunum:
   KATEGORI = gezinme -> DOLU yuzey, cerceve yok.
   FILTRE/SIRALAMA (.k-chip, .k-sort) = kontrol -> CERCEVELI, zeminsiz.
   Onceden ikisi de ince cerceveli pill'di ve ayirt edilemiyordu.
   ⚠ align-items: baseline sabit yukseklikli kutuda metni taban cizgisine
   oturtuyordu -> metin yukarida kaliyor, altta olu bosluk birakiyordu. */
.k-catnav__link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  height: var(--control-h-sm); padding: 0 var(--space-5);
  border-radius: var(--radius-chip); font-size: var(--size-body-sm);
  color: var(--text-secondary); background: var(--brand-cream-50); box-shadow: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.k-catnav__link:hover { background: var(--grey-100, #EDEAE5); color: var(--text-primary); }
/* B2: aktif filtre durumu bordo -- dekor degil, DURUM. */
.k-catnav__link.is-now { background: var(--surface-brand); color: var(--text-inverse);
                         box-shadow: none; }
.k-catnav__n { font-size: var(--size-caption); opacity: .7; font-variant-numeric: tabular-nums; }

/* ── r78: ALT seviye serit ────────────────────────────────────────────────
   Kategori sayfasinda iki serit var: ust seviye (kardesler, icinde
   bulunulan dal isaretli) ve alt kategoriler. Ikisi de ayni dolu krem
   yuzeyi tasiyinca ESIT agirlikta okunuyordu -- hangisinin digerinin ALTI
   oldugu anlasilmiyordu.
   Ayrim SEVIYEDEN kurulur: ust seviye yuzeyini korur, alt seviye yuzeyini
   birakip sessiz metne iner. ⚠ Ayirac cizgi YOK -- tema ayirac kullanmiyor;
   hiyerarsi punto, ton ve YAKINLIK ile kurulur. */
.k-catnav--sub { margin-top: var(--space-4); }
.k-catnav--sub .k-catnav__list { gap: var(--space-2) var(--space-5); }
.k-catnav--sub .k-catnav__link {
  height: auto;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: var(--size-caption);
  color: var(--text-muted, var(--grey-500));
  gap: var(--space-2);
}
.k-catnav--sub .k-catnav__link:hover { background: none; color: var(--text-primary); }
/* Secili alt kategori: bordo METIN. Durum bilgisi korunur, agirlik
   ust seviyeyi ezmez. */
.k-catnav--sub .k-catnav__link.is-now {
  background: none;
  color: var(--surface-brand);
  font-weight: 500;
}

.k-arch__main { margin-top: var(--space-9); }
.k-arch-bar { display: flex; flex-wrap: wrap; align-items: center;
              justify-content: space-between; gap: var(--space-5); }
.k-arch-count { margin: 0; font-size: var(--size-caption); color: var(--text-tertiary);
                font-variant-numeric: tabular-nums; }
.k-arch-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-11) var(--space-7); margin-top: var(--space-7);
}
.k-arch-card__link { display: block; }
.k-arch-card__media { display: block; aspect-ratio: 1 / 1; }
.k-arch-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.k-arch-card__link:hover .k-arch-card__name { color: var(--text-link-hover); }
.k-arch-card__body { display: block; margin-top: var(--space-4); }
.k-arch-card__name { display: block; font-size: var(--size-h3); font-weight: 600;
                     transition: color var(--duration-fast) var(--ease-standard); }
.k-arch-card__cats { display: block; margin-top: var(--space-1);
                     font-size: var(--size-body-sm); color: var(--text-secondary); }
.k-arch__empty { margin-top: var(--space-9); color: var(--text-secondary); }

.k-pager { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-12); }
.k-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 var(--space-4);
  border-radius: var(--radius-chip); font-size: var(--size-body-sm);
  color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-hairline);
  font-variant-numeric: tabular-nums;
}
.k-pager .page-numbers:hover { background: var(--grey-50); color: var(--text-primary); }
.k-pager .page-numbers.current { background: var(--surface-brand); color: var(--text-inverse); box-shadow: none; }
.k-pager .dots { box-shadow: none; }

/* --------------------------------------------------------------------------
   10. Urun sayfasi (PDP)
   -------------------------------------------------------------------------- */
.k-pdp { padding-top: var(--space-9); }
.k-pdp__row {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--space-11); margin-top: var(--space-7); align-items: start;
}
/* ⚠ CERCEVE YOK. Onceki hali 4/3 plate + object-fit:contain idi; urun
   fotograflari zaten beyaz zeminli kupur oldugu icin gorselin iki yaninda
   gri seritler kaliyor ve "yarim kutu" gorunuyordu (olculdu). Simdi gorsel
   kendi orani ile akiyor, arkasinda yuzey yok. */
.k-pdp__hero { display: block; }
.k-pdp__hero img { width: 100%; height: auto; display: block; }
/* Kolon sayisi PHP'den geliyor (`--thumb-cols`): 6 gorselde 5+1 oksuz satir
   olusuyordu. */
/* --------------------------------------------------------------------------
   PDP galerisi -- sabit kutu + masonry

   ⚠ Hero'nun sabit orani yoktu; kareler farkli ebatlarda oldugu icin kucuk
     resme her tiklamada kutu yeniden boyutlaniyor ve sayfa sicriyordu
     (kullaniciya "sayfa yenileniyor" gibi geliyordu).
   ⚠ Zemin BEYAZ: urun fotograflari zaten beyaz kupur; krem/gri zeminde
     contain iki yanda serit birakiyordu -- sorun oran degil zemindi.
   -------------------------------------------------------------------------- */
.k-pdp__hero {
  position: relative; aspect-ratio: 4 / 3; background: #FFFFFF;
  border-radius: var(--radius-lg, 14px); overflow: hidden;
}
.k-pdp__hero img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: opacity .22s ease;
}
.k-pdp__hero.is-swapping img { opacity: 0; }

/* Kucuk resimler: degisken oranlari zorlamadan yerlestirir. */
.k-thumbs {
  columns: var(--thumb-cols, 5); column-gap: var(--space-4);
  margin-top: var(--space-4);
}
.k-thumbs__item {
  break-inside: avoid; margin-bottom: var(--space-4); width: 100%;
  aspect-ratio: 1 / 1; overflow: hidden; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius-lg); background: var(--surface-subtle);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.k-thumbs__item img { width: 100%; height: 100%; object-fit: contain; display: block;
                      padding: var(--space-2); }
/* B2: secili gorsel halkasi bordo. */
.k-thumbs__item[data-on="true"] { box-shadow: inset 0 0 0 1.5px var(--brand-burgundy); }

/* Sag ray -- D2: yapisma noktasi header yuksekliginden turer, sihirli sayi yok. */
.k-rail { position: sticky; top: calc(var(--header-h) + var(--space-7)); align-self: start; }
.k-pdp__origin {
  margin: var(--space-3) 0 0; font-size: var(--size-caption);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-tertiary);
}
/* Gorsel olarak gizli ama ekran okuyucuda duruyor -- marka isareti H1'in
   yerini aldiginda basligi SILMIYORUZ. */
.k-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.k-arch__head .k-mark { height: clamp(30px, 3.4vw, 46px); margin: 0 0 var(--space-3); }
.k-pdp__title { margin: var(--space-4) 0 0; font-size: var(--size-display-3);
                line-height: var(--lh-display-3); letter-spacing: var(--ls-snug); font-weight: 600; }
.k-pdp__sub { margin: var(--space-2) 0 0; font-size: var(--size-body-sm); color: var(--text-tertiary); }
.k-pdp__lead { margin: var(--space-5) 0 0; font-size: var(--size-body);
               line-height: var(--lh-body); color: var(--text-secondary); }
.k-pdp__block { margin-top: var(--space-8); }
.k-pdp__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-9); }

/* D4: yuzey secenekleri SARMALANIR; negatif margin sihirli degeri yok. */
.k-finish { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-7);
            margin: var(--space-5) 0 0; list-style: none; padding: 0; }
.k-finish__item { display: flex; flex-direction: column; align-items: center;
                  gap: var(--space-3); white-space: nowrap; }
.k-finish__dot {
  width: var(--swatch-size); height: var(--swatch-size);
  border-radius: var(--radius-circle);
  box-shadow: inset 0 0 0 1px rgba(29, 27, 25, .10);
}
.k-finish__name { font-size: var(--size-caption); color: var(--text-secondary); }

.k-chiprow { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.k-chip {
  display: inline-flex; align-items: center; height: var(--control-h-sm);
  padding: 0 var(--space-5); border-radius: var(--radius-chip);
  box-shadow: inset 0 0 0 1px var(--border-default);
  font-size: var(--size-caption); color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* D3: hizli olcu kartlari EŞİT yukseklikte, minmax(0,1fr) ile tasma yok. */
.k-quick {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: var(--space-4); margin-top: var(--space-5);
}
.k-quick__item { background: var(--surface-subtle); border-radius: var(--radius-md);
                 padding: var(--space-4) var(--space-5); }
.k-quick__label { display: block; font-size: var(--size-caption); color: var(--text-tertiary); }
.k-quick__value { display: block; margin-top: var(--space-1); font-size: var(--size-body-sm);
                  font-weight: 500; font-variant-numeric: tabular-nums; }

.k-pdp__sec { margin-top: var(--section-y); }
.k-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.k-tab {
  display: inline-flex; align-items: center; height: var(--control-h-sm);
  padding: 0 var(--space-5); border: 0; cursor: pointer; font-family: inherit;
  border-radius: var(--radius-chip); font-size: var(--size-body-sm); font-weight: 500;
  background: transparent; color: var(--text-tertiary);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.k-tab[data-on="true"] { background: var(--surface-brand); color: var(--text-inverse); }
.k-tabpanel { margin-top: var(--space-9); }
.k-tabpanel[data-on="false"] { display: none; }

/* A3: TEK bleed degeri (--bleed). Zemin disari tasar, METIN hizada kalir. */
.k-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: var(--space-10) var(--space-11); }
.k-spec-row {
  display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: var(--space-6);
  align-items: baseline; padding: var(--space-4) var(--bleed);
  margin-inline: calc(var(--bleed) * -1); border-radius: var(--radius-md);
}
.k-spec-row[data-zebra="true"] { background: var(--surface-subtle); }
.k-spec-row__label { font-size: var(--size-body-sm); color: var(--text-tertiary); }
.k-spec-row__value { font-size: var(--size-spec); line-height: var(--lh-spec);
                     font-variant-numeric: tabular-nums; }

/* Kategori SEO metni -- urun izgarasinin ALTINDA. */
/* ⚠ Arsivde UC farkli genislik yan yana duruyordu: urun izgarasi tam
   kapsayici, .k-prose dar olcu (--container-narrow), ilgili-kategoriler kutusu
   bir baskasi. Arsiv alt metni IZGARAYLA hizalanir; buradaki paragraf iki
   satirlik bir ozet, okuma olcusune ihtiyaci yok. .k-prose'un kendisine
   dokunulmuyor -- yazi sayfalarinda dar olcu DOGRU. */
.k-arch__seo { margin-top: var(--section-y); }
.k-arch__seo.k-prose { max-width: none; }
.k-arch__seo .kvl-xlink { max-width: none; }
.k-arch__sub { margin: var(--space-4) 0 0; font-size: var(--size-body);
               color: var(--text-secondary); max-width: 60ch; }

/* --------------------------------------------------------------------------
   11. Teklif listesi -- SAGDAN acilan cekmece

   ⚠⚠ Markup kavela-inquiry EKLENTISINDEN geliyor; sinif adlari eklentinin JS
      sozlesmesi (`.kvl-inquiry-toggle`, `.kvl-inquiry-drawer`, `[data-kvl-*]`).
      Eski tema silinince bu bilesenin TUM stili gitmisti -- bicimsiz kaliyordu.
   ⚠ Acma butonu HEADER'da (`.k-quote`); eklentinin footer'daki kopyasi
      gizleniyor cunku JS ilk `.kvl-inquiry-toggle`i baglar, o da header'daki.
   -------------------------------------------------------------------------- */
.k-quote { position: relative; }
.k-quote__n {
  position: absolute; top: -2px; right: -2px;
  min-width: var(--space-5); height: var(--space-5); padding: 0 var(--space-1);
  border-radius: var(--radius-circle); background: var(--surface-brand);
  color: var(--text-inverse); font-size: 10px; line-height: var(--space-5);
  text-align: center; font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
   TEKLIF LISTESI -- float sticky tetikleyici + drawer

   ⚠ Eklentinin (kavela-inquiry) HIC CSS'i yok; asagisi temanin sorumlulugunda.
   ⚠ Tetikleyici header'dan kaldirildi: inquiry-v2.js DOM'daki ILK
     .kvl-inquiry-toggle'i baglar, header kopyasi varken float hic baglanmiyordu.
   ⚠ Buton yalniz listede urun varken gorunur (JS `hidden` ozniteligini yonetir),
     yani bos durumda sayfada hicbir sey yuzmez.
   -------------------------------------------------------------------------- */
.kvl-inquiry-toggle {
  position: fixed; z-index: 55;
  /* ⚠ WhatsApp float'i (.kvlwa) sag altta 20px/20px, yuksekligi 60px.
     Varsayilan olarak ONUN USTUNE yerlesiyoruz; kesin hizalamayi
     inc/inquiry-ui.php olculen kutuya gore yapar. */
  inset-inline-end: 20px;
  inset-block-end: 92px;
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 14px 20px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: var(--size-caption);
  background: var(--text-primary); color: var(--surface-page);
  border: 0; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease;
}
.kvl-inquiry-toggle[hidden] { display: none; }
.kvl-inquiry-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,.22); }
.kvl-inquiry-toggle__icon { display: inline-flex; }
.kvl-inquiry-toggle__icon svg { width: 18px; height: 18px; }
/* Sayac rozeti: butonun kosesinde, marka renginde. */
.kvl-inquiry-toggle__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-brand); color: var(--text-inverse);
  font-size: 11px; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Cerez seridi acikken butonun ustune binmesin. */
body:has(.k-consent) .kvl-inquiry-toggle { inset-block-end: calc(clamp(16px,3vw,32px) + 96px); }

.kvl-inquiry-drawer {
  position: fixed; inset: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr min(420px, 92vw);
  background: rgba(20,18,16,.34);
}
.kvl-inquiry-drawer[hidden] { display: none; }
.kvl-inquiry-drawer > * { grid-column: 2; }
.kvl-inquiry-drawer::before { content: ""; grid-column: 1; }
.kvl-inquiry-drawer__head,
.kvl-inquiry-drawer__step {
  background: var(--surface-page);
}
.kvl-inquiry-drawer__head {
  grid-row: 1; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-7) var(--space-7) var(--space-5);
  font-size: var(--size-h2); font-weight: 600; letter-spacing: var(--ls-snug);
}
.kvl-inquiry-drawer__close {
  font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
  background: transparent; border: 0; color: var(--text-tertiary); padding: 4px 8px;
}
.kvl-inquiry-drawer__close:hover { color: var(--text-primary); }
.kvl-inquiry-drawer__step { grid-row: 2; overflow-y: auto; padding: 0 var(--space-7) var(--space-7); }
.kvl-inquiry-drawer__step[hidden] { display: none; }
.kvl-inquiry-drawer__empty { color: var(--text-tertiary); font-size: var(--size-body); }

.kvl-inquiry-item {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: var(--space-4); padding: var(--space-5) 0;
  border-block-end: 1px solid var(--border-subtle, rgba(0,0,0,.08));
}
.kvl-inquiry-item__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kvl-inquiry-item__name strong { font-weight: 600; }
.kvl-inquiry-item__swatch,
.kvl-inquiry-item__variant { font-size: var(--size-caption); color: var(--text-tertiary); }
.kvl-inquiry-item__qty { display: inline-flex; align-items: center; gap: 2px; }
.kvl-inquiry-item__step {
  width: 28px; height: 28px; cursor: pointer; font: inherit; line-height: 1;
  border: 1px solid var(--border-subtle, rgba(0,0,0,.18));
  background: transparent; border-radius: 8px; color: var(--text-primary);
}
.kvl-inquiry-item__qty-input {
  width: 46px; height: 28px; text-align: center; font: inherit;
  border: 1px solid var(--border-subtle, rgba(0,0,0,.18)); border-radius: 8px;
  -moz-appearance: textfield;
}
.kvl-inquiry-item__qty-input::-webkit-outer-spin-button,
.kvl-inquiry-item__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kvl-inquiry-item__remove {
  font: inherit; font-size: var(--size-caption); cursor: pointer;
  background: transparent; border: 0; color: var(--text-tertiary);
  text-decoration: underline; text-underline-offset: 2px;
}
.kvl-inquiry-item__remove:hover { color: var(--text-primary); }

.kvl-inquiry-drawer__actions,
.kvl-inquiry-drawer__form-actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.kvl-inquiry-drawer__actions button,
.kvl-inquiry-drawer__form-actions button {
  font: inherit; font-size: var(--size-caption); cursor: pointer;
  padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--text-primary);
  background: var(--text-primary); color: var(--surface-page);
}
.kvl-inquiry-drawer__actions button[disabled] { opacity: .4; cursor: not-allowed; }
.kvl-inquiry-drawer__actions button[data-kvl-to-list],
.kvl-inquiry-drawer__form-actions button[data-kvl-to-list] {
  background: transparent; color: var(--text-primary);
  border-color: var(--border-subtle, rgba(0,0,0,.18));
}
.kvl-inquiry-drawer__hint { margin-top: var(--space-4); font-size: var(--size-caption); color: var(--text-tertiary); }
.kvl-inquiry-drawer__summary-head { font-weight: 600; margin: 0 0 var(--space-3); }
.kvl-inquiry-drawer__summary-list { margin: 0 0 var(--space-6); padding-inline-start: 1.1em; color: var(--text-secondary); }
.kvl-inquiry-drawer__form { display: grid; gap: var(--space-4); }
.kvl-inquiry-drawer__form input,
.kvl-inquiry-drawer__form textarea,
.kvl-inquiry-drawer__form select {
  font: inherit; width: 100%; padding: 12px 14px; border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-subtle, rgba(0,0,0,.18)); background: var(--surface-page);
}
.kvl-inquiry-drawer__opt { display: flex; align-items: center; gap: var(--space-3); font-size: var(--size-caption); }
.kvl-inquiry-drawer__status { margin-top: var(--space-4); font-size: var(--size-caption); }
.kvl-inquiry-drawer__status[hidden] { display: none; }

@media (max-width: 640px) {
  .kvl-inquiry-drawer { grid-template-columns: 1fr; }
  .kvl-inquiry-drawer > *, .kvl-inquiry-drawer::before { grid-column: 1; }
  .kvl-inquiry-drawer::before { display: none; }
}


.kvl-inquiry-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 90;
  width: min(92vw, 460px); background: var(--surface-page);
  box-shadow: var(--shadow-4);
  display: flex; flex-direction: column;
  font-family: var(--font-sans);
}
/* ⚠ Eklentinin markup'inda perde ogesi YOK; cekmecenin kendi yigin
   baglaminda bir pseudo ile kuruluyor. */
.kvl-inquiry-drawer::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: var(--surface-overlay);
}
.kvl-inquiry-drawer[hidden] { display: none; }
.kvl-inquiry-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-7);
}
.kvl-inquiry-drawer__head h2 {
  margin: 0; font-size: var(--size-h2); font-weight: 600; letter-spacing: var(--ls-snug);
}
.kvl-inquiry-drawer__close {
  width: var(--control-h-sm); height: var(--control-h-sm); border: 0; cursor: pointer;
  background: none; border-radius: var(--radius-chip); font-size: var(--size-h2);
  line-height: 1; color: var(--text-secondary);
}
.kvl-inquiry-drawer__close:hover { background: var(--grey-100); color: var(--text-primary); }
.kvl-inquiry-drawer__step { padding: 0 var(--space-7) var(--space-7);
                            overflow-y: auto; flex: 1 1 auto; }
.kvl-inquiry-drawer__empty { color: var(--text-secondary); font-size: var(--size-body-sm); }

.kvl-inquiry-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--space-5);
  padding: var(--space-5) 0;
}
.kvl-inquiry-item__name strong { display: block; font-size: var(--size-body-sm); font-weight: 600; }
.kvl-inquiry-item__swatch { display: block; margin-top: var(--space-1);
                            font-size: var(--size-caption); color: var(--text-tertiary); }
.kvl-inquiry-item__qty { display: flex; align-items: center; gap: var(--space-2); }
.kvl-inquiry-item__step {
  width: var(--space-7); height: var(--space-7); border: 0; cursor: pointer;
  border-radius: var(--radius-chip); background: var(--grey-100);
  font-size: var(--size-body-sm); line-height: 1;
}
.kvl-inquiry-item__step:hover { background: var(--grey-150); }
.kvl-inquiry-item__qty-input {
  width: var(--space-10); height: var(--space-8); text-align: center;
  border: 0; box-shadow: inset 0 0 0 1px var(--border-default);
  border-radius: var(--radius-chip); font-family: inherit;
  font-size: var(--size-body-sm); font-variant-numeric: tabular-nums;
}
.kvl-inquiry-item__remove {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: var(--size-caption); color: var(--text-tertiary); font-family: inherit;
}
.kvl-inquiry-item__remove:hover { color: var(--text-danger); }

.kvl-inquiry-drawer__actions { padding-top: var(--space-6); }
.kvl-inquiry-drawer__hint { margin: var(--space-3) 0 0;
                            font-size: var(--size-caption); color: var(--text-tertiary); }
.kvl-inquiry-drawer__form { display: flex; flex-direction: column; gap: var(--space-5); }
.kvl-inquiry-drawer__form label {
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--size-caption); color: var(--text-secondary);
}
.kvl-inquiry-drawer__form input,
.kvl-inquiry-drawer__form textarea {
  font-family: inherit; font-size: var(--size-body-sm); color: var(--text-primary);
  padding: var(--space-4) var(--space-5); border: 0;
  box-shadow: inset 0 0 0 1px var(--border-default);
  border-radius: var(--radius-md); background: var(--surface-page);
}
.kvl-inquiry-drawer__form input:focus,
.kvl-inquiry-drawer__form textarea:focus { outline: none; box-shadow: var(--focus-ring); }
.kvl-inquiry-drawer__form-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.kvl-inquiry-drawer__summary-head { margin: 0 0 var(--space-4); font-size: var(--size-body-sm); font-weight: 600; }
.kvl-inquiry-drawer__summary-list { margin: 0 0 var(--space-6); padding-left: var(--space-6);
                                    font-size: var(--size-body-sm); color: var(--text-secondary); }
.kvl-inquiry-drawer__status { margin: 0; padding: 0 var(--space-7) var(--space-7);
                              font-size: var(--size-body-sm); color: var(--text-secondary); }
.kvl-inquiry-drawer__opt { color: var(--text-tertiary); }

/* Eklentinin kendi buton sinifi -- V13 diline baglaniyor. */
.kvl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--control-h-md); padding: 0 var(--space-6); border: 0; cursor: pointer;
  border-radius: var(--radius-chip); font-family: var(--font-sans);
  font-size: var(--size-body-sm); font-weight: 500;
  transition: background var(--duration-fast) var(--ease-standard);
}
.kvl-btn--primary { background: var(--surface-brand); color: var(--text-inverse); }
.kvl-btn--primary:hover { background: var(--surface-brand-hover); }
.kvl-btn--primary[disabled] { background: var(--grey-200); color: var(--text-disabled); cursor: not-allowed; }
.kvl-btn--ghost { background: transparent; color: var(--text-primary);
                  box-shadow: inset 0 0 0 1px var(--border-default); }
.kvl-btn--ghost:hover { background: var(--grey-50); }

/* --------------------------------------------------------------------------
   12. Kartela (kumas / melamin / metal)
   -------------------------------------------------------------------------- */
.k-kartela { margin-top: var(--space-8); }
.k-kartela__summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5); cursor: pointer; list-style: none;
}
.k-kartela__summary::-webkit-details-marker { display: none; }
.k-kartela__cta { font-size: var(--size-body-sm); color: var(--text-link-hover); }
.k-kartela[open] .k-kartela__cta { visibility: hidden; }
.k-kartela__selected { margin: var(--space-4) 0 0; font-size: var(--size-caption);
                       color: var(--text-secondary); min-height: 1.4em; }
.k-kartela__colls { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.k-kartela__coll > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); cursor: pointer; list-style: none;
  padding: var(--space-3) 0; font-size: var(--size-body-sm);
}
.k-kartela__coll > summary::-webkit-details-marker { display: none; }
.k-kartela__n { font-size: var(--size-caption); color: var(--text-tertiary);
                font-variant-numeric: tabular-nums; }
.k-kartela__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: var(--space-3); padding-bottom: var(--space-5);
}
.k-kartela__sw {
  border: 0; padding: 0; cursor: pointer; background: none; text-align: center;
  display: flex; flex-direction: column; gap: var(--space-1); align-items: center;
}
.k-kartela__thumb {
  display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(29, 27, 25, .12);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.k-kartela__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-kartela__sw[data-on="true"] .k-kartela__thumb {
  box-shadow: 0 0 0 2px var(--brand-burgundy), inset 0 0 0 1px rgba(29, 27, 25, .12);
}
.k-kartela__code { font-size: 10px; color: var(--text-tertiary);
                   font-variant-numeric: tabular-nums; }

/* Ayak secenekleri */
.k-legs { display: flex; flex-direction: column; gap: var(--space-5); }
.k-legs__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.k-legs__lbl { min-width: 88px; }
.k-legs__chips, .k-legs__fins { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.k-legs__fin { display: inline-flex; align-items: center; gap: var(--space-2);
               font-size: var(--size-body-sm); color: var(--text-secondary); }
.k-legs__dot { width: var(--space-6); height: var(--space-6); border-radius: var(--radius-circle);
               box-shadow: inset 0 0 0 1px rgba(29, 27, 25, .15); }

.k-pdp__video { margin-top: var(--space-7); }
.k-pdp__video video { width: 100%; height: auto; display: block; border-radius: var(--radius-xl); }
.k-pdp__helpers { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
                  margin-top: var(--space-5); font-size: var(--size-body-sm); }
.k-pdp__helpers a { color: var(--text-secondary); }
.k-pdp__helpers a:hover { color: var(--text-link-hover); }
.k-chiprow--top { margin-top: var(--space-5); }
.k-chip--stock { box-shadow: none; background: var(--brand-cream-50); color: var(--text-primary); }

/* --------------------------------------------------------------------------
   13. Arsiv arac cubugu + kart aksiyonlari
   -------------------------------------------------------------------------- */
.k-arch-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.k-chip--btn { cursor: pointer; }
.k-chip--btn:hover { background: var(--grey-50); }
.k-chip--btn.is-now { background: var(--surface-brand); color: var(--text-inverse); box-shadow: none; }
.k-sort { position: relative; }
.k-sort > summary {
  display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
  list-style: none; height: var(--control-h-sm); padding: 0 var(--space-5);
  border-radius: var(--radius-chip); box-shadow: inset 0 0 0 1px var(--border-hairline);
  font-size: var(--size-body-sm); color: var(--text-secondary);
}
.k-sort > summary::-webkit-details-marker { display: none; }
.k-sort__label { color: var(--text-tertiary); }
.k-sort__now { color: var(--text-primary); }
.k-sort__list {
  position: absolute; z-index: 20; top: calc(100% + var(--space-2)); left: 0;
  min-width: 190px; margin: 0; padding: var(--space-3); list-style: none;
  background: var(--surface-page); border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}
.k-sort__list a { display: block; padding: var(--space-3) var(--space-4);
                  border-radius: var(--radius-sm); font-size: var(--size-body-sm);
                  color: var(--text-secondary); }
.k-sort__list a:hover { color: var(--text-primary); }
.k-sort__list a[aria-current="true"] { color: var(--text-brand); font-weight: 500; }

.k-arch-card { position: relative; }
.k-arch-card__media { position: relative; }
.k-arch-badge {
  position: absolute; left: 0; top: 0;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  background: var(--brand-cream); color: var(--ink);
  font-size: 10px; letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.k-arch-card__act { margin-top: var(--space-3); }
.k-arch-quote {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 0; background: none; cursor: pointer; padding: 0; font-family: inherit;
  font-size: var(--size-caption); color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.k-arch-quote:hover { color: var(--text-brand); }

/* --------------------------------------------------------------------------
   14. Arama
   -------------------------------------------------------------------------- */
.k-search { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6);
            max-width: var(--container-narrow); }
.k-search__input {
  flex: 1 1 240px; height: var(--control-h-md); padding: 0 var(--space-5);
  border: 0; box-shadow: inset 0 0 0 1px var(--border-default);
  border-radius: var(--radius-chip); font-family: inherit; font-size: var(--size-body);
}
.k-search__input:focus { outline: none; box-shadow: var(--focus-ring); }
.k-results { list-style: none; padding: 0; margin: var(--space-7) 0 0;
             display: flex; flex-direction: column; gap: var(--space-5); }
.k-results__t { display: block; font-size: var(--size-h3); font-weight: 600; }
.k-results__x { display: block; margin-top: var(--space-1);
                font-size: var(--size-body-sm); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   15. Premium hatti konteyneri + markalar
   -------------------------------------------------------------------------- */
/* ⚠ ONCEDEN: `.k-line { margin-top: var(--section-y) }`. Bosluk bandin
   DISINDA kaliyordu, yani iki renkli blok arasinda sayfa zemini (beyaz) bir
   dilim halinde goruunuyordu -- kullanicinin "bandin altinda garip beyaz
   serit" dedigi sey buydu (olculdu: krem 250,246,240 -> 96px beyaz ->
   krem 251,250,248). Kural: RENKLI bolum dikey boslugu KENDI ICINE alir,
   disariya birakmaz. */
.k-line { background: var(--brand-cream-50); }
.k-line--ess  { background: var(--surface-page); }

/* Basligin yerini logo aliyor: hattin kimligini marka isareti soyluyor. */
/* Hat kelime markalari: renk dosyada degil gradient'te (inc/brand-marks.php). */
.k-mark { display: block; width: auto; }
.k-mark--prem { height: clamp(26px, 2.6vw, 36px); margin: 0 0 var(--space-4); }
/* ⚠ 2026-08-27: bu isaret artik SVG DEGIL METIN (inc/brand-marks.php).
   `height` bir SVG olcusuydu; metinde yukseklik punto ile kurulur, yoksa
   kutu kirpar/gerer. Olcu SVG'nin optik boyuna denk gelecek sekilde secildi. */
.k-mark--ess  { height: auto; font-size: clamp(27px, 2.7vw, 37px); margin: 0 0 var(--space-4); }

/* PROLINE kelime markasi.
   PRO 600 / LINE 400 -- Barlow'da mevcut TEK gercek agirlik karsitligi.
   LINE ayrica harf araligiyla acilir: seyrelen metin daha ince okunur, boylece
   iki parca arasindaki fark tek basina agirliga yuklenmez.
   Gradyan metnin uzerinde: grafit -> tas, Essentials'tan devralindi. */
.k-wm {
  display: inline-block; line-height: 1;
  font-family: var(--font-sans);
  text-transform: uppercase;
  color: #2E2B27;                       /* background-clip desteklenmezse bu kalir */
  background-image: linear-gradient(120deg, #2E2B27 0%, #6B655D 55%, #A8A199 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.k-wm__a { font-weight: 600; letter-spacing: -0.005em; }
.k-wm__b { font-weight: 400; letter-spacing: 0.055em; }
/* Koyu zeminde: gradyan ters yone, acik uctan baslar. */
.k-wm--rev {
  color: #E8E4DE;
  background-image: linear-gradient(120deg, #E8E4DE 0%, #BDB6AC 55%, #8E877D 100%);
}
/* Gradyan metni sectirmez gibi gorunur; secim rengini geri ver. */
.k-wm::selection, .k-wm span::selection { -webkit-text-fill-color: currentColor; }
.k-line__logo {
  display: block; margin: var(--space-5) 0 0;
  height: clamp(30px, 2.8vw, 40px); width: auto;
}
.k-line__sub {
  margin: var(--space-3) 0 0; font-size: var(--size-caption);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ⚠ Iki bantta da urun gorselleri DEKUPE ve kendi zeminleri BEYAZ. Kutuya
   renkli bir zemin vermek (krem ya da gri) gorselin beyaz karesini kutunun
   icinde yuzen ayri bir dikdortgen haline getiriyor. Kutu da beyaz olunca
   gorsel ile kutu tek parca "urun levhasi" olarak okunuyor.
   Ayrica oran 1/1: gorseller kare, kutuyu 4/3 yapmak yanlarda bos serit
   biraktiriyordu. */
.k-line__media { background: #FFFFFF; border-radius: var(--radius-md); }
/* ⚠ Sahne kareleri KUTUYU DOLDURUR (cover): contain ile alt/ust beyaz serit
   birakiyordu -- "white frame izi". Kupurler (sahne bulunamayan urun) contain
   kalir; onlari kirpmak urunu keser. Ayrimi `.is-scene` tasiyor. */
.k-line__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.k-line__media img { width: 100%; height: 100%; display: block; object-fit: contain; }
.k-line__media img.is-scene { object-fit: cover; }
.k-line--ess .k-line__media { border-radius: var(--radius-sm); } /* mekanik: keskin kose */
.k-line--ess .k-line__name { font-variant-numeric: tabular-nums; }
.k-line__inner {
  display: grid; grid-template-columns: minmax(0, 42ch) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-block: var(--section-y);
}
.k-line__t { margin: var(--space-5) 0 0; font-size: clamp(26px, 3vw, 40px);
             line-height: 1.1; letter-spacing: var(--ls-tight); font-weight: 600; }
.k-line__b { margin: var(--space-5) 0 var(--space-7); font-size: var(--size-body);
             line-height: var(--lh-body); color: var(--text-secondary); }
.k-line__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.k-line__media { display: block; aspect-ratio: 1 / 1; }
.k-line__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.k-line__name { display: block; margin-top: var(--space-3); font-size: var(--size-body-sm);
                font-weight: 500; transition: color var(--duration-fast) var(--ease-standard); }
.k-line__card:hover .k-line__name { color: var(--text-link-hover); }

.k-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5);
            margin-top: var(--space-7); }
.k-brand { display: flex; flex-direction: column; gap: var(--space-1);
           padding: var(--space-6) var(--space-7); border-radius: var(--radius-lg);
           background: var(--surface-subtle);
           transition: background var(--duration-fast) var(--ease-standard); }
.k-brand:hover { background: var(--grey-100); }
.k-brand__name { font-size: var(--size-h3); font-weight: 600; }
.k-brand__n { font-size: var(--size-caption); color: var(--text-tertiary);
              font-variant-numeric: tabular-nums; }

.k-mega__link--prem { display: flex; flex-direction: column; gap: 2px; }
.k-mega__hint { font-size: var(--size-caption); color: var(--text-tertiary); }

/* --------------------------------------------------------------------------
   16. Anlik arama katmani -- hafif bir acilis animasyonuyla
   -------------------------------------------------------------------------- */
.k-so {
  position: fixed; inset: 0; z-index: 95;
  background: var(--surface-overlay);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 8vh, 96px) var(--gutter) var(--gutter);
  transition: opacity var(--duration-base) var(--ease-standard);
}
.k-so[data-open="false"] { opacity: 0; pointer-events: none; visibility: hidden; }
.k-so[data-open="true"]  { opacity: 1; pointer-events: auto; visibility: visible; }
.k-so__panel {
  width: min(100%, 640px); background: var(--surface-page);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-4);
  overflow: hidden;
  transform: translateY(-8px) scale(.985);
  transition: transform var(--duration-slow) var(--ease-out);
}
.k-so[data-open="true"] .k-so__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .k-so__panel { transition: none; transform: none; }
}
.k-so__bar { position: relative; display: flex; align-items: center; gap: var(--space-4);
             padding: var(--space-5) var(--space-6); }

/* ── Kutu etrafi: COK YAVAS nefes ─────────────────────────────────────────
   NEDEN surekli nefes, tek atislik parlama DEGIL: panelin kendi giris
   hareketi (translateY + scale, 320ms) zaten t=0'da calisiyor. Ustune tek
   atislik bir halka koyunca iki hareket ayni anda olup birbirini yutuyor.
   Nefes ise kullanici "ne yazsam" diye duraksadigi 2-4 saniyede gorunur --
   ornek ciplerin fark edilmesi gereken an TAM ORASI.
   ⚠ HAFIF: 6 sn dongu, tepe noktasi 1px hairline + 5px cok soluk halka;
     yeni renk YOK, yalnizca mevcut jetonlar. Sadece `opacity` animasyonu
     (compositor'da kalir; width/height/top/left YOK -> layout thrash yok).
   ⚠ Kullanici ilk tusa basar basmaz `data-typing="true"` olur ve DURUR. */
.k-so__bar::after {
  content: ""; position: absolute; inset: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px var(--border-hairline), 0 0 0 5px var(--surface-brand-quiet);
}
.k-so[data-open="true"][data-typing="false"] .k-so__bar::after {
  animation: k-so-breathe 6s var(--ease-standard) .4s infinite;
}
@keyframes k-so-breathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: .9; }
}
/* ⚠⚠ SART: hareket azaltma altinda animasyon TAMAMEN kapali. */
@media (prefers-reduced-motion: reduce) {
  .k-so[data-open="true"][data-typing="false"] .k-so__bar::after {
    animation: none; opacity: 0;
  }
}

/* ── Ornek sorgular: kutu acilinca okunacak bir sey olsun ─────────────────
   Bos kanvas yok. Cip dili ICAT EDILMEDI: gezinme ciplerinin (.k-catnav__link)
   dolu krem yuzeyi AYNEN kullaniliyor -- bunlar filtre/kontrol degil,
   "suraya bak" demek. Ayirac cizgi YOK; hiyerarsi punto + ton + yakinlik. */
.k-so__ex { padding: 0 var(--space-6) var(--space-6); }
.k-so[data-typing="true"] .k-so__ex { display: none; }
.k-so__exlead { margin: 0 0 var(--space-4); font-size: var(--size-caption);
                line-height: var(--lh-caption); color: var(--text-tertiary); }
.k-so__exlist { display: flex; flex-wrap: wrap; gap: var(--space-2);
                list-style: none; margin: 0; padding: 0; }
.k-so__q { -webkit-appearance: none; appearance: none; border: 0;
           cursor: pointer; font-family: inherit; text-align: left; }
/* 390px: 8 cip dort satira tasiyordu -- yatay nefesi kisip uc satira indirir.
   Punto ve yuzey AYNI kalir, yalnizca ic bosluk daralir. */
@media (max-width: 480px) {
  .k-so__ex { padding: 0 var(--space-5) var(--space-5); }
  .k-so__q { height: 28px; padding: 0 var(--space-4); }
}
.k-so__icon { color: var(--text-tertiary); flex: none; }
.k-so__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none;
  font-family: inherit; font-size: var(--size-body-lg); color: var(--text-primary);
  padding: var(--space-2) 0;
}
/* ⚠ Genel `:focus-visible` halkasi burada tum cubugu cerceveliyor ve
   kirmizi bir kutu gibi okunuyordu; odak zaten panelin kendisinde. */
.k-so__input:focus, .k-so__input:focus-visible { outline: none; box-shadow: none; }
.k-so__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.k-so__results { max-height: min(60vh, 520px); overflow-y: auto;
                 padding: 0 var(--space-4) var(--space-4); }
.k-so__hint { margin: 0; padding: var(--space-6);
              font-size: var(--size-body-sm); color: var(--text-tertiary); }
.k-so__item {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-standard);
}
.k-so__item:hover { background: var(--surface-subtle); }
.k-so__thumb { flex: none; width: var(--space-12); aspect-ratio: 1 / 1;
               border-radius: var(--radius-sm); overflow: hidden;
               background: var(--surface-subtle); }
.k-so__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.k-so__txt { min-width: 0; }
.k-so__name { display: block; font-size: var(--size-body-sm); font-weight: 600; }
.k-so__cat { display: block; margin-top: 2px; font-size: var(--size-caption);
             color: var(--text-secondary); }
.k-so__all { display: block; margin-top: var(--space-3);
             padding: var(--space-4); text-align: center;
             font-size: var(--size-body-sm); color: var(--text-brand); }

/* --------------------------------------------------------------------------
   17. Planlayici araclari -- oda ve masa AYRI girisler
   -------------------------------------------------------------------------- */
.k-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: var(--space-6); margin-top: var(--space-7); }
.k-tool {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding: var(--space-7); border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  transition: background var(--duration-fast) var(--ease-standard);
}
.k-tool:hover { background: var(--grey-100); }
.k-tool__icon { flex: none; color: var(--text-brand); }
.k-tool__body { min-width: 0; flex: 1 1 auto; }
.k-tool__t { display: block; font-size: var(--size-h3); font-weight: 600; }
.k-tool__b { display: block; margin-top: var(--space-2);
             font-size: var(--size-body-sm); color: var(--text-secondary); }
.k-tool__cta { flex: none; align-self: center; font-size: var(--size-body-sm);
               color: var(--text-brand); white-space: nowrap; }

.k-toolcta {
  display: flex; align-items: center; gap: var(--space-5);
  margin-top: var(--space-7); padding: var(--space-6);
  border-radius: var(--radius-lg); background: var(--brand-cream-50);
  transition: background var(--duration-fast) var(--ease-standard);
}
.k-toolcta:hover { background: var(--brand-cream-200); }
.k-toolcta__icon { flex: none; color: var(--text-brand); }
.k-toolcta__t { display: block; font-size: var(--size-body-sm); font-weight: 600; }
.k-toolcta__b { display: block; margin-top: 2px; font-size: var(--size-caption);
                color: var(--text-secondary); }

/* Planlayici kabi -- ic yerlesimi arac kendi kuruyor. */
.k-planner { margin-top: var(--space-9); min-height: 60vh; }

/* --------------------------------------------------------------------------
   18. Genel sayfa / yazi
   -------------------------------------------------------------------------- */
.k-page { padding-top: var(--space-10); padding-bottom: var(--section-y); }
.k-page__head { margin-top: var(--space-6); max-width: var(--container-narrow); }
.k-page__title {
  margin: var(--space-4) 0 0; font-size: var(--size-display-2);
  line-height: var(--lh-display-2); letter-spacing: var(--ls-tight); font-weight: 600;
}
.k-page__lead {
  margin: var(--space-5) 0 0; font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg); color: var(--text-secondary);
}
.k-page__media { margin-top: var(--space-9); border-radius: var(--radius-xl); overflow: hidden; }
.k-page__media img { display: block; width: 100%; height: auto; }
.k-page__body { margin-top: var(--space-9); }
/* Icerik editorden geliyor: baslik/gorsel/liste ritmi burada kuruluyor. */
.k-page__body img { border-radius: var(--radius-xl); margin-block: var(--space-7); }
.k-page__body figure { margin: var(--space-9) 0; }
.k-page__body figcaption { margin-top: var(--space-3);
                           font-size: var(--size-caption); color: var(--text-tertiary); }
.k-page__body blockquote {
  margin: var(--space-9) 0; padding: var(--space-7);
  background: var(--surface-subtle); border-radius: var(--radius-lg);
  font-size: var(--size-body-lg); line-height: var(--lh-body-lg);
}
.k-page__body table { width: 100%; border-collapse: collapse; margin: var(--space-7) 0;
                      font-size: var(--size-body-sm); }
.k-page__body th, .k-page__body td { padding: var(--space-4) var(--space-5); text-align: left; }
.k-page__body tbody tr:nth-child(odd) { background: var(--surface-subtle); }

/* --------------------------------------------------------------------------
   19. Sosyal kanit -- yorumlar + Instagram (artik TEMADA)
   -------------------------------------------------------------------------- */
.k-reviews { margin-top: var(--section-y); padding-block: var(--section-y);
             background: var(--surface-subtle); }
.k-reviews__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6); margin-top: var(--space-7);
}
.k-review { margin: 0; padding: var(--space-7); border-radius: var(--radius-lg);
            background: var(--surface-page); }
.k-review__body { margin: 0; font-size: var(--size-body-sm);
                  line-height: var(--lh-body); color: var(--text-primary); }
.k-review__meta { display: flex; flex-wrap: wrap; gap: var(--space-3);
                  margin-top: var(--space-5); font-size: var(--size-caption); }
.k-review__author { font-weight: 500; }
.k-review__when { color: var(--text-tertiary); }

.k-ig { margin-top: var(--section-y); }
.k-ig__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
              gap: var(--space-3); margin-top: var(--space-7); }
.k-ig__tile { display: block; aspect-ratio: 1 / 1; overflow: hidden;
              border-radius: var(--radius-lg); background: var(--surface-subtle); }
.k-ig__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-ig__tile { position: relative; }
.k-ig__play { position: absolute; right: var(--space-3); top: var(--space-3);
              color: var(--text-inverse); opacity: .9;
              filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* --------------------------------------------------------------------------
   20. HIYERARSI -- bolumlerin ses tonu

   ⚠ Onceki halde 11 bolumun HEPSI ayni buyuk baslikla geliyordu; "Markalar"
     "Kategoriler" kadar onemli gorunuyordu ve sayfa duz okunuyordu. Uc kademe:
       tier 1  hero
       tier 2  Kategoriler / Yeni eklenenler / Premium  -> buyuk baslik
       tier 3  Araclar / Yazilar / Yorumlar / Instagram -> `--sm` kucuk baslik
     Markalar kendi bolumu olmaktan cikip Premium bolgesinin icine girdi.
   -------------------------------------------------------------------------- */
.k-secline--sm { padding-bottom: var(--space-4); }
.k-secline--sm .k-secline__t {
  font-size: var(--size-h2); letter-spacing: var(--ls-snug); line-height: 1.2;
}

/* Markalar: artik bolum degil, Premium bolgesinde kompakt satir. */
.k-brandrow { margin-top: var(--space-10); }
.k-brandrow .k-brands {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-4);
}
.k-brandrow .k-brand {
  flex-direction: row; align-items: baseline; gap: var(--space-3);
  padding: 0 var(--space-6); height: var(--control-h-md);
  border-radius: var(--radius-chip); background: var(--surface-page);
}
.k-brandrow .k-brand:hover { background: var(--grey-100); }
.k-brandrow .k-brand__name { font-size: var(--size-body-sm); font-weight: 500; }
.k-brandrow .k-brand__n { font-size: var(--size-caption); color: var(--text-tertiary); }

/* Instagram: alt katta bir SERIT -- tam bolum degil.
   ⚠ Once 6 buyuk karo tam ekran kapliyordu; en az onemli icerik en cok yeri
     aliyordu. Karolar kucuk, satir tek, dolgu dar. */
.k-ig { margin-top: var(--space-12); padding-bottom: var(--space-6); }
.k-ig__grid {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-3); margin-top: var(--space-5);
}
.k-ig__tile { border-radius: var(--radius-md); }

/* Yorumlar: alt katta daha sakin bir zemin ve dar dolgu. */
.k-reviews { margin-top: var(--space-12); padding-block: var(--space-11); }
.k-reviews__grid { margin-top: var(--space-5); }

/* Yetkili satici bandi -- tek satir, Premium bolgesinin dibinde. */
.k-reseller {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6);
  margin-top: var(--space-10); padding-top: var(--space-7);
}
.k-reseller__logo { height: 26px; width: auto; display: block; opacity: .85; }
.k-reseller__txt { font-size: var(--size-caption); color: var(--text-secondary); }
.k-reseller__cta { margin-left: auto; }

/* ==========================================================================
   21. PREMIUM TEMASI -- Quadrifoglio hatti

   ⚠ Premium'a gecince site KABUK OLARAK degisir: koyu zemin, altin baslik,
     kupur yerine SAHNE gorseli. Gerekce: ust segment bir hat kendi
     kataloguyla ve kendi atmosferiyle geliyor; ayni beyaz izgarada
     gosterilince "daha pahali" hissi kurulamiyor.
   ⚠ Kapsam `body.k-prem` -- token'lar yeniden tanimlaniyor, bilesenler
     DEGISMIYOR. Tek bir yerde renk sozlesmesi degisiyor, geri kalan her sey
     ayni CSS'i kullanmaya devam ediyor.
   ========================================================================== */
body.k-prem {
  /* ⚠⚠ TUREV TAKMA ADLAR BURADA YENIDEN YAZILMAK ZORUNDA.
     `:root`'ta `--text-link: var(--text-primary)` yaziyor. Ozel ozellik
     DEGERI, tanimlandigi yerde cozulur: `--text-link` `:root`'ta koyu murekkebe
     coz ULUR ve o COZULMUS deger asagi miras kalir. `body.k-prem`'de yalnizca
     `--text-primary`'yi degistirmek `--text-link`'i geri cozdurmez -- baglantilar
     (ve `fill: currentColor` kullanan logo) koyu zeminde koyu kalir.
     Kural: bir kapsamda taban token'i degistiriyorsan, ONA BAKAN her takma adi
     da elle yaz. Sessiz basarisizlik; yalnizca olcumle gorunur. */
  --surface-page: #171614;
  --surface-subtle: #1E1D1A;
  --surface-sunken: #232220;
  --surface-card: #1E1D1A;
  --surface-inverse: #F5F3EF;

  --text-primary: #F2EFE9;
  --text-secondary: #B9B3A7;
  --text-tertiary: #8C877D;
  --text-inverse: #171614;

  --border-hairline: rgba(242, 239, 233, .10);
  --border-default: rgba(242, 239, 233, .18);
  --border-strong: rgba(242, 239, 233, .28);

  --grey-0: #171614;
  --grey-50: #1E1D1A;
  --grey-100: #232220;
  --grey-150: #2B2A27;
  --grey-200: #34322E;

  /* Aksan artik bordo DEGIL altin: koyu zeminde bordo okunmuyor. */
  --brand-burgundy: var(--gold-500);
  --surface-brand: var(--gold-500);
  --surface-brand-hover: var(--gold-400);
  --text-brand: var(--gold-400);
  --text-link-hover: var(--gold-300);
  --border-focus: var(--gold-400);
  --focus-ring: 0 0 0 3px rgba(200, 169, 126, .35);
  --brand-cream-50: #201F1C;
  --brand-cream-200: #2A2825;

  /* Turev takma adlar -- yukaridaki uyarinin geregi. */
  --ink: #F2EFE9;
  --text-heading: #F5F2EC;
  --text-link: #F2EFE9;
  --text-disabled: #6B665E;
  --control-solid-bg: #232220;
  --control-solid-bg-hover: #2B2A27;
  --control-solid-fg: #E4E0D8;
  --control-quiet-bg: #1E1D1A;
  --control-quiet-bg-hover: #232220;
  --control-selected-bg: #34322E;
  --grey-25: #1B1A18;
  --grey-300: #46433E;
  --grey-400: #6B665E;
  --grey-500: #8C877D;
  --grey-600: #B9B3A7;
  --grey-700: #CFCABF;
  --grey-800: #E4E0D8;
  --grey-900: #F2EFE9;
}

/* `.k-btn--light` koyu zeminde "acik" olmali; --grey-0 artik koyu oldugu icin
   burada elle sampanya veriliyor. */
body.k-prem .k-btn--light { background: var(--gold-500); color: #171614; }
body.k-prem .k-btn--light:hover { background: var(--gold-400); color: #171614; }
/* Altin dolgulu butonda metin KOYU olmali. */
body.k-prem .k-btn--primary,
body.k-prem .k-catnav__link.is-now,
body.k-prem .k-pager .page-numbers.current,
body.k-prem .k-tab[data-on="true"] { color: #171614; }

/* Basliklar altin -- yalnizca BASLIK, govde metni degil. */
body.k-prem .k-arch__title,
body.k-prem .k-secline__t,
body.k-prem .k-pdp__title { color: var(--gold-400); }

/* Kart yuzeyleri: kupur beyaz zeminiyle koyu sayfada delik acar; premium
   tarafinda urun gorselleri SAHNE oldugu icin kutuyu doldururlar. */
body.k-prem .k-arch-card__media,
body.k-prem .k-pcard__media,
body.k-prem .k-line__media {
  background: var(--surface-subtle); border-radius: var(--radius-xl); overflow: hidden;
}
body.k-prem .k-arch-card__media img.is-scene,
body.k-prem .k-pcard__media img.is-scene { object-fit: cover; }
body.k-prem .k-pdp__hero img { border-radius: var(--radius-xl); }

/* ⚠ 44 premium urunun 34'unde sahne fotografi var, 10'unda YOK (olculdu --
   galeride yalnizca dekupe kare mevcut). O 10'u koyu zeminde ortalayinca
   gorselin kendi BEYAZ zemini koyu kutunun icinde parlak bir dikdortgen
   birakiyordu: kaza gibi duruyordu. Medya kutusunu da beyaza cekince gorsel
   ile kutu tek parca oluyor ve karar verilmis bir "urun levhasi" gibi
   okunuyor. Sahne gorselleri `cover` ile kutuyu doldurdugu icin bu zeminden
   etkilenmiyor. */
body.k-prem .k-arch-card__media,
body.k-prem .k-pcard__media,
body.k-prem .k-line__media { background: #FFFFFF; }

/* Kabuk premium sayfada da koyu okunur. */
body.k-prem .k-topbar { background: var(--surface-subtle); }
body.k-prem .k-header { background: rgba(23, 22, 20, .92); box-shadow: 0 1px 24px rgba(0, 0, 0, .35); }
body.k-prem .k-mega__panel { background: var(--surface-page); }
body.k-prem .k-footer { background: var(--surface-page); }
body.k-prem .k-arch__sub { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   22. ESSENTIALS -- beyaz ve MEKANIK

   Premium'un karsiti degil, farkli bir is: proje/hacim tarafi. Bu yuzden
   atmosfer yok, VERI var -- daha sik izgara, kod ve olcu one cikar,
   rakamlar tabular, kenarlar hairline.
   -------------------------------------------------------------------------- */
body.k-ess .k-arch-grid { gap: var(--space-8) var(--space-5); }
body.k-ess .k-arch-card__media {
  /* ⚠ Burada `box-shadow: inset` vardi ve HIC gorunmuyordu: ic golge kutunun
     icine cizilir, urun gorseli ise onun USTUNDE duruyor ve kutuyu tamamen
     ortuyor. Olu koddu. Yerine cizgi eklemiyoruz -- mekanik his zaten sik
     izgara, kucuk ad, tabular rakam ve keskin koseden geliyor. */
  background: var(--surface-page);
  border-radius: var(--radius-sm);
}
body.k-ess .k-arch-card__name { font-size: var(--size-body-sm); }
body.k-ess .k-arch-card__cats,
body.k-ess .k-arch-card__code {
  font-variant-numeric: tabular-nums; letter-spacing: var(--ls-relaxed);
  font-size: var(--size-caption); color: var(--text-tertiary);
}
body.k-ess .k-arch__title { letter-spacing: var(--ls-snug); }
body.k-ess .k-catnav__link { border-radius: var(--radius-sm); }
body.k-ess .k-chip, body.k-ess .k-chip--btn { border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   Essentials olcu blogu (inc/essentials-facts.php)

   ⚠ Sayilar grafik DEGIL istatistik kutusu: tek deger, karsilastirma yok.
   ⚠ Cubuklar taban cizgisine oturur, ust uc 4px yuvarlak; eksen/izgara YOK --
     iki degerli bir karsilastirmada izgara gurultu.
   ⚠ Metin marka rengini GIYMEZ: deger ve etiketler mürekkep token'larinda,
     kimligi cubugun kendisi tasiyor.
   ⚠ prefers-color-scheme yok: site tek temali.
   -------------------------------------------------------------------------- */
.k-ess-facts { margin-top: var(--space-9); display: grid; gap: var(--space-9); }
@media (min-width: 900px) {
  .k-ess-facts { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

.k-ess-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-6) var(--space-7);
}
.k-ess-stat { border-top: 1px solid var(--border-hairline); padding-top: var(--space-4); }
.k-ess-stat__n {
  margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600;
  letter-spacing: var(--ls-tight); line-height: 1.1; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.k-ess-stat__u {
  display: inline-block; margin-inline-start: .4ch;
  font-size: var(--size-caption); font-weight: 400; color: var(--text-tertiary);
  letter-spacing: 0;
}
.k-ess-stat__l {
  margin: var(--space-2) 0 0; font-size: var(--size-caption);
  color: var(--text-tertiary); letter-spacing: var(--ls-wide); text-transform: uppercase;
}

.k-ess-vol { margin: 0; }
.k-ess-vol__t {
  margin: 0 0 var(--space-5); font-size: var(--size-body-sm); color: var(--text-secondary);
}
.k-ess-vol__note { margin: var(--space-4) 0 0; font-size: var(--size-caption); color: var(--text-tertiary); }
.k-ess-vol__plot {
  display: grid; grid-template-columns: repeat(2, minmax(0, 120px));
  gap: var(--space-8); align-items: end; min-height: 190px;
}
.k-ess-bar { display: grid; grid-template-rows: 1fr auto auto; height: 190px; }
.k-ess-bar__fill {
  align-self: end; width: 100%; height: var(--h, 100%);
  background: var(--brand-cream-100, #E9E2D8);
  border-radius: 4px 4px 0 0;
}
.k-ess-bar--bulk .k-ess-bar__fill { background: var(--surface-brand); }
.k-ess-bar__v {
  margin: var(--space-3) 0 0; font-size: var(--size-body-sm); font-weight: 600;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.k-ess-bar__x {
  margin: 2px 0 0; font-size: var(--size-caption); color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.k-ess-facts--compact .k-ess-vol__plot { min-height: 130px; }
.k-ess-facts--compact .k-ess-bar { height: 130px; }
.k-ess-refs { grid-column: 1 / -1; border-top: 1px solid var(--border-hairline); padding-top: var(--space-6); }
.k-ess-refs__t {
  margin: 0 0 var(--space-4); font-size: var(--size-caption);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-tertiary);
}
.k-ess-refs__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7);
  font-size: var(--size-body); color: var(--text-primary);
}
.k-ess-refs__list li { position: relative; padding-inline-start: 18px; }
.k-ess-refs__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--surface-brand);
}
.k-ess-refs__n { margin: var(--space-4) 0 0; font-size: var(--size-caption); color: var(--text-tertiary); }

/* Quadrifoglio kartela teknik satiri — koleksiyon acildiginda kompozisyon /
   Martindale / yanmazlik. ⚠ prefers-color-scheme YOK (site tek temali). */
.k-kartela__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: var(--size-caption); line-height: 1.5;
  color: var(--text-secondary);
}
.k-kartela__spec { letter-spacing: .01em; }
.k-kartela__fire {
  display: inline-flex; align-items: center;
  padding: 1px var(--space-3);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(29, 27, 25, .14);
  color: var(--text-tertiary); white-space: nowrap; cursor: help;
}