/* =====================================================================
   VİDEO — liste/kategori · detay
   theme/classic/assets/css/video.css

   Yalnızca `video` ve `video_category` sayfalarında yükleniyor.
   Kaynak fikir: html/C9 - videolar.html, C10 - video_detay.html.

   Galeri diliyle akraba (görsel + örtü + üstünde metin) ama iki farkı
   var: en boy oranı 16:9 ve her kapağın ortasında OYNAT düğmesi.
   Oynat düğmesi süs değil: kartın video olduğunu tek bakışta söyleyen
   şey o.
   ===================================================================== */

:root {
  --hp-vid-r: 10px;
  --hp-vid-golge: 0 1px 2px rgba(16,20,26,.05), 0 10px 30px rgba(16,20,26,.08);
  --hp-vid-golge-h: 0 3px 6px rgba(16,20,26,.08), 0 22px 52px rgba(16,20,26,.16);
}

/* ---------------------------------------------------------------------
   BAŞLIK + KATEGORİ ŞERİDİ  (galeriyle aynı bileşenler)
   --------------------------------------------------------------------- */
.hp-vid-ust {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding-bottom: 24px;
}
.hp-vid-ust h1 { margin: 0; }
.hp-vid-not { font-size: 14px; color: var(--hp-on-surface-variant); margin: 6px 0 0; max-width: 46rem; }

.hp-vid-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 5px;
    background: var(--hp-surface-highest);
    color: var(--hp-on-surface-variant);
}
.hp-vid-rozet b { color: var(--hp-on-surface); font-weight: 800; }

/* ---------------------------------------------------------------------
   VİDEO KARTI
   --------------------------------------------------------------------- */
.hp-vid-kart {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--hp-vid-r);
  background: var(--hp-surface-highest);
  box-shadow: var(--hp-vid-golge);
  text-decoration: none; color: #fff;
  transition: box-shadow .28s cubic-bezier(.2,.7,.3,1), transform .28s cubic-bezier(.2,.7,.3,1);
}
.hp-vid-kart:hover { transform: translateY(-4px); box-shadow: var(--hp-vid-golge-h); }

.hp-vid-kapak { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; }
.hp-vid-kapak img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.hp-vid-kart:hover .hp-vid-kapak img { transform: scale(1.06); }

.hp-vid-kart::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
      rgba(12,14,18,0) 38%, rgba(12,14,18,.34) 62%, rgba(12,14,18,.88) 100%);
}

/* Oynat düğmesi — kartın kimliği. Hover'da büyüyüp marka rengine
   geçiyor; kart video olduğunu tıklamadan söylüyor. */
.hp-vid-oynat {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,14,18,.55); color: #fff;
  backdrop-filter: blur(6px);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), background-color .26s ease;
}
.hp-vid-oynat .hp-ico { width: 28px; height: 28px; margin-left: 3px; }
.hp-vid-kart:hover .hp-vid-oynat {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--hp-primary);
}

.hp-vid-ic {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
}
.hp-vid-baslik {
  font-size: 16px; line-height: 1.35; font-weight: 700; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-vid-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.82);
}
.hp-vid-meta .hp-ico { width: 14px; height: 14px; }

.hp-vid-etiket {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(12,14,18,.55); color: #fff; backdrop-filter: blur(6px);
}

/* KÜÇÜK KARTTA OYNAT DÜĞMESİ KÖŞEDE.
   16:9 küçük kart yalnızca ~142px yüksekliğinde. Ortadaki düğme, altta
   duran iki satırlık başlıkla ÇAKIŞIYORDU (ölçüldü: 11px). Düğmeyi
   yukarı kaydırmak yetmedi, çünkü başlık 3 satıra çıkabiliyor ve
   çakışma yeniden doğuyordu. Kalıcı çözüm: küçük kartta düğme SAĞ
   ÜST köşede — metin alanıyla hiçbir koşulda kesişmiyor. Öne çıkan
   kartta (yüksek) ortadaki büyük düğme kalıyor. */
.hp-vid-kart:not(.is-buyuk) .hp-vid-oynat {
  top: 12px; left: auto; right: 12px;
  width: 36px; height: 36px;
  transform: none;
}
.hp-vid-kart:not(.is-buyuk) .hp-vid-oynat .hp-ico { width: 20px; height: 20px; }
.hp-vid-kart:not(.is-buyuk):hover .hp-vid-oynat { transform: scale(1.14); }

/* Öne çıkan video */
.hp-vid-kart.is-buyuk .hp-vid-baslik { font-size: clamp(20px, 2.2vw, 28px); -webkit-line-clamp: 3; }
.hp-vid-kart.is-buyuk .hp-vid-ic { padding: 24px; gap: 9px; }
.hp-vid-kart.is-buyuk .hp-vid-oynat { width: 76px; height: 76px; }
.hp-vid-kart.is-buyuk .hp-vid-oynat .hp-ico { width: 38px; height: 38px; }

/* ---------------------------------------------------------------------
   VİDEO DETAYI — oynatıcı
   --------------------------------------------------------------------- */
.hp-vd-oynatici {
  position: relative; overflow: hidden;
  border-radius: 18px;
  background: #0c0e12;
  box-shadow: var(--hp-vid-golge);
  aspect-ratio: 16/9;
}
/* Gömülü kod ne gelirse gelsin çerçeveyi doldursun: panelden yapıştırılan
   iframe'lerin kendi width/height'ı olabiliyor ve düzeni bozuyordu. */
/* `:not(.hp-interstitial)` ŞART: yuva 31 kaplaması da bu kabın doğrudan
   çocuğu ve bu kural onu `display: block` yapıp flex yerleşimini
   bozuyordu. Kaplama kendi kurallarıyla yerleşiyor (theme.css). */
.hp-vd-oynatici > *:not(.hp-interstitial),
.hp-vd-oynatici iframe,
.hp-vd-oynatici video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border: 0; display: block;
}
/* Gömülü kodun kendi "padding-top ile oran" sarmalayıcısı olabiliyor;
   mutlak konumlandırınca o dolgu gereksiz kalıyor. */
.hp-vd-oynatici > div:not(.hp-interstitial) { padding-top: 0 !important; }

/* Tıklayınca oynayan kapak — YouTube gömülüsü sayfa açılır açılmaz
   yüklenmesin diye. Ölçüldü: gömülü oynatıcı ~700KB ve üçüncü taraf
   çerezi; okur videoyu izlemeyebilir. */
.hp-vd-kapak {
  position: absolute; inset: 0; z-index: 2;
  border: 0; padding: 0; cursor: pointer; width: 100%; height: 100%;
  background: #0c0e12;
}
.hp-vd-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-vd-kapak::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(12,14,18,.28);
  transition: background-color .2s ease;
}
.hp-vd-kapak:hover::after { background: rgba(12,14,18,.14); }
.hp-vd-kapak-oynat {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--hp-primary); color: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
  transition: transform .24s cubic-bezier(.2,.7,.3,1);
}
.hp-vd-kapak:hover .hp-vd-kapak-oynat { transform: translate(-50%, -50%) scale(1.08); }
.hp-vd-kapak-oynat .hp-ico { width: 42px; height: 42px; margin-left: 5px; }

/* Künye */
.hp-vd-kunye {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding-top: 18px;
}
.hp-vd-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------------
   OYNATMA LİSTESİ  (yan çubuk)
   Kaynak: html/C9 - videolar.html sağ paneli.

   KOYU PANEL BİLİNÇLİ. İlk sürüm açık zeminde sıradan bir kutuydu ve
   kullanıcının haklı itirazıyla "amatör" duruyordu: küçük resimler
   108px, o an izlenen video listede yoktu, izlenme sayısı yoktu,
   altta düğme yerine ince bir bağlantı vardı.

   Koyu panel iki iş yapıyor: küçük resimleri öne çıkarıyor (video
   listesi görsel bir liste) ve yan çubukta duran diğer açık kutulardan
   ayrışıp "burası oynatıcının devamı" diyor.

   Renkler sabit — tema kipinden bağımsız, galeri görüntüleyicisiyle
   (gallery.css `.hp-gv`) aynı gerekçe.
   --------------------------------------------------------------------- */
.hp-oyn {
  --oyn-yuzey: #14171d;
  --oyn-yuzey2: #1c2027;
  --oyn-cizgi: rgba(255,255,255,.09);
  --oyn-metin: #f2f4f8;
  --oyn-soluk: #9aa3b2;

  background: var(--oyn-yuzey);
  border-radius: var(--hp-vid-r);
  padding: 16px 14px 14px;
  color: var(--oyn-metin);
  box-shadow: var(--hp-vid-golge);
}

/* ---------- başlık ---------- */
.hp-oyn-kafa {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 14px; margin-bottom: 10px;
  border-bottom: 1px solid var(--oyn-cizgi);
}
.hp-oyn-ikon {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224,59,55,.16); color: #ff8f8d;
}
.hp-oyn-ad {
  font-family: var(--hp-font-headline);
  font-size: 17px; line-height: 1.1; text-transform: uppercase;
  letter-spacing: .01em; margin: 0; color: var(--oyn-metin);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-oyn-alt { display: block; font-size: 11px; color: var(--oyn-soluk); margin-top: 2px; }

/* Otomatik geçiş anahtarı — yalnızca kendi sunucumuzdaki videoda
   basılıyor (gömülüde bitişi anlayamıyoruz). */
.hp-oyn-oto {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--oyn-soluk); cursor: pointer; user-select: none;
}
.hp-oyn-oto input { position: absolute; opacity: 0; width: 0; height: 0; }
.hp-oyn-anahtar {
  position: relative; width: 34px; height: 19px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  transition: background-color .2s ease;
}
.hp-oyn-anahtar::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff;
  transition: transform .2s cubic-bezier(.2,.7,.3,1);
}
.hp-oyn-oto input:checked + .hp-oyn-anahtar { background: var(--hp-primary); }
.hp-oyn-oto input:checked + .hp-oyn-anahtar::after { transform: translateX(15px); }
.hp-oyn-oto input:focus-visible + .hp-oyn-anahtar { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- liste ----------
   Kendi içinde kayıyor: 20 videoluk bir kategoride panel sayfayı
   metrelerce uzatmasın. Yükseklik sınırı C9'daki gibi (~460px). */
.hp-oyn-liste {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 460px; overflow-y: auto;
  margin: 0 -6px; padding: 0 6px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.hp-oyn-liste::-webkit-scrollbar { width: 6px; }
.hp-oyn-liste::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.hp-oyn-satir {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 8px; border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background-color .18s ease;
}
a.hp-oyn-satir:hover { background: rgba(255,255,255,.06); }
.hp-oyn-satir.is-simdi { background: rgba(224,59,55,.13); }

.hp-oyn-kapak {
  position: relative; flex: 0 0 auto;
  width: 124px; aspect-ratio: 16/9;
  border-radius: 8px; overflow: hidden;
  background: var(--oyn-yuzey2);
}
.hp-oyn-kapak img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
a.hp-oyn-satir:hover .hp-oyn-kapak img { transform: scale(1.06); }

/* Sıra numarası — C9'daki süre rozetinin yerinde. Süre verisi yok,
   ama okurun listede kaçıncı sırada olduğunu görmesi işe yarıyor. */
.hp-oyn-no {
  position: absolute; right: 4px; bottom: 4px;
  min-width: 18px; text-align: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 4px;
  background: rgba(11,13,17,.86); color: #fff;
}

/* Oynatılan videonun kapağında nabız atan hoparlör — C9'daki gibi. */
.hp-oyn-simdi-ikon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224,59,55,.42); color: #fff;
  animation: hpOynNabiz 1.6s ease-in-out infinite;
}
@keyframes hpOynNabiz { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

.hp-oyn-bilgi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.hp-oyn-simdi {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #ff8f8d;
}
.hp-oyn-kat {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #8fd3c4;
}
.hp-oyn-baslik {
  font-size: 13.5px; font-weight: 600; line-height: 1.38;
  color: var(--oyn-metin);
}
a.hp-oyn-satir:hover .hp-oyn-baslik { color: #ff8f8d; }
.hp-oyn-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 11px; color: var(--oyn-soluk);
}

/* ---------- alt düğme ---------- */
.hp-oyn-tum {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px; padding: 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.08); color: var(--oyn-metin);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .18s ease;
}
.hp-oyn-tum:hover { background: var(--hp-primary); color: #fff; }

@media (max-width: 767.98px) {
  .hp-oyn-kapak { width: 104px; }
  .hp-oyn-liste { max-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-oyn-simdi-ikon { animation: none; }
  a.hp-oyn-satir:hover .hp-oyn-kapak img { transform: none; }
}
/* ---------------------------------------------------------------------
   DAR EKRAN
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .hp-vid-ic { padding: 13px; }
  .hp-vid-baslik { font-size: 15px; }
  .hp-vid-oynat { width: 46px; height: 46px; }
  .hp-vid-oynat .hp-ico { width: 23px; height: 23px; }
  .hp-vd-kapak-oynat { width: 64px; height: 64px; }
  .hp-vd-kapak-oynat .hp-ico { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-vid-kart:hover { transform: none; }
  .hp-vid-kart:hover .hp-vid-kapak img { transform: none; }
  .hp-vid-kart:hover .hp-vid-oynat { transform: translate(-50%, -50%); }
}