/* ============================================================================
   HEP ÇİÇEK PEYZAJ — HAREKET KATMANI  ("Toprak ve Mürekkep" / 8 Ağu 2026)
   ============================================================================
   Bu dosya stil.css'ten SONRA yüklenir ve onu hiç değiştirmez; yalnız üstüne
   hareket bindirir. Tek satır bağlanır, tek satır sökülür.

   ── NEDEN BU SÜRELER, NEDEN BU EĞRİLER ────────────────────────────────────
   Peyzaj sabırlı bir iş: bir bahçe teslim gününde değil ikinci yılında belli
   eder kendini. Arayüzün hareketi de bunu söylemeli. Hızlı, zıplayan, geri
   sekip yerine oturan (back/elastic) hareket ucuz ve "şablon" durur; bu yüzden
   bu dosyada HİÇBİR YERDE overshoot yok — her eğri hedefe yaklaşıp durur.

   • Ana eğri  cubic-bezier(0.16, 1, 0.3, 1)  — stil.css'in zaten kullandığı
     üstel-çıkış eğrisi. Yeni bir eğri uydurmak yerine sitenin kendi hareket
     dilini uzatıyoruz: hızlı başlar, sona doğru yumuşayarak yerleşir. Bir
     nesnenin "yerine oturması" fiziksel olarak böyle görünür.
   • Giriş süreleri 520–880 ms. 300 ms'in altı arayüz hareketidir (bir düğme
     tepkisi), 700 ms civarı ANLATIM hareketidir (bir bölümün açılması). Burada
     amaç ikincisi. 1 sn üstü ise ziyaretçiyi bekletmeye başlar — sınır orası.
   • Kademe (stagger) adımı 45–140 ms. 45 ms'in altında sıra algılanmaz, hepsi
     birlikte gelmiş gibi olur; 150 ms'in üstünde son öğe geç kalır ve liste
     "yavaş yükleniyor" hissi verir. Öğe sayısı arttıkça adım kısalır:
     10 bölge etiketi 45 ms, 2 karşılaştırma karesi 140 ms.
   • Ken burns 34 sn / %6,2 ölçek. Tarayıcıda ölçüldü: ortalama %0,18/sn,
     eğrinin en hızlı yerinde %0,32/sn. İkisi de gözün hareket eşiğinin (kabaca
     %1/sn) belirgin altında — izleyici kaymayı fark etmez, yalnız fotoğrafın
     "canlı" olduğunu hisseder. Aynı yolu 8–10 sn'de almak gözle görülür kayma
     yapar ve stok video gibi durur.

   ── SERT KURALLAR (bu dosyada ihlal edilmiyor) ────────────────────────────
   1. Yalnız `transform` ve `opacity` animasyonlanıyor. width/height/top/left/
      margin YOK — bunlar her karede düzen hesabı tetikler ve telefonda takılır.
      Çizgiler bile `scaleX` ile çiziliyor, genişlik büyüterek değil.
   2. `prefers-reduced-motion: reduce` altında hareketin TAMAMI kapanır. Bu bir
      zevk tercihi değil erişilebilirlik şartı: vestibüler rahatsızlığı olan
      kullanıcıda ekrandaki hareket gerçek baş dönmesi yapar. Kapanınca her
      öğe SON hâlinde (görünür) kalır — hiçbir şey yarıda donmaz.
   3. İçerik ASLA kalıcı gizlenmez. Bu sitede daha önce yaşanmış hata: `.ac`
      blokları `opacity:0` bırakılıp yalnız kaydırınca açılıyordu, ekran
      görüntüsü alan boş sayfa görüyordu. Buradaki koruma dört katmanlı:
        (a) Gizleme durumları YALNIZ `.js` altında tanımlı — JS yoksa hiçbir
            şey gizlenmez (stil.css'in kendi mantığıyla aynı).
        (b) index.html'deki 1200 ms'lik `setTimeout` güvenlik ağı `.gorundu`
            sınıfını kaydırma olmasa da ekliyor.
        (c) `@media print` altında tüm gizleme `!important` ile iptal.
        (d) Azaltılmış hareket altında da tüm gizleme iptal.
   4. `will-change` yalnız TEK yerde: giriş fotoğrafı. Gerekçe aşağıda.

   ── BİLEREK YAPILMAYANLAR ─────────────────────────────────────────────────
   • Kaydırmaya bağlı zaman çizelgesi (`animation-timeline: view()`) KULLANILMADI.
     Şık ama tam-sayfa ekran görüntüsü ve PDF çıktısında ekran dışındaki
     öğeleri boş bırakma riski var — bu sitenin daha önce yediği hatanın
     birebir aynısı. Riski estetiğe değişmiyoruz.
   • SSS cevaplarının açılırken yükseklik animasyonu YOK: <details> açılışı
     ancak height/grid animasyonuyla olur, o da düzen hesabı demek. Yasak
     listesindeki tam olarak bu. Artı işaretinin dönüşü zaten yeterli geri
     bildirim veriyor.
   • Doku şeritlerinde parallax YOK. Anlam taşımayan hareket süs olur, süs de
     ucuz durur. Hareket ya bir şeyi anlatır ya da olmaz.
   • Form alanlarına hareket YOK. Yazarken altında kıpırdayan bir kutu
     rahatsız eder; oradaki tek doğru geri bildirim kenarlık rengidir.
   ========================================================================= */

:root {
  /* Sitenin kendi eğrisi — yeni bir hareket dili icat etmiyoruz. */
  --hc-yay: cubic-bezier(0.16, 1, 0.3, 1);
  /* Çok uzun ve fark edilmemesi gereken hareket için düz, ivmesiz eğri. */
  --hc-sakin: cubic-bezier(0.33, 0, 0.35, 1);
}

/* ============================================================================
   0. KEYFRAME KÜTÜPHANESİ
   ============================================================================
   Yedi tanım tüm siteyi taşıyor. Her biri sadece transform + opacity.
   `translate3d` bilerek kullanılıyor: 2B `translateY` bazı mobil tarayıcıda
   ana iş parçacığında kalabiliyor, 3B biçim GPU katmanını garantiler.
   ========================================================================= */

/* Aşağıdan yükselerek gelme — sitenin ana giriş hareketi. */
@keyframes hc-yuksel {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Küçük öğeler için kısa mesafeli sürüm (etiket, liste satırı, süreç metni).
   Küçük bir rozeti 18 px oynatmak orantısız durur; mesafe öğenin boyuyla
   orantılı olmalı. */
@keyframes hc-yuksel-hafif {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Yukarıdan inerek yerleşme — YALNIZ giriş ekranı başlığı.
   Barış'ın istediği "yukarıdan gelme" bu. Sayfanın geri kalanı aşağıdan
   yükselir; ikisinin ayrışması giriş ekranını özel kılar. */
@keyframes hc-inis {
  from { opacity: 0; transform: translate3d(0, -16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Proje/bitki kartı — biraz daha uzun yol ve neredeyse görünmez bir ölçek.
   %1,5'lik ölçek farkı bilinçli olarak algılanmaz ama karta "uzaktan
   yaklaşıyor" derinliği verir. */
@keyframes hc-kart {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Süreç numaraları — hafif küçükten gelir, "sayılıyor" hissi verir. */
@keyframes hc-sayi {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.9); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Çizgi çizilmesi. Genişlik DEĞİL ölçek animasyonu: düzen hesabı tetiklemez. */
@keyframes hc-ciz {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Giriş fotoğrafı: çok yavaş yaklaşma + neredeyse fark edilmeyen yukarı kayma.
   Ölçek %6,2 olduğu için her kenarda ~%3,1 pay var; %0,7'lik kayma bu payın
   dörtte biri — fotoğrafın kenarı ASLA açığa çıkmaz. */
@keyframes hc-toprak-yakinlas {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.062) translate3d(0, -0.7%, 0); }
}

/* ============================================================================
   1. GİRİŞ EKRANI
   ========================================================================= */

/* ── Ken burns.
   `will-change` SİTEDE SADECE BURADA. Gerekçe: 34 saniye boyunca dönen tek
   uzun animasyon bu ve öğe tam ekran 2000 px'lik bir fotoğraf. Tarayıcıya
   katmanı baştan hazırlat, 34 sn boyunca her karede yeniden karar vermesin.
   Kartlara will-change KOYULMADI: 6 adet 1400 px doku aynı anda GPU belleğine
   çıkarsa orta seviye telefonda kazancından çok zarar verir. */
.kahraman__gorsel {
  animation: hc-toprak-yakinlas 34s var(--hc-sakin) both;
  will-change: transform;
}

/* ── Başlık satırları: sırayla ve yukarıdan.
   NOT: h1'in kendi satırlarını tek tek ayırmak DOM'a <span> eklemeyi
   gerektirir; bu iş index.html'e dokunmadığı için blok düzeyinde kurgulandı —
   etiket, başlık, alt metin, düğmeler sırayla iner. Okuma sırası zaten bu.

   LCP notu: h1 yalnız 180 ms bekletiliyor ve 800 ms'de tam opaklığa çıkıyor.
   Sayfanın LCP öğesi ön yüklenen giriş fotoğrafı; metnin bu kadar kısa
   gecikmesi ölçüme takılmaz. Daha uzun bir gecikme LCP'yi yiyebilirdi. */
.kahraman__etiket   { animation: hc-inis 760ms var(--hc-yay)  60ms both; }
.kahraman h1        { animation: hc-inis 820ms var(--hc-yay) 180ms both; }
.kahraman__alt      { animation: hc-inis 800ms var(--hc-yay) 360ms both; }
.kahraman .giris__eylem { animation: hc-inis 780ms var(--hc-yay) 520ms both; }

/* Etiketin önündeki 26 px'lik kiremit çizgi soldan çizilir. */
.kahraman__etiket::before {
  transform-origin: left center;
  animation: hc-ciz 640ms var(--hc-yay) 300ms both;
}

/* Giriş ekranındaki koyu geçiş katmanına (.kahraman::after) BİLEREK hareket
   yok: o katman metnin okunmasını garanti ediyor. Onu soldurarak açmak, ilk
   saniyede beyaz metni açık gökyüzünün üstünde okunmaz bırakırdı. Kontrast
   animasyona feda edilmez. */

/* ============================================================================
   2. RAKAM ŞERİDİ
   ============================================================================
   `.serit` üzerinde `.ac` sınıfı YOK, yani IntersectionObserver onu görmüyor.
   index.html'e dokunmadan çözüm: yükleme anında çalışan, kendini bitiren bir
   animasyon. Şerit giriş ekranının hemen altında — telefonda ilk ekranda,
   masaüstünde katlanma çizgisinde. `both` doldurma sayesinde ne olursa olsun
   ~1,7 sn içinde son hâline oturur; hiçbir koşulda gizli kalamaz. */
.serit > div { animation: hc-yuksel-hafif 640ms var(--hc-yay) both; }
.serit > div:nth-child(1) { animation-delay: 620ms; }
.serit > div:nth-child(2) { animation-delay: 730ms; }
.serit > div:nth-child(3) { animation-delay: 840ms; }
.serit > div:nth-child(4) { animation-delay: 950ms; }

/* ============================================================================
   3. BÖLÜM AÇILIŞLARI — mevcut .ac / .gorundu üzerine kademeli geliş
   ============================================================================
   Mantık: stil.css bloğun TAMAMINI birlikte açıyor. Burada o açılışı bloktan
   alıp ALT ÖĞELERE devrediyoruz — blok kendisi görünür kalır, çocukları sırayla
   gelir. Böylece iki kat opaklık üst üste binmez (blok %50 + çocuk %50 = soluk
   ve yavaş görünürdü).

   Sıra numarası bir kez, tek bir yerde üretiliyor: her `.ac` çocuğuna
   `--hc-sira` yazılıyor, animasyon gecikmesi calc() ile ondan hesaplanıyor.
   Böylece her bölüm için ayrı ayrı nth-child gecikme listesi yazılmıyor. */

.js .ac > :nth-child(1)    { --hc-sira: 0; }
.js .ac > :nth-child(2)    { --hc-sira: 1; }
.js .ac > :nth-child(3)    { --hc-sira: 2; }
.js .ac > :nth-child(4)    { --hc-sira: 3; }
.js .ac > :nth-child(5)    { --hc-sira: 4; }
.js .ac > :nth-child(6)    { --hc-sira: 5; }
.js .ac > :nth-child(7)    { --hc-sira: 6; }
.js .ac > :nth-child(8)    { --hc-sira: 7; }
.js .ac > :nth-child(9)    { --hc-sira: 8; }
.js .ac > :nth-child(10)   { --hc-sira: 9; }
.js .ac > :nth-child(n+11) { --hc-sira: 10; }

/* Kademeli açılan blokların KENDİSİ artık solmaz — işi çocuklara verdik. */
.js .baslik.ac,
.js .isler.ac,
.js .izgara.ac,
.js .surec.ac,
.js .karsilastir.ac,
.js .bolgeler.ac,
.js .sss.ac,
.js .form.ac,
.js .mevsim.ac,
.js .butce > div.ac,
.js .butce > ol.ac,
.js .iletisim > div.ac,
.js .kurucu > .ac:not(.kurucu__portre) {
  opacity: 1;
  transform: none;
}

/* ── Metin blokları (üst etiket → başlık → açıklama). 90 ms adım: göz bir
      satırı okumaya başlarken bir sonraki gelmiş olur. */
.js .baslik.ac > *,
.js .butce > div.ac > *,
.js .iletisim > div.ac > *,
.js .kurucu > .ac:not(.kurucu__portre) > *,
.js .mevsim.ac > * { opacity: 0; }

.js .baslik.ac.gorundu > *,
.js .butce > div.ac.gorundu > *,
.js .iletisim > div.ac.gorundu > *,
.js .kurucu > .ac.gorundu:not(.kurucu__portre) > *,
.js .mevsim.ac.gorundu > * {
  animation: hc-yuksel 720ms var(--hc-yay) calc(var(--hc-sira, 0) * 90ms) both;
}

/* ── "Ne yapıyoruz" kartları. Bilerek eşit boy değiller; hareket de bunu
      destekler: 110 ms adım, üç blok tek tek okunur. */
.js .isler.ac > .is { opacity: 0; }
.js .isler.ac.gorundu > .is {
  animation: hc-yuksel 800ms var(--hc-yay) calc(var(--hc-sira, 0) * 110ms) both;
}

/* ── Proje ve bitki kartları. 6 kart × 90 ms = son kart 450 ms'de başlar,
      1,33 sn'de biter. Daha uzun bir kuyruk "site yavaş" hissi verirdi. */
.js .izgara.ac > .kart { opacity: 0; }
.js .izgara.ac.gorundu > .kart {
  animation: hc-kart 880ms var(--hc-yay) calc(var(--hc-sira, 0) * 90ms) both;
}

/* ── Öncesi / sonrası: yalnız iki kare olduğu için adım uzun (140 ms).
      Az sayıda öğede kısa adım "aynı anda geldiler" demektir; buradaki amaç
      gözü önce "önce"ye, sonra "sonra"ya götürmek. */
.js .karsilastir.ac > figure { opacity: 0; }
.js .karsilastir.ac.gorundu > figure {
  animation: hc-kart 820ms var(--hc-yay) calc(var(--hc-sira, 0) * 140ms) both;
}

/* ── Bütçe listesi: sitedeki en yüksek getirili metin, okunma sırası korunur. */
.js .butce > ol.ac > li { opacity: 0; }
.js .butce > ol.ac.gorundu > li {
  animation: hc-yuksel-hafif 680ms var(--hc-yay) calc(var(--hc-sira, 0) * 85ms) both;
}

/* ── Bölge etiketleri: 10 küçük rozet. Adım 45 ms — akan bir dalga gibi,
      tek tek sayılmaz. Mesafe de kısa (8 px), çünkü öğeler minik. */
.js .bolgeler.ac > span { opacity: 0; }
.js .bolgeler.ac.gorundu > span {
  animation: hc-yuksel-hafif 520ms var(--hc-yay) calc(var(--hc-sira, 0) * 45ms) both;
}

/* ── SSS satırları ve form alanları: liste ritmi, kısa adım. */
.js .sss.ac > details { opacity: 0; }
.js .sss.ac.gorundu > details {
  animation: hc-yuksel-hafif 620ms var(--hc-yay) calc(var(--hc-sira, 0) * 70ms) both;
}

.js .form.ac > * { opacity: 0; }
.js .form.ac.gorundu > * {
  animation: hc-yuksel-hafif 600ms var(--hc-yay) calc(var(--hc-sira, 0) * 60ms) both;
}

/* ============================================================================
   4. PROJE / BİTKİ KARTLARI — imleç etkileşimi
   ============================================================================
   TAMAMI `hover: hover` + `pointer: fine` içinde. Dokunmatik ekranda `:hover`
   bir kez dokunulduktan sonra ÜSTTE KALABİLİYOR; o zaman kart parmağı
   çektikten sonra da koyu ve kaymış hâlde donuyordu. Kural bu yüzden var:
   telefonda bu bloğun hiçbir satırı devreye girmez, kart olduğu gibi kalır.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {

  /* Fotoğraf ölçeği stil.css'te zaten vardı; burada biraz daha ileri ve
     belirgin biçimde daha yavaş. 700 → 900 ms: aynı hareket, daha pahalı his. */
  .kart img { transition: transform 900ms var(--hc-yay); }
  .kart:hover img,
  .kart:focus-within img { transform: scale(1.06); }

  /* Perdenin koyulaşması. Renk animasyonu YOK — hazır duran ikinci bir
     karartma katmanının yalnız OPAKLIĞI değişiyor. Gradyan durduğu için
     yazının arkası her zaman en koyu yer olmaya devam eder. */
  .kart::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;                 /* .kart__perde ile aynı kat, .kart__yazi (z:2) altında */
    pointer-events: none;
    background: linear-gradient(to top,
                rgba(20, 18, 15, 0.72) 0%,
                rgba(20, 18, 15, 0.30) 50%,
                rgba(20, 18, 15, 0.06) 100%);
    opacity: 0;
    transition: opacity 560ms var(--hc-yay);
  }
  .kart:hover::after,
  .kart:focus-within::after { opacity: 1; }

  /* Künye yükselir. Yazı bloğunun tamamı 7 px, üstündeki tür etiketi
     fazladan 3 px: ikisi farklı hızda gidince araya ince bir derinlik girer.
     Tek parça kayan yazı düz bir sürgü gibi durur. */
  .kart__yazi { transition: transform 620ms var(--hc-yay); }
  .kart:hover .kart__yazi,
  .kart:focus-within .kart__yazi { transform: translate3d(0, -7px, 0); }

  .kart__tur { transition: transform 620ms var(--hc-yay) 40ms; }
  .kart:hover .kart__tur,
  .kart:focus-within .kart__tur { transform: translate3d(0, -3px, 0); }
}

/* ============================================================================
   5. SÜREÇ ADIMLARI — çizgiler ve numaralar sırayla
   ============================================================================
   Çizgi `scaleX` ile çiziliyor, genişlik büyütülerek DEĞİL.
   Kiremit çizgi mevcut gri kenarlığın ÜSTÜNE biniyor, onu değiştirmiyor:
   soldan güçlü başlayıp %62'de tamamen kaybolan bir gradyan. Böylece beş
   satır boyunca "beş kalın turuncu çizgi" görüntüsü oluşmuyor, editoryal bir
   vurgu kalıyor. Hareket kapalıyken de çizgi çizilmiş hâlde durur — yani
   azaltılmış hareket ya da yazdırma "eksik" değil "sakin" görünür.
   ========================================================================= */
.adim { position: relative; }
.adim::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(180, 82, 42, 0.85) 0%,
              rgba(180, 82, 42, 0) 62%);
  transform-origin: left center;
  transform: scaleX(1);            /* JS yoksa çizgi zaten yerinde durur */
}

.js .surec.ac > .adim::before { transform: scaleX(0); }
.js .surec.ac.gorundu > .adim::before {
  animation: hc-ciz 820ms var(--hc-yay) calc(var(--hc-sira, 0) * 120ms) both;
}

/* Satır içi sıra: önce çizgi çizilir (gecikme 0), sonra numara (+90 ms),
   sonra başlık ve metin (+70 ms'lik iç adımlarla). */
.js .surec.ac > .adim > :nth-child(1) { --hc-ic: 0; }
.js .surec.ac > .adim > :nth-child(2) { --hc-ic: 1; }
.js .surec.ac > .adim > :nth-child(3) { --hc-ic: 2; }

.js .surec.ac > .adim > * { opacity: 0; }
.js .surec.ac.gorundu > .adim > * {
  animation: hc-yuksel-hafif 700ms var(--hc-yay)
             calc(var(--hc-sira, 0) * 120ms + var(--hc-ic, 0) * 70ms + 90ms) both;
}
/* Numara aynı takvimde kalır ama kendi karakteriyle gelir. */
.js .surec.ac.gorundu > .adim > .adim__no {
  animation-name: hc-sayi;
  animation-duration: 800ms;
}

/* ============================================================================
   6. DÜĞMELER, BAĞLANTILAR, KÜÇÜK ETKİLEŞİMLER
   ============================================================================
   Mevcut davranışlar korunuyor, üstüne konuluyor. Buradaki süreler kasten
   kısa (300–420 ms): bunlar anlatım değil TEPKİ hareketi. Tıklamaya 800 ms'de
   cevap veren bir düğme bozuk sanılır.
   ========================================================================= */

/* ── Basma tepkisi: dokunmatikte de çalışsın diye hover sorgusunun DIŞINDA.
      Telefonda bir düğmeye basınca hafifçe içeri gitmesi, "dokunuşum kaydedildi"
      demenin en ucuz ve en anlaşılır yolu. */
.dugme:active,
.mobil a:active {
  transform: translate3d(0, 0, 0) scale(0.972);
  transition-duration: 90ms;
}
.mobil a { transition: transform 220ms var(--hc-yay); }

@media (hover: hover) and (pointer: fine) {
  .dugme {
    transition: background 320ms var(--hc-yay),
                color 320ms var(--hc-yay),
                border-color 320ms var(--hc-yay),
                transform 320ms var(--hc-yay);
  }
  .dugme:hover,
  .dugme:focus-visible { transform: translate3d(0, -2px, 0); }

  /* Bölge rozetleri: 2 px kalkış. Fazlası bir listeyi tuş takımına çevirir. */
  .bolgeler span {
    transition: transform 380ms var(--hc-yay), border-color 380ms ease;
  }
  .bolgeler span:hover { transform: translate3d(0, -2px, 0); }

  /* SSS artı işareti hover'da hafifçe büyür. Açık satırda 45°'lik dönüş
     KORUNUYOR — iki durumun birleşimi ayrıca yazıldı, yoksa açık bir satırın
     üstüne gelince çarpı işareti düz artıya dönerdi. */
  .sss summary::after { transition: transform 320ms var(--hc-yay); }
  .sss summary:hover::after,
  .sss summary:focus-visible::after { transform: translateY(-50%) scale(1.18); }
  .sss details[open] summary:hover::after,
  .sss details[open] summary:focus-visible::after {
    transform: translateY(-50%) rotate(45deg) scale(1.18);
  }
}

/* ── Menü altı çizgisi: girerken soldan büyür, ÇIKARKEN sağa doğru toplanır.
      stil.css'te iki yön de soldandı; imleç çıkınca çizginin geldiği yere
      geri dönmesi hareketi "geri sarılmış" gösterir. Kaynak noktasının yön
      değiştirmesi geçişe dahil değil (anında olur), bu yüzden bedava. */
.gezinti a::after {
  transform-origin: right center;
  transition: transform 420ms var(--hc-yay);
}
.gezinti a:hover::after,
.gezinti a:focus-visible::after { transform-origin: left center; }

/* ── Alt bilgi bağlantıları: aynı silme hareketi, ince çizgiyle.
      stil.css'teki künye/iletişim bağlantıları kendi kenarlık geçişini
      kullanıyor; burada yalnız hiç geçişi olmayan alt bilgi tamamlanıyor. */
.alt a { position: relative; }
.alt a::after {
  content: "";
  position: absolute;
  left: 0.2rem; right: 0.2rem; bottom: 0.35rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 380ms var(--hc-yay);
}
.alt a:hover::after,
.alt a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ============================================================================
   7. AZALTILMIŞ HAREKET  —  erişilebilirlik şartı, tercih değil
   ============================================================================
   stil.css süreyi 0.01 ms'e çekiyor ama GECİKMEYİ çekmiyor; gecikmesi olan
   bir animasyon `both` doldurmayla başlangıç hâlinde (opacity: 0) bekler.
   Yani tek başına o kural bu dosyayla birlikte içeriği yarım saniye kadar
   gizli bırakırdı. Burada gecikme de sıfırlanıyor ve her öğe doğrudan SON
   hâline yazılıyor.

   Renk/kenarlık geri bildirimi ve alt çizgi bilerek KORUNUYOR: bunlar hareket
   değil durum bilgisidir, kaldırılırsa kullanıcı neyin üzerinde olduğunu
   anlayamaz. Kaldırılan şey yer değiştirme ve ölçek — yani baş döndüren kısım.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
  }

  /* Giriş fotoğrafı sabitlenir; katman hazırlığı da gereksizleşir. */
  .kahraman__gorsel {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Bu dosyanın gizlediği HER ŞEY görünür hâle yazılır. */
  .kahraman__etiket,
  .kahraman h1,
  .kahraman__alt,
  .kahraman .giris__eylem,
  .serit > div,
  .js .ac,
  .js .ac > *,
  .js .ac > * > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* scaleX ile çizilen çizgiler tam boyda durur. */
  .kahraman__etiket::before,
  .adim::before,
  .js .surec.ac > .adim::before {
    animation: none !important;
    transform: scaleX(1) !important;
  }

  /* Yer değiştiren imleç tepkileri kapanır; renk değişimi kalır. */
  .dugme:hover, .dugme:focus-visible, .dugme:active,
  .mobil a:active,
  .bolgeler span:hover,
  .kart:hover img, .kart:focus-within img,
  .kart:hover .kart__yazi, .kart:focus-within .kart__yazi,
  .kart:hover .kart__tur, .kart:focus-within .kart__tur {
    transform: none !important;
  }
}

/* ============================================================================
   8. YAZDIRMA / PDF  —  kâğıtta hiçbir şey eksik olamaz
   ============================================================================
   Bu bölüm pazarlık konusu değil. Bir müşteri sayfayı PDF'e bastığında ya da
   bir bot ekran görüntüsü aldığında, açılmamış bir animasyon yüzünden boş
   alan görmesi bu sitede DAHA ÖNCE yaşanmış bir hatadır. Aşağısı o kapıyı
   kapatıyor: tüm hareket durur, tüm gizleme iptal edilir.
   Not: `transform: none` yalnız burada listelenen seçicilere veriliyor —
   `.sss summary::after` gibi konumu transform'a bağlı öğelere dokunulmuyor,
   yoksa artı işareti yerinden oynardı.
   ========================================================================= */
@media print {

  .kahraman__gorsel,
  .kahraman__ic > *,
  .serit > div,
  .js .ac,
  .js .ac > *,
  .js .ac > * > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .kahraman__etiket::before {
    animation: none !important;
    transform: none !important;
  }

  /* Dekoratif katmanlar kâğıda basılmaz — gereksiz mürekkep. */
  .kart::after { display: none !important; }
  .adim::before { display: none !important; }
}