این کد من یک مشکل داره مشکلشو رفع کن ببین کشتی داخل دکمه چت با هوش مصنوعی نمیره کاری کن کشتی فقط داخل دکمه چت با هوش مصنوعی باشه در حالت موبایل هر سه دکمه پشت سر هم قرار بگیره خب مثل همینی که هست ولی در حالت کامپیوتر در بالا در اول دکمه چت با هوش مصنوعی قرار بگیره در خط دوم در واقع دوتا دکمه با هم باشه در حالت کامپیوتر کد کامل بدون هیچ مشکلی درست کن بفرست حواست باشه هیچ تغییر دیگری ایجاد نکنی کد کامل کامل<p>&nbsp;</p>
<style>
        html, body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #0d0d2b;
            color: #fff;
            overflow-x: hidden;
        }

        /* نوشته تغییر صدا با هوش مصنوعی */
        #ai-text {
            margin: 20px 0;
            font-size: 2em;
            color: #fff;
            text-align: center;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
            animation: textGlow 3s infinite alternate;
            position: relative;
            z-index: 2;
        }

        @keyframes textGlow {
            from {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            }
            to {
                text-shadow: 0 0 20px rgba(255, 255, 255, 1);
            }
        }

        /* دکمه شروع تغییر صدا با تم هوش مصنوعی */
        .start-button {
            display: inline-block;
            margin: 20px auto;
            padding: 10px 30px;
            font-size: 1.5em;
            background: linear-gradient(90deg, #0fbcf9, #0be881);
            color: #fff;
            border: 2px solid #fff;
            border-radius: 50px;
            cursor: pointer;
            animation: buttonGlow 2s infinite ease-in-out, borderAnimation 3s infinite;
            transition: transform 0.3s ease, background 0.3s ease;
            box-shadow: 0 0 15px rgba(15, 188, 249, 0.7);
            position: relative;
            z-index: 2;
            text-decoration: none;
            text-align: center;
        }

        @keyframes borderAnimation {
            0%, 100% {
                border-color: transparent;
            }
            50% {
                border-color: #fff;
            }
        }

        .start-button:hover {
            transform: scale(1.1);
            background: linear-gradient(90deg, #0be881, #0fbcf9);
        }

        @keyframes buttonGlow {
            0%, 100% {
                box-shadow: 0 0 10px rgba(15, 188, 249, 0.7);
            }
            50% {
                box-shadow: 0 0 20px rgba(11, 232, 129, 1);
            }
        }

        /* اطمینان از سفیدی متن دکمه شروع تغییر صدا در همه حالت‌ها */
        .start-button:link,
        .start-button:visited,
        .start-button:hover,
        .start-button:active {
            color: #fff;
            text-decoration: none;
        }

        /* دکمه‌های جدید با انیمیشن */
        .animated-button, .night-sky-button {
            width: 300px; /* اندازه یکسان برای هر دو دکمه */
            background-color: #1a1a2e;
            padding: 16px 32px;
            border-radius: 8px;
            color: #fff;
            font-size: 20px;
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: inline-block;
            text-align: center;
            margin: 20px 10px;
            text-decoration: none;
        }

        /* اطمینان از سفیدی متن دکمه‌ها در همه حالت‌ها */
        .animated-button:link,
        .animated-button:visited,
        .animated-button:hover,
        .animated-button:active,
        .night-sky-button:link,
        .night-sky-button:visited,
        .night-sky-button:hover,
        .night-sky-button:active {
            color: #fff;
            text-decoration: none;
        }

        /* استایل مخصوص دکمه چت با هوش مصنوعی */
        .animated-button {
            animation: pulse 3s infinite;
            color: #fff;
            text-decoration: none;
        }

        .animated-button span {
            position: relative;
            z-index: 3;
            color: #fff;
        }

        /* افکت آب در داخل دکمه */
        .animated-button::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 188, 249, 0.5);
            z-index: 1;
            animation: calmWave 8s ease-in-out infinite;
        }

        /* افکت نور پشت دکمه */
        .animated-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent);
            animation: wind 40s linear infinite;
            z-index: 0;
        }

        @keyframes wind {
            0% {
                transform: translateX(0) translateY(0) rotate(0deg);
            }
            100% {
                transform: translateX(100%) translateY(-100%) rotate(360deg);
            }
        }

        /* انیمیشن موج‌های آرام */
        @keyframes calmWave {
            0%, 100% {
                clip-path: polygon(0% 70%, 10% 73%, 20% 70%, 30% 73%, 40% 70%, 50% 73%, 60% 70%, 70% 73%, 80% 70%, 90% 73%, 100% 70%, 100% 100%, 0% 100%);
            }
            50% {
                clip-path: polygon(0% 72%, 10% 75%, 20% 72%, 30% 75%, 40% 72%, 50% 75%, 60% 72%, 70% 75%, 80% 72%, 90% 75%, 100% 72%, 100% 100%, 0% 100%);
            }
        }

        .animated-button:hover {
            background-color: #0fbcf9;
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(15, 188, 249, 0.5);
            color: #fff;
        }

        /* کشتی و مرد داخل دکمه چت با هوش مصنوعی */
        .animated-button .ship {
            position: absolute;
            bottom: 25%;
            left: -20%;
            width: 30px;
            height: 30px;
            z-index: 2;
            animation: shipMove 16s linear infinite;
        }

        .boat {
            position: absolute;
            bottom: 0;
            left: 5px;
            width: 20px;
            height: 10px;
            background: sienna;
            border-radius: 0 0 5px 5px;
        }

        .sail {
            position: absolute;
            bottom: 10px;
            left: 7px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 12px solid white;
        }

        .man {
            position: absolute;
            bottom: 10px;
            left: 12px;
            width: 5px;
            height: 10px;
            background: black;
        }

        .paddle {
            position: absolute;
            bottom: 5px;
            left: 15px;
            width: 15px;
            height: 2px;
            background: brown;
            transform-origin: left center;
            animation: paddleMove 1s linear infinite;
        }

        @keyframes paddleMove {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }

        @keyframes shipMove {
            0% {
                left: -20%;
            }
            100% {
                left: 100%;
            }
        }

        /* افکت محو شدن متن */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* دکمه آسمان پرستاره با سیارات متعدد */
        .night-sky-button {
            width: 300px; /* اندازه یکسان برای هر دو دکمه */
            background-color: #000033;
            padding: 16px 32px;
            border-radius: 8px;
            color: #ffffff;
            font-size: 20px;
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: inline-block;
            text-align: center;
            margin: 20px 10px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            z-index: 2;
            text-decoration: none;
        }

        .night-sky-button span {
            position: relative;
            z-index: 2; /* برای اینکه متن بالای پس‌زمینه باشد */
            color: #fff;
        }

        /* ایجاد پس‌زمینه آسمان پرستاره با سیارات متعدد */
        .night-sky-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: transparent url('data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cdefs%3E%0A%20%20%3C!--%20تعریف%20گرادیانت‌ها%20برای%20سیارات%20--%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient1%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff4500%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffff00%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient2%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%238a2be2%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%234b0082%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient3%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2300ced1%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%231e90ff%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient4%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff1493%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ff69b4%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient5%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2300ff7f%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237fff00%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient6%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23dc143c%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ff4500%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient7%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffd700%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffa500%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient8%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2300bfff%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%231e90ff%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient9%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23adff2f%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237fff00%22/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3CradialGradient%20id%3D%22planetGradient10%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff69b4%22/%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ff1493%22/%3E%0A%20%20%3C/radialGradient%3E%0A%3C/defs%3E%0A%3C!--%20ستاره‌ها%20--%3E%0A%3Cg%20fill%3D%22%23ffffff%22%3E%0A%20%20%3C!--%20افزایش%20تعداد%20ستاره‌ها%20به%2050%20--%3E%0A%20%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2220%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2240%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%2260%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2280%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%22100%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22120%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%2270%22%20cy%3D%22140%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%2280%22%20cy%3D%22160%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%2240%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%22100%22%20cy%3D%2260%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2280%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%22100%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%22130%22%20cy%3D%22120%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%22140%22%20cy%3D%22140%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%22150%22%20cy%3D%2260%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2280%22%20r%3D%220.9%22/%3E%0A%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22100%22%20r%3D%221%22/%3E%0A%20%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22120%22%20r%3D%220.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%22190%22%20cy%3D%22140%22%20r%3D%220.9%22/%3E%0A%20%20%3C!--%20بیشتر%20ستاره‌ها%20را%20اضافه%20کنید%20--%3E%0A%3C/g%3E%0A%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22translate%22%20from%3D%220%200%22%20to%3D%22-200%200%22%20dur%3D%2250s%22%20repeatCount%3D%22indefinite%22/%3E%0A%3C!--%20سیارات%20--%3E%0A%3Cg%3E%0A%20%20%3Ccircle%20cx%3D%22250%22%20cy%3D%2250%22%20r%3D%225%22%20fill%3D%22url(%23planetGradient1)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2230s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20-250%200%20C%20-150%20-50%20150%2050%20250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22-50%22%20cy%3D%2280%22%20r%3D%224%22%20fill%3D%22url(%23planetGradient2)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2235s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20250%200%20C%20150%2050%20-150%20-50%20-250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22250%22%20cy%3D%22110%22%20r%3D%225%22%20fill%3D%22url(%23planetGradient3)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2240s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20-250%200%20C%20-150%2050%20150%20-50%20250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22-50%22%20cy%3D%22140%22%20r%3D%224%22%20fill%3D%22url(%23planetGradient4)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2232s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20250%200%20C%20150%20-50%20-150%2050%20-250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3C!--%20بقیه%20سیارات%20--%3E%0A%20%20%3Ccircle%20cx%3D%22250%22%20cy%3D%2270%22%20r%3D%225%22%20fill%3D%22url(%23planetGradient5)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2238s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20-250%200%20C%20-150%20-50%20150%2050%20250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22-50%22%20cy%3D%22100%22%20r%3D%224%22%20fill%3D%22url(%23planetGradient6)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2242s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20250%200%20C%20150%2050%20-150%20-50%20-250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22250%22%20cy%3D%22130%22%20r%3D%225%22%20fill%3D%22url(%23planetGradient7)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2236s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20-250%200%20C%20-150%2050%20150%20-50%20250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22-50%22%20cy%3D%22160%22%20r%3D%224%22%20fill%3D%22url(%23planetGradient8)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2240s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20250%200%20C%20150%20-50%20-150%2050%20-250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22250%22%20cy%3D%2290%22%20r%3D%225%22%20fill%3D%22url(%23planetGradient9)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2234s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20-250%200%20C%20-150%20-50%20150%2050%20250%200%22/%3E%0A%20%20%3C/circle%3E%0A%20%20%3Ccircle%20cx%3D%22-50%22%20cy%3D%22120%22%20r%3D%224%22%20fill%3D%22url(%23planetGradient10)%22%3E%0A%20%20%20%20%3CanimateMotion%20dur%3D%2244s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20250%200%20C%20150%2050%20-150%20-50%20-250%200%22/%3E%0A%20%20%3C/circle%3E%0A%3C/g%3E%0A%3C!--%20شهاب‌سنگ‌ها%20--%3E%0A%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2215%22%20y2%3D%220%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221%22%3E%0A%20%20%3CanimateMotion%20dur%3D%2215s%22%20repeatCount%3D%22indefinite%22%20path%3D%22M%20200%20200%20L%20-200%20-200%22%20begin%3D%225s%22/%3E%0A%3C/line%3E%0A%3C/svg%3E') repeat;
            background-size: 200px 200px;
            animation: twinkling 50s linear infinite;
            z-index: 1;
        }

        /* انیمیشن حرکت ستاره‌ها */
        @keyframes twinkling {
            from {
                transform: translate3d(0, 0, 0);
            }
            to {
                transform: translate3d(-200px, 0, 0);
            }
        }

        .night-sky-button:hover {
            background-color: #000044;
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
            color: #fff;
        }

        /* مدیا کوئری برای حالت موبایل */
        @media (max-width: 768px) {
            .start-button, .animated-button, .night-sky-button {
                width: 80%;
                font-size: 1em;
            }
        }
    </style>
<!-- متن تغییر صدا با هوش مصنوعی -->
<div id="ai-text">تغییر صدا با هوش مصنوعی</div>
<!-- دکمه شروع تغییر صدا -->
<div style="text-align: center;"><a class="start-button" href="https://apperio.ir/mobile/0V9S-0FG0-7Q3H-GKD4#/nav/page-builder203"> <span style="font-size: 16pt;">شروع تغییر صدا</span> (<span style="font-size: 12pt;">رایگان</span>) </a></div>
<!-- دکمه‌های جدید -->
<div style="text-align: center;"><!-- دکمه چت با هوش مصنوعی --> <a href="https://aisada.ir/chat" class="animated-button"> <span>چت با هوش مصنوعی</span></a>
<div class="ship">
<div class="boat"></div>
<div class="sail"></div>
<div class="man"></div>
<div class="paddle"></div>
</div>
<!-- دکمه ساخت تصاویر با هوش مصنوعی --> <a href="https://aisada.ir/flux" class="night-sky-button"> <span>ساخت تصاویر با هوش مصنوعی</span> </a></div>