/* ============================================================================
   tune2.css — İşler kataloğu + iş sayfaları
   Ana sayfadaki work-gateway dilini taşır: eğik kesilmiş çerçeve, sakin
   zemin, mono künye, ince kırmızı çizgi. Çizim/mühür süsü YOK — göz
   önce görsele gitsin.
   system.css ve discovery.css'ten SONRA yüklenir.
   ============================================================================ */

/* ------------------------------------------------------------- 0) RENK BİRLİĞİ
   system.css soluk somon kırmızılar taşıyordu (#FF8D8A, #FFB3B0, #F5B396),
   discovery.css #d55246. Sayfalar arası bağ kopuyordu: hepsi --shu. */
:root,
.catalog-page,
.project-page {
  --shu: #B80000;
  --accent: #B80000;
  --accent-txt: #B80000;
  --neg: #B80000;
}
.project-page a:not([class]),
.catalog-page a:not([class]) { text-decoration-color: var(--shu) }

/* --------------------------------------------------------- 1) KATALOG IZGARASI */
.catalog .project-grid,
#projects {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 62px 30px !important;
}
@media (max-width: 1000px) { .catalog .project-grid, #projects { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 50px 22px !important } }
@media (max-width: 640px)  { .catalog .project-grid, #projects { grid-template-columns: 1fr !important; gap: 42px !important } }

/* --------------------------------------------------------------- 2) KART: SAKİN
   Çerçeve yok, kontur yok. Görsel + altında künye. Ana sayfadaki
   gateway sahnesiyle aynı eğik kesim. */
.project-card {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  overflow: visible !important;
  transform: none !important;
}
.project-card::before, .project-card::after { content: none !important }

.project-card .project-link {
  display: block !important;
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  overflow: visible;
  text-decoration: none;
  grid-template-columns: none !important;
}

.project-card .project-cover {
  position: relative;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: #11100d;
  /* gateway sahnesindeki eğik kesim */
  clip-path: polygon(1.6% 0, 100% 0, 98.4% 100%, 0 100%);
}
.project-card .project-cover img {
  width: 100%; height: 100%;
  object-fit: cover !important;
  background: none !important;
  filter: brightness(.86) saturate(1.02);
  transform: scale(1.001);
  transition: filter .5s var(--easing), transform .9s var(--easing);
}
.project-card:hover .project-cover img,
.project-card:focus-within .project-cover img { filter: brightness(1) saturate(1.05); transform: scale(1.035) }

/* çiftli kapak (Yataş) */
.project-cover--pair { display: flex !important; background: #e8e1d8 }
.project-cover--pair img { width: 50%; object-fit: contain !important; filter: none }

/* -------------------------------------------------------------- 3) KÜNYE: SESSİZ */
.project-card .project-caption {
  position: static !important;
  inset: auto !important;
  display: block !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 13px 0 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}
.project-card .project-kind {
  font: 9px/1.4 var(--font-mono, monospace) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9a9388 !important;
  margin: 0 0 7px !important;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card .project-caption h2 {
  position: relative;
  display: block;
  font-size: 21px !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em;
  font-weight: 400 !important;
  margin: 0 !important;
  color: #F4EFE6;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(244, 239, 230, .16);
  transition: color .3s var(--easing);
}
/* ince kırmızı çizgi soldan çekilir */
.project-card .project-caption h2::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--shu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.72, 0, .16, 1);
}
.project-card:hover .project-caption h2::after,
.project-card:focus-within .project-caption h2::after { transform: scaleX(1) }

.project-card .project-description {
  margin: 11px 0 0 !important;
  font: 400 12.5px/1.6 var(--font, sans-serif) !important;
  color: #a49c90 !important;
}

/* ok yerine sessiz bir işaret — künyenin sağ üstünde değil, akışta */
.project-card .project-arrow {
  display: none !important;
}

/* ------------------------------------------------------------- 4) FİLTRE SATIRI */
.catalog-controls {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 44px !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}
.catalog-filters {
  display: flex !important;
  flex: 1 1 660px;
  flex-wrap: wrap;
  gap: 0 24px !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}
.catalog-filters button {
  position: relative;
  padding: 9px 0 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font: 400 14px/1.4 var(--font, sans-serif) !important;
  letter-spacing: -.012em;
  color: #8f887e !important;
  cursor: none;
  transition: color .3s var(--easing);
}
.catalog-filters button::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--shu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.72,0,.16,1);
}
.catalog-filters button:hover { color: #d8d1c6 !important }
.catalog-filters button[aria-pressed="true"] { color: #F4EFE6 !important }
.catalog-filters button[aria-pressed="true"]::after { transform: scaleX(1) }

.catalog-search { flex: 0 1 230px; display: block !important; border: 0 !important; background: none !important; padding: 0 !important }
.catalog-search span {
  display: block;
  font: 9px/1.4 var(--font-mono, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9a9388;
  margin-bottom: 5px;
}
.catalog-search input {
  width: 100%;
  border: 0 !important;
  border-bottom: 1px solid rgba(244, 239, 230, .2) !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 7px 0 !important;
  color: #F4EFE6;
}
.catalog-search input:focus { border-bottom-color: var(--shu) !important; outline: none }

/* --------------------------------------------------------------- 5) GİRİŞ BLOĞU */
.catalog-intro h1 em { color: var(--shu) }
.catalog-seal { color: var(--shu) }
.catalog-meta {
  border-top: 1px solid rgba(244, 239, 230, .12);
  padding-top: 15px;
  margin-top: 28px !important;
}
.catalog-meta p { color: #9a9388 !important }

/* ----------------------------------------------- 6) İŞ SAYFASI: İLGİLİ İŞLER */
.project-grid--related { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 48px 30px !important }
@media (max-width: 700px) { .project-grid--related { grid-template-columns: 1fr !important } }

@media (prefers-reduced-motion: reduce) {
  .project-card .project-cover img,
  .project-card .project-caption h2::after,
  .catalog-filters button::after { transition: none !important }
}

/* ---------------------------------------------------- 7) ALAN KARTLARI + AYIRAÇ
   Katalog iki bölüm: üstte projeler, altta alanlar (kategoriler).
   Alan kartında ek olarak içindeki markaların adı geçiyor. */
.catalog-split {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 30px 0 4px;
  font: 9px/1 var(--font-mono, monospace);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9a9388;
}
.catalog-split::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(244, 239, 230, .14);
}
.project-brands {
  margin: 9px 0 0 !important;
  font: 400 11px/1.65 var(--font-mono, monospace) !important;
  letter-spacing: .02em;
  color: #7f786e !important;
}
.project-card--alan .project-cover { filter: none }
.project-card--alan .project-cover img { filter: brightness(.7) saturate(.9) }
.project-card--alan:hover .project-cover img { filter: brightness(.95) saturate(1) }
.project-card--alan .project-caption h2 { font-size: 22px !important }

/* ------------------------------------------------- 8) ALAN SAYFASI: MARKA ŞERİDİ
   Katalogdan kaldırılan tek işler burada adıyla duruyor. */
.alan-markalar { margin-top: 8px; padding-bottom: 6px }
.am-baslik {
  font: 9px/1.4 var(--font-mono, monospace);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9a9388;
  margin: 0 0 12px;
}
.am-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid rgba(244, 239, 230, .14);
}
.am-liste li {
  font: 400 15px/1.4 var(--font, sans-serif);
  letter-spacing: -.015em;
  color: #cfc8bc;
}
.am-liste li + li { position: relative }
.am-liste li + li::before {
  content: '·';
  position: absolute;
  left: -15px;
  color: #5c554c;
}
@media (max-width: 620px) { .am-liste { gap: 6px 18px } .am-liste li { font-size: 13.5px } .am-liste li + li::before { left: -11px } }

/* --------------------------------------------- 9) GÖRÜNÜM: SEÇİLİ İŞLER / ALANLAR
   Sekiz kategori düğmesi yerine iki seçenek. */
body[data-gorunum="proje"] .project-card--alan,
body[data-gorunum="alan"]  .project-card:not(.project-card--alan) { display: none }
.catalog-split { display: none !important }
.project-card.aramada-gizli { display: none !important }
body.arama-acik[data-gorunum] .project-card:not(.aramada-gizli) { display: block !important }

.catalog-filters [data-gorunum] {
  font: 400 clamp(17px, 1.9vw, 22px)/1.3 var(--font, sans-serif) !important;
  letter-spacing: -.03em;
  padding: 6px 0 14px !important;
}
.catalog-filters { gap: 0 34px !important }
.catalog-filters [data-gorunum]::after { height: 2px; bottom: 6px }