/* ==========================================================================
   Projeler — tüm işler galerisi
   İçerik showcase-data.js'ten gelir; ekranlar showcase.js'in çizicisiyle
   (window.ArtevaScreens) üretilir, böylece iki bölüm aynı görsel dili paylaşır.
   ========================================================================== */
.work { padding-block: var(--space-section); }

/* ---------- Filtre çubuğu ---------- */
.work__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 16px 24px;
  margin-top: clamp(40px, 5vw, 72px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
}
.work__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.work__chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.work__chip span { font-family: var(--f-mono); font-size: 10px; color: var(--c-ink-3); transition: color 0.25s ease; }
.work__chip:hover { border-color: var(--c-line-strong); color: var(--c-ink); }
.work__chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.work__chip[aria-pressed="true"] span { color: var(--c-on-dark-3); }
.work__count { color: var(--c-ink-3); }

/* ---------- Izgara ---------- */
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(48px, 5vw, 80px) var(--col-gap);
  margin-top: clamp(32px, 4vw, 56px);
  transition: opacity 0.22s ease;
}
.work__grid.is-swapping { opacity: 0; }

.pj { grid-column: span 4; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pj.is-wide { grid-column: span 8; }
.pj.is-half { grid-column: span 6; }

.js .work__grid:not(.is-in) .pj { opacity: 0; }
.work__grid.is-in .pj { animation: pj-in 0.9s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes pj-in { from { opacity: 0; transform: translateY(28px); } }

/* ---------- Görsel alanı ----------
   Sabit yükseklik + container-type: size → ekranlar yüksekliğe (cqh) göre
   boyutlanır; geniş ve dar kartlarda aynı oranda görünür. */
.pj__visual {
  position: relative;
  display: block;
  height: clamp(260px, 25vw, 360px);
  overflow: hidden;
  container-type: size;
  border-radius: var(--radius-m);
  background-color: var(--c-paper-2);
  background-image: radial-gradient(var(--c-line) 1px, transparent 1.2px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}
.pj__visual--saas, .pj__visual--software { background-color: var(--c-graphite); background-image: radial-gradient(rgba(245, 245, 242, 0.08) 1px, transparent 1.2px); }
.pj__visual::after { /* odak kenarı */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--c-line);
  pointer-events: none;
}

.pj__shot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0));
  transition: transform 0.8s var(--ease-out);
}
.pj__shot .sc-frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -28px rgba(23, 25, 29, 0.55); }
.pj .mira__chart i { transform: none; }

/* Ekran boyutları (yüksekliğe göre) */
.pj__shot--iphone, .pj__shot--phone, .pj__shot--android { --w: 34cqh; }
.pj__shot--tablet  { --w: 52cqh; }
.pj__shot--laptop  { --w: min(112cqh, 76cqw); }
.pj__shot--window  { --w: min(108cqh, 76cqw); }
.pj__shot--card    { --w: min(66cqh, 50cqw); }
.pj__shot--sec.pj__shot--iphone, .pj__shot--sec.pj__shot--phone, .pj__shot--sec.pj__shot--android { --w: 27cqh; }
.pj__shot--sec.pj__shot--card { --w: min(54cqh, 40cqw); }
.pj__shot--main { z-index: 1; }
.pj__shot--sec  { z-index: 2; }

/* Kategoriye göre yerleşim */
.pj__visual--mobile .pj__shot--main { --x: -13cqh; --y: 3cqh; }
.pj__visual--mobile .pj__shot--sec  { --x: 17cqh;  --y: 11cqh; }
.pj__visual--web .pj__shot--main,
.pj__visual--saas .pj__shot--main,
.pj__visual--software .pj__shot--main { --x: max(-10cqh, -8cqw); --y: -3cqh; }
.pj__visual--web .pj__shot--sec      { --x: min(46cqh, 34cqw); --y: 16cqh; }
.pj__visual--saas .pj__shot--sec,
.pj__visual--software .pj__shot--sec { --x: min(40cqh, 26cqw); --y: 24cqh; }

/* Hover: ekranlar birbirinden hafifçe ayrılır */
.pj__visual:hover .pj__shot--main { transform: translate(-50%, -50%) translate(calc(var(--x) - 2cqh), calc(var(--y) - 2cqh)); }
.pj__visual:hover .pj__shot--sec  { transform: translate(-50%, -50%) translate(calc(var(--x) + 3cqh), calc(var(--y) - 4cqh)); }

/* ---------- Metin ---------- */
.pj__body { display: grid; gap: 10px; }
.pj__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--c-ink-3); }
.pj__meta span:first-child { color: var(--c-ink); }
.pj__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.035em; line-height: 1.05; }
.pj__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
.pj:hover .pj__title a { background-size: 100% 1px; }
.pj__desc {
  color: var(--c-ink-2);
  font-size: 15px;
  max-width: 54ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.pj.is-wide .pj__desc { -webkit-line-clamp: 3; }
.pj__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; margin-top: 6px; }

.work__empty { grid-column: 1 / -1; color: var(--c-ink-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pj, .pj.is-half { grid-column: span 6; }
  .pj.is-wide { grid-column: span 12; }
}
@media (max-width: 640px) {
  .pj, .pj.is-half, .pj.is-wide { grid-column: 1 / -1; }
  .pj__visual { height: 240px; }
  .work__chip { height: 34px; padding: 0 12px; }
}

/* ---------- Tüm projeler bağlantıları (ayrı sayfaya yönlendirir) ---------- */
/* Filtre çubuğunun sağında kısa bağlantı */
.work__all { display: inline-flex; align-items: center; gap: 8px; color: var(--c-ink-2); transition: color 0.2s ease; }
.work__all b { color: var(--c-accent); font-weight: 500; }
.work__all svg { width: 12px; height: 12px; transition: transform 0.4s var(--ease-out); }
.work__all:hover { color: var(--c-ink); }
.work__all:hover svg { transform: translate(2px, -2px); }

/* Izgaranın altında ince satır */
.work__more {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 16px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.work__grid.is-in .work__more { animation: pj-in 0.9s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.js .work__grid:not(.is-in) .work__more { opacity: 0; }
.work__more-info { display: flex; align-items: center; gap: 16px; color: var(--c-ink-3); }
.work__more-info b { color: var(--c-ink); font-weight: 500; }
.work__more-bar { position: relative; width: 120px; height: 2px; background: var(--c-line); }
.work__more-bar i { position: absolute; inset: 0; background: var(--c-ink); transform: scaleX(var(--p, 1)); transform-origin: left; }
@media (max-width: 640px) {
  .work__more-btn { width: 100%; }
  .work__more-bar { width: 72px; }
}