/* ============================================================
   AGORA İNŞAAT — projeler.css
   Kapsam: /projeler/ (Tamamlanan Projeler + Devam Eden Projeler
   bölümleri) ve /referanslar/. Bölüm 9.3 referans alınmıştır.
   Büyük/kaliteli proje fotoğrafları öne çıkacak şekilde geniş
   görsel alanları hedeflenir.
   ============================================================ */

/* --- 1. Projeler sayfası: iki bölüm arası sekme/anchor gezinme --- */
.projects-tabs {
  display: flex;
  gap: var(--space-sm);
  border-bottom: var(--border-width) solid var(--border-color);
  margin-bottom: var(--space-lg);
}

.projects-tabs a {
  padding: var(--space-sm) var(--space-md);
  font-weight: 500;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.projects-tabs a:hover {
  color: var(--color-primary);
}

.projects-tabs a[aria-current="true"] {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.projects-section {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-2xl);
  scroll-margin-top: 100px; /* sticky header'ın altına düzgün konumlanma için */
}

.projects-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.projects-section__badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: var(--border-width) solid var(--color-primary);
  color: var(--color-primary);
}

.projects-section__badge--ongoing {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

/* --- 2. Proje galeri grid'i (büyük fotoğraflar öne çıkar) --- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* İlk kart daha büyük — vitrin/öne çıkan proje etkisi */
.project-grid > :first-child {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .project-grid > :first-child { grid-column: span 2; }
}

@media (max-width: 560px) {
  .project-grid > :first-child { grid-column: span 1; }
}

.project-card {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.project-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 0;
}

.project-grid > :first-child img {
  height: 380px;
}

.project-card__body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.project-card h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.project-card p {
  color: var(--color-secondary);
  font-size: 0.9rem;
}

/* --- 3. Referanslar sayfası --- */
.references-intro {
  max-width: var(--content-max-width);
  margin-bottom: var(--space-lg);
}

.references-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .references-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .references-grid { grid-template-columns: 1fr; }
}

.reference-card {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  text-align: center;
}

.reference-card img {
  max-height: 60px;
  width: auto;
  margin: 0 auto var(--space-sm);
  object-fit: contain;
}

/* ============================================================
   4. PLACEHOLDER KARTLAR — /projeler/ ve /referanslar/ sayfalarının
   XML kaynağı tamamen BOŞ geldi (gerçek proje/logo verisi yok).
   Var olmayan proje adı/adresi/logo uydurmak yerine, Bölüm 9.2'deki
   footer placeholder mantığıyla tutarlı, dürüst bir "yakında
   eklenecek" görünümü kullanılır. Müşteri gerçek içerikleri
   ilettiğinde bu kartlar kolayca gerçek proje/logo kartlarıyla
   değiştirilebilir (yapısı .project-card / .reference-card ile
   birebir aynı, sadece görsel yerine ikon var).
   ============================================================ */
.project-card--placeholder,
.reference-card--placeholder {
  border-style: dashed;
  color: var(--color-secondary);
}

.project-card__placeholder-media {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-light-green);
}

.project-grid > :first-child .project-card__placeholder-media {
  height: 380px;
}

.project-card__placeholder-media .icon,
.reference-card--placeholder .icon {
  width: 40px;
  height: 40px;
  color: var(--color-secondary);
  opacity: 0.6;
}

.reference-card--placeholder .icon {
  margin: 0 auto var(--space-sm);
  display: block;
}

.placeholder-note {
  font-size: 0.85rem;
  font-style: italic;
}

/* ============================================================
   5. TEK "YAKINDA EKLENECEK" BLOĞU — /projeler/ ve /referanslar/
   sayfalarında henüz gerçek içerik (proje/referans) olmadığında
   çoklu placeholder kart yerine kullanılan sade, tek mesajlı durum.
   ============================================================ */
.coming-soon {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  border: var(--border-width) dashed var(--border-color);
  border-radius: var(--radius-md);
}

.coming-soon .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-md);
  color: var(--color-primary);
  opacity: 0.7;
}

.coming-soon h2 {
  margin-bottom: var(--space-sm);
}

.coming-soon p {
  color: var(--color-secondary);
}