/* =========================================================
   HİZMET BÖLGELERİ SAYFASI
   ========================================================= */

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

.ero-regions-hero {
  position: relative;
  overflow: hidden;

  padding:
    clamp(40px, 5vw, 72px)
    0
    clamp(90px, 9vw, 130px);

  background: #f7efe7;
}


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

.ero-regions-hero__frame {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, .82fr)
    minmax(520px, 1.18fr);

  align-items: center;

  gap:
    clamp(45px, 6vw, 95px);

  min-height: 640px;

  padding:
    clamp(48px, 5vw, 74px);

  background: #fffaf4;

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

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


/* El çizimi kırmızı ana hat */
.ero-regions-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;
}


/* Turuncu ikinci çizgi */
.ero-regions-hero__frame::after {
  content: "";

  position: absolute;

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

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

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

  transform: rotate(.18deg);

  pointer-events: none;
}


/* =========================================================
   SOL METİN
   ========================================================= */

.ero-regions-hero__content {
  position: relative;
  z-index: 4;

  max-width: 600px;
}

.ero-regions-hero__eyebrow {
  margin:
    0
    0
    15px;

  color: #c5162e;

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

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

.ero-regions-hero__title {
  margin: 0;

  color: #2f1a17;

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

  font-size:
    clamp(55px, 6.2vw, 94px);

  font-weight: 400;

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

.ero-regions-hero__title span {
  display: block;

  color: #c5162e;
}

.ero-regions-hero__lead {
  max-width: 590px;

  margin:
    29px
    0
    0;

  color: #68544a;

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

  font-weight: 650;

  line-height: 1.75;
}


/* =========================================================
   ETİKETLER
   ========================================================= */

.ero-regions-hero__facts {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 32px;
}

.ero-regions-hero__facts span {
  display: inline-flex;
  align-items: center;

  min-height: 36px;

  padding:
    0
    14px;

  background: #fff1e7;

  color: #9e2b19;

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

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

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

.ero-regions-hero__facts span:nth-child(2) {
  background: #fff4d8;
  color: #8b5710;

  border-color: rgba(224, 148, 30, .27);
}


/* =========================================================
   KÜÇÜK AÇIKLAMA
   ========================================================= */

.ero-regions-hero__note {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-top: 30px;
}

.ero-regions-hero__note-mark {
  flex: 0 0 auto;

  width: 31px;
  height: 5px;

  background: #f28a2a;

  border-radius: 999px;

  transform: rotate(-3deg);
}

.ero-regions-hero__note p {
  margin: 0;

  color: #826b5e;

  font-size: 12px;
  font-weight: 800;
}


/* =========================================================
   SAĞ HARİTA
   ========================================================= */

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

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

  min-height: 500px;
}


/* Harita arkasındaki hafif grafik */
.ero-regions-hero__map-glow {
  position: absolute;

  width: 440px;
  height: 370px;

  left: 50%;
  top: 50%;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(242, 138, 42, .20) 0%,
      rgba(197, 22, 46, .08) 52%,
      transparent 72%
    );

  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    rotate(-7deg);

  filter: blur(6px);
}

.ero-regions-hero__map-image {
  position: relative;
  z-index: 2;

  display: block;

  width: min(100%, 680px);
  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0
      22px
      24px
      rgba(59, 31, 20, .13)
    );

  transform:
    rotate(.3deg)
    scale(1.03);
}


/* Efeler etiketi */
.ero-regions-hero__map-label {
  position: absolute;
  z-index: 4;

  right: 12px;
  bottom: 12px;

  display: flex;
  flex-direction: column;

  padding:
    11px
    16px;

  background: rgba(255, 250, 244, .95);

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

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

  box-shadow:
    0 8px 20px
    rgba(45, 25, 17, .09);

  transform: rotate(2deg);
}

.ero-regions-hero__map-label span {
  color: #c5162e;

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

  letter-spacing: .13em;
}

.ero-regions-hero__map-label strong {
  color: #2f1a17;

  font-size: 18px;
  line-height: 1.1;
}


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

@media (max-width: 1050px) {

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

    min-height: auto;
  }

  .ero-regions-hero__content {
    max-width: 760px;
  }

  .ero-regions-hero__map {
    min-height: 500px;
  }

}


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

@media (max-width: 600px) {

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

  .ero-regions-hero__frame {
    padding:
      38px
      22px
      24px;

    gap: 30px;

    border-radius: 28px;
  }

  .ero-regions-hero__title {
    font-size: 49px;
  }

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

  .ero-regions-hero__map {
    min-height: 350px;
  }

  .ero-regions-hero__map-image {
    width: 115%;

    max-width: none;
  }

  .ero-regions-hero__map-label {
    right: 0;
    bottom: 2px;
  }

}

/* =========================================================
   HİZMET BÖLGELERİ HERO - METİN / HARİTA AYRIMI
   ========================================================= */

.ero-regions-hero__frame {
  grid-template-columns:
    minmax(0, .94fr)
    minmax(500px, 1.06fr) !important;

  gap: clamp(60px, 7vw, 105px) !important;
}

.ero-regions-hero__content {
  min-width: 0 !important;
  max-width: 620px !important;
}

.ero-regions-hero__title {
  font-size: clamp(52px, 5.1vw, 78px) !important;
  line-height: .93 !important;
  letter-spacing: -.055em !important;
}

.ero-regions-hero__map {
  min-width: 0 !important;
}

/* Haritayı birkaç piksel daha sağa al */
.ero-regions-hero__map-image {
  transform:
    translateX(12px)
    rotate(.3deg)
    scale(1.03) !important;
}


/* Tablet düzenini koru */
@media (max-width: 1050px) {
  .ero-regions-hero__frame {
    grid-template-columns: 1fr !important;
  }

  .ero-regions-hero__map-image {
    transform:
      rotate(.3deg)
      scale(1.03) !important;
  }
}


/* =========================================================
   AYDIN HİZMET BÖLGELERİ
   ========================================================= */

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

  background: #ffffff;
}


/* =========================================================
   BAŞLIK
   ========================================================= */

.ero-regions-list__heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(300px, .92fr);

  align-items: end;

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

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

.ero-regions-list__eyebrow {
  margin:
    0
    0
    12px;

  color: #c5162e;

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

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

.ero-regions-list__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-regions-list__heading h2 span {
  display: block;

  color: #c5162e;
}

.ero-regions-list__intro {
  max-width: 520px;

  margin: 0;

  color: #6b574c;

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


/* =========================================================
   İLÇE GRID
   ========================================================= */

.ero-regions-list__grid {
  display: grid;

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

  gap: 18px;
}


/* =========================================================
   İLÇE KARTI
   ========================================================= */

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

  display: flex;
  align-items: flex-start;

  gap: 16px;

  min-height: 165px;

  padding:
    24px
    21px;

  background: #faf5ef;

  border-radius:
    25px 20px 28px 22px
    /
    21px 29px 20px 27px;
}

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

  position: absolute;

  inset: 3px;

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

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

  transform: rotate(-.15deg);

  pointer-events: none;
}


/* =========================================================
   KONUM İŞARETİ
   ========================================================= */

.ero-region-card__pin {
  position: relative;

  flex: 0 0 auto;

  width: 34px;
  height: 42px;

  margin-top: 2px;
}

.ero-region-card__pin::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 0;

  width: 26px;
  height: 26px;

  background: #c5162e;

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

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

.ero-region-card__pin span {
  position: absolute;
  z-index: 2;

  left: 50%;
  top: 8px;

  width: 8px;
  height: 8px;

  background: #fffaf4;

  border-radius: 50%;

  transform: translateX(-50%);
}


/* =========================================================
   KART METNİ
   ========================================================= */

.ero-region-card__content {
  position: relative;
  z-index: 2;
}

.ero-region-card__content h3 {
  margin:
    0
    0
    9px;

  color: #2f1a17;

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

  line-height: 1.05;
}

.ero-region-card__content p {
  margin: 0;

  color: #715d52;

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


/* =========================================================
   EFELER ÖZEL KART
   ========================================================= */

.ero-region-card--featured {
  grid-column: span 2;

  background:
    linear-gradient(
      135deg,
      #a9142b 0%,
      #c5162e 55%,
      #e34d26 100%
    );
}

.ero-region-card--featured::after {
  border-color: rgba(255, 255, 255, .35);
}

.ero-region-card--featured .ero-region-card__pin::before {
  background: #ffc047;
}

.ero-region-card--featured
.ero-region-card__pin span {
  background: #9d1828;
}

.ero-region-card--featured h3 {
  color: #ffffff;

  font-size: 28px;
}

.ero-region-card--featured p {
  max-width: 430px;

  color: rgba(255, 255, 255, .88);
}

.ero-region-card__badge {
  display: inline-flex;
  align-items: center;

  min-height: 25px;

  margin-bottom: 10px;

  padding:
    0
    9px;

  background: #ffc047;

  color: #77151d;

  border-radius: 999px;

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

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


/* =========================================================
   ALT NOT
   ========================================================= */

.ero-regions-list__foot {
  display: flex;
  align-items: center;

  gap: 15px;

  max-width: 800px;

  margin-top: 45px;
}

.ero-regions-list__foot-line {
  flex: 0 0 auto;

  width: 40px;
  height: 5px;

  background: #f28a2a;

  border-radius: 999px;

  transform: rotate(-2deg);
}

.ero-regions-list__foot p {
  margin: 0;

  color: #786359;

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

  line-height: 1.6;
}


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

@media (max-width: 1050px) {

  .ero-regions-list__heading {
    grid-template-columns: 1fr;

    gap: 24px;
  }

  .ero-regions-list__grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


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

@media (max-width: 700px) {

  .ero-regions-list {
    padding:
      70px
      0;
  }

  .ero-regions-list__heading h2 {
    font-size: 41px;
  }

  .ero-regions-list__intro {
    font-size: 15px;
  }

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

  .ero-region-card,
  .ero-region-card--featured {
    grid-column: auto;

    min-height: auto;
  }

  .ero-region-card--featured h3 {
    font-size: 25px;
  }

}

/* =========================================================
   HİZMET BÖLGELERİ HERO - MOBİL TEMİZ DÜZEN
   ========================================================= */

@media (max-width: 600px) {

  .ero-regions-hero__frame {
    grid-template-columns: minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;

    padding:
      36px
      18px
      22px !important;

    gap: 28px !important;

    overflow: hidden !important;
  }


  /* SOL METİN */
  .ero-regions-hero__content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ero-regions-hero__title {
    width: 100% !important;
    max-width: 100% !important;

    font-size: 42px !important;
    line-height: .94 !important;
    letter-spacing: -.05em !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .ero-regions-hero__title span {
    display: block !important;
  }

  .ero-regions-hero__lead {
    width: 100% !important;
    max-width: 100% !important;

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

  .ero-regions-hero__facts {
    width: 100% !important;
    max-width: 100% !important;

    gap: 7px !important;
  }

  .ero-regions-hero__facts span {
    min-height: 32px !important;

    padding:
      0
      10px !important;

    font-size: 9px !important;
  }


  /* ALT KÜÇÜK AÇIKLAMA */
  .ero-regions-hero__note {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ero-regions-hero__note p {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }


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

  .ero-regions-hero__map {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 0 !important;

    overflow: hidden !important;

    padding:
      4px
      0
      12px !important;
  }

  .ero-regions-hero__map-image {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 auto !important;

    transform: none !important;

    object-fit: contain !important;

    filter:
      drop-shadow(
        0
        12px
        14px
        rgba(59, 31, 20, .10)
      ) !important;
  }


  /* Efeler etiketi görselin dışına çıkmasın */
  .ero-regions-hero__map-label {
    right: 7px !important;
    bottom: 8px !important;

    padding:
      8px
      11px !important;
  }

  .ero-regions-hero__map-label strong {
    font-size: 14px !important;
  }

}


/* =========================================================
   360PX / 320PX
   ========================================================= */

@media (max-width: 380px) {

  .ero-regions-hero__frame {
    padding:
      32px
      15px
      18px !important;
  }

  .ero-regions-hero__eyebrow {
    font-size: 9px !important;
  }

  .ero-regions-hero__title {
    font-size: 37px !important;
    line-height: .95 !important;
  }

  .ero-regions-hero__lead {
    font-size: 13.5px !important;
  }

}