/* ═══════════════════════════════════════════════════════════════════════
   VİDEOLAR (2026-09-24) — ana sayfa bölümü (.vsahne) + /videolar (.vizgara).
   Veri ve işaretleme yardımcıları: parcalar/videolar.php
   Davranış: assets/js/video.js (kapağa basınca oynatıcı yüklenir)

   Dil sitenin kendi kalıplarından: oynat düğmesi eğik turuncu blok
   (--egim, .damga ailesi), liste satırı hover'da soldan açılan eğik turuncu
   blok + beyaz yazı, başlıklar Akzidenz
   italik versal. Yeni bir renk ya da yüz tanımlanmıyor.

   CSP: satır içi stil yok (style-src 'self'); oynatıcı iframe'inin
   ölçüsü de buradaki sınıftan geliyor.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ortak: kapak (bağlantı) ve oynatıcı çerçevesi ────────────────────── */
.vekran{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#000;border-radius:6px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.65);
}
.vkapak{
  position:absolute;inset:0;display:block;color:#fff;text-decoration:none;
  cursor:pointer;
}
.vkapak picture,.vkapak__gorsel{display:block;width:100%;height:100%}
.vkapak__gorsel{object-fit:cover;transition:transform .6s var(--yumusak)}
/* Kapağın üzerinde hafif bir perde: oynat bloğu her görselde aynı
   karşıtlıkta dursun (kapaklarda beyaz/turuncu yazı bantları var). */
.vkapak::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,22,69,.10) 0,rgba(0,22,69,.42) 100%);
  transition:opacity .3s;
}
.vkapak:hover .vkapak__gorsel,.vkapak:focus-visible .vkapak__gorsel{transform:scale(1.035)}
.vkapak:hover::after,.vkapak:focus-visible::after{opacity:.55}
.vkapak:focus-visible{outline:3px solid var(--turuncu-parlak);outline-offset:-3px}
.vekran__cerceve{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* OYNAT — eğik turuncu blok, içinde lacivert üçgen (lacivert/#F26522 5,55).
   İki katmanlı damga kalıbı: dış kutu eğik, iç sarmalayıcı düz. */
.voynat{
  position:absolute;left:50%;top:50%;z-index:1;
  display:grid;place-items:center;
  width:clamp(3.6rem,7vw,5.4rem);height:clamp(2.6rem,5vw,3.8rem);
  background:var(--turuncu);color:var(--mavi-derin);
  transform:translate(-50%,-50%) skewX(var(--egim));
  box-shadow:0 10px 30px -8px rgba(242,101,34,.55);
  transition:transform .25s var(--yumusak),background .2s;
}
.voynat__ic{display:grid;place-items:center;transform:skewX(calc(-1 * var(--egim)))}
.voynat__ucgen{width:clamp(1.3rem,2.4vw,1.9rem);height:auto;fill:currentColor}
.vkapak:hover .voynat,.vkapak:focus-visible .voynat{
  background:var(--turuncu-parlak);
  transform:translate(-50%,-50%) skewX(var(--egim)) scale(1.08);
}

/* Konu etiketi: küçük damga. Punto çağırandan (.damga kendi ölçüsünü
   dayatmaz). Yazı lacivert — .76rem küçük metin, beyaz 3,15'te kalırdı. */
.vkonu{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mavi-derin);line-height:1}
.vkonu.damga{padding:.3em .55em .26em .45em}

/* ── ANA SAYFA · .vsahne ─────────────────────────────────────────────── */
.vsahne{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(3rem,6.5vw,5rem) 0;
  background:var(--mavi-derin);
}
/* Arkada iki ışık: solda mavi, sağ altta turuncu — "ışık şeridi" ailesi. */
.vsahne::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 18% 30%,rgba(0,124,214,.20),transparent 70%),
    radial-gradient(45% 60% at 92% 95%,rgba(242,101,34,.16),transparent 70%);
}
.vsahne__ic{width:var(--olcu);margin:0 auto}
.vsahne__govde{
  display:grid;gap:clamp(1.2rem,2.4vw,2rem);margin-top:1.6rem;
  grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);align-items:start;
}
.vsahne__alt{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  margin-top:1.1rem;
}
.vsahne__sira{font-weight:800;font-size:.8rem;letter-spacing:.14em;color:var(--nokta);
  font-variant-numeric:tabular-nums}
.vsahne__baslik{
  flex-basis:100%;margin:.15rem 0 0;
  font-family:'Akzidenz Grotesk XBd Cn',Impact,'Arial Narrow Bold',sans-serif;
  font-weight:400;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.5rem,2.9vw,2.4rem);line-height:1;color:var(--beyaz);
  text-wrap:balance;
}

/* LİSTE — sağ sütun. Satır hover'ı sitenin imza kalıbı: eğik turuncu blok
   soldan açılır, yazı laciverte döner (::before + z-index:-1 +
   isolation:isolate — menüdeki iki tuzağın aynısı). */
.vliste{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;counter-reset:vl}
.vliste__oge{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:8.6rem minmax(0,1fr);gap:.9rem;align-items:center;
  padding:.5rem .7rem .5rem .5rem;border-radius:4px;
  color:var(--acik);text-decoration:none;
  transition:color .2s,background .2s;
}
.vliste__oge::before{
  content:"";position:absolute;inset:0 -.2rem;z-index:-1;
  background:var(--turuncu);transform:skewX(var(--egim)) scaleX(0);transform-origin:left;
  transition:transform .26s var(--yumusak);
}
.vliste__oge:hover::before,.vliste__oge:focus-visible::before{transform:skewX(var(--egim)) scaleX(1)}
/* Hover yazısı BEYAZ (istek, 2026-09-24). Beyaz/#F26522 = 3,15, küçük
   metin eşiği 4,5'in altında — menü bloğundaki bilinçli kararın aynısı. */
.vliste__oge:hover,.vliste__oge:focus-visible{color:#fff;outline:none}
.vliste__oge:focus-visible{box-shadow:0 0 0 2px var(--turuncu-parlak)}
.vliste__kapak{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:#000}
.vliste__kapak picture,.vliste__kapak .vkapak__gorsel{display:block;width:100%;height:100%}
.vliste__kapak .vkapak__gorsel{object-fit:cover}
.vliste__no{
  position:absolute;left:.35rem;bottom:.3rem;z-index:1;
  font-weight:800;font-size:.76rem;letter-spacing:.06em;line-height:1;
  color:#fff;background:rgba(0,22,69,.78);padding:.22rem .34rem;border-radius:2px;
  font-variant-numeric:tabular-nums;
}
.vliste__metin{display:grid;gap:.3rem;min-width:0}
.vliste__konu{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--turuncu-parlak);transition:color .2s}
.vliste__baslik{font-weight:700;font-size:.95rem;line-height:1.3;color:inherit}
.vliste__oge:hover .vliste__konu,.vliste__oge:focus-visible .vliste__konu{color:#fff}
/* SEÇİLİ SATIR — hover'dan AYRI bir dil: turuncu blok değil, sol kenarda
   dolu çizgi + hafif zemin + numara turuncu. Aynı olsaydı fare üstünden
   çekilince hangisinin oynadığı belli olmazdı. */
.vliste__oge.is-secili{background:rgba(255,255,255,.07);box-shadow:inset 3px 0 0 var(--turuncu)}
.vliste__oge.is-secili .vliste__no{background:var(--turuncu);color:var(--mavi-derin)}
.vliste__oge.is-secili:hover,.vliste__oge.is-secili:focus-visible{background:transparent}

.vsahne__tumu{margin-top:1rem}

/* ŞERİT ARAÇLARI — masaüstünde yok. */
.vserit__ust,.vserit__cubuk{display:none}

@media (max-width:980px){
  .vsahne__govde{grid-template-columns:minmax(0,1fr)}
  /* DAR EKRAN ŞERİDİ (2026-09-24, ikinci sürüm). İlk sürümde kart ekranın
     %62'siydi: 390px'te bir buçuk kart görünüyor, altı video olduğu hiçbir
     yerden anlaşılmıyordu. Şimdi:
       · kart ~%44 → aynı anda iki buçuk kart; yarım kalan üçüncüsü "devamı
         var" diyor;
       · şerit sağda ekran kenarına kadar taşıyor (kapsayıcının 4vw payını
         geri alıyor), sağ kenarda sönüm;
       · üstte "6 video · kaydır" + oklar, altta altı dilimli çubuk —
         görünen videoların dilimi yanıyor (video.js). */
  .vserit{position:relative;margin-right:calc((100vw - var(--olcu)) / -2)}
  .vserit::after{
    content:"";position:absolute;right:0;top:2.6rem;bottom:1.2rem;width:2.2rem;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--mavi-derin));transition:opacity .25s;
  }
  .vserit.is-sonda::after{opacity:0}
  .vserit__ust{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    margin:0 calc((100vw - var(--olcu)) / 2) .7rem 0;
  }
  .vserit__sayac{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--nokta)}
  .vserit__sayac strong{color:var(--turuncu-parlak);font-size:1rem}
  .vserit__ipucu{color:var(--sonuk);font-weight:700}
  .vserit__oklar{display:flex;gap:.45rem}
  .vserit__oklar[hidden]{display:none}
  .vserit__ok{
    width:2.6rem;height:2.4rem;display:grid;place-items:center;cursor:pointer;
    font:800 1.5rem/1 'Montserrat',sans-serif;color:var(--mavi-derin);
    background:var(--turuncu);border:0;transform:skewX(var(--egim));
    transition:background .2s,opacity .2s;
  }
  .vserit__ok:hover,.vserit__ok:focus-visible{background:var(--turuncu-parlak)}
  .vserit__ok:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .vserit__ok:disabled{opacity:.3;cursor:default}
  .vliste{
    grid-auto-flow:column;grid-auto-columns:minmax(9.5rem,44%);
    overflow-x:auto;scroll-snap-type:x mandatory;gap:.7rem;
    padding:0 2rem .2rem 0;scroll-padding-left:0;
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .vliste::-webkit-scrollbar{display:none}
  .vliste > li{scroll-snap-align:start}
  .vliste__oge{grid-template-columns:minmax(0,1fr);align-items:start;gap:.55rem;padding:.4rem;height:100%}
  .vliste__oge::before{inset:0}
  .vliste__baslik{font-size:.86rem}
  .vliste__konu{font-size:.7rem}
  .vserit__cubuk{
    display:flex;gap:.3rem;margin:.9rem calc((100vw - var(--olcu)) / 2) 0 0;
  }
  .vserit__cubuk[hidden]{display:none}
  .vserit__cubuk span{flex:1;height:3px;background:rgba(255,255,255,.16);transition:background .25s}
  .vserit__cubuk span.is-gorunen{background:var(--turuncu)}
}
@media (min-width:600px) and (max-width:980px){
  .vliste{grid-auto-columns:minmax(11rem,30%)}
}

/* ── /videolar · .vizgara ────────────────────────────────────────────── */
.vizgara{
  display:grid;align-items:start;
  gap:clamp(2rem,4vw,3.2rem) clamp(1.4rem,3vw,2.6rem);
  margin:0 0 clamp(2.6rem,5vw,4rem);
}
.vkart{min-width:0}
.vkart__ust{display:flex;align-items:center;gap:.8rem;margin:1rem 0 .55rem}
.vkart__no{font-size:1.9rem;font-weight:800;line-height:.9;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,136,0,.6);font-variant-numeric:tabular-nums}
.vkart__baslik{
  margin:0;font-family:'Akzidenz Grotesk XBd Cn',Impact,'Arial Narrow Bold',sans-serif;
  font-weight:400;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.02;color:var(--beyaz);text-wrap:balance;
}
.vkart__bag{display:inline-block;margin-top:.7rem;font-size:.86rem;font-weight:700;
  color:var(--nokta);text-decoration:none;border-bottom:1px solid rgba(166,214,252,.32);padding-block:.2rem}
.vkart__bag:hover,.vkart__bag:focus-visible{color:var(--turuncu-parlak);border-bottom-color:var(--turuncu-parlak)}
/* İLK VİDEO VİTRİN — dergi ızgarası. Masaüstünde üç sütun: vitrin 2×2
   alanı kaplıyor, 02–03 sağında üst üste, 04–06 altta yan yana; altı video
   boşluksuz oturuyor. İlk sürüm "vitrin tam genişlik + iki sütun"du ve
   kalan beş videonun sonuncusu satırda tek başına kalıyordu. */
.vizgara{grid-template-columns:repeat(3,minmax(0,1fr))}
.vkart--vitrin{grid-column:span 2;grid-row:span 2}
.vkart--vitrin .vkart__baslik{font-size:clamp(1.9rem,3.4vw,3rem)}
.vkart--vitrin .vkart__no{font-size:2.6rem}
@media (max-width:1100px){
  /* İki sütunda vitrin olağan kart: 6 = 3 satır, yine boşluk yok. */
  .vizgara{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vkart--vitrin{grid-column:auto;grid-row:auto}
  .vkart--vitrin .vkart__baslik{font-size:clamp(1.45rem,2.4vw,2.05rem)}
  .vkart--vitrin .vkart__no{font-size:1.9rem}
}
@media (max-width:820px){
  .vizgara{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .vkapak__gorsel,.voynat,.vliste__oge::before,.vkapak::after{transition:none}
  .vkapak:hover .vkapak__gorsel,.vkapak:focus-visible .vkapak__gorsel{transform:none}
}
@media print{
  .vsahne,.vizgara .vekran{display:none}
}

/* LİSTE SAHNEDEN UZUNSA (2026-10-05: 6 → 13 video). Masaüstünde liste
   sütunu sahnenin boyunu belirlemez; sahne kadar yer kaplar, fazlası kendi
   içinde kayar. Yoksa bölüm 13 satır boyunca uzuyor ve oynatıcının altı
   boş kalıyordu (ölçüldü: liste 1281px, sahne 472px). */
@media (min-width:981px){
  .vsahne__govde{align-items:stretch}
  .vserit{position:relative;min-height:22rem}
  .vliste{position:absolute;inset:0;align-content:start;overflow:hidden auto;overscroll-behavior:contain;
    padding-right:.5rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
}