/* =========================
   Home — Brands (Markalar)
   Prefix: ak-
========================= */

.ak-brands{
  position: relative;
  width: 100%;
  padding: 64px 0 84px;
  overflow: hidden;
}

/* Full-width gradient background */
.ak-brands__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 520px at 15% 20%, rgba(42,167,255,.22), transparent 60%),
    radial-gradient(900px 420px at 85% 30%, rgba(11,74,134,.26), transparent 55%),
    linear-gradient(135deg, rgba(11,74,134,.92), rgba(6,20,40,.92));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ak-brands .ak-container{
  position: relative;
  z-index: 2;
}

.ak-brands__head{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 26px;
}

.ak-brands__desc{
  margin:0;
  color: rgba(245,247,251,.78);
  max-width: 720px;
}

.ak-brands__title{
  margin:0;
  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 900;
  letter-spacing: .2px;
}


/* Grid */
.ak-brands__grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.ak-brands__item{
  position: relative;
}

/* Clickable card */
.ak-brands__link{
  display:block;
}

.ak-brands__card{
  height: 86px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 55px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.ak-brands__logo{
  max-height: 46px;
  width: auto;
  max-width: 100%;
  filter: saturate(1.05);
  opacity: .96;
}

.ak-brands__fallback{
  font-weight: 900;
  letter-spacing: .2px;
  opacity: .9;
  text-align:center;
}

.ak-brands__card:hover{
  transform: translateY(-2px);
  border-color: rgba(42,167,255,.55);
  background: rgba(255,255,255,.085);
}

/* Reveal anim (left/right) */
.ak-brands__item{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s ease;
  will-change: transform, opacity;
}

.ak-brands__item[data-dir="left"]{ transform: translate3d(-26px, 10px, 0); }
.ak-brands__item[data-dir="right"]{ transform: translate3d(26px, 10px, 0); }

.ak-brands__item.is-inview{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Empty state */
.ak-brands__empty{
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(245,247,251,.82);
}

/* Wave / Geometric bottom layer */
.ak-brands__wave{
  position:absolute;
  left:0; right:0;
  bottom:-18px;
  height: 120px;
  z-index: 1;
  pointer-events:none;
  filter: blur(.2px);
}

.ak-brands__shape{
  position:absolute;
  bottom: 0;
  width: 140px;
  height: 140px;
  border-radius: 26px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  transform: rotate(12deg);
  animation: ak-float-wave 9s ease-in-out infinite;
}

.ak-brands__shape.ak-s1{ left: -30px;  opacity:.65; animation-duration: 10s; }
.ak-brands__shape.ak-s2{ left: 14%;    width: 110px; height:110px; opacity:.55; animation-duration: 12s; animation-delay: -3s;}
.ak-brands__shape.ak-s3{ left: 34%;    width: 160px; height:160px; opacity:.45; animation-duration: 11s; animation-delay: -6s;}
.ak-brands__shape.ak-s4{ left: 56%;    width: 120px; height:120px; opacity:.55; animation-duration: 13s; animation-delay: -4s;}
.ak-brands__shape.ak-s5{ left: 74%;    width: 170px; height:170px; opacity:.40; animation-duration: 12.5s; animation-delay: -7s;}
.ak-brands__shape.ak-s6{ right:-40px;  width: 140px; height:140px; opacity:.62; animation-duration: 10.5s; animation-delay: -5s;}

@keyframes ak-float-wave{
  0%   { transform: translate3d(0, 0, 0) rotate(12deg); }
  50%  { transform: translate3d(0, -18px, 0) rotate(6deg); }
  100% { transform: translate3d(0, 0, 0) rotate(12deg); }
}

/* Responsive */
@media (max-width: 1100px){
  .ak-brands__grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px){
  .ak-brands{ padding: 54px 0 78px; }
  .ak-brands__head{ flex-direction: column; align-items:flex-start; }
  .ak-brands__grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ak-brands__card{ height: 78px; }
  .ak-brands__logo{ max-height: 42px; }
}