/* Ritma Fly · hero (fotoğraflı) — "Netlik"
   Ekranlı hero'nun (ritmafly-hero.css) insana dokunan eşi. Sol taraf birebir aynı ölçüde; sağda
   işletme sahibinin fotoğrafı, logodaki eğik şeritten türeyen hafif yatık bir panoda durur. Panonun
   sağ kenarından logodaki F'nin iki çubuğu üst üste taşar (üstte uzun, altta kısa; tek renk).
   Solda iki küçük beyaz kart: üstte son 30 günün tahsilatı, altta telefonun hemen altında son işlem.
   Ölçü: pano genişliği --fyhf-pw; kartlar em ile çizilir, ikincil yazılar 11px'in altına inmez.
   Hareketi ritmafly-hero-foto.js sürer; JS yoksa ya da hareket azaltılmışsa son durum tek kare.
   Ortak değişkenler/sınıflar: ritmafly-ortak.css (.fy-dev, .fy-soluk, .fy-giris, .fy-btn …). */
.ritmafly-page .fy-hero--foto[data-fy-hero-foto] {
  /* pano genişliği: 1440'ta 470, kısa ekranda yüksekliğe göre küçülür */
  --fyhf-pw: clamp(320px, min(33vw, (100svh - 250px) * .8), 470px);
  /* sağ sütun kabın sağ boşluğuna taşar (1440: 60px) */
  --fyhf-tasma: clamp(0px, (100vw - 1240px) / 2 - 40px, 120px);
  /* logonun çubukları: panonun sağ kenarından taşma payı (pano genişliği oranı, çubuğun orta hattında) */
  --fyhf-b1: .19;
  --fyhf-b2: .12;
  --fyhf-k1: #101828;
  --fyhf-k2: #475467;
  --fyhf-k3: #667085;
  --fyhf-yesil: #079455;
  --fyhf-yesil-y: #067647;
  --fyhf-golge: 0 1px 2px rgba(3, 10, 30, .1), 0 14px 30px -10px rgba(3, 10, 30, .36), 0 36px 72px -26px rgba(1, 26, 80, .55);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-height: clamp(720px, calc(100svh - 80px), 960px);
  padding: 0;
  -webkit-font-smoothing: antialiased
}

.ritmafly-page .fy-hero--foto *,
.ritmafly-page .fy-hero--foto *::before,
.ritmafly-page .fy-hero--foto *::after { box-sizing: border-box }

/* =========================================================
   ZEMİN: fotoğrafın arkasında yumuşak mavi ışık + defter çizgileri
   ========================================================= */
.ritmafly-page .fy-hero--foto .fyhf-zemin { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden }
.ritmafly-page .fy-hero--foto .fyhf-isik {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(36% 50% at 73% 50%, rgba(1, 104, 250, .30) 0%, rgba(1, 104, 250, .08) 50%, rgba(1, 104, 250, 0) 74%),
    radial-gradient(60% 40% at 72% 104%, rgba(45, 133, 255, .14) 0%, rgba(45, 133, 255, 0) 70%);
  opacity: 0;
  transition: opacity 1.8s ease .2s
}
.ritmafly-page .fy-hero--foto .fyhf-defter {
  position: absolute;
  left: 0;
  right: 0;
  top: 23px;
  bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 56%, #000 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 62%, transparent 84%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 56%, #000 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 62%, transparent 84%);
  mask-composite: intersect
}
.ritmafly-page .fy-hero--foto .fyhf-defter i {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--i) * 64px);
  height: 1px;
  background: rgba(141, 185, 255, .085);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.6s var(--fy-ease) calc(.25s + var(--i) * .05s)
}
.ritmafly-page .fy-hero--foto.hazir .fyhf-isik { opacity: 1 }
.ritmafly-page .fy-hero--foto.hazir .fyhf-defter i { transform: none }

/* =========================================================
   KABUK: solda metin, sağda pano (kartların ve çubukların taşma payıyla)
   ========================================================= */
.ritmafly-page .fy-hero--foto .fyhf-kap {
  position: relative;
  z-index: 1;
  flex: 1;
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--fyhf-pw) * 1.44 - var(--fyhf-tasma));
  grid-template-rows: 1fr auto;
  column-gap: 48px;
  padding-top: 48px
}

/* =========================================================
   METİN (ekranlı hero ile aynı ölçüler)
   ========================================================= */
.ritmafly-page .fy-hero--foto .fyhf-metin { align-self: center; min-width: 0; padding: 8px 0 44px }

.ritmafly-page .fy-hero--foto .fyhf-ust { gap: 18px; letter-spacing: .14em }
.ritmafly-page .fy-hero--foto .fyhf-ust::before { display: none }
.ritmafly-page .fy-hero--foto .fyhf-ust-logo { display: block; width: auto; height: 40px; max-width: none }
.ritmafly-page .fy-hero--foto .fyhf-ust-ayrac { width: 1px; height: 26px; background: rgba(255, 255, 255, .22) }

.ritmafly-page .fy-hero--foto .fyhf-baslik {
  margin-top: 30px;
  font-size: clamp(38px, 4.3vw, 64px);
  line-height: .9;
  letter-spacing: -.025em
}
/* satırlar maskeden yükselir; maske vurgu şeridini kırpmasın diye yanlara pay */
.ritmafly-page .fy-hero--foto .fyhf-s { display: block; overflow: hidden; padding: .14em .24em .16em; margin: -.14em -.24em -.16em }
.ritmafly-page .fy-hero--foto .fyhf-s > span { display: block; white-space: nowrap; transform: translateY(112%); transition: transform 1.15s var(--fy-ease) }
.ritmafly-page .fy-hero--foto .fyhf-s:nth-child(2) > span { transition-delay: .08s }
.ritmafly-page .fy-hero--foto .fyhf-s:nth-child(3) > span { transition-delay: .2s }
.ritmafly-page .fy-hero--foto.hazir .fyhf-s > span { transform: none }
.ritmafly-page .fy-hero--foto .fyhf-baslik .fy-vurgu::before { transition-delay: 1.05s; transition-duration: 1.1s }

.ritmafly-page .fy-hero--foto .fyhf-ozet { margin-top: 32px; max-width: 31em; font-size: 18.5px; line-height: 1.6 }

.ritmafly-page .fy-hero--foto .fyhf-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; margin-top: 40px }
.ritmafly-page .fy-hero--foto .fy-link { height: 58px }
.ritmafly-page .fy-hero--foto .fy-link svg { color: var(--fy-acik) }
@media (hover: hover) {
  .ritmafly-page .fy-hero--foto .fy-link:hover svg { transform: translateY(3px) }
}

.ritmafly-page .fy-hero--foto .fyhf-guven { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 500; color: var(--fy-yazi-k) }
.ritmafly-page .fy-hero--foto .fyhf-guven li { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap }
.ritmafly-page .fy-hero--foto .fyhf-guven svg { flex: none; width: 15px; height: 15px; color: var(--fy-acik) }

/* giriş */
.ritmafly-page .fy-hero--foto .fyhf-ust,
.ritmafly-page .fy-hero--foto .fyhf-ozet,
.ritmafly-page .fy-hero--foto .fyhf-eylem,
.ritmafly-page .fy-hero--foto .fyhf-guven,
.ritmafly-page .fy-hero--foto .fyhf-serit {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform 1.1s var(--fy-ease)
}
.ritmafly-page .fy-hero--foto .fyhf-ozet { transition-delay: .38s }
.ritmafly-page .fy-hero--foto .fyhf-eylem { transition-delay: .48s }
.ritmafly-page .fy-hero--foto .fyhf-guven { transition-delay: .6s }
.ritmafly-page .fy-hero--foto .fyhf-serit { transition-delay: .8s }
.ritmafly-page .fy-hero--foto.hazir .fyhf-ust,
.ritmafly-page .fy-hero--foto.hazir .fyhf-ozet,
.ritmafly-page .fy-hero--foto.hazir .fyhf-eylem,
.ritmafly-page .fy-hero--foto.hazir .fyhf-guven,
.ritmafly-page .fy-hero--foto.hazir .fyhf-serit { opacity: 1; transform: none }

/* =========================================================
   ALT DEFTER SATIRI: kampanya bağlantısı
   ========================================================= */
.ritmafly-page .fy-hero--foto .fyhf-serit {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 84px;
  padding: 14px 0 18px
}
.ritmafly-page .fy-hero--foto .fyhf-serit::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--fyhf-tasma)); top: 0; height: 1px; background: var(--fy-cizgi-k) }

.ritmafly-page .fy-hero--foto .fyhf-teklif {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.3;
  color: #fff;
  text-decoration: none
}
.ritmafly-page .fy-hero--foto .fyhf-teklif-a { display: inline-flex; align-items: center; gap: 12px; font-weight: 650 }
.ritmafly-page .fy-hero--foto .fyhf-teklif-a::before { content: ""; flex: none; width: 16px; height: 5px; border-radius: 1.5px; background: var(--fy-mavi2); transform: skewX(-42deg) }
.ritmafly-page .fy-hero--foto .fyhf-teklif-b { display: inline-flex; align-items: center; gap: 10px; color: var(--fy-yazi-k2); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .25s ease }
.ritmafly-page .fy-hero--foto .fyhf-teklif svg { flex: none; width: 14px; height: 14px; color: var(--fy-acik); transition: transform .35s var(--fy-ease) }
.ritmafly-page .fy-hero--foto .fyhf-teklif:focus-visible { outline: 2px solid var(--fy-acik); outline-offset: 4px; border-radius: 4px }
@media (hover: hover) {
  .ritmafly-page .fy-hero--foto .fyhf-teklif:hover .fyhf-teklif-b { color: var(--fy-yazi-k) }
  .ritmafly-page .fy-hero--foto .fyhf-teklif:hover svg { transform: translateX(3px) }
}

/* =========================================================
   SAHNE: pano + logonun iki çubuğu + iki kart
   Pano 4:5; sahnenin yazı boyu pano genişliğine bağlı (470px → 16px, en az 14px), kartlar em ile.
   ========================================================= */
.ritmafly-page .fy-hero--foto .fyhf-sahne {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  justify-self: start;
  width: var(--fyhf-pw);
  aspect-ratio: 4 / 5;
  margin: 0 0 44px calc(var(--fyhf-pw) * .2);
  font-size: clamp(14px, calc(var(--fyhf-pw) / 29.375), 16px);
  line-height: 1.3;
  color: var(--fyhf-k1);
  letter-spacing: 0
}
.ritmafly-page .fy-hero--foto .fyhf-sahne svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round }

/* fotoğraf panosu: köşeleri yuvarlatılmış, "/" yönünde hafif yatık paralelkenar (maske, 400×500).
   Açılışta yalnız opaklık ve 12px kayma; fotoğraf hafifçe yakınlaşmış hâlden yerine oturur. */
.ritmafly-page .fy-hero--foto .fyhf-pano {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #1A3366;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cpath d='M82 0H370Q400 0 396.9 29.8L351.1 470.2Q348 500 318 500H30Q0 500 3.1 470.2L48.9 29.8Q52 0 82 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cpath d='M82 0H370Q400 0 396.9 29.8L351.1 470.2Q348 500 318 500H30Q0 500 3.1 470.2L48.9 29.8Q52 0 82 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease .25s, transform 1.4s var(--fy-ease) .25s
}
.ritmafly-page .fy-hero--foto .fyhf-foto {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.05);
  transform-origin: 50% 30%;
  transition: transform 2.4s var(--fy-ease) .25s
}
.ritmafly-page .fy-hero--foto.hazir .fyhf-pano { opacity: 1; transform: none }
.ritmafly-page .fy-hero--foto.hazir .fyhf-foto { transform: none }

/* logonun iki çubuğu (F): fotoğrafın ÖNÜNDE, yalnız çizgi (içi boş). Yüzü kesmesin diye panonun
   sağ kenarındaki raflı arka plandan (%76, mobilde %82; --fyhf-bs) başlar, sağ kenardan dışarı taşar. Vurgu kalemi gibi
   soldan sağa çizilir. Bitiş noktası öncekiyle aynı: panonun o yükseklikteki sağ kenarı
   (maskeden: üstte %98,4, altta %96,4) + taşma payı. */
.ritmafly-page .fy-hero--foto .fyhf-bant {
  position: absolute;
  z-index: 2;
  left: calc(var(--fyhf-bs, .76) * 100%);
  height: calc(var(--fyhf-pw) * .15);
  border-radius: calc(var(--fyhf-pw) * .026);
  background: transparent;
  border: 3px solid #3D8BFF;
  box-shadow: 0 0 22px -4px rgba(1, 104, 250, .6), inset 0 0 18px -6px rgba(1, 104, 250, .45);
  transform: skewX(-42deg) scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.15s var(--fy-ease)
}
.ritmafly-page .fy-hero--foto .fyhf-bant-1 { top: 6%; width: calc((.984 - var(--fyhf-bs, .76) + var(--fyhf-b1)) * 100%); transition-delay: 1s }
.ritmafly-page .fy-hero--foto .fyhf-bant-2 { top: 21.6%; width: calc((.964 - var(--fyhf-bs, .76) + var(--fyhf-b2)) * 100%); transition-delay: 1.15s }
.ritmafly-page .fy-hero--foto.hazir .fyhf-bant { transform: skewX(-42deg) }

/* ---- kartlar: beyaz, kenarlıksız, derin yumuşak gölge ---- */
.ritmafly-page .fy-hero--foto .fyhf-kart {
  position: absolute;
  z-index: 2;
  border-radius: 1em;
  background: #fff;
  box-shadow: var(--fyhf-golge);
  opacity: 0;
  transform: translateY(1em) scale(.97);
  transition: opacity .7s ease, transform 1s var(--fy-ease)
}
.ritmafly-page .fy-hero--foto .fyhf-kart.on { opacity: 1; transform: none }

/* (b) KPI: son 30 günün tahsilatı — etiket, rakam + rozet, rakamın altında vurgu kalemi */
.ritmafly-page .fy-hero--foto .fyhf-kpi { left: -22%; top: 12%; width: max-content; padding: .875em 1.125em 1em }
.ritmafly-page .fy-hero--foto .fyhf-kpi-ad { display: block; font-size: max(11px, .8125em); font-weight: 450; color: var(--fyhf-k3); white-space: nowrap }
.ritmafly-page .fy-hero--foto .fyhf-kpi-ad b { font-weight: 600; color: var(--fyhf-k2) }
.ritmafly-page .fy-hero--foto .fyhf-kpi-satir { display: flex; align-items: center; gap: .625em; margin-top: .3em }
.ritmafly-page .fy-hero--foto .fyhf-kpi-deger { display: block; font-size: 1.625em; font-weight: 750; line-height: 1.15; letter-spacing: -.025em; color: var(--fyhf-k1); white-space: nowrap; font-variant-numeric: tabular-nums }
.ritmafly-page .fy-hero--foto .fyhf-rozet { display: inline-flex; align-items: center; gap: .2em; height: 1.75em; padding: 0 .6em 0 .45em; border-radius: 999px; background: #ECFDF3; color: var(--fyhf-yesil-y); font-size: max(11px, .75em); font-weight: 600; line-height: 1; white-space: nowrap }
.ritmafly-page .fy-hero--foto .fyhf-rozet svg { width: 1.1em; height: 1.1em; stroke-width: 2.6 }

/* imza: rakamın altından ince vurgu kalemi (logodaki eğik çizgi) */
.ritmafly-page .fy-hero--foto .fyhf-k { position: relative; display: inline-block }
.ritmafly-page .fy-hero--foto .fyhf-k::before {
  content: "";
  position: absolute;
  left: -.02em;
  right: -.08em;
  bottom: -.16em;
  height: max(3px, .13em);
  border-radius: 1px;
  background: var(--fy-mavi);
  transform: skewX(-42deg) scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s cubic-bezier(.5, 0, .75, 0)
}
.ritmafly-page .fy-hero--foto .fyhf-k.is-ciz::before { transform: skewX(-42deg) scaleX(1); transform-origin: 0 50%; transition: transform .85s var(--fy-ease) .05s }

/* (a) bildirim: son işlem; telefonun hemen altında, yukarıdan iner ve sıradaki işlemle yenilenir */
.ritmafly-page .fy-hero--foto .fyhf-bil { left: -10%; top: 72%; display: grid; width: 17em; padding: .8125em 1em .8125em .8125em; transform: translateY(-.9em) scale(.97) }
.ritmafly-page .fy-hero--foto .fyhf-bil.on { transform: none }
.ritmafly-page .fy-hero--foto .fyhf-oge {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 2.25em minmax(0, 1fr) auto;
  align-items: center;
  gap: .75em;
  opacity: 0;
  transform: translateY(.7em);
  transition: opacity .45s ease, transform .7s var(--fy-ease)
}
.ritmafly-page .fy-hero--foto .fyhf-oge.on { opacity: 1; transform: none; transition-delay: .12s }
.ritmafly-page .fy-hero--foto .fyhf-oge.gitti { opacity: 0; transform: translateY(-.7em); transition-duration: .3s, .45s }
.ritmafly-page .fy-hero--foto .fyhf-ik { display: grid; place-items: center; width: 2.25em; height: 2.25em; border-radius: 50%; background: #F2F4F7; color: var(--fyhf-k2); transform: scale(.6); transition: transform .55s cubic-bezier(.2, .9, .25, 1.35) }
.ritmafly-page .fy-hero--foto .fyhf-oge.on .fyhf-ik { transform: none; transition-delay: .2s }
.ritmafly-page .fy-hero--foto .fyhf-ik svg { width: 1.125em; height: 1.125em; stroke-width: 2.2 }
.ritmafly-page .fy-hero--foto .fyhf-ik-yesil { background: #DCFAE6; color: var(--fyhf-yesil) }
.ritmafly-page .fy-hero--foto .fyhf-ik-yesil svg { stroke-width: 2.8 }
.ritmafly-page .fy-hero--foto .fyhf-ik-mavi { background: #EEF4FF; color: var(--fy-mavi) }
.ritmafly-page .fy-hero--foto .fyhf-oge-m,
.ritmafly-page .fy-hero--foto .fyhf-oge-s { display: flex; flex-direction: column; gap: .2em; min-width: 0 }
.ritmafly-page .fy-hero--foto .fyhf-oge-s { align-items: flex-end; text-align: right }
.ritmafly-page .fy-hero--foto .fyhf-oge-m b { font-size: .875em; font-weight: 650; letter-spacing: -.005em; color: var(--fyhf-k1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ritmafly-page .fy-hero--foto .fyhf-oge-m small { font-size: max(11px, .78125em); color: var(--fyhf-k3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ritmafly-page .fy-hero--foto .fyhf-oge-s small { order: -1; font-size: max(11px, .71875em); color: var(--fyhf-k3); white-space: nowrap }
.ritmafly-page .fy-hero--foto .fyhf-oge-s b { font-size: .9375em; font-weight: 700; letter-spacing: -.01em; color: var(--fyhf-k1); white-space: nowrap; font-variant-numeric: tabular-nums }
.ritmafly-page .fy-hero--foto .fyhf-oge-s b.fyhf-arti { color: var(--fyhf-yesil-y) }

/* =========================================================
   KIRILIMLAR
   ========================================================= */
@media (max-width: 1279px) {
  .ritmafly-page .fy-hero--foto .fyhf-ozet { font-size: 18px }
}

/* 900–1179: iki sütun sürer, pano küçülür; sütun arası ve taşmalar daralır, güven satırı tek satır */
@media (max-width: 1179px) {
  .ritmafly-page .fy-hero--foto[data-fy-hero-foto] { --fyhf-b1: .17; --fyhf-b2: .11; min-height: clamp(680px, calc(100svh - 80px), 900px) }
  .ritmafly-page .fy-hero--foto .fyhf-kap { grid-template-columns: minmax(0, 1fr) calc(var(--fyhf-pw) * 1.38); column-gap: 32px }
  .ritmafly-page .fy-hero--foto .fyhf-sahne { margin-left: calc(var(--fyhf-pw) * .16) }
  .ritmafly-page .fy-hero--foto .fyhf-kpi { left: -16% }
  .ritmafly-page .fy-hero--foto .fyhf-bil { left: -8% }
  .ritmafly-page .fy-hero--foto .fyhf-ozet { font-size: 17.5px }
  .ritmafly-page .fy-hero--foto .fyhf-guven { gap: 10px 20px; font-size: 14px }
}

/* tek sütun: başlık üstte, fotoğraf altta */
@media (max-width: 899px) {
  .ritmafly-page .fy-hero--foto[data-fy-hero-foto] { --fyhf-pw: min(440px, 62vw); min-height: 0 }
  .ritmafly-page .fy-hero--foto .fyhf-isik { background: radial-gradient(70% 34% at 50% 72%, rgba(1, 104, 250, .30) 0%, rgba(1, 104, 250, .08) 50%, rgba(1, 104, 250, 0) 74%) }
  .ritmafly-page .fy-hero--foto .fyhf-kap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding-top: 72px }
  .ritmafly-page .fy-hero--foto .fyhf-metin { max-width: 720px; padding: 0 0 72px }
  .ritmafly-page .fy-hero--foto .fyhf-baslik { font-size: clamp(38px, 6.2vw, 60px) }
  .ritmafly-page .fy-hero--foto .fyhf-sahne { grid-row: auto; grid-column: 1; justify-self: center; margin: 0 calc(var(--fyhf-pw) * .22) 64px calc(var(--fyhf-pw) * .18) }
  .ritmafly-page .fy-hero--foto .fyhf-serit { padding: 18px 0 30px }
  .ritmafly-page .fy-hero--foto .fyhf-serit::before { right: 0 }
}

@media (max-width: 699px) {
  /* pano satırın %86'sı; kalan sağ payı logonun çubukları doldurur */
  .ritmafly-page .fy-hero--foto[data-fy-hero-foto] { --fyhf-pw: min((100vw - 32px) * .86, 400px); --fyhf-b1: .1; --fyhf-b2: .055; --fyhf-bs: .82 }
  .ritmafly-page .fy-hero--foto .fyhf-kap { width: calc(100% - 32px); padding-top: 40px }
  .ritmafly-page .fy-hero--foto .fyhf-metin { padding-bottom: 48px }
  .ritmafly-page .fy-hero--foto .fyhf-ust { gap: 11px; font-size: 11.5px; letter-spacing: .12em }
  .ritmafly-page .fy-hero--foto .fyhf-ust-logo { height: 32px }
  .ritmafly-page .fy-hero--foto .fyhf-baslik { margin-top: 22px; font-size: clamp(30px, 8.6vw, 42px); line-height: .93 }
  .ritmafly-page .fy-hero--foto .fyhf-ozet { margin-top: 22px; font-size: 16.5px; line-height: 1.55 }
  .ritmafly-page .fy-hero--foto .fyhf-eylem { margin-top: 28px; gap: 4px 24px }
  .ritmafly-page .fy-hero--foto .fy-link { height: 48px; font-size: 15.5px }
  .ritmafly-page .fy-hero--foto .fyhf-guven { margin-top: 18px; gap: 8px 18px; font-size: 13.5px }
  .ritmafly-page .fy-hero--foto .fyhf-teklif { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px }
  .ritmafly-page .fy-hero--foto .fyhf-teklif-b { padding-left: 28px }

  /* yalnız bildirim kalır: panonun alt kenarına biner, taban yazı 14px */
  .ritmafly-page .fy-hero--foto .fyhf-sahne { justify-self: start; margin: 0 0 56px; font-size: 14px }
  .ritmafly-page .fy-hero--foto .fyhf-kpi { display: none }
  .ritmafly-page .fy-hero--foto .fyhf-bil { left: 4%; top: auto; bottom: -1.75em; width: calc(100% + 2%) }
  .ritmafly-page .fy-hero--foto .fyhf-oge-m b { font-size: 1em }
  .ritmafly-page .fy-hero--foto .fyhf-oge-m small { font-size: 12px }
  .ritmafly-page .fy-hero--foto .fyhf-oge-s small { font-size: 11px }
  .ritmafly-page .fy-hero--foto .fyhf-oge-s b { font-size: 1.0625em }
}

/* =========================================================
   HAREKET AZALTILMIŞ / JS YOK: son durum tek kare
   ========================================================= */
.ritmafly-page .fy-hero--foto.fyhf-durgun *,
.ritmafly-page .fy-hero--foto.fyhf-durgun *::before,
.ritmafly-page .fy-hero--foto.fyhf-durgun *::after { transition: none !important; animation: none !important }
@media (prefers-reduced-motion: reduce) {
  .ritmafly-page .fy-hero--foto .fyhf-isik,
  .ritmafly-page .fy-hero--foto .fyhf-defter i,
  .ritmafly-page .fy-hero--foto .fyhf-s > span,
  .ritmafly-page .fy-hero--foto .fyhf-ust,
  .ritmafly-page .fy-hero--foto .fyhf-ozet,
  .ritmafly-page .fy-hero--foto .fyhf-eylem,
  .ritmafly-page .fy-hero--foto .fyhf-guven,
  .ritmafly-page .fy-hero--foto .fyhf-serit,
  .ritmafly-page .fy-hero--foto .fyhf-pano,
  .ritmafly-page .fy-hero--foto .fyhf-foto,
  .ritmafly-page .fy-hero--foto .fyhf-kart { opacity: 1; transform: none; transition: none }
  .ritmafly-page .fy-hero--foto .fyhf-bant { transform: skewX(-42deg); transition: none }
}
/* JS hiç çalışmazsa her şey 2,5 sn sonra kendiliğinden yerine oturur */
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-isik,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-defter i,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-s > span,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-ust,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-ozet,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-eylem,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-guven,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-serit,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-pano,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-foto,
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-kart { animation: fyhf-yedek .01s linear 2.5s forwards }
.ritmafly-page .fy-hero--foto:not(.fyhf-js) .fyhf-bant { animation: fyhf-yedek-bant .01s linear 2.5s forwards }
@keyframes fyhf-yedek { to { opacity: 1; transform: none } }
@keyframes fyhf-yedek-bant { to { transform: skewX(-42deg) } }