/* Yazı içi üretilmiş medya (inc/inject.php) */

.ar-medya {
  margin: clamp(28px, 4vw, 48px) 0;
}

/* TAM GENİŞLİK.
   Yazı gövdesi ~848px; görsel bunun dışına taşıp okuma akışını
   bölmeli. calc ile viewport genişliğine açılıyor — parent'ın
   overflow'u clip olduğu için yatay kaydırma oluşmuyor. */
.ar-medya.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.ar-medya__gorsel,
.ar-medya__video {
  display: block;
  width: 100%;
  height: auto;
  /* Farklı oranlarda gelen görseller sayfayı zıplatmasın. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ar-silver-soft, #e8edf4);
}

.ar-medya__aciklama {
  max-width: 780px;
  margin: 12px auto 0;
  padding-inline: clamp(16px, 4vw, 32px);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ar-muted, #5a6480);
  text-align: center;
}

/* Dar ekranda tam genişlik zaten viewport; oran biraz yükselsin ki
   görsel fazla basık görünmesin. */
@media (max-width: 640px) {
  .ar-medya__gorsel,
  .ar-medya__video {
    aspect-ratio: 4 / 3;
  }
}

/* Koyu bölüm içinde açıklama okunur kalsın. */
.ar-sahne.ar-sahne .ar-medya__aciklama {
  color: var(--ar-silver, #c9d1de);
}