/* ==========================================================================
   /isler/<proje>/ -- TEK PROJE SAYFASI

   Neden ayri dosya: isler.css /isler/ izgarasinin kendi dosyasi ve baska
   islerde acik olabiliyor; theme.css / v13-fixes de oyle. Bu sayfanin butun
   bicimi BURADA, baska dosyaya tek satir girmiyor.

   ⚠ OZGULLUK: legacy.css `body.page:not(.home) main h1/h2/p` ile (0,2,3)
     seviyesinde yaziyor. Buradaki eleman kurallari UC sinifla (0,3,0)
     yaziliyor ki onu gecsin; kisaltirsan legacy geri gelir. Ayni tuzak
     isler.css'te de yasandi.

   ⚠ text-transform:uppercase KULLANILMIYOR: Turkce'de i -> I yapar. Eyebrow
     metni PHP tarafinda zaten buyuk harfle uretiliyor.

   Ev kurallari: altcizgi yok, ayirac cizgisi yok, hover'da yukselme/golge
   yok, sabit renk/olcu yok -- her deger token.
   ========================================================================== */

.k-site .k-proje {
  padding-top: var(--space-10);
  padding-bottom: var(--section-y);
}

/* -- Baslik blogu --------------------------------------------------------- */

.k-site .k-proje .k-proje__eyebrow {
  margin: 0;
  font-size: var(--size-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}

.k-site .k-proje .k-proje__title {
  margin: var(--space-3) 0 0;
  max-width: none;
  font-size: var(--size-display-2);
  line-height: var(--lh-display-2);
  letter-spacing: var(--ls-tight);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

/* Sehir · yil · tur. Tabular rakam: yil hizali okunur. */
.k-site .k-proje .k-proje__meta {
  margin: var(--space-3) 0 0;
  max-width: none;
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.k-site .k-proje .k-proje__lead {
  margin: var(--space-5) 0 0;
  max-width: 62ch;
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--text-secondary);
}

/* -- Fotograf izgarasi ---------------------------------------------------- */

.k-site .k-proje .k-proje__galeri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}

/* <button> tarayici varsayilanlarini tasiyor: kenarlik, dolgu, zemin, font. */
.k-site .k-proje .k-proje__kare {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  background: var(--surface-sunken);
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}

.k-site .k-proje .k-proje__kare:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.k-site .k-proje .k-proje__kare img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- Kullanilan urunler --------------------------------------------------- */

.k-site .k-proje .k-proje__urunler {
  margin-top: var(--space-13);
}

.k-site .k-proje .k-proje__h2 {
  margin: 0;
  max-width: none;
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

/* KUCUK kartlar: 17 urun tek ekranda okunabilsin. Sabit piksel yerine
   auto-fill + min genislik -- kirilma noktasi gerekmeden akiyor. */
.k-site .k-proje .k-proje__ugrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--space-7) var(--space-5);
  margin-top: var(--space-7);
}

.k-site .k-proje .k-proje__ucard {
  display: block;
  text-decoration: none;   /* ev kurali: altcizgi yok */
  color: inherit;
}

.k-site .k-proje .k-proje__ucard:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

/* ⚠ object-fit: contain -- urun kupurleri kare ve KIRPILMAMALI. Zemin
   yalnizca gorsel yuklenene kadar gorunur. */
.k-site .k-proje .k-proje__uplate {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunken);
}

.k-site .k-proje .k-proje__uplate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.k-site .k-proje .k-proje__uad {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--size-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.k-site .k-proje .k-proje__ukat {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-tertiary);
}

.k-site .k-proje .k-proje__geri {
  margin: var(--space-12) 0 0;
  max-width: none;
  font-size: var(--size-body-sm);
  line-height: var(--lh-body-sm);
}

.k-site .k-proje .k-proje__geri a {
  color: var(--text-link);
  text-decoration: none;
}

/* -- Lightbox ------------------------------------------------------------- */

.k-site .k-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-scrim);
}

.k-site .k-lb[hidden] { display: none; }

.k-site .k-lb .k-lb__img {
  grid-column: 2;
  justify-self: center;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

/* ⚠ Perde BEYAZ (--surface-scrim = rgba(255,255,255,.93)). Dugme zemini de
   beyaz olursa perdeden AYRISMAZ -- sessiz kontrol zemini kullaniliyor. */
.k-site .k-lb .k-lb__ok,
.k-site .k-lb .k-lb__kapat {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--control-quiet-bg);
  color: var(--text-heading);
  border-radius: var(--radius-circle);
  width: var(--control-h-md);
  height: var(--control-h-md);
  font-size: var(--size-h3);
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.k-site .k-lb .k-lb__ok--geri  { grid-column: 1; }
.k-site .k-lb .k-lb__ok--ileri { grid-column: 3; }

.k-site .k-lb .k-lb__kapat {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
}

.k-site .k-lb .k-lb__sayac {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  margin: 0;
  max-width: none;
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  /* ⚠ --text-inverse (#FFF) DEGIL: perde beyaz, yazi kayboluyordu. */
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* -- Kirilma noktalari ---------------------------------------------------
   responsive.css'teki esiklerle ayni. */

@media (max-width: 1023px) {
  .k-site .k-proje .k-proje__galeri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (max-width: 767px) {
  .k-site .k-proje .k-proje__galeri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-10);
  }
  .k-site .k-proje .k-proje__ugrid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--space-6) var(--space-4);
  }
  /* Oklar mobilde parmagin altinda kalmasin: gorselin ustune bindirilir. */
  .k-site .k-lb {
    padding: var(--space-4);
  }
  .k-site .k-lb .k-lb__ok {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .k-site .k-lb .k-lb__ok--geri  { left: var(--space-4); }
  .k-site .k-lb .k-lb__ok--ileri { right: var(--space-4); }
  .k-site .k-lb .k-lb__img { grid-column: 1 / -1; }
}

/* -- Kullanilan urunler: BOLUMLER (r170-k) --------------------------------
   ⚠ Baslik altina AYIRAC CIZGISI YOK -- ev kurali. Ayrim bosluk ve
   tipografiyle kuruluyor; bolum basligi kartlardan belirgin sekilde kucuk
   ve ikincil renkte, boylece urun adlariyla yarismiyor. */
.k-site .k-proje .k-proje__ugrup + .k-proje__ugrup {
  margin-top: var(--space-10);
}

.k-site .k-proje .k-proje__h3 {
  margin: 0;
  max-width: none;
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}

.k-site .k-proje .k-proje__ugrup .k-proje__ugrid {
  margin-top: var(--space-5);
}

/* ── Ürün sayfasında "Kullanıldığı projeler" (r174) ──────────────────────
   PDP'nin kendi bölüm dilini (.k-pdp__sec + .k-secline) sürdürüyor; yalnız
   kart biçimi burada. Ayıraç çizgisi ve hover'da yükselme yok. */
.k-site .k-prj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-8) var(--gutter);
}

.k-site .k-prj-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.k-site .k-prj-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xl);
}

/* Kaynak küpür 4/3, karo da 4/3 -- kırpılmaz. */
.k-site .k-prj-card__plate {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-sunken);
}

.k-site .k-prj-card__plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.k-site .k-prj-card__n {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-normal);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.k-site .k-prj-card__m {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .k-site .k-prj-grid { grid-template-columns: 1fr; gap: var(--space-7); }
}