/* VİDEO MERKEZİ (2026-10-11) — /video, /video/kisa (.vm-*). Dil: kamu1 — kalın üst çizgi + ince ayraç + tipografi; izleyici 2.0 tam ekran koyu sahne (şerit + tek oynatıcı). */
.vm-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; margin: 30px 0 14px; padding-top: 12px; border-top: 3px solid var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.vm-h small { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.vm-h a { font-size: 13.5px; font-weight: 700; color: var(--link); text-decoration: none; }
.vm-h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vm-h--ince { margin: 0 0 6px; font-size: 15px; }
.vm-h-dugme { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.vm-h-dugme:hover { text-decoration: underline; text-underline-offset: 3px; }

/* öne çıkan + sıradaki */
.vm-ust { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0 30px; margin: 6px 0 4px; padding-top: 14px; border-top: 3px solid var(--ink); }
.vm-oyna .video-embed { border-radius: 4px; box-shadow: none; }
.vm-oyna-bilgi { padding: 14px 0 0; }
.vm-ust-et { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.vm-oyna-ad { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.vm-oyna-ad a { color: var(--ink); text-decoration: none; }
.vm-oyna-ad a:hover { color: var(--accent); }
.vm-oyna-meta { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.vm-sira ol { margin: 0; padding: 0; list-style: none; }
.vm-sira li { border-bottom: 1px solid var(--line); }
.vm-sira li:last-child { border-bottom: 0; }
.vm-sira a { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; color: var(--ink); text-decoration: none; }
.vm-sira-gorsel, .vm-pop-gorsel { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: var(--bg-sunken, #eef0f3); }
.vm-sira-gorsel img, .vm-pop-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.vm-sira-gorsel i { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff; }
.vm-sira a:hover img, .vm-pop-liste a:hover img { transform: scale(1.04); }
.vm-sira-ad { font-size: 15px; font-weight: 800; line-height: 1.3; text-wrap: pretty; }
.vm-sira-ad small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.vm-sira a:hover .vm-sira-ad { color: var(--accent); }

/* kısa videolar rayı */
.vm-kisa-ray { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 172px); gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.vm-kisa-kart { display: grid; align-content: start; gap: 8px; padding: 0; text-decoration: none; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; scroll-snap-align: start; font: inherit; }
.vm-kisa-gorsel { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; background: #12151c; }
.vm-kisa-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.vm-kisa-gorsel::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent); }
.vm-kisa-gorsel i { position: absolute; z-index: 1; left: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; transition: transform .15s; }
.vm-kisa-kart:hover img { transform: scale(1.05); }
.vm-kisa-kart:hover i { transform: scale(1.1); }
.vm-kisa-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vm-kisa-ad { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 800; line-height: 1.3; }

/* çok izlenenler */
.vm-pop-liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.vm-pop-liste a { display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.vm-pop-no { font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.vm-pop-gorsel.is-dikey img { object-position: center 30%; }
.vm-pop-ad { font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.vm-pop-ad small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.vm-pop-liste a:hover .vm-pop-ad { color: var(--accent); }
.vm-ray .video-row { padding-bottom: 12px; }

/* kısa videolar ızgarası (/video/kisa) */
.vm-kg { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 16px; margin: 6px 0 10px; padding-top: 16px; border-top: 3px solid var(--ink); }
.vm-kg .vm-kisa-kart { width: 100%; }
.vm-kg .vm-kisa-ad small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.vm-kg-ust { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 4px; font-size: 14px; color: var(--ink-soft); }
.vm-kg-ust button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }
.vm-kg-ust button:hover { text-decoration: underline; text-underline-offset: 3px; }
.vm-h-sag { display: inline-flex; gap: 16px; align-items: baseline; }

/* ── tam ekran dikey izleyici 2.0 ── */
.vm-izle { --kh: calc(100vh - 32px); --kw: calc(var(--kh) * 9 / 16); position: fixed; inset: 0; z-index: 200; overflow: hidden; background: #050608; color: #fff;
    overscroll-behavior: contain; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
@supports (height: 100dvh) { .vm-izle { --kh: calc(100dvh - 32px); } }
.vm-izle[hidden] { display: none !important; }
.vm-izle-serit { position: absolute; inset: 0; will-change: transform; }
.vm-izle-serit.is-anim { transition: transform .3s cubic-bezier(.22, .8, .25, 1); }
.vm-izle-sayfa { position: absolute; left: 0; right: 0; height: 100%; display: grid; place-items: center; }
.vm-izle-sayfa.is-onceki { top: -100%; }
.vm-izle-sayfa.is-simdi { top: 0; }
.vm-izle-sayfa.is-sonraki { top: 100%; }
.vm-izle-kutu { position: relative; width: min(var(--kw), 100vw); height: var(--kh); overflow: hidden; border-radius: 12px; background: #000; }
.vm-izle-sayfa:not(.is-simdi) img { width: 100%; height: 100%; object-fit: contain; opacity: .55; }
.vm-izle-oyuncu, .vm-izle-oyuncu iframe, .vm-izle-kapak, .vm-izle-katman { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vm-izle-kapak { object-fit: contain; background: #000; pointer-events: none; transition: opacity .25s ease; }
.vm-izle-kapak.is-gizli { opacity: 0; }
.vm-izle-katman { display: none; cursor: pointer; }
.vm-izle.is-hazir .vm-izle-katman { display: block; }
.vm-izle-durum { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
    background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; }
.vm-izle-durum.is-oyna::before { content: ''; margin-left: 6px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.vm-izle-durum.is-dur::before { content: ''; width: 20px; height: 26px; border-left: 7px solid #fff; border-right: 7px solid #fff; box-sizing: border-box; }
.vm-izle-durum.is-goster { animation: vm-isaret .7s ease-out; }
@keyframes vm-isaret { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
.vm-izle.is-durdu .vm-izle-durum { opacity: 1; animation: none; }
.vm-izle.is-durdu .vm-izle-durum::before { content: ''; width: auto; height: auto; margin-left: 6px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.vm-izle-ipucu { position: absolute; left: 16px; right: 16px; top: 64px; z-index: 3; margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent, #c8102e);
    background: rgba(0, 0, 0, .72); font-size: 14px; font-weight: 700; line-height: 1.4; pointer-events: none; }
.vm-izle-alt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 64px 16px 18px; background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .45) 55%, transparent);
    pointer-events: none; }
.vm-izle-kat { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.vm-izle-kat:empty { display: none; }
.vm-izle-ad { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; line-height: 1.3; text-wrap: pretty; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.vm-izle-git { pointer-events: auto; color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); }
.vm-izle-git:hover { text-decoration-color: #fff; }
.vm-izle-ilerleme { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(255, 255, 255, .18); pointer-events: none; }
.vm-izle-ilerleme i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .3s linear; }
.vm-izle-ust { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 6px 14px; padding: 12px 14px 0 18px; pointer-events: none; }
.vm-izle-ust > * { pointer-events: auto; }
.vm-izle-sayac { margin-right: auto; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.vm-izle-oto { padding: 6px 0; border: 0; background: none; color: rgba(255, 255, 255, .78); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); touch-action: manipulation; }
.vm-izle-oto b { color: #fff; font-weight: 800; }
.vm-izle-oto[aria-pressed="false"] b { color: rgba(255, 255, 255, .6); }
.vm-izle-oto:hover b { text-decoration: underline; text-underline-offset: 3px; }
.vm-izle-d { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(20, 22, 28, .55);
    color: #fff; cursor: pointer; transition: background .15s; touch-action: manipulation; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vm-izle-d:hover { background: rgba(255, 255, 255, .2); }
.vm-izle-d:focus-visible, .vm-izle-oto:focus-visible, .vm-izle-git:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vm-izle .vm-ses-kapali, .vm-izle.is-sessiz .vm-ses-ac { display: none; }
.vm-izle.is-sessiz .vm-ses-kapali { display: inline; }
.vm-izle-dugmeler { position: absolute; z-index: 4; right: 22px; top: 50%; display: grid; gap: 12px; transform: translateY(-50%); }
.vm-izle-dugmeler .vm-izle-d { width: 52px; height: 52px; }
html.vm-izle-acik, html.vm-izle-acik body { overflow: hidden; }
html.vm-izle-acik body { position: fixed; left: 0; right: 0; width: 100%; }

@media (max-width: 980px) {
    .vm-ust { grid-template-columns: minmax(0, 1fr); }
    .vm-sira { margin-top: 16px; }
    .vm-pop-liste { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(200px, 230px); overflow-x: auto; padding-bottom: 8px; }
}
@media (max-width: 680px) {
    .vm-kisa-ray { grid-auto-columns: minmax(128px, 140px); gap: 10px; }
    .vm-sira a { grid-template-columns: 112px minmax(0, 1fr); }
    .vm-kg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    /* izleyici: tam ekran (kutu = görünür alan; YouTube 9:16 videoyu ortalar) */
    .vm-izle { --kh: 100vh; --kw: 100vw; background: #000; }
    @supports (height: 100dvh) { .vm-izle { --kh: 100dvh; } }
    .vm-izle-kutu { border-radius: 0; }
    .vm-izle-sayfa:not(.is-simdi) img { opacity: .7; }
    .vm-izle-ust { padding: max(10px, env(safe-area-inset-top)) 10px 0 14px; }
    .vm-izle-alt { padding: 72px 16px max(20px, calc(env(safe-area-inset-bottom) + 12px)); }
    .vm-izle-dugmeler { display: none; }
    .vm-izle-d { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .vm-kisa-gorsel img, .vm-sira-gorsel img, .vm-pop-gorsel img, .vm-izle-kapak, .vm-izle-ilerleme i { transition: none; } .vm-izle-durum.is-goster { animation: none; } }