/* Ritma Fly · Eğitim + SSS (önek: fys)
   İki bölüm, gece2 zemin. Eğitim: "Her ay" dev yazısı + on iki aylık vurgu cetveli +
   ikonlu defter satırları. SSS: tam genişlik, numarasız defter satırı akordeon.
   Ortak ölçü ve tipografi ritmafly-ortak.css'ten gelir (.fy-*). */

.ritmafly-page .fys-tanimlar { position: absolute; width: 0; height: 0; overflow: hidden }

/* ===================== EĞİTİM ===================== */
.ritmafly-page .fys-egitim.fy-bolum { padding-bottom: 132px }
.ritmafly-page .fys-e-bas .fy-h2 { max-width: 11em }

/* dev "Her ay" + konum */
.ritmafly-page .fys-hep {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 48px;
  margin-top: 104px
}

.ritmafly-page .fys-dev {
  margin: 0;
  font-size: clamp(51.7px, 12.9vw, 168.5px);
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 32;
  color: #fff
}

.ritmafly-page .fys-dev-i { display: inline-block; padding-bottom: .08em }
.ritmafly-page .fys-dev .fy-vurgu::before { height: .14em; bottom: .02em; left: -.02em; right: -.04em }

.ritmafly-page .fys-yer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 .8em;
  font-size: 24px;
  line-height: 1.3;
  color: var(--fy-yazi-k)
}

.ritmafly-page .fys-yer b { display: block; font-weight: 700; color: #fff; letter-spacing: -.01em }
.ritmafly-page .fys-yer-ik {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  fill: none;
  stroke: var(--fy-acik);
  stroke-width: 1.6;
  stroke-linejoin: round
}

/* on iki ay: her ayın altında kısa vurgu kalemi çizgisi; bu ay parlak */
.ritmafly-page .fys-aylar {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  box-shadow: inset 0 1px var(--fy-cizgi-k), inset 0 -1px var(--fy-cizgi-k)
}

.ritmafly-page .fys-ay {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0 20px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fy-yazi-k2)
}

.ritmafly-page .fys-ay i {
  display: block;
  width: 26px;
  height: 6px;
  margin-left: 3px;
  border-radius: 1.5px;
  background: rgba(141, 185, 255, .3);
  transform: skewX(-42deg);
  transform-origin: 0 50%
}

.ritmafly-page .fys-ay.fys-bu { color: #fff }
.ritmafly-page .fys-ay.fys-bu i { width: 54px; background: var(--fy-mavi); box-shadow: 0 0 22px rgba(1, 104, 250, .7) }
.ritmafly-page .fys-ay em {
  position: absolute;
  left: 0;
  bottom: -26px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--fy-acik);
  white-space: nowrap
}

/* alt: metin + üç defter satırı */
.ritmafly-page .fys-e-alt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 88px;
  margin-top: 104px;
  align-items: start
}

.ritmafly-page .fys-e-metin .fy-giris { margin-top: 0 }
.ritmafly-page .fys-e-ek {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fy-yazi-k2)
}

.ritmafly-page .fys-dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 40px }

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

.ritmafly-page .fys-madde {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 8px;
  padding: 28px 0 30px;
  box-shadow: inset 0 -1px var(--fy-cizgi-k)
}

/* madde ikonu: başlığın ilk satırına ortalanır */
.ritmafly-page .fys-madde-ik {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  margin-top: calc((clamp(22px, 2.1vw, 28px) * 1.2 - 26px) / 2)
}

.ritmafly-page .fys-madde-baslik {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: #fff
}

.ritmafly-page .fys-madde-metin { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--fy-yazi-k) }

/* not artık düğmelerin hemen üstünde, ek metnin devamı gibi */
.ritmafly-page .fys-e-not { margin: 18px 0 0; max-width: 34em }

/* ===================== SSS ===================== */
/* SSS ayrı bir bölüm gibi okunsun: açık (buz) zemin, kendi boşluğu; eğitimden ayraç çizgisiyle değil zeminle ayrılır */

.ritmafly-page .fys-s-bas { display: flex; flex-direction: column; align-items: center; text-align: center }
.ritmafly-page .fys-s-bas .fy-h2 { max-width: 12em }
.ritmafly-page .fys-s-bas .fy-giris { margin-top: 26px }

.ritmafly-page .fys-sorular { margin-top: 88px; box-shadow: inset 0 1px var(--fy-cizgi-k) }

.ritmafly-page .fys-soru { position: relative; box-shadow: inset 0 -1px var(--fy-cizgi-k) }

/* açık satırda soldan çok hafif mavi ışık */
.ritmafly-page .fys-soru::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 150px at 160px 50%, rgba(1, 104, 250, .17), transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease
}

.ritmafly-page .fys-soru.fys-acik::before { opacity: 1 }

.ritmafly-page .fys-soru-h { margin: 0; font-size: inherit; letter-spacing: 0 }

.ritmafly-page .fys-soru-btn {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 30px 0 28px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .84);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .3s ease
}

.ritmafly-page .fys-soru-btn:focus-visible { outline: 2px solid var(--fy-acik); outline-offset: -2px; border-radius: 8px }

.ritmafly-page .fys-soru-metin {
  font-size: clamp(22px, 1.85vw, 26px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.02em
}

/* artı → eksi */
.ritmafly-page .fys-soru-ik { position: relative; justify-self: end; width: 20px; height: 20px }
.ritmafly-page .fys-soru-ik::before,
.ritmafly-page .fys-soru-ik::after {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--fy-acik);
  transition: transform .45s var(--fy-ease), background-color .3s ease
}

.ritmafly-page .fys-soru-ik::after { transform: rotate(90deg) }

.ritmafly-page .fys-acik .fys-soru-btn { color: #fff }
.ritmafly-page .fys-acik .fys-soru-ik::after { transform: rotate(0deg) }
.ritmafly-page .fys-acik .fys-soru-ik::before,
.ritmafly-page .fys-acik .fys-soru-ik::after { background: #fff }

/* cevap: yumuşakça açılır */
.ritmafly-page .fys-cevap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .55s var(--fy-ease), visibility 0s linear 0s
}

.ritmafly-page .fys-cevap-ic { min-height: 0; overflow: hidden }

.ritmafly-page .fys-cevap-metin {
  margin: -2px 0 0;
  padding: 0 60px 36px 0;
  max-width: calc(38em + 60px);
  font-size: 18px;
  line-height: 1.65;
  color: var(--fy-yazi-k);
  transition: opacity .45s ease .08s, transform .55s var(--fy-ease) .04s
}

.ritmafly-page .fys-soru:not(.fys-acik) .fys-cevap {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .45s var(--fy-ease), visibility 0s linear .45s
}

.ritmafly-page .fys-soru:not(.fys-acik) .fys-cevap-metin { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .3s ease }

/* son satır */
.ritmafly-page .fys-s-son {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: 56px
}

.ritmafly-page .fys-s-son p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--fy-yazi-k) }
.ritmafly-page .fys-s-son b { font-weight: 700; color: #fff }

@media (hover: hover) {
  .ritmafly-page .fys-soru-btn:hover { color: #fff }
  .ritmafly-page .fys-soru-btn:hover .fys-soru-ik::before,
  .ritmafly-page .fys-soru-btn:hover .fys-soru-ik::after { background: #fff }
}

/* ===================== giriş hareketi =====================
   .fys-hazir betik tarafından, yalnız hareket serbestken eklenir. */
.ritmafly-page .fys-hazir [data-fys-gir].fys-gir {
  transition: opacity .9s var(--fy-ease), transform 1s var(--fy-ease);
  transition-delay: calc(var(--i, 0) * 80ms)
}

.ritmafly-page .fys-hazir [data-fys-gir]:not(.fys-gir) { opacity: 0; transform: translateY(26px) }
.ritmafly-page .fys-hazir .fys-aylar[data-fys-gir]:not(.fys-gir) { opacity: 1; transform: none }
.ritmafly-page .fys-hazir .fys-aylar:not(.fys-gir) i { transform: skewX(-42deg) scaleX(0); background: var(--fy-mavi) }

.ritmafly-page .fys-hazir .fys-dev[data-fys-gir] { transform: none; opacity: 1 }
.ritmafly-page .fys-hazir .fys-dev.fys-gir .fys-dev-i { transition: transform 1.2s var(--fy-ease), opacity .9s ease }

/* aylar: her çizgi sırayla mavi çizilir, sonra sakin tona döner; bu ay mavi kalır */
.ritmafly-page .fys-hazir .fys-aylar.fys-gir i {
  transition: transform .7s var(--fy-ease) calc(var(--i, 0) * 70ms + 200ms), background-color .8s ease calc(var(--i, 0) * 70ms + 750ms)
}
.ritmafly-page .fys-hazir .fys-dev:not(.fys-gir) .fys-dev-i { opacity: 0; transform: translateY(.18em) }

/* SSS satırları yerine oturur: soldan hafif kayma */
.ritmafly-page .fys-hazir .fys-soru[data-fys-gir]:not(.fys-gir) { transform: translateY(18px) }

/* ===================== duyarlı ===================== */
@media (max-width: 1099px) {
  .ritmafly-page .fys-egitim.fy-bolum { padding-bottom: 104px }
  .ritmafly-page .fys-hep { margin-top: 80px }
  .ritmafly-page .fys-e-alt { grid-template-columns: minmax(0, 1fr); margin-top: 80px; gap: 56px }
  .ritmafly-page .fys-soru-btn { grid-template-columns: minmax(0, 1fr) 40px }
  .ritmafly-page .fys-cevap-metin { padding-right: 56px }
}

@media (max-width: 699px) {
  .ritmafly-page .fys-egitim.fy-bolum { padding-bottom: 80px }
  .ritmafly-page .fys-hep { margin-top: 56px; gap: 22px }
  .ritmafly-page .fys-dev { font-size: 16.3vw }
  .ritmafly-page .fys-yer { margin: 0; font-size: 18px }
  .ritmafly-page .fys-yer-ik { width: 22px; height: 22px }
  .ritmafly-page .fys-aylar { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 30px }
  .ritmafly-page .fys-ay { padding: 14px 0 16px; font-size: 12px; gap: 10px }
  .ritmafly-page .fys-ay:nth-child(-n+6) { box-shadow: inset 0 -1px var(--fy-cizgi-k) }
  .ritmafly-page .fys-ay i { width: 20px; height: 5px }
  .ritmafly-page .fys-ay.fys-bu i { width: 34px }
  .ritmafly-page .fys-ay em { position: static; margin-top: -4px; font-size: 10px }
  .ritmafly-page .fys-e-alt { margin-top: 56px; gap: 44px }
  .ritmafly-page .fys-dugmeler { margin-top: 30px }
  .ritmafly-page .fys-madde { grid-template-columns: 40px minmax(0, 1fr); padding: 22px 0 24px }
  .ritmafly-page .fys-madde-ik { width: 24px; height: 24px; margin-top: 1px }
  .ritmafly-page .fys-madde-metin { font-size: 15px }
  .ritmafly-page .fys-s-bas { align-items: flex-start; text-align: left }
  .ritmafly-page .fys-sorular { margin-top: 52px }
  .ritmafly-page .fys-soru-btn { grid-template-columns: minmax(0, 1fr) 22px; gap: 12px; padding: 22px 0 }
  .ritmafly-page .fys-soru-metin { font-size: 20px }
  .ritmafly-page .fys-soru::before { background: radial-gradient(280px 150px at 90px 50%, rgba(1, 104, 250, .17), transparent 72%) }
  .ritmafly-page .fys-soru-ik,
  .ritmafly-page .fys-soru-ik::before,
  .ritmafly-page .fys-soru-ik::after { width: 16px }
  .ritmafly-page .fys-soru-ik { height: 16px }
  .ritmafly-page .fys-soru-ik::before,
  .ritmafly-page .fys-soru-ik::after { top: 7px }
  .ritmafly-page .fys-cevap-metin { margin: 0; padding: 0 34px 26px 0; font-size: 16px }
  .ritmafly-page .fys-s-son { margin-top: 40px }
  .ritmafly-page .fys-s-son p { font-size: 16px }
}

/* betik ilk durumu kurarken geçiş oynatılmaz */
.ritmafly-page .fys-durgun *,
.ritmafly-page .fys-durgun *::before,
.ritmafly-page .fys-durgun *::after { transition: none !important }

@media (prefers-reduced-motion: reduce) {
  .ritmafly-page .fys *,
  .ritmafly-page .fys *::before,
  .ritmafly-page .fys *::after { transition: none !important }
}

/* ---- SSS açık zeminde: koyu zemin renklerinin açık karşılıkları ---- */
.ritmafly-page .fys-sss .fys-sorular { box-shadow: inset 0 1px var(--fy-cizgi-a) }
.ritmafly-page .fys-sss .fys-soru { box-shadow: inset 0 -1px var(--fy-cizgi-a) }
/* açık zeminde arka ışık yok; açık soru yalnız başlık rengiyle (mavi) belirginleşir */
.ritmafly-page .fys-sss .fys-soru::before { display: none }
.ritmafly-page .fys-sss .fys-soru-btn { color: rgba(10, 20, 48, .82) }
.ritmafly-page .fys-sss .fys-soru-btn:focus-visible { outline-color: var(--fy-mavi) }
.ritmafly-page .fys-sss .fys-soru-ik::before,
.ritmafly-page .fys-sss .fys-soru-ik::after { background: var(--fy-mavi) }
.ritmafly-page .fys-sss .fys-acik .fys-soru-btn { color: var(--fy-mavi) }
.ritmafly-page .fys-sss .fys-acik .fys-soru-ik::before,
.ritmafly-page .fys-sss .fys-acik .fys-soru-ik::after { background: var(--fy-mavi) }
.ritmafly-page .fys-sss .fys-cevap-metin,
.ritmafly-page .fys-sss .fys-s-son p { color: var(--fy-yazi-a) }
.ritmafly-page .fys-sss .fys-s-son b { color: var(--fy-lacivert) }
.ritmafly-page .fys-sss .fy-link { color: var(--fy-mavi) }

@media (hover: hover) {
  .ritmafly-page .fys-sss .fys-soru-btn:hover { color: var(--fy-lacivert) }
  .ritmafly-page .fys-sss .fys-soru-btn:hover .fys-soru-ik::before,
  .ritmafly-page .fys-sss .fys-soru-btn:hover .fys-soru-ik::after { background: var(--fy-lacivert) }
  .ritmafly-page .fys-sss .fys-acik .fys-soru-btn:hover { color: var(--fy-mavi) }
  .ritmafly-page .fys-sss .fys-acik .fys-soru-btn:hover .fys-soru-ik::before,
  .ritmafly-page .fys-sss .fys-acik .fys-soru-btn:hover .fys-soru-ik::after { background: var(--fy-mavi) }
}

@media (max-width: 699px) {
}