/* ============================================================
   MOTION — sitenin "canlı" hissi
   Kurallar:
   - Yalnızca transform / opacity / scale / translate animasyonu (GPU, reflow yok).
   - Tüm giriş animasyonları html.motion-ready altında: JS çalışmazsa içerik
     olduğu gibi görünür, hiçbir şey gizli kalmaz.
   - prefers-reduced-motion: reduce → her şey kapalı (en altta).
   ============================================================ */

:root{
  --m-ease:cubic-bezier(.22,.8,.24,1);
  --m-spot:rgba(20,184,166,.12);
}
:root[data-theme="dark"]{--m-spot:rgba(45,212,191,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--m-spot:rgba(45,212,191,.14)}}

/* ---- 1. Okuma ilerleme çubuğu ---- */
.m-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:160;pointer-events:none;
  background:linear-gradient(90deg,#0f766e,#14b8a6 55%,#5eead4);
  transform-origin:0 50%;transform:scaleX(var(--m-p,0));
}
[dir="rtl"] .m-progress{transform-origin:100% 50%}

/* ---- 2. Hero girişi (sayfa açılışında bir kez, kademeli) ---- */
@keyframes m-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes m-pop{from{opacity:0;scale:.94;translate:0 18px}to{opacity:1;scale:1;translate:0 0}}

.motion-ready .hero-copy > *,
.motion-ready .board-hero-grid > div:first-child > *,
.motion-ready .blog-hero-copy > *,
.motion-ready .page-hero .wrap > *{
  animation:m-rise .9s var(--m-ease) backwards;
}
.motion-ready .hero-copy > :nth-child(2),
.motion-ready .board-hero-grid > div:first-child > :nth-child(2),
.motion-ready .blog-hero-copy > :nth-child(2),
.motion-ready .page-hero .wrap > :nth-child(2){animation-delay:.08s}
.motion-ready .hero-copy > :nth-child(3),
.motion-ready .board-hero-grid > div:first-child > :nth-child(3),
.motion-ready .blog-hero-copy > :nth-child(3),
.motion-ready .page-hero .wrap > :nth-child(3){animation-delay:.16s}
.motion-ready .hero-copy > :nth-child(4),
.motion-ready .board-hero-grid > div:first-child > :nth-child(4),
.motion-ready .blog-hero-copy > :nth-child(4),
.motion-ready .page-hero .wrap > :nth-child(4){animation-delay:.24s}
.motion-ready .hero-copy > :nth-child(n+5),
.motion-ready .board-hero-grid > div:first-child > :nth-child(n+5),
.motion-ready .blog-hero-copy > :nth-child(n+5),
.motion-ready .page-hero .wrap > :nth-child(n+5){animation-delay:.32s}

/* Kapak kartları: kendi transform'larını (eğim/hover) bozmamak için
   bağımsız scale/translate özellikleriyle girer. */
.motion-ready .home-cover-card,
.motion-ready .board-cover,
.motion-ready .blog-featured,
.motion-ready .home-magazine .hero-media .media-frame{
  animation:m-pop 1.1s var(--m-ease) .18s backwards;
  /* backwards: bitince stil bırakmaz; paralaks ve hover transform'u serbest kalır */
}

/* ---- 3. Hero fotoğraflarında yavaş Ken Burns kayması ---- */
@keyframes m-drift{from{scale:1}to{scale:1.07}}
.motion-ready .home-magazine .hero::before,
.motion-ready .board-hero::before,
.motion-ready .blog-flow-hero::before,
.motion-ready .page-hero .hero-bg{
  transform-origin:78% 40%;will-change:scale;
  animation:m-drift 22s ease-in-out infinite alternate;
}

/* ---- 4. Kaydırınca kademeli belirme (JS .m-rise ekler, görünce .in) ---- */
.motion-ready .m-rise{
  opacity:0;translate:0 14px;
  transition:opacity .35s var(--m-ease),translate .35s var(--m-ease);
  transition-delay:calc(var(--i,0) * 25ms);
}
.motion-ready .m-rise.in{opacity:1;translate:0 0}

/* ---- 5. Kartlarda imleci takip eden yumuşak ışık ---- */
.m-spot{isolation:isolate}
/* z-index:-1 + isolation: ışık kartın zemininin üstünde, içeriğin altında kalır;
   kart içindeki öğelerin konumlandırmasına dokunulmaz. */
.m-spot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--m-spot),transparent 62%);
  opacity:0;transition:opacity .35s ease;
}
.m-spot:hover::after{opacity:1}

/* ---- 6. Butonlar: birincil butonda ışık süzülmesi ---- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .7s var(--m-ease);
}
.btn-primary:hover::after{left:120%}
.btn:active{transform:translateY(0) scale(.98)}

/* ---- 7. WhatsApp: birkaç saniyede bir nazik nabız halkası ---- */
@keyframes m-ring{0%{opacity:.55;scale:1}70%,100%{opacity:0;scale:1.55}}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px #25d366;opacity:0;
}
.motion-ready .wa-float::before{animation:m-ring 3.6s ease-out 2s infinite}

/* ---- 8. Küçük dokunuşlar ---- */
/* Kart ikonları hover'da hafifçe süzülür */
.reason-card .r-icon,.card .c-icon,.info-row .ic{transition:transform .45s var(--m-ease)}
.reason-card:hover .r-icon,a.card:hover .c-icon,.info-row:hover .ic{transform:translateY(-3px) rotate(-4deg)}
/* Kayan şeritler üzerine gelince durur (okunabilsin) */
.home-topic-ticker:hover .home-topic-track,
.blog-ticker:hover .blog-ticker-track,
.home-service-flow:hover .home-flow-track,
.inner-marquee:hover *,
.treatment-marquee:hover *{animation-play-state:paused}

/* ============================================================
   GENİŞ EKRAN YAN ALANLARI (≥1500px: içerik 1240px, yanlarda ≥130px boşluk)
   Sol: bölüm gezgini · Sağ: hızlı iletişim rayı · Arada: çizgi çizimler
   ============================================================ */
:root{--m-gutter:max(0px,calc((100vw - var(--container,1240px)) / 2))}

/* ---- Sol: bölüm gezgini ---- */
.m-sidenav{
  position:fixed;top:50%;inset-inline-start:26px;z-index:80;
  transform:translateY(-50%);display:none;
  opacity:0;translate:-12px 0;transition:opacity .5s var(--m-ease),translate .5s var(--m-ease);
  pointer-events:none;
}
.m-sidenav.show{opacity:1;translate:0 0}
.m-sidenav ol{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:4px}
.m-sidenav ol::before,.m-sidenav ol::after{
  content:"";position:absolute;inset-inline-start:15px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:var(--site-border);
}
.m-sidenav ol::after{
  background:linear-gradient(180deg,#0f766e,#14b8a6);
  transform-origin:top;transform:scaleY(var(--m-nav,0));transition:transform .25s linear;
}
.m-sidenav a{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:32px;height:28px;
  color:var(--site-muted);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-decoration:none;
  pointer-events:auto;
}
.m-sidenav .dot{
  flex:none;display:grid;place-items:center;width:32px;height:28px;
  font-variant-numeric:tabular-nums;
}
.m-sidenav .dot::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--color-surface);
  border:2px solid var(--site-border-strong);transition:all .3s var(--m-ease);
}
.m-sidenav .lbl{
  position:absolute;inset-inline-start:42px;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;
  padding:5px 0;border-radius:999px;
  transition:max-width .45s var(--m-ease),opacity .3s ease,padding .45s var(--m-ease);
}
.m-sidenav a:hover .lbl,.m-sidenav a:focus-visible .lbl{
  max-width:var(--m-lblw,220px);opacity:1;padding:5px 12px;
  background:var(--color-surface);box-shadow:0 8px 24px -14px rgba(7,26,45,.45);border:1px solid var(--site-border);
}
.m-sidenav a:hover .dot::before{border-color:#14b8a6;scale:1.25}
.m-sidenav a.active{color:var(--site-ink)}
.m-sidenav a.active .dot::before{background:#14b8a6;border-color:#14b8a6;scale:1.35;box-shadow:0 0 0 5px rgba(20,184,166,.18)}
.m-sidenav a.passed .dot::before{background:#14b8a6;border-color:#14b8a6}
/* Etiketler yalnızca hover/odakta açılır: sürekli açık etiket yan çizimlerin üstüne binerdi */

/* ---- Sağ: hızlı iletişim rayı ---- */
.m-quickrail{
  position:fixed;top:50%;inset-inline-end:22px;z-index:80;display:none;
  flex-direction:column;gap:12px;transform:translateY(-50%);
  opacity:0;translate:14px 0;pointer-events:none;
  transition:opacity .5s var(--m-ease),translate .5s var(--m-ease);
}
.m-quickrail.show{opacity:1;translate:0 0;pointer-events:auto}
.m-quickrail a,.m-quickrail button{
  position:relative;display:block;width:58px;height:58px;padding:0;border:0;border-radius:18px;
  background:none;cursor:pointer;font:inherit;color:inherit;
  /* Bulanıklık katman başına değil buton başına tek sefer: kaydırmada 8 yerine 4 blur */
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  transition:transform .35s var(--m-ease);
}
/* İki cam katman: A = koyu cam (açık zemin için), B = açık cam (koyu zemin için).
   B, JS'in ölçtüğü koyu zemin aralıklarına maskelenir; buton bölüm sınırında
   ikiye bölünüp her parçası altındaki zemine zıt renkte görünür. */
.m-quickrail .qr{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.m-quickrail .qr-a{
  background:linear-gradient(145deg,rgba(15,30,42,.88),rgba(7,17,29,.76));
  color:#fff;border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 34px -18px rgba(7,17,29,.7);
}
.m-quickrail .qr-b{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,246,248,.88));
  color:#0b1a24;border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 34px -18px rgba(0,0,0,.6);
  -webkit-mask-image:var(--qr-mask,linear-gradient(transparent,transparent));
  mask-image:var(--qr-mask,linear-gradient(transparent,transparent));
}
.m-quickrail svg{width:24px;height:24px}
.m-quickrail a:hover,.m-quickrail button:hover,.m-quickrail a:focus-visible,.m-quickrail button:focus-visible{transform:translateX(-5px) scale(1.04)}
[dir="rtl"] .m-quickrail a:hover,[dir="rtl"] .m-quickrail button:hover{transform:translateX(5px) scale(1.04)}
/* Hover: her iki katman da marka rengine döner (zeminden bağımsız net vurgu) */
.m-quickrail a:hover .qr,.m-quickrail button:hover .qr,.m-quickrail a:focus-visible .qr,.m-quickrail button:focus-visible .qr{
  background:linear-gradient(145deg,rgba(45,212,191,.92),rgba(20,184,166,.86));color:#062a26;border-color:rgba(255,255,255,.35);
}
.m-quickrail .m-wa:hover .qr,.m-quickrail .m-wa:focus-visible .qr{background:linear-gradient(145deg,rgba(37,211,102,.95),rgba(29,170,82,.9));color:#fff}
.m-quickrail .tip{
  position:absolute;inset-inline-end:calc(100% + 12px);top:50%;translate:8px -50%;
  white-space:nowrap;padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:700;
  background:var(--site-ink);color:var(--site-surface);opacity:0;pointer-events:none;
  transition:opacity .25s ease,translate .3s var(--m-ease);
}
[dir="rtl"] .m-quickrail .tip{translate:-8px -50%}
.m-quickrail a:hover .tip,.m-quickrail button:hover .tip,.m-quickrail a:focus-visible .tip,.m-quickrail button:focus-visible .tip{opacity:1;translate:0 -50%}
.m-quickrail .m-top svg{transition:transform .3s var(--m-ease)}
.m-quickrail .m-top:hover svg{transform:translateY(-3px)}

@media (min-width:1500px){
  .m-sidenav{display:block}
  .m-quickrail{display:flex}
  /* Ray sağ kenarda WhatsApp dahil tüm kısayolları sunuyor: yüzen butonla çakışmasın */
  .has-quickrail .wa-float{opacity:0;pointer-events:none;scale:.6;transition:opacity .4s ease,scale .4s var(--m-ease)}
  .has-quickrail.rail-hidden .wa-float{opacity:1;pointer-events:auto;scale:1}
}

/* ---- Aradaki boşluk: iki yanda karşılıklı fizyoterapi çizimleri ---- */
.m-deco-host{position:relative;overflow-x:clip}
.m-deco{display:none}
@media (min-width:1640px){
  .m-deco{display:block}
  .m-deco{
    position:absolute;top:50%;z-index:0;pointer-events:none;
    width:clamp(90px,calc(var(--m-gutter) - 150px),210px);
    translate:0 -50%;color:var(--site-accent-text);opacity:.55;
  }
  .m-deco.side-start{inset-inline-start:calc(var(--m-gutter) / 2 - clamp(90px,calc(var(--m-gutter) - 150px),210px) / 2 + 30px)}
  .m-deco.side-end{inset-inline-end:calc(var(--m-gutter) / 2 - clamp(90px,calc(var(--m-gutter) - 150px),210px) / 2 + 26px)}
  .m-deco svg{width:100%;height:auto;overflow:visible;will-change:translate,rotate;animation:m-float 9s ease-in-out infinite alternate}
  .m-deco svg *{vector-effect:non-scaling-stroke}
  /* İkinci set (egzersiz figürleri): biraz daha soluk, ters ritimde süzülür */
  .m-deco-alt{opacity:.5}
  .m-deco-alt svg{animation-duration:11.5s;animation-direction:alternate-reverse}
}
@keyframes m-float{from{translate:0 -10px;rotate:-1.5deg}to{translate:0 10px;rotate:1.5deg}}
/* Çizgi çizme: pathLength=1 ile her yol 0→1 çizilir */
.m-deco .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--m-ease)}
.m-deco .draw:nth-child(2){transition-delay:.1s}
.m-deco .draw:nth-child(3){transition-delay:.2s}
.m-deco .draw:nth-child(n+4){transition-delay:.3s}
/* Figürler karşı taraftaki çizimden biraz sonra çizilir: iki taraf aynı anda başlamaz */
.m-deco.m-deco-alt .draw{transition-delay:.15s}
.m-deco.m-deco-alt .draw:nth-child(2){transition-delay:.25s}
.m-deco.m-deco-alt .draw:nth-child(3){transition-delay:.35s}
.m-deco.m-deco-alt .draw:nth-child(n+4){transition-delay:.45s}
.m-deco .fill{opacity:0;transition:opacity .5s ease .5s}
.m-deco-host.m-drawn .m-deco .draw{stroke-dashoffset:0}
.m-deco-host.m-drawn .m-deco .fill{opacity:1}

/* ---- Açık bölümlerin yan alanları: #DEE8ED tonu, içeriğe doğru yumuşakça beyaza geçer ----
   JS yalnızca aydınlık temada ve zemini düz açık renk olan bölümlere .m-tint ekler.
   Bölümün tamamı boyanmaz: bu tonun üstünde ikincil metin AA sınırının altına düşerdi. */
@media (min-width:1500px){
  .m-tint{
    --m-tone:#dee8ed;--m-fade:120px;
    background-image:linear-gradient(90deg,
      var(--m-tone) 0,
      var(--m-tone) calc(var(--m-gutter) - var(--m-fade)),
      rgba(222,232,237,0) calc(var(--m-gutter) + 8px),
      rgba(222,232,237,0) calc(100% - var(--m-gutter) - 8px),
      var(--m-tone) calc(100% - var(--m-gutter) + var(--m-fade)),
      var(--m-tone) 100%),
      var(--m-orig-bg,none);
  }
}

/* ---- Başlıklar kelime kelime yükselir ---- */
.m-words .w{display:inline-block}
.motion-ready .m-words .w{opacity:0;translate:0 .35em;transition:opacity .3s var(--m-ease),translate .35s var(--m-ease);transition-delay:calc(var(--w) * 18ms)}
.motion-ready .m-words.in .w{opacity:1;translate:0 0}

/* ---- Fotoğraflar perde açılır gibi ---- */
.motion-ready .m-curtain{clip-path:inset(0 0 100% 0 round 8px);transition:clip-path .5s var(--m-ease)}
.motion-ready .m-curtain.in{clip-path:inset(0 0 0 0 round 0)}

/* ---- Göz atlığı (eyebrow) önünde çizgi uzar ---- */
.motion-ready .eyebrow.m-line{display:inline-flex;align-items:center;gap:10px}
.motion-ready .eyebrow.m-line::before{
  content:"";width:0;height:2px;border-radius:2px;background:currentColor;opacity:.7;
  transition:width .35s var(--m-ease) .05s;
}
.motion-ready .eyebrow.m-line.in::before{width:26px}
.center .eyebrow.m-line,.section-head.center .eyebrow.m-line{justify-content:center}

@media print{.m-sidenav,.m-quickrail,.m-deco,.m-progress{display:none!important}}

/* ---- Tekrar oynatma: ekran dışındayken sıfırlama ANLIK olur ----
   Geçiş süresi yalnızca "giriş" durumunda tanımlı; sınıf kalkınca öğe beklemeden
   başlangıç konumuna döner, böylece her dönüşte animasyon tam baştan oynar. */
.motion-ready .m-rise:not(.in),
.motion-ready .m-words:not(.in) .w,
.motion-ready .m-curtain:not(.in),
.reveal:not(.is-visible),
.m-deco-host:not(.m-drawn) .m-deco .draw,
.m-deco-host:not(.m-drawn) .m-deco .fill{transition-duration:0s!important;transition-delay:0s!important}
.motion-ready .eyebrow.m-line:not(.in)::before{transition-duration:0s;transition-delay:0s}

/* ---- Hareket azaltma: hepsini kapat ---- */
@media (prefers-reduced-motion:reduce){
  .m-progress{display:none}
  .motion-ready .m-rise{opacity:1;translate:none;transition:none}
  .motion-ready *,.motion-ready *::before,.motion-ready *::after{animation:none!important}
  .m-spot::after,.btn-primary::after{display:none}
  .m-deco .draw{stroke-dashoffset:0;transition:none}
  .m-deco .fill{opacity:1}
  .m-words .w,.m-curtain{opacity:1!important;translate:none!important;clip-path:none!important}
}

/* ---- Sayfa başlığı (hero) okunabilirlik düzeltmesi ----
   layout.css'teki .hero-bg::after, eski koyu hero için yazılmış lacivert bir karartma.
   Açık temada koyu metnin (yol, açıklama) üstüne düşüp onu okunmaz yapıyordu.
   Açık temada kaldırılır; koyu temada korunur. */
:root[data-theme="light"] .page-hero .hero-bg::after{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .page-hero .hero-bg::after{display:none}}
/* Hero ızgarasında buton tüm sütuna yayılmasın */
.page-hero .wrap > .btn{justify-self:start;width:max-content;max-width:100%}

/* ---- Ana sayfa hero videosu daha görünür ----
   Metin sütunu (sol ~%52) okunur kalacak kadar örtülü; videonun oynadığı sağ taraf
   çok daha şeffaf. Video rengi de soluklaştırılmıyor. */
.home-magazine .hero > .home-hero-video{filter:saturate(1) contrast(1)}
.home-magazine .hero::before{
  background:linear-gradient(90deg,rgba(246,251,251,.94) 0 40%,rgba(246,251,251,.8) 52%,rgba(246,251,251,.14) 64%,transparent 78%);
}
:root[data-theme="dark"] .home-magazine .hero::before{
  background:linear-gradient(90deg,rgba(7,17,29,.95) 0 40%,rgba(7,17,29,.82) 52%,rgba(7,17,29,.18) 64%,transparent 78%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .home-magazine .hero::before{
    background:linear-gradient(90deg,rgba(7,17,29,.95) 0 40%,rgba(7,17,29,.82) 52%,rgba(7,17,29,.18) 64%,transparent 78%);
  }
}
/* Tablet/mobil: metin videonun üstünde; üst kısım okunur, alt kısım video görünür */
@media (max-width:1024px){
  .home-magazine .hero::before{background:linear-gradient(180deg,rgba(246,251,251,.92) 0 44%,rgba(246,251,251,.55) 66%,rgba(246,251,251,.12) 100%)}
  :root[data-theme="dark"] .home-magazine .hero::before{background:linear-gradient(180deg,rgba(7,17,29,.92) 0 44%,rgba(7,17,29,.56) 66%,rgba(7,17,29,.14) 100%)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .home-magazine .hero::before{background:linear-gradient(180deg,rgba(7,17,29,.92) 0 44%,rgba(7,17,29,.56) 66%,rgba(7,17,29,.14) 100%)}
  }
}

/* ---- Blog: tüm yazılar arşivi ---- */
.blog-all{margin-top:clamp(40px,6vw,72px)}
.blog-all .card-grid{margin-top:22px}
.blog-all .blog-card{display:flex;flex-direction:column;gap:8px;height:100%}
.blog-all .blog-card h3{font-size:1.08rem;line-height:1.3}
.blog-all .blog-card p{font-size:.92rem;line-height:1.55;color:var(--site-muted,#5A6B7D)}

/* ---- Bülten sonucu mesajı ---- */
.sf-news .newsletter-msg{margin:10px 0 0;padding:9px 12px;border-radius:10px;font-size:.9rem;font-weight:600;line-height:1.4}
.sf-news .newsletter-msg.ok{background:rgba(94,234,212,.14);color:#99f6e4;border:1px solid rgba(94,234,212,.35)}
.sf-news .newsletter-msg.err{background:rgba(248,113,113,.12);color:#fecaca;border:1px solid rgba(248,113,113,.35)}

/* ---- SSS: fotoğraflı öne çıkan kutu her temada koyu zeminli; yazılar açık renk olmalı ----
   .faq-board-page .faq-feature açık zemin + koyu yazı veriyordu; .has-faq-photo zemini koyulaştırınca
   açık temada yazı okunmuyordu. */
.faq-feature.has-faq-photo{border-color:transparent}
.faq-board-page .faq-feature.has-faq-photo span{color:#bff4ee}
.faq-board-page .faq-feature.has-faq-photo h2{color:#fff}
.faq-board-page .faq-feature.has-faq-photo p{color:rgba(255,255,255,.84)}

/* ---- Sayfa yolu ayraçları okunur ---- */
.breadcrumb .sep{color:var(--site-muted,#5A6B7D);opacity:1}
:root[data-theme="dark"] .breadcrumb .sep{color:#9fb0bd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .breadcrumb .sep{color:#9fb0bd}}