/* =========================================================
   FOOTER
   ========================================================= */

.ero-footer {
  position: relative;
  overflow: hidden;

  padding:
    clamp(70px, 8vw, 110px)
    0
    34px;

  background:
    linear-gradient(
      145deg,
      #281512 0%,
      #351714 48%,
      #471817 100%
    );

  color: #fff8f1;
}


/* =========================================================
   ÜST GRID
   ========================================================= */

.ero-footer__top {
  position: relative;
  z-index: 3;

  display: grid;

  grid-template-columns:
    minmax(270px, 1.45fr)
    minmax(150px, .7fr)
    minmax(170px, .8fr)
    minmax(220px, 1fr);

  gap:
    clamp(35px, 5vw, 80px);
}


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

.ero-footer__brand {
  max-width: 390px;
}

.ero-footer__logo {
  display: inline-flex;

  width: 230px;
  max-width: 100%;

  padding:
    10px
    16px;

  background: #fff7ef;

  border-radius:
    20px 16px 21px 17px
    /
    17px 22px 16px 21px;

  transform: rotate(-.5deg);
}

.ero-footer__logo img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}

.ero-footer__brand-text {
  max-width: 360px;

  margin:
    26px
    0
    27px;

  color: rgba(255, 248, 241, .75);

  font-size: 15px;
  line-height: 1.75;
}


/* =========================================================
   TELEFON
   ========================================================= */

.ero-footer__phone {
  position: relative;

  display: inline-flex;
  flex-direction: column;

  gap: 2px;

  padding:
    13px
    20px;

  color: #fff;

  text-decoration: none;
}

.ero-footer__phone::before {
  content: "";

  position: absolute;

  inset: 0;

  border: 2px solid #f05a28;

  border-radius:
    25px 21px 27px 22px
    /
    21px 27px 22px 26px;

  transform: rotate(-1deg);
}

.ero-footer__phone::after {
  content: "";

  position: absolute;

  inset:
    3px
    -4px
    -3px
    4px;

  border: 1px solid rgba(255, 181, 38, .55);

  border-radius:
    22px 27px 21px 26px
    /
    27px 21px 26px 22px;

  transform: rotate(.8deg);
}

.ero-footer__phone-label {
  position: relative;
  z-index: 2;

  color: #ffb526;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .13em;
  text-transform: uppercase;
}

.ero-footer__phone strong {
  position: relative;
  z-index: 2;

  font-size: 19px;
  font-weight: 900;
}


/* =========================================================
   KOLONLAR
   ========================================================= */

.ero-footer__heading {
  margin:
    8px
    0
    24px;

  color: #ffb526;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: .13em;
  text-transform: uppercase;
}

.ero-footer__links {
  display: flex;
  flex-direction: column;

  gap: 13px;
}

.ero-footer__links a,
.ero-footer__contact > a:not(.ero-footer__contact-button) {
  width: fit-content;

  color: rgba(255, 248, 241, .79);

  font-size: 14px;
  font-weight: 700;

  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}

.ero-footer__links a:hover,
.ero-footer__contact > a:not(.ero-footer__contact-button):hover {
  color: #fff;

  transform: translateX(3px);
}


/* =========================================================
   İLETİŞİM
   ========================================================= */

.ero-footer__contact {
  display: flex;
  flex-direction: column;

  align-items: flex-start;
}

.ero-footer__contact address {
  margin:
    0
    0
    16px;

  color: rgba(255, 248, 241, .78);

  font-size: 14px;
  font-style: normal;

  line-height: 1.7;
}

.ero-footer__contact-button {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: 11px;

  min-height: 48px;

  margin-top: 25px;

  padding:
    0
    20px;

  background: #f05a28;
  color: #fff;

  border-radius:
    22px 18px 24px 19px
    /
    18px 24px 19px 23px;

  font-size: 13px;
  font-weight: 900;

  text-decoration: none;

  transition:
    transform .25s ease,
    background .25s ease;
}

.ero-footer__contact-button:hover {
  background: #ff6a31;

  transform: translateY(-3px);
}

.ero-footer__contact-button span {
  font-size: 19px;
}


/* =========================================================
   EL ÇİZİMİ AYIRICI
   ========================================================= */

.ero-footer__line {
  position: relative;
  z-index: 3;

  width: 100%;
  height: 8px;

  margin:
    clamp(55px, 7vw, 90px)
    0
    28px;
}

.ero-footer__line::before,
.ero-footer__line::after {
  content: "";

  position: absolute;

  left: 0;

  width: 100%;

  border-radius: 999px;
}

.ero-footer__line::before {
  top: 1px;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      #f05a28,
      #ffb526 38%,
      rgba(255,255,255,.15) 72%,
      transparent
    );

  transform: rotate(-.12deg);
}

.ero-footer__line::after {
  top: 5px;

  width: 74%;
  height: 1px;

  background:
    rgba(255, 181, 38, .34);

  transform: rotate(.15deg);
}


/* =========================================================
   ALT BAR
   ========================================================= */

.ero-footer__bottom {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  color: rgba(255, 248, 241, .54);

  font-size: 12px;
}

.ero-footer__bottom p {
  margin: 0;
}

.ero-footer__bottom a {
  color: rgba(255, 248, 241, .67);

  font-weight: 800;

  text-decoration: none;
}

.ero-footer__bottom a:hover {
  color: #ffb526;
}


/* =========================================================
   DEV ARKA PLAN YAZISI
   ========================================================= */

.ero-footer__giant {
  position: absolute;

  z-index: 1;

  left: 50%;
  bottom: -23px;

  width: 100%;

  transform: translateX(-50%);

  color: rgba(255, 255, 255, .025);

  font-family:
    "Archivo Black",
    "Arial Black",
    sans-serif;

  font-size:
    clamp(80px, 12vw, 190px);

  line-height: .7;

  text-align: center;

  letter-spacing: -.06em;

  white-space: nowrap;

  pointer-events: none;
  user-select: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .ero-footer__top {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      50px
      40px;
  }

}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 620px) {

  .ero-footer {
    padding:
      65px
      0
      28px;
  }

  .ero-footer__top {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .ero-footer__brand {
    max-width: none;
  }

  .ero-footer__logo {
    width: 210px;
  }

  .ero-footer__heading {
    margin-bottom: 18px;
  }

  .ero-footer__bottom {
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;
  }

  .ero-footer__giant {
    display: none;
  }

}