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

.ero-contact-page {
  background: #f7efe7;
}


/* =========================================================
   HERO
   ========================================================= */

.ero-contact-hero {
  padding:
    clamp(38px, 5vw, 70px)
    0
    clamp(90px, 9vw, 130px);

  background: #f7efe7;
}


.ero-contact-hero__frame {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, .88fr)
    minmax(480px, 1.12fr);

  align-items: stretch;

  gap:
    clamp(40px, 5vw, 70px);

  min-height: 610px;

  padding:
    clamp(45px, 5vw, 70px);

  background: #fffaf4;

  border-radius:
    42px 34px 48px 37px
    /
    35px 49px 33px 44px;

  box-shadow:
    0 24px 65px rgba(61, 32, 21, .09);
}


/* El çizimi ana çerçeve */
.ero-contact-hero__frame::before {
  content: "";

  position: absolute;

  inset: 0;

  border: 3px solid #c5162e;

  border-radius:
    42px 34px 48px 37px
    /
    35px 49px 33px 44px;

  transform: rotate(-.1deg);

  pointer-events: none;
}


/* İkinci turuncu çizgi */
.ero-contact-hero__frame::after {
  content: "";

  position: absolute;

  inset:
    7px
    -5px
    -5px
    6px;

  border: 1.5px solid rgba(242, 138, 42, .53);

  border-radius:
    35px 47px 34px 44px
    /
    48px 34px 46px 36px;

  transform: rotate(.18deg);

  pointer-events: none;
}


/* =========================================================
   SOL
   ========================================================= */

.ero-contact-hero__content {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
  justify-content: center;

  max-width: 610px;
}

.ero-contact-hero__eyebrow {
  margin:
    0
    0
    14px;

  color: #c5162e;

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

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

.ero-contact-hero__title {
  margin: 0;

  color: #2f1a17;

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

  font-size:
    clamp(59px, 6.4vw, 96px);

  font-weight: 400;

  line-height: .91;
  letter-spacing: -.065em;
}

.ero-contact-hero__lead {
  max-width: 580px;

  margin:
    28px
    0
    0;

  color: #68544a;

  font-size:
    clamp(16px, 1.35vw, 19px);

  font-weight: 650;

  line-height: 1.72;
}


/* =========================================================
   HERO AKSİYONLARI
   ========================================================= */

.ero-contact-hero__actions {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 12px;

  margin-top: 33px;
}

.ero-contact-hero__action {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 285px;

  padding:
    13px
    20px;

  text-decoration: none;

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

  transition:
    transform .25s ease;
}

.ero-contact-hero__action:hover {
  transform: translateX(5px);
}

.ero-contact-hero__action--primary {
  background: #c5162e;

  color: #ffffff;
}

.ero-contact-hero__action--secondary {
  background: #fff1e7;

  color: #952918;

  border: 1px solid rgba(197, 22, 46, .20);
}

.ero-contact-hero__action-small {
  margin-bottom: 2px;

  color: inherit;

  opacity: .72;

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

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

.ero-contact-hero__action strong {
  font-size: 18px;
  line-height: 1.2;
}


/* =========================================================
   ADRES
   ========================================================= */

.ero-contact-hero__location {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  margin-top: 30px;
}

.ero-contact-hero__pin {
  position: relative;

  flex: 0 0 auto;

  width: 28px;
  height: 36px;
}

.ero-contact-hero__pin::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 0;

  width: 23px;
  height: 23px;

  background: #f28a2a;

  border-radius:
    52% 48% 50% 50%
    /
    50% 50% 48% 52%;

  transform:
    translateX(-50%)
    rotate(45deg);
}

.ero-contact-hero__pin i {
  position: absolute;
  z-index: 2;

  left: 50%;
  top: 7px;

  width: 7px;
  height: 7px;

  background: #fffaf4;

  border-radius: 50%;

  transform: translateX(-50%);
}

.ero-contact-hero__location small {
  display: block;

  margin-bottom: 4px;

  color: #c5162e;

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

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

.ero-contact-hero__location p {
  margin: 0;

  color: #705b50;

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

  line-height: 1.55;
}


/* =========================================================
   HARİTA
   ========================================================= */

.ero-contact-hero__map {
  position: relative;
  z-index: 3;

  overflow: hidden;

  min-height: 470px;

  border-radius:
    33px 26px 37px 29px
    /
    27px 39px 25px 35px;

  box-shadow:
    0 20px 42px rgba(51, 28, 19, .12);
}

.ero-contact-hero__map iframe {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 470px;

  border: 0;

  filter:
    saturate(.88)
    contrast(.96);
}

.ero-contact-hero__map-badge {
  position: absolute;

  right: 22px;
  bottom: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 105px;
  height: 105px;

  justify-content: center;

  background: #fffaf4;

  color: #c5162e;

  border: 3px solid #f28a2a;

  border-radius:
    50% 50% 46% 54%
    /
    54% 46% 52% 48%;

  box-shadow:
    0 10px 25px rgba(42, 25, 18, .12);

  transform: rotate(6deg);
}

.ero-contact-hero__map-badge span {
  font-size: 9px;
  font-weight: 900;

  letter-spacing: .12em;
}

.ero-contact-hero__map-badge strong {
  font-size: 17px;
  line-height: 1;
}


/* =========================================================
   DOĞRUDAN İLETİŞİM
   ========================================================= */

.ero-contact-direct {
  padding:
    clamp(90px, 10vw, 145px)
    0;

  background: #ffffff;
}


/* Başlık */
.ero-contact-direct__heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(300px, .95fr);

  align-items: end;

  gap:
    clamp(45px, 8vw, 120px);

  margin-bottom:
    clamp(55px, 7vw, 90px);
}

.ero-contact-direct__eyebrow {
  margin:
    0
    0
    12px;

  color: #c5162e;

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

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

.ero-contact-direct__heading h2 {
  margin: 0;

  color: #2f1a17;

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

  font-size:
    clamp(43px, 5vw, 72px);

  font-weight: 400;

  line-height: .96;
  letter-spacing: -.055em;
}

.ero-contact-direct__heading h2 span {
  display: block;

  color: #c5162e;
}

.ero-contact-direct__heading > p {
  max-width: 530px;

  margin: 0;

  color: #6b574c;

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


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

.ero-contact-direct__grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    22px;
}


.ero-contact-card {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  min-height: 290px;

  padding:
    32px;

  background: #faf5ef;

  color: #2f1a17;

  text-decoration: none;

  border-radius:
    31px 24px 35px 27px
    /
    25px 37px 23px 32px;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.ero-contact-card::after {
  content: "";

  position: absolute;

  inset: 4px;

  border: 1.5px solid rgba(197, 22, 46, .18);

  border-radius:
    26px 35px 24px 32px
    /
    36px 25px 34px 27px;

  transform: rotate(-.17deg);

  pointer-events: none;
}


.ero-contact-card--phone {
  background: #fff0ed;
}

.ero-contact-card--mail {
  background: #fff5df;
}

.ero-contact-card--address {
  background: #f1f5fb;
}


.ero-contact-card__label {
  position: relative;
  z-index: 2;

  margin-bottom: 18px;

  color: #c5162e;

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

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


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

  color: #2f1a17;

  font-size:
    clamp(21px, 2vw, 27px);

  line-height: 1.1;

  word-break: break-word;
}


.ero-contact-card p {
  position: relative;
  z-index: 2;

  max-width: 330px;

  margin:
    22px
    0
    0;

  color: #725d52;

  font-size: 14px;
  line-height: 1.65;
}


.ero-contact-card__arrow {
  position: absolute;
  z-index: 2;

  right: 27px;
  bottom: 23px;

  color: #c5162e;

  font-size: 33px;
  font-weight: 500;

  transition:
    transform .25s ease;
}


.ero-contact-card__location-mark {
  position: absolute;

  right: -5px;
  bottom: -9px;

  color: rgba(49, 88, 155, .08);

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

  font-size: 55px;

  transform: rotate(-5deg);
}


/* Hover */
@media (hover: hover) and (pointer: fine) {

  a.ero-contact-card:hover {
    transform: translateY(-7px);

    box-shadow:
      0 20px 38px rgba(49, 28, 20, .10);
  }

  a.ero-contact-card:hover
  .ero-contact-card__arrow {
    transform: translateX(6px);
  }

}


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

@media (max-width: 1000px) {

  .ero-contact-hero__frame {
    grid-template-columns: 1fr;
  }

  .ero-contact-direct__heading {
    grid-template-columns: 1fr;

    gap: 25px;
  }

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

}


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

@media (max-width: 650px) {

  .ero-contact-hero {
    padding:
      24px
      0
      70px;
  }

  .ero-contact-hero__frame {
    padding:
      38px
      22px
      22px;

    gap: 34px;

    border-radius: 28px;
  }

  .ero-contact-hero__title {
    font-size: 52px;
  }

  .ero-contact-hero__lead {
    font-size: 15px;
  }

  .ero-contact-hero__actions {
    align-items: stretch;
  }

  .ero-contact-hero__action {
    min-width: 0;

    width: 100%;
  }

  .ero-contact-hero__action strong {
    font-size: 16px;
  }

  .ero-contact-hero__map,
  .ero-contact-hero__map iframe {
    min-height: 350px;
  }

  .ero-contact-direct {
    padding:
      70px
      0;
  }

  .ero-contact-direct__heading h2 {
    font-size: 41px;
  }

  .ero-contact-direct__heading > p {
    font-size: 15px;
  }

  .ero-contact-direct__grid {
    grid-template-columns: 1fr;
  }

  .ero-contact-card {
    min-height: 230px;

    padding: 27px;
  }

}

/* =========================================================
   İLETİŞİM / ÜRÜN TALEP FORMU
   ========================================================= */

.ero-contact-form-section {
  padding:
    0
    0
    clamp(95px, 10vw, 150px);

  background: #ffffff;
}


.ero-contact-form__frame {
  position: relative;
  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(310px, .78fr)
    minmax(0, 1.22fr);

  gap:
    clamp(45px, 7vw, 100px);

  padding:
    clamp(42px, 6vw, 75px);

  background:
    linear-gradient(
      135deg,
      #2f1a17 0%,
      #3b1b18 55%,
      #4a1c19 100%
    );

  border-radius:
    40px 32px 46px 35px
    /
    33px 48px 31px 42px;
}


/* İç el çizimi çerçeve */
.ero-contact-form__frame::after {
  content: "";

  position: absolute;

  inset: 9px;

  border: 1.5px solid rgba(255, 190, 68, .25);

  border-radius:
    33px 45px 31px 41px
    /
    46px 32px 44px 34px;

  transform: rotate(.12deg);

  pointer-events: none;
}


/* =========================================================
   SOL ALAN
   ========================================================= */

.ero-contact-form__intro {
  position: relative;
  z-index: 2;
}


.ero-contact-form__eyebrow {
  margin:
    0
    0
    12px;

  color: #f2a12a;

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

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


.ero-contact-form__intro h2 {
  margin: 0;

  color: #ffffff;

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

  font-size:
    clamp(42px, 4.5vw, 65px);

  font-weight: 400;

  line-height: .96;
  letter-spacing: -.055em;
}


.ero-contact-form__intro h2 span {
  display: block;

  color: #f2a12a;
}


.ero-contact-form__lead {
  max-width: 510px;

  margin:
    26px
    0
    0;

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

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


/* =========================================================
   ADIMLAR
   ========================================================= */

.ero-contact-form__steps {
  display: flex;
  flex-direction: column;

  gap: 24px;

  margin-top: 42px;
}


.ero-contact-form__step {
  display: flex;
  align-items: flex-start;

  gap: 15px;
}


.ero-contact-form__step-mark {
  position: relative;

  flex: 0 0 auto;

  width: 19px;
  height: 19px;

  margin-top: 3px;

  border: 2px solid #f2a12a;

  border-radius:
    52% 48% 55% 45%
    /
    48% 54% 46% 52%;
}


.ero-contact-form__step-mark::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 5px;
  height: 5px;

  background: #f2a12a;

  border-radius: 50%;

  transform:
    translate(-50%, -50%);
}


.ero-contact-form__step strong {
  display: block;

  margin-bottom: 4px;

  color: #fff;

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


.ero-contact-form__step p {
  max-width: 400px;

  margin: 0;

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

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   E-POSTA
   ========================================================= */

.ero-contact-form__mail {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  margin-top: 42px;
}


.ero-contact-form__mail span {
  margin-bottom: 5px;

  color: #f2a12a;

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

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


.ero-contact-form__mail a {
  color: #ffffff;

  font-size: 15px;
  font-weight: 850;

  text-decoration: none;
}


/* =========================================================
   FORM PANEL
   ========================================================= */

.ero-contact-form__panel {
  position: relative;
  z-index: 3;

  padding:
    clamp(28px, 4vw, 45px);

  background: #fffaf4;

  border-radius:
    31px 24px 35px 27px
    /
    25px 37px 23px 32px;

  box-shadow:
    0 24px 50px
    rgba(20, 10, 8, .22);
}


.ero-contact-form {
  display: flex;
  flex-direction: column;

  gap: 21px;
}


.ero-contact-form__row {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 17px;
}


/* =========================================================
   FIELD
   ========================================================= */

.ero-contact-field {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.ero-contact-field label {
  color: #4a3029;

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

  letter-spacing: .025em;
}


.ero-contact-field label span {
  color: #c5162e;
}


.ero-contact-field input,
.ero-contact-field select,
.ero-contact-field textarea {
  width: 100%;

  border:
    1px solid
    rgba(99, 65, 52, .16);

  outline: none;

  background: #ffffff;

  color: #37221d;

  border-radius:
    16px 13px 18px 14px
    /
    14px 18px 13px 17px;

  font-family:
    "Nunito Sans",
    sans-serif;

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

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.ero-contact-field input,
.ero-contact-field select {
  height: 52px;

  padding:
    0
    15px;
}


.ero-contact-field textarea {
  min-height: 145px;

  padding:
    15px;

  resize: vertical;

  line-height: 1.6;
}


.ero-contact-field input::placeholder,
.ero-contact-field textarea::placeholder {
  color: #a69389;

  font-weight: 650;

  opacity: 1;
}


.ero-contact-field input:focus,
.ero-contact-field select:focus,
.ero-contact-field textarea:focus {
  border-color: rgba(197, 22, 46, .55);

  background: #fffefd;

  box-shadow:
    0 0 0 4px rgba(197, 22, 46, .07);
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.ero-contact-consent {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  cursor: pointer;
}


.ero-contact-consent input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


.ero-contact-consent__box {
  position: relative;

  flex: 0 0 auto;

  width: 20px;
  height: 20px;

  margin-top: 1px;

  background: #fff;

  border: 1.5px solid rgba(197, 22, 46, .38);

  border-radius:
    6px 5px 7px 5px
    /
    5px 7px 5px 6px;
}


.ero-contact-consent input:checked
+ .ero-contact-consent__box {
  background: #c5162e;

  border-color: #c5162e;
}


.ero-contact-consent input:checked
+ .ero-contact-consent__box::after {
  content: "";

  position: absolute;

  left: 6px;
  top: 3px;

  width: 5px;
  height: 9px;

  border:
    solid #ffffff;

  border-width:
    0 2px 2px 0;

  transform: rotate(45deg);
}


.ero-contact-consent input:focus-visible
+ .ero-contact-consent__box {
  box-shadow:
    0 0 0 4px
    rgba(197, 22, 46, .10);
}


.ero-contact-consent__text {
  color: #766158;

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

  line-height: 1.55;
}


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

.ero-contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 4px;
}


.ero-contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  min-height: 54px;

  padding:
    0
    24px;

  border: 0;

  background: #c5162e;

  color: #ffffff;

  border-radius:
    24px 20px 26px 21px
    /
    20px 27px 21px 25px;

  font-family:
    "Nunito Sans",
    sans-serif;

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

  cursor: pointer;

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


.ero-contact-form__submit span {
  font-size: 20px;

  transition:
    transform .25s ease;
}


.ero-contact-form__submit:hover {
  background: #a91126;

  transform:
    translateY(-3px);
}


.ero-contact-form__submit:hover span {
  transform:
    translateX(5px);
}


.ero-contact-form__footer p {
  margin: 0;

  color: #968177;

  font-size: 10px;
  font-weight: 750;
}


.ero-contact-form__footer p span {
  color: #c5162e;
}


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

@media (max-width: 980px) {

  .ero-contact-form__frame {
    grid-template-columns: 1fr;
  }

  .ero-contact-form__intro {
    max-width: 720px;
  }

}


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

@media (max-width: 650px) {

  .ero-contact-form-section {
    padding-bottom: 80px;
  }

  .ero-contact-form__frame {
    padding:
      35px
      20px
      20px;

    border-radius: 28px;
  }

  .ero-contact-form__intro h2 {
    font-size: 41px;
  }

  .ero-contact-form__lead {
    font-size: 15px;
  }

  .ero-contact-form__panel {
    padding:
      26px
      19px;
  }

  .ero-contact-form__row {
    grid-template-columns: 1fr;
  }

  .ero-contact-form__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .ero-contact-form__submit {
    width: 100%;
  }

  .ero-contact-form__footer p {
    text-align: center;
  }

}