{"id":64,"date":"2026-04-20T09:31:47","date_gmt":"2026-04-20T06:31:47","guid":{"rendered":"https:\/\/www.yaask.net\/?page_id=64"},"modified":"2026-04-20T09:31:47","modified_gmt":"2026-04-20T06:31:47","slug":"arkadaslik-ilani-ver","status":"publish","type":"page","link":"https:\/\/www.yaask.net\/index.php\/arkadaslik-ilani-ver\/","title":{"rendered":"Arkada\u015fl\u0131k \u0130lan\u0131 Ver"},"content":{"rendered":"\n\r\n        <style>\r\n            .spf-container { width: 100%; max-width: 600px; margin: 0 auto; padding: 30px 20px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; color: #333; background: #ffffff; border-radius: 20px; box-sizing: border-box; box-shadow: 0 10px 40px rgba(0,0,0,0.08); border: 1px solid #eaeaea; }\r\n            .spf-container h2 { color: #111; font-size: 26px; font-weight: 800; margin-bottom: 8px; text-align: center; }\r\n            .spf-progress-text { text-align: center; color: #ff2d55; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 30px; }\r\n            \r\n            .form-step { display: none; opacity: 0; transition: opacity 0.4s ease-in-out; }\r\n            .form-step.active { display: block; opacity: 1; }\r\n\r\n            .spf-group { margin-bottom: 22px; width: 100%; }\r\n            .spf-group label.field-label { display: block; font-size: 15px; font-weight: 600; color: #555; margin-bottom: 10px; padding-left: 4px; }\r\n            \r\n            .spf-form input[type=\"text\"], .spf-form input[type=\"number\"], .spf-form input[type=\"email\"], .spf-form textarea, .spf-form select { width: 100%; padding: 16px; font-size: 16px; border: 2px solid #ddd; border-radius: 14px; background-color: #f9f9f9; color: #333; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: border-color 0.3s; }\r\n            .spf-form input:focus, .spf-form textarea:focus, .spf-form select:focus { outline: none; border-color: #ff2d55; background-color: #fff; }\r\n            .spf-form select { background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2398989d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 16px top 50%; background-size: 12px auto; padding-right: 40px; }\r\n            \r\n            .radio-grid { display: flex; gap: 12px; flex-wrap: wrap; }\r\n            .radio-grid.col-2 .radio-card { flex: 1 1 45%; }\r\n            .radio-grid.col-3 .radio-card { flex: 1 1 30%; }\r\n            .radio-card { position: relative; }\r\n            .radio-card input[type=\"radio\"] { position: absolute; opacity: 0; width: 0; height: 0; }\r\n            .radio-card label {\r\n                display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n                background: #f9f9f9; border: 2px solid #ddd; border-radius: 16px; padding: 18px 10px;\r\n                cursor: pointer; transition: all 0.2s ease; color: #555; font-weight: 600; font-size: 15px;\r\n                text-align: center; height: 100%; box-sizing: border-box; user-select: none;\r\n            }\r\n            .radio-card label span.emoji { font-size: 28px; margin-bottom: 6px; display: block; }\r\n            .radio-card input[type=\"radio\"]:checked + label {\r\n                border-color: #ff2d55; background: rgba(255, 45, 85, 0.08); color: #ff2d55; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(255, 45, 85, 0.15);\r\n            }\r\n\r\n            .flex-row { display: flex; flex-wrap: wrap; gap: 15px; }\r\n            .flex-row > div { flex: 1 1 100%; }\r\n            @media (min-width: 480px) { .flex-row > div { flex: 1; } }\r\n            \r\n            .date-group { display: flex; gap: 10px; width: 100%; }\r\n            .date-group select { flex: 1; padding: 16px 10px; }\r\n            .phone-group { display: flex; gap: 10px; width: 100%; }\r\n            .phone-group select { width: 35%; flex-shrink: 0; }\r\n            .phone-group input { width: 65%; flex-grow: 1; }\r\n            \r\n            .custom-file-upload { display: block; padding: 25px; background: #f9f9f9; border: 2px dashed #ccc; border-radius: 16px; text-align: center; cursor: pointer; color: #ff2d55; font-weight: 700; font-size: 16px; transition: all 0.3s; }\r\n            .custom-file-upload:hover { border-color: #ff2d55; background: rgba(255, 45, 85, 0.05); }\r\n            .spf-form input[type=\"file\"] { display: none; }\r\n            .spf-photo-preview { margin-top: 15px; text-align: center; display: none; }\r\n            .spf-photo-preview img { width: 100%; max-width: 150px; border-radius: 16px; border: 2px solid #ff2d55; box-shadow: 0 4px 15px rgba(255,45,85,0.2); object-fit: cover; }\r\n            \r\n            .checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #555; font-size: 15px; font-weight: normal; margin-bottom: 25px; }\r\n            .checkbox-label input[type=\"checkbox\"] { width: 20px; height: 20px; accent-color: #ff2d55; cursor: pointer; }\r\n            \r\n            .btn-row { display: flex; gap: 12px; margin-top: 30px; }\r\n            .btn-next, .btn-submit { background: linear-gradient(45deg, #ff2d55, #ff3b30); color: white; padding: 18px; font-size: 18px; border: none; flex: 1; border-radius: 14px; cursor: pointer; font-weight: 700; -webkit-appearance: none; box-shadow: 0 4px 15px rgba(255,45,85,0.3); transition: transform 0.1s, box-shadow 0.3s; }\r\n            .btn-prev { background: #e0e0e0; color: #333; padding: 18px; font-size: 18px; border: none; width: 30%; border-radius: 14px; cursor: pointer; font-weight: 700; -webkit-appearance: none; transition: background 0.3s; }\r\n            .btn-next:active, .btn-submit:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(255,45,85,0.3); }\r\n            .btn-prev:active { transform: scale(0.97); background: #ccc; }\r\n        <\/style>\r\n\r\n        <div class=\"spf-container\">\r\n            <h2>Profilini Olu\u015ftur<\/h2>\r\n            <div class=\"spf-progress-text\" id=\"step-indicator\">Ad\u0131m 1 \/ 4<\/div>\r\n            \r\n            <form class=\"spf-form\" id=\"senior_profile_form\" method=\"post\" enctype=\"multipart\/form-data\">\r\n                \r\n                <div class=\"form-step active\" id=\"step-1\">\r\n                    <div class=\"spf-group\">\r\n                        <label class=\"field-label\">Ad Soyad<\/label>\r\n                        <input type=\"text\" name=\"profile_name\" value=\"\" placeholder=\"\u00d6rn: Ahmet Y\u0131lmaz\" required>\r\n                    <\/div>\r\n\r\n                    <div class=\"spf-group\">\r\n                        <label class=\"field-label\">Do\u011fum Tarihi<\/label>\r\n                        <div class=\"date-group\">\r\n                            <select name=\"profile_dob_day\" required>\r\n                                <option value=\"\">G\u00fcn<\/option>\r\n                                <option value='1'>1<\/option><option value='2'>2<\/option><option value='3'>3<\/option><option value='4'>4<\/option><option value='5'>5<\/option><option value='6'>6<\/option><option value='7'>7<\/option><option value='8'>8<\/option><option value='9'>9<\/option><option value='10'>10<\/option><option value='11'>11<\/option><option value='12'>12<\/option><option value='13'>13<\/option><option value='14'>14<\/option><option value='15'>15<\/option><option value='16'>16<\/option><option value='17'>17<\/option><option value='18'>18<\/option><option value='19'>19<\/option><option value='20'>20<\/option><option value='21'>21<\/option><option value='22'>22<\/option><option value='23'>23<\/option><option value='24'>24<\/option><option value='25'>25<\/option><option value='26'>26<\/option><option value='27'>27<\/option><option value='28'>28<\/option><option value='29'>29<\/option><option value='30'>30<\/option><option value='31'>31<\/option>                            <\/select>\r\n                            <select name=\"profile_dob_month\" required>\r\n                                <option value=\"\">Ay<\/option>\r\n                                <option value='1'>Oca<\/option><option value='2'>\u015eub<\/option><option value='3'>Mar<\/option><option value='4'>Nis<\/option><option value='5'>May<\/option><option value='6'>Haz<\/option><option value='7'>Tem<\/option><option value='8'>A\u011fu<\/option><option value='9'>Eyl<\/option><option value='10'>Eki<\/option><option value='11'>Kas<\/option><option value='12'>Ara<\/option>                            <\/select>\r\n                            <select name=\"profile_dob_year\" required>\r\n                                <option value=\"\">Y\u0131l<\/option>\r\n                                <option value='1986'>1986<\/option><option value='1985'>1985<\/option><option value='1984'>1984<\/option><option value='1983'>1983<\/option><option value='1982'>1982<\/option><option value='1981'>1981<\/option><option value='1980'>1980<\/option><option value='1979'>1979<\/option><option value='1978'>1978<\/option><option value='1977'>1977<\/option><option value='1976'>1976<\/option><option value='1975'>1975<\/option><option value='1974'>1974<\/option><option value='1973'>1973<\/option><option value='1972'>1972<\/option><option value='1971'>1971<\/option><option value='1970'>1970<\/option><option value='1969'>1969<\/option><option value='1968'>1968<\/option><option value='1967'>1967<\/option><option value='1966'>1966<\/option><option value='1965'>1965<\/option><option value='1964'>1964<\/option><option value='1963'>1963<\/option><option value='1962'>1962<\/option><option value='1961'>1961<\/option><option value='1960'>1960<\/option><option value='1959'>1959<\/option><option value='1958'>1958<\/option><option value='1957'>1957<\/option><option value='1956'>1956<\/option><option value='1955'>1955<\/option><option value='1954'>1954<\/option><option value='1953'>1953<\/option><option value='1952'>1952<\/option><option value='1951'>1951<\/option><option value='1950'>1950<\/option><option value='1949'>1949<\/option><option value='1948'>1948<\/option><option value='1947'>1947<\/option><option value='1946'>1946<\/option><option value='1945'>1945<\/option><option value='1944'>1944<\/option><option value='1943'>1943<\/option><option value='1942'>1942<\/option><option value='1941'>1941<\/option><option value='1940'>1940<\/option><option value='1939'>1939<\/option><option value='1938'>1938<\/option><option value='1937'>1937<\/option><option value='1936'>1936<\/option><option value='1935'>1935<\/option><option value='1934'>1934<\/option><option value='1933'>1933<\/option><option value='1932'>1932<\/option><option value='1931'>1931<\/option><option value='1930'>1930<\/option><option value='1929'>1929<\/option><option value='1928'>1928<\/option><option value='1927'>1927<\/option>                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"spf-group\">\r\n                        <label class=\"field-label\">Cinsiyetim...<\/label>\r\n                        <div class=\"radio-grid col-2\">\r\n                            <div class=\"radio-card\">\r\n                                <input type=\"radio\" id=\"g_opt1\" name=\"profile_gender\" value=\"opt1\" required>\r\n                                <label for=\"g_opt1\"><span class=\"emoji\">\ud83d\udc68<\/span> Ben Erke\u011fim<\/label>\r\n                            <\/div>\r\n                            <div class=\"radio-card\">\r\n                                <input type=\"radio\" id=\"g_opt2\" name=\"profile_gender\" value=\"opt2\" required>\r\n                                <label for=\"g_opt2\"><span class=\"emoji\">\ud83d\udc69<\/span> Ben Kad\u0131n\u0131m<\/label>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"btn-row\">\r\n                        <button type=\"button\" class=\"btn-next\" onclick=\"nextStep(1)\">Devam<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"form-step\" id=\"step-2\">\r\n                    <div class=\"spf-group\">\r\n                        <label class=\"field-label\">Profil Ba\u015fl\u0131\u011f\u0131<\/label>\r\n                        <input type=\"text\" name=\"profile_title\" value=\"\" placeholder=\"\u00d6rn: Ger\u00e7ek bir dost ar\u0131yorum\" required>\r\n                    <\/div>\r\n\r\n                    <div class=\"spf-group\">\r\n                        <label class=\"field-label\">Medeni Durum<\/label>\r\n                        <div class=\"radio-grid col-3\">\r\n                            <div class=\"radio-card\">\r\n                                <input type=\"radio\" id=\"m_single\" name=\"profile_marital\" value=\"Bekar\" required>\r\n                                <label for=\"m_single\"><span class=\"emoji\">\u2728<\/span> Bekar<\/label>\r\n                            <\/div>\r\n                            <div class=\"radio-card\">\r\n                                <input type=\"radio\" id=\"m_divorced\" name=\"profile_marital\" value=\"Bo\u015fanm\u0131\u015f\" required>\r\n                                <label for=\"m_divorced\"><span class=\"emoji\">\ud83d\udd4a\ufe0f<\/span> Bo\u015fanm\u0131\u015f<\/label>\r\n                            <\/div>\r\n                            <div class=\"radio-card\">\r\n                                <input type=\"radio\" id=\"m_widowed\" name=\"profile_marital\" value=\"Dul\" required>\r\n                                <label for=\"m_widowed\"><span class=\"emoji\">\ud83d\udd6f\ufe0f<\/span> Dul<\/label>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"spf-group\">\r\n                        <label class=\"field-label\">Ne Ar\u0131yorsun?<\/label>\r\n                        <div class=\"radio-grid col-3\">\r\n                            <div class=\"radio-card\">\r\n                                <input type=\"radio\" id=\"s_friend\" name=\"profile_seeking\" value=\"Arkada\u015fl\u0131k\" required>\r\n                                <label for=\"s_friend\"><span class=\"emoji\">\ud83d\udc4b<\/span> Arkada\u015fl\u0131k<\/label>\r\n                            <\/div>\r\n                            <div class=\"radio-card\">\r\n                                <input type=\"radio\" id=\"s_relation\" name=\"profile_seeking\" value=\"\u0130li\u015fki\" required>\r\n                                <label for=\"s_relation\"><span class=\"emoji\">\u2764\ufe0f<\/span> \u0130li\u015fki<\/label>\r\n                            <\/div>\r\n                            <div class=\"radio-card\">\r\n                                <input type=\"radio\" id=\"s_marriage\" name=\"profile_seeking\" value=\"Evlilik\" required>\r\n                                <label for=\"s_marriage\"><span class=\"emoji\">\ud83d\udc8d<\/span> Evlilik<\/label>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"btn-row\">\r\n                        <button type=\"button\" class=\"btn-prev\" onclick=\"prevStep(2)\">Geri<\/button>\r\n                        <button type=\"button\" class=\"btn-next\" onclick=\"nextStep(2)\">Devam<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"form-step\" id=\"step-3\">\r\n                    <div class=\"spf-group\">\r\n                        <label class=\"field-label\">\u00dclke<\/label>\r\n                        <select name=\"profile_country\" id=\"spf_country\" required>\r\n                            <option value=\"T\u00fcrkiye\">T\u00fcrkiye<\/option>\r\n                            <option disabled>\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500<\/option>\r\n                            <option value=\"Almanya\">Almanya<\/option><option value=\"Amerika Birle\u015fik Devletleri\">Amerika Birle\u015fik Devletleri<\/option><option value=\"Arnavutluk\">Arnavutluk<\/option><option value=\"Avustralya\">Avustralya<\/option><option value=\"Avusturya\">Avusturya<\/option><option value=\"Azerbaycan\">Azerbaycan<\/option><option value=\"Bel\u00e7ika\">Bel\u00e7ika<\/option><option value=\"Birle\u015fik Arap Emirlikleri\">Birle\u015fik Arap Emirlikleri<\/option><option value=\"Birle\u015fik Krall\u0131k\">Birle\u015fik Krall\u0131k<\/option><option value=\"Bulgaristan\">Bulgaristan<\/option><option value=\"Cezayir\">Cezayir<\/option><option value=\"Danimarka\">Danimarka<\/option><option value=\"Fas\">Fas<\/option><option value=\"Finlandiya\">Finlandiya<\/option><option value=\"Fransa\">Fransa<\/option><option value=\"G\u00fcney Kore\">G\u00fcney Kore<\/option><option value=\"G\u00fcrcistan\">G\u00fcrcistan<\/option><option value=\"Hindistan\">Hindistan<\/option><option value=\"Hollanda\">Hollanda<\/option><option value=\"Irak\">Irak<\/option><option value=\"Japonya\">Japonya<\/option><option value=\"Kanada\">Kanada<\/option><option value=\"Katar\">Katar<\/option><option value=\"Kuveyt\">Kuveyt<\/option><option value=\"K\u0131br\u0131s\">K\u0131br\u0131s<\/option><option value=\"L\u00fcbnan\">L\u00fcbnan<\/option><option value=\"Meksika\">Meksika<\/option><option value=\"M\u0131s\u0131r\">M\u0131s\u0131r<\/option><option value=\"Norve\u00e7\">Norve\u00e7<\/option><option value=\"Polonya\">Polonya<\/option><option value=\"Portekiz\">Portekiz<\/option><option value=\"Romanya\">Romanya<\/option><option value=\"Rusya\">Rusya<\/option><option value=\"Suudi Arabistan\">Suudi Arabistan<\/option><option value=\"Ukrayna\">Ukrayna<\/option><option value=\"Yunanistan\">Yunanistan<\/option><option value=\"\u00c7in\">\u00c7in<\/option><option value=\"\u0130ran\">\u0130ran<\/option><option value=\"\u0130rlanda\">\u0130rlanda<\/option><option value=\"\u0130spanya\">\u0130spanya<\/option><option value=\"\u0130srail\">\u0130srail<\/option><option value=\"\u0130sve\u00e7\">\u0130sve\u00e7<\/option><option value=\"\u0130svi\u00e7re\">\u0130svi\u00e7re<\/option><option value=\"\u0130talya\">\u0130talya<\/option>                        <\/select>\r\n                    <\/div>\r\n\r\n                    <div class=\"spf-group\" id=\"group_state_dropdown\" style=\"display:none;\">\r\n                        <label class=\"field-label\">\u015eehir<\/label>\r\n                        <select name=\"profile_state_dropdown\" id=\"spf_state_dropdown\"><\/select>\r\n                    <\/div>\r\n\r\n                    <div class=\"spf-group\" id=\"group_state_other\" style=\"display:none;\">\r\n                        <label class=\"field-label\">\u015eehir \/ B\u00f6lge<\/label>\r\n                        <input type=\"text\" name=\"profile_state_other\" id=\"spf_state_other\" placeholder=\"\u015eehir giriniz\">\r\n                    <\/div>\r\n\r\n                    <div style=\"margin-top: 30px;\">\r\n                        <label class=\"checkbox-label\">\r\n                            <input type=\"checkbox\" id=\"skip_contact\" name=\"skip_contact\" value=\"1\">\r\n                            E-posta ve telefon numaram\u0131 vermek istemiyorum\r\n                        <\/label>\r\n\r\n                        <div id=\"contact_fields_wrapper\">\r\n                            <div class=\"spf-group\">\r\n                                <label class=\"field-label\">E-posta Adresi<\/label>\r\n                                <input type=\"email\" id=\"email_input\" name=\"profile_email\" value=\"\" placeholder=\"ornek@email.com\" required>\r\n                            <\/div>\r\n                            \r\n                            <div class=\"spf-group\">\r\n                                <label class=\"field-label\">Telefon Numaras\u0131<\/label>\r\n                                <div class=\"phone-group\">\r\n                                    <select name=\"profile_phone_code\" id=\"phone_code_input\" required>\r\n                                        <option value=\"+90\">+90 (TR)<\/option><option value=\"+49\">+49 (DE)<\/option><option value=\"+1\">+1 (US\/CA)<\/option><option value=\"+44\">+44 (UK)<\/option><option value=\"+33\">+33 (FR)<\/option><option value=\"+61\">+61 (AU)<\/option><option value=\"+39\">+39 (IT)<\/option><option value=\"+34\">+34 (ES)<\/option><option value=\"+7\">+7 (RU\/KZ)<\/option><option value=\"+81\">+81 (JP)<\/option><option value=\"+86\">+86 (CN)<\/option><option value=\"+91\">+91 (IN)<\/option><option value=\"+971\">+971 (AE)<\/option><option value=\"+966\">+966 (SA)<\/option>                                    <\/select>\r\n                                    <input type=\"number\" inputmode=\"numeric\" id=\"phone_input\" name=\"profile_phone\" value=\"\" placeholder=\"555 123 4567\" required>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"btn-row\">\r\n                        <button type=\"button\" class=\"btn-prev\" onclick=\"prevStep(3)\">Geri<\/button>\r\n                        <button type=\"button\" class=\"btn-next\" onclick=\"nextStep(3)\">Devam<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"form-step\" id=\"step-4\">\r\n                    <div class=\"spf-group\">\r\n                        <label class=\"field-label\">Hakk\u0131mda<\/label>\r\n                        <textarea name=\"profile_desc\" rows=\"4\" placeholder=\"Kendinizden, hobilerinizden ve yapmaktan ho\u015fland\u0131\u011f\u0131n\u0131z \u015feylerden bahsedin...\" required><\/textarea>\r\n                    <\/div>\r\n\r\n                    <div class=\"spf-group\">\r\n                        <label class=\"field-label\">Profil Foto\u011fraf\u0131<\/label>\r\n                        <label class=\"custom-file-upload\">\r\n                            <input type=\"file\" id=\"spf_photo\" name=\"profile_photo\" accept=\"image\/jpeg, image\/png\" required>\r\n                            \ud83d\udcf8 En \u0130yi Foto\u011fraf\u0131n\u0131z\u0131 Eklemek \u0130\u00e7in Dokunun\r\n                        <\/label>\r\n                        <div class=\"spf-photo-preview\" id=\"spf_preview_container\">\r\n                            <img decoding=\"async\" id=\"spf_img_preview\" src=\"#\" alt=\"\u00d6nizleme\">\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"btn-row\">\r\n                        <button type=\"button\" class=\"btn-prev\" onclick=\"prevStep(4)\">Geri<\/button>\r\n                        <button type=\"submit\" name=\"spf_submit\" class=\"btn-submit\">Profili Yay\u0131nla<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/form>\r\n        <\/div>\r\n\r\n        <script>\r\n            const totalSteps = 4;\r\n            const stepIndicator = document.getElementById('step-indicator');\r\n\r\n            function nextStep(currentStepNum) {\r\n                const currentStepDiv = document.getElementById('step-' + currentStepNum);\r\n                \r\n                const inputs = currentStepDiv.querySelectorAll('input[required], select[required], textarea[required]');\r\n                let isValid = true;\r\n                \r\n                for (let i = 0; i < inputs.length; i++) {\r\n                    if (!inputs[i].checkValidity()) {\r\n                        inputs[i].reportValidity(); \r\n                        isValid = false;\r\n                        break;\r\n                    }\r\n                }\r\n\r\n                if (isValid) {\r\n                    currentStepDiv.classList.remove('active');\r\n                    setTimeout(() => {\r\n                        currentStepDiv.style.display = 'none';\r\n                        const nextDiv = document.getElementById('step-' + (currentStepNum + 1));\r\n                        nextDiv.style.display = 'block';\r\n                        setTimeout(() => nextDiv.classList.add('active'), 10);\r\n                        stepIndicator.innerText = 'Ad\u0131m ' + (currentStepNum + 1) + ' \/ ' + totalSteps;\r\n                    }, 200);\r\n                }\r\n            }\r\n\r\n            function prevStep(currentStepNum) {\r\n                const currentStepDiv = document.getElementById('step-' + currentStepNum);\r\n                currentStepDiv.classList.remove('active');\r\n                \r\n                setTimeout(() => {\r\n                    currentStepDiv.style.display = 'none';\r\n                    const prevDiv = document.getElementById('step-' + (currentStepNum - 1));\r\n                    prevDiv.style.display = 'block';\r\n                    setTimeout(() => prevDiv.classList.add('active'), 10);\r\n                    stepIndicator.innerText = 'Ad\u0131m ' + (currentStepNum - 1) + ' \/ ' + totalSteps;\r\n                }, 200);\r\n            }\r\n\r\n            const skipCb = document.getElementById('skip_contact');\r\n            const contactWrapper = document.getElementById('contact_fields_wrapper');\r\n            const emailInput = document.getElementById('email_input');\r\n            const phoneCodeInput = document.getElementById('phone_code_input');\r\n            const phoneInput = document.getElementById('phone_input');\r\n\r\n            skipCb.addEventListener('change', function() {\r\n                if(this.checked) {\r\n                    contactWrapper.style.display = 'none';\r\n                    emailInput.required = false;\r\n                    phoneCodeInput.required = false;\r\n                    phoneInput.required = false;\r\n                } else {\r\n                    contactWrapper.style.display = 'block';\r\n                    emailInput.required = true;\r\n                    phoneCodeInput.required = true;\r\n                    phoneInput.required = true;\r\n                }\r\n            });\r\n\r\n            const statesData = {\r\n                \"T\u00fcrkiye\": { \"01\":\"Adana\",\"02\":\"Ad\u0131yaman\",\"03\":\"Afyonkarahisar\",\"04\":\"A\u011fr\u0131\",\"05\":\"Amasya\",\"06\":\"Ankara\",\"07\":\"Antalya\",\"08\":\"Artvin\",\"09\":\"Ayd\u0131n\",\"10\":\"Bal\u0131kesir\",\"11\":\"Bilecik\",\"12\":\"Bing\u00f6l\",\"13\":\"Bitlis\",\"14\":\"Bolu\",\"15\":\"Burdur\",\"16\":\"Bursa\",\"17\":\"\u00c7anakkale\",\"18\":\"\u00c7ank\u0131r\u0131\",\"19\":\"\u00c7orum\",\"20\":\"Denizli\",\"21\":\"Diyarbak\u0131r\",\"22\":\"Edirne\",\"23\":\"Elaz\u0131\u011f\",\"24\":\"Erzincan\",\"25\":\"Erzurum\",\"26\":\"Eski\u015fehir\",\"27\":\"Gaziantep\",\"28\":\"Giresun\",\"29\":\"G\u00fcm\u00fc\u015fhane\",\"30\":\"Hakkari\",\"31\":\"Hatay\",\"32\":\"Isparta\",\"33\":\"Mersin\",\"34\":\"\u0130stanbul\",\"35\":\"\u0130zmir\",\"36\":\"Kars\",\"37\":\"Kastamonu\",\"38\":\"Kayseri\",\"39\":\"K\u0131rklareli\",\"40\":\"K\u0131r\u015fehir\",\"41\":\"Kocaeli\",\"42\":\"Konya\",\"43\":\"K\u00fctahya\",\"44\":\"Malatya\",\"45\":\"Manisa\",\"46\":\"Kahramanmara\u015f\",\"47\":\"Mardin\",\"48\":\"Mu\u011fla\",\"49\":\"Mu\u015f\",\"50\":\"Nev\u015fehir\",\"51\":\"Ni\u011fde\",\"52\":\"Ordu\",\"53\":\"Rize\",\"54\":\"Sakarya\",\"55\":\"Samsun\",\"56\":\"Siirt\",\"57\":\"Sinop\",\"58\":\"Sivas\",\"59\":\"Tekirda\u011f\",\"60\":\"Tokat\",\"61\":\"Trabzon\",\"62\":\"Tunceli\",\"63\":\"\u015eanl\u0131urfa\",\"64\":\"U\u015fak\",\"65\":\"Van\",\"66\":\"Yozgat\",\"67\":\"Zonguldak\",\"68\":\"Aksaray\",\"69\":\"Bayburt\",\"70\":\"Karaman\",\"71\":\"K\u0131r\u0131kkale\",\"72\":\"Batman\",\"73\":\"\u015e\u0131rnak\",\"74\":\"Bart\u0131n\",\"75\":\"Ardahan\",\"76\":\"I\u011fd\u0131r\",\"77\":\"Yalova\",\"78\":\"Karab\u00fck\",\"79\":\"Kilis\",\"80\":\"Osmaniye\",\"81\":\"D\u00fczce\" }\r\n            };\r\n\r\n            const countrySelect = document.getElementById('spf_country');\r\n            const groupDropdown = document.getElementById('group_state_dropdown');\r\n            const groupOther = document.getElementById('group_state_other');\r\n            const inputDropdown = document.getElementById('spf_state_dropdown');\r\n            const inputOther = document.getElementById('spf_state_other');\r\n\r\n            function toggleStateInput() {\r\n                const selectedCountry = countrySelect.value;\r\n                if (statesData[selectedCountry]) {\r\n                    groupDropdown.style.display = 'block';\r\n                    groupOther.style.display = 'none';\r\n                    inputDropdown.required = true;\r\n                    inputOther.required = false;\r\n                    \r\n                    inputDropdown.innerHTML = '<option value=\"\">\u015eehir se\u00e7iniz...<\/option>';\r\n                    for (const [code, name] of Object.entries(statesData[selectedCountry])) {\r\n                        inputDropdown.innerHTML += `<option value=\"${name}\">${name}<\/option>`;\r\n                    }\r\n                } else {\r\n                    groupDropdown.style.display = 'none';\r\n                    groupOther.style.display = 'block';\r\n                    inputDropdown.required = false;\r\n                    inputOther.required = true;\r\n                }\r\n            }\r\n            \r\n            countrySelect.addEventListener('change', toggleStateInput);\r\n            toggleStateInput();\r\n\r\n            document.getElementById('spf_photo').onchange = function (evt) {\r\n                var tgt = evt.target || window.event.srcElement, files = tgt.files;\r\n                if (FileReader && files && files.length) {\r\n                    var fr = new FileReader();\r\n                    fr.onload = function () {\r\n                        document.getElementById('spf_img_preview').src = fr.result;\r\n                        document.getElementById('spf_preview_container').style.display = 'block';\r\n                    }\r\n                    fr.readAsDataURL(files[0]);\r\n                }\r\n            }\r\n        <\/script>\r\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-64","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.yaask.net\/index.php\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yaask.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yaask.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yaask.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yaask.net\/index.php\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":1,"href":"https:\/\/www.yaask.net\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"predecessor-version":[{"id":66,"href":"https:\/\/www.yaask.net\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions\/66"}],"wp:attachment":[{"href":"https:\/\/www.yaask.net\/index.php\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}