/* ============================================================================
   HOMI — horizontal projects. Desktop: pinned, scrolls sideways with vertical
   scroll. Touch: native snap carousel. Block count is dynamic (add/remove).
   ==========================================================================*/

.hpro { background: var(--navy); color: var(--ink); position: relative; }
.hpro__track { position: relative; }          /* height set by JS on desktop */

.hpro__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.2vw, 34px) clamp(18px, 5vw, 70px);
  gap: clamp(6px, 1vh, 12px);   /* header↔foto ve foto↔bar arası dar */
}
.hpro__head { display: flex; align-items: baseline; justify-content: space-between; }
.hpro__counter { font-family: var(--font-serif); white-space: nowrap; }
.hpro__counter b { font-size: clamp(28px, 4vw, 52px); font-weight: 500; }
.hpro__counter i { font-style: normal; color: var(--muted); margin: 0 .1em; font-size: clamp(15px, 2vw, 24px); }

.hpro__viewport { flex: 1; min-height: 0; display: flex; align-items: center; overflow: hidden; }
.hpro__row { display: flex; gap: clamp(16px, 2vw, 30px); will-change: transform; padding-right: clamp(20px, 5vw, 80px); }

.hpro__block {
  flex: 0 0 auto;
  width: min(76vw, 560px);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.hpro__block img { display: block; width: 100%; height: min(72vh, 720px); object-fit: cover; }
.hpro__cap {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(20px, 2.4vw, 36px);
  background: linear-gradient(transparent, rgba(5, 7, 15, .88));
}
.hpro__cap b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 36px); }
.hpro__cap span { display: block; margin-top: .3em; font-size: 14px; letter-spacing: .06em; color: var(--muted); }

.hpro__progress { height: 2px; background: rgba(255, 255, 255, .1); border-radius: 2px; }
.hpro__progress span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--gold), #fff);
}

/* ── Touch / reduced-motion: native snap carousel, no pin ─────────────── */
.hpro.is-touch .hpro__track { height: auto !important; }
.hpro.is-touch .hpro__stage { position: static; height: auto; }
.hpro.is-touch .hpro__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hpro.is-touch .hpro__viewport::-webkit-scrollbar { display: none; }
.hpro.is-touch .hpro__row { transform: none !important; padding-right: 0; }
.hpro.is-touch .hpro__block { scroll-snap-align: center; width: 84vw; }
.hpro.is-touch .hpro__block img { height: 58vh; }
.hpro.is-touch .hpro__progress { display: none; }

/* Mobil: PINNED yatay motor korunur — sayfayı kaydırınca projeler yatay ilerler
   (kullanıcı isteği). Yalnızca blok/görsel boyutu mobile göre ayarlanır.
   (reduced-motion tercihinde .hpro.is-touch statik carousel'e düşer.) */
@media (max-width: 767px) {
  /* Mobil: header ↔ foto ↔ dolan-bar YAKIN olsun. Foto viewport'un tüm boş
     yüksekliğini doldurur; ortada kalan büyük boşluklar kapanır. */
  .hpro__stage { padding: clamp(8px, 3vw, 18px) clamp(12px, 5vw, 22px); gap: 8px; }
  .hpro__viewport { align-items: stretch; }
  .hpro__row { align-items: stretch; }
  .hpro__block { width: 82vw; display: flex; flex-direction: column; }
  .hpro__block img { height: auto; flex: 1 1 auto; min-height: 0; object-fit: cover; }
  .hpro__cap { flex: 0 0 auto; }
}