/* ============================================================
   /instagram/ — PROFİL IZGARASININ KOPYASI (2026-09-26)
   Referans: instagram.com/genaualmanca (masaüstü 1440 + telefon 390,
   scratchpad/igref-0.png · igrefm-0.png). Ziyaretçi az önce orada gördüğü
   sayfayı tanısın diye YERLEŞİM Instagram'ın: künye → öne çıkanlar → sekme
   şeridi → 3 sütun ızgara. Instagram'ın ölçüleri: içerik 935px · ızgara
   aralığı 4px (telefonda 2px) · kapak 3:4 · halka 77px (telefonda 64px) ·
   sekme şeridinde etkin sekmenin ÜST çizgisi.
   RENK ve YAZI sitenin token'ları — yeni hex yok, 14px taban korunur.
   Yalnız bu sayfa yükler (kafa · ekCss).
   ============================================================ */

.ig { max-width: 935px; margin-inline: auto; }

/* ---- künye: avatar | ad · sayılar · biyografi ---- */
.ig-kunye {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--bosluk-m); align-items: center;
  padding-bottom: var(--bosluk-m);
}
.ig-avatar {
  justify-self: center; width: 150px; aspect-ratio: 1; border-radius: var(--r-tam);
  overflow: hidden; background: var(--tas);
  box-shadow: 0 0 0 1px var(--ayrac);
}
.ig-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-avatar:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 4px; }
.ig-ad { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; }
.ig-ad b { font-size: var(--yz-h3); font-weight: 600; letter-spacing: -0.01em; }
.ig-takip { font-size: var(--yz-kucuk); }
.ig-sayilar {
  display: flex; flex-wrap: wrap; gap: 8px 36px; list-style: none; margin: 18px 0 0; padding: 0;
  font-size: var(--yz-buyuk); color: var(--murekkep-2);
}
.ig-sayilar b { color: var(--murekkep); font-weight: 700; }
.ig-h1 {
  margin: 18px 0 0; font-family: var(--f-govde);
  font-size: var(--yz-orta); line-height: 1.35; font-weight: 700; letter-spacing: 0;
}
.ig-bio { margin: 4px 0 0; max-width: 34rem; font-size: var(--yz-govde); line-height: 1.5; color: var(--murekkep-2); }

/* ---- yorum kelimesi kutusu (Instagram'da yok — sitenin eklediği tek parça) ---- */
.ig-kelime {
  margin: 0 0 var(--bosluk-m); padding: 18px 20px;
  background: var(--isik); border: 1px solid var(--ayrac); border-radius: var(--r-md);
}
.ig-kelime label { display: block; font-weight: 700; font-size: var(--yz-orta); margin-bottom: 10px; }
.ig-kelime-sira { display: flex; gap: 10px; }
.ig-kelime input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--kenar); border-radius: var(--r-plaka); background: var(--kagit);
  font: 600 var(--yz-orta) / 1 var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--murekkep);
  transition: border-color var(--dur-anlik) var(--ev);
}
.ig-kelime input::placeholder { color: var(--murekkep-3); text-transform: none; letter-spacing: 0; font-family: var(--f-govde); font-weight: 400; }
.ig-kelime input:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 2px; border-color: var(--murekkep); }
.ig-kelime button { flex: none; }
.ig-kelime-not { margin: 10px 0 0; font-size: var(--yz-kucuk); color: var(--murekkep-2); }

/* ---- öne çıkanlar: halkalar ---- */
.ig-halkalar {
  display: flex; gap: clamp(14px, 3.4vw, 44px); overflow-x: auto; scrollbar-width: none;
  list-style: none; margin: 0; padding: 4px 4px 20px;
}
.ig-halkalar::-webkit-scrollbar { display: none; }
/* ÖLÇÜLDÜ: flex öğesi (li) 48px'e sıkışıyordu, adlar üst üste biniyordu. */
.ig-halkalar > li { flex: none; }
.ig-halka { display: grid; justify-items: center; gap: 8px; width: 87px; text-decoration: none; color: var(--murekkep); }
.ig-halka-ic {
  width: 77px; aspect-ratio: 1; border-radius: var(--r-tam); overflow: hidden;
  padding: 3px; background: var(--isik); box-shadow: 0 0 0 1px var(--ayrac);
  transition: transform var(--dur-kisa) var(--ev);
}
.ig-halka-ic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-tam); display: block; }
.ig-halka-ad { font-size: var(--yz-mini); font-weight: 600; text-align: center; line-height: 1.2; }
.ig-halka:hover .ig-halka-ic { transform: translateY(-3px); }
.ig-halka:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 4px; border-radius: var(--r-xs); }

/* ---- sekme şeridi: etkin sekmenin üst çizgisi ---- */
.ig-sekmeler {
  display: flex; justify-content: center; gap: clamp(18px, 5vw, 60px);
  border-top: 1px solid var(--ayrac); margin-top: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.ig-sekmeler::-webkit-scrollbar { display: none; }
.ig-sekmeler button {
  flex: none; appearance: none; background: none; border: 0; border-top: 1px solid transparent; margin-top: -1px;
  min-height: 52px; padding: 0 2px; cursor: pointer;
  font: 600 var(--yz-mikro) / 1 var(--f-etiket); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--murekkep-3);
  transition: color var(--dur-anlik) var(--ev), border-color var(--dur-anlik) var(--ev);
}
.ig-sekmeler button[aria-selected="true"] { color: var(--murekkep); border-top-color: var(--murekkep); }
.ig-sekmeler button:hover { color: var(--murekkep); }
.ig-sekmeler button:focus-visible { outline: 2px solid var(--murekkep); outline-offset: -2px; }

/* ---- ızgara: 3 sütun, 3:4 kapak, 4px aralık ---- */
.ig-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.ig-izgara > li[hidden] { display: none; }
.ig-kare { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tas); }
.ig-kare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-sabit {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
  /* Instagram'ın iğnesi beyaz; bizim kapakların çoğu krem → beyaz görünmüyordu. */
  color: var(--murekkep); filter: drop-shadow(0 0 2px var(--isik));
}
.ig-sabit svg { width: 100%; height: 100%; display: block; }
/* Instagram'da üzerine gelince sayılar çıkar; burada postun kelimesi ve konusu. */
.ig-ortu {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 14px; background: rgba(32, 26, 20, 0.72); color: var(--alan-metin);
  opacity: 0; transition: opacity var(--dur-anlik) var(--ev);
}
.ig-kare:hover .ig-ortu, .ig-kare:focus-visible .ig-ortu { opacity: 1; }
.ig-kare:focus-visible { outline: 3px solid var(--asit); outline-offset: -3px; }
.ig-ortu-kelime { font-size: var(--yz-mikro); color: var(--asit); letter-spacing: 0.04em; }
.ig-ortu-ad { font-size: var(--yz-orta); font-weight: 700; line-height: 1.25; }
.ig-ortu-ac { font-size: var(--yz-kucuk); text-decoration: underline; text-underline-offset: 3px; }

.ig-ray-alt { margin-top: 18px; }

/* ---- telefon: Instagram'ın mobil düzeni (avatar solda küçük, ızgara 2px) ---- */
@media (max-width: 735px) {
  /* Instagram telefonda: avatar solda, ad + sayılar yanında, biyografi altta tam genişlik. */
  .ig-kunye { grid-template-columns: 77px minmax(0, 1fr); gap: 10px 20px; align-items: center; }
  .ig-bilgi { display: contents; }
  .ig-avatar { width: 77px; grid-row: 1 / span 2; grid-column: 1; }
  .ig-ad { grid-column: 2; grid-row: 1; }
  .ig-ad b { font-size: var(--yz-h4); }
  .ig-sayilar { grid-column: 2; grid-row: 2; gap: 6px 18px; font-size: var(--yz-govde); margin-top: 0; }
  .ig-h1, .ig-bio { grid-column: 1 / -1; }
  .ig-h1 { margin-top: 6px; }
  .ig-kelime { padding: 16px; }
  .ig-kelime-sira { flex-direction: column; }
  .ig-halkalar { gap: 12px; }
  .ig-halka { width: 76px; }
  .ig-halka-ic { width: 64px; }
  .ig-sekmeler { justify-content: flex-start; gap: 22px; padding-inline: 2px; }
  .ig-izgara { gap: 2px; }
  /* Dokunmatikte üzerine gelme yok: kelime her karede görünür şerit. */
  .ig-ortu { opacity: 1; background: linear-gradient(transparent 55%, rgba(32, 26, 20, 0.72)); padding: 8px; }
  .ig-ortu-ad, .ig-ortu-ac { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-halka-ic, .ig-ortu, .ig-sekmeler button, .ig-kelime input { transition: none; }
  .ig-halka:hover .ig-halka-ic { transform: none; }
}