/* ============================================================================
   HOMI — Proje Galerisi (Apple-galerisi mantığı: sıralı thumbnail + araya yazı)
   + hafif lightbox. tokens.css'e bağlı; fallback'lerle tek başına da güvenli.
   ========================================================================== */

.homi-gallery {
  --hg-cols: 4;
  --hg-gap: 10px;
  display: grid;
  grid-template-columns: repeat(var(--hg-cols), 1fr);
  gap: var(--hg-gap);
  grid-auto-flow: dense;
  align-items: start;
  padding-block: var(--homi-sec-py);   /* standart modül üst/alt dolgusu */
}

.homi-gallery__item {
  --hg-ratio: 1;
  position: relative;
  margin: 0;
  overflow: hidden;
  grid-column: span 1;
}
.homi-gallery__item.is-md   { grid-column: span 2; }
.homi-gallery__item.is-full { grid-column: 1 / -1; }

/* Oranlı çerçeve: thumbnail'ler tek tip; "tam genişlik" doğal oranıyla banner. */
.homi-gallery__item > .homi-gallery__zoom,
.homi-gallery__item > img {
  display: block;
  aspect-ratio: var(--hg-ratio, 1);
}
.homi-gallery__item.is-full > .homi-gallery__zoom,
.homi-gallery__item.is-full > img {
  aspect-ratio: auto;
}
.homi-gallery__zoom { cursor: zoom-in; }
.homi-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.homi-gallery__item.is-full img {
  height: auto;
  max-height: min(82vh, 900px);
  object-fit: contain;
  background: #05070f;
}
.homi-gallery__item:hover img { transform: scale(1.05); }

.homi-gallery__cap {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-soft, #8a90a4);
}

/* Araya yazı — tam satır, okunur genişlik, ortalı. */
.homi-gallery__text {
  grid-column: 1 / -1;
  max-width: 720px;
  margin: clamp(14px, 3vw, 36px) auto;
  padding: 0 6px;
  text-align: center;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.7;
  color: var(--text, #e9eaf2);
}
.homi-gallery__text > :first-child { margin-top: 0; }
.homi-gallery__text p { margin: 0 0 1em; }
.homi-gallery__text :is(h2, h3, h4) {
  font-family: var(--font-brand);
  color: var(--heading, inherit);
  line-height: 1.2;
  margin: .3em 0 .35em;
}

/* ── Lightbox (homi-gallery.js) ───────────────────────────────────────── */
.homi-lb {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 15, .94);
  padding: clamp(16px, 4vw, 60px);
}
.homi-lb.is-open { display: flex; }
.homi-lb__stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.homi-lb__img {
  max-width: min(94vw, 1400px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .9);
  /* Sağa/sola sürükleyerek geçiş: yatay hareket JS'e bırakılır. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transition: transform .2s ease, opacity .2s ease;
}
.homi-lb__img:active { cursor: grabbing; }
.homi-lb__cap {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  letter-spacing: .04em;
  text-align: center;
}
/* Kapat (×): yuvarlak çerçeve YOK — sade simge. */
.homi-lb__x {
  position: absolute;
  top: clamp(10px, 3vw, 26px);
  right: clamp(12px, 3vw, 30px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, .85);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.homi-lb__x:hover { color: var(--gold, #f0c479); transform: scale(1.12); }

/* Çok ince yön okları (sağ/sol) — kutu/çerçeve YOK, sade chevron. */
.homi-lb__ar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 72px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, transform .2s ease;
}
.homi-lb__ar svg { display: block; }
.homi-lb__ar:hover { color: var(--gold, #f0c479); }
.homi-lb__ar--prev { left: clamp(6px, 2vw, 30px); }
.homi-lb__ar--next { right: clamp(6px, 2vw, 30px); }
.homi-lb__ar--next svg { transform: scaleX(-1); }
.homi-lb__count {
  position: absolute;
  bottom: clamp(12px, 3vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  letter-spacing: .14em;
}
@media (prefers-reduced-motion: reduce) {
  .homi-gallery__item img,
  .homi-lb__x,
  .homi-lb__ar,
  .homi-lb__img { transition: none; }
}