/* ============================================================
   Hareket videosu — uygulama içi popup
   ============================================================ */

.vmodal-bg {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: calc(var(--safe-t) + 14px) 14px calc(var(--safe-b) + 14px);
    animation: vfade .18s ease both;
}
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }

.vmodal {
    width: 100%; max-width: 560px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    animation: vpop .24s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes vpop { from { transform: scale(.94) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

.vmodal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 14px 12px 18px;
}
.vmodal-head .vt { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.vmodal-head .vs { font-size: 12.5px; color: var(--text-mute); margin-top: 2px; }

.vclose {
    width: 36px; height: 36px; flex: none; border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--text); font-size: 15px; display: grid; place-content: center;
}
.vclose:active { background: var(--line); }

.vframe {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #000;
}
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.vfoot {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    font-size: 11.5px; color: var(--text-mute); line-height: 1.4;
}
.vfoot a { color: var(--accent); font-weight: 600; white-space: nowrap; margin-left: auto; }

/* Shorts formatı dikey — dar ekranda daha yüksek kutu */
@media (max-width: 480px) {
    .vmodal { max-width: 100%; }
}

/* Gomme kapali — kucuk resim + oynat rozeti, dokununca YouTube'da acilir */
.vblocked {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
    background: #000; overflow: hidden;
}
.vblocked img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.vplay {
    position: absolute; inset: 0; margin: auto;
    width: 62px; height: 44px; border-radius: 11px;
    background: #E62117; color: #fff;
    display: grid; place-content: center;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}
.vplay svg { width: 26px; height: 26px; }