/* =========================================================
   ST Solar — medya.css  (Medya sayfası: video galerisi)
   Önek: .mv-  |  Sadece base.css token'ları kullanılır.
   ========================================================= */

.mv{padding:34px 0 88px;background:var(--white)}

.mv-bread{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--muted-2);
}
.mv-bread a{transition:color .2s ease}
.mv-bread a:hover{color:var(--orange)}
.mv-bread [aria-current]{color:var(--muted);font-weight:600}

.mv-h2{
  margin-top:26px;
  font-size:30px;line-height:1.25;font-weight:700;color:var(--ink);
  letter-spacing:-.3px;
}
.mv-lead{
  margin-top:12px;max-width:760px;
  font-size:15.5px;line-height:1.8;color:var(--muted);
}

.mv-grid{
  margin-top:32px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px 22px;
}

.mv-thumb{
  position:relative;display:block;
  border-radius:12px;overflow:hidden;
  background:var(--navy-900);
  aspect-ratio:16/9;
}
.mv-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease,opacity .3s ease;
}
.mv-thumb:hover img{transform:scale(1.04);opacity:.88}
.mv-play{
  position:absolute;left:50%;top:50%;
  width:52px;height:52px;
  transform:translate(-50%,-50%);
  transition:transform .2s ease;
}
.mv-play svg{width:100%;height:100%;display:block}
.mv-thumb:hover .mv-play{transform:translate(-50%,-50%) scale(1.08)}

.mv-name{
  margin-top:12px;
  font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);
}
.mv-prod{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:4px;
  font-size:13px;font-weight:600;color:var(--muted);
  transition:color .2s ease;
}
.mv-prod:hover{color:var(--orange)}

@media (max-width:576px){
  .mv-h2{font-size:24px}
  .mv-grid{grid-template-columns:1fr 1fr;gap:20px 12px}
  .mv-play{width:42px;height:42px}
  .mv-name{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .mv-thumb img,.mv-play{transition:none !important}
}