/* Kadın Fitness Programı Özel Stilleri & Egzersiz Animasyon Motoru */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    --primary-font: 'Plus Jakarta Sans', sans-serif;
    --heading-font: 'Outfit', sans-serif;
    --anim-duration: 2.8s;
}

body {
    font-family: var(--primary-font);
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, .font-heading {
    font-family: var(--heading-font);
}

/* Özel kaydırma çubuğu */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Kart Cam Efekti (Glassmorphism) */
.glass-panel {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Set Butonları */
.set-bubble {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
}

.set-bubble:active {
    transform: scale(0.92);
}

.set-bubble.completed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.set-bubble.completed::after {
    content: '✓';
    position: absolute;
    font-size: 11px;
    font-weight: 800;
    top: -4px;
    right: -4px;
    background: #047857;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* Varyasyon Seçici Butonları */
.variation-pill {
    transition: all 0.2s ease;
}

.variation-pill.active {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

/* İlerleme Çubuğu Animasyonu */
.progress-fill {
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Yüzen Sayaç */
.floating-timer {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* ==========================================================================
   2D VEKTÖREL HAREKET ANİMASYONLARI (CSS KEYFRAMES)
   ========================================================================== */

/* 1. Squat & Çömelme Animasyonu */
.anim-squat-torso {
    animation: squatMotion var(--anim-duration) infinite ease-in-out;
    transform-origin: 100px 180px;
}
@keyframes squatMotion {
    0%, 100% {
        transform: translateY(0);
    }
    45%, 55% {
        transform: translateY(32px);
    }
}

.anim-squat-femur {
    animation: squatFemur var(--anim-duration) infinite ease-in-out;
    transform-origin: 100px 140px;
}
@keyframes squatFemur {
    0%, 100% {
        transform: rotate(0deg);
    }
    45%, 55% {
        transform: rotate(-25deg);
    }
}

/* 2. Hip Thrust / Kalça Köprüsü */
.anim-hip-thrust {
    animation: hipThrustMotion var(--anim-duration) infinite cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: 90px 130px;
}
@keyframes hipThrustMotion {
    0%, 100% {
        transform: translateY(28px) rotate(-12deg);
    }
    40%, 65% {
        transform: translateY(0) rotate(0deg);
    }
}

/* 3. Romanian Deadlift (Hip Hinge) */
.anim-rdl-torso {
    animation: rdlMotion var(--anim-duration) infinite ease-in-out;
    transform-origin: 140px 120px;
}
@keyframes rdlMotion {
    0%, 100% {
        transform: rotate(0deg);
    }
    45%, 60% {
        transform: rotate(45deg);
    }
}

/* 4. Leg Press Kızağı */
.anim-leg-press-sled {
    animation: legPressMotion var(--anim-duration) infinite ease-in-out;
}
@keyframes legPressMotion {
    0%, 100% {
        transform: translate(32px, -32px);
    }
    45%, 55% {
        transform: translate(0, 0);
    }
}

/* 5. Lat Pulldown / Çekiş Barı */
.anim-lat-bar {
    animation: latBarMotion var(--anim-duration) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes latBarMotion {
    0%, 100% {
        transform: translateY(0);
    }
    40%, 60% {
        transform: translateY(36px);
    }
}

/* 6. Seated Cable Row / Kürek */
.anim-cable-handle {
    animation: rowHandleMotion var(--anim-duration) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes rowHandleMotion {
    0%, 100% {
        transform: translateX(35px);
    }
    40%, 60% {
        transform: translateX(0);
    }
}

/* 7. Shoulder Press / Omuz İtişi */
.anim-shoulder-press {
    animation: shoulderPressMotion var(--anim-duration) infinite ease-in-out;
}
@keyframes shoulderPressMotion {
    0%, 100% {
        transform: translateY(32px);
    }
    40%, 60% {
        transform: translateY(0);
    }
}

/* 8. Chest Press / Göğüs İtişi */
.anim-chest-press {
    animation: chestPressMotion var(--anim-duration) infinite ease-in-out;
}
@keyframes chestPressMotion {
    0%, 100% {
        transform: translateY(28px);
    }
    40%, 60% {
        transform: translateY(0);
    }
}

/* 9. Triceps Pushdown (Kol İtişi) */
.anim-triceps-forearm {
    animation: tricepsMotion var(--anim-duration) infinite cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: 138px 105px;
}
@keyframes tricepsMotion {
    0%, 100% {
        transform: rotate(-65deg);
    }
    40%, 60% {
        transform: rotate(5deg);
    }
}

/* 10. Russian Twist (Gövde Rotasyonu) */
.anim-twist-torso {
    animation: twistMotion 2s infinite ease-in-out;
    transform-origin: 160px 140px;
}
@keyframes twistMotion {
    0%, 100% {
        transform: rotate(-18deg);
    }
    50% {
        transform: rotate(18deg);
    }
}

/* 11. Kettlebell Swing */
.anim-kettlebell-swing {
    animation: swingMotion 2.2s infinite ease-in-out;
    transform-origin: 135px 85px;
}
@keyframes swingMotion {
    0%, 100% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(55deg);
    }
}

/* 12. Lunge / Adım Hareketi */
.anim-lunge-torso {
    animation: lungeMotion var(--anim-duration) infinite ease-in-out;
}
@keyframes lungeMotion {
    0%, 100% {
        transform: translateY(0);
    }
    45%, 55% {
        transform: translateY(30px);
    }
}

/* 13. Face Pull (Yüze Çekiş) */
.anim-face-pull {
    animation: facePullMotion var(--anim-duration) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes facePullMotion {
    0%, 100% {
        transform: translateX(-35px);
    }
    40%, 60% {
        transform: translateX(0);
    }
}

/* 14. Mountain Climber (Diz Çekme) */
.anim-climber-leg1 {
    animation: climberLeg1 1.2s infinite ease-in-out;
}
.anim-climber-leg2 {
    animation: climberLeg2 1.2s infinite ease-in-out;
}
@keyframes climberLeg1 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-35px) translateY(-10px); }
}
@keyframes climberLeg2 {
    0%, 100% { transform: translateX(-35px) translateY(-10px); }
    50% { transform: translateX(0); }
}

/* 15. Kas Vurgu Nabzı */
.anim-muscle-glow {
    animation: musclePulse 2s infinite ease-in-out;
}
@keyframes musclePulse {
    0%, 100% {
        opacity: 0.35;
        filter: drop-shadow(0 0 2px rgba(244, 63, 94, 0.2));
    }
    50% {
        opacity: 0.95;
        filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.8));
    }
}

/* Animasyonu Duraklatma Desteği */
.anim-paused * {
    animation-play-state: paused !important;
}

/* Modal Açılış Animasyonu */
.modal-enter {
    animation: modalScale 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalScale {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}