/* ==========================================================================
   MEDYA FAKTÖR — REVİZELER
   --------------------------------------------------------------------------
   Bu dosya, orijinal WordPress temasından SONRA yüklenir ve yalnızca
   bilinçli olarak istenen tasarım değişikliklerini içerir.

   Neden ayrı dosya:
     public/theme/theme.css orijinal temanın birebir kopyası ve
     _reference/build-theme.mjs her çalıştığında yeniden üretiliyor.
     Oraya yazılan her değişiklik kaybolur. Revizeler burada durur.

   Her değişikliğin başına NEDEN yazıldığı not düşülür.
   ========================================================================== */

/* --------------------------------------------------------------------------
   REVİZE 1 — Yapışkan başlıktaki logo büyütüldü
   --------------------------------------------------------------------------
   Sorun: Sayfa aşağı kaydırılınca başlık yapışkan hale geliyor ve logo
   30 × 20 piksele düşüyordu. Logo görselinin %88'i şeffaf boşluk olduğu için
   bu ölçüde okunabilir yazı yalnızca ~24 × 2 piksel kalıyor, marka adı
   seçilemiyordu.

   Çözüm: Boşlukları kırpılmış logo (720 × 69, oran 10,4:1) yapışkan başlıkta
   arka plan olarak kullanılıyor. 200 piksel genişlikte yüksekliği 19 piksel
   oluyor; 80 piksellik başlığa rahatça sığıyor ve yazı sayfanın tepesindeki
   haliyle aynı büyüklükte kalıyor.

   Orijinal <img> gizlenmiyor, yalnızca saydamlaştırılıyor — böylece
   erişilebilirlik için alt metni ve bağlantı alanı korunuyor.
   -------------------------------------------------------------------------- */

.pxl-header-sticky .pxl-site-logo-link {
  display: inline-flex;
  align-items: center;
  width: 200px;
  height: 24px;
  background-image: url('/images/logo-medyafaktor.webp');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.pxl-header-sticky .pxl-site-logo-link img {
  /* Görsel görünmez ama alt metni ekran okuyucular için yerinde kalır */
  opacity: 0;
  width: 200px;
  height: 24px;
  max-width: none;
}

/* Küçük ekranlarda menü alanı daralmasın diye biraz kısaltılıyor */
@media (max-width: 767px) {
  .pxl-header-sticky .pxl-site-logo-link,
  .pxl-header-sticky .pxl-site-logo-link img {
    width: 150px;
    height: 18px;
  }
}

/* --------------------------------------------------------------------------
   REVİZE 2 — Hizmetlerimiz: yapışkan liste + değişen görsel
   --------------------------------------------------------------------------
   Eski düzen 5 hizmeti iki sütunlu düz kart ızgarasında gösteriyordu; altıncı
   hizmet sayfalamada kalıyor ve hiç görünmüyordu. Yeni düzende altı hizmetin
   tamamı numaralı bir liste halinde solda duruyor, sağdaki büyük görsel
   yapışkan kalıp aktif hizmete göre değişiyor.

   Renkler ve tipografi temanın kendi değişkenlerinden alınıyor
   (--primary-color, --primary-font ...), böylece sayfanın geri kalanıyla
   tutarlı kalıyor.
   -------------------------------------------------------------------------- */

.mf-hizmetler {
  padding: 40px 0 110px;
}

.mf-hizmetler__ic {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

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

/* --- sol sütun: numaralı liste --- */

.mf-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mf;
}

/* Bölümün zemini siyah (body arka planı), bu yüzden tüm metinler açık tonda.
   Ölçüm: komşu tema başlıkları rgb(255,255,255), gövde zemini rgb(0,0,0). */

.mf-liste__oge {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mf-liste__oge:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mf-liste__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 30px 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mf-liste__oge.aktif .mf-liste__link {
  padding-left: 14px;
}

.mf-liste__no {
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease;
}

.mf-liste__oge.aktif .mf-liste__no {
  color: var(--primary-color, #FA1842);
}

.mf-liste__govde {
  display: block;
}

.mf-liste__baslik {
  display: block;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease;
}

.mf-liste__oge.aktif .mf-liste__baslik,
.mf-liste__link:hover .mf-liste__baslik,
.mf-liste__link:focus-visible .mf-liste__baslik {
  color: var(--primary-color, #FA1842);
}

.mf-liste__ozet {
  display: block;
  margin-top: 10px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
}

.mf-liste__devam {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-color, #FA1842);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.mf-liste__devam::after {
  content: ' →';
}

.mf-liste__oge.aktif .mf-liste__devam {
  opacity: 1;
  transform: translateY(0);
}

/* Masaüstünde her öğenin kendi görseli gizli — sağdaki yapışkan görsel var */
.mf-liste__gorsel {
  display: block;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 14px;
}

.mf-liste__gorsel img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1025px) {
  .mf-liste__gorsel {
    display: none;
  }
}

/* --- sağ sütun: yapışkan görsel --- */

.mf-hizmetler__gorsel-alan {
  display: none;
}

@media (min-width: 1025px) {
  .mf-hizmetler__gorsel-alan {
    display: block;
  }

  .mf-hizmetler__yapiskan {
    position: sticky;
    top: 120px;
  }
}

.mf-hizmetler__cerceve {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 919 / 632;
  background: #121212;
}

.mf-hizmetler__cerceve img,
.mf-hizmetler__cerceve canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* WebGL efekti kurulduğunda kendi canvas'ını ekler; alttaki <img> gizlenir */
.mf-hizmetler__cerceve canvas + img,
.mf-hizmetler__cerceve img + canvas ~ img {
  display: none;
}

.mf-hizmetler__cerceve canvas {
  position: absolute;
  inset: 0;
}

.mf-hizmetler__etiket {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 0;
  font-family: var(--heading-font, 'Sora'), sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.mf-hizmetler__etiket-no {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-color, #FA1842);
}

/* Hareket azaltma tercihi açıkken geçişler kapanır */
@media (prefers-reduced-motion: reduce) {
  .mf-liste__link,
  .mf-liste__devam,
  .mf-liste__baslik,
  .mf-liste__no {
    transition: none;
  }
}