/* =========================================================
   Modapol – Gradyan geçişleri & ek animasyonlar
   ========================================================= */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --hue { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --grad-flow: linear-gradient(100deg, #5ef2d6, #2bb3ff, #8b7bff, #ff8ad8, #5ef2d6);
  --grad-conic: conic-gradient(from var(--angle), #5ef2d6, #2bb3ff, #8b7bff, #ff8ad8, #ffd36e, #5ef2d6);
}

/* ---------- Akan gradyan yazılar ---------- */
.gradient-text,
.section-title em,
.stat strong,
.marquee span:nth-of-type(odd) {
  background: var(--grad-flow);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: flow 8s linear infinite;
}
.section-title em { padding-right: .03em; }
@keyframes flow { to { background-position: 300% 0; } }

/* ---------- Kaydırma ilerleme çubuğu ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none;
  background: var(--grad-flow); background-size: 300% 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  animation: flow 6s linear infinite;
  box-shadow: 0 0 12px rgba(94,242,214,.7);
}

/* ---------- Butonlar: canlı gradyan ---------- */
.btn--wa {
  background: linear-gradient(120deg, #1ebe5b, #2fe17a, #25d366, #14b39a, #1ebe5b);
  background-size: 300% 100%;
  animation: flow 6s linear infinite;
}
.btn--ghost { position: relative; border-color: transparent; }
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: var(--grad-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-angle 4s linear infinite;
}
@keyframes spin-angle { to { --angle: 360deg; } }

/* ---------- Logo ---------- */
.logo__mark {
  background: linear-gradient(135deg, #5ef2d6, #2bb3ff, #8b7bff, #5ef2d6);
  background-size: 300% 300%;
  animation: flow-diag 6s ease-in-out infinite;
}
@keyframes flow-diag { 50% { background-position: 100% 100%; } }

/* ---------- Hero: renk değiştiren atmosfer ---------- */
.hero__aurora { animation: hue-rotate 20s linear infinite; opacity: .65; }
@keyframes hue-rotate { to { filter: blur(70px) hue-rotate(360deg); } }
.hero__aurora span:nth-child(4) { width: 28vw; height: 28vw; left: 35%; top: -5%; background: #ff6fd0; opacity: .3; animation-delay: -3s; }
.hero__beams { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__beams span {
  position: absolute; top: -30%; width: 2px; height: 60%;
  background: linear-gradient(180deg, transparent, rgba(94,242,214,.9), transparent);
  filter: drop-shadow(0 0 6px #5ef2d6);
  animation: beam 7s linear infinite;
  opacity: .0;
}
.hero__beams span:nth-child(1) { left: 12%; animation-delay: 0s; }
.hero__beams span:nth-child(2) { left: 38%; animation-delay: 2.3s; background: linear-gradient(180deg, transparent, rgba(43,179,255,.9), transparent); }
.hero__beams span:nth-child(3) { left: 63%; animation-delay: 4.1s; background: linear-gradient(180deg, transparent, rgba(255,138,216,.8), transparent); }
.hero__beams span:nth-child(4) { left: 86%; animation-delay: 5.6s; }
@keyframes beam {
  0% { transform: translateY(0) rotate(18deg); opacity: 0; }
  15% { opacity: .8; }
  70% { opacity: .6; }
  100% { transform: translateY(260%) rotate(18deg); opacity: 0; }
}
.hero__title .line:nth-child(1) .word,
.hero__title .line:nth-child(2) .word {
  background: linear-gradient(100deg, #ffffff 30%, #bffcf2 45%, #ffffff 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 6s ease-in-out infinite;
}
@keyframes shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* Hero metninin harfleri tek tek */
.hero__lead .w { display: inline-block; opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity .6s, transform .6s, filter .6s; transition-delay: calc(var(--i) * 18ms + .5s); }
.is-ready .hero__lead .w { opacity: 1; transform: none; filter: none; }

/* Yüzen kartlar: gradyan kenar */
.float-card { border-color: transparent; }
.float-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--grad-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-angle 5s linear infinite; opacity: .8;
}
.float-card__icon, .about__chip svg, .why-item > span, .wa-modal__badge {
  background: linear-gradient(135deg, #5ef2d6, #2bb3ff, #8b7bff, #5ef2d6);
  background-size: 300% 300%;
  animation: flow-diag 5s ease-in-out infinite;
}
.wa-modal__badge { background: linear-gradient(135deg, #2fe17a, #14b39a, #25d366); background-size: 300% 300%; }

/* ---------- Marquee: gradyan kenar solması ---------- */
.marquee {
  background: linear-gradient(90deg, #041e2f, #062f45, #0a2a4f, #041e2f);
  background-size: 300% 100%; animation: flow 14s linear infinite;
}
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, #041e2f, transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, #041e2f, transparent); }

/* ---------- Açık bölümler: hareketli gradyan arka plan ---------- */
.about, .why, .faq {
  background:
    radial-gradient(600px 400px at var(--bx, 10%) var(--by, 20%), rgba(94,242,214,.18), transparent 70%),
    radial-gradient(500px 380px at var(--cx, 90%) var(--cy, 80%), rgba(139,123,255,.12), transparent 70%),
    var(--bg);
  animation: bg-wander 18s ease-in-out infinite alternate;
}
@property --bx { syntax: "<percentage>"; inherits: false; initial-value: 10%; }
@property --by { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --cx { syntax: "<percentage>"; inherits: false; initial-value: 90%; }
@property --cy { syntax: "<percentage>"; inherits: false; initial-value: 80%; }
@keyframes bg-wander {
  50% { --bx: 70%; --by: 60%; --cx: 20%; --cy: 30%; }
  100% { --bx: 30%; --by: 90%; --cx: 80%; --cy: 10%; }
}
.treatments, .branches {
  background: linear-gradient(160deg, #f4fafb, #e3f6f4, #e7eefe, #f8ecf7, #f4fafb);
  background-size: 400% 400%;
  animation: flow-diag 20s ease-in-out infinite;
}

/* Morf eden gradyan bloblar */
.blob {
  position: absolute; z-index: 0; pointer-events: none; width: var(--s, 360px); aspect-ratio: 1;
  background: linear-gradient(135deg, var(--c1, #5ef2d6), var(--c2, #2bb3ff));
  filter: blur(50px); opacity: var(--o, .35);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  animation: morph 14s ease-in-out infinite, drift 22s ease-in-out infinite alternate;
}
@keyframes morph {
  25% { border-radius: 70% 30% 46% 54% / 30% 39% 61% 70%; }
  50% { border-radius: 30% 70% 70% 30% / 53% 30% 70% 47%; }
  75% { border-radius: 58% 42% 30% 70% / 60% 64% 36% 40%; }
}
@keyframes drift { to { transform: translate(var(--dx, 80px), var(--dy, -60px)) rotate(120deg); } }
.section > .container { position: relative; z-index: 1; }

/* ---------- Kartlar: dönen gradyan kenarlık ---------- */
.card { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--line), var(--line)) border-box; }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--grad-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s; animation: spin-angle 4s linear infinite;
}
.card:hover::before { opacity: 1; }
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--grad-flow); background-size: 300% 100%; animation: flow 6s linear infinite;
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.card:hover::after { transform: scaleX(1); }
.card__icon { position: relative; overflow: hidden; }
.card:hover .card__icon { background: linear-gradient(135deg, #5ef2d6, #2bb3ff, #8b7bff, #5ef2d6); background-size: 300% 300%; animation: flow-diag 3s ease-in-out infinite; }
.card__icon svg { animation: icon-bob 4s ease-in-out infinite; }
.card:nth-child(3n+2) .card__icon svg { animation-delay: -1.3s; }
.card:nth-child(3n) .card__icon svg { animation-delay: -2.6s; }
@keyframes icon-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }

/* ---------- İstatistik kartları ---------- */
.stat { position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.stat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--grad-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-angle 6s linear infinite; opacity: .7;
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* ---------- Hakkımızda küresi ---------- */
.orb-core { animation: float 7s ease-in-out infinite, core-hue 10s ease-in-out infinite; }
@keyframes core-hue {
  0%, 100% { box-shadow: inset -20px -30px 60px rgba(11,58,85,.25), 0 40px 90px -30px rgba(18,168,160,.6); }
  33% { box-shadow: inset -20px -30px 60px rgba(11,58,85,.25), 0 40px 90px -30px rgba(43,179,255,.6); }
  66% { box-shadow: inset -20px -30px 60px rgba(11,58,85,.25), 0 40px 90px -30px rgba(139,123,255,.55); }
}
.orb-ring--1 { border: 0; }
.orb-ring--1::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px;
  background: var(--grad-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-angle 6s linear infinite; opacity: .6;
}

/* ---------- Süreç ---------- */
.process {
  background: linear-gradient(135deg, #041e2f, #062c45, #0d2152, #2a1650, #041e2f);
  background-size: 400% 400%;
  animation: flow-diag 18s ease-in-out infinite;
}
.steps::before {
  background: linear-gradient(90deg, #5ef2d6, #2bb3ff, #8b7bff, #ff8ad8);
  transform-origin: left; transform: scaleX(var(--line-p, 0)); transition: transform .2s linear;
  left: 6%; right: 6%; opacity: .8;
}
.step__icon { border: 0; }
.step__icon::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: -1;
  background: var(--grad-conic); animation: spin-angle 3s linear infinite;
}
.step__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--navy-800); z-index: -1; }
.step__icon { isolation: isolate; }
.step:hover .step__icon::after { background: transparent; }
.step:hover .step__icon { color: var(--navy-900); }
.step__num { background: var(--grad-flow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 6s linear infinite; font-size: 1.6rem; }

/* ---------- Neden biz ---------- */
.why-item { position: relative; overflow: hidden; }
.why-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: linear-gradient(135deg, rgba(94,242,214,.14), rgba(139,123,255,.12));
}
.why-item:hover::after { opacity: 1; }

/* ---------- Şubeler ---------- */
.branch { position: relative; }
.branch::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2;
  background: var(--grad-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s; animation: spin-angle 5s linear infinite;
}
.branch:hover::before { opacity: 1; }
.branch__tag { background: linear-gradient(90deg, rgba(94,242,214,.18), rgba(43,179,255,.18), rgba(139,123,255,.18)); background-size: 200% 100%; animation: flow 5s linear infinite; }

/* ---------- Randevu ---------- */
.booking::before { animation: hue-rotate-soft 16s linear infinite; }
@keyframes hue-rotate-soft { to { filter: hue-rotate(360deg); } }
.booking__form { position: relative; }
.booking__form::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--grad-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-angle 6s linear infinite; opacity: .75;
}

/* ---------- SSS ---------- */
.acc { position: relative; }
.acc[open]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #5ef2d6, #2bb3ff, #8b7bff); background-size: 100% 300%;
  animation: flow-v 4s linear infinite;
}
@keyframes flow-v { to { background-position: 0 300%; } }
.acc[open] .acc__body { animation: acc-in .5s var(--ease); }
@keyframes acc-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- CTA bandı ---------- */
.cta-band__inner {
  background: linear-gradient(120deg, #06283d, #0b3a55, #13306e, #3a1d6e, #0b4a63, #06283d);
  background-size: 400% 400%;
  animation: flow-diag 14s ease-in-out infinite;
}
.cta-band__inner::before {
  content: ""; position: absolute; width: 140%; aspect-ratio: 1; left: -20%; top: -170%;
  background: var(--grad-conic); opacity: .25; filter: blur(60px);
  animation: spin-angle 10s linear infinite;
}
.cta-band__inner > * { position: relative; }

/* ---------- Footer ---------- */
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-flow); background-size: 300% 100%; animation: flow 6s linear infinite;
}

/* ---------- WhatsApp FAB: gradyan hale ---------- */
.wa-fab::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from var(--angle), #25d366, #5ef2d6, #2bb3ff, #25d366);
  animation: spin-angle 3s linear infinite; filter: blur(2px);
}
.wa-fab { isolation: isolate; }
.mobile-bar__wa { background: linear-gradient(120deg, #1ebe5b, #2fe17a, #14b39a, #1ebe5b) !important; background-size: 300% 100% !important; animation: flow 5s linear infinite; }

/* ---------- Belirme varyasyonları ---------- */
.reveal--zoom { transform: scale(.88); filter: blur(8px); }
.reveal--left { transform: translateX(-60px); }
.reveal--right { transform: translateX(60px); }
.reveal--zoom.is-in, .reveal--left.is-in, .reveal--right.is-in { transform: none; filter: none; }
.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }

/* Bölüm başlıkları kelime kelime */
.split .sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.split .sw > span { display: inline-block; transform: translateY(105%) rotate(4deg); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.split.is-in .sw > span { transform: none; }
.split.reveal { opacity: 1; transform: none; }

/* Parlama geçişi (görsel kartlar) */
.shine-sweep { position: relative; overflow: hidden; }
.shine-sweep::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-100%); animation: sweep 5s ease-in-out infinite;
}
@keyframes sweep { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

@media (max-width: 900px) {
  .blob { --s: 240px !important; filter: blur(40px); }
  .hero__beams span:nth-child(odd) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .split .sw > span, .hero__lead .w { transform: none !important; opacity: 1 !important; filter: none !important; }
}

/* Ekranda olmayan bölümlerin animasyonlarını durdur (performans) */
.fx-paused, .fx-paused *, .fx-paused *::before, .fx-paused *::after,
.fx-paused::before, .fx-paused::after { animation-play-state: paused !important; }