\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a | \u062d\u0633\u0627\u0628 \u0645\u0639\u0627\u0634 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 \u0627\u0644\u0645\u062f\u0646\u064a\u064a\u0646<\/title>\n <meta name=\"description\" content=\"\u062d\u0627\u0633\u0628\u0629 \u062a\u0642\u0627\u0639\u062f \u0645\u062f\u0646\u064a \u0633\u0639\u0648\u062f\u064a \u062f\u0642\u064a\u0642\u0629 - \u0627\u062d\u0633\u0628 \u0631\u0627\u062a\u0628 \u062a\u0642\u0627\u0639\u062f\u0643 \u0627\u0644\u0645\u062f\u0646\u064a \u0644\u0644\u0631\u062c\u0627\u0644 \u0648\u0627\u0644\u0646\u0633\u0627\u0621 \u062d\u0633\u0628 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f\">\n <meta name=\"keywords\" content=\"\u062a\u0642\u0627\u0639\u062f \u0645\u062f\u0646\u064a, \u062d\u0633\u0627\u0628 \u0645\u0639\u0627\u0634, \u0631\u0627\u062a\u0628 \u062a\u0642\u0627\u0639\u062f, \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a, \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f\">\n <meta name=\"author\" content=\"\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\">\n<\/head>\n<body>\n <div class=\"app\">\n <header>\n <h1>\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/h1>\n <p>\u062d\u0633\u0627\u0628 \u062f\u0642\u064a\u0642 \u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u062d\u0633\u0628 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f<\/p>\n <\/header>\n \n <main>\n <div class=\"gender-selector\">\n <button class=\"gender-btn active\" onclick=\"setGender('men')\">\u0631\u062c\u0627\u0644 \ud83d\udc68\u200d\ud83d\udcbc<\/button>\n <button class=\"gender-btn\" onclick=\"setGender('women')\">\u0646\u0633\u0627\u0621 \ud83d\udc69\u200d\ud83d\udcbc<\/button>\n <\/div>\n \n <div class=\"calculator\">\n <div class=\"input-section\">\n <div class=\"input-group\">\n <label for=\"salary\">\u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0627\u0644\u0623\u062e\u064a\u0631 (\u0631\u064a\u0627\u0644) \ud83d\udcb0<\/label>\n <input type=\"number\" id=\"salary\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\" min=\"3000\" max=\"100000\" step=\"500\">\n <small>\u0622\u062e\u0631 \u0631\u0627\u062a\u0628 \u0623\u0633\u0627\u0633\u064a \u0642\u0628\u0644 \u0627\u0644\u062a\u0642\u0627\u0639\u062f<\/small>\n <\/div>\n \n <div class=\"input-group\">\n <label for=\"years\">\u0639\u062f\u062f \u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629 \ud83d\udcc5<\/label>\n <input type=\"number\" id=\"years\" placeholder=\"\u0623\u062f\u062e\u0644 \u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629\" min=\"1\" max=\"40\">\n <small>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649: <span id=\"minYears\">20<\/span> \u0633\u0646\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f<\/small>\n <\/div>\n \n <div class=\"input-group\">\n <label for=\"age\">\u0627\u0644\u0639\u0645\u0631 \u0627\u0644\u062d\u0627\u0644\u064a (\u0633\u0646\u0648\u0627\u062a) \ud83c\udf82<\/label>\n <input type=\"number\" id=\"age\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0639\u0645\u0631\" min=\"45\" max=\"70\">\n <small>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649: <span id=\"minAge\">60<\/span> \u0633\u0646\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f<\/small>\n <\/div>\n \n <div id=\"childrenSection\" class=\"input-group\" style=\"display: none;\">\n <label for=\"children\">\u0639\u062f\u062f \u0627\u0644\u0623\u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u064a\u0646 \ud83d\udc76<\/label>\n <input type=\"number\" id=\"children\" placeholder=\"0\" min=\"0\" max=\"10\" value=\"0\">\n <small>200 \u0631\u064a\u0627\u0644 \u0644\u0643\u0644 \u0627\u0628\u0646 \u0634\u0647\u0631\u064a\u0627\u064b<\/small>\n <\/div>\n \n <button onclick=\"calculatePension()\" class=\"calc-btn\">\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \ud83d\udcca<\/button>\n <\/div>\n \n <div id=\"result\" class=\"result-section\">\n <h2>\u0646\u062a\u064a\u062c\u0629 \u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u0642\u0627\u0639\u062f<\/h2>\n <div class=\"result-grid\">\n <div class=\"result-card\">\n <div class=\"result-label\">\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629<\/div>\n <div class=\"result-value\" id=\"resultYears\">0<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0646\u0633\u0628\u0629 \u0627\u0644\u0627\u0633\u062a\u062d\u0642\u0627\u0642<\/div>\n <div class=\"result-value\" id=\"resultPercent\">0%<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0627\u0644\u0645\u0639\u0627\u0634 \u0627\u0644\u0623\u0633\u0627\u0633\u064a<\/div>\n <div class=\"result-value\" id=\"resultBasic\">0 \u0631\u064a\u0627\u0644<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0628\u062f\u0644 \u0627\u0644\u0623\u0628\u0646\u0627\u0621<\/div>\n <div class=\"result-value\" id=\"resultChildren\">0 \u0631\u064a\u0627\u0644<\/div>\n <\/div>\n <\/div>\n <div class=\"total-result\">\n <div class=\"total-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0634\u0647\u0631\u064a<\/div>\n <div class=\"total-value\" id=\"resultTotal\">0 \u0631\u064a\u0627\u0644<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"info-section\">\n <h3>\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0639\u0646 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a<\/h3>\n <div class=\"info-cards\">\n <div class=\"info-card\">\n <h4>\ud83d\udd39 \u0644\u0644\u0631\u062c\u0627\u0644<\/h4>\n <ul>\n <li>\u0633\u0646 \u0627\u0644\u062a\u0642\u0627\u0639\u062f: 60 \u0633\u0646\u0629<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u062e\u062f\u0645\u0629: 20 \u0633\u0646\u0629<\/li>\n <li>\u0646\u0633\u0628\u0629 \u0627\u0644\u0627\u0633\u062a\u062d\u0642\u0627\u0642: 2.5% \u0644\u0643\u0644 \u0633\u0646\u0629<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649: 80% \u0645\u0646 \u0627\u0644\u0631\u0627\u062a\u0628<\/li>\n <\/ul>\n <\/div>\n <div class=\"info-card\">\n <h4>\ud83d\udd39 \u0644\u0644\u0646\u0633\u0627\u0621<\/h4>\n <ul>\n <li>\u0633\u0646 \u0627\u0644\u062a\u0642\u0627\u0639\u062f: 55 \u0633\u0646\u0629<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u062e\u062f\u0645\u0629: 15 \u0633\u0646\u0629<\/li>\n <li>\u0646\u0633\u0628\u0629 \u0627\u0644\u0627\u0633\u062a\u062d\u0642\u0627\u0642: 2.5% \u0644\u0643\u0644 \u0633\u0646\u0629<\/li>\n <li>\u0628\u062f\u0644 \u0627\u0644\u0623\u0628\u0646\u0627\u0621: 200 \u0631\u064a\u0627\u0644\/\u0637\u0641\u0644<\/li>\n <\/ul>\n <\/div>\n <div class=\"info-card\">\n <h4>\ud83d\udccb \u0634\u0631\u0648\u0637 \u0625\u0636\u0627\u0641\u064a\u0629<\/h4>\n <ul>\n <li>\u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u0628\u0643\u0631: \u0628\u0639\u062f 30 \u0633\u0646\u0629 \u062e\u062f\u0645\u0629<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0645\u0639\u0627\u0634: 5000 \u0631\u064a\u0627\u0644<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649 \u0644\u0644\u0645\u0639\u0627\u0634: 50000 \u0631\u064a\u0627\u0644<\/li>\n <li>\u0628\u062f\u0644 \u063a\u0644\u0627\u0621 \u0645\u0639\u064a\u0634\u0629: 10% \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u0634<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n \n <footer>\n <p>\u00a9 2024 \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a | \u062d\u0633\u0627\u0628 \u062a\u0642\u062f\u064a\u0631\u064a \u062d\u0633\u0628 \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629<\/p>\n <p class=\"note\">\u26a0\ufe0f \u0647\u0630\u0647 \u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0644\u0644\u0623\u063a\u0631\u0627\u0636 \u0627\u0644\u062a\u0642\u062f\u064a\u0631\u064a\u0629 \u0641\u0642\u0637. \u0644\u0644\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u062f\u0642\u064a\u0642\u0629 \u064a\u0631\u062c\u0649 \u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f<\/p>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\n const PENSION_RULES = {\n men: { minAge: 60, minYears: 20, earlyYears: 30, childBonus: 0 },\n women: { minAge: 55, minYears: 15, earlyYears: 25, childBonus: 200 }\n };\n\n let currentGender = 'men';\n\n function setGender(gender) {\n currentGender = gender;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0623\u0632\u0631\u0627\u0631\n document.querySelectorAll('.gender-btn').forEach(btn => btn.classList.remove('active'));\n event.target.classList.add('active');\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u062f\u0646\u064a\u0627\n const rules = PENSION_RULES[gender];\n document.getElementById('minYears').textContent = rules.minYears;\n document.getElementById('minAge').textContent = rules.minAge;\n \n \/\/ \u0625\u0638\u0647\u0627\u0631\/\u0625\u062e\u0641\u0627\u0621 \u0642\u0633\u0645 \u0627\u0644\u0623\u0628\u0646\u0627\u0621\n document.getElementById('childrenSection').style.display = gender === 'women' ? 'block' : 'none';\n \n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0646\u062a\u0627\u0626\u062c\n document.getElementById('result').style.display = 'none';\n }\n\n function calculatePension() {\n \/\/ \u062c\u0644\u0628 \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0645\u062f\u062e\u0644\u0629\n const salary = parseFloat(document.getElementById('salary').value);\n const years = parseInt(document.getElementById('years').value);\n const age = parseInt(document.getElementById('age').value);\n const children = currentGender === 'women' ? parseInt(document.getElementById('children').value) || 0 : 0;\n \n const rules = PENSION_RULES[currentGender];\n \n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a\n if (!validateInputs(salary, years, age, rules)) return;\n \n \/\/ \u062d\u0633\u0627\u0628 \u0646\u0633\u0628\u0629 \u0627\u0644\u0627\u0633\u062a\u062d\u0642\u0627\u0642\n const percentage = calculatePercentage(years, age, rules);\n \n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\n const basicPension = (salary * percentage) \/ 100;\n \n \/\/ \u062d\u0633\u0627\u0628 \u0628\u062f\u0644 \u0627\u0644\u0623\u0628\u0646\u0627\u0621 (\u0644\u0644\u0646\u0633\u0627\u0621 \u0641\u0642\u0637)\n const childBonus = children * rules.childBonus;\n \n \/\/ \u062d\u0633\u0627\u0628 \u0628\u062f\u0644 \u063a\u0644\u0627\u0621 \u0627\u0644\u0645\u0639\u064a\u0634\u0629 (10%)\n const livingAllowance = basicPension * 0.1;\n \n \/\/ \u0627\u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\n let totalPension = basicPension + childBonus + livingAllowance;\n \n \/\/ \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062d\u062f\u0648\u062f \u0627\u0644\u062f\u0646\u064a\u0627 \u0648\u0627\u0644\u0642\u0635\u0648\u0649\n totalPension = applyLimits(totalPension);\n \n \/\/ \u0639\u0631\u0636 \u0627\u0644\u0646\u062a\u0627\u0626\u062c\n displayResults(years, percentage, basicPension, childBonus, totalPension);\n }\n\n function validateInputs(salary, years, age, rules) {\n if (!salary || salary < 3000 || salary > 100000) {\n alert('\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0631\u0627\u062a\u0628 \u0623\u0633\u0627\u0633\u064a \u0635\u062d\u064a\u062d (\u0628\u064a\u0646 3000 \u0648 100000 \u0631\u064a\u0627\u0644)');\n return false;\n }\n \n if (!years || years < 1 || years > 40) {\n alert('\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0633\u0646\u0648\u0627\u062a \u062e\u062f\u0645\u0629 \u0635\u062d\u064a\u062d\u0629 (\u0628\u064a\u0646 1 \u0648 40 \u0633\u0646\u0629)');\n return false;\n }\n \n if (!age || age < 45 || age > 70) {\n alert('\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0639\u0645\u0631 \u0635\u062d\u064a\u062d (\u0628\u064a\u0646 45 \u0648 70 \u0633\u0646\u0629)');\n return false;\n }\n \n if (years < rules.minYears) {\n alert(`\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629 \u0644\u0644${currentGender === 'men' ? '\u0631\u062c\u0627\u0644' : '\u0646\u0633\u0627\u0621'} \u0647\u0648 ${rules.minYears} \u0633\u0646\u0629`);\n return false;\n }\n \n if (age < rules.minAge) {\n alert(`\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0633\u0646 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0644\u0644${currentGender === 'men' ? '\u0631\u062c\u0627\u0644' : '\u0646\u0633\u0627\u0621'} \u0647\u0648 ${rules.minAge} \u0633\u0646\u0629`);\n return false;\n }\n \n return true;\n }\n\n function calculatePercentage(years, age, rules) {\n let percentage = years * 2.5; \/\/ 2.5% \u0644\u0643\u0644 \u0633\u0646\u0629\n \n \/\/ \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u0646\u0633\u0628\u0629 \u0625\u0630\u0627 \u0643\u0627\u0646 \u062a\u0642\u0627\u0639\u062f \u0645\u0628\u0643\u0631\n if (age < rules.minAge && years < rules.earlyYears) {\n percentage *= 0.8; \/\/ 80% \u0645\u0646 \u0627\u0644\u0646\u0633\u0628\u0629\n }\n \n \/\/ \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649 \u0644\u0644\u0646\u0633\u0628\u0629\n return Math.min(percentage, 80);\n }\n\n function applyLimits(pension) {\n \/\/ \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0645\u0639\u0627\u0634\n if (pension < 5000) pension = 5000;\n \n \/\/ \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649 \u0644\u0644\u0645\u0639\u0627\u0634\n if (pension > 50000) pension = 50000;\n \n return Math.round(pension);\n }\n\n function displayResults(years, percentage, basic, children, total) {\n document.getElementById('resultYears').textContent = years + ' \u0633\u0646\u0629';\n document.getElementById('resultPercent').textContent = percentage.toFixed(1) + '%';\n document.getElementById('resultBasic').textContent = formatNumber(Math.round(basic)) + ' \u0631\u064a\u0627\u0644';\n document.getElementById('resultChildren').textContent = formatNumber(children) + ' \u0631\u064a\u0627\u0644';\n document.getElementById('resultTotal').textContent = formatNumber(total) + ' \u0631\u064a\u0627\u0644';\n \n document.getElementById('result').style.display = 'block';\n document.getElementById('result').scrollIntoView({ behavior: 'smooth' });\n }\n\n function formatNumber(num) {\n return num.toLocaleString('ar-SA');\n }\n <\/script>\n\n <style>\n \/* Reset & Base *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);\n color: #1a237e;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n }\n \n .app {\n max-width: 900px;\n margin: 0 auto;\n background: white;\n border-radius: 24px;\n overflow: hidden;\n box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);\n }\n \n \/* Header *\/\n header {\n background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);\n color: white;\n padding: 40px 30px;\n text-align: center;\n }\n \n header h1 {\n font-size: 32px;\n margin-bottom: 12px;\n font-weight: 700;\n }\n \n header p {\n font-size: 18px;\n opacity: 0.9;\n }\n \n \/* Main Content *\/\n main {\n padding: 30px;\n }\n \n \/* Gender Selector *\/\n .gender-selector {\n display: flex;\n gap: 15px;\n margin-bottom: 30px;\n justify-content: center;\n }\n \n .gender-btn {\n flex: 1;\n max-width: 200px;\n padding: 18px 25px;\n background: #e3f2fd;\n border: 2px solid #bbdefb;\n border-radius: 15px;\n font-size: 18px;\n font-weight: 600;\n color: #1e3a8a;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n \n .gender-btn.active {\n background: #1e3a8a;\n color: white;\n border-color: #1e3a8a;\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(30, 58, 138, 0.3);\n }\n \n \/* Calculator *\/\n .input-section {\n background: #f8fafc;\n padding: 30px;\n border-radius: 20px;\n margin-bottom: 30px;\n border: 2px solid #e2e8f0;\n }\n \n .input-group {\n margin-bottom: 25px;\n }\n \n label {\n display: block;\n margin-bottom: 10px;\n font-weight: 600;\n color: #1e3a8a;\n font-size: 17px;\n }\n \n input {\n width: 100%;\n padding: 16px 20px;\n border: 2px solid #cbd5e1;\n border-radius: 12px;\n font-size: 18px;\n transition: all 0.3s;\n background: white;\n }\n \n input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);\n }\n \n small {\n display: block;\n margin-top: 8px;\n color: #64748b;\n font-size: 14px;\n }\n \n .calc-btn {\n width: 100%;\n padding: 20px;\n background: linear-gradient(135deg, #1e3a8a, #3b82f6);\n color: white;\n border: none;\n border-radius: 12px;\n font-size: 20px;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.3s;\n margin-top: 10px;\n }\n \n .calc-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);\n }\n \n \/* Results *\/\n .result-section {\n background: linear-gradient(135deg, #dbeafe, #e0f2fe);\n padding: 30px;\n border-radius: 20px;\n margin-bottom: 30px;\n border-right: 6px solid #3b82f6;\n display: none;\n animation: slideIn 0.5s ease;\n }\n \n @keyframes slideIn {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .result-section h2 {\n color: #1e3a8a;\n text-align: center;\n margin-bottom: 30px;\n font-size: 26px;\n }\n \n .result-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n margin-bottom: 30px;\n }\n \n .result-card {\n background: white;\n padding: 20px;\n border-radius: 15px;\n text-align: center;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n }\n \n .result-label {\n color: #64748b;\n font-size: 15px;\n margin-bottom: 10px;\n }\n \n .result-value {\n color: #1e3a8a;\n font-size: 22px;\n font-weight: 700;\n }\n \n .total-result {\n background: white;\n padding: 25px;\n border-radius: 15px;\n text-align: center;\n border: 3px solid #3b82f6;\n }\n \n .total-label {\n color: #1e3a8a;\n font-size: 18px;\n margin-bottom: 10px;\n font-weight: 600;\n }\n \n .total-value {\n color: #1e3a8a;\n font-size: 32px;\n font-weight: 800;\n }\n \n \/* Info Section *\/\n .info-section {\n margin-top: 40px;\n }\n \n .info-section h3 {\n color: #1e3a8a;\n text-align: center;\n margin-bottom: 25px;\n font-size: 24px;\n }\n \n .info-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n }\n \n .info-card {\n background: #f8fafc;\n padding: 25px;\n border-radius: 15px;\n border-top: 4px solid #3b82f6;\n }\n \n .info-card h4 {\n color: #1e3a8a;\n margin-bottom: 15px;\n font-size: 18px;\n }\n \n .info-card ul {\n list-style: none;\n padding-right: 15px;\n }\n \n .info-card li {\n margin-bottom: 10px;\n padding-right: 10px;\n position: relative;\n color: #475569;\n }\n \n .info-card li:before {\n content: \"\u2022\";\n color: #3b82f6;\n position: absolute;\n right: -15px;\n font-size: 20px;\n }\n \n \/* Footer *\/\n footer {\n text-align: center;\n padding: 30px;\n color: #64748b;\n font-size: 15px;\n border-top: 1px solid #e2e8f0;\n }\n \n .note {\n margin-top: 15px;\n color: #dc2626;\n font-size: 14px;\n padding: 15px;\n background: #fee2e2;\n border-radius: 10px;\n border: 1px solid #fca5a5;\n }\n \n \/* Responsive *\/\n @media (max-width: 768px) {\n body {\n padding: 10px;\n }\n \n header {\n padding: 30px 20px;\n }\n \n header h1 {\n font-size: 26px;\n }\n \n main {\n padding: 20px;\n }\n \n .gender-selector {\n flex-direction: column;\n align-items: center;\n }\n \n .gender-btn {\n max-width: 100%;\n }\n \n .input-section {\n padding: 20px;\n }\n \n input {\n padding: 14px;\n font-size: 16px;\n }\n \n .calc-btn {\n padding: 18px;\n font-size: 18px;\n }\n \n .result-grid {\n grid-template-columns: 1fr;\n }\n \n .total-value {\n font-size: 28px;\n }\n \n .info-cards {\n grid-template-columns: 1fr;\n }\n }\n \n @media (max-width: 480px) {\n header h1 {\n font-size: 22px;\n }\n \n header p {\n font-size: 16px;\n }\n \n .result-card, .info-card {\n padding: 20px;\n }\n \n .result-value {\n font-size: 20px;\n }\n \n .total-value {\n font-size: 24px;\n }\n }\n <\/style>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a | \u062d\u0633\u0627\u0628 \u0645\u0639\u0627\u0634 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 \u0627\u0644\u0645\u062f\u0646\u064a\u064a\u0646 \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a \u062d\u0633\u0627\u0628 \u062f\u0642\u064a\u0642 \u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u062d\u0633\u0628 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f \u0631\u062c\u0627\u0644 \ud83d\udc68\u200d\ud83d\udcbc \u0646\u0633\u0627\u0621 \ud83d\udc69\u200d\ud83d\udcbc \u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0627\u0644\u0623\u062e\u064a\u0631 (\u0631\u064a\u0627\u0644) \ud83d\udcb0 \u0622\u062e\u0631 \u0631\u0627\u062a\u0628 \u0623\u0633\u0627\u0633\u064a \u0642\u0628\u0644 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0639\u062f\u062f \u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629 \ud83d\udcc5 \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649: 20 \u0633\u0646\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0639\u0645\u0631 \u0627\u0644\u062d\u0627\u0644\u064a (\u0633\u0646\u0648\u0627\u062a) \ud83c\udf82 \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649: 60 \u0633\u0646\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f \u0639\u062f\u062f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-37","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/posts\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasabah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=37"}],"version-history":[{"count":1,"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/posts\/37\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/hasabah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasabah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasabah.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":37,"date":"2025-12-31T10:53:18","date_gmt":"2025-12-31T10:53:18","guid":{"rendered":"https:\/\/darkgoldenrod-quetzal-444860.hostingersite.com\/?p=37"},"modified":"2025-12-31T11:11:26","modified_gmt":"2025-12-31T11:11:26","slug":"%d9%83%d9%8a%d9%81-%d8%a7%d8%ad%d8%b3%d8%a8-%d8%a7%d9%84%d8%b1%d8%a7%d8%aa%d8%a8-%d8%a7%d9%84%d8%aa%d9%82%d8%a7%d8%b9%d8%af%d9%8a-%d8%a7%d9%84%d9%85%d8%af%d9%86%d9%8a","status":"publish","type":"post","link":"https:\/\/hasabah.com\/?p=37","title":{"rendered":"\u0643\u064a\u0641 \u0627\u062d\u0633\u0628 \u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u062a\u0642\u0627\u0639\u062f\u064a \u0627\u0644\u0645\u062f\u0646\u064a"},"content":{"rendered":"\n\n\n\n \n \n \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a | \u062d\u0633\u0627\u0628 \u0645\u0639\u0627\u0634 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 \u0627\u0644\u0645\u062f\u0646\u064a\u064a\u0646<\/title>\n <meta name=\"description\" content=\"\u062d\u0627\u0633\u0628\u0629 \u062a\u0642\u0627\u0639\u062f \u0645\u062f\u0646\u064a \u0633\u0639\u0648\u062f\u064a \u062f\u0642\u064a\u0642\u0629 - \u0627\u062d\u0633\u0628 \u0631\u0627\u062a\u0628 \u062a\u0642\u0627\u0639\u062f\u0643 \u0627\u0644\u0645\u062f\u0646\u064a \u0644\u0644\u0631\u062c\u0627\u0644 \u0648\u0627\u0644\u0646\u0633\u0627\u0621 \u062d\u0633\u0628 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f\">\n <meta name=\"keywords\" content=\"\u062a\u0642\u0627\u0639\u062f \u0645\u062f\u0646\u064a, \u062d\u0633\u0627\u0628 \u0645\u0639\u0627\u0634, \u0631\u0627\u062a\u0628 \u062a\u0642\u0627\u0639\u062f, \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a, \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f\">\n <meta name=\"author\" content=\"\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\">\n<\/head>\n<body>\n <div class=\"app\">\n <header>\n <h1>\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/h1>\n <p>\u062d\u0633\u0627\u0628 \u062f\u0642\u064a\u0642 \u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u062d\u0633\u0628 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f<\/p>\n <\/header>\n \n <main>\n <div class=\"gender-selector\">\n <button class=\"gender-btn active\" onclick=\"setGender('men')\">\u0631\u062c\u0627\u0644 \ud83d\udc68\u200d\ud83d\udcbc<\/button>\n <button class=\"gender-btn\" onclick=\"setGender('women')\">\u0646\u0633\u0627\u0621 \ud83d\udc69\u200d\ud83d\udcbc<\/button>\n <\/div>\n \n <div class=\"calculator\">\n <div class=\"input-section\">\n <div class=\"input-group\">\n <label for=\"salary\">\u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0627\u0644\u0623\u062e\u064a\u0631 (\u0631\u064a\u0627\u0644) \ud83d\udcb0<\/label>\n <input type=\"number\" id=\"salary\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\" min=\"3000\" max=\"100000\" step=\"500\">\n <small>\u0622\u062e\u0631 \u0631\u0627\u062a\u0628 \u0623\u0633\u0627\u0633\u064a \u0642\u0628\u0644 \u0627\u0644\u062a\u0642\u0627\u0639\u062f<\/small>\n <\/div>\n \n <div class=\"input-group\">\n <label for=\"years\">\u0639\u062f\u062f \u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629 \ud83d\udcc5<\/label>\n <input type=\"number\" id=\"years\" placeholder=\"\u0623\u062f\u062e\u0644 \u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629\" min=\"1\" max=\"40\">\n <small>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649: <span id=\"minYears\">20<\/span> \u0633\u0646\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f<\/small>\n <\/div>\n \n <div class=\"input-group\">\n <label for=\"age\">\u0627\u0644\u0639\u0645\u0631 \u0627\u0644\u062d\u0627\u0644\u064a (\u0633\u0646\u0648\u0627\u062a) \ud83c\udf82<\/label>\n <input type=\"number\" id=\"age\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0639\u0645\u0631\" min=\"45\" max=\"70\">\n <small>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649: <span id=\"minAge\">60<\/span> \u0633\u0646\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f<\/small>\n <\/div>\n \n <div id=\"childrenSection\" class=\"input-group\" style=\"display: none;\">\n <label for=\"children\">\u0639\u062f\u062f \u0627\u0644\u0623\u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u064a\u0646 \ud83d\udc76<\/label>\n <input type=\"number\" id=\"children\" placeholder=\"0\" min=\"0\" max=\"10\" value=\"0\">\n <small>200 \u0631\u064a\u0627\u0644 \u0644\u0643\u0644 \u0627\u0628\u0646 \u0634\u0647\u0631\u064a\u0627\u064b<\/small>\n <\/div>\n \n <button onclick=\"calculatePension()\" class=\"calc-btn\">\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \ud83d\udcca<\/button>\n <\/div>\n \n <div id=\"result\" class=\"result-section\">\n <h2>\u0646\u062a\u064a\u062c\u0629 \u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u0642\u0627\u0639\u062f<\/h2>\n <div class=\"result-grid\">\n <div class=\"result-card\">\n <div class=\"result-label\">\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629<\/div>\n <div class=\"result-value\" id=\"resultYears\">0<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0646\u0633\u0628\u0629 \u0627\u0644\u0627\u0633\u062a\u062d\u0642\u0627\u0642<\/div>\n <div class=\"result-value\" id=\"resultPercent\">0%<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0627\u0644\u0645\u0639\u0627\u0634 \u0627\u0644\u0623\u0633\u0627\u0633\u064a<\/div>\n <div class=\"result-value\" id=\"resultBasic\">0 \u0631\u064a\u0627\u0644<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0628\u062f\u0644 \u0627\u0644\u0623\u0628\u0646\u0627\u0621<\/div>\n <div class=\"result-value\" id=\"resultChildren\">0 \u0631\u064a\u0627\u0644<\/div>\n <\/div>\n <\/div>\n <div class=\"total-result\">\n <div class=\"total-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0634\u0647\u0631\u064a<\/div>\n <div class=\"total-value\" id=\"resultTotal\">0 \u0631\u064a\u0627\u0644<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"info-section\">\n <h3>\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0639\u0646 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a<\/h3>\n <div class=\"info-cards\">\n <div class=\"info-card\">\n <h4>\ud83d\udd39 \u0644\u0644\u0631\u062c\u0627\u0644<\/h4>\n <ul>\n <li>\u0633\u0646 \u0627\u0644\u062a\u0642\u0627\u0639\u062f: 60 \u0633\u0646\u0629<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u062e\u062f\u0645\u0629: 20 \u0633\u0646\u0629<\/li>\n <li>\u0646\u0633\u0628\u0629 \u0627\u0644\u0627\u0633\u062a\u062d\u0642\u0627\u0642: 2.5% \u0644\u0643\u0644 \u0633\u0646\u0629<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649: 80% \u0645\u0646 \u0627\u0644\u0631\u0627\u062a\u0628<\/li>\n <\/ul>\n <\/div>\n <div class=\"info-card\">\n <h4>\ud83d\udd39 \u0644\u0644\u0646\u0633\u0627\u0621<\/h4>\n <ul>\n <li>\u0633\u0646 \u0627\u0644\u062a\u0642\u0627\u0639\u062f: 55 \u0633\u0646\u0629<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u062e\u062f\u0645\u0629: 15 \u0633\u0646\u0629<\/li>\n <li>\u0646\u0633\u0628\u0629 \u0627\u0644\u0627\u0633\u062a\u062d\u0642\u0627\u0642: 2.5% \u0644\u0643\u0644 \u0633\u0646\u0629<\/li>\n <li>\u0628\u062f\u0644 \u0627\u0644\u0623\u0628\u0646\u0627\u0621: 200 \u0631\u064a\u0627\u0644\/\u0637\u0641\u0644<\/li>\n <\/ul>\n <\/div>\n <div class=\"info-card\">\n <h4>\ud83d\udccb \u0634\u0631\u0648\u0637 \u0625\u0636\u0627\u0641\u064a\u0629<\/h4>\n <ul>\n <li>\u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u0628\u0643\u0631: \u0628\u0639\u062f 30 \u0633\u0646\u0629 \u062e\u062f\u0645\u0629<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0645\u0639\u0627\u0634: 5000 \u0631\u064a\u0627\u0644<\/li>\n <li>\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649 \u0644\u0644\u0645\u0639\u0627\u0634: 50000 \u0631\u064a\u0627\u0644<\/li>\n <li>\u0628\u062f\u0644 \u063a\u0644\u0627\u0621 \u0645\u0639\u064a\u0634\u0629: 10% \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u0634<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n \n <footer>\n <p>\u00a9 2024 \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a | \u062d\u0633\u0627\u0628 \u062a\u0642\u062f\u064a\u0631\u064a \u062d\u0633\u0628 \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629<\/p>\n <p class=\"note\">\u26a0\ufe0f \u0647\u0630\u0647 \u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0644\u0644\u0623\u063a\u0631\u0627\u0636 \u0627\u0644\u062a\u0642\u062f\u064a\u0631\u064a\u0629 \u0641\u0642\u0637. \u0644\u0644\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u062f\u0642\u064a\u0642\u0629 \u064a\u0631\u062c\u0649 \u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f<\/p>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\n const PENSION_RULES = {\n men: { minAge: 60, minYears: 20, earlyYears: 30, childBonus: 0 },\n women: { minAge: 55, minYears: 15, earlyYears: 25, childBonus: 200 }\n };\n\n let currentGender = 'men';\n\n function setGender(gender) {\n currentGender = gender;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0623\u0632\u0631\u0627\u0631\n document.querySelectorAll('.gender-btn').forEach(btn => btn.classList.remove('active'));\n event.target.classList.add('active');\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u062f\u0646\u064a\u0627\n const rules = PENSION_RULES[gender];\n document.getElementById('minYears').textContent = rules.minYears;\n document.getElementById('minAge').textContent = rules.minAge;\n \n \/\/ \u0625\u0638\u0647\u0627\u0631\/\u0625\u062e\u0641\u0627\u0621 \u0642\u0633\u0645 \u0627\u0644\u0623\u0628\u0646\u0627\u0621\n document.getElementById('childrenSection').style.display = gender === 'women' ? 'block' : 'none';\n \n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0646\u062a\u0627\u0626\u062c\n document.getElementById('result').style.display = 'none';\n }\n\n function calculatePension() {\n \/\/ \u062c\u0644\u0628 \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0645\u062f\u062e\u0644\u0629\n const salary = parseFloat(document.getElementById('salary').value);\n const years = parseInt(document.getElementById('years').value);\n const age = parseInt(document.getElementById('age').value);\n const children = currentGender === 'women' ? parseInt(document.getElementById('children').value) || 0 : 0;\n \n const rules = PENSION_RULES[currentGender];\n \n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a\n if (!validateInputs(salary, years, age, rules)) return;\n \n \/\/ \u062d\u0633\u0627\u0628 \u0646\u0633\u0628\u0629 \u0627\u0644\u0627\u0633\u062a\u062d\u0642\u0627\u0642\n const percentage = calculatePercentage(years, age, rules);\n \n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\n const basicPension = (salary * percentage) \/ 100;\n \n \/\/ \u062d\u0633\u0627\u0628 \u0628\u062f\u0644 \u0627\u0644\u0623\u0628\u0646\u0627\u0621 (\u0644\u0644\u0646\u0633\u0627\u0621 \u0641\u0642\u0637)\n const childBonus = children * rules.childBonus;\n \n \/\/ \u062d\u0633\u0627\u0628 \u0628\u062f\u0644 \u063a\u0644\u0627\u0621 \u0627\u0644\u0645\u0639\u064a\u0634\u0629 (10%)\n const livingAllowance = basicPension * 0.1;\n \n \/\/ \u0627\u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\n let totalPension = basicPension + childBonus + livingAllowance;\n \n \/\/ \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062d\u062f\u0648\u062f \u0627\u0644\u062f\u0646\u064a\u0627 \u0648\u0627\u0644\u0642\u0635\u0648\u0649\n totalPension = applyLimits(totalPension);\n \n \/\/ \u0639\u0631\u0636 \u0627\u0644\u0646\u062a\u0627\u0626\u062c\n displayResults(years, percentage, basicPension, childBonus, totalPension);\n }\n\n function validateInputs(salary, years, age, rules) {\n if (!salary || salary < 3000 || salary > 100000) {\n alert('\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0631\u0627\u062a\u0628 \u0623\u0633\u0627\u0633\u064a \u0635\u062d\u064a\u062d (\u0628\u064a\u0646 3000 \u0648 100000 \u0631\u064a\u0627\u0644)');\n return false;\n }\n \n if (!years || years < 1 || years > 40) {\n alert('\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0633\u0646\u0648\u0627\u062a \u062e\u062f\u0645\u0629 \u0635\u062d\u064a\u062d\u0629 (\u0628\u064a\u0646 1 \u0648 40 \u0633\u0646\u0629)');\n return false;\n }\n \n if (!age || age < 45 || age > 70) {\n alert('\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0639\u0645\u0631 \u0635\u062d\u064a\u062d (\u0628\u064a\u0646 45 \u0648 70 \u0633\u0646\u0629)');\n return false;\n }\n \n if (years < rules.minYears) {\n alert(`\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629 \u0644\u0644${currentGender === 'men' ? '\u0631\u062c\u0627\u0644' : '\u0646\u0633\u0627\u0621'} \u0647\u0648 ${rules.minYears} \u0633\u0646\u0629`);\n return false;\n }\n \n if (age < rules.minAge) {\n alert(`\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0633\u0646 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0644\u0644${currentGender === 'men' ? '\u0631\u062c\u0627\u0644' : '\u0646\u0633\u0627\u0621'} \u0647\u0648 ${rules.minAge} \u0633\u0646\u0629`);\n return false;\n }\n \n return true;\n }\n\n function calculatePercentage(years, age, rules) {\n let percentage = years * 2.5; \/\/ 2.5% \u0644\u0643\u0644 \u0633\u0646\u0629\n \n \/\/ \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u0646\u0633\u0628\u0629 \u0625\u0630\u0627 \u0643\u0627\u0646 \u062a\u0642\u0627\u0639\u062f \u0645\u0628\u0643\u0631\n if (age < rules.minAge && years < rules.earlyYears) {\n percentage *= 0.8; \/\/ 80% \u0645\u0646 \u0627\u0644\u0646\u0633\u0628\u0629\n }\n \n \/\/ \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649 \u0644\u0644\u0646\u0633\u0628\u0629\n return Math.min(percentage, 80);\n }\n\n function applyLimits(pension) {\n \/\/ \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0645\u0639\u0627\u0634\n if (pension < 5000) pension = 5000;\n \n \/\/ \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u0642\u0635\u0649 \u0644\u0644\u0645\u0639\u0627\u0634\n if (pension > 50000) pension = 50000;\n \n return Math.round(pension);\n }\n\n function displayResults(years, percentage, basic, children, total) {\n document.getElementById('resultYears').textContent = years + ' \u0633\u0646\u0629';\n document.getElementById('resultPercent').textContent = percentage.toFixed(1) + '%';\n document.getElementById('resultBasic').textContent = formatNumber(Math.round(basic)) + ' \u0631\u064a\u0627\u0644';\n document.getElementById('resultChildren').textContent = formatNumber(children) + ' \u0631\u064a\u0627\u0644';\n document.getElementById('resultTotal').textContent = formatNumber(total) + ' \u0631\u064a\u0627\u0644';\n \n document.getElementById('result').style.display = 'block';\n document.getElementById('result').scrollIntoView({ behavior: 'smooth' });\n }\n\n function formatNumber(num) {\n return num.toLocaleString('ar-SA');\n }\n <\/script>\n\n <style>\n \/* Reset & Base *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);\n color: #1a237e;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n }\n \n .app {\n max-width: 900px;\n margin: 0 auto;\n background: white;\n border-radius: 24px;\n overflow: hidden;\n box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);\n }\n \n \/* Header *\/\n header {\n background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);\n color: white;\n padding: 40px 30px;\n text-align: center;\n }\n \n header h1 {\n font-size: 32px;\n margin-bottom: 12px;\n font-weight: 700;\n }\n \n header p {\n font-size: 18px;\n opacity: 0.9;\n }\n \n \/* Main Content *\/\n main {\n padding: 30px;\n }\n \n \/* Gender Selector *\/\n .gender-selector {\n display: flex;\n gap: 15px;\n margin-bottom: 30px;\n justify-content: center;\n }\n \n .gender-btn {\n flex: 1;\n max-width: 200px;\n padding: 18px 25px;\n background: #e3f2fd;\n border: 2px solid #bbdefb;\n border-radius: 15px;\n font-size: 18px;\n font-weight: 600;\n color: #1e3a8a;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n \n .gender-btn.active {\n background: #1e3a8a;\n color: white;\n border-color: #1e3a8a;\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(30, 58, 138, 0.3);\n }\n \n \/* Calculator *\/\n .input-section {\n background: #f8fafc;\n padding: 30px;\n border-radius: 20px;\n margin-bottom: 30px;\n border: 2px solid #e2e8f0;\n }\n \n .input-group {\n margin-bottom: 25px;\n }\n \n label {\n display: block;\n margin-bottom: 10px;\n font-weight: 600;\n color: #1e3a8a;\n font-size: 17px;\n }\n \n input {\n width: 100%;\n padding: 16px 20px;\n border: 2px solid #cbd5e1;\n border-radius: 12px;\n font-size: 18px;\n transition: all 0.3s;\n background: white;\n }\n \n input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);\n }\n \n small {\n display: block;\n margin-top: 8px;\n color: #64748b;\n font-size: 14px;\n }\n \n .calc-btn {\n width: 100%;\n padding: 20px;\n background: linear-gradient(135deg, #1e3a8a, #3b82f6);\n color: white;\n border: none;\n border-radius: 12px;\n font-size: 20px;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.3s;\n margin-top: 10px;\n }\n \n .calc-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);\n }\n \n \/* Results *\/\n .result-section {\n background: linear-gradient(135deg, #dbeafe, #e0f2fe);\n padding: 30px;\n border-radius: 20px;\n margin-bottom: 30px;\n border-right: 6px solid #3b82f6;\n display: none;\n animation: slideIn 0.5s ease;\n }\n \n @keyframes slideIn {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .result-section h2 {\n color: #1e3a8a;\n text-align: center;\n margin-bottom: 30px;\n font-size: 26px;\n }\n \n .result-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n margin-bottom: 30px;\n }\n \n .result-card {\n background: white;\n padding: 20px;\n border-radius: 15px;\n text-align: center;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n }\n \n .result-label {\n color: #64748b;\n font-size: 15px;\n margin-bottom: 10px;\n }\n \n .result-value {\n color: #1e3a8a;\n font-size: 22px;\n font-weight: 700;\n }\n \n .total-result {\n background: white;\n padding: 25px;\n border-radius: 15px;\n text-align: center;\n border: 3px solid #3b82f6;\n }\n \n .total-label {\n color: #1e3a8a;\n font-size: 18px;\n margin-bottom: 10px;\n font-weight: 600;\n }\n \n .total-value {\n color: #1e3a8a;\n font-size: 32px;\n font-weight: 800;\n }\n \n \/* Info Section *\/\n .info-section {\n margin-top: 40px;\n }\n \n .info-section h3 {\n color: #1e3a8a;\n text-align: center;\n margin-bottom: 25px;\n font-size: 24px;\n }\n \n .info-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n }\n \n .info-card {\n background: #f8fafc;\n padding: 25px;\n border-radius: 15px;\n border-top: 4px solid #3b82f6;\n }\n \n .info-card h4 {\n color: #1e3a8a;\n margin-bottom: 15px;\n font-size: 18px;\n }\n \n .info-card ul {\n list-style: none;\n padding-right: 15px;\n }\n \n .info-card li {\n margin-bottom: 10px;\n padding-right: 10px;\n position: relative;\n color: #475569;\n }\n \n .info-card li:before {\n content: \"\u2022\";\n color: #3b82f6;\n position: absolute;\n right: -15px;\n font-size: 20px;\n }\n \n \/* Footer *\/\n footer {\n text-align: center;\n padding: 30px;\n color: #64748b;\n font-size: 15px;\n border-top: 1px solid #e2e8f0;\n }\n \n .note {\n margin-top: 15px;\n color: #dc2626;\n font-size: 14px;\n padding: 15px;\n background: #fee2e2;\n border-radius: 10px;\n border: 1px solid #fca5a5;\n }\n \n \/* Responsive *\/\n @media (max-width: 768px) {\n body {\n padding: 10px;\n }\n \n header {\n padding: 30px 20px;\n }\n \n header h1 {\n font-size: 26px;\n }\n \n main {\n padding: 20px;\n }\n \n .gender-selector {\n flex-direction: column;\n align-items: center;\n }\n \n .gender-btn {\n max-width: 100%;\n }\n \n .input-section {\n padding: 20px;\n }\n \n input {\n padding: 14px;\n font-size: 16px;\n }\n \n .calc-btn {\n padding: 18px;\n font-size: 18px;\n }\n \n .result-grid {\n grid-template-columns: 1fr;\n }\n \n .total-value {\n font-size: 28px;\n }\n \n .info-cards {\n grid-template-columns: 1fr;\n }\n }\n \n @media (max-width: 480px) {\n header h1 {\n font-size: 22px;\n }\n \n header p {\n font-size: 16px;\n }\n \n .result-card, .info-card {\n padding: 20px;\n }\n \n .result-value {\n font-size: 20px;\n }\n \n .total-value {\n font-size: 24px;\n }\n }\n <\/style>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a | \u062d\u0633\u0627\u0628 \u0645\u0639\u0627\u0634 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 \u0627\u0644\u0645\u062f\u0646\u064a\u064a\u0646 \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0645\u062f\u0646\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a \u062d\u0633\u0627\u0628 \u062f\u0642\u064a\u0642 \u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u062d\u0633\u0628 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f \u0631\u062c\u0627\u0644 \ud83d\udc68\u200d\ud83d\udcbc \u0646\u0633\u0627\u0621 \ud83d\udc69\u200d\ud83d\udcbc \u0627\u0644\u0631\u0627\u062a\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0627\u0644\u0623\u062e\u064a\u0631 (\u0631\u064a\u0627\u0644) \ud83d\udcb0 \u0622\u062e\u0631 \u0631\u0627\u062a\u0628 \u0623\u0633\u0627\u0633\u064a \u0642\u0628\u0644 \u0627\u0644\u062a\u0642\u0627\u0639\u062f \u0639\u062f\u062f \u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629 \ud83d\udcc5 \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649: 20 \u0633\u0646\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f \u0627\u0644\u0639\u0645\u0631 \u0627\u0644\u062d\u0627\u0644\u064a (\u0633\u0646\u0648\u0627\u062a) \ud83c\udf82 \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649: 60 \u0633\u0646\u0629 \u0644\u0644\u062a\u0642\u0627\u0639\u062f \u0639\u062f\u062f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-37","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/posts\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasabah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=37"}],"version-history":[{"count":1,"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/hasabah.com\/index.php?rest_route=\/wp\/v2\/posts\/37\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/hasabah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasabah.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasabah.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}