#colinsContainer:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
}

#loftContainer .carousel-item:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
}

#erogluGiyimContainer .carousel-item:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
}

.brand-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

  .brand-container a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10rem;
    height: 4rem;
    padding: 0.5rem;
    background: #ea282a;
    border-radius: 2rem 1rem 2rem 1rem;
    cursor: pointer;
    transition: border-radius 0.3s ease;
    text-decoration: none;
    color: white;
    font-size: 1.1rem;
  }

    .brand-container a:hover {
      border-radius: 1rem 2rem 1rem 2rem;
    }

#heroRow {
  height: 25vh;
}

#brandRow {
  height: 75vh;
}

/*#scroll-indicator {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 3;
  animation-name: scrollIndicatorAnim;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

  #scroll-indicator img, #scroll-indicator svg {
    transition: transform 0.4s ease, opacity 0.3s ease;
  }

  #scroll-indicator.scrollIndicatorReverse img {
    transform: translateY(40px);
  }

  #scroll-indicator.scrollIndicatorReverse svg {
    transform: translateY(-40px) rotate(180deg);
  }*/

  #brandRow #erogluGiyimContainer .brand-container div img {
    height: 75% !important;
  }

@media (min-width: 992px) {
  #heroRow > div,
  #brandRow > div {
    height: 100%; 
  }

  .carousel,
  .carousel-inner,
  .carousel-item {
    height: 100%;
  }

    .carousel-item img,
    .carousel-item picture,
    .carousel-item picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

  /*#heroRow {
    height: 25vh;
  }*/

    #heroRow .brand-container div {
      height: 50% !important;
    }

  /*#brandRow {
    height: 75vh;
  }*/

    #brandRow #colinsContainer .brand-container div {
      height: 20% !important;
      width: 85% !important;
    }

    #brandRow #loftContainer .brand-container div {
      height: 20% !important;
      /*width: 100% !important;*/
    }

    #brandRow #erogluGiyimContainer .brand-container div {
      height: 20% !important;
    }

      #brandRow #erogluGiyimContainer .brand-container div img {
        height: 75% !important;
      }

  /*#scroll-indicator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }*/
}

/*@keyframes scrollIndicatorAnim {
  from {
    bottom: 2rem;
  }

  to {
    bottom: 4rem;
  }
}*/

/* Tüm logolar için aspect ratio koruması */
.brand-container div img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* iOS Safari ve mobil tarayıcılar için viewport düzeltmesi */
@media (max-width: 991px) {
  body, html {
    overflow: hidden;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height - iOS için */
  }

  main {
    overflow: hidden !important;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height */
  }

  #heroRow {
    height: 20vh;
    height: 20dvh;
  }

  #brandRow {
    height: 80vh;
    height: 80dvh;
  }

    #brandRow > div {
      height: 33.333333%;
    }

      /* iOS Safari bottom bar için padding */
      #brandRow > div:last-child {
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }

  /* Logo container'larına max-width ve aspect ratio */
  .brand-container div {
    max-width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

    .brand-container div img {
      max-width: 100%;
      max-height: 100%;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
    }

  .brand-container a {
    width: 8rem;
    height: 3.5rem;
    font-size: 1rem;
    padding: 0.3rem;
  }
}