/* ============================================================
   instagram.css — horizontal cinematic gallery (pinned scrub)
   ============================================================ */

.ig {
  background: var(--background-light);
  padding-top: var(--space-section);
  overflow: hidden;
  z-index: 3;
}

.ig__head {
  padding: 0 var(--gutter);
  max-width: 1680px;
  margin: 0 auto clamp(2rem, 5vh, 4rem);
}
.ig__eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ig__eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--brand-yellow); }

.ig__title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--lacivert);
}
.ig__title em { color: var(--turuncu); font-style: normal; }

/* horizontal viewport — JS pins .ig and translates the track */
.ig__viewport { position: relative; }

.ig__track {
  display: flex;
  align-items: flex-start;
  /* kartlar arası nefes payı biraz açıldı */
  gap: clamp(1.4rem, 3.4vw, 3.4rem);
  /* üstteki dolgu, hover'daki yükselme ve gölgenin kırpılmaması için */
  padding: 2.5rem var(--gutter) 4rem;
  width: max-content;
  will-change: transform;
}

/* gerçek Instagram gömüleri — dikey reel oranında kartlar.
   Gömü kendi beyaz arayüzüyle geliyor; kart onu bir çerçeve gibi
   sarmalar, üstüne rozet/numara gibi hiçbir şey binmez. */
.ig__item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(304px, 25vw, 364px);
  height: clamp(560px, 72vh, 700px);
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  /* iki katmanlı yumuşak gölge: yakın tanım + geniş derinlik */
  box-shadow:
    0 1px 2px rgba(27, 24, 21, 0.06),
    0 12px 28px rgba(27, 24, 21, 0.07),
    0 32px 64px rgba(27, 24, 21, 0.06);
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
}
/* çift kartlar hafif aşağı kaçar → düz sıra yerine editoryal ritim */
.ig__track > .ig__item:nth-child(even) { margin-top: clamp(1.5rem, 5vh, 4rem); }

/* üzerine gelince hafifçe yükselir; marka sarısı ince bir halka olarak belirir */
.ig__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color 0.5s;
  pointer-events: none;
}
.ig__item:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(27, 24, 21, 0.07),
    0 18px 36px rgba(27, 24, 21, 0.10),
    0 44px 80px rgba(84, 62, 154, 0.10);
}
.ig__item:hover::after { border-color: rgba(248, 183, 0, 0.55); }

.ig__embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ig__empty {
  width: min(90vw, 620px);
  padding: clamp(3rem, 10vh, 6rem) 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--text-muted);
  border-top: 1px solid var(--border-dark-soft);
  border-bottom: 1px solid var(--border-dark-soft);
}
.ig__empty span {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-purple);
}

/* ---------- alt bağlantı ---------- */
.ig__foot {
  max-width: 1680px;
  margin: clamp(1.5rem, 4vh, 3rem) auto 0;
  /* alt dolgu --space-section (154px) idi; bir sonraki bölümün üst
     dolgusuyla toplanınca 307px'lik boşluk oluşuyordu */
  padding: 0 var(--gutter) clamp(2.5rem, 6vh, 4rem);
}
.ig__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  /* 10.10.2026: serif kesim kaldirildi; sitenin geri kalanindaki duz
     font (Manrope) kullaniliyor. Alti cizgi ve ok oldugu gibi kaldi. */
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text-dark);
  border-bottom: 1px solid var(--brand-yellow);
  padding-bottom: 0.35rem;
  transition: color 0.35s, gap 0.35s var(--ease-out);
}
.ig__cta:hover { color: var(--brand-yellow-deep); gap: 1.1rem; }

/* Mobile: natural horizontal swipe instead of scrub */
@media (max-width: 820px), (pointer: coarse) {
  .ig__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .ig__viewport::-webkit-scrollbar { display: none; }
  .ig__item {
    scroll-snap-align: center;
    width: clamp(288px, 84vw, 344px);
    height: clamp(520px, 70vh, 640px);
    border-radius: 18px;
  }
  /* dokunmatikte hover yok; yükselme efektini kapat */
  .ig__item:hover { transform: none; }
  .ig__track > .ig__item:nth-child(even) { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ig__item { transition: none; }
  .ig__item:hover { transform: none; }
}