/* ═══════════════════════════════════════════════════════════════
   ARKUN — Grup vitrini

   Gönderilen "music portfolio" bileşeninin künye düzeni, bu sefer
   grup tanıtımı için. Sütun eşlemesi:

     ARTIST        → grubun TAM ADI
     ALBUM         → KISA AD
     CATEGORY      → ÜYE SAYISI
     LABEL         → ŞEHİR
     YEAR          → INSTAGRAM (ikon, tıklanınca profile gider)

   muzik.css'teki tablodan ayrı bir dosya: vitrin herkese açık
   sayfalarda (gruplar.html) duruyor, müzik ise üyelere özel bir
   sayfada. İkisini tek dosyada toplamak, her iki sayfaya da
   diğerinin stillerini yüklemek olurdu.
   ═══════════════════════════════════════════════════════════════ */

.vitrin {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-3);
  border: 1px solid var(--border);
  background: var(--card);
  padding: clamp(56px, 6vw, 76px) clamp(22px, 4vw, 52px);
  /* Panel daha büyük: vitrin sayfanın ana gösterisi, dar bir şeride
     sıkışmasın. Az kayıtla da dolu dursun diye alt sınır var. */
  min-height: clamp(360px, 46vh, 520px);
}

/* Üzerine gelinen grubun görseli — bileşendeki background-image. */
.vitrin__arkaplan {
  /* Görsel panelin TAMAMINI kaplıyor. Önce ortada kare bir kutuydu ve
     panelin ortasında yüzen bir kart gibi duruyordu; künyenin arkasına
     yayılınca hem daha iyi oturuyor hem de fotoğraf kırpılmadan
     doluyor (cover). */
  position: absolute;
  inset: 0;
  transform: scale(1.14);
  transform-origin: center;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  /* Fotoğraf görünür kalsın ama künyeyi bastırmasın. 0.4 fazla
     karanlıktı, fotoğraf neredeyse seçilmiyordu. */
  filter: saturate(0.8) brightness(0.62) blur(0.5px);
}
.vitrin__arkaplan::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Kenarlara doğru koyulaşan perde: fotoğraf panelin tamamını
     kapladığı için künye metninin okunurluğu tamamen buna bağlı. */
  background:
    linear-gradient(to right, rgba(10,10,10,0.9), rgba(10,10,10,0.42) 32%,
                    rgba(10,10,10,0.42) 68%, rgba(10,10,10,0.9)),
    radial-gradient(75% 75% at 50% 50%,
                    rgba(10, 10, 10, 0.34), rgba(10, 10, 10, 0.82));
}

.vitrin__liste { list-style: none; margin: 0; padding: 0; display: grid; }

.vitrin__basliklar,
.vitrin__satir {
  display: grid;
  grid-template-columns:
    minmax(0, 1.6fr) minmax(0, 1fr) 80px minmax(0, 1fr) 64px;
  gap: var(--s-4);
  align-items: center;
}

.vitrin__basliklar {
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.vitrin__basliklar span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.vitrin__satir {
  padding: 15px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: opacity 200ms var(--e-out), padding-left 220ms var(--e-out);
}
.vitrin__satir:hover { padding-left: 16px; }

/* Bir satırın üzerindeyken diğerleri soluyor — "has-active". */
.vitrin[data-acik="1"] .vitrin__satir { opacity: 0.28; }
.vitrin[data-acik="1"] .vitrin__satir.acik { opacity: 1; }

.vitrin__hucre {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.vitrin__hucre--tamad { color: var(--fg); }
.vitrin__satir.acik .vitrin__hucre { color: var(--fg); }
.vitrin__satir.acik .vitrin__hucre--tamad { color: var(--accent); }

/* Instagram — satırın son sütunu. Tıklanınca profile gidiyor,
   satırın kendi hover davranışına karışmıyor. */
.vitrin__ig {
  justify-self: end;
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border-hi);
  border-radius: 9px;
  color: var(--dimmer);
  transition: color var(--t-2) var(--e-out), border-color var(--t-2) var(--e-out);
}
.vitrin__ig svg { width: 16px; height: 16px; }
.vitrin__ig:hover,
.vitrin__ig:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}
.vitrin__ig--yok { opacity: 0.25; pointer-events: none; }

/* Köşe çerçevesi — bileşenin corner-elements bloğu. */
.vitrin__koseler { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vitrin__kose {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.vitrin__kose--su { top: 14px; left: 16px; }
.vitrin__kose--sa { top: 14px; right: 16px; }
.vitrin__kose--au { bottom: 14px; left: 16px; }
.vitrin__kose--aa { bottom: 14px; right: 16px; }
.vitrin__kare { width: 9px; height: 9px; border: 1px solid var(--accent); }

.vitrin__bos {
  color: var(--dimmer);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-8) 0;
}

/* Dar ekranda beş sütun sığmıyor: şehir ve üye alt satıra iniyor. */
@media (max-width: 860px) {
  .vitrin__basliklar { display: none; }
  .vitrin__satir {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px var(--s-4);
    align-items: baseline;
  }
  .vitrin__hucre--tamad { grid-column: 1; grid-row: 1; font-size: 14px; }
  .vitrin__ig { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .vitrin__hucre--kisaad { grid-column: 1; grid-row: 2; }
  .vitrin__hucre--uye,
  .vitrin__hucre--sehir { grid-column: 1; grid-row: 3; display: inline; }
  .vitrin__hucre--uye::after { content: ' · '; }
}

@media (prefers-reduced-motion: reduce) {
  .vitrin__satir, .vitrin__arkaplan { transition: none; }
}