/* =========================================================
   EROĞLU TİCARET - HAKKIMIZDA
   ========================================================= */

.ero-about {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: #2f1a17;
  padding-block: clamp(90px, 10vw, 155px);
}

.ero-about__inner {
  position: relative;
}

/* Üst küçük başlık */
.ero-about__eyebrow {
  margin: 0 0 22px;

  color: #c43a1b;

  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;

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

/* Büyük ana başlık */
.ero-about__title {
  max-width: 1050px;
  margin: 0;

  color: #2f1a17;

  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(46px, 6.5vw, 94px);
  font-weight: 400;

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

.ero-about__title span {
  display: block;
  color: #d75b24;
}

/* Açıklama */
.ero-about__content {
  display: grid;
  grid-template-columns: 1.05fr .95fr;

  gap: clamp(50px, 8vw, 125px);

  margin-top: clamp(55px, 7vw, 95px);
  padding-top: 38px;

  border-top: 1px solid rgba(75, 45, 30, .13);
}

.ero-about__lead p {
  max-width: 690px;
  margin: 0;

  color: #3a251c;

  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 700;

  line-height: 1.35;
  letter-spacing: -.03em;
}

.ero-about__text {
  display: grid;
  gap: 22px;
}

.ero-about__text p {
  margin: 0;

  color: #6c584d;

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

/* Özellikler */
.ero-about__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 22px;

  margin-top: clamp(70px, 8vw, 110px);
}

.ero-about__feature {
  position: relative;

  min-height: 245px;

  padding:
    42px
    32px
    34px;

  background: #faf4ee;

  border-radius:
    34px 27px 31px 24px
    /
    28px 35px 25px 32px;
}

.ero-about__feature::after {
  content: "";
  position: absolute;

  inset: 6px -4px -5px 4px;

  border: 1px solid rgba(211, 83, 31, .35);

  border-radius:
    29px 35px 25px 33px
    /
    34px 27px 36px 26px;

  transform: rotate(.5deg);

  pointer-events: none;
}

/* Küçük el çizimi işareti */
.ero-about__feature-mark {
  position: relative;

  display: block;

  width: 42px;
  height: 42px;

  margin-bottom: 34px;

  border: 2px solid #d54d21;

  border-radius:
    47% 53% 46% 54%
    /
    56% 44% 55% 45%;

  transform: rotate(-5deg);
}

.ero-about__feature-mark::after {
  content: "";

  position: absolute;

  width: 12px;
  height: 12px;

  top: 50%;
  left: 50%;

  border-radius: 50%;

  background: #ed8a29;

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

.ero-about__feature h3 {
  margin: 0 0 14px;

  color: #371f17;

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

  letter-spacing: -.025em;
}

.ero-about__feature p {
  margin: 0;

  color: #725e53;

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

/* Alt aksiyonlar */
.ero-about__actions {
  display: flex;
  align-items: center;

  gap: 28px;

  margin-top: 55px;
}

.ero-about__link,
.ero-about__contact {
  position: relative;

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

  min-height: 50px;

  padding-inline: 23px;

  color: #9d301a;

  font-weight: 900;
}

.ero-about__link {
  gap: 12px;
}

.ero-about__link span {
  font-size: 22px;

  transition: transform .25s ease;
}

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

/* İletişim - elde çizilmiş çerçeve */
.ero-about__contact::after {
  content: "";

  position: absolute;

  inset: -2px -5px;

  border: 2px solid #c63e1d;

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

  transform: rotate(-1deg);
}

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

  position: absolute;

  inset: 1px -3px -4px 2px;

  border: 1px solid rgba(238, 125, 38, .7);

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

  transform: rotate(1.3deg);
}

/* Responsive */
@media (max-width: 900px) {
  .ero-about__content {
    grid-template-columns: 1fr;
    gap: 35px;
  }

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

  .ero-about__feature {
    min-height: auto;
  }
}

@media (max-width: 600px) {
  .ero-about {
    padding-block: 80px;
  }

  .ero-about__title {
    font-size: clamp(42px, 13vw, 58px);
  }

  .ero-about__lead p {
    font-size: 22px;
  }

  .ero-about__features {
    margin-top: 65px;
  }

  .ero-about__feature {
    padding: 32px 25px;
  }

  .ero-about__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }
}

/* =========================================================
   HAKKIMIZDA KARTLARI - KALIN EL ÇİZİMİ ÇERÇEVE
   ========================================================= */

.ero-about__feature {
  background: transparent !important;
  border: 0 !important;

  border-radius:
    34px 27px 31px 24px
    /
    28px 35px 25px 32px;
}

/* Ana kalın çizgi */
.ero-about__feature::after {
  content: "";
  position: absolute;

  inset: 0;

  border: 4px solid #c3381c;

  border-radius:
    34px 27px 31px 24px
    /
    28px 35px 25px 32px;

  transform: rotate(-0.6deg);

  pointer-events: none;
}

/* İkinci kaymış çizgi */
.ero-about__feature::before {
  content: "";
  position: absolute;

  inset: 5px -5px -5px 5px;

  border: 2px solid #f28a2a;

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

  transform: rotate(0.8deg);

  pointer-events: none;
}

/* Kart içeriği çizgilerin üstünde kalsın */
.ero-about__feature > * {
  position: relative;
  z-index: 2;
}