/* ============================================================
   METAMORFOZ ŞERİDİ — tırtıl → koza → kelebek
   Defterden panele geçişin anlatısı. Kaydırma ilerledikçe
   evre değişir; hareket kapalıysa üçü de okunur halde durur.
   ============================================================ */
.mf-serit{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line-2,#26261F);border-radius:var(--radius,2px);
  margin-top:1.6rem;overflow:hidden;position:relative
}
.mf-evre{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:1.15rem 1.25rem;position:relative;
  border-right:1px solid var(--line-2,#26261F);
  opacity:.4;transition:opacity .45s ease,background .45s ease
}
.mf-evre:last-child{border-right:0}
.mf-evre.aktif{opacity:1;background:rgba(216,255,62,.05)}
.mf-evre.gecti{opacity:.72}
.mf-ikon{flex:0 0 auto;width:38px;height:38px;color:var(--muted,#7A776C);transition:color .45s ease}
.mf-evre.aktif .mf-ikon{color:var(--acid)}
.mf-ikon svg{width:100%;height:100%;display:block}
.mf-yazi b{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted,#7A776C);margin-bottom:.3rem;font-weight:700
}
.mf-evre.aktif .mf-yazi b{color:var(--acid)}
.mf-yazi strong{display:block;font-size:1rem;line-height:1.3;margin-bottom:.3rem}
.mf-yazi span{display:block;font-size:.85rem;line-height:1.55;color:var(--muted,#7A776C)}

/* Kanat çırpışı yalnız son evre etkinken ve hareket açıkken */
@media (prefers-reduced-motion: no-preference){
  .mf-evre.aktif .mf-kanat{transform-origin:12px 12px;animation:mfKanat 2.8s ease-in-out infinite}
  .mf-evre.aktif .mf-kanat.sag{animation-delay:.12s}
}
@keyframes mfKanat{
  0%,100%{transform:scaleX(1)}
  50%{transform:scaleX(.82)}
}
@media (max-width:820px){
  .mf-serit{grid-template-columns:1fr}
  .mf-evre{border-right:0;border-bottom:1px solid var(--line-2,#26261F)}
  .mf-evre:last-child{border-bottom:0}
}

/* ============================================================
   DÜZELTME (parti 2)
   HATA: etkin olmayan evreler opacity:.4 ile duruyordu. Metin
   rengi zaten var(--muted); .4 ile siyah zeminde kontrast
   ~1.5:1'e düşüyor, yazı okunmuyordu (WCAG AA altı). Ayrıca
   yukarıdaki yorum "hareket kapalıysa üçü de okunur" diyor ama
   öyle olmuyordu: dn:oran duyurusu metamorfoz.js yüklenmeden
   atıldığı için evreler .4'te kalıyordu.
   ÇÖZÜM: sönük evre okunur bir seviyeye çıkarıldı; sıra yine
   asit zemin + asit ikonla belli oluyor. Hareket kapalıyken
   üçü de tam opaklıkta durur.
   ============================================================ */
.mf-evre{opacity:.78}
.mf-evre.gecti{opacity:.88}
.mf-evre.aktif{opacity:1}
@media (prefers-reduced-motion: reduce){
  .mf-evre,.mf-evre.gecti{opacity:1;transition:none}
  /* Sıra hâlâ belli olsun: etkin evrenin zemini ve ikonu asit. */
  .mf-evre:not(.aktif){background:transparent}
}