/* Ritma Fly · Neden + Özellikler ("Netlik")
   (A) .fyo-neden  buz zemin, ortalanmış tek dev cümle + çizgiyle ayrılan üç sütun.
   (B) .fyo-ozel   gece2 zemin, altı özellik dev tipografik liste; aktif satırın
                   adının altından vurgu kalemi geçer, diğerleri soluklaşır.
   Ortak ölçü ve sınıflar: ritmafly-ortak.css (.fy-*). Önek: fyo. */

/* =================== (A) NEDEN =================== */
.ritmafly-page .fyo-neden-bas { text-align: center }

.ritmafly-page .fyo-neden-baslik { max-width: 13.2em; margin-inline: auto }

.ritmafly-page .fyo-neden-giris { margin-inline: auto }

/* "muhasebeci": defterdeki düzeltme gibi ince bir çizgiyle üstü çizilir */
.ritmafly-page .fyo-cizik { position: relative; white-space: nowrap; transition: color .8s ease .35s }

.ritmafly-page .fyo-cizik::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.04em;
  top: .64em;
  height: .032em;
  min-height: 2px;
  border-radius: 2px;
  background: rgba(10, 20, 48, .82);
  transform: scaleX(var(--fyo-c, 1));
  transform-origin: 0 50%;
  transition: transform .75s var(--fy-ease) .25s
}

.ritmafly-page .fyo-gorundu .fyo-cizik,
.ritmafly-page .fyo-neden:not(.fyo-js) .fyo-cizik { color: rgba(10, 20, 48, .42) }

/* vurgu kalemi düzeltme çizgisinden sonra gelsin */
.ritmafly-page .fyo-neden .fy-vurgu::before { transition-delay: .7s }

/* üç madde: kutusuz, dikey ince çizgilerle ayrılmış üç sütun */
.ritmafly-page .fyo-uc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 112px 0 0;
  padding: 0;
  list-style: none;
  position: relative
}

.ritmafly-page .fyo-uc-madde { position: relative; padding: 44px 44px 0 }
.ritmafly-page .fyo-uc-madde:first-child { padding-left: 0 }
.ritmafly-page .fyo-uc-madde:last-child { padding-right: 0 }
.ritmafly-page .fyo-uc-madde + .fyo-uc-madde { box-shadow: inset 1px 0 var(--fy-cizgi-a) }

/* sütun başı ikonu (eski 01–03 numaralarının yerinde) */
.ritmafly-page .fyo-uc-ik { width: 28px; height: 28px }

.ritmafly-page .fyo-uc-baslik {
  margin: 22px 0 0;
  font-size: 28px;
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--fy-lacivert)
}

.ritmafly-page .fyo-uc-metin {
  margin: 14px 0 0;
  max-width: 22em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fy-yazi-a)
}

/* =================== (B) ÖZELLİKLER =================== */
.ritmafly-page .fyo-ozel-bas { max-width: 980px }

.ritmafly-page .fyo-liste {
  margin: 104px 0 0;
  padding: 0;
  list-style: none;
  box-shadow: inset 0 1px var(--fy-cizgi-k)
}

.ritmafly-page .fyo-is {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
  padding: 40px 0 42px;
  box-shadow: inset 0 -1px var(--fy-cizgi-k)
}

/* satır ikonu: dev adın ilk satırına ortalanır */
.ritmafly-page .fyo-is-ik {
  width: 28px;
  height: 28px;
  margin-top: calc((clamp(29.6px, 3.3vw, 48.4px) * 1.04 - 28px) / 2);
  color: var(--fy-acik);
  transition: color .6s ease
}

.ritmafly-page .fyo-is-ad {
  margin: 0;
  font-size: clamp(29.6px, 3.3vw, 48.4px);
  font-weight: 780;
  line-height: 1.04;
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 32;
  color: #fff;
  transition: color .6s ease
}

/* vurgu kalemi: eğik (logodaki şerit açısı) mavi şerit, satır kırılsa da her satırın altında */
.ritmafly-page .fyo-kalem {
  position: relative;
  z-index: 0;
  padding-right: .08em;
  background-image: linear-gradient(132deg, transparent .24em, var(--fy-mavi) .24em, var(--fy-mavi) calc(100% - .24em), transparent calc(100% - .24em));
  background-repeat: no-repeat;
  background-position: left 0 bottom .04em;
  background-size: var(--fyo-k, 0%) .36em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .9s var(--fy-ease)
}

.ritmafly-page .fyo-is-detay { padding-top: 4px; transition: opacity .6s ease }

.ritmafly-page .fyo-is-metin {
  margin: 0;
  max-width: 30em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fy-yazi-k2)
}

.ritmafly-page .fyo-is-metin strong { font-weight: 600; color: #fff }

/* tek kanıt satırı: defter biçiminde ad · durum · sağa hizalı tutar */
.ritmafly-page .fyo-defter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: 22px;
  margin: 22px 0 0;
  padding: 14px 0 0;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: inset 0 1px var(--fy-cizgi-k)
}

.ritmafly-page .fyo-d-ad { font-weight: 600; color: var(--fy-yazi-k); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ritmafly-page .fyo-d-durum { color: var(--fy-yazi-k2); white-space: nowrap }
.ritmafly-page .fyo-d-tutar { min-width: 6.4em; text-align: right; font-weight: 650; color: #fff; white-space: nowrap }
.ritmafly-page .fyo-defter .fyo-arti { color: var(--fy-arti) }
.ritmafly-page .fyo-defter .fyo-eksi { color: var(--fy-eksi) }

/* ---- canlı durum (betik .fyo-canli ekler): yalnız aktif satır tam parlak ---- */
.ritmafly-page .fyo-canli .fyo-is:not(.fyo-aktif) .fyo-is-ad { color: rgba(255, 255, 255, .26) }
.ritmafly-page .fyo-canli .fyo-is:not(.fyo-aktif) .fyo-is-ik { color: var(--fy-yazi-k2) }
.ritmafly-page .fyo-canli .fyo-is:not(.fyo-aktif) .fyo-is-detay { opacity: .46 }

.ritmafly-page .fyo-is.fyo-aktif .fyo-kalem { --fyo-k: 100% }
/* kalem kalkarken sağa doğru çekilir */
.ritmafly-page .fyo-is:not(.fyo-aktif) .fyo-kalem { background-position: right 0 bottom .04em }

/* satır yerine oturur: tutar ve durum aktif olunca hafifçe yerine iner */
@keyframes fyo-otur {
  from { opacity: .2; transform: translateY(.55em) }
  to { opacity: 1; transform: none }
}

.ritmafly-page .fyo-canli .fyo-aktif .fyo-defter > span { display: inline-block; animation: fyo-otur .7s var(--fy-ease) both }
.ritmafly-page .fyo-canli .fyo-aktif .fyo-defter > span:nth-child(2) { animation-delay: .08s }
.ritmafly-page .fyo-canli .fyo-aktif .fyo-defter > span:nth-child(3) { animation-delay: .16s }

/* kapanış */
.ritmafly-page .fyo-kapanis {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 64px;
  margin-top: 96px
}

.ritmafly-page .fyo-kapanis-soz {
  margin: 0;
  max-width: 21em;
  font-size: clamp(23.4px, 2.4vw, 34.2px);
  font-weight: 720;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance
}

.ritmafly-page .fyo-kapanis-soz span {
  display: block;
  margin-top: 14px;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--fy-yazi-k)
}

.ritmafly-page .fyo-kapanis-link { flex: none; color: var(--fy-acik); padding-bottom: 6px }

@media (hover: hover) {
  .ritmafly-page .fyo-kapanis-link:hover { color: #fff }
}

/* =================== giriş hareketi (betik .fyo-js ekler) =================== */
@media (prefers-reduced-motion: no-preference) {
  .ritmafly-page .fyo-js .fyo-cizik { --fyo-c: 0 }
  .ritmafly-page .fyo-js .fyo-gorundu .fyo-cizik { --fyo-c: 1 }

  /* kullanıcı isteğiyle üç maddenin üstündeki yatay çizgi kaldırıldı; aradaki dikey ayraçlar duruyor */

  .ritmafly-page .fyo-js .fyo-uc-madde,
  .ritmafly-page .fyo-js .fyo-ozel-bas,
  .ritmafly-page .fyo-js .fyo-kapanis {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s ease, transform 1s var(--fy-ease)
  }
  .ritmafly-page .fyo-js .fyo-uc-madde { transition-delay: calc(.15s + var(--fyo-i, 0) * .12s) }
  .ritmafly-page .fyo-js .fyo-gorundu .fyo-uc-madde,
  .ritmafly-page .fyo-js .fyo-ozel-bas.fyo-gorundu,
  .ritmafly-page .fyo-js .fyo-kapanis.fyo-gorundu { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .ritmafly-page .fyo-kalem,
  .ritmafly-page .fyo-is-ad,
  .ritmafly-page .fyo-is-ik,
  .ritmafly-page .fyo-is-detay,
  .ritmafly-page .fyo-cizik,
  .ritmafly-page .fyo-cizik::after { transition: none }
  .ritmafly-page .fyo-canli .fyo-aktif .fyo-defter > span { animation: none }
}

/* =================== duyarlı =================== */
@media (max-width: 1099px) {
  .ritmafly-page .fyo-uc { margin-top: 88px }
  .ritmafly-page .fyo-uc-madde { padding: 36px 28px 0 }
  .ritmafly-page .fyo-uc-baslik { font-size: 24px }
  .ritmafly-page .fyo-liste { margin-top: 80px }
  .ritmafly-page .fyo-is { grid-template-columns: 48px minmax(0, 1fr); row-gap: 22px; padding: 40px 0 }
  .ritmafly-page .fyo-is-detay { grid-column: 2; padding-top: 0 }
  .ritmafly-page .fyo-is-metin { max-width: 36em }
  .ritmafly-page .fyo-defter { max-width: 36em }
}

@media (max-width: 699px) {
  .ritmafly-page .fyo-neden-bas { text-align: left }
  .ritmafly-page .fyo-neden-baslik { margin-inline: 0 }
  .ritmafly-page .fyo-uc { grid-template-columns: 1fr; margin-top: 64px; box-shadow: none }
  .ritmafly-page .fyo-uc-madde,
  .ritmafly-page .fyo-uc-madde:first-child,
  .ritmafly-page .fyo-uc-madde:last-child { padding: 28px 0 30px; box-shadow: inset 0 1px var(--fy-cizgi-a) }
  .ritmafly-page .fyo-uc-madde + .fyo-uc-madde { box-shadow: inset 0 1px var(--fy-cizgi-a) }
  .ritmafly-page .fyo-uc-ik { width: 26px; height: 26px }
  .ritmafly-page .fyo-uc-baslik { margin-top: 14px; font-size: 23px }
  .ritmafly-page .fyo-uc-metin { font-size: 16px }

  .ritmafly-page .fyo-liste { margin-top: 64px }
  .ritmafly-page .fyo-is { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 34px 0 36px }
  .ritmafly-page .fyo-is-ik { width: 26px; height: 26px; margin-top: 0 }
  .ritmafly-page .fyo-is-ad { margin-top: 10px; font-size: clamp(28.8px, 8.5vw, 36px); line-height: 1.08 }
  .ritmafly-page .fyo-is-detay { grid-column: 1; margin-top: 18px }
  .ritmafly-page .fyo-is-metin { font-size: 16px }
  .ritmafly-page .fyo-defter { column-gap: 14px; font-size: 14px }
  .ritmafly-page .fyo-d-tutar { min-width: 0 }

  .ritmafly-page .fyo-kapanis { display: block; margin-top: 64px }
  .ritmafly-page .fyo-kapanis-soz span { font-size: 16.5px }
  .ritmafly-page .fyo-kapanis-link { margin-top: 28px }
}