/* ------------------------------------------------------------------
   CMOS Teknoloji — proje videoları

   works-grid.html (ızgaranın altındaki şerit) ve project-details.html
   (galerinin altındaki tek video) ortak kullanıyor. Kartları
   js/cmos-videos-ui.js basıyor, veri js/cmos-videos.js'ten geliyor.

   Videolar dikey (576x1024, 9:16) — kısa sosyal medya çekimleri.
   Kartlar bu orana göre kuruldu; yatay bir video eklenirse
   `--cmos-video-ratio` kart üzerinden geçersiz kılınıyor.
   ------------------------------------------------------------------ */

.cmos-videos {
  --cmos-video-ratio: 9 / 16;
  --cmos-video-w: 24rem;
}

/* --------------------------------------------------------------
   Şerit — 28 dikey kart ızgaraya dizilse sayfa yedi sıra uzardı.
   Yatay kaydırma hem sayfayı kısa tutuyor hem de kartların hepsini
   DOM'da bırakıyor (arama motoru tamamını görüyor).
   -------------------------------------------------------------- */
.cmos-video-rail {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--st-muted) transparent;
  /* Yalnız alt boşluk: kaydırma çubuğu kartların altına insin. Yatay iç
     boşluk verilmiyor — `scroll-snap` durakları o kadar kayıyor ve şerit
     başlangıçta `scrollLeft: 4`te duruyor, "başa geldi" ölçümü şaşıyor. */
  padding: 0 0 2.4rem;
}
.cmos-video-rail::-webkit-scrollbar {
  height: 0.6rem;
}
.cmos-video-rail::-webkit-scrollbar-thumb {
  background-color: var(--st-muted);
  border-radius: 10rem;
}
.cmos-video-rail::-webkit-scrollbar-track {
  background-color: transparent;
}

@media only screen and (min-width: 768px) {
  .cmos-videos {
    --cmos-video-w: 26rem;
  }
  .cmos-video-rail {
    gap: 2.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .cmos-video-rail {
    margin-top: 5.5rem;
  }
}

/* --------------------------------------------------------------
   Kart
   -------------------------------------------------------------- */
.cmos-video-card {
  flex: 0 0 auto;
  width: var(--cmos-video-w);
  scroll-snap-align: start;
}

.cmos-video-card__frame {
  position: relative;
  aspect-ratio: var(--cmos-video-ratio);
  border-radius: 1.6rem;
  overflow: hidden;
  background-color: var(--base-tint);
}

.cmos-video-card__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

/* Poster + oynat düğmesi tek bir <button>; kartın tamamı tıklanabilir
   olsun ama klavyede tek durak olsun diye. */
.cmos-video-card__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cmos-video-card__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--_animspeed-slow, 0.6s) ease,
              filter var(--_animspeed-medium, 0.3s) ease;
}
.no-touch .cmos-video-card__play:hover .cmos-video-card__poster {
  transform: scale(1.04);
}

.cmos-video-card__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--_animspeed-medium, 0.3s) ease,
              transform var(--_animspeed-medium, 0.3s) ease;
}
.cmos-video-card__icon svg {
  width: 2rem;
  height: 2rem;
  margin-left: 0.3rem;   /* üçgenin görsel ağırlık merkezi solda kalıyor */
  fill: #fff;
}
.no-touch .cmos-video-card__play:hover .cmos-video-card__icon {
  background-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}
/* Odak halkası içeri çiziliyor: şerit `overflow-x` kırptığı için dışarı
   taşan bir halka klavyeyle gezerken görünmez kalırdı. */
.cmos-video-card__play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: 1.6rem;
}

.cmos-video-card__time {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.6rem;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: normal 600 1.2rem/1 var(--_font-accent);
  letter-spacing: 0.04rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------
   Kart alt yazısı — başlık ve müşteri gerçek metin olarak duruyor
   (görselin üstüne bindirilmiş yazı arama motoruna aynı şeyi anlatmıyor).
   -------------------------------------------------------------- */
.cmos-video-card__caption {
  padding-top: 2.2rem;
}
/* Proje adlarının bir kısmı iki satır ("Robot hologram ve soru cevap
   sistemi"); iki satıra sabitlenmezse müşteri adları şeritte kademeleniyor. */
.cmos-video-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 4.4rem;
  overflow: hidden;
  color: var(--t-bright);
  font: normal 700 1.8rem/1.2 var(--_font-default);
  letter-spacing: -0.04rem;
}
.no-touch .cmos-video-card__title:hover {
  color: var(--accent);
}
.cmos-video-card__client {
  display: block;
  margin-top: 0.4rem;
  color: var(--t-medium);
  font: normal 500 1.4rem/1.4 var(--_font-accent);
}

/* --------------------------------------------------------------
   Şerit başlığı ve okları
   -------------------------------------------------------------- */
.cmos-video-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cmos-video-head__text {
  max-width: 62rem;
}
.cmos-video-head__text p {
  margin: 1.2rem 0 0;
  color: var(--t-medium);
}

.cmos-video-nav {
  display: none;
  gap: 0.8rem;
}
@media only screen and (min-width: 992px) {
  .cmos-video-nav {
    display: flex;
  }
}
.cmos-video-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid var(--st-muted);
  border-radius: 50%;
  background-color: transparent;
  color: var(--t-medium);
  cursor: pointer;
  transition: color var(--_animspeed-medium, 0.3s) ease,
              border-color var(--_animspeed-medium, 0.3s) ease;
}
.cmos-video-nav__btn svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}
.no-touch .cmos-video-nav__btn:hover:not(:disabled) {
  color: var(--t-bright);
  border-color: var(--t-bright);
}
.cmos-video-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --------------------------------------------------------------
   project-details.html — tek proje videosu.
   Şerit yerine ortalanmış tek kart; ikinci videosu olan projelerde
   (Fenerium) yan yana iki kart.
   -------------------------------------------------------------- */
.cmos-video-solo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4rem;
}
.cmos-video-solo .cmos-video-card {
  width: min(32rem, 100%);
  scroll-snap-align: none;
}
.cmos-video-solo .cmos-video-card__caption {
  text-align: center;
}