/* =============================================================
 * works.css — OUR WORKS (511:808) SIFIRDAN pixel-perfect.
 * Tasarımın sabit px'i (clamp/vw YOK). Container: site geneli .container (838px kolon, x=221).
 * ============================================================= */

.wk {
  --wk-col: 838px;
  padding-bottom: 126px;
}
.wk > * {
  width: var(--wk-col);
  max-width: calc(100% - 48px);
  margin-inline: auto;
}

/* ---- Hero (511:820): frame y40, h556. Başlık y203, lead y326(bbox), foto x686/y207 ---- */
.wk-hero {
  margin-top: 40px;
  padding-top: 163px;
  padding-bottom: 216px;
  position: relative;
}
.wk-hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 46px;
  line-height: 56px;
  margin: 0;
}
.wk-hero__title-1 {
  color: var(--c-heading);
}
.wk-hero__title-2 {
  color: var(--c-primary);
}
.wk-hero__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-body);
  width: 744px;
  max-width: 100%;
  margin: 9px 0 0;
}
.wk-hero__photo {
  position: absolute;
  left: 465px;
  top: 207px;
  width: 371px;
  height: 107px;
  border-radius: 2px;
  overflow: hidden;
}
.wk-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- "Our Projects" bar (511:1125/1127 + Dropdown) ---- */
.wk-bar {
  margin-top: 0;
}
.wk-bar__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: var(--c-heading);
  margin: 0;
}
.wk-bar__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-body);
  width: 839px;
  max-width: 100%;
  margin: 7px 0 0;
}
.wk-bar__filters {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}
.wk-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.3px;
  color: var(--c-body);
  cursor: pointer;
}
.wk-filter__chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.15s linear;
}
.wk-filter[aria-expanded="true"] .wk-filter__chevron {
  transform: rotate(180deg);
}
.wk-filter[data-wk-filter-active="true"] {
  color: var(--c-primary);
}

/* ---- Filtre dropdown menüsü ---- */
.wk-filter-wrap { position: relative; }
.wk-filter__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 5;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.wk-filter__option {
  padding: 8px 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-body);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.wk-filter__option:hover { background: var(--c-surface); }
.wk-filter__option.is-selected { color: var(--c-primary); font-weight: 600; }

/* ---- Filtrelenip ekrandan çıkan proje satırları ---- */
.wk-row[data-wk-hidden] { display: none; }
.wk-empty {
  margin-top: 50px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--c-body);
}

/* ---- Proje listesi (Project List component, 838×206) ---- */
.wk-list {
  margin-top: 50px;
  padding: 0;
  list-style: none;
}
.wk-row {
  border-bottom: 1px solid var(--c-border);
  /* Divider'ın fotoğrafa bitişik durmaması için sabit min-boşluk garantisi: özet metni kısa
     olup kart tam 206px'te kalsa bile divider en az 24px aşağıda olur; özet uzayıp kart
     büyüdüğünde ise bu padding fazladan boşluk eklemez (içerik zaten daha uzun). */
  padding-bottom: 24px;
}
.wk-row + .wk-row {
  margin-top: 14px;
}
/* Kart: min-height tasarımın 206px'ini korur ama özet metni uzun olduğunda kart büyür
   (sabit yükseklik + overflow:hidden yerine) — hiçbir satır kesilmeden/meta ile çakışmadan sığar.
   Thumbnail kendi 206px'inde sabit kalır, sadece body büyüdüğünde thumbnail'in altında boşluk oluşur. */
.wk-row__link {
  display: flex;
  align-items: stretch;
  min-height: 206px;
}
.wk-row__thumb {
  position: relative;
  width: 419px;
  height: 206px;
  flex: none;
  overflow: hidden;
  background: var(--c-surface);
  align-self: flex-start;
}
/* "Project List" Default/Hover (517:1790/517:1789): kart siyah-beyaz durur, üzerine
   gelince renklenir. Tüm projelerde (gerçek kapak fotoğrafı veya placeholder fark etmeksizin)
   aynı davranış — CSS grayscale filter ile. */
.wk-row__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter 0.25s linear;
}
.wk-row__link:hover .wk-row__thumb-img {
  filter: grayscale(0);
}
/* Normal akış (flow): title en üstte (fotoğrafın üst kenarıyla aynı hizada başlar), meta en
   altta (fotoğrafın alt kenarıyla aynı hizada biter) — justify-content:space-between ile. Body
   .wk-row__link'in align-items:stretch'i sayesinde thumbnail ile aynı min-height'i (206px) alır;
   özet uzun olup kart büyüse bile title üstte/meta altta hizası korunur. */
.wk-row__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 19px;
}
/* title + desc birlikte üstte bitişik dururlar (aralarındaki 8px boşluk space-between'den
   etkilenmez); sadece bu grupla .wk-row__meta arasındaki boşluk esner. */
.wk-row__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wk-row__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: var(--c-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: scale 0.15s linear;
  transform-origin: left center;
}
.wk-row__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-body);
}
/* Year / Type / Industry / Partner: TEK satırda yan yana — her öğe kendi içeriği kadar yer
   kaplar (sabit dar genişlik YOK), böylece "Consultancy" gibi uzun Type değerleri veya uzun
   Partner metinleri kesilmez/"..." ile gizlenmez, hiçbiri alt satıra sarmaz. */
.wk-row__meta {
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  gap: 16px;
}
.wk-row__meta-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 0;
}
/* Sabit width YOK — her item flex:0 0 auto ile kendi içeriği kadar yer kaplar. Sabit width +
   white-space:nowrap;overflow:visible kombinasyonu, metin kutudan uzun olduğunda (ör. "Customer
   Experience") flex layout'ta hâlâ dar kutu kadar yer ayırıyordu; taşan metin görsel olarak
   bir sonraki item'ın (Partner logosu) üstüne biniyordu. min-width ile çok kısa değerlerde
   (ör. "2018") sütunlar arası hizası korunur. */
.wk-row__meta-item--year { min-width: 50px; }
.wk-row__meta-item--type { min-width: 90px; }
.wk-row__meta-item--industry { min-width: 100px; }
.wk-row__meta-item--partner { min-width: 90px; }
.wk-row__meta-item em,
.wk-row__meta-item b {
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  display: block;
}
.wk-row__meta-item em {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.042px;
  color: var(--c-body);
}
.wk-row__meta-item b {
  font-weight: 400;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: #000;
}
.wk-row__meta-item--logo img {
  height: 17px;
  width: auto;
  max-width: 93px;
  object-fit: contain;
}

/* "Project List" Hover varyantı (517:1789): başlık ("Joedtech") scale 1→1.056, 0.15s linear.
   Year/Type/Industry/Partner meta değerleri hover'da DEĞİŞMEZ. Status tag'i (Live vb.) ve ayrı
   Industry tag'i kaldırıldı — Industry artık meta satırında (Year/Type/Industry/Partner). */
.wk-row__link:hover .wk-row__title {
  scale: 1.056;
}

/* ---- Pull-quote carousel (513:1251) — Partners' Stories'teki gerçek alıntılar, belirli
   aralıklarla otomatik geçiş + alttaki dot'larla sırayla slayt geçişi (site.js data-wq-*). ---- */
.wk-quote {
  margin-top: 126px;
  text-align: center;
}
.wk-quote__viewport {
  position: relative;
}
.wk-quote__slide {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
  transition: opacity 0.4s ease;
}
.wk-quote__slide.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}
.wk-quote__text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: var(--c-body);
  width: 681px;
  max-width: 100%;
  margin: 0 auto;
}
.wk-quote__by {
  margin-top: 22px;
}
.wk-quote__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-heading);
  margin: 0;
}
.wk-quote__role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-body);
  margin: 0;
}
.wk-quote__role-accent {
  color: var(--c-secondary);
}
/* Carousel sayfalama noktaları (513:1166 pattern'ini takip eder) — aktif nokta vurgulanır,
   tıklanınca ilgili alıntıya geçer. */
.wk-quote__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 22px auto 0;
}
.wk-quote__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--c-border);
  cursor: pointer;
  transition: background 0.2s linear, transform 0.2s linear;
}
.wk-quote__dot.is-active {
  background: var(--c-secondary);
  transform: scale(1.25);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  /* Tasarımda foto başlığın sağında absolute (left:465px). 900px altında sığmadığı için
     tamamen gizleniyordu — bunun yerine normal akışa alıp title/lead altında gösteriyoruz,
     ORİJİNAL boyutunda (371×107px, büyümüyor/küçülmüyor). */
  .wk-hero {
    position: static;
  }
  .wk-hero__photo {
    position: static;
    width: 371px;
    height: auto;
    aspect-ratio: 371 / 107;
    max-width: 100%;
    margin-top: 24px;
  }
  /* Masaüstünde title/desc/meta/tags .wk-row__body içinde mutlak pozisyonlu (sabit top:19/55/95/162px)
     ve .wk-row__link sabit height:206px + overflow:hidden ile kesiliyordu — .wk-row__body'nin
     kendi yüksekliği absolute içerik yüzünden 0'a yakın kalıp kart kendi içeriğini kırpıyordu.
     Mobilde hepsini normal akışa (static + gerçek dikey stack) çeviriyoruz. */
  .wk-row__link {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .wk-row__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 419/206;
  }
  .wk-row__body {
    padding: 16px 0;
    gap: 8px;
  }
  .wk-row__title {
    max-width: 100%;
    white-space: normal;
  }
  .wk-row__meta {
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
  }
}
@media (max-width: 560px) {
  .wk-hero__title {
    font-size: 34px;
    line-height: 42px;
  }
  .wk-bar__filters {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}