/* Ritma Fly · ortak tasarım dili ("Netlik")
   Koyu lacivert zemin, dev beyaz yazı, defter düzeni (ince çizgiler, hizalı
   rakamlar). İmza: logodaki iki eğik şerit = önemli olanın altını çizen mavi
   vurgu kalemi (.fy-vurgu). Bölümler bu sınıfları kullanır; kendi
   ayrıntılarını kendi önekleriyle ekler. */
.ritmafly-page {
  --fy-gece: #050B1E;
  --fy-gece2: #091431;
  --fy-gece3: #0E1C42;
  --fy-mavi: #0168FA;
  --fy-mavi2: #2D85FF;
  --fy-acik: #8DB9FF;
  --fy-buz: #EEF3FC;
  --fy-lacivert: #0A1430;
  --fy-yazi-k: rgba(255, 255, 255, .74);
  --fy-yazi-k2: rgba(255, 255, 255, .5);
  --fy-yazi-a: #46526B;
  --fy-cizgi-k: rgba(255, 255, 255, .1);
  --fy-cizgi-a: rgba(10, 20, 48, .1);
  --fy-arti: #3DDC97;
  --fy-eksi: #FF7A7A;
  --fy-ease: cubic-bezier(.2, .75, .15, 1);
  background: var(--fy-gece);
  color: #fff
}

.ritmafly-page ::selection { background: var(--fy-mavi); color: #fff }
.ritmafly-page main { overflow-x: clip }

/* ---- zeminler: koyu ağırlıklı ritim; buz açık nefes bölümü ---- */
.ritmafly-page .fy-z-gece { background: var(--fy-gece); color: #fff }
.ritmafly-page .fy-z-gece2 { background: var(--fy-gece2); color: #fff }
.ritmafly-page .fy-z-mavi { background: var(--fy-mavi); color: #fff }
.ritmafly-page .fy-z-buz { background: var(--fy-buz); color: var(--fy-lacivert) }

/* ---- ölçü ---- */
.ritmafly-page .fy-kap { width: min(1240px, 100% - 48px); margin-inline: auto }
.ritmafly-page .fy-bolum { position: relative; padding: 168px 0; scroll-margin-top: 96px }

/* ---- tipografi ---- */
.ritmafly-page .fy-ust {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fy-acik)
}

.ritmafly-page .fy-z-buz .fy-ust { color: var(--fy-mavi) }
.ritmafly-page .fy-z-mavi .fy-ust { color: rgba(255, 255, 255, .8) }

/* üst etiketin önündeki küçük vurgu çizgisi (logonun şeridi) */
.ritmafly-page .fy-ust::before {
  content: "";
  width: 18px;
  height: 5px;
  border-radius: 1.5px;
  background: currentColor;
  transform: skewX(-42deg)
}

.ritmafly-page .fy-dev,
.ritmafly-page .fy-h2 {
  margin: 26px 0 0;
  font-weight: 790;
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 32;
  text-wrap: balance
}

.ritmafly-page .fy-dev { font-size: clamp(42px, 5.4vw, 80px); line-height: .96 }
.ritmafly-page .fy-h2 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1 }

/* ikincil satır soluk: dev başlıkta ikinci düşünce */
.ritmafly-page .fy-soluk { color: var(--fy-yazi-k2) }
.ritmafly-page .fy-z-buz .fy-soluk { color: rgba(10, 20, 48, .38) }

.ritmafly-page .fy-giris {
  margin: 30px 0 0;
  max-width: 34em;
  font-size: 20px;
  line-height: 1.6;
  color: var(--fy-yazi-k)
}

.ritmafly-page .fy-z-buz .fy-giris { color: var(--fy-yazi-a) }
.ritmafly-page .fy-sayi { font-variant-numeric: tabular-nums }
.ritmafly-page .fy-not { font-size: 13px; line-height: 1.55; color: var(--fy-yazi-k2) }
.ritmafly-page .fy-z-buz .fy-not { color: rgba(10, 20, 48, .5) }

/* ---- ikon ailesi: /assets/img/ritmafly/ikonlar.svg (#fyi-*) ----
   Tek çizgi dili; renk currentColor, kalınlık buradan (dev ikonlar inceltir).
   Renk: açık zeminde mavi, koyu zeminde açık mavi, mavi zeminde beyaz. */
.ritmafly-page .fy-ikon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--fy-acik)
}

.ritmafly-page .fy-z-buz .fy-ikon { color: var(--fy-mavi) }
.ritmafly-page .fy-z-mavi .fy-ikon { color: #fff }

/* ---- imza: vurgu kalemi ----
   <span class="fy-vurgu">kelime</span> — altından eğik mavi şerit geçer.
   Betik ya da bölüm görününce .fy-acik eklenir; şerit soldan sağa çizilir. */
.ritmafly-page .fy-vurgu { position: relative; z-index: 0; white-space: nowrap }

.ritmafly-page .fy-vurgu::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.06em;
  right: -.1em;
  bottom: .06em;
  height: .36em;
  border-radius: .05em;
  background: var(--fy-mavi);
  transform: skewX(-42deg) scaleX(var(--fy-v, 1));
  transform-origin: 0 50%;
  transition: transform 1s var(--fy-ease)
}

.ritmafly-page .fy-z-mavi .fy-vurgu::before { background: var(--fy-gece) }

@media (prefers-reduced-motion: no-preference) {
  .ritmafly-page .fy-vurgu:not(.fy-acik) { --fy-v: 0 }
}

/* ---- düğmeler ---- */
.ritmafly-page .fy-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 26px 0 28px;
  border: 0;
  border-radius: 12px;
  background: var(--fy-mavi);
  color: #fff;
  font: inherit;
  font-size: 16.5px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 18px 44px -16px rgba(1, 104, 250, .9);
  transition: background-color .25s ease, box-shadow .3s ease, transform .3s var(--fy-ease)
}

.ritmafly-page .fy-z-mavi .fy-btn { background: #fff; color: var(--fy-mavi); box-shadow: 0 18px 44px -18px rgba(3, 20, 70, .7) }

.ritmafly-page .fy-btn svg { width: 16px; height: 16px; transition: transform .3s var(--fy-ease) }

.ritmafly-page .fy-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 600;
  color: inherit;
  text-decoration: none
}

.ritmafly-page .fy-link svg { width: 16px; height: 16px; transition: transform .3s var(--fy-ease) }

@media (hover: hover) {
  .ritmafly-page .fy-btn:hover { background: var(--fy-mavi2); transform: translateY(-1px); box-shadow: 0 22px 52px -14px rgba(1, 104, 250, 1) }
  .ritmafly-page .fy-z-mavi .fy-btn:hover { background: #fff }
  .ritmafly-page .fy-btn:hover svg,
  .ritmafly-page .fy-link:hover svg { transform: translateX(3px) }
}

.ritmafly-page .fy-btn:focus-visible,
.ritmafly-page .fy-link:focus-visible { outline: 2px solid var(--fy-acik); outline-offset: 4px }
.ritmafly-page .fy-z-buz .fy-btn:focus-visible,
.ritmafly-page .fy-z-buz .fy-link:focus-visible { outline-color: var(--fy-mavi) }

/* ---- defter satırı: ince çizgiyle ayrılan, rakamı sağa hizalı satır ---- */
.ritmafly-page .fy-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  box-shadow: inset 0 -1px var(--fy-cizgi-k)
}

.ritmafly-page .fy-z-buz .fy-satir { box-shadow: inset 0 -1px var(--fy-cizgi-a) }

/* ---- duyarlı ---- */
@media (max-width: 1099px) {
  .ritmafly-page .fy-bolum { padding: 124px 0 }
  .ritmafly-page .fy-giris { font-size: 18px }
}

@media (max-width: 699px) {
  .ritmafly-page .fy-kap { width: calc(100% - 32px) }
  .ritmafly-page .fy-bolum { padding: 92px 0 }
  .ritmafly-page .fy-dev, .ritmafly-page .fy-h2 { margin-top: 18px }
  .ritmafly-page .fy-giris { margin-top: 22px; font-size: 17px }
  .ritmafly-page .fy-btn { height: 52px; font-size: 15.5px }
}