* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #ececec;
}

body {
  overflow-x: hidden;
}

.hero {
  width: 100%;
  min-height: 100vh;
  background: #ececec;
}

.mobile-view {
  display: block;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #ececec;
}

.mobile-view .layout-img {
  display: block;
  width: 100%;
  height: auto;
}

.mobile-phone {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translate(-50%, 80px);
  width: 78%;
  max-width: 520px;
  opacity: 0;
  animation: phoneInMobile 1s ease forwards;
  animation-delay: 0.35s;
}

@keyframes phoneInMobile {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* Telefon ortak animasyon */
.phone {
  position: absolute;
  opacity: 0;
  transform: translateY(80px);
  animation: phoneIn 1s ease forwards;
  animation-delay: 0.35s;
}

@keyframes phoneIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MASAÜSTÜ */
.desktop-view {
  display: block;
  max-width: 1920px;
  margin: 0 auto;
}

.desktop-phone {
  left: 0.8%;
  bottom: 0;
  width: 35.5%;
  max-width: 690px;
}

/* MOBİL */
.mobile-view {
  display: none;
}

@media (max-width: 768px) {
  .desktop-view {
    display: none;
  }

  .mobile-view {
    display: block;
    max-width: 1080px;
    margin: 0 auto;
  }

  .mobile-phone {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 80px);
    width: 78%;
    max-width: 520px;
    animation: phoneInMobile 1s ease forwards;
    animation-delay: 0.35s;
  }

  @keyframes phoneInMobile {
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
}