/*
 * Pozitif Klinik — animasyon ve yardımcı sınıflar
 *
 * Elementor'da kullanımı: widget/konteyner > Gelişmiş > CSS Sınıfları alanına yazın.
 *
 *   pk-rv       Ekrana girerken aşağıdan yukarı belirir (kaydırmaya bağlı)
 *   pk-rvf      Ekrana girerken yumuşakça belirir
 *   pk-in       Sayfa açılışında belirir (pk-d1 … pk-d4 ile gecikme)
 *   pk-lift     Üzerine gelince yükselir; içindeki görsel hafifçe yakınlaşır
 *   pk-zoom     Arka plan görseli açılışta yavaşça yakınlaşarak gelir (hero)
 *   pk-spin     Yavaş döner (dekoratif artı işareti)
 *   pk-float    Yavaşça süzülür
 *   pk-marquee  Kayan logo şeridi: dış konteyner; iç konteynere pk-track verin
 *   pk-row      Liste satırı; üzerine gelince turkuaz olur
 *   pk-pill     Butonu hap şeklinde yapar
 *
 * Tüm animasyonlar yalnızca transform/opacity kullanır (GPU, akıcı, düşük maliyet)
 * ve "hareketi azalt" tercihinde kapanır. JavaScript gerekmez.
 */

:root {
	--pk-ink: var(--e-global-color-primary, #373736);
	--pk-sand: var(--e-global-color-secondary, #E5E1DA);
	--pk-teal: var(--e-global-color-accent, #37B6AC);
	--pk-soft: #F4F2EE;
	--pk-ease: cubic-bezier(.2, .7, .2, 1);
	--pk-radius: 28px;
}

@keyframes pkRise  { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes pkFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pkSpin  { to { transform: rotate(360deg); } }
@keyframes pkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pkZoom  { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes pkMarquee { to { transform: translateX(-50%); } }

/* Açılış */
.pk-in { opacity: 0; animation: pkRise .9s var(--pk-ease) forwards; }
.pk-d1 { animation-delay: .12s; }
.pk-d2 { animation-delay: .26s; }
.pk-d3 { animation-delay: .42s; }
.pk-d4 { animation-delay: .6s; }

/* Elementor editöründe gizli kalmasın */
.elementor-editor-active .pk-in { opacity: 1; animation: none; }

/* Kaydırmaya bağlı belirme: destekleyen tarayıcılarda (Chrome, Edge, Safari 26+).
   Desteklemeyenlerde içerik doğrudan görünür, hiçbir şey kaybolmaz. */
@supports (animation-timeline: view()) {
	.pk-rv  { animation: pkRise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
	.pk-rvf { animation: pkFade linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}

/* Hover */
.pk-lift { transition: transform .45s var(--pk-ease), box-shadow .45s var(--pk-ease); }
.pk-lift:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(55, 55, 54, .14); }
.pk-lift img { transition: transform .8s var(--pk-ease); }
.pk-lift:hover img { transform: scale(1.05); }
.pk-lift .elementor-widget-image,
.pk-lift .elementor-image { overflow: hidden; border-radius: 20px; }

.elementor-button { transition: transform .3s var(--pk-ease), background-color .3s, color .3s; }
.elementor-button:hover { transform: translateY(-2px); }
.pk-pill .elementor-button { border-radius: 999px; }

.pk-row { transition: background-color .3s, color .3s, transform .3s var(--pk-ease); }
.pk-row:hover { background-color: var(--pk-teal) !important; color: #FFFFFF; transform: translateX(6px); }

/* Dekor */
.pk-spin, .pk-spin svg { animation: pkSpin 28s linear infinite; }
.pk-float { animation: pkFloat 6s ease-in-out infinite; }
.pk-zoom { overflow: hidden; }
.pk-zoom > .elementor-background-overlay,
.pk-zoom::before { animation: pkZoom 1.8s var(--pk-ease) both; }

/* Kayan logo şeridi */
.pk-marquee { overflow: hidden; }
.pk-marquee .pk-track { display: flex; flex-wrap: nowrap; width: max-content; animation: pkMarquee 26s linear infinite; }
.pk-marquee:hover .pk-track { animation-play-state: paused; }
.pk-marquee .pk-track > * { flex: none; }

/* Hareketi azalt tercihi */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	.pk-in, .pk-rv, .pk-rvf { opacity: 1 !important; transform: none !important; }
}

/* ---- 1.0.1: ek animasyonlar ----
 *   pk-rvs      Ekrana girerken hafif büyüyerek belirir (kartlar, harita)
 *   pk-clip     Başlık alttan perde açılır gibi belirir
 *   pk-parallax Arka plan görseli kaydırırken yavaşça kayar (hero)
 *   pk-stagger  Izgara içindeki kartlar sırayla belirir (dış konteynere verin)
 */
@keyframes pkScale { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pkClip  { from { clip-path: inset(0 0 100% 0); transform: translateY(30%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes pkPar   { from { background-position: 50% 30%; } to { background-position: 50% 70%; } }

@supports (animation-timeline: view()) {
	.pk-rvs { animation: pkScale linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	.pk-clip .elementor-heading-title { animation: pkClip linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
	.pk-parallax { animation: pkPar linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
	.pk-stagger > .e-con-inner > *:nth-child(3n+2), .pk-stagger > *:nth-child(3n+2) { animation-range: entry 8% entry 66%; }
	.pk-stagger > .e-con-inner > *:nth-child(3n+3), .pk-stagger > *:nth-child(3n+3) { animation-range: entry 16% entry 72%; }
}

/* Butonlarda ışık süpürmesi */
.pk-shine .elementor-button { position: relative; overflow: hidden; }
.pk-shine .elementor-button::after {
	content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
	transition: transform .7s var(--pk-ease);
}
.pk-shine .elementor-button:hover::after { transform: translateX(120%) skewX(-20deg); }

@media (prefers-reduced-motion: reduce) {
	.pk-rvs, .pk-clip .elementor-heading-title, .pk-parallax { animation: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }
}