/* Orkestrator sahipli duzeltmeler.
   ⚠ Bu kurallar mantiken theme.css'e ait; ayri dosyada cunku yazildiklari
   sirada theme.css'te PARALEL bir is vardi ve ayni dosyaya yazmak birbirini
   eziyordu (bu turda iki kez oldu). Paralel isler bitince theme.css'e tasi.
   Bu sayfa theme.css'ten SONRA kuyruklanir, bu yuzden ezme calisir. */

/* --- Anasayfa kategori izgarasi: GENIS karo ---
   Kullanici: "2 kucuk kareyi birlestir genis ya" + "kareye kirpma".
   Genis karo 2 kolon kaplar ve plate'i gorselin GERCEK oraninda (3:2)
   durur, boylece object-fit: cover hicbir seyi kirpmaz. */
.k-cats__item--wide { grid-column: span 2; }
.k-cats__item--wide .k-cats__plate { aspect-ratio: 3 / 2; }
@media (max-width: 1023px) {
  /* Izgara 2 kolona duser; genis karo yine tam genislik, oran korunur. */
  .k-cats__item--wide { grid-column: span 2; }
}

/* --- Hover'da YUKSELTME YOK ---
   Kullanici: "su butona yaptigin hover hafif yukseltme animasyonu cok
   wordpress, onu kullanma site genelinde". Tema genelinde tek yukseltme
   kurali teklif butonundaydi (translateY(-2px)).
   ⚠ Geri bildirim TAMAMEN kaldirilmiyor: dugme hala tepki vermeli, yoksa
   tiklanabilir oldugu belirsizlesir. Yukselme yerine yalnizca golge
   derinlesiyor -- konum sabit kaliyor. */
.kvl-inquiry-toggle:hover,
.kvl-inquiry-toggle:focus-visible {
  transform: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .26);
}

/* --- Mega menu: Premium + Essentials MARKALARI ---
   Kullanici: "essentials ve premium olarak ikisi kendi logo fontlarinda mega
   menude gorunmeli beraber sag tarafta".
   ⚠ Marklar SVG; renk gecisi SVG'nin kendi icinde (bkz. inc/brand-marks.php),
   bu yuzden burada renk VERILMEZ -- verilirse gecisi ezip duz renge dusurur.
   ⚠ Ust uste degil ALT ALTA ama tek blok halinde: yan yana koyunca iki logo
   iki farkli optik agirlikta oldugu icin (altin dolgu vs. grafit kontur)
   biri digerini bastiriyordu. */
/* ⚠ BOSLUK ORANI: iki marka ARASI, her markanin KENDI ICINDEKI bosluktan
   belirgin sekilde buyuk olmali -- yoksa "SELECTION" alttaki PROLINE'a ait
   gibi okunuyor (kullanici 2026-08-27: "bitisik gorunuyorlar").
   Ici 4px (.k-mega__brandhint margin-top), arasi 16px idi: kagitta 4 kat
   ama isaretler 26px oldugu icin optik olarak yetmiyordu. Arasi 32px'e
   cikarildi -> 8 kat. Ayirma BOSLUKLA yapiliyor, cizgiyle degil. */
.k-mega__brands {
  display: flex; flex-direction: column; gap: var(--space-8);
  margin: 0 0 var(--space-7); padding: 0 0 var(--space-6);
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, .1));
}
.k-mega__brand { display: block; }
.k-mega__brand .k-mark { margin: 0; }
.k-mega__brand .k-mark--prem { height: 26px; }
/* ⚠ metin isareti: yukseklik degil punto (bkz. theme.css .k-wm). */
.k-mega__brand .k-mark--ess  { height: auto; font-size: 26px; }
.k-mega__brandhint {
  display: block; margin-top: var(--space-2);
  font-size: var(--size-caption); color: var(--text-tertiary);
}
.k-mega__brand:hover .k-mega__brandhint { color: var(--text-secondary); }
/* Aciklama degil ADIN devami: markanin altinda fisilti gibi degil, kilidin
   parcasi gibi dursun. Harf araligi acilir, ton bir kademe koyulasir.
   Yeni renk/font/olcek YOK -- mevcut tokenlar. */
.k-mega__brandhint--ad {
  letter-spacing: .18em;
  color: var(--text-secondary);
}

/* --- Kategori izgarasi: SATIR YUKSEKLIGI ---
   Kullanici: "kart grid yapisini duzelt, kayma var".
   ⚠ Sebep `grid-auto-rows: 1fr`: iki satiri ESIT yuksekliges zorluyor.
   Sag sutunda 1. satir genis karo (3:2, ~391px + etiket), 2. satir kare
   karolar (~283px + etiket). `1fr` ikisini de buyuk olana esitleyince kucuk
   karolarin altinda ~110px olu bosluk kaliyor; hakim karo iki satiri birden
   kapladigi icin o boslugu da doldurup asagi tasiyor -> iki sutun ayni yerde
   BITMIYOR. `auto` her satiri kendi icerigi kadar yapar, taban hizalanir.
   ⚠ Hakim karonun plate'i `flex: 1 1 auto` oldugu icin kalan yuksekligi
   kendisi dolduruyor; bu yuzden `auto`ya gecmek onda bosluk BIRAKMAZ. */
.k-cats { grid-auto-rows: auto; }

/* --- Anasayfa ILHAM karosu ---
   Kullanici: "inspiration gibi bir kart olsun, ustunde boyle tiket gibi adi
   yazsin koltugun".
   ⚠ Fotograf tam genislik ama SINIRSIZ uzamaz: `aspect-ratio` ile kesilir,
   yoksa dikey bir kaynakta bolum ekrani tamamen kapatiyor.
   ⚠ Tiketin kendi opak zemini var -- kontrast fotografa birakilmaz; fotograf
   degistiginde metin okunur kalir (perde/gradient ile ugrasmaya gerek yok). */
/* ⚠ ALT NEFES PAYI ZORUNLU (olculdu: bosluk 0px). Bir sonraki bolum
   (k-line--prem) KREM zeminli ve tam gorselin alt kenarindan basliyordu;
   gorselin 20px yuvarlatilmis kose ust renk degisimine biniyor ve iki
   bolum birbirine yapisik duruyordu. Ust pay 64px, alt da ayni olmali. */
.k-insp { margin-top: var(--space-11); margin-bottom: var(--space-11); }
.k-insp__link { position: relative; display: block; }
.k-insp__img {
  display: block; width: 100%; height: 100%;
  /* ⚠ Kaynak 4:3 (4800x3584). 21:9 kullanilsa yukseklikte %36 kirpardi;
     16:9 ile kayip %25 ve koltuk + halinin bir kismi karede kaliyor. */
  aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 55%;
}
.k-insp__ticket {
  /* ⚠ GERCEK FIYAT ETIKETI. Kullanici duz kutuyu reddetti, ikon gonderdi:
     sol ucu sivri, delikli klasik etiket.
     Konum: 16:9 kirpimda koltugun sirtligi yatayda %57-%97, dikeyde %52-%100.
     Etiket oraya denk gelir; lambanin uzerine dusen ilk deneme render'da
     goruldugu icin duzeltildi. */
  position: absolute; left: 66%; top: 60%;
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: var(--space-4) var(--space-6) var(--space-4) 46px;
  background: var(--surface-page); color: var(--text-primary);
  /* Sol uc sivri -> etiket silueti. */
  clip-path: polygon(0 50%, 20px 0, 100% 0, 100% 100%, 20px 100%);
  /* ⚠ Delik BOYANMAZ, DELINIR: seffaf merkez fotografi gosterir. Boyali bir
     daire acik zeminli bir karede kaybolurdu. */
  -webkit-mask-image: radial-gradient(circle 5.5px at 31px 50%, transparent 98%, #000 100%);
          mask-image: radial-gradient(circle 5.5px at 31px 50%, transparent 98%, #000 100%);
  /* ⚠ box-shadow clip-path ile KIRPILIR. drop-shadow silueti ve deligi izler. */
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .30));
  transform: rotate(-2deg);
}
.k-insp__cat {
  font-size: 10px; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-tertiary);
}
.k-insp__name { font-size: var(--size-h3); font-weight: 600; letter-spacing: var(--ls-snug); }
/* ⚠ Hover'da YUKSELTME YOK (site geneli kural); yalnizca golge derinlesiyor. */
.k-insp__link:hover .k-insp__ticket { box-shadow: 0 4px 20px rgba(0, 0, 0, .2); }
@media (max-width: 767px) {
  /* Mobilde 21:9 bir serit halinde eziliyor; dikeye yakin oran fotografi
     yasatiyor ve tiket icin de yer kaliyor. */
  .k-insp__img { aspect-ratio: 4 / 5; }
}

/* ⚠ BOLUM TAM GENISLIK DEGIL (R38). Kullanici: "bu buyukluk biraz fazla geldi,
   cozunurluk yetmedi sanirim" -- ikisi ayni sebepten: 1440px kutu 2x ekranda
   2880px dosya ister, elimizdeki 2400px (WP `-scaled` tavani). Kapsayici
   icinde kutu ~1280px'e duser, gereken 2560px olur ve 2400 pratikte yeter;
   ayrica bolum sayfayi ezmez. */
.k-insp__link { border-radius: var(--radius-xl); overflow: hidden; }

@media (max-width: 767px) {
  /* ⚠ Mobilde kirpim 4:5: yatayda daralir, koltuk kadrajda saga kayar.
     Etiket onunla birlikte tasinir, yoksa bos duvari isaret eder. */
  .k-insp__ticket { left: 44%; top: 52%; }
}

/* Instagram tutamagi: amblem + kullanici adi tek satirda. */
.k-ig__handle { display: inline-flex; align-items: center; gap: 6px; }
.k-ig__handle svg { flex: 0 0 auto; }

/* === R44: kirpma duzeltmeleri ============================================= */

/* PDP hero'su: urun alttan kesiliyordu.
   ⚠ Secici BILEREK iki sinifli (0,2,1): legacy.css'teki
     `body.single main img { height:auto }` (0,1,3) hem daha ozgul hem de bu
     dosyadan SONRA yukleniyor. Tek sinifla yazmak ise yaramaz.
   ⚠ `height` burada sart: img kendi orani ile 708x708 buyuyup 531'lik kutudan
     tasiyor ve `overflow:hidden` alti kesiyordu. */
.k-pdp__media .k-pdp__hero img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Kutu 1:1 -- one cikan gorsellerin %89.5'i tam kare (olculdu, n=611).
   4:3'te kare gorsel ya kesiliyor ya iki yanda bant birakiyordu. */
.k-pdp__hero { aspect-ratio: 1 / 1; }

/* Ilham sahnesi: berjerin tabani kesiliyordu.
   Kaynak 1.34, kutu 1.778 -> cover yukseklikten %24.6 kesiyor. Kesigin
   tamami USTTEN alinir; urun tam kalir. */
.k-insp__img { object-position: 50% 100%; }

/* === R46: malzeme secenekleri + secili kare vurgusu ======================= */

/* Malzeme secenekleri satiri: OLCULER kutulariyla ayni dil (dolgulu kutu),
   cizgi/ayirac YOK. */
.k-kartela__summary {
  align-items: center;
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.k-kartela__summary .k-label { color: var(--text-secondary); }
.k-kartela__cta { font-weight: 500; }

/* Kutular buyudu: 56 -> 76px. */
.k-kartela__grid {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--space-4);
}
.k-kartela__code { font-size: 11px; }

/* Secili kucuk resim: cerceve degil VURGU.
   Kirik gorunen 1.5px inset halka kaldirildi; secim parlaklikla anlatiliyor. */
.k-thumbs__item { opacity: .55; transition: opacity var(--duration-fast) var(--ease-standard); }
.k-thumbs__item:hover,
.k-thumbs__item:focus-visible { opacity: .82; }
.k-thumbs__item[data-on="true"] {
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--border-hairline);
}

/* ⚠ Hero ile AYNI kaskad hatasi: legacy.css `body.single main img{height:auto}`
   (0,1,3) `.k-thumbs__item img{height:100%}` (0,1,1) kuralini eziyordu, bu
   yuzden dikey kareler kare kutuda kirpiliyordu. (0,2,1) ile kapatildi. */
.k-pdp__media .k-thumbs__item img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* === R49: koyu temada hero zemini ======================================== */
/* ⚠ Acik temadaki beyaz zemin KASITLI (beyaz kupurler zemine karissin diye) --
   dokunulmuyor. Koyu temada ayni beyaz, 1:1 kutuda dikey sahnelerin iki
   yaninda parlayan bant birakiyordu. */
body.k-prem .k-pdp__hero { background: var(--surface-subtle); }


/* === R50: ilham tiketi mobilde koltugun ustunden kayiyordu ================ */
/* OLCULDU (CDP: getBoundingClientRect + kaynak gorselde canvas piksel analizi).
   Kaynak 2400x1792 -> oran 1.339. Tiket KUTUYA oranla (`left/top` %) duruyor,
   ama `cover` kirpmasi kutu oraniyla birlikte EKSEN degistiriyor:
     1440 / 1024 / 768: kutu 16/9 = 1.778 > 1.339 -> DIKEYDEN kirpar, yatay tam.
                        Gorunen kaynak penceresi x[0..1], y[0.247..1].
                        Tiket -> kaynak x 0.659 / y 0.696 = berjerin govdesi. DOGRU.
     <=767:             kutu 4/5 = 0.8 < 1.339 -> YATAYDAN kirpar (eksen degisti).
                        `object-position: 50%` ile pencere x[0.202..0.798];
                        left:44% -> kaynak x 0.462 = kanepe/lamba. KAYMANIN SEBEBI.
   Berjerin mavi govdesi kaynakta x[0.577..0.950], y[0.545..0.955] (agirlik
   merkezi 0.780 / 0.745) -- yani mobil pencerenin SAG kenarinda kaliyor ve
   0.798'de KESILIYOR: urun zaten yarim kadrajdaydi.

   ⚠ Orani her genislikte sabitlemek (ilk tercih) OLCULDU ve ELENDI: 390px'te
   kutu 358px genisliginde; 16/9 olsaydi 201px yukseklige duserdi, berjer
   ~75px kalir ve 73px'lik tiket gorselin ucta birini kaplardi -- serit olur.
   SECILEN: mobil kirpimi URUNE bagla (`object-position: 100%`), sonra tiketi
   o kirpimin icinde konumla. Berjer mobilde TAM kadraja girer ve tiket icin
   govde uzerinde genis alan acilir.
   Yeni pencere x[0.403..1.0] -> berjer govdesi kutuda x %43.4..%91.6.
   left:48% -> kaynak x ~0.688 (govdenin ortasi).
   top:66%  -> kaynak y ~0.656; mobilde DIKEY kirpim YOK, bu yuzden top
               yuzdesi dogrudan kaynak yuzdesine esittir.
   ⚠ Tiket sabit px genislikte (113px), kutu akiskan: dar ekranda oransal
   olarak buyur. OLCULDU -- tiketin sag kenari kutuda: 320px'te %86.9,
   390px'te %79.3, 600px'te %68.3; hepsi govde sinirinin (%91.6) icinde.
   Tiketin kaynak ayak izinde mavi govde orani: 320px %86, 390px %82,
   600px %75 (kalan pay kadifenin isik alan parlak yuzeyi, arka plan degil). */
@media (max-width: 767px) {
  .k-insp__img { object-position: 100% 100%; }
  .k-insp__ticket { left: 48%; top: 66%; }
}

/* === R51: PDP galerisinde dokunmatik kaydirma ============================= */
/* ⚠⚠ `touch-action: pan-y` bu isin OMURGASI: dikey kaydirmayi tarayiciya
   birakir, yatayi bize verir. Bu satir olmadan JS'in `preventDefault()`
   cagirmasi gerekirdi ve o da sayfayi asagi kaydirmayi kilitlerdi -- bu
   ozelligin en pahali regresyonu. Yatay yon tarayici tarafindan panning'e
   kapatildigi icin `pointermove` iptal edilebilir kalir, dikey harekette ise
   tarayici scroll'u baslatir ve bize `pointercancel` gelir (JS orada geri
   cekiliyor).
   ⚠ Secici BILEREK iki sinifli (0,2,1): legacy.css v13-fixes'ten SONRA
   yukleniyor (bkz. R44 notu). */
.k-pdp__media .k-pdp__hero { touch-action: pan-y; }

/* Kayma + capraz gecis ayni gecis listesinde. Sureler token: reduced-motion
   altinda --duration-base 0ms'e dusuyor, yani animasyon kendiliginden kapaniyor
   (JS akisi ayni kaliyor, sadece aninda bitiyor). */
.k-pdp__media .k-pdp__hero img {
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
/* Parmak basiliyken gorsel parmagi GECIKMESIZ takip etmeli: surukleme
   suresince gecis kapali, birakinca geri aciliyor. */
.k-pdp__media .k-pdp__hero.is-dragging img { transition: none; }
.k-pdp__media .k-pdp__hero.is-dragging {
  user-select: none; -webkit-user-select: none;
}

/* Hero klavyeyle odaklanabilir oldu (JS `tabindex=0` veriyor, yalnizca birden
   fazla gorselde). base.css'teki genel `:focus-visible` halkasi kutunun
   yariciapini `--radius-chip`e dusuruyordu; kutu sekli korunuyor. */
.k-pdp__media .k-pdp__hero:focus-visible { border-radius: var(--radius-lg); }

/* === R52: kucuk resim seridi -- multicol GRID'e cevrildi =================== */
/* ⚠⚠ OLCULDU (getBoundingClientRect, 6 gorselli urun): theme.css'teki
   `columns: var(--thumb-cols)` seridi DOLDURMUYORDU. 1440'ta serit 708px, ama
   6 kare yalnizca x[0..348] araligini kapliyordu -- sagdaki %51 BOSTU. Sebep
   multicol dengeleme: `break-inside:avoid` + `aspect-ratio:1/1` kutularda
   Chrome kolon yuksekligini iki kareye oturtup 6 kolonun 3'unu bos birakiyor
   (390'da da ayni: 358px seritte kareler x[0..173]).
   ⚠ responsive.css'te zaten `grid-template-columns` kurallari VARDI ama
   `display` grid olmadigi icin OLU duruyorlardi. Bu blok display'i grid yapinca
   canlanacaklardi; secici bilerek (0,2,0) -- responsive.css'in (0,1,0)
   kurallarini kaskad sirasindan BAGIMSIZ olarak eziyor.
   ⚠ Kolon sayisi PHP'den geliyor (`--thumb-cols` / `--thumb-cols-m`): 2 gorselli
   uruncte 4 kolon acmak seridin yarisini yine bos birakirdi, bu yuzden deger
   `min(kolon, gorsel sayisi)`. */
.k-pdp__media .k-thumbs {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(var(--thumb-cols, 6), minmax(0, 1fr));
  gap: var(--space-4);
}
/* Bosluk artik `gap`in isi; multicol'un satir araligi kalirsa cift bosluk olur. */
.k-pdp__media .k-thumbs__item { margin-bottom: 0; }
@media (max-width: 767px) {
  .k-pdp__media .k-thumbs {
    grid-template-columns: repeat(var(--thumb-cols-m, 4), minmax(0, 1fr));
  }
}

/* === R55: ust bantta online magaza baglantisi ============================ */
/* Sag hizalama: bant flex, bu tek kural soldaki iki baglantiyi akista birakip
   bunu saga itiyor. Ayri sarmalayici gerekmedi. */
.k-topbar__shop { margin-inline-start: auto; }
/* Alan adi ikincil: ad hangi magaza oldugunu soyluyor, alan adi dogrulama. */
.k-topbar__shopdom { color: var(--text-tertiary); margin-inline-start: var(--space-2); }
/* ⚠ Dar ekranda alan adi dusuyor: bant zaten telefon + WhatsApp tasiyor,
   ucu birden sigmiyor. "Online magaza" ifadesi tek basina yeterli. */
@media (max-width: 560px) {
  .k-topbar__shopdom { display: none; }
}


/* ══ r81: teklif akisi dokunma hedefleri ═══════════════════════════════════
   Olculdu (servis edilen CSS): .kvl-btn 40px · .k-iconbtn 32px ·
   .k-arch-quote yukseklik kurali YOK (padding:0 -> hedef ~20px).
   .k-arch-quote katalogdaki HER kartta ve lead yolunun ILK adimi.

   ⚠ Tema kilidi: 32/40px bilincli tercihler. Gorsel sistemi sismesin diye
     iki ayri teknik kullanildi:
       - kart baglantisinda GORUNUM ayni, yalnizca ISABET ALANI buyur
       - dugmelerde artis yalnizca `pointer: coarse` altinda
   ⚠ Sozde-eleman mutlak konumlu: akista yer kaplamaz, layout kaymaz. */

.k-arch-quote { position: relative; }
.k-arch-quote::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  /* gorunmez; yalnizca isabet alani */
}

@media (pointer: coarse) {
  /* Parmakla dokunulan cihazda asgari hedef. Masaustu tasarim degismez. */
  .kvl-btn,
  .k-btn { min-height: 44px; }
  .k-iconbtn { min-height: 44px; min-width: 44px; }
}

/* R118: anasayfa "Kalite ve belgelendirme" karti TEK basina durur.
   .k-tools iki kolonlu bir izgara; tek kart yarim satir birakiyordu. */
.k-tools--solo { grid-template-columns: minmax(0, 1fr); }