/**
 * Mouse Scrollytelling Animation — Global Variables & Reset
 * Tüm widget'lar için ortak stil temeli.
 */
:root {
    /* Ana Renkler (Accents) */
    --msa-primary: #7c6aff;
    --msa-primary-glow: rgba(124, 106, 255, 0.5);
    --msa-white: #ffffff;
    --msa-black: #000000;
    --msa-text-muted: rgba(255, 255, 255, 0.6);
    
    /* Animasyon & Geçişler (Transitions) */
    --msa-transition-fast: all 0.2s ease;
    --msa-transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --msa-transition-slow: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);

    /* Gölgeler & Derinlik (Shadows) */
    --msa-shadow-sm: 0 4px 10px rgba(0,0,0,0.1);
    --msa-shadow-md: 0 10px 30px rgba(0,0,0,0.2);
    --msa-shadow-lg: 0 20px 50px rgba(0,0,0,0.4);

    /* Kenar Yumuşatma (Border Radius) */
    --msa-radius-sm: 8px;
    --msa-radius-md: 16px;
    --msa-radius-lg: 24px;
    --msa-radius-round: 50%;
}

/* Ortak Görünmezlik / Reset Sınıfları */
.msa-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Mobil Stabilizasyon: Yaylanmayı ve Titremeyi Önler */
html, body {
    overscroll-behavior-y: none; /* iOS Elastic Scroll Fix */
}

.msa-mobile-fix {
    height: 100vh;
    height: 100dvh; /* Dynamic Viewport support */
}

.msa-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}