/* ============================================================================
   İNTER İNŞAAT — "YENİ PROJE" (Çok Yakında) stilleri
   ----------------------------------------------------------------------------
   Bu dosya mevcut css/style.css dosyasını DEĞİŞTİRMEZ; yalnızca yeni
   bileşenleri ekler. Tüm seçiciler namespace'lidir, global stilleri
   ezmez ve `!important` kullanmaz.

   Yüklendiği sayfalar:
     - index.html                 (yalnızca .upcoming-slide bloğu kullanılır)
     - devameden-projeler.html    (yalnızca .upcoming-card bloğu kullanılır)
     - yeni-proje.html            (tamamı)

   Bileşenler:
     1) Tasarım token'ları
     2) .upcoming-slide   → Ana sayfa slider caption'ı
     3) .upcoming-card    → Devam eden projeler sayfasındaki proje kartı
     4) .upcoming-project → Proje detay sayfası
     5) Erişilebilirlik & hareket tercihleri

   Marka referansı (css/style.css'ten alınmıştır):
     Altın #b19777 · Koyu #272727 · Yüzey #f4f4f4
     Başlık fontu 'Oswald' · Gövde fontu 'Didact Gothic'
   ========================================================================== */


/* ==========================================================================
   1) TASARIM TOKEN'LARI
   Prefix'li (--ip-) isimler kullanıldı; mevcut projede custom property
   bulunmadığı için hiçbir şeyi ezme riski yoktur.
   ========================================================================== */
:root {
  /* Marka renkleri */
  --ip-gold: #b19777;          /* dekoratif çizgi/kenarlık + koyu zeminde metin */
  --ip-gold-soft: rgba(177, 151, 119, 0.18);
  --ip-gold-line: rgba(177, 151, 119, 0.35);
  /* Açık zeminde KÜÇÜK metin için erişilebilir altın tonu.
     #b19777 beyaz üzerinde ~2.4:1 (WCAG AA altı). Bu ton ~4.9:1. */
  --ip-gold-text: #8a6f4f;

  --ip-dark: #272727;
  --ip-ink: #1a1512;           /* sıcak koyu — hero zemini */
  --ip-white: #fff;
  --ip-surface: #f4f4f4;
  --ip-surface-2: #faf8f5;
  --ip-border: #e6e0d8;

  --ip-text: #272727;
  --ip-muted: #6d6d6d;         /* beyaz üzerinde ~5.1:1 */
  --ip-on-dark: rgba(255, 255, 255, 0.86);

  /* Boşluk skalası */
  --ip-s1: 8px;
  --ip-s2: 12px;
  --ip-s3: 16px;
  --ip-s4: 24px;
  --ip-s5: 32px;
  --ip-s6: 48px;
  --ip-s7: 64px;
  --ip-s8: 96px;
  --ip-s9: 120px;

  /* Hareket */
  --ip-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ip-dur: 280ms;
}


/* ==========================================================================
   ORTAK PARÇALAR
   ========================================================================== */

/* Küçük üst etiket (eyebrow) */
.ip-eyebrow {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--ip-gold-text);
  margin-bottom: var(--ip-s3);
}

/* Durum rozeti — "ÇOK YAKINDA" */
.ip-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ip-s1);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid var(--ip-gold-line);
  color: var(--ip-gold-text);
  background: rgba(177, 151, 119, 0.08);
  line-height: 1.2;
}

/* Rozetin nokta göstergesi — durum yalnızca renkle anlatılmaz,
   metin ("ÇOK YAKINDA") her zaman okunur. */
.ip-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Koyu zemin varyantı */
.ip-badge--light {
  color: #e6d7c2;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(0, 0, 0, 0.28);
}

/* Görsel yer tutucu — dosyalar yüklenene kadar sayfa bozulmaz */
.ip-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ip-s4);
  background:
    repeating-linear-gradient(
      135deg,
      var(--ip-surface-2),
      var(--ip-surface-2) 14px,
      #f2eee8 14px,
      #f2eee8 28px
    );
  border: 1px dashed var(--ip-gold-line);
  color: var(--ip-muted);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  min-height: 180px;
  width: 100%;
  height: 100%;
}

.ip-placeholder span {
  max-width: 22ch;
  line-height: 1.6;
}

/* İçeriğe atla bağlantısı — yalnızca klavye odağında görünür */
.ip-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ip-dark);
  color: var(--ip-white);
  padding: var(--ip-s2) var(--ip-s4);
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ip-skip:focus {
  left: var(--ip-s3);
  top: var(--ip-s3);
  color: var(--ip-white);
}


/* ==========================================================================
   2) ANA SAYFA SLIDER CAPTION'I  (.upcoming-slide)
   index.html içindeki mevcut Vegas kenburns yapısına EK caption bloğudur.
   Slider kütüphanesi, yüksekliği ve mevcut caption'ın stili değiştirilmez.
   ========================================================================== */
.upcoming-slide[hidden] {
  display: none;
}

.upcoming-slide__eyebrow {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: #e6d7c2;
  margin-bottom: var(--ip-s3);
}

.upcoming-slide__title {
  font-family: 'Oswald', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.3em;
  letter-spacing: 9px;
  text-transform: uppercase;
  color: var(--ip-white);
  margin-bottom: var(--ip-s4);
}

.upcoming-slide__text {
  max-width: 62ch;
  margin: 0 auto var(--ip-s5);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ip-on-dark);
}

.upcoming-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ip-s3);
  justify-content: center;
}

/* Slayt aktif olduğunda kademeli giriş.
   Blok `hidden` → görünür olduğunda animasyon yeniden çalışır. */
.upcoming-slide > * {
  animation: ipFadeUp 700ms var(--ip-ease) both;
}
.upcoming-slide > *:nth-child(1) { animation-delay: 120ms; }
.upcoming-slide > *:nth-child(2) { animation-delay: 240ms; }
.upcoming-slide > *:nth-child(3) { animation-delay: 360ms; }
.upcoming-slide > *:nth-child(4) { animation-delay: 480ms; }

/* Mevcut .butn-light / .butn-dark bileşenleri korunur; yalnızca
   dokunmatik hedef boyutu garanti altına alınır. */
.upcoming-slide .butn-light a,
.upcoming-slide .butn-dark a,
.upcoming-project .butn-light a,
.upcoming-project .butn-dark a,
.upcoming-card .butn-dark a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

@media (max-width: 991.98px) {
  .upcoming-slide__title {
    font-size: 38px;
    letter-spacing: 6px;
  }
}

@media (max-width: 767.98px) {
  .upcoming-slide__eyebrow {
    font-size: 11px;
    letter-spacing: 5px;
  }
  .upcoming-slide__title {
    font-size: 26px;
    line-height: 1.5em;
    letter-spacing: 4px;
    margin-bottom: var(--ip-s3);
  }
  .upcoming-slide__text {
    font-size: 16px;
    margin-bottom: var(--ip-s4);
  }
  .upcoming-slide__actions {
    flex-direction: column;
    align-items: center;
  }
  .upcoming-slide__actions .butn-light,
  .upcoming-slide__actions .butn-dark {
    width: 100%;
    max-width: 280px;
  }
  .upcoming-slide__actions .butn-light a,
  .upcoming-slide__actions .butn-dark a {
    width: 100%;
  }
}


/* ==========================================================================
   3) DEVAM EDEN PROJELER KARTI  (.upcoming-card)
   Mevcut .projects4 kartıyla aynı ritmi korur, "Çok Yakında" statüsünü
   daha net anlatır.
   ========================================================================== */
.upcoming-card {
  position: relative;
  margin-bottom: 90px;
}

.upcoming-card:last-child {
  margin-bottom: 0;
}

.upcoming-card__media {
  margin: 0;
  position: relative;
  width: 66.666667%;
  margin-left: auto;
  overflow: hidden;
  background: var(--ip-ink);
}

/* .projects4.left ile aynı mantık: kart yönü değiştirilebilir */
.upcoming-card.left .upcoming-card__media {
  margin-left: 0;
  margin-right: auto;
}

.upcoming-card__media img,
.upcoming-card__media svg {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 350ms var(--ip-ease);
}

.upcoming-card__caption {
  background: var(--ip-white);
  position: absolute;
  left: 0;
  top: 50%;
  width: 50%;
  padding: 5% 4% 5% 0;
  transform: translate(0, -50%);
}

.upcoming-card.left .upcoming-card__caption {
  left: auto;
  right: 0;
  padding: 5% 0 5% 4%;
}

.upcoming-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ip-s2) var(--ip-s3);
  margin-bottom: var(--ip-s3);
}

.upcoming-card__location {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ip-gold-text);
}

.upcoming-card__title {
  font-size: 30px;
  color: var(--ip-dark);
  letter-spacing: 5px;
  font-weight: 300;
  line-height: 1.25em;
  text-transform: uppercase;
  margin-bottom: var(--ip-s3);
}

.upcoming-card__text {
  color: var(--ip-muted);
  margin-bottom: var(--ip-s4);
}

/* --- Tüm kartı kapsayan TEK link -----------------------------------------
   Kart içinde başka <a> YOKTUR (iç içe / çift link yok, tek tab durağı).
   "KEŞFET" görünürde bir butondur ancak semantik olarak bu linkin
   içeriğidir; erişilebilir isim .ip-sr-only metniyle verilir.          */
.upcoming-card__link {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.upcoming-card__link:focus-visible {
  outline: 2px solid var(--ip-gold-text);
  outline-offset: -4px;
}

/* Yalnızca ekran okuyucular için */
.ip-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Buton görünümlü, link olmayan CTA (.butn-dark ile birebir aynı dil) */
.upcoming-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 13px 30px;
  overflow: hidden;
  background: var(--ip-gold);
  color: var(--ip-white);
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 3px;
  line-height: 1.2em;
  text-transform: uppercase;
}

.upcoming-card__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 0;
  background: var(--ip-surface);
  transition: width 300ms ease, left 300ms ease;
}

.upcoming-card__cta-txt {
  position: relative;
  z-index: 2;
  transition: color 300ms ease;
}

.upcoming-card:hover .upcoming-card__cta::after,
.upcoming-card:focus-within .upcoming-card__cta::after {
  width: 100%;
  left: 0;
}

.upcoming-card:hover .upcoming-card__cta-txt,
.upcoming-card:focus-within .upcoming-card__cta-txt {
  color: var(--ip-dark);
}

.upcoming-card:hover .upcoming-card__media img,
.upcoming-card:hover .upcoming-card__media svg,
.upcoming-card:focus-within .upcoming-card__media img,
.upcoming-card:focus-within .upcoming-card__media svg {
  transform: scale(1.04);
}

@media (max-width: 991.98px) {
  .upcoming-card__media {
    width: auto;
    margin: 0;
  }
  .upcoming-card__caption {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    padding: 30px;
    transform: translate(0, 0);
  }
  .upcoming-card.left .upcoming-card__caption {
    right: auto;
    padding: 30px;
  }
}

@media (max-width: 575.98px) {
  .upcoming-card {
    margin-bottom: var(--ip-s7);
  }
  .upcoming-card__title {
    font-size: 24px;
    letter-spacing: 3px;
  }
  .upcoming-card__caption {
    padding: var(--ip-s4) var(--ip-s3);
  }
}


/* ==========================================================================
   4) PROJE DETAY SAYFASI  (.upcoming-project)
   ========================================================================== */
.upcoming-project {
  color: var(--ip-text);
}

.upcoming-project p {
  font-size: 16px;
  line-height: 1.8;
}

/* Okuma genişliği: masaüstünde ~60-75 karakter */
.upcoming-project .ip-measure {
  max-width: 68ch;
}

/* ---- 4.1 HERO --------------------------------------------------------- */
.upcoming-project__hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88vh;                 /* Masaüstü: 80–92vh aralığı */
  padding: 130px 0 var(--ip-s7);    /* 90px transparan navbar payı + nefes */
  background-color: var(--ip-ink);
  background-image: url("../assets/images/projects/yeni-proje/yeni-proje-hero-art.svg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  color: var(--ip-white);
}

/* Kontrollü gradient overlay — çok koyu değil, metin okunabilirliği için.
   İkinci katman: içerik solda hizalı olduğundan soldan sağa hafif bir
   kontrast eğrisi uygulanır (sağdaki kompozisyon detayı korunur). */
.upcoming-project__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(16, 12, 9, 0.55) 0%,
      rgba(16, 12, 9, 0.22) 52%,
      rgba(16, 12, 9, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(16, 12, 9, 0.50) 0%,
      rgba(16, 12, 9, 0.24) 42%,
      rgba(16, 12, 9, 0.58) 100%
    );
  pointer-events: none;
}

.upcoming-project__hero-inner {
  position: relative;
  z-index: 2;
}

.upcoming-project__hero .ip-badge {
  margin-bottom: var(--ip-s4);
}

.upcoming-project__hero-eyebrow {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: #e6d7c2;
  margin-bottom: var(--ip-s4);
}

.upcoming-project__hero-title {
  font-family: 'Oswald', sans-serif;
  font-size: 62px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 12px;
  text-transform: uppercase;
  color: var(--ip-white);
  margin-bottom: var(--ip-s4);
}

.upcoming-project__hero-sub {
  font-family: 'Oswald', sans-serif;
  font-size: 21px;
  font-weight: 200;
  letter-spacing: 3px;
  line-height: 1.5;
  color: #e6d7c2;
  margin-bottom: var(--ip-s4);
}

.upcoming-project__hero-text {
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ip-on-dark);
  margin-bottom: var(--ip-s6);
}

.upcoming-project__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ip-s3);
}

/* Hero giriş animasyonları — zarif, kademeli, parallax yok */
.upcoming-project__hero-inner > * {
  animation: ipFadeUp 700ms var(--ip-ease) both;
}
.upcoming-project__hero-inner > *:nth-child(1) { animation-delay: 80ms; }
.upcoming-project__hero-inner > *:nth-child(2) { animation-delay: 180ms; }
.upcoming-project__hero-inner > *:nth-child(3) { animation-delay: 280ms; }
.upcoming-project__hero-inner > *:nth-child(4) { animation-delay: 380ms; }
.upcoming-project__hero-inner > *:nth-child(5) { animation-delay: 480ms; }
.upcoming-project__hero-inner > *:nth-child(6) { animation-delay: 580ms; }

@keyframes ipFadeUp {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---- 4.2 DURUM BİLGİ BANDI ------------------------------------------- */
.upcoming-project__stats {
  position: relative;
  background: var(--ip-white);
  padding: var(--ip-s7) 0 var(--ip-s6);
}

.upcoming-project__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ip-s3);
}

.upcoming-project__stat {
  border: 1px solid var(--ip-border);
  padding: var(--ip-s5) var(--ip-s4);
  text-align: center;
  background: var(--ip-white);
  transition: border-color var(--ip-dur) var(--ip-ease),
              transform var(--ip-dur) var(--ip-ease);
}

.upcoming-project__stat:hover {
  border-color: var(--ip-gold-line);
  transform: translateY(-3px);
}

.upcoming-project__stat-value {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 3px;
  line-height: 1.15;
  color: var(--ip-dark);
  margin-bottom: var(--ip-s2);
}

.upcoming-project__stat-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ip-gold-text);
}

/* ---- 4.3 TANITIM ------------------------------------------------------ */
.upcoming-project__intro {
  padding: var(--ip-s8) 0;
  background: var(--ip-white);
}

.upcoming-project__intro-title {
  font-family: 'Oswald', sans-serif;
  font-size: 34px;
  font-weight: 300;
  line-height: 1.35em;
  letter-spacing: 2px;
  color: var(--ip-dark);
  margin-bottom: var(--ip-s4);
}

.upcoming-project__intro p + p {
  margin-top: var(--ip-s4);
}

.upcoming-project__intro-media {
  position: relative;
  min-height: 380px;
  height: 100%;
  background: var(--ip-surface);
  overflow: hidden;
}

.upcoming-project__intro-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 4.4 PROJE BİLGİ KARTI ------------------------------------------- */
.upcoming-project__facts {
  padding: 0 0 var(--ip-s8);
  background: var(--ip-white);
}

.upcoming-project__facts-inner {
  background: var(--ip-surface);
  padding: var(--ip-s6) var(--ip-s6) var(--ip-s5);
}

.upcoming-project__facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ip-s5) var(--ip-s4);
}

.upcoming-project__fact dt {
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--ip-gold-text);
  margin-bottom: 6px;
}

.upcoming-project__fact dd {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--ip-dark);
}

/* ---- 4.5 DÖNÜŞÜM HİKÂYESİ + GALERİ ----------------------------------- */
.upcoming-project__story {
  padding: var(--ip-s8) 0;
  background: var(--ip-surface-2);
}

.upcoming-project__gallery {
  padding: var(--ip-s8) 0;
  background: var(--ip-white);
}

.upcoming-project__group {
  margin-top: var(--ip-s7);
}

.upcoming-project__group-title {
  display: flex;
  align-items: center;
  gap: var(--ip-s3);
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--ip-gold-text);
  margin-bottom: var(--ip-s4);
}

.upcoming-project__group-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ip-border);
}

/* Editoryal grid */
.upcoming-project__figures {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ip-s3);
}

.upcoming-project__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ip-surface);
  grid-column: span 2;
  aspect-ratio: 4 / 3;
  min-height: 180px;
}

.upcoming-project__figure--lead {
  grid-column: span 4;
  grid-row: span 2;
  aspect-ratio: 4 / 3;
}

.upcoming-project__figure--wide {
  grid-column: span 6;
  aspect-ratio: 21 / 9;
}

.upcoming-project__figure--half {
  grid-column: span 3;
  aspect-ratio: 3 / 2;
}

/* Dikey fotoğraf slotu — ör. sondaj kulesi (9:16). Yatay bir kutuya
   sıkıştırılırsa konu kesiliyor, bu yüzden kendi oranını korur. */
.upcoming-project__figure--portrait {
  grid-column: span 2;
  aspect-ratio: 3 / 4;
}

/* Galeride farklı oranlar yan yana durabilsin.
   Hikâye ("Dönüşümden Önce" / "Yıkım ve Hazırlık") gridleri etkilenmez;
   orada büyük görsel ile iki yan görselin hizalanması gerekiyor. */
.upcoming-project__gallery .upcoming-project__figures {
  align-items: start;
}

.upcoming-project__figure a,
.upcoming-project__figure .ip-figure-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.upcoming-project__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms var(--ip-ease);
}

.upcoming-project__figure a:hover img,
.upcoming-project__figure a:focus-visible img {
  transform: scale(1.05);
}

.upcoming-project__figure a:focus-visible {
  outline: 2px solid var(--ip-gold-text);
  outline-offset: -4px;
}

/* Hover / focus üzerinde kategori + kısa açıklama */
.upcoming-project__figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--ip-s5) var(--ip-s4) var(--ip-s4);
  background: linear-gradient(
    180deg,
    rgba(16, 12, 9, 0) 0%,
    rgba(16, 12, 9, 0.82) 100%
  );
  color: var(--ip-white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--ip-dur) var(--ip-ease),
              transform var(--ip-dur) var(--ip-ease);
  pointer-events: none;
}

.upcoming-project__figure:hover figcaption,
.upcoming-project__figure:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}

.upcoming-project__figure figcaption b {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #e6d7c2;
  margin-bottom: 6px;
}

.upcoming-project__figure figcaption span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
}

/* Dokunmatik cihazlarda hover yok → açıklama her zaman görünür */
@media (hover: none) {
  .upcoming-project__figure figcaption {
    opacity: 1;
    transform: none;
  }
}

/* Görseli henüz yüklenmemiş kutular: yer tutucu üzerinde başlık gösterilmez.
   Gerçek görsel eklendiğinde HTML'den `--pending` sınıfını kaldırın. */
.upcoming-project__figure--pending figcaption {
  display: none;
}

/* ---- 4.6 ZAMAN ÇİZELGESİ --------------------------------------------- */
.upcoming-project__timeline {
  padding: var(--ip-s8) 0;
  background: var(--ip-ink);
  color: var(--ip-white);
}

.upcoming-project__timeline .ip-eyebrow {
  color: var(--ip-gold);
}

.upcoming-project__timeline-title {
  font-family: 'Oswald', sans-serif;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ip-white);
  margin-bottom: var(--ip-s7);
}

.upcoming-project__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ip-s6);
  margin: 0;
  padding: 0;
  counter-reset: ipStep;
}

.upcoming-project__step {
  position: relative;
  padding-top: var(--ip-s5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  counter-increment: ipStep;
}

/* Adım numarası */
.upcoming-project__step::before {
  content: "0" counter(ipStep);
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--ip-gold);
  margin-bottom: var(--ip-s2);
}

/* Üstteki durum noktası */
.upcoming-project__step::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.upcoming-project__step--active::after {
  background: var(--ip-gold);
  box-shadow: 0 0 0 4px rgba(177, 151, 119, 0.22);
}

.upcoming-project__step-title {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ip-white);
  margin-bottom: var(--ip-s2);
}

.upcoming-project__step-text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: var(--ip-s3);
}

/* Durum etiketi — renkten bağımsız, metinle de anlatılır */
.upcoming-project__step-state {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.78);
}

.upcoming-project__step--active .upcoming-project__step-state {
  border-color: var(--ip-gold-line);
  color: #e6d7c2;
}

/* ---- 4.7 İLETİŞİM ÇAĞRISI -------------------------------------------- */
.upcoming-project__cta {
  padding: var(--ip-s8) 0;
  background: var(--ip-white);
  text-align: center;
}

.upcoming-project__cta-title {
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ip-dark);
  margin-bottom: var(--ip-s4);
}

.upcoming-project__cta-text {
  max-width: 62ch;
  margin: 0 auto var(--ip-s6);
  color: var(--ip-muted);
}

.upcoming-project__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ip-s4);
  justify-content: center;
  align-items: center;
}

.upcoming-project__cta-direct {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ip-s2) var(--ip-s5);
  justify-content: center;
  margin-top: var(--ip-s5);
}

.upcoming-project__cta-direct a {
  color: var(--ip-gold-text);
  font-size: 16px;
  letter-spacing: 1px;
  padding: var(--ip-s2) var(--ip-s1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--ip-dur) var(--ip-ease);
}

.upcoming-project__cta-direct a:hover {
  color: var(--ip-dark);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .upcoming-project__hero-title { font-size: 52px; letter-spacing: 9px; }
}

/* Tablet */
@media (max-width: 991.98px) {
  .upcoming-project__hero {
    min-height: 70vh;
    padding: 120px 0 var(--ip-s6);
  }
  .upcoming-project__hero-title { font-size: 42px; letter-spacing: 7px; }
  .upcoming-project__hero-sub { font-size: 19px; }

  .upcoming-project__stats-grid { grid-template-columns: repeat(2, 1fr); }
  .upcoming-project__facts-grid { grid-template-columns: repeat(2, 1fr); }
  .upcoming-project__facts-inner { padding: var(--ip-s5) var(--ip-s5) var(--ip-s4); }

  .upcoming-project__intro,
  .upcoming-project__story,
  .upcoming-project__gallery,
  .upcoming-project__timeline,
  .upcoming-project__cta { padding: var(--ip-s7) 0; }

  .upcoming-project__facts { padding-bottom: var(--ip-s7); }

  .upcoming-project__intro-media {
    min-height: 300px;
    margin-top: var(--ip-s5);
  }

  .upcoming-project__steps {
    grid-template-columns: 1fr;
    gap: var(--ip-s5);
  }

  /* Editoryal grid tabletde 2'li düzene iner */
  .upcoming-project__figure,
  .upcoming-project__figure--lead,
  .upcoming-project__figure--half,
  .upcoming-project__figure--portrait { grid-column: span 3; }
  .upcoming-project__figure--lead { grid-row: auto; aspect-ratio: 3 / 2; }
  .upcoming-project__figure--wide { grid-column: span 6; aspect-ratio: 16 / 9; }
}

/* Mobil */
@media (max-width: 767.98px) {
  .upcoming-project__hero {
    min-height: 78vh;
    padding: 110px 0 var(--ip-s6);
  }
  .upcoming-project__hero-eyebrow {
    font-size: 11px;
    letter-spacing: 4px;
    margin-bottom: var(--ip-s3);
  }
  .upcoming-project__hero-title {
    font-size: 30px;
    letter-spacing: 5px;
    line-height: 1.35em;
  }
  .upcoming-project__hero-sub {
    font-size: 17px;
    letter-spacing: 1px;
  }
  .upcoming-project__hero-text {
    font-size: 16px;
    margin-bottom: var(--ip-s5);
  }
  .upcoming-project__hero-actions { flex-direction: column; align-items: stretch; }
  .upcoming-project__hero-actions .butn-light,
  .upcoming-project__hero-actions .butn-dark { width: 100%; max-width: 320px; }
  .upcoming-project__hero-actions .butn-light a,
  .upcoming-project__hero-actions .butn-dark a { width: 100%; }

  .upcoming-project__intro-title,
  .upcoming-project__timeline-title { font-size: 26px; letter-spacing: 2px; }
  .upcoming-project__cta-title { font-size: 24px; letter-spacing: 3px; }

  .upcoming-project__stat { padding: var(--ip-s4) var(--ip-s3); }
  .upcoming-project__stat-value { font-size: 26px; letter-spacing: 2px; }
  .upcoming-project__stat-label { font-size: 10px; letter-spacing: 3px; }

  /* Tüm görseller tek kolon */
  .upcoming-project__figure,
  .upcoming-project__figure--lead,
  .upcoming-project__figure--half,
  .upcoming-project__figure--wide {
    grid-column: span 6;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  /* Dikey kare mobilde de dikey kalır */
  .upcoming-project__figure--portrait {
    grid-column: span 6;
    grid-row: auto;
    aspect-ratio: 3 / 4;
  }

  .upcoming-project__group { margin-top: var(--ip-s6); }

  .upcoming-project__cta-actions { flex-direction: column; }
}

/* Küçük mobil — 320px'e kadar taşma olmamalı */
@media (max-width: 400px) {
  .upcoming-project__hero-title { font-size: 26px; letter-spacing: 3px; }
  .upcoming-slide__title { font-size: 22px; letter-spacing: 3px; }
  .upcoming-project__stats-grid { gap: var(--ip-s2); }
  .upcoming-project__facts-inner { padding: var(--ip-s4) var(--ip-s3); }
  .upcoming-project__group-title { font-size: 12px; letter-spacing: 3px; }
}


/* ==========================================================================
   5) ERİŞİLEBİLİRLİK & HAREKET TERCİHLERİ
   ========================================================================== */

/* Klavye odağı her yerde görünür kalır */
.upcoming-project a:focus-visible,
.upcoming-project button:focus-visible,
.upcoming-slide a:focus-visible,
.upcoming-card a:focus-visible {
  outline: 2px solid var(--ip-gold-text);
  outline-offset: 3px;
}

/* Koyu zeminde odak halkası */
.upcoming-project__hero a:focus-visible,
.upcoming-project__timeline a:focus-visible,
.upcoming-slide a:focus-visible {
  outline-color: #e6d7c2;
}

/* Smooth scroll hedefine odaklanınca çirkin outline oluşmasın,
   ama klavye kullanıcısı kaybolmasın */
.upcoming-project [tabindex="-1"]:focus {
  outline: none;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .upcoming-project__hero-inner > *,
  .upcoming-slide > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .upcoming-card__cta::after,
  .upcoming-card__cta-txt {
    transition: none;
  }
  .upcoming-project__figure img,
  .upcoming-project__figure figcaption,
  .upcoming-card__media img,
  .upcoming-card__media svg,
  .upcoming-project__stat {
    transition: none;
  }
  .upcoming-project__figure a:hover img,
  .upcoming-project__figure a:focus-visible img,
  .upcoming-card:hover .upcoming-card__media img,
  .upcoming-card:hover .upcoming-card__media svg,
  .upcoming-project__stat:hover {
    transform: none;
  }
  .upcoming-project__figure figcaption {
    opacity: 1;
    transform: none;
  }
}