.yt-sec { padding-block: 8px 24px; }
[data-yt] { max-width: 980px; margin-inline: auto; }
[data-yt][hidden] { display: none; }
.yt-h { font-size: clamp(20px, 3vw, 28px); margin-bottom: 14px; text-align: center; }
.yt-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #070a14; border: 1px solid var(--border, rgba(255,255,255,.12)); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-poster { position: absolute; inset: 0; width: 100%; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; color: #fff; background: radial-gradient(900px 420px at 70% 20%, rgba(80,120,255,.45), transparent 60%), radial-gradient(700px 400px at 20% 90%, rgba(140,80,255,.35), transparent 60%), linear-gradient(160deg, #0d1330, #070a14); }
.yt-play { width: clamp(56px, 9vw, 84px); transition: transform .2s; filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
.yt-play-bg { fill: #2f6bff; }
.yt-poster:hover .yt-play, .yt-poster:focus-visible .yt-play { transform: scale(1.1); }
.yt-poster:focus-visible { outline: 3px solid #7fb0ff; outline-offset: -3px; }
.yt-cap { position: absolute; inset-inline: 16px; bottom: 14px; font-size: clamp(12px, 2vw, 15px); font-weight: 600; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.8); opacity: .92; }
@media (prefers-reduced-motion: reduce) { .yt-play { transition: none; } }