/* =============================================================================
   PROJELER — Seçili çalışmalar
   Premium proje grid'i. Renk/spacing yalnızca tasarım sistemi değişkenleri.
   ============================================================================= */

.projects { background:
  radial-gradient(120% 90% at 100% 0%, rgba(194, 168, 104,.05) 0%, transparent 55%); }

/* --------------------------------- GRID ---------------------------------- */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2rem);
}

/* --------------------------------- CARD ---------------------------------- */
.project { isolation: isolate; }
.project__link { display: flex; flex-direction: column; height: 100%; }

/* ------------------------------- MEDIA / PLACEHOLDER ---------------------- */
.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

/* Şık gradient placeholder (görsel yoksa görünen temel katman) */
.project__placeholder {
  position: absolute; inset: 0;
  display: block;
  background:
    radial-gradient(140% 120% at 0% 0%, var(--brown-700) 0%, transparent 55%),
    radial-gradient(120% 120% at 100% 100%, var(--brown-850) 0%, transparent 60%),
    linear-gradient(135deg, var(--brown-800) 0%, var(--brown-950) 100%);
}
/* İnce altın doku çizgileri */
.project__placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, var(--line) 0 1px, transparent 1px 22px);
  opacity: .5;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 75%);
}

/* Büyük zarif indeks numarası */
.project__index {
  position: absolute; top: clamp(.6rem, 2vw, 1.1rem); left: clamp(.9rem, 2.4vw, 1.4rem);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 6rem);
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: .9;
}
.project__placeholder-cat {
  position: absolute; right: clamp(.9rem, 2.4vw, 1.4rem); bottom: clamp(.8rem, 2vw, 1.2rem);
  font-size: var(--fs-kicker);
  font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-400); opacity: .55;
}

/* Görsel: placeholder üstüne biner; yoksa onerror ile DOM'dan kalkar */
.project__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .8s var(--ease), filter .8s var(--ease);
}

/* Hover parlama süpürmesi */
.project__shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(244,217,155,.18) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.project:hover .project__img { transform: scale(1.06); filter: saturate(1.08); }
.project:hover .project__shine { transform: translateX(120%); }

/* ------------------------------- BODY ------------------------------------ */
.project__body {
  display: flex; flex-direction: column;
  gap: .85rem;
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  flex: 1;
}
.project__meta {
  display: flex; align-items: center; gap: .7rem;
  margin: 0;
}
.project__meta::before { display: none; } /* kicker base ::before iptal */
.project__year { position: relative; padding-left: .9rem; color: var(--text-mut); letter-spacing: .18em; }
.project__year::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold-600);
}

.project__title { transition: color .4s var(--ease); }
.project:hover .project__title { color: var(--gold-300); }

.project__desc { margin: 0; max-width: 46ch; }

/* ------------------------------- TAGS ------------------------------------ */
.project__tags {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .2rem;
}
.project__tag {
  font-size: var(--fs-sm);
  line-height: 1;
  padding: .5rem .8rem;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255,255,255,.02);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.project:hover .project__tag { color: var(--gold-300); border-color: var(--gold-700); }

/* ------------------------------- CTA ------------------------------------- */
.project__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: auto; padding-top: .4rem;
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: .04em;
  color: var(--gold-400);
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.project__cta svg { width: 17px; height: 17px; transition: transform .4s var(--ease); }
.project:hover .project__cta { opacity: 1; transform: none; }
.project:hover .project__cta svg { transform: translateX(4px); }
.project__link:focus-visible .project__cta { opacity: 1; transform: none; }

/* ----------------------------- RESPONSIVE -------------------------------- */
@media (max-width: 640px) {
  .projects__grid { grid-template-columns: 1fr; }
  .project__cta { opacity: 1; transform: none; } /* dokunmatikte her zaman görünür */
}

/* prefers-reduced-motion: yalnızca CSS — hareketleri sustur */
@media (prefers-reduced-motion: reduce) {
  .project__img, .project__shine, .project__cta, .project__cta svg { transition: none; }
  .project:hover .project__img { transform: none; }
  .project:hover .project__shine { transform: translateX(-120%); }
  .project__cta { opacity: 1; transform: none; }
}