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

   Hero yüksekliği yüklenen görselin
   kendi en-boy oranına göre otomatik belirlenir.
========================================================== */

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #f5f1ec;

  isolation: isolate;
}


/* ==========================================================
   HERO MEDYA ALANI

   Artık absolute değil.
   Hero yüksekliğini görsel belirleyecek.
========================================================== */

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__media {
  position: relative;

  z-index: 0;

  width: 100%;

  overflow: hidden;
}


/* ==========================================================
   HERO GÖRSELİ

   Görsel kendi oranını korur.
   Örneğin:

   1920x1080 yüklenirse → 16:9
   1920x800 yüklenirse  → kendi oranı
   1080x1920 yüklenirse → 9:16

   Kod herhangi bir oran dayatmaz.
========================================================== */

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__asset {
  display: block;

  width: 100%;
  height: auto;
}


/* Masaüstü görsel */

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__asset--desktop {
  display: block;
}


/* Mobil görsel masaüstünde gizli */

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__asset--mobile {
  display: none;
}


/* ==========================================================
   OVERLAY / KAPLAMA
========================================================== */

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


/* ==========================================================
   HERO İÇERİK ALANI
========================================================== */

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__container {
  position: absolute;

  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  max-width: 1360px;

  margin: 0 auto;

  padding:
    clamp(32px, 3.75vw, 72px)
    clamp(24px, 2.5vw, 48px);

  box-sizing: border-box;

  display: flex;

  align-items: center;

  pointer-events: none;
}


/* ==========================================================
   METİN ALANI
========================================================== */

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__content {
  width: 100%;

  max-width: 620px;
}


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

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__subtitle {
  margin:
    0
    0
    14px;

  font-family: inherit;

  font-size:
    clamp(
      14px,
      1.2vw,
      18px
    );

  font-weight: 500;

  line-height: 1.5;

  color: #ffffff;
}


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

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__title {
  margin: 0;

  font-family: inherit;

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

  font-weight: 600;

  line-height: 1.04;

  letter-spacing: -0.035em;

  color: #ffffff;
}


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

.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__button {
  position: absolute;

  z-index: 3;

  left: var(--button-x);
  top: var(--button-y);

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

  width: var(--button-width);
  height: var(--button-height);

  box-sizing: border-box;

  display: inline-flex;

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

  text-align: center;

  padding:
    0
    24px;

  border-radius: 999px;

  font-family: inherit;

  font-size: 15px;

  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}


.cc_tb32aqjd_KcalaMIuwH .mappyco-hero__button:hover {
  transform:
    translate(
      -50%,
      -50%
    )
    translateY(-2px);

  opacity: 0.9;
}


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

@media (max-width: 767px) {

  .cc_tb32aqjd_KcalaMIuwH .mappyco-hero {
    width: 100%;
  }


  /* Masaüstü görsel gizlenir */

  .cc_tb32aqjd_KcalaMIuwH .mappyco-hero__asset--desktop {
    display: none;
  }


  /* Mobil görsel gösterilir ve
     kendi oranı Hero yüksekliğini belirler */

  .cc_tb32aqjd_KcalaMIuwH .mappyco-hero__asset--mobile {
    display: block;

    width: 100%;
    height: auto;
  }


  /* Mobil içerik */

  .cc_tb32aqjd_KcalaMIuwH .mappyco-hero__container {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding:
      40px
      24px
      52px;

    box-sizing: border-box;

    align-items: flex-end;
  }


  .cc_tb32aqjd_KcalaMIuwH .mappyco-hero__content {
    width: 100%;

    max-width: 100%;
  }


  /* Mobil başlık */

  .cc_tb32aqjd_KcalaMIuwH .mappyco-hero__title {
    font-size:
      clamp(
        34px,
        10vw,
        50px
      );
  }


  /* Mobil alt başlık */

  .cc_tb32aqjd_KcalaMIuwH .mappyco-hero__subtitle {
    font-size: 15px;
  }


  /* Mobil buton */

  .cc_tb32aqjd_KcalaMIuwH .mappyco-hero__button {
    left: var(--mobile-button-x);
    top: var(--mobile-button-y);

    width: var(--mobile-button-width);
    height: var(--mobile-button-height);

    padding:
      0
      20px;

    font-size: 14px;
  }
}


/* ==========================================================
   HAREKET AZALTMA
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .cc_tb32aqjd_KcalaMIuwH .mappyco-hero__button {
    transition: none;
  }
}