/* ==========================================================================
   STMACH Robotics - projects.css
   Proje kartlari - urun kartiyla ayni iskelet, farkli oran ve etiket.
   ========================================================================== */

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.project-card:hover {
  border-color: var(--st-orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.project-card__media { aspect-ratio: 16 / 10; }
.project-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.project-card:hover .project-card__media img { transform: scale(1.04); }

.project-card__tag {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--st-orange);
  color: var(--st-white);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.project-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-3);
  padding: var(--space-5);
}

.project-card__title { margin: 0; font-size: var(--fs-h4); }
.project-card__title a:hover { color: var(--st-orange-text); }

.project-card__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card__foot { margin-block-start: auto; padding-block-start: var(--space-2); }

/* ==========================================================================
   PROJE DETAY SAYFASI
   Urun detayiyla ayni iskelet: .product izgarasi, .spec-table, .spec-list
   yeniden kullanilir. Buradakiler yalnizca projeye ozel parcalar.
   ========================================================================== */

.proje__media { border-radius: var(--radius-lg); }

.proje__body { max-width: 78ch; }

.proje__h2 {
  margin-block: var(--space-8) var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--st-orange);
  font-size: var(--fs-h3);
}
.proje__h2:first-child { margin-block-start: 0; }

/* Olculebilir hedefler - anahtar/deger cifti */
.goals { display: grid; gap: var(--space-4); }

.goal {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--st-line);
  border-radius: var(--radius);
}
.goal__key {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.goal__key .icon { color: var(--st-orange); inline-size: 15px; block-size: 15px; }
.goal__val {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Proje plani tablosunda ust satir basliklari */
.spec-table thead th {
  color: var(--text-strong);
  font-weight: 700;
  border-block-end-width: 2px;
}
.spec-table thead th:not(:first-child) { inline-size: auto; }