/* ==========================================================================
   HİZMET DETAY SAYFASI — yeniden tasarım
   --------------------------------------------------------------------------
   Eski sayfa dört düz Elementor bölümünden oluşuyordu ve altı hizmetin
   tamamı aynı iki görseli kullanıyordu. Bu düzende her hizmet kendi
   görseliyle açılıyor, içerik numaralandırılmış bölümlere ayrılıyor.

   Renkler ve tipografi temanın kendi değişkenlerinden alınıyor:
     --primary-color   #FA1842
     --secondary-color #010101
     --heading-font    Sora
     --primary-font    Kanit
   ========================================================================== */

/* Not: Temanın başlık bandı (#pxl-post-title-builder) bu sayfalarda CSS ile
   gizlenmiyor, markup'tan tamamen siliniyor — bkz. portfolio/[slug]/page.tsx
   içindeki `kaldir` seçeneği. Gizlenseydi sayfada ikinci bir <h1> kalırdı. */

.mf-detay {
  --mf-turuncu: var(--primary-color, #FA1842);
  --mf-siyah: #050505;
  --mf-krem: #f9f3ee;
  --mf-cizgi-koyu: rgba(255, 255, 255, 0.13);
  --mf-cizgi-acik: rgba(0, 0, 0, 0.1);

  font-family: var(--primary-font, 'Kanit'), sans-serif;
}

.mf-kap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* --------------------------------------------------------------------------
   Belirme animasyonu (Belir bileşeni)
   -------------------------------------------------------------------------- */

.mf-belir {
  opacity: 0;
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.mf-belir--alt {
  transform: translateY(28px);
}
.mf-belir--sol {
  transform: translateX(-28px);
}
.mf-belir--sag {
  transform: translateX(28px);
}

.mf-belir.gorunur {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .mf-belir {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Ortak parçalar
   -------------------------------------------------------------------------- */

.mf-etiket {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.mf-etiket--acik {
  color: rgba(255, 255, 255, 0.5);
}

.mf-etiket__no {
  color: var(--mf-turuncu);
  font-weight: 700;
}

.mf-bolum-baslik {
  margin: 0;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.14;
  color: #fff;
  max-width: 20ch;
}

.mf-bolum-baslik--koyu {
  color: var(--secondary-color, #010101);
}

.mf-bolum-baslik em {
  font-style: normal;
  color: var(--mf-turuncu);
}

.mf-bolum-giris {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.62);
}

.mf-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    color 0.3s ease;
}

.mf-dugme:hover,
.mf-dugme:focus-visible {
  transform: translateY(-3px);
}

.mf-dugme--dolu {
  background: var(--mf-turuncu);
  color: #fff;
}

.mf-dugme--cizgi {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

.mf-dugme--cizgi:hover {
  border-color: var(--mf-turuncu);
  color: var(--mf-turuncu);
}

/* --------------------------------------------------------------------------
   KAPAK
   -------------------------------------------------------------------------- */

.mf-detay__kapak {
  position: relative;
  overflow: hidden;
  background: var(--mf-siyah);
  padding: 190px 0 0;
}

/* Arka plandaki dev hizmet numarası */
.mf-detay__filigran {
  position: absolute;
  top: 40px;
  right: -3vw;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: clamp(190px, 30vw, 460px);
  font-weight: 800;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  user-select: none;
}

.mf-detay__iz {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
}

.mf-detay__iz a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.mf-detay__iz a:hover {
  color: var(--mf-turuncu);
}

.mf-detay__iz [aria-current] {
  color: rgba(255, 255, 255, 0.78);
}

.mf-detay__kapak .mf-etiket {
  color: rgba(255, 255, 255, 0.5);
}

.mf-detay__baslik {
  margin: 0;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: clamp(38px, 6.6vw, 92px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 16ch;
}

.mf-detay__vaat {
  margin: 26px 0 0;
  max-width: 54ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
}

.mf-detay__eylem {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.mf-detay__kapak-gorsel {
  width: 100%;
  max-width: 1320px;
  margin: 80px auto -110px;
  padding-inline: 20px;
}

.mf-detay__kapak-gorsel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 919 / 480;
  object-fit: cover;
  border-radius: 22px;
}

/* --------------------------------------------------------------------------
   Bloklar
   -------------------------------------------------------------------------- */

.mf-blok {
  padding: 150px 0 110px;
}

.mf-blok--acik {
  background: var(--mf-krem);
}

.mf-blok--koyu {
  background: var(--mf-siyah);
}

/* 01 — Hakkında: yapışkan etiket + gövde */

.mf-ikili {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 1025px) {
  .mf-ikili {
    grid-template-columns: 260px 1fr;
    gap: 70px;
    align-items: start;
  }

  .mf-ikili__yan {
    position: sticky;
    top: 130px;
  }
}

.mf-one-cikan {
  margin: 0;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--secondary-color, #010101);
}

.mf-alt-baslik {
  margin: 54px 0 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.mf-kapsam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 700px) {
  .mf-kapsam {
    grid-template-columns: 1fr 1fr;
    column-gap: 46px;
  }
}

.mf-kapsam__oge {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--mf-cizgi-acik);
  font-size: 16px;
  line-height: 1.55;
  color: #2d2d2d;
  transition: color 0.25s ease;
}

.mf-kapsam__oge:hover {
  color: var(--mf-turuncu);
}

.mf-kapsam__no {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mf-turuncu);
}

/* 02 — Süreç: ilerleme çizgili adımlar */

.mf-adimlar {
  list-style: none;
  margin: 70px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: adim;
}

@media (min-width: 900px) {
  .mf-adimlar {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
}

.mf-adim {
  position: relative;
  padding: 44px 34px 44px 0;
  border-top: 1px solid var(--mf-cizgi-koyu);
}

@media (min-width: 900px) {
  .mf-adim {
    padding: 44px 34px 0 0;
  }

  /* Adımlar arasındaki dikey ayraç */
  .mf-adim + .mf-adim {
    padding-left: 34px;
    border-left: 1px solid var(--mf-cizgi-koyu);
  }
}

/* Üstteki ilerleme noktası */
.mf-adim::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mf-turuncu);
}

@media (min-width: 900px) {
  .mf-adim + .mf-adim::before {
    left: 34px;
  }
}

.mf-adim__no {
  display: block;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mf-turuncu);
}

.mf-adim__baslik {
  margin: 16px 0 12px;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.mf-adim__metin {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.58);
}

/* 03 — Yaklaşım: kayan ızgara */

.mf-ilkeler {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 860px) {
  .mf-ilkeler {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }

  /* Sağ sütun aşağı kayarak durağan ızgara hissini kırar */
  .mf-ilke:nth-child(even) {
    transform: translateY(38px);
  }

  .mf-belir.mf-ilke:nth-child(even) {
    transform: translateY(66px);
  }

  .mf-belir.mf-ilke:nth-child(even).gorunur {
    transform: translateY(38px);
  }
}

.mf-ilke {
  position: relative;
  padding: 40px 34px;
  background: #fff;
  border-radius: 18px;
}

.mf-ilke__isaret {
  position: absolute;
  top: 14px;
  right: 26px;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: 74px;
  line-height: 1;
  color: rgba(250, 24, 66, 0.14);
  pointer-events: none;
}

.mf-ilke p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #4b4b4b;
}

/* --------------------------------------------------------------------------
   Diğer hizmetler + gezinme
   -------------------------------------------------------------------------- */

.mf-diger {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr;
}

.mf-diger__oge {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 0;
  border-top: 1px solid var(--mf-cizgi-koyu);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.62);
  transition:
    color 0.28s ease,
    padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mf-diger__oge:last-child {
  border-bottom: 1px solid var(--mf-cizgi-koyu);
}

.mf-diger__oge:hover,
.mf-diger__oge:focus-visible {
  color: var(--mf-turuncu);
  padding-left: 14px;
}

.mf-diger__no {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}

.mf-diger__oge:hover .mf-diger__no {
  color: var(--mf-turuncu);
}

.mf-diger__baslik {
  flex: 1;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
}

.mf-diger__ok {
  flex: none;
  font-size: 20px;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.mf-diger__oge:hover .mf-diger__ok {
  opacity: 1;
  transform: translateX(0);
}

.mf-gezinme {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 60px;
}

@media (min-width: 700px) {
  .mf-gezinme {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.mf-gezinme__yan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 30px;
  border: 1px solid var(--mf-cizgi-koyu);
  border-radius: 16px;
  text-decoration: none;
  transition:
    border-color 0.28s ease,
    background-color 0.28s ease;
}

.mf-gezinme__yan:hover {
  border-color: var(--mf-turuncu);
  background: rgba(250, 24, 66, 0.06);
}

.mf-gezinme__yan--sag {
  text-align: right;
}

.mf-gezinme__yon {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mf-turuncu);
}

.mf-gezinme__ad {
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

/* --------------------------------------------------------------------------
   İletişim çağrısı
   -------------------------------------------------------------------------- */

.mf-cagri {
  padding: 120px 0;
  background: var(--mf-turuncu);
  text-align: center;
}

.mf-cagri__baslik {
  margin: 0;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.mf-cagri__baslik em {
  font-style: normal;
  color: var(--mf-siyah);
}

.mf-cagri__metin {
  margin: 20px auto 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.mf-cagri .mf-detay__eylem {
  justify-content: center;
}

.mf-cagri .mf-dugme--dolu {
  background: #fff;
  color: var(--mf-siyah);
}

.mf-cagri .mf-dugme--cizgi {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.mf-cagri .mf-dugme--cizgi:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Küçük ekran düzeltmeleri
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .mf-detay__kapak {
    padding-top: 140px;
  }

  .mf-detay__kapak-gorsel {
    margin: 54px auto -70px;
  }

  .mf-blok {
    padding: 110px 0 80px;
  }

  .mf-cagri {
    padding: 90px 0;
  }
}