/* UstaYaka tanıtım filmi · ana sayfa plan kartının yerine (ustayaka-film eklentisi) */
.uy-film {
  background: var(--green, #173F35); color: var(--paper, #F7F5EF);
  border-radius: 24px; padding: 22px; display: grid; gap: 16px; align-content: start;
  font-family: var(--sans, 'Segoe UI', Arial, sans-serif);
  container-type: inline-size;
  min-height: 0;  /* sitenin .plan-panel min-height:510px değerini kaldırır; kart içeriği kadar olur */
}
.uy-film-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(247,245,239,.8); }
.uy-film-etiket { border: 1px solid rgba(247,245,239,.35); border-radius: 999px; padding: 6px 11px; }
.uy-film-ekran { position: relative; border-radius: 14px; overflow: hidden; background: #0d211b; aspect-ratio: 16 / 9; }
.uy-film-ekran video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.uy-film-oynat {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; border: 0;
  background: var(--orange, #F1A66B); color: var(--ink, #172F28); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.uy-film-oynat svg { width: 28px; height: 28px; margin-left: 3px; }
.uy-film.is-oynuyor .uy-film-oynat, .uy-film.is-bitti .uy-film-oynat { display: none; }
.uy-film-ses, .uy-film-tekrar {
  position: absolute; bottom: 10px; border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer;
  background: rgba(13,33,27,.78); color: var(--paper, #F7F5EF); font: 600 12px var(--sans, 'Segoe UI', Arial, sans-serif);
}
.uy-film-ses { right: 10px; }
.uy-film-tekrar { left: 10px; }
.uy-film-tekrar[hidden] { display: none; }
/* Alt bölüm: bölümler ve talep butonu aynı hücrede üst üste; yükseklik ikisinin büyüğü, açılınca sayfa kaymaz */
.uy-film-alt { display: grid; border-top: 1px solid rgba(247,245,239,.18); padding-top: 16px; }
.uy-film-alt > * { grid-area: 1 / 1; min-width: 0; }
.uy-film-bolumler, .uy-film-son { transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.uy-film-son {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
}
.uy-film.is-cta .uy-film-son { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .1s, transform .45s ease .1s; }
.uy-film.is-cta .uy-film-bolumler { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.uy-film-bolumler { display: grid; gap: 12px; align-content: center; }
.uy-film-bolumler ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.uy-film-bolumler button {
  width: 100%; display: grid; gap: 3px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(247,245,239,.55); font: 600 13px var(--sans, 'Segoe UI', Arial, sans-serif); transition: color .3s ease;
}
.uy-film-bolumler button span { font-size: 10.5px; letter-spacing: .1em; color: rgba(241,166,107,.6); transition: color .3s ease; }
.uy-film-bolumler button i { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(247,245,239,.14); overflow: hidden; }
.uy-film-bolumler button b { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--orange, #F1A66B); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .3s linear; }
.uy-film-bolumler button.is-aktif, .uy-film-bolumler button:hover { color: var(--paper, #F7F5EF); }
.uy-film-bolumler button.is-aktif span { color: var(--orange, #F1A66B); }
.uy-film-bolumler p { margin: 0; font-size: 12.5px; color: rgba(247,245,239,.62); }
.uy-film-cta { display: grid; gap: 8px; min-width: 0; }
.uy-film-btn {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  background: var(--orange, #F1A66B); color: var(--ink, #172F28); text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 13px 20px; border-radius: 999px; white-space: nowrap;
}
.uy-film-btn:hover { filter: brightness(1.05); text-decoration: none; color: var(--ink, #172F28); }
.uy-film-cta p { margin: 0; font-size: 12.5px; color: rgba(247,245,239,.72); }
.uy-film-qr { margin: 0; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.uy-film-qr img { width: 84px; height: 84px; border-radius: 10px; background: var(--paper, #F7F5EF); padding: 5px; }
.uy-film-qr figcaption { font-size: 12px; line-height: 1.4; color: rgba(247,245,239,.78); }
.uy-film button:focus-visible, .uy-film-btn:focus-visible { outline: 2px solid var(--orange, #F1A66B); outline-offset: 3px; }
@container (max-width: 540px) { .uy-film-qr figcaption { display: none; } }
@media (max-width: 720px), (hover: none) { .uy-film-qr { display: none; } }
@media (max-width: 420px) { .uy-film { padding: 16px; border-radius: 20px; } }
@container (max-width: 360px) { .uy-film-bolumler button { font-size: 12px; } .uy-film-bolumler ol { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .uy-film-bolumler, .uy-film-son, .uy-film-bolumler button b { transition: none; } }