/* Ritma Fly · Kolay başlangıç + Finans Ajandası (önek: fya)
   Tek mavi blok (.fy-z-mavi). Başlangıç: dört dev ince rakam, yatay şerit.
   Ajanda: zeminin üstünde defter sayfası — ince yatay çizgiler, tarih sütununu
   ayıran dikey kenar çizgisi, sağa hizalı tabular tutarlar. Tahsilat beyaz,
   ödeme gece laciverti; aktif sekmenin altından vurgu kalemi geçer.
   Hareket yalnız .fya-js varken (betik yüklendiyse) ve hareket azaltılmamışsa. */

/* ---------- blok ---------- */
.ritmafly-page .fya { position: relative; overflow: hidden }
.ritmafly-page .fya-bas { padding-bottom: 72px }
.ritmafly-page .fya-aj { padding-top: 132px }

.ritmafly-page .fya .fy-h2 { color: #fff }
.ritmafly-page .fya-bas-baslik { max-width: 11.5em }
.ritmafly-page .fya .fy-giris,
.ritmafly-page .fya .fy-ust { color: #fff }

/* mavi zeminde soluk satır: gece lacivertine çalan koyu ton */
.ritmafly-page .fya .fy-soluk { color: var(--fy-gece) }

/* ---------- A · dört adım ---------- */
.ritmafly-page .fya-adimlar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 40px;
  margin: 112px 0 0;
  padding: 0;
  list-style: none
}

.ritmafly-page .fya-adim { position: relative; margin: 0; padding: 0 }

.ritmafly-page .fya-no {
  display: block;
  overflow: hidden;
  margin: 0 0 0 -.04em;
  padding: .04em 0 .06em;
  font-size: clamp(51.7px, 6.2vw, 96.6px);
  font-weight: 200;
  line-height: .82;
  letter-spacing: -.025em;
  color: #fff;
  font-variation-settings: "opsz" 32
}

.ritmafly-page .fya-no > span { display: block }

/* dev adım ikonu: eski ince rakamların yerinde, aynı incelikte çizgi */
.ritmafly-page .fya-no .fy-ikon {
  width: clamp(52px, 4.7vw, 68px);
  height: clamp(52px, 4.7vw, 68px);
  margin-left: .02em;
  stroke-width: 1.15;
  /* çift renk: ana çizgi beyaz, vurgu parçası (artı, alt çizgi, eğri) lacivert ve biraz kalın */
  --fy-ikon-2: var(--fy-gece);
  --fy-ikon-2-k: 1.6
}

.ritmafly-page .fya-adim-ad {
  margin: 30px 0 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff
}

.ritmafly-page .fya-adim-metin {
  margin: 10px 0 0;
  max-width: 17em;
  font-size: 16.5px;
  line-height: 1.55;
  color: #fff
}

/* ---------- B · ajanda başlığı (ortalanmış dev cümle) ---------- */
.ritmafly-page .fya-aj-bas { text-align: center }
.ritmafly-page .fya-aj-baslik { max-width: 13em; margin-inline: auto }
.ritmafly-page .fya-aj-bas .fy-giris { margin-inline: auto; max-width: 30em }

/* ---------- sekmeler: büyük yazı + altından geçen vurgu kalemi ---------- */
.ritmafly-page .fya-defter-bas { display: none; margin: 96px 0 0 }
.ritmafly-page .fya-js .fya-defter-bas { display: flex }

.ritmafly-page .fya-sekmeler { position: relative; display: flex; gap: 6px; margin-left: -14px }

.ritmafly-page .fya-sekme {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 10px 14px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  cursor: pointer;
  transition: color .3s ease
}

.ritmafly-page .fya-sekme[aria-selected="true"] { color: #fff }
.ritmafly-page .fya-sekme:focus-visible { outline: 2px solid #fff; outline-offset: 2px }

.ritmafly-page .fya-sekme-kalem {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 12px;
  width: var(--fya-k-g, 0);
  height: 10px;
  border-radius: 2px;
  background: var(--fy-gece);
  transform: translateX(var(--fya-k-x, 0)) skewX(-42deg);
  transition: transform .55s var(--fy-ease), width .55s var(--fy-ease)
}

@media (hover: hover) {
  .ritmafly-page .fya-sekme:hover { color: #fff }
}

/* ---------- defter ---------- */
.ritmafly-page .fya-panel { margin: 0; outline: 0 }
.ritmafly-page .fya-panel:focus-visible { outline: 2px solid #fff; outline-offset: 12px; border-radius: 4px }

.ritmafly-page .fya-panel {
  --fya-kol: 112px 150px minmax(0, 1.25fr) minmax(0, 1fr) 210px;
  --fya-ara: 32px;
  --fya-kenar: 128px
}

.ritmafly-page .fya-sutunlar {
  display: grid;
  grid-template-columns: var(--fya-kol);
  column-gap: var(--fya-ara);
  margin: 28px 0 0;
  padding: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff
}

.ritmafly-page .fya-sag { text-align: right }

.ritmafly-page .fya-defter {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, .42)
}

/* defter sayfasının dikey kenar çizgisi (tarih sütununu ayırır) */
.ritmafly-page .fya-defter::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--fya-kenar);
  width: 1px;
  background: rgba(255, 255, 255, .22);
  transform-origin: 50% 0
}

.ritmafly-page .fya-satir {
  display: grid;
  grid-template-rows: 1fr;
  margin: 0;
  transition: grid-template-rows .6s var(--fy-ease)
}

.ritmafly-page .fya-satir-kap { min-height: 0; overflow: hidden }

.ritmafly-page .fya-satir-ic {
  position: relative;
  display: grid;
  grid-template-columns: var(--fya-kol);
  column-gap: var(--fya-ara);
  align-items: baseline;
  padding: 30px 0 28px;
  transition: opacity .5s ease, transform .7s var(--fy-ease);
  transition-delay: calc(var(--fya-g, var(--i, 0)) * 90ms)
}

/* satırın alt çizgisi: yerine oturan satırla birlikte soldan çizilir */
.ritmafly-page .fya-satir-ic::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .24);
  transform-origin: 0 50%;
  transition: transform .9s var(--fy-ease);
  transition-delay: calc(var(--fya-g, var(--i, 0)) * 90ms + 120ms)
}

.ritmafly-page .fya-tarih {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #fff;
  white-space: nowrap
}

.ritmafly-page .fya-tarih b {
  margin-right: 6px;
  font-size: 30.6px;
  font-weight: 300;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.ritmafly-page .fya-tur {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 650;
  color: #fff;
  white-space: nowrap
}

.ritmafly-page .fya-tur svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ritmafly-page .fya-kim {
  min-width: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: #fff
}

.ritmafly-page .fya-acik { font-size: 16.5px; line-height: 1.4; color: #fff }

.ritmafly-page .fya-tutar {
  text-align: right;
  font-size: 36px;
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1;
  color: #fff;
  white-space: nowrap
}

.ritmafly-page .fya-satir--odeme .fya-tutar,
.ritmafly-page .fya-satir--odeme .fya-tur svg { color: var(--fy-gece) }

/* ---------- özet: iki dev toplam ---------- */
.ritmafly-page .fya-ozet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px 0;
  margin: 88px 0 0
}

.ritmafly-page .fya-ozet-k { min-width: 0; padding-right: 40px }
.ritmafly-page .fya-ozet-k--odeme { padding-left: 40px; box-shadow: inset 1px 0 rgba(255, 255, 255, .28) }

.ritmafly-page .fya-ozet-ad {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff
}

.ritmafly-page .fya-ozet-ad span { font-weight: 500 }

.ritmafly-page .fya-ozet-rakam {
  margin: 18px 0 0;
  font-size: clamp(31.5px, 4.2vw, 65.2px);
  font-weight: 790;
  letter-spacing: -.025em;
  line-height: .9;
  color: #fff;
  white-space: nowrap;
  font-variation-settings: "opsz" 32
}

.ritmafly-page .fya-ozet-k--odeme .fya-ozet-rakam { color: var(--fy-gece) }
.ritmafly-page .fya-ozet-cta { padding-bottom: 6px }
.ritmafly-page .fya .fy-btn:focus-visible { outline-color: #fff }

.ritmafly-page .fya-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0
}

/* ---------- sekme kapsamı: Bugün'de haftanın satırları kapanır ---------- */
.ritmafly-page .fya-js .fya-panel[data-kapsam="bugun"] .fya-satir[data-kapsam="hafta"] { grid-template-rows: 0fr }

.ritmafly-page .fya-js .fya-panel[data-kapsam="bugun"] .fya-satir[data-kapsam="hafta"] .fya-satir-ic {
  opacity: 0;
  transform: translateY(-10px);
  transition-delay: 0ms
}

.ritmafly-page .fya-js .fya-panel[data-kapsam="bugun"] .fya-satir[data-kapsam="hafta"] .fya-satir-ic::after { transform: scaleX(0); transition-delay: 0ms }

/* ---------- giriş hareketleri ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ritmafly-page .fya-js .fya-no > span { transition: transform 1.1s var(--fy-ease); transition-delay: calc(var(--i) * 160ms + 120ms) }
  .ritmafly-page .fya-js .fya-adim-ad,
  .ritmafly-page .fya-js .fya-adim-metin { transition: opacity .7s ease, transform .9s var(--fy-ease); transition-delay: calc(var(--i) * 160ms + 320ms) }
  .ritmafly-page .fya-js .fya-defter::before { transition: transform 1.2s var(--fy-ease) .1s }

  .ritmafly-page .fya-js .fya-bas:not(.fya-gorundu) .fya-no > span { transform: translateY(105%) }
  .ritmafly-page .fya-js .fya-bas:not(.fya-gorundu) .fya-adim-ad,
  .ritmafly-page .fya-js .fya-bas:not(.fya-gorundu) .fya-adim-metin { opacity: 0; transform: translateY(14px) }

  .ritmafly-page .fya-js .fya-aj:not(.fya-gorundu) .fya-defter::before { transform: scaleY(0) }
  .ritmafly-page .fya-js .fya-aj:not(.fya-gorundu) .fya-satir-ic { opacity: 0; transform: translateY(22px) }
  .ritmafly-page .fya-js .fya-aj:not(.fya-gorundu) .fya-satir-ic::after { transform: scaleX(0) }
}

@media (prefers-reduced-motion: reduce) {
  .ritmafly-page .fya-satir,
  .ritmafly-page .fya-satir-ic,
  .ritmafly-page .fya-satir-ic::after,
  .ritmafly-page .fya-sekme-kalem { transition: none }
}

/* ---------- duyarlı ---------- */
@media (max-width: 1099px) {
  .ritmafly-page .fya-bas { padding-bottom: 56px }
  .ritmafly-page .fya-aj { padding-top: 104px }
  .ritmafly-page .fya-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 40px; margin-top: 88px }
  .ritmafly-page .fya-defter-bas { margin-top: 72px }

  .ritmafly-page .fya-panel { --fya-kol: 92px 132px minmax(0, 1fr) 180px; --fya-ara: 24px; --fya-kenar: 104px }
  .ritmafly-page .fya-sutunlar { display: none }
  .ritmafly-page .fya-defter-bas + .fya-panel .fya-defter { margin-top: 20px }
  .ritmafly-page .fya-satir-ic { grid-template-areas: "tarih tur kim tutar" "tarih tur acik tutar"; row-gap: 6px; align-items: center }
  .ritmafly-page .fya-tarih { grid-area: tarih; align-self: start }
  .ritmafly-page .fya-tur { grid-area: tur; align-self: start; padding-top: 10px }
  .ritmafly-page .fya-kim { grid-area: kim; font-size: 26px }
  .ritmafly-page .fya-acik { grid-area: acik; font-size: 15.5px }
  .ritmafly-page .fya-tutar { grid-area: tutar; font-size: 30.6px }
  .ritmafly-page .fya-tarih b { font-size: 30px }

  .ritmafly-page .fya-ozet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 72px }
  .ritmafly-page .fya-ozet-cta { grid-column: 1 / -1 }
}

@media (max-width: 699px) {
  .ritmafly-page .fya-bas { padding-bottom: 40px }
  .ritmafly-page .fya-aj { padding-top: 84px }
  .ritmafly-page .fya-adimlar { grid-template-columns: 1fr; gap: 0; margin-top: 64px }
  .ritmafly-page .fya-adim {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "no ad" "no metin";
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    align-content: start;
    padding: 24px 0 28px
  }
  .ritmafly-page .fya-no { grid-area: no; font-size: 68.6px }
  .ritmafly-page .fya-no .fy-ikon { width: 56px; height: 56px }
  .ritmafly-page .fya-adim-ad { grid-area: ad; margin-top: 8px; font-size: 20px }
  .ritmafly-page .fya-adim-metin { grid-area: metin; margin-top: 6px; font-size: 15.5px }

  .ritmafly-page .fya-aj-bas { text-align: left }
  .ritmafly-page .fya-aj-bas .fy-giris { margin-inline: 0 }
  .ritmafly-page .fya-defter-bas { margin-top: 56px }
  .ritmafly-page .fya-sekme { font-size: 20px }

  .ritmafly-page .fya-panel { --fya-kol: 52px minmax(0, 1fr) auto; --fya-ara: 14px; --fya-kenar: 59px }
  .ritmafly-page .fya-satir-ic { grid-template-areas: "tarih tur tutar" "tarih kim tutar" "tarih acik acik"; row-gap: 4px; padding: 20px 0 20px; align-items: end }
  .ritmafly-page .fya-tarih { display: flex; flex-direction: column; font-size: 11px; letter-spacing: .12em }
  .ritmafly-page .fya-tarih b { margin: 0 0 2px; font-size: 26px }
  .ritmafly-page .fya-tur { padding-top: 0; font-size: 13px }
  .ritmafly-page .fya-tur svg { width: 14px; height: 14px }
  .ritmafly-page .fya-kim { font-size: 20px }
  .ritmafly-page .fya-acik { font-size: 14.5px }
  .ritmafly-page .fya-tutar { font-size: 22px }

  .ritmafly-page .fya-ozet { grid-template-columns: 1fr; gap: 32px; margin-top: 56px }
  .ritmafly-page .fya-ozet-k { padding: 0 }
  .ritmafly-page .fya-ozet-k--odeme { padding: 28px 0 0; box-shadow: inset 0 1px rgba(255, 255, 255, .28) }
  .ritmafly-page .fya-ozet-rakam { margin-top: 12px; font-size: 49.9px }
  .ritmafly-page .fya-ozet-cta { grid-column: auto; padding-top: 4px }
}

/* "düşündüğünüzden" tek kelime; ortak .fy-h2'nin 46px alt sınırında 360–429px'te
   kutudan taşıyor. Yalnız bu başlıkta ve yalnız bu aralıkta genişliğe göre küçülür. */
@media (max-width: 429px) {
  .ritmafly-page .fya-bas-baslik { font-size: min(46px, 11vw) }
}