/* =============================================================
 * playground.css — PLAYGROUND + PLAYGROUND/DETAIL
 * ============================================================= */

/* ---- PLAYGROUND (347:268) SIFIRDAN pixel-perfect. STRICT PX (clamp/--fs-* yok). ---- */
/* Son kart satırı (893+207=1100) → CTA bandı (1137) arası 37px */
.pg { padding-block: 71px 37px; }
/* Kapak (347:340): 838×351 (Rectangle 16). width:max-width:100% + height:SABİT px
   kombinasyonu, viewport daraldığında en-boy oranını bozup object-fit:cover'ın FARKLI bir
   bölgeden kırpmasına sebep oluyordu (görsel içerik "değişiyormuş" gibi görünüyordu).
   aspect-ratio ile oran her zaman korunur, kırpma alanı sabit kalır. */
.pg__cover {
  width: 838px;
  max-width: 100%;
  aspect-ratio: 838 / 351;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface);
  margin-bottom: 27px;
}
.pg__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Başlık (347:341): Lora SemiBold 28/56 (satır yüksekliği fazla geniş, tasarımda böyle),
   2. kısım "in production." MAGENTA (mavi DEĞİL — get_design_context ile doğrulandı) */
.pg__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 28px;
  line-height: 56px;
  color: var(--c-heading);
  margin: 0;
}
.pg__title .accent-secondary {
  color: var(--c-secondary);
}
/* Lead (347:342): Manrope 18/28, tek renk #161614, yalnızca son cümle Bold */
.pg__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-heading);
  max-width: 775px;
  margin: 0 0 49px;
}
.pg__lead strong {
  font-weight: 700;
}

/* 6 kart (354:369 vd.): 3 sütun × 272px, gap yok (bitişik: 221,504,787 → 283px pitch = 272+11) */
.pg__grid {
  display: grid;
  grid-template-columns: repeat(3, 272px);
  gap: 11px 11px;
  max-width: 838px;
}
.pg__game {
  position: relative;
  width: 272px;
  height: 207px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-surface);
  display: block;
}
.pg__game-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.pg__game:hover .pg__game-img {
  transform: scale(1.04);
}
/* Caption (354:354 "Caption"): 45px siyah bant, Space Mono 11px beyaz, DEFAULT opacity:0
   (hover'da görünür — component'te opacity-0 base state, ayrı bir Hover varyantı Framelink'te yok
   ama caption'ın var oluş amacı zaten hover-reveal, mevcut davranış korunuyor) */
.pg__game-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45px;
  display: flex;
  align-items: center;
  background: var(--c-heading);
  color: #fff;
  font-family: "Space Mono", monospace, var(--font-body);
  font-size: 11px;
  line-height: normal;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(100%);
  transition: all var(--transition);
}
.pg__game:hover .pg__game-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ---- PLAYGROUND/DETAIL (357:396) SIFIRDAN pixel-perfect. STRICT PX (clamp/--fs-* yok). ---- */
.pgd { padding-block: 78px 0; }
/* Geri linki (367:184/186): Manrope 14/20 #5C5C58, ok döndürülmüş (←), "Playground" Bold */
.pgd__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-body);
  text-decoration: none;
  margin-bottom: 17px;
}
.pgd__back:hover {
  color: var(--c-heading);
}
.pgd__back-arrow {
  display: inline-block;
  transform: rotate(180deg);
  font-size: 20px;
  line-height: 1;
}
/* Kapak (357:442): 838×166, kartlardan AYRI geniş fotoğraf. aspect-ratio ile oran korunur
   (bkz. .pg__cover'daki aynı düzeltme — sabit height, dar viewport'ta object-fit:cover'ın farklı
   bölge kırpmasına sebep oluyordu). */
.pgd__cover {
  width: 838px;
  max-width: 100%;
  aspect-ratio: 838 / 166;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface);
  margin-bottom: 44px;
}
.pgd__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Başlık (357:443): Lora SemiBold 48/56, TEK RENK #161614 (vurgu YOK) */
.pgd__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  color: var(--c-heading);
  margin: 0;
}
/* Lead (357:444): Manrope 18/28 #161614, tek paragraf, tek renk */
.pgd__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-heading);
  max-width: 775px;
  margin: 4px 0 53px;
}

/* 4 istatistik kartı (357:473 vd.): 169×169, ikon 88×88 üstte + başlık Bold 16/24 + değer 18/28,
   hepsi dikey ortalı/ortalanmış metin. Kartlar arası boşluk: 444-221-169=54 (pitch 223=169+54) */
.pgd__stats {
  display: grid;
  grid-template-columns: repeat(4, 169px);
  justify-content: space-between;
  max-width: 838px;
  margin-bottom: 95px;
}
.pgd__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* İkon (363:481 vd.): container 88×88 ama GERÇEK görsel yalnızca 48×48 (ortada) — 88px
   kullanmak ikonu olduğundan büyük gösteriyordu. */
.pgd__stat-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 8px;
}
/* Tasarımda her kartın DEĞERİ (Mustafa/12 Games/4 Moves/Still in progress) kartın merkezine göre
   SABİT bir Y konumunda durur, label 1 satır (All-Time Champion) ya da 2 satır (Longest Winning
   Strike) olsa da değişmez — bu yüzden label'a sabit 2-satır yükseklik (48px) verilip value'nun
   her kartta aynı hizada başlaması sağlanıyor (kısa label'lar altta hizalanır). */
.pgd__stat-label {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 48px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #000;
  margin-bottom: 8px;
}
.pgd__stat-value {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #000;
}

/* "Every match has a story." (363:505): Lora SemiBold 32/56, sonra 2 paragraf (363:506/507) */
.pgd__story {
  max-width: 775px;
  margin-bottom: 83px;
}
.pgd__story-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 56px;
  color: var(--c-heading);
  margin: 0 0 1px;
}
.pgd__story-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-heading);
  margin: 0 0 1px;
}
.pgd__story-text strong {
  font-weight: 700;
}

/* 3 galeri fotoğrafı (363:508/509/510): 264×354 SABİT, gap = 508-221-264=23 */
.pgd__gallery {
  display: grid;
  grid-template-columns: repeat(3, 264px);
  gap: 23px;
  max-width: 838px;
  margin-bottom: 46px;
}
.pgd__gallery-item {
  width: 264px;
  height: 354px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-surface);
}
.pgd__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Think you can beat him?" (363:511): Lora SemiBold 32/56 + CTA metni (363:512) */
/* CTA metni bitişi → footer/CTA bandı arası 62px (1539-1477) */
.pgd__cta {
  max-width: 775px;
  padding-bottom: 62px;
}
.pgd__cta-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 56px;
  color: var(--c-heading);
  margin: 0;
}
.pgd__cta-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-heading);
  margin: 0;
}

/* ---- Responsive ----
   Kartlar/görseller HER ZAMAN orijinal boyutunda (büyümez/küçülmez) — auto-fit ile sütun sayısı
   sığdığı kadar otomatik ayarlanır, ortalanmış. Tasarım yapısı (kart boyutu) korunur, sadece
   satırdaki eleman sayısı ekran genişliğine göre kademeli düşer. */
@media (max-width: 860px) {
  .pg__grid {
    grid-template-columns: repeat(auto-fit, 272px);
    justify-content: center;
  }
  .pgd__stats {
    grid-template-columns: repeat(auto-fit, 169px);
    justify-content: center;
    row-gap: var(--sp-6);
  }
  .pgd__gallery {
    grid-template-columns: repeat(auto-fit, 264px);
    justify-content: center;
  }
}
@media (max-width: 520px) {
  /* touch: caption hep görünür */
  .pg__game-caption { opacity: 1; transform: translateY(0); }
}