/* =====================================================
   BRANDS VIDEO HERO – CINEMATIC (FINAL – NO LINES)
===================================================== */

.brands-video-hero{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:#000;
}

/* ================= VIDEO ================= */

.brands-video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
/* ================= OVERLAY ================= */

.brands-video-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.22) 0%,
      rgba(0,0,0,.32) 55%,
      rgba(0,0,0,.5) 100%
    );
}

/* ================= LOGO GRID (GERÇEK OVERLAY) ================= */

.brands-logos{
  position:absolute;
  inset:0;
  z-index:3;

  display:grid;
  grid-template-columns:repeat(4, 1fr);

  align-items:center;
  justify-items:center;
}

/* ================= HER 1/4 ALAN ================= */

.brand-logo{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* ================= LOGO ================= */

.brand-logo img{
  width:75%;                 /* çözünürlükle orantılı */
  max-width:240px;           /* masaüstü üst sınır */
  height:auto;

  opacity:.92;
  transition:transform .45s ease, opacity .45s ease;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.45));
}

/* ================= HOVER ================= */

.brand-logo:hover img{
  transform:scale(1.08);
  opacity:1;
}

/* ================= KÖŞE ÇİZGİLERİ (İSTEĞE BAĞLI) ================= */

.brands-video-hero::before,
.brands-video-hero::after{
  content:"";
  position:absolute;
  width:32px;
  height:32px;
  border:2px solid rgba(255,255,255,.6);
  z-index:4;
}

.brands-video-hero::before{
  top:14%;
  left:6%;
  border-right:none;
  border-bottom:none;
}

.brands-video-hero::after{
  bottom:14%;
  right:6%;
  border-left:none;
  border-top:none;
}
/* Varsayılan: desktop açık */
.video-desktop{ display:block; }
.video-mobile{ display:none; }

/* ================= MOBİL (İKİNCİL) ================= */

@media (max-width: 768px){

  /* HERO relative olmalı */
  .brands-video-hero{
    position: relative;
  }

  /* LOGOLAR – VIDEO ÜSTÜNE OVERLAY */
  .brands-logos{
    position: absolute;
    inset: 0;
    z-index: 5;

    display: grid;
    grid-template-rows: repeat(4, 1fr); /* 4 logo = 4 video sahnesi */
    grid-template-columns: 1fr;

    align-items: center;
    justify-items: center;

    pointer-events: none;
  }

  .brand-logo{
    pointer-events: auto;
  }

  .brand-logo img{
    width: 65%;
    max-width: 140px;
    opacity: .95;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
  }

  /* HERO gradient/çerçeve iptal */
  .brands-video-hero::before,
  .brands-video-hero::after{
    display: none;
  }
  .video-desktop{ display:none; }
  .video-mobile{ display:block; }
}