/* Instagram gömme — TIKLA-YÜKLE. Sayfada yalnız bizim sunucumuzdaki kapak
   durur; ziyaretçi oynat'a basana kadar instagram.com'a HİÇBİR istek gitmez.
   Bu yüzden instagram.com'a preconnect/dns-prefetch EKLENMEZ — özelliğin tek
   gerekçesini iptal eder. Betik: src/partials/ig-embed.html.
   Site CSS'ine eklenmedi (site-v12 → v13 kopyası 83 KB'ı 88 sayfaya yeniden
   indirtir, oysa blok 3 TR sayfasında), photo-v3'e de eklenmedi (orası 16:9;
   .photo img{aspect-ratio:16/9} dikey reels'i bozar ve /hakkinda o dosyayı
   hiç yüklemiyor). Yüklenmesi build.mjs'te: içerikte data-ig-code geçiyorsa.
   Değişince YENİ AD (ig-v1 → ig-v2). */

.ig-section .sub { max-width: 60ch; }

/* Şerit: yatay kaydırma + parmak bırakınca karta oturma. */
.ig-strip {
  display: flex; gap: var(--s2, 16px); margin: var(--s4, 32px) 0 0; padding: 0 0 var(--s2, 16px);
  list-style: none; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.ig-strip > li { flex: 0 0 300px; scroll-snap-align: center; }
.ig-strip > li.is-live { flex-basis: 340px; scroll-snap-align: start; }

.ig-grid {
  display: grid; gap: var(--s2, 16px); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: var(--s4, 32px) 0 0; padding: 0; list-style: none;
}
/* .prose dar sütunda ızgarayı sıkıştırmasın (yazı gövdesine gömülü kullanım). */
.prose .ig-grid, .prose .ig-single { margin-left: 0; margin-right: 0; }
.ig-single { max-width: 320px; margin: var(--s4, 32px) 0; padding: 0; list-style: none; }

/* Kapak düğmesi. Oran BURADA sabit: görsel inmeden yer ayrılır → CLS 0. */
.ig-play {
  display: block; position: relative; width: 100%; padding: 0; border: 0; margin: 0;
  background: var(--bg); border-radius: var(--r-lg, 16px); overflow: hidden;
  cursor: pointer; box-shadow: var(--shadow-md);
}
.ig-card--reel .ig-play { aspect-ratio: 9 / 16; }
.ig-card--post .ig-play { aspect-ratio: 1; }
.ig-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ig-play:hover img { transform: scale(1.04); }

.ig-glyph {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 58px; height: 58px; border-radius: 50%; border: 2px solid #fff;
  background: rgba(10, 24, 50, 0.66); backdrop-filter: blur(4px);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.ig-glyph::after {
  content: ""; position: absolute; left: 21px; top: 16px;
  border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.ig-play:hover .ig-glyph { transform: scale(1.08); background: rgba(10, 24, 50, 0.82); }

.ig-cap { margin: 10px 2px 0; font-size: .92rem; line-height: 1.45; color: var(--text-2); }
/* Bağlantı HER ZAMAN kendi satırında: başlık uzunluğuna göre bazen yan
   yana bazen alta düşmesi kartları düzensiz gösteriyordu. */
.ig-cap a { display: block; margin-top: 2px; font-size: .85rem; }
.ig-all { margin: var(--s3, 24px) 0 0; }

/* Canlı: kapak gizlenir, iframe yerine geçer. Kutu tıklamadan SONRA büyüdüğü
   için bu kayma CLS'e sayılmaz (etkileşim sonrası 500 ms kuralı).
   Yükseklik elle sabit: embed.js yüklemediğimiz için iframe kendi boyunu
   bildiremez. min-width Instagram'ın alt sınırı — altında içeriği kırpıyor. */
.ig-card.is-live .ig-play { display: none; }
.ig-embed {
  display: block; width: 100%; min-width: 326px; border: 0;
  border-radius: var(--r-lg, 16px); overflow: hidden; background: var(--bg);
}
.ig-card--reel .ig-embed { height: 740px; }
.ig-card--post .ig-embed { height: 560px; }

@media (max-width: 380px) {
  .ig-strip > li, .ig-strip > li.is-live { flex-basis: 86vw; }
  .ig-embed { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-play img, .ig-glyph { transition: none; }
  .ig-play:hover img { transform: none; }
  .ig-strip { scroll-behavior: auto; }
}