/* استایل‌های صفحه لودینگ */
    #splash-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); /* رنگ آبی پاب کر */
        z-index: 99999 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition: opacity 0.8s ease-out, visibility 0.8s;
        overflow: hidden;
    }

    #splash-screen.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* استایل لوگو */
    .pc-logo {
        font-size: 4rem;
        font-weight: 900;
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
        padding: 15px 30px;
        border-radius: 20px;
        border: 3px solid rgba(255, 255, 255, 0.6);
        letter-spacing: 5px;
        text-shadow: 0 4px 10px rgba(0,0,0,0.3);
        margin-bottom: 25px;
        
        /* تنظیمات انیمیشن */
        opacity: 0; /* ابتدا مخفی */
        animation: zoomInAnimation 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s forwards;
    }

    /* استایل متن عنوان */
    .splash-title {
        font-family: 'Tahoma', sans-serif;
        color: #fff;
        font-weight: 700;
        text-shadow: 0 2px 5px rgba(0,0,0,0.2);
        text-align: center;
        padding: 0 10px;
        
        /* تنظیمات انیمیشن */
        opacity: 0; /* ابتدا مخفی */
        animation: fadeInUpAnimation 0.8s ease-out 0.6s forwards; /* 0.6 ثانیه تاخیر */
    }
    
       .splash-title2 {
        font-family: 'Tahoma', sans-serif;
        color: #fff;
        font-weight: 500;
        text-shadow: 0 2px 5px rgba(0,0,0,0.2);
        text-align: center;
        padding: 0 5px;
        
        /* تنظیمات انیمیشن */
        opacity: 0; /* ابتدا مخفی */
        animation: fadeInUpAnimation 0.8s ease-out 0.6s forwards; /* 0.6 ثانیه تاخیر */
    }

        .splash-title3 {
        font-family: 'Tahoma', sans-serif;
        color: #e4dcdc;
        font-weight: 100;
        text-shadow: 0 2px 5px rgba(0,0,0,0.2);
        text-align: center;
        padding: 0 3px;
        
        /* تنظیمات انیمیشن */
        opacity: 0; /* ابتدا مخفی */
        animation: fadeInUpAnimation 0.8s ease-out 0.6s forwards; /* 0.6 ثانیه تاخیر */
    }


      .icons-row {
            display: flex;
            justify-content: center;
            gap: 35px;
            margin: 30px 0 45px;
        }
       
        .icon-item {
            font-size: 2.4rem;
            color: rgba(255,255,255,0.9);
            transition: all 0.4s;
        }
       
        .icon-item:hover {
            transform: scale(1.25) translateY(-8px);
            color: #bae6fd;
        }
       
        .loading-bar {
            width: 300px;
            height: 6px;
            background: rgba(255,255,255,0.25);
            border-radius: 50px;
            margin: 40px auto;
            overflow: hidden;
        }
       
        .loading-progress {
            height: 100%;
            width: 0%;
            background: linear-gradient(to right, #67e8f9, #ffffff);
            animation: loading 4.8s linear forwards;
        }

         .tagline {
            font-size: 1.1rem;
            opacity: 0.9;
        }


         .logo-circle {
            width: 180px;
            height: 180px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
            animation: gentleFloat 3.5s ease-in-out infinite;
        }
       
        .logo-circle i {
            font-size: 85px;
            color: #1e40af;
            animation: heartbeat 2.5s infinite;
        }



           @keyframes gentleFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
       
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
       
        @keyframes loading {
            to { width: 100%; }
        }
       
        .fade-out {
            animation: fadeOut 1s forwards;
        }
       
        @keyframes fadeOut {
            to { opacity: 0; transform: scale(0.92); }
        }





    

    /* تنظیمات ریسپانسیو (موبایل) */
    @media (max-width: 768px) {
        .pc-logo {
            font-size: 2.2rem;
            padding: 10px 20px;
            border-radius: 15px;
        }
        .splash-title {
            font-size: 1.4rem;
        }
    }

    /* --- تعریف انیمیشن‌های خالص --- */
    
    /* انیمیشن زوم برای لوگو */
    @keyframes zoomInAnimation {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        70% {
            transform: scale(1.1);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* انیمیشن بالا آمدن برای متن */
    @keyframes fadeInUpAnimation {
        0% {
            transform: translateY(30px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }