/* ==========================================================================
   Vitrin video şeridi (Views/Shared/_HomeVideos.cshtml + js/home-videos.js)
   Dikey 9:16 kartlar · masaüstü 6 / tablet 3,5 / telefon 2,2 kart · yatay kaydırma + yerine oturma
   Tema değişkenleri varsa (İş Güvenliği teması) onları kullanır, yoksa yedek renkler.
   ========================================================================== */

.hv {
  --hv-accent: var(--orange, #f37021);
  --hv-ink: var(--ink, #14161a);
  --hv-rule: var(--rule, #e4e6ea);
  --hv-radius: var(--r-md, 16px);
  --hv-gap: 16px;
  --hv-cols: 6;
  --hv-ease: var(--ease-out, cubic-bezier(.22, 1, .36, 1));
  position: relative;
}

.hv__head { margin-bottom: 18px; }

/* ---------- Oklar ---------- */
.hv__nav { display: flex; gap: 8px; }
.hv__nav[hidden] { display: none; }
.hv__btn {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hv-rule);
  background: #fff; color: var(--hv-ink); display: grid; place-items: center; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--hv-ease), opacity .2s;
}
.hv__btn:hover:not(:disabled) { background: var(--hv-ink); color: #fff; border-color: var(--hv-ink); transform: translateY(-1px); }
.hv__btn:active:not(:disabled) { transform: scale(.94); }
.hv__btn:disabled { opacity: .35; cursor: default; }
.hv__btn:focus-visible { outline: 2px solid var(--hv-accent); outline-offset: 2px; }

/* ---------- Ray ---------- */
.hv__viewport {
  position: relative;
  /* kenarlarda yumuşak geçiş: kaydırılacak içerik olduğunu sezdirir */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hv-fade-l, 0px), #000 calc(100% - var(--hv-fade-r, 0px)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--hv-fade-l, 0px), #000 calc(100% - var(--hv-fade-r, 0px)), transparent 100%);
}
.hv__track {
  list-style: none; margin: 0; padding: 6px 2px 14px;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--hv-cols) - 1) * var(--hv-gap)) / var(--hv-cols));
  gap: var(--hv-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.hv__track::-webkit-scrollbar { display: none; }
.hv__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.hv__track.is-dragging .hv-card { pointer-events: none; }

.hv__item {
  scroll-snap-align: start;
  /* derinlik efekti: js --hv-depth (0 = tam görünür, 1 = kenar dışında) */
  transform: perspective(900px) scale(calc(1 - var(--hv-depth, 0) * .08)) rotateY(calc(var(--hv-side, 0) * var(--hv-depth, 0) * 9deg));
  opacity: calc(1 - var(--hv-depth, 0) * .45);
  transition: transform .45s var(--hv-ease), opacity .45s var(--hv-ease);
  will-change: transform;
}

/* ---------- Kart ---------- */
.hv-card {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--hv-radius); overflow: hidden;
  background: #101114; isolation: isolate;
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -12px rgb(0 0 0 / .35);
  transition: transform .35s var(--hv-ease), box-shadow .35s var(--hv-ease);
}
.hv-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hv-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--hv-ease); z-index: 4;
}
.hv-card:hover, .hv-card:focus-within { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 18px 40px -16px rgb(0 0 0 / .5); }
.hv-card:hover::after, .hv-card:focus-within::after { transform: scaleX(1); }

.hv-card__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform .9s var(--hv-ease), opacity .4s;
}
.hv-card:hover .hv-card__video { transform: scale(1.07); }

.hv-card__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / .18) 0%, transparent 28%, transparent 52%, rgb(0 0 0 / .78) 100%);
}

/* yükleniyor halkası (oynamaya başlayınca kaybolur) */
.hv-card__spin {
  position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 2;
  border-radius: 50%; border: 3px solid rgb(255 255 255 / .25); border-top-color: #fff;
  animation: hv-spin .8s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.hv-card.is-loading .hv-card__spin { opacity: 1; }
@keyframes hv-spin { to { transform: rotate(360deg); } }

.hv-card__hit { position: absolute; inset: 0; z-index: 3; }
.hv-card__hit:focus-visible { outline: 3px solid var(--hv-accent); outline-offset: -3px; border-radius: var(--hv-radius); }

.hv-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 14px 16px; color: #fff; pointer-events: none;
  transform: translateY(6px); transition: transform .4s var(--hv-ease);
}
.hv-card:hover .hv-card__body { transform: none; }
.hv-card__title {
  margin: 0 0 8px; font-size: 14px; line-height: 1.3; font-weight: 700; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 8px rgb(0 0 0 / .45);
}
.hv-card__cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--hv-accent); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / .5);
  transition: transform .3s var(--hv-ease);
}
.hv-card:hover .hv-card__cta { transform: translateX(2px); }

.hv-card__sound {
  position: absolute; top: 10px; right: 10px; z-index: 5; width: 34px; height: 34px; border-radius: 999px;
  border: 0; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgb(0 0 0 / .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.9); transition: opacity .25s, transform .25s var(--hv-ease), background .2s;
}
.hv-card:hover .hv-card__sound, .hv-card__sound:focus-visible, .hv-card__sound[aria-pressed="true"] { opacity: 1; transform: none; }
.hv-card__sound:hover { background: var(--hv-accent); }
.hv-card__sound .hv-ico-on { display: none; }
.hv-card__sound[aria-pressed="true"] .hv-ico-on { display: block; }
.hv-card__sound[aria-pressed="true"] .hv-ico-off { display: none; }
@media (hover: none) { .hv-card__sound { opacity: 1; transform: none; } }

/* ---------- İlerleme çubuğu ---------- */
.hv__progress { height: 3px; border-radius: 3px; background: var(--hv-rule); overflow: hidden; margin-top: 4px; }
.hv__progress[hidden] { display: none; }
.hv__progress span {
  display: block; height: 100%; width: var(--hv-size, 30%); background: var(--hv-accent); border-radius: inherit;
  transform: translateX(var(--hv-pos, 0%)); transition: transform .25s var(--hv-ease), width .25s var(--hv-ease);
}

/* ---------- Giriş animasyonu ---------- */
/* "backwards": animasyon bitince derinlik efektinin opaklığını ezmesin */
.hv.is-ready .hv__item { animation: hv-in .7s var(--hv-ease) backwards; animation-delay: calc(var(--hv-i, 0) * 70ms); }
@keyframes hv-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Duyarlı ---------- */
@media (max-width: 1100px) { .hv { --hv-cols: 4.4; } }
@media (max-width: 860px)  { .hv { --hv-cols: 3.4; --hv-gap: 12px; } }
@media (max-width: 560px)  { .hv { --hv-cols: 2.2; --hv-gap: 10px; } .hv__nav { display: none; } .hv-card__title { font-size: 13px; } }

@media (prefers-reduced-motion: reduce) {
  .hv__track { scroll-behavior: auto; }
  .hv__item, .hv-card, .hv-card__video, .hv-card__body, .hv.is-ready .hv__item { transition: none; animation: none; transform: none; }
}