/*
  Videolar listesi + oynatıcı — SAYFA ÖZEL stiller.
  site.css'e (paylaşılan dosya) dokunulmadı; yalnızca burada, jeton
  (var(--...)) ve mevcut ortak sınıflar üzerinden inşa edildi.
*/

.videos-page-head { margin-bottom: 4px; }

/* --------------------------------------------------------------- liste */
.video-list { display: flex; flex-direction: column; gap: 10px; }

.video-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px; border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--shadow-card); color: inherit;
  transition: transform var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease);
}
.video-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.video-row:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; border-radius: var(--r-card); }

.video-row-thumb {
  position: relative; width: 128px; height: 84px; flex-shrink: 0; overflow: hidden;
  border-radius: var(--r-badge); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
}
.video-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-row-play {
  position: absolute; inset: 0; margin: auto; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(7, 24, 16, 0.55);
  display: flex; align-items: center; justify-content: center;
}

.video-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.video-row-title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.video-row-date { font-size: 11.5px; }

/* --------------------------------------------------------------- oynatıcı */
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #000; box-shadow: var(--shadow-card); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-description { white-space: pre-line; }

/* --------------------------------------------------------------- sayfalama */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 8px; flex-wrap: wrap; }
.pager-link { font-size: 13px; font-weight: 700; color: var(--forest); padding: 8px 14px; border-radius: var(--r-control); border: 1px solid var(--line); }
.pager-link:hover { background: var(--green-soft); }
.pager-link.is-disabled { color: var(--ink-4); border-color: var(--line); pointer-events: none; }
.pager-status { white-space: nowrap; }

@media (max-width: 480px) {
  .video-row-thumb { width: 100px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-row, .video-row:hover { transition: none; transform: none; }
}