Spaces:

Really-amin
/

moeincart

Running

App Files Files Community

moeincart / index.html

Really-amin

Update index.html

b02f3d2 verified 7 days ago

raw

history blame contribute delete

135 kB

	<script>
	// اسکریپت برای مخفی کردن رابط هاگینگ فیس
	window.addEventListener('load', function() {
	// مخفی کردن عناصر رابط هاگینگ فیس
	const hideHuggingFaceElements = function() {
	const elementsToHide = document.querySelectorAll('.spaces-page, .hf-container, .hf-header, .hf-main-navigation, .hf-space-title, .hf-space-tabs-container, .hf-space-elements, .hf-space-subtitle, .hf-space-apps, [data-testid="site-header"], .hf-space, .border-b');

	elementsToHide.forEach(function(element) {
	if (element) {
	element.style.display = 'none';
	element.style.visibility = 'hidden';
	element.style.height = '0';
	element.style.opacity = '0';
	element.style.pointerEvents = 'none';
	}
	});

	// اطمینان از اینکه محتوای ما 100% عرض صفحه را دارد
	const content = document.querySelector('.container');
	if (content) {
	content.style.width = '100%';
	content.style.maxWidth = '1000px';
	content.style.padding = '15px';
	content.style.margin = '0 auto';
	}
	};

	// اجرای اولیه
	hideHuggingFaceElements();

	// اجرای مجدد با تأخیر برای اطمینان از تأثیرگذاری
	setTimeout(hideHuggingFaceElements, 500);
	setTimeout(hideHuggingFaceElements, 1000);
	setTimeout(hideHuggingFaceElements, 2000);
	});
	</script><!DOCTYPE html>
	<html dir="rtl" lang="fa">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>راهنمای تعاملی کارت معین مطالبات - نسخه ارتقا یافته</title>
	<!-- فونت‌های متنوع فارسی -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Lalezar&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400;500;600;700&display=swap" rel="stylesheet">
	<style>
	* {
	box-sizing: border-box;
	font-family: 'Noto Sans Arabic', 'Vazirmatn', Tahoma, Arial, sans-serif;
	}

	h1, h2, h3, h4, .nav-item, .tab, .calculator-btn {
	font-family: 'Vazirmatn', 'Noto Sans Arabic', Tahoma, sans-serif;
	}

	.card-title, .step-title, .info-title, .grid-item-title {
	font-family: 'Markazi Text', 'Vazirmatn', serif;
	}

	header h1 {
	font-family: 'Lalezar', 'Vazirmatn', cursive;
	}

	:root {
	/* پالت رنگی مدرن و ارتقا یافته */
	--primary-color: #4A63FF;
	--primary-dark: #3044D5;
	--primary-light: #EEF2FF;
	--secondary-color: #05BFD7;
	--success-color: #2ECC71;
	--success-light: #E8F9EF;
	--warning-color: #F39C12;
	--warning-light: #FEF5E7;
	--danger-color: #F24B7A;
	--danger-light: #FEE9EF;
	--info-color: #3498DB;
	--info-light: #E9F7FE;
	--text-primary: #2A345C;
	--text-secondary: #556087;
	--background: #F7FAFF;
	--card-bg: #ffffff;
	--border-radius: 18px;
	--box-shadow: 0 12px 35px rgba(74, 99, 255, 0.08);
	--transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body {
	background-color: var(--background);
	background-image:
	url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z' fill='%234A63FF' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"),
	linear-gradient(rgba(74, 99, 255, 0.03) 1px, transparent 1px),
	linear-gradient(90deg, rgba(74, 99, 255, 0.03) 1px, transparent 1px);
	background-size: 100px 100px, 25px 25px, 25px 25px;
	background-position: 0 0, 0 0, 0 0;
	margin: 0;
	padding: 0;
	color: var(--text-primary);
	line-height: 1.7;
	overflow-x: hidden;
	min-height: 100vh;
	font-feature-settings: "ss01", "ss02", "ss03", "calt", "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.2px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

	.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.98);
	background-image: linear-gradient(45deg, rgba(74, 99, 255, 0.02) 25%, transparent 25%, transparent 50%, rgba(74, 99, 255, 0.02) 50%, rgba(74, 99, 255, 0.02) 75%, transparent 75%, transparent);
	background-size: 60px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.7s ease-out, transform 0.5s ease-out;
	}

	.loading-spinner {
	width: 90px;
	height: 90px;
	position: relative;
	}

	.loading-spinner::before,
	.loading-spinner::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	.loading-spinner::before {
	border: 6px solid rgba(74, 99, 255, 0.1);
	border-top-color: var(--primary-color);
	animation: spin 1.7s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
	}

	.loading-spinner::after {
	border: 6px solid transparent;
	border-top-color: var(--secondary-color);
	animation: spin 1.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
	opacity: 0.6;
	}

	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

	.loading-text {
	margin-top: 25px;
	font-family: 'Lalezar', 'Vazirmatn', cursive;
	font-size: 20px;
	color: var(--primary-dark);
	font-weight: 400;
	letter-spacing: 0.5px;
	position: relative;
	overflow: hidden;
	padding: 5px 10px;
	border-radius: 10px;
	background: linear-gradient(120deg, rgba(74, 99, 255, 0.04), rgba(5, 191, 215, 0.04));
	box-shadow: 0 4px 15px rgba(74, 99, 255, 0.05);
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
	}

	.loading-text::after {
	content: '';
	position: absolute;
	width: 30px;
	height: 120%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
	animation: shimmer 1.8s infinite;
	transform: translateX(-100%) skewX(-20deg);
	}

	@keyframes shimmer {
	0% { transform: translateX(-100%) skewX(-20deg); }
	100% { transform: translateX(200%) skewX(-20deg); }
	}

	.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 25px;
	}

	header {
	background: linear-gradient(135deg, #5F6CFF, #20BCDA);
	border-radius: var(--border-radius);
	padding: 40px 30px;
	margin-bottom: 40px;
	color: white;
	box-shadow: 0 15px 35px rgba(95, 108, 255, 0.12);
	position: relative;
	overflow: hidden;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	header::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(rgba(255, 255, 255, 0.15), transparent 60%);
	transform: rotate(30deg);
	pointer-events: none;
	}

	header::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	right: 0;
	height: 120px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.1' d='M0,32L48,69.3C96,107,192,181,288,181.3C384,181,480,107,576,112C672,117,768,203,864,213.3C960,224,1056,160,1152,138.7C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
	background-size: cover;
	background-position: center bottom;
	pointer-events: none;
	opacity: 0.4;
	}

	header h1 {
	margin: 0 0 20px;
	font-size: 2.6rem;
	text-shadow: 0 2px 15px rgba(0,0,0,0.1);
	font-weight: 800;
	position: relative;
	}

	header h1::after {
	content: "";
	display: block;
	width: 100px;
	height: 4px;
	background: rgba(255, 255, 255, 0.8);
	margin: 15px auto 0;
	border-radius: 2px;
	box-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
	}

	header p {
	font-size: 1.2rem;
	opacity: 0.95;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.8;
	text-shadow: 0 1px 5px rgba(0,0,0,0.08);
	}

	.header-icon {
	background: rgba(255, 255, 255, 0.2);
	width: 90px;
	height: 90px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	font-size: 40px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	position: relative;
	overflow: hidden;
	}

	.header-icon::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 70%);
	}

	.main-nav {
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: var(--border-radius);
	padding: 7px;
	margin-bottom: 40px;
	box-shadow: var(--box-shadow);
	display: flex;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-light) transparent;
	position: sticky;
	top: 15px;
	z-index: 100;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(74, 99, 255, 0.08);
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.main-nav.scrolled {
	box-shadow: 0 15px 35px rgba(0,0,0,0.1);
	border-color: rgba(74, 99, 255, 0.15);
	padding: 8px;
	}

	.main-nav::-webkit-scrollbar {
	height: 6px;
	}

	.main-nav::-webkit-scrollbar-track {
	background: transparent;
	}

	.main-nav::-webkit-scrollbar-thumb {
	background-color: var(--primary-light);
	border-radius: 20px;
	}

	.nav-item {
	padding: 15px 24px;
	margin: 5px;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 14px;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	font-weight: 600;
	display: flex;
	align-items: center;
	color: var(--text-secondary);
	position: relative;
	overflow: hidden;
	z-index: 1;
	border: 1px solid transparent;
	}

	.nav-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	opacity: 0;
	z-index: -1;
	transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	border-radius: 14px;
	}

	.nav-item.active {
	color: white;
	transform: translateY(-1px);
	box-shadow: 0 5px 15px rgba(74, 99, 255, 0.25);
	}

	.nav-item.active::before {
	opacity: 1;
	}

	.nav-item:not(.active) {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.8));
	border: 1px solid rgba(74, 99, 255, 0.1);
	}

	.nav-item:not(.active):hover {
	background: linear-gradient(to bottom, var(--primary-light), rgba(255, 255, 255, 0.95));
	color: var(--primary-color);
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(74, 99, 255, 0.15);
	border-color: rgba(74, 99, 255, 0.2);
	}

	.nav-item svg {
	margin-left: 10px;
	transition: transform 0.3s ease, filter 0.3s ease;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
	}

	.nav-item:hover svg {
	transform: translateY(-2px);
	filter: drop-shadow(0 2px 3px rgba(74, 99, 255, 0.3));
	}

	.nav-item.active svg {
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
	}

	.content-section {
	display: none;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.content-section.active {
	display: block;
	opacity: 1;
	transform: translateY(0);
	animation: fadeIn 0.5s ease-out;
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
	}

	@keyframes slideInRight {
	from { transform: translateX(30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
	}

	@keyframes slideInLeft {
	from { transform: translateX(-30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
	}

	@keyframes scaleUp {
	from { transform: scale(0.95); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
	}

	.card {
	background-color: white;
	border-radius: var(--border-radius);
	padding: 40px;
	margin-bottom: 50px;
	box-shadow: var(--box-shadow), 0 1px 3px rgba(0,0,0,0.05);
	position: relative;
	overflow: hidden;
	animation: scaleUp 0.5s ease-out;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	border: 1px solid rgba(74, 99, 255, 0.05);
	isolation: isolate;
	}

	.card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 45px rgba(74, 99, 255, 0.15), 0 1px 3px rgba(0,0,0,0.05);
	}

	.card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
	border-radius: var(--border-radius) 0 0 var(--border-radius);
	}

	.card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(120deg, rgba(255,255,255,0.4), rgba(255,255,255,0), rgba(255,255,255,0.2));
	z-index: -1;
	pointer-events: none;
	}

	.card-title {
	display: flex;
	align-items: center;
	margin-top: 0;
	margin-bottom: 25px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	color: var(--primary-color);
	font-weight: 800;
	position: relative;
	font-size: 1.4rem;
	}

	p, li, .instruction-list li, .form-label, .result-item span:first-child {
	font-size: 0.8rem;
	}

	.info-title {
	font-weight: 700;
	margin: 12px 0;
	color: var(--text-primary);
	font-size: 0.95rem;
	position: relative;
	}

	.step-title {
	margin-top: 0;
	margin-bottom: 12px;
	color: var(--primary-color);
	font-size: 1rem;
	font-weight: 700;
	}

	.calculator h3 {
	margin-top: 0;
	color: var(--primary-color);
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-size: 1.1rem;
	position: relative;
	}

	.calculator-result h4 {
	margin-top: 0;
	color: var(--primary-color);
	border-bottom: 1px solid rgba(74, 99, 255, 0.15);
	padding-bottom: 10px;
	font-weight: 700;
	font-size: 0.9rem;
	position: relative;
	z-index: 1;
	}

	.card-title svg {
	margin-left: 15px;
	filter: drop-shadow(0 2px 4px rgba(74, 99, 255, 0.3));
	}

	.card-title::after {
	content: "";
	position: absolute;
	bottom: -1px;
	right: 0;
	width: 100px;
	height: 1px;
	background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
	}

	.step-container {
	margin-bottom: 35px;
	border-right: 3px solid var(--primary-light);
	padding-right: 25px;
	position: relative;
	padding-bottom: 10px;
	animation: slideInRight 0.5s ease-out;
	animation-fill-mode: both;
	}

	.step-container:nth-child(1) { animation-delay: 0.1s; }
	.step-container:nth-child(2) { animation-delay: 0.2s; }
	.step-container:nth-child(3) { animation-delay: 0.3s; }
	.step-container:nth-child(4) { animation-delay: 0.4s; }
	.step-container:nth-child(5) { animation-delay: 0.5s; }

	.step-container::before {
	content: attr(data-step);
	position: absolute;
	right: -18px;
	top: 0;
	width: 35px;
	height: 35px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	box-shadow: 0 5px 15px rgba(95, 108, 255, 0.3);
	}

	.step-title {
	margin-top: 0;
	margin-bottom: 20px;
	color: var(--primary-color);
	font-size: 1.3rem;
	font-weight: 700;
	}

	.step-content {
	background-color: var(--primary-light);
	border-radius: 18px;
	padding: 25px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 5px 15px rgba(95, 108, 255, 0.05);
	}

	.step-content:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(95, 108, 255, 0.1);
	}

	.instruction-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
	}

	.instruction-list li {
	margin-bottom: 15px;
	padding-right: 28px;
	position: relative;
	transition: transform 0.3s ease;
	}

	.instruction-list li:hover {
	transform: translateX(-5px);
	}

	.instruction-list li::before {
	content: "→";
	color: var(--primary-color);
	position: absolute;
	right: 0;
	font-weight: bold;
	transition: transform 0.3s ease;
	}

	.instruction-list li:hover::before {
	transform: translateX(-5px);
	}

	.path-highlight {
	background-color: #f0f4ff;
	padding: 15px 18px;
	border-radius: 12px;
	font-family: 'Vazirmatn', monospace;
	font-weight: 500;
	margin: 20px 0;
	display: flex;
	align-items: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.03);
	border-right: 4px solid var(--primary-color);
	position: relative;
	overflow: hidden;
	font-size: 0.95rem;
	}

	.path-highlight::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(95, 108, 255, 0.05), transparent);
	transform: translateX(-100%);
	animation: shimmerPath 3s infinite;
	}

	@keyframes shimmerPath {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
	}

	.path-highlight i {
	margin-left: 12px;
	color: var(--primary-color);
	font-size: 1.2em;
	}

	.alert-box {
	padding: 18px 55px 18px 18px;
	margin: 22px 0;
	border-radius: var(--border-radius);
	position: relative;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.05);
	font-size: 0.9rem;
	}

	.alert-box:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 8px 25px rgba(0,0,0,0.1);
	}

	.alert-box::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(255,255,255,0.5);
	box-shadow: 0 3px 10px rgba(0,0,0,0.08);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 1;
	transition: all 0.3s ease;
	}

	.alert-box:hover::before {
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 5px 15px rgba(0,0,0,0.12);
	}

	.alert-box::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent);
	pointer-events: none;
	z-index: 0;
	}

	.alert-warning {
	background-color: var(--warning-light);
	border-right: 4px solid var(--warning-color);
	}

	.alert-warning::before {
	content: "\f071";
	color: var(--warning-color);
	}

	.alert-danger {
	background-color: var(--danger-light);
	border-right: 4px solid var(--danger-color);
	}

	.alert-danger::before {
	content: "\f00d";
	color: var(--danger-color);
	}

	.alert-info {
	background-color: var(--info-light);
	border-right: 4px solid var(--info-color);
	}

	.alert-info::before {
	content: "\f129";
	color: var(--info-color);
	}

	.alert-success {
	background-color: var(--success-light);
	border-right: 4px solid var(--success-color);
	}

	.alert-success::before {
	content: "\f00c";
	color: var(--success-color);
	}

	.alert-box strong {
	position: relative;
	z-index: 1;
	font-weight: 700;
	font-size: 1.05rem;
	display: inline-block;
	margin-bottom: 5px;
	}

	.form-mockup {
	background: linear-gradient(to bottom, #fff, #f9f9f9);
	border-radius: 14px;
	padding: 25px;
	margin: 25px 0;
	border: 1px solid rgba(0,0,0,0.05);
	box-shadow: 0 5px 20px rgba(0,0,0,0.03);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
	}

	.form-mockup:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	}

	.form-mockup::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	border-radius: 14px 14px 0 0;
	}

	.form-mockup-title {
	margin-top: 0;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	color: var(--text-primary);
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	font-weight: 600;
	}

	.form-mockup-title i {
	margin-left: 10px;
	color: var(--primary-color);
	font-size: 1.2em;
	}

	.form-group {
	margin-bottom: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	transition: all 0.3s ease;
	padding: 8px;
	border-radius: 10px;
	}

	.form-group:hover {
	background-color: rgba(95, 108, 255, 0.03);
	}

	.form-label {
	width: 30%;
	min-width: 150px;
	padding: 10px;
	font-weight: 600;
	color: var(--text-secondary);
	}

	.form-input {
	flex: 1;
	min-width: 200px;
	padding: 12px 15px;
	background-color: white;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 8px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.02);
	}

	.form-group:hover .form-input {
	border-color: var(--primary-color);
	box-shadow: 0 5px 15px rgba(95, 108, 255, 0.08);
	}

	.infographic {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	margin: 30px 0;
	}

	.info-item {
	flex: 1;
	min-width: 250px;
	background: white;
	border-radius: var(--border-radius);
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	z-index: 1;
	border: 1px solid rgba(74, 99, 255, 0.05);
	background-image: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
	}

	.info-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	z-index: 2;
	opacity: 0;
	transition: opacity 0.4s ease;
	}

	.info-item:hover {
	transform: translateY(-12px) scale(1.03);
	box-shadow: 0 20px 40px rgba(74, 99, 255, 0.15);
	border-color: rgba(74, 99, 255, 0.2);
	}

	.info-item:hover::before {
	opacity: 1;
	}

	.info-icon {
	width: 85px;
	height: 85px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--primary-light), rgba(5, 191, 215, 0.2));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	box-shadow: 0 10px 20px rgba(74, 99, 255, 0.1);
	border: 1px solid rgba(74, 99, 255, 0.08);
	transform: rotate(-5deg);
	}

	.info-item:hover .info-icon {
	transform: scale(1.15) rotate(0deg);
	box-shadow: 0 15px 30px rgba(74, 99, 255, 0.2);
	background: linear-gradient(135deg, rgba(74, 99, 255, 0.12), rgba(5, 191, 215, 0.15));
	}

	.info-icon svg {
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	filter: drop-shadow(0 3px 6px rgba(74, 99, 255, 0.2));
	}

	.info-item:hover .info-icon svg {
	transform: scale(1.2);
	filter: drop-shadow(0 4px 8px rgba(74, 99, 255, 0.3));
	}

	.info-title {
	font-weight: 700;
	margin: 15px 0;
	color: var(--text-primary);
	font-size: 1.2rem;
	position: relative;
	}

	.info-title::after {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	margin: 12px auto 0;
	border-radius: 2px;
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 2px 5px rgba(74, 99, 255, 0.15);
	}

	.info-item:hover .info-title::after {
	width: 70px;
	}

	.info-item p {
	color: var(--text-secondary);
	line-height: 1.8;
	margin: 0;
	transition: all 0.3s ease;
	}

	.info-item:hover p {
	color: var(--text-primary);
	}

	.flowchart {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 30px 0;
	position: relative;
	}

	.flowchart::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	background: linear-gradient(to bottom, var(--primary-light), var(--secondary-color));
	transform: translateX(-50%);
	border-radius: 2px;
	z-index: 0;
	}

	.flowchart-box {
	width: 100%;
	max-width: 400px;
	padding: 20px;
	margin: 10px 0;
	background-color: white;
	border: 1px solid rgba(95, 108, 255, 0.1);
	border-radius: 12px;
	text-align: center;
	position: relative;
	z-index: 1;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	transition: all 0.3s ease;
	font-weight: 500;
	color: var(--text-primary);
	}

	.flowchart-box:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 10px 30px rgba(95, 108, 255, 0.1);
	border-color: var(--primary-color);
	}

	.flowchart-arrow {
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--primary-color);
	font-size: 24px;
	position: relative;
	z-index: 1;
	}

	.flowchart-arrow i {
	animation: bounce 1.5s infinite;
	background: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	}

	@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(10px); }
	}

	.process-steps {
	display: flex;
	justify-content: space-between;
	margin: 40px 0;
	position: relative;
	}

	.process-steps::before {
	content: "";
	position: absolute;
	top: 25px;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #eeeeee, #e0e0e0);
	z-index: 0;
	border-radius: 2px;
	}

	.process-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 1;
	width: 18%;
	transition: all 0.3s ease;
	}

	.process-step:hover {
	transform: translateY(-5px);
	}

	.step-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: white;
	border: 3px solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
	color: #e0e0e0;
	font-size: 20px;
	transition: all 0.3s ease;
	box-shadow: 0 5px 10px rgba(0,0,0,0.05);
	}

	.process-step.active .step-icon {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	border-color: var(--primary-color);
	color: white;
	box-shadow: 0 8px 20px rgba(95, 108, 255, 0.2);
	transform: scale(1.2);
	}

	.process-step.completed .step-icon {
	background: linear-gradient(135deg, var(--success-color), #7dcd81);
	border-color: var(--success-color);
	color: white;
	box-shadow: 0 8px 20px rgba(76, 175, 80, 0.2);
	}

	.step-label {
	text-align: center;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-secondary);
	transition: all 0.3s ease;
	}

	.process-step.active .step-label {
	color: var(--primary-color);
	font-weight: 700;
	transform: scale(1.05);
	}

	.process-step.completed .step-label {
	color: var(--success-color);
	font-weight: 600;
	}

	.tab-container {
	margin: 25px 0;
	}

	.tab-navigation {
	display: flex;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-light) transparent;
	margin-bottom: 25px;
	padding-bottom: 2px;
	}

	.tab-navigation::-webkit-scrollbar {
	height: 6px;
	}

	.tab-navigation::-webkit-scrollbar-track {
	background: transparent;
	}

	.tab-navigation::-webkit-scrollbar-thumb {
	background-color: var(--primary-light);
	border-radius: 3px;
	}

	.tab {
	padding: 14px 22px;
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	font-weight: 600;
	color: var(--text-secondary);
	position: relative;
	overflow: hidden;
	margin-right: 5px;
	}

	.tab::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	transition: width 0.3s ease;
	}

	.tab.active::before,
	.tab:hover::before {
	width: 100%;
	}

	.tab.active {
	color: var(--primary-color);
	font-weight: 700;
	}

	.tab:hover:not(.active) {
	color: var(--primary-color);
	background-color: var(--primary-light);
	border-radius: 8px 8px 0 0;
	}

	.tab i {
	margin-left: 10px;
	font-size: 1.1em;
	transition: transform 0.3s ease;
	}

	.tab:hover i {
	transform: translateY(-2px);
	}

	.tab-content {
	display: none;
	animation: fadeIn 0.6s;
	}

	.tab-content.active {
	display: block;
	}

	.calculator {
	background-color: white;
	border-radius: var(--border-radius);
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	padding: 35px;
	margin: 35px 0;
	border: 1px solid rgba(74, 99, 255, 0.08);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	}

	.calculator:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(74, 99, 255, 0.12);
	border-color: rgba(74, 99, 255, 0.15);
	}

	.calculator::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	z-index: 0;
	}

	.calculator::after {
	content: '';
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(74, 99, 255, 0.03), transparent 50%);
	pointer-events: none;
	z-index: -1;
	}

	.calculator h3 {
	margin-top: 0;
	color: var(--primary-color);
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	display: flex;
	align-items: center;
	gap: 15px;
	font-weight: 700;
	font-size: 1.4rem;
	position: relative;
	}

	.calculator h3 i {
	font-size: 1.5em;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 5px rgba(74, 99, 255, 0.2));
	}

	.calculator h3::after {
	content: "";
	position: absolute;
	bottom: -1px;
	right: 0;
	width: 120px;
	height: 1px;
	background: linear-gradient(to right, rgba(74, 99, 255, 0.2), var(--primary-color));
	}

	.calculator-input {
	display: flex;
	gap: 20px;
	margin-bottom: 22px;
	align-items: flex-start;
	position: relative;
	}

	.calculator-input::after {
	content: '';
	position: absolute;
	bottom: -11px;
	left: 15%;
	right: 15%;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(74, 99, 255, 0.08), transparent);
	}

	.calculator-input:last-of-type::after {
	display: none;
	}

	.calculator-input label {
	min-width: 180px;
	font-weight: 600;
	padding-top: 13px;
	color: var(--text-secondary);
	transition: all 0.3s ease;
	}

	.calculator-input:hover label {
	color: var(--primary-color);
	transform: translateX(-3px);
	}

	.calculator-input input, .calculator-input select {
	flex: 1;
	padding: 14px 16px;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 12px;
	transition: all 0.3s ease;
	box-shadow: 0 3px 10px rgba(0,0,0,0.03);
	font-family: 'Vazirmatn', sans-serif;
	font-size: 0.95rem;
	outline: none;
	background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,1));
	}

	.calculator-input input:hover, .calculator-input select:hover {
	border-color: rgba(74, 99, 255, 0.3);
	box-shadow: 0 5px 15px rgba(74, 99, 255, 0.08);
	}

	.calculator-input input:focus, .calculator-input select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 8px 20px rgba(74, 99, 255, 0.15);
	background: white;
	transform: translateY(-2px);
	}

	.calculator-input input::placeholder {
	color: rgba(85, 96, 135, 0.5);
	transition: all 0.3s ease;
	}

	.calculator-input input:focus::placeholder {
	opacity: 0.7;
	transform: translateX(-5px);
	}

	.calculator-btn {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border: none;
	padding: 16px 30px;
	border-radius: 14px;
	cursor: pointer;
	font-weight: 700;
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: 0 10px 20px rgba(74, 99, 255, 0.25);
	font-size: 1.05rem;
	font-family: 'Vazirmatn', sans-serif;
	position: relative;
	overflow: hidden;
	margin: 15px 0;
	}

	.calculator-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0));
	transition: all 0.5s ease;
	}

	.calculator-btn:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 15px 30px rgba(74, 99, 255, 0.35);
	}

	.calculator-btn:hover::before {
	transform: translateY(100%);
	}

	.calculator-btn:active {
	transform: translateY(-2px) scale(0.98);
	box-shadow: 0 8px 15px rgba(74, 99, 255, 0.3);
	}

	.calculator-btn i {
	font-size: 1.2em;
	transition: transform 0.3s ease;
	}

	.calculator-btn:hover i {
	transform: rotate(10deg) scale(1.1);
	}

	.calculator-result {
	margin-top: 30px;
	padding: 25px;
	background: linear-gradient(120deg, var(--primary-light), rgba(5, 191, 215, 0.05));
	border-radius: 14px;
	display: none;
	animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 8px 20px rgba(74, 99, 255, 0.1);
	border: 1px solid rgba(74, 99, 255, 0.1);
	position: relative;
	overflow: hidden;
	}

	.calculator-result::before {
	content: '';
	position: absolute;
	width: 150px;
	height: 150px;
	background: radial-gradient(circle, rgba(74, 99, 255, 0.1), transparent 70%);
	top: -75px;
	right: -75px;
	border-radius: 50%;
	z-index: 0;
	}

	.calculator-result::after {
	content: '';
	position: absolute;
	width: 100px;
	height: 100px;
	background: radial-gradient(circle, rgba(5, 191, 215, 0.1), transparent 70%);
	bottom: -50px;
	left: -50px;
	border-radius: 50%;
	z-index: 0;
	}

	.calculator-result h4 {
	margin-top: 0;
	color: var(--primary-color);
	border-bottom: 1px solid rgba(74, 99, 255, 0.15);
	padding-bottom: 15px;
	font-weight: 700;
	font-size: 1.15rem;
	position: relative;
	z-index: 1;
	}

	.calculator-result h4::before {
	content: "✓";
	display: inline-block;
	margin-left: 8px;
	font-size: 1em;
	color: var(--success-color);
	background: var(--success-light);
	width: 25px;
	height: 25px;
	border-radius: 50%;
	text-align: center;
	line-height: 25px;
	}

	.result-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
	padding: 14px 0;
	border-bottom: 1px dashed rgba(74, 99, 255, 0.1);
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
	}

	.result-item:hover {
	transform: translateX(-8px);
	padding-right: 8px;
	border-right: 2px solid var(--primary-color);
	}

	.result-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	}

	.result-item span:first-child {
	color: var(--text-secondary);
	font-weight: 600;
	position: relative;
	transition: all 0.3s ease;
	}

	.result-item:hover span:first-child {
	color: var(--text-primary);
	transform: scale(1.02);
	}

	.result-item span:last-child {
	color: var(--primary-color);
	font-weight: 700;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	background: rgba(74, 99, 255, 0.08);
	padding: 3px 10px;
	border-radius: 6px;
	min-width: 100px;
	text-align: center;
	transition: all 0.3s ease;
	}

	.result-item:hover span:last-child {
	background: rgba(74, 99, 255, 0.15);
	box-shadow: 0 3px 8px rgba(74, 99, 255, 0.1);
	transform: scale(1.05);
	}

	.problem-card {
	background-color: white;
	border-radius: 16px;
	margin-bottom: 25px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.05);
	transition: all 0.3s ease;
	}

	.problem-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 30px rgba(0,0,0,0.08);
	}

	.problem-header {
	background-color: var(--danger-light);
	padding: 20px 25px;
	color: var(--danger-color);
	font-weight: 700;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	display: flex;
	align-items: center;
	gap: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	}

	.problem-header::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	height: 100%;
	background: var(--danger-color);
	}

	.problem-header i {
	transition: transform 0.3s ease;
	width: 25px;
	height: 25px;
	background: rgba(245, 66, 132, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
	}

	.problem-header.active i {
	transform: rotate(90deg);
	background: var(--danger-color);
	color: white;
	}

	.problem-content {
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	}

	.problem-content.active {
	padding: 25px;
	max-height: 1000px;
	}

	.solution {
	background-color: var(--success-light);
	padding: 20px;
	border-radius: 12px;
	margin-top: 20px;
	box-shadow: 0 5px 15px rgba(76, 175, 80, 0.08);
	position: relative;
	overflow: hidden;
	}

	.solution::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	height: 100%;
	background: var(--success-color);
	}

	.solution h5 {
	margin-top: 0;
	color: var(--success-color);
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 1.1rem;
	}

	.solution h5 i {
	color: var(--success-color);
	font-size: 1.2em;
	animation: pulse 2s infinite;
	}

	.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 25px;
	margin: 30px 0;
	}

	.grid-item {
	background-color: white;
	border-radius: 16px;
	padding: 25px;
	box-shadow: 0 8px 25px rgba(0,0,0,0.05);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.05);
	}

	.grid-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: left;
	}

	.grid-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 35px rgba(95, 108, 255, 0.12);
	}

	.grid-item:hover::before {
	transform: scaleX(1);
	}

	.grid-item-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	}

	.grid-item-icon {
	width: 45px;
	height: 45px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--primary-light), rgba(32, 188, 218, 0.2));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 15px;
	transition: all 0.3s ease;
	}

	.grid-item:hover .grid-item-icon {
	transform: scale(1.1) rotate(5deg);
	}

	.grid-item-icon i {
	font-size: 22px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.grid-item-title {
	margin: 0;
	font-size: 1.2rem;
	color: var(--primary-color);
	font-weight: 700;
	}

	.key-points {
	background: linear-gradient(135deg, #fcfeff, #f8f9ff);
	border-radius: 16px;
	padding: 25px;
	margin: 25px 0;
	box-shadow: 0 8px 25px rgba(0,0,0,0.05);
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(95, 108, 255, 0.1);
	transition: all 0.3s ease;
	}

	.key-points:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(95, 108, 255, 0.1);
	}

	.key-points::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
	z-index: 0;
	}

	.key-points h3 {
	color: var(--primary-color);
	margin-top: 0;
	padding-bottom: 15px;
	border-bottom: 1px dashed rgba(0,0,0,0.08);
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-size: 1.3rem;
	position: relative;
	z-index: 1;
	}

	.key-points h3 i {
	font-size: 1.3em;
	color: var(--primary-color);
	}

	.key-points ul {
	padding-right: 25px;
	margin-bottom: 0;
	position: relative;
	z-index: 1;
	}

	.key-points li {
	margin-bottom: 12px;
	position: relative;
	padding-right: 5px;
	transition: all 0.3s ease;
	}

	.key-points li:hover {
	transform: translateX(-5px);
	}

	.key-points li::marker {
	color: var(--primary-color);
	font-size: 1.2em;
	}

	.key-points li:last-child {
	margin-bottom: 0;
	}

	.footer {
	text-align: center;
	margin-top: 70px;
	padding: 30px;
	color: var(--text-secondary);
	font-size: 0.95rem;
	border-top: 1px solid rgba(0,0,0,0.08);
	position: relative;
	background: linear-gradient(180deg, transparent, rgba(74, 99, 255, 0.03));
	}

	.footer::before {
	content: '';
	position: absolute;
	top: -3px;
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
	height: 5px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	border-radius: 3px;
	box-shadow: 0 3px 10px rgba(74, 99, 255, 0.2);
	}

	.footer::after {
	content: "✦";
	display: block;
	font-size: 20px;
	color: var(--primary-color);
	margin-top: 15px;
	text-shadow: 0 0 10px rgba(74, 99, 255, 0.3);
	}

	.scroll-top {
	position: fixed;
	bottom: 30px;
	left: 30px;
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(74, 99, 255, 0.25);
	opacity: 0;
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 99;
	transform: scale(0.8) rotate(10deg);
	border: 1px solid rgba(255, 255, 255, 0.2);
	}

	.scroll-top.visible {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	}

	.scroll-top:hover {
	transform: translateY(-10px) scale(1.1) rotate(-5deg);
	box-shadow: 0 15px 30px rgba(74, 99, 255, 0.4);
	}

	.scroll-top i, .scroll-top svg {
	font-size: 24px;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
	transition: all 0.3s ease;
	}

	.scroll-top:hover i, .scroll-top:hover svg {
	transform: translateY(-5px);
	}

	/* جمعیت متحرک */
	.floating {
	animation: floating 3s infinite ease-in-out;
	}

	@keyframes floating {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
	}

	/* انیمیشن‌های اضافی */
	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
	}

	.pulsate {
	animation: pulse 2s infinite;
	}

	@keyframes highlight {
	0% { background-color: var(--primary-light); }
	50% { background-color: rgba(95, 108, 255, 0.2); }
	100% { background-color: var(--primary-light); }
	}

	.highlight {
	animation: highlight 2s;
	}

	@keyframes glow {
	0% { box-shadow: 0 0 10px rgba(95, 108, 255, 0.2); }
	50% { box-shadow: 0 0 20px rgba(95, 108, 255, 0.5); }
	100% { box-shadow: 0 0 10px rgba(95, 108, 255, 0.2); }
	}

	.glow {
	animation: glow 2s infinite;
	}

	/* مدیا کوئری برای پاسخگویی */
	@media (max-width: 768px) {
	.container {
	padding: 15px;
	}

	header {
	padding: 30px 20px;
	}

	header h1 {
	font-size: 2rem;
	}

	.header-icon {
	width: 70px;
	height: 70px;
	font-size: 30px;
	}

	.form-label, .form-input {
	width: 100%;
	}

	.calculator-input {
	flex-direction: column;
	}

	.calculator-input label {
	min-width: auto;
	padding-top: 0;
	margin-bottom: 10px;
	}

	.process-steps {
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	}

	.process-steps::before {
	top: 0;
	bottom: 0;
	right: 25px;
	left: auto;
	width: 4px;
	height: auto;
	}

	.process-step {
	flex-direction: row;
	width: 100%;
	margin-bottom: 0;
	align-items: center;
	}

	.step-icon {
	margin-bottom: 0;
	margin-left: 15px;
	}

	.step-label {
	text-align: right;
	}

	.card {
	padding: 25px 20px;
	}

	.infographic {
	gap: 15px;
	}

	.info-item {
	padding: 20px;
	}

	.info-icon {
	width: 60px;
	height: 60px;
	}

	.grid-container {
	gap: 15px;
	}
	}

	/* انیمیشن‌های ورودی */
	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	@keyframes fadeInDown {
	from {
	opacity: 0;
	transform: translateY(-30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	@keyframes fadeInRight {
	from {
	opacity: 0;
	transform: translateX(-30px);
	}
	to {
	opacity: 1;
	transform: translateX(0);
	}
	}

	@keyframes fadeInLeft {
	from {
	opacity: 0;
	transform: translateX(30px);
	}
	to {
	opacity: 1;
	transform: translateX(0);
	}
	}

	@keyframes zoomIn {
	from {
	opacity: 0;
	transform: scale(0.8);
	}
	to {
	opacity: 1;
	transform: scale(1);
	}
	}

	.fadeInUp {
	animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.fadeInDown {
	animation: fadeInDown 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.fadeInRight {
	animation: fadeInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.fadeInLeft {
	animation: fadeInLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.zoomIn {
	animation: zoomIn 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.delay-1 { animation-delay: 0.1s; }
	.delay-2 { animation-delay: 0.2s; }
	.delay-3 { animation-delay: 0.3s; }
	.delay-4 { animation-delay: 0.4s; }
	.delay-5 { animation-delay: 0.5s; }
	.delay-6 { animation-delay: 0.6s; }
	.delay-7 { animation-delay: 0.7s; }
	.delay-8 { animation-delay: 0.8s; }

	/* زمان بندی انیمیشن */
	.animated {
	animation-duration: 0.8s;
	animation-fill-mode: both;
	}

	/* افکت ریپل برای دکمه‌ها */
	.ripple-effect {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	transform: scale(0);
	animation: ripple 0.6s linear;
	pointer-events: none;
	}

	@keyframes ripple {
	to {
	transform: scale(4);
	opacity: 0;
	}
	}

	.calculator-input.focused label {
	color: var(--primary-color);
	transform: translateX(-8px) scale(1.05);
	}

	.calculator-input.focused input,
	.calculator-input.focused select {
	border-color: var(--primary-color);
	box-shadow: 0 8px 20px rgba(74, 99, 255, 0.15);
	background: white;
	transform: translateY(-3px);
	}
	</style>
	</head>
	<body>
	<div class="loading-screen" id="loadingScreen">
	<div class="loading-spinner"></div>
	<div class="loading-text">در حال بارگذاری راهنمای تعاملی...</div>
	</div>

	<div class="container">
	<header>
	<div class="header-icon floating">
	<svg width="65" height="65" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M19 3H14.82C14.4 1.84 13.3 1 12 1C10.7 1 9.6 1.84 9.18 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM12 3C12.55 3 13 3.45 13 4C13 4.55 12.55 5 12 5C11.45 5 11 4.55 11 4C11 3.45 11.45 3 12 3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="white"/>
	</svg>
	</div>
	<h1>راهنمای تعاملی کارت معین مطالبات</h1>
	<p>این راهنما به شما کمک می‌کند تا با مراحل تشکیل کارت معین، مشکلات رایج و راه‌حل‌های آن آشنا شوید</p>
	</header>

	<div class="main-nav" id="mainNav">
	<div class="nav-item active" onclick="showSection('intro')">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" fill="currentColor"/>
	</svg>
	معرفی
	</div>
	<div class="nav-item" onclick="showSection('steps')">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM16 18H8V16H16V18ZM16 14H8V12H16V14ZM13 9V3.5L18.5 9H13Z" fill="currentColor"/>
	</svg>
	مراحل اجرایی
	</div>
	<div class="nav-item" onclick="showSection('problems')">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z" fill="currentColor"/>
	</svg>
	مشکلات و راهکارها
	</div>
	<div class="nav-item" onclick="showSection('calculations')">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM13 7H11V9H9V11H11V13H13V11H15V9H13V7ZM16 15H8V17H16V15Z" fill="currentColor"/>
	</svg>
	محاسبات
	</div>
	<div class="nav-item" onclick="showSection('tips')">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z" fill="currentColor"/>
	</svg>
	نکات کلیدی
	</div>
	</div>

	<!-- معرفی -->
	<section id="intro" class="content-section active">
	<div class="card fadeInUp">
	<h2 class="card-title">
	<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" fill="url(#paint0_linear)"/>
	<defs>
	<linearGradient id="paint0_linear" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
	<stop stop-color="#5F6CFF"/>
	<stop offset="1" stop-color="#20BCDA"/>
	</linearGradient>
	</defs>
	</svg>
	معرفی کارت معین مطالبات
	</h2>

	<div class="alert-box alert-info animated fadeInUp delay-1">
	کارت معین مطالبات، ابزاری برای پیگیری دقیق و مدیریت مطالبات بانکی پس از دین حال شدن است.
	</div>

	<div class="infographic animated fadeInUp delay-2">
	<div class="info-item">
	<div class="info-icon">
	<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M19 3H14.82C14.4 1.84 13.3 1 12 1C10.7 1 9.6 1.84 9.18 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM12 3C12.55 3 13 3.45 13 4C13 4.55 12.55 5 12 5C11.45 5 11 4.55 11 4C11 3.45 11.45 3 12 3ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z" fill="url(#icon_gradient)"/>
	<defs>
	<linearGradient id="icon_gradient" x1="3" y1="1" x2="21" y2="21" gradientUnits="userSpaceOnUse">
	<stop stop-color="#5F6CFF"/>
	<stop offset="1" stop-color="#20BCDA"/>
	</linearGradient>
	</defs>
	</svg>
	</div>
	<div class="info-title">ثبت دقیق</div>
	<p>پیگیری دقیق وضعیت مطالبات به تفکیک وثایق</p>
	</div>

	<div class="info-item">
	<div class="info-icon">
	<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM13.03 7.06L14.09 6L15.5 7.41L16.91 6L18 7.09L16.56 8.5L18 9.91L16.91 11L15.5 9.56L14.09 11L13 9.91L14.44 8.5L13.03 7.06ZM6.25 7.72H10.75V9.22H6.25V7.72ZM11.5 16H9.5V18H8V16H6V14.5H8V12.5H9.5V14.5H11.5V16ZM15.59 17L14.5 15.91L13.09 17.32L11.68 15.91L13.09 14.5L11.68 13.09L13.09 11.68L14.5 13.09L15.91 11.68L17.32 13.09L15.91 14.5L17.32 15.91L15.59 17Z" fill="url(#icon_gradient2)"/>
	<defs>
	<linearGradient id="icon_gradient2" x1="3" y1="3" x2="21" y2="21" gradientUnits="userSpaceOnUse">
	<stop stop-color="#5F6CFF"/>
	<stop offset="1" stop-color="#20BCDA"/>
	</linearGradient>
	</defs>
	</svg>
	</div>
	<div class="info-title">محاسبه خودکار</div>
	<p>محاسبه دقیق بدهی‌ها، سود و وجه التزام</p>
	</div>

	<div class="info-item">
	<div class="info-icon">
	<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12.88 17.76V19H11.12V17.73C10.14 17.56 9.25 17.12 8.56 16.5L9.71 15.29C10.24 15.82 10.92 16.2 11.67 16.33L11.75 16.34C12.69 16.53 13.46 16.33 13.76 16.05C14.2 15.63 14.19 14.87 13.75 14.38C13.4 14 12.81 13.77 12.22 13.53C11.93 13.42 11.64 13.3 11.39 13.17C10.36 12.61 9.75 11.88 9.75 10.5C9.75 9.69 10.06 8.95 10.6 8.4C10.97 8.04 11.44 7.76 12 7.61V6H13.76V7.65C14.6 7.9 15.25 8.39 15.71 8.85L14.5 10.04C14.13 9.67 13.63 9.35 13 9.2C12.06 8.97 11.38 9.07 11.06 9.37C10.64 9.78 10.7 10.38 10.97 10.71C11.17 10.94 11.54 11.15 12.12 11.37C12.54 11.52 13.04 11.69 13.53 11.92C14.91 12.59 15.69 13.83 15.69 15.33C15.69 16.21 15.33 17.04 14.69 17.64C14.22 18.09 13.59 18.47 12.88 18.71V17.76H12.88Z" fill="url(#icon_gradient3)"/>
	<defs>
	<linearGradient id="icon_gradient3" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
	<stop stop-color="#5F6CFF"/>
	<stop offset="1" stop-color="#20BCDA"/>
	</linearGradient>
	</defs>
	</svg>
	</div>
	<div class="info-title">مدیریت وصولی‌ها</div>
	<p>ثبت و مدیریت وصولی‌ها با رعایت اولویت‌های قانونی</p>
	</div>
	</div>

	<h3 style="color: var(--primary-color); margin-top: 40px; font-weight: 700; display: flex; align-items: center; gap: 10px;" class="animated fadeInUp delay-3">
	<svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M3.5 18.49L9.5 12.48L13.5 16.48L22 6.92L20.59 5.51L13.5 13.48L9.5 9.48L2 16.99L3.5 18.49Z" fill="url(#chart_gradient)"/>
	<defs>
	<linearGradient id="chart_gradient" x1="2" y1="5.51" x2="22" y2="18.49" gradientUnits="userSpaceOnUse">
	<stop stop-color="#5F6CFF"/>
	<stop offset="1" stop-color="#20BCDA"/>
	</linearGradient>
	</defs>
	</svg>
	چرخه حیات کارت معین مطالبات
	</h3>

	<div class="process-steps animated fadeInUp delay-4">
	<div class="process-step completed">
	<div class="step-icon">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M20.12 14.46L18 16.59L14.41 13L16.54 10.88L14 8.34L1.88 20.46L4.42 23L16.54 10.88L20.12 14.46ZM5.17 17.79L4.45 17.07L12.17 9.35C12.17 9.35 13 9.8 13.41 10.2C13.82 10.61 14.3 11.5 14.3 11.5L5.17 17.79Z" fill="white"/>
	</svg>
	</div>
	<div class="step-label">دین حال</div>
	</div>

	<div class="process-step completed">
	<div class="step-icon">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM16 16H8V14H16V16ZM16 12H8V10H16V12ZM13 9V3.5L18.5 9H13Z" fill="white"/>
	</svg>
	</div>
	<div class="step-label">ایجاد کارت</div>
	</div>

	<div class="process-step active">
	<div class="step-icon">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1ZM12 11.99H19C18.47 16.11 15.72 19.78 12 20.93V12H5V6.3L12 3.19V11.99Z" fill="white"/>
	</svg>
	</div>
	<div class="step-label">ثبت وثایق</div>
	</div>

	<div class="process-step">
	<div class="step-icon">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M19.83 7.5L17.56 5.23C17.36 5.03 17.09 4.92 16.81 4.92C16.5 4.92 16.24 5.03 16.04 5.23L8.29 12.99C8.11 13.17 8.02 13.4 8.02 13.64V15.99C8.02 16.54 8.47 16.99 9.02 16.99H11.37C11.61 16.99 11.84 16.9 12.01 16.72L19.77 8.97C20.16 8.58 20.16 7.9 19.83 7.5ZM10.72 14.99H10.02V14.29L15.91 8.4L16.61 9.1L10.72 14.99ZM5 5.99H8.02V7.99H5V19.99H17V16.97H19V19.99C19 21.09 18.1 21.99 17 21.99H5C3.9 21.99 3 21.09 3 19.99V7.99C3 6.89 3.9 5.99 5 5.99Z" fill="#e0e0e0"/>
	</svg>
	</div>
	<div class="step-label">ثبت وصولی</div>
	</div>

	<div class="process-step">
	<div class="step-icon">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" fill="#e0e0e0"/>
	</svg>
	</div>
	<div class="step-label">تسویه</div>
	</div>
	</div>

	<div class="alert-box alert-danger pulsate animated fadeInUp delay-5">
	<strong>توجه مهم:</strong> برای هر وثیقه باید یک کارت معین مجزا ایجاد شود. ادغام چند وثیقه در یک کارت معین ممنوع است.
	</div>

	<div class="key-points animated fadeInUp delay-5">
	<h3><i class="fas fa-check-circle"></i> مزایای استفاده از کارت معین</h3>
	<ul>
	<li>پیگیری دقیق وضعیت هر وثیقه به صورت مجزا</li>
	<li>ردیابی مانده بدهی به تفکیک اصل، سود و وجه التزام</li>
	<li>تخصیص صحیح وصولی‌ها با رعایت اولویت‌های قانونی</li>
	<li>مدیریت هزینه‌های قانونی پرونده</li>
	<li>تهیه گزارش‌های مدیریتی و عملیاتی دقیق</li>
	</ul>
	</div>
	</div>
	</section>

	<!-- مراحل اجرایی -->
	<section id="steps" class="content-section">
	<div class="card">
	<h2 class="card-title"><i class="fas fa-tasks"></i> مراحل تشکیل و مدیریت کارت معین</h2>

	<div class="tab-container">
	<div class="tab-navigation">
	<div class="tab active" onclick="changeTab('tab1', this)">
	<i class="fas fa-folder-plus"></i>
	ایجاد پرونده
	</div>
	<div class="tab" onclick="changeTab('tab2', this)">
	<i class="fas fa-cogs"></i>
	مدیریت کارت
	</div>
	<div class="tab" onclick="changeTab('tab3', this)">
	<i class="fas fa-money-check-alt"></i>
	عملیات مالی
	</div>
	<div class="tab" onclick="changeTab('tab4', this)">
	<i class="fas fa-sync-alt"></i>
	محاسبه بدهی
	</div>
	<div class="tab" onclick="changeTab('tab5', this)">
	<i class="fas fa-chart-line"></i>
	گزارش‌گیری
	</div>
	</div>

	<div id="tab1" class="tab-content active">
	<div class="step-container" data-step="۱">
	<h3 class="step-title">ایجاد پرونده کارت معین</h3>
	<div class="step-content">
	<div class="path-highlight">
	<i class="fas fa-map-marker-alt"></i>
	تسهیلات > کارت معین > ایجاد پرونده کارت معین
	</div>

	<ul class="instruction-list">
	<li>وارد کردن شماره تسهیلات یا تعهدات</li>
	<li>کنترل نرخ وجه التزام و مخرج کسر (360 یا 365)</li>
	<li>تنظیم تاریخ دین حال (پیش‌فرض تاریخ جاری سیستم)</li>
	<li>بررسی صحت اطلاعات و تأیید نهایی</li>
	</ul>

	<div class="alert-box alert-info">
	اگر اطلاعات پرونده در سامانه لوتوس موجود باشد، با وارد کردن شماره تسهیلات، اطلاعات به صورت خودکار واکشی می‌شود.
	</div>

	<div class="form-mockup">
	<h4 class="form-mockup-title"><i class="fas fa-edit"></i> فرم ایجاد پرونده کارت معین</h4>
	<div class="form-group">
	<div class="form-label">شماره تسهیلات:</div>
	<div class="form-input">1234567890</div>
	</div>
	<div class="form-group">
	<div class="form-label">تاریخ دین حال:</div>
	<div class="form-input">۱۴۰۱/۰۸/۱۸</div>
	</div>
	<div class="form-group">
	<div class="form-label">نرخ وجه التزام:</div>
	<div class="form-input">۲۴ درصد</div>
	</div>
	<div class="form-group">
	<div class="form-label">مخرج کسر:</div>
	<div class="form-input">۳۶۵</div>
	</div>
	</div>
	</div>
	</div>

	<div class="alert-box alert-warning">
	<strong>توجه:</strong> تاریخ آخرین محاسبه، غیر قابل تغییر است و پس از تأیید نهایی، تاریخ روز جاری به عنوان تاریخ آخرین محاسبه ثبت می‌شود.
	</div>
	</div>

	<div id="tab2" class="tab-content">
	<div class="step-container" data-step="۲">
	<h3 class="step-title">مدیریت کارت معین</h3>
	<div class="step-content">
	<div class="path-highlight">
	<i class="fas fa-map-marker-alt"></i>
	تسهیلات > کارت معین > مدیریت کارت معین
	</div>

	<ul class="instruction-list">
	<li>جستجوی پرونده با شماره یا فیلترهای جستجو</li>
	<li>استفاده از دکمه «اضافه» برای ثبت وثایق</li>
	<li>تخصیص سهم هر وثیقه از مانده بدهی (اصل، سود، وجه التزام)</li>
	<li>کنترل الگوی وصولی نمایشی سیستم</li>
	</ul>

	<div class="flowchart">
	<div class="flowchart-box">جستجوی پرونده کارت معین</div>
	<div class="flowchart-arrow"><i class="fas fa-chevron-down"></i></div>
	<div class="flowchart-box">انتخاب دکمه «اضافه» برای ثبت وثایق</div>
	<div class="flowchart-arrow"><i class="fas fa-chevron-down"></i></div>
	<div class="flowchart-box">ثبت اطلاعات کامل هر وثیقه</div>
	<div class="flowchart-arrow"><i class="fas fa-chevron-down"></i></div>
	<div class="flowchart-box">تخصیص سهم و کنترل الگوی وصولی</div>
	</div>

	<div class="alert-box alert-danger">
	<strong>هشدار:</strong> برای هر وثیقه باید یک کارت معین مجزا ایجاد شود. ادغام چند وثیقه در یک کارت معین ممنوع می‌باشد.
	</div>
	</div>
	</div>
	</div>

	<div id="tab3" class="tab-content">
	<div class="step-container" data-step="۳">
	<h3 class="step-title">عملیات مالی کارت معین</h3>
	<div class="step-content">
	<div class="path-highlight">
	<i class="fas fa-map-marker-alt"></i>
	تسهیلات > کارت معین > مدیریت کارت معین > عملیات مالی
	</div>

	<div class="grid-container">
	<div class="grid-item">
	<div class="grid-item-header">
	<div class="grid-item-icon">
	<i class="fas fa-file-invoice-dollar"></i>
	</div>
	<h4 class="grid-item-title">۱. ثبت هزینه</h4>
	</div>
	<ul class="instruction-list">
	<li>برای ثبت هزینه‌های قانونی پرونده</li>
	<li>وارد کردن مبلغ هزینه و شرح آن الزامی است</li>
	<li>امکان انتخاب نوع هزینه از لیست هزینه‌های قانونی</li>
	</ul>
	</div>

	<div class="grid-item">
	<div class="grid-item-header">
	<div class="grid-item-icon">
	<i class="fas fa-hand-holding-usd"></i>
	</div>
	<h4 class="grid-item-title">۲. وصول</h4>
	</div>
	<ul class="instruction-list">
	<li>برای ثبت مبلغ وصولی بابت تسویه مطالبات</li>
	<li>ثبت شماره سند مربوط به وصولی</li>
	<li>تنظیم تاریخ وصول (تاریخ واقعی دریافت وجه)</li>
	</ul>
	</div>

	<div class="grid-item">
	<div class="grid-item-header">
	<div class="grid-item-icon">
	<i class="fas fa-edit"></i>
	</div>
	<h4 class="grid-item-title">۳. اصلاح</h4>
	</div>
	<ul class="instruction-list">
	<li>اصلاح وصولی‌های ثبت شده</li>
	<li>ثبت وصول و هزینه به تاریخ مؤثر</li>
	<li>تاریخ مؤثر باید توسط کاربر وارد شود</li>
	</ul>
	</div>
	</div>

	<div class="alert-box alert-warning">
	<strong>نکته مهم:</strong> ثبت وصولی در همان روز دریافت وجه ضروری است و تأخیر در ثبت موجب ایجاد مغایرت در محاسبات می‌شود.
	</div>
	</div>
	</div>
	</div>

	<div id="tab4" class="tab-content">
	<div class="step-container" data-step="۴">
	<h3 class="step-title">محاسبه بدهی کارت معین</h3>
	<div class="step-content">
	<div class="path-highlight">
	<i class="fas fa-map-marker-alt"></i>
	تسهیلات > کارت معین > محاسبه بدهی کارت معین
	</div>

	<ul class="instruction-list">
	<li>وارد کردن شماره پرونده کارت معین</li>
	<li>ثبت تاریخ روز جاری برای محاسبه</li>
	<li>به‌روزرسانی مقادیر بدهی پرونده کارت معین</li>
	</ul>

	<div class="form-mockup">
	<h4 class="form-mockup-title"><i class="fas fa-calculator"></i> فرم محاسبه بدهی</h4>
	<div class="form-group">
	<div class="form-label">شماره کارت معین:</div>
	<div class="form-input">۱۴۳۲۲</div>
	</div>
	<div class="form-group">
	<div class="form-label">تاریخ محاسبه:</div>
	<div class="form-input">۱۴۰۱/۰۸/۱۸</div>
	</div>
	</div>

	<div class="alert-box alert-info">
	چنانچه کاربر با پیغام خطای "محاسبات پرونده به روز نمی باشد" مواجه شود، باید با استفاده از این گزینه، مانده‌های پرونده را به‌روزرسانی نماید.
	</div>

	<div class="alert-box alert-warning">
	<strong>هشدار:</strong> محاسبه بدهی کارت معین حداقل هر سه ماه یکبار برای به‌روزرسانی مانده بدهی الزامی است.
	</div>
	</div>
	</div>
	</div>

	<div id="tab5" class="tab-content">
	<div class="step-container" data-step="۵">
	<h3 class="step-title">گزارش‌گیری</h3>
	<div class="step-content">
	<div class="path-highlight">
	<i class="fas fa-map-marker-alt"></i>
	تسهیلات > مدیریت گزارش‌ها > گزارش‌های تسهیلات
	</div>

	<div class="infographic">
	<div class="info-item">
	<div class="info-icon">
	<i class="fas fa-file-alt"></i>
	</div>
	<div class="info-title">گزارش وضعیت</div>
	<p>نمایش وضعیت کلی پرونده و مانده‌های بدهی</p>
	</div>

	<div class="info-item">
	<div class="info-icon">
	<i class="fas fa-money-check-alt"></i>
	</div>
	<div class="info-title">گزارش وصولی‌ها</div>
	<p>نمایش وصولی‌های ثبت شده برای پرونده</p>
	</div>

	<div class="info-item">
	<div class="info-icon">
	<i class="fas fa-file-invoice-dollar"></i>
	</div>
	<div class="info-title">گزارش هزینه‌ها</div>
	<p>نمایش هزینه‌های ثبت شده برای پرونده</p>
	</div>
	</div>

	<ul class="instruction-list">
	<li>امکان فیلتر کردن گزارش‌ها بر اساس نوع ارز، وضعیت پرونده، نوع عقد، مخرج کسر و...</li>
	<li>امکان خروجی گرفتن به فرمت‌های PDF، Excel و چاپ مستقیم</li>
	<li>امکان مشاهده گزارش‌ها به تفکیک شعبه</li>
	</ul>

	<div class="alert-box alert-success">
	<strong>نکته مفید:</strong> قبل از گزارش‌گیری، حتماً محاسبه بدهی برای به‌روزرسانی مانده‌ها انجام شود تا گزارش‌های دقیق‌تری دریافت کنید.
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="card">
	<h2 class="card-title"><i class="fas fa-check-circle"></i> فرآیند تسویه پرونده‌های دین حال شده</h2>

	<div class="flowchart">
	<div class="flowchart-box">۱. ایجاد مسدودی برداشت روی سپرده مرتبط</div>
	<div class="flowchart-arrow"><i class="fas fa-chevron-down"></i></div>
	<div class="flowchart-box">۲. دریافت وجه به میزان مانده کارت معین</div>
	<div class="flowchart-arrow"><i class="fas fa-chevron-down"></i></div>
	<div class="flowchart-box">۳. اخذ گزارش سیستمی تسویه پرونده</div>
	<div class="flowchart-arrow"><i class="fas fa-chevron-down"></i></div>
	<div class="flowchart-box">۴. مقایسه مانده بدهی لوتوس با مانده کارت معین</div>
	<div class="flowchart-arrow"><i class="fas fa-chevron-down"></i></div>
	<div class="flowchart-box">۵. رفع مسدودی و وصول وجه و تسویه کارت</div>
	<div class="flowchart-arrow"><i class="fas fa-chevron-down"></i></div>
	<div class="flowchart-box">۶. صدور اسناد رفع مغایرت (در صورت وجود)</div>
	</div>

	<div class="alert-box alert-info">
	<strong>توجه:</strong> در خصوص پرونده‌های فاقد کارت معین، بدهی واقعی پرونده مطابق با مانده سامانه لوتوس می‌باشد.
	</div>
	</div>
	</section>

	<!-- مشکلات و راهکارها -->
	<section id="problems" class="content-section">
	<div class="card">
	<h2 class="card-title"><i class="fas fa-exclamation-triangle"></i> مشکلات رایج و راهکارها</h2>

	<p>در این بخش، متداول‌ترین مشکلات در فرآیند کارت معین مطالبات و راه‌حل آنها ارائه شده است:</p>

	<div class="problem-card">
	<div class="problem-header" onclick="toggleProblem(this)">
	<i class="fas fa-chevron-right"></i>
	۱. ادغام چند وثیقه در یک کارت معین
	</div>
	<div class="problem-content">
	<p>یکی از اشتباهات رایج، ایجاد تنها یک کارت معین برای پرونده‌های دارای چند وثیقه است.</p>

	<div class="solution">
	<h5><i class="fas fa-check-circle"></i> راه حل:</h5>
	<p>برای هر وثیقه باید یک کارت معین مجزا ایجاد گردد. جمع کل مبلغ مانده بدهی کارت‌های مربوط به پرونده باید برابر با مبلغ واقعی بدهی پرونده باشد.</p>
	<p><strong>روش اصلاح:</strong> باید پرونده کارت معین ایجاد شده را ابطال کرده و مجدداً برای هر وثیقه به صورت جداگانه کارت ایجاد نمود.</p>
	</div>
	</div>
	</div>

	<div class="problem-card">
	<div class="problem-header" onclick="toggleProblem(this)">
	<i class="fas fa-chevron-right"></i>
	۲. عدم ثبت به‌موقع وصولی‌ها در کارت معین
	</div>
	<div class="problem-content">
	<p>پس از وصول وجه در سامانه لوتوس، اطلاعات در کارت معین ثبت نمی‌شود یا با تأخیر ثبت می‌گردد.</p>

	<div class="solution">
	<h5><i class="fas fa-check-circle"></i> راه حل:</h5>
	<p>بلافاصله پس از وصول هرگونه مبلغ در سامانه لوتوس، می‌بایست همان مبلغ در سامانه کارت معین نیز ثبت گردد.</p>
	<p><strong>روش اصلاح:</strong> از منوی «مدیریت کارت معین > عملیات مالی > وصول» استفاده کرده و با ثبت تاریخ مؤثر، وصولی را به تاریخ واقعی ثبت نمایید.</p>
	</div>
	</div>
	</div>

	<div class="problem-card">
	<div class="problem-header" onclick="toggleProblem(this)">
	<i class="fas fa-chevron-right"></i>
	۳. اشتباه در تنظیم الگوی وصولی
	</div>
	<div class="problem-content">
	<p>الگوی وصولی نمایشی سیستم کنترل و اصلاح نمی‌شود، در نتیجه تخصیص وصولی‌ها به اقلام بدهی با خطا مواجه می‌شود.</p>

	<div class="solution">
	<h5><i class="fas fa-check-circle"></i> راه حل:</h5>
	<p>هنگام تعریف کارت معین جدید با انتخاب کلید اضافه، کنترل الگوی وصولی نمایشی سیستم و اصلاح آن ضروری است.</p>
	<p><strong>روش اصلاح:</strong> اگر پرونده هنوز در وضعیت «ثبت شده» است، می‌توان از منوی «ویرایش پرونده» این مورد را اصلاح نمود. در غیر این صورت، باید کارت را ابطال و مجدداً تشکیل داد.</p>
	</div>
	</div>
	</div>

	<div class="problem-card">
	<div class="problem-header" onclick="toggleProblem(this)">
	<i class="fas fa-chevron-right"></i>
	۴. مغایرت بین مانده لوتوس و مانده کارت معین
	</div>
	<div class="problem-content">
	<p>در زمان تسویه، بین مانده لوتوس و مانده کارت معین مغایرت وجود دارد که باعث اشکال در روند تسویه می‌شود.</p>

	<div class="solution">
	<h5><i class="fas fa-check-circle"></i> راه حل:</h5>
	<p>در زمان تسویه باید مانده بدهی لوتوس با مانده کارت معین مقایسه شده و اسناد اصلاحی مناسب صادر گردد.</p>
	<p><strong>روش اصلاح:</strong></p>
	<ul>
	<li><strong>مانده کارت معین کمتر از مانده لوتوس:</strong> برداشت مابه‌التفاوت از حساب واسط «بدهکاران داخلی امور شعب» با صدور سند مشخص در سامانه لوتوس.</li>
	<li><strong>مانده کارت معین بیشتر از مانده لوتوس:</strong> واریز مازاد موجودی سپرده به حساب واسط «بستانکاران داخلی امور شعب» در سامانه لوتوس.</li>
	</ul>
	</div>
	</div>
	</div>

	<div class="problem-card">
	<div class="problem-header" onclick="toggleProblem(this)">
	<i class="fas fa-chevron-right"></i>
	۵. عدم به‌روزرسانی منظم کارت معین
	</div>
	<div class="problem-content">
	<p>محاسبه بدهی کارت معین به صورت منظم انجام نمی‌شود، در نتیجه اطلاعات کارت معین با واقعیت مغایرت پیدا می‌کند.</p>

	<div class="solution">
	<h5><i class="fas fa-check-circle"></i> راه حل:</h5>
	<p>محاسبه بدهی کارت معین حداقل هر سه ماه یکبار برای به‌روزرسانی مانده بدهی الزامی است.</p>
	<p><strong>روش اصلاح:</strong> از منوی «محاسبه بدهی کارت معین» با وارد کردن شماره پرونده و تاریخ روز جاری، مانده‌های پرونده را به‌روزرسانی نمایید.</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- محاسبات -->
	<section id="calculations" class="content-section">
	<div class="card">
	<h2 class="card-title"><i class="fas fa-calculator"></i> محاسبات کارت معین</h2>

	<div class="alert-box alert-info">
	در این بخش، ابزارهای محاسباتی مرتبط با کارت معین برای تسهیل در انجام محاسبات ارائه شده است.
	</div>

	<div class="calculator">
	<h3><i class="fas fa-percentage"></i> محاسبه‌گر تسهیم بالنسبه وجوه وصولی</h3>
	<p>با وارد کردن مقادیر زیر، میزان تسهیم بالنسبه وجه وصولی را محاسبه کنید:</p>

	<div class="calculator-input">
	<label for="principal">مانده اصل (ریال):</label>
	<input type="number" id="principal" min="0" placeholder="مبلغ اصل را وارد کنید">
	</div>

	<div class="calculator-input">
	<label for="profit">مانده سود (ریال):</label>
	<input type="number" id="profit" min="0" placeholder="مبلغ سود را وارد کنید">
	</div>

	<div class="calculator-input">
	<label for="penalty">مانده وجه التزام (ریال):</label>
	<input type="number" id="penalty" min="0" placeholder="مبلغ وجه التزام را وارد کنید">
	</div>

	<div class="calculator-input">
	<label for="payment">مبلغ وصولی (ریال):</label>
	<input type="number" id="payment" min="0" placeholder="مبلغ وصولی را وارد کنید">
	</div>

	<button class="calculator-btn" onclick="calculateAllocation()">
	<i class="fas fa-calculator"></i> محاسبه تسهیم
	</button>

	<div id="allocation-result" class="calculator-result">
	<h4>نتیجه محاسبات تسهیم بالنسبه:</h4>
	<div class="result-item">
	<span>سهم اصل:</span>
	<span id="principal-share">0</span> ریال
	</div>
	<div class="result-item">
	<span>سهم سود:</span>
	<span id="profit-share">0</span> ریال
	</div>
	<div class="result-item">
	<span>سهم وجه التزام:</span>
	<span id="penalty-share">0</span> ریال
	</div>
	<hr>
	<div class="result-item">
	<span>مانده باقیمانده اصل:</span>
	<span id="principal-remainder">0</span> ریال
	</div>
	<div class="result-item">
	<span>مانده باقیمانده سود:</span>
	<span id="profit-remainder">0</span> ریال
	</div>
	<div class="result-item">
	<span>مانده باقیمانده وجه التزام:</span>
	<span id="penalty-remainder">0</span> ریال
	</div>
	</div>
	</div>

	<div class="calculator">
	<h3><i class="fas fa-balance-scale"></i> محاسبه‌گر مغایرت مانده‌ها</h3>
	<p>با وارد کردن مانده‌های کارت معین و لوتوس، میزان مغایرت را محاسبه کنید:</p>

	<div class="calculator-input">
	<label for="card-balance">مانده کارت معین (ریال):</label>
	<input type="number" id="card-balance" min="0" placeholder="مانده کارت معین را وارد کنید">
	</div>

	<div class="calculator-input">
	<label for="lotus-balance">مانده لوتوس (ریال):</label>
	<input type="number" id="lotus-balance" min="0" placeholder="مانده لوتوس را وارد کنید">
	</div>

	<button class="calculator-btn" onclick="calculateDifference()">
	<i class="fas fa-calculator"></i> محاسبه مغایرت
	</button>

	<div id="difference-result" class="calculator-result">
	<h4>نتیجه محاسبه مغایرت:</h4>
	<div class="result-item">
	<span>میزان مغایرت:</span>
	<span id="difference-amount">0</span> ریال
	</div>
	<div class="result-item">
	<span>نوع مغایرت:</span>
	<span id="difference-type">-</span>
	</div>
	<div class="result-item">
	<span>اقدام لازم:</span>
	<span id="required-action">-</span>
	</div>
	</div>
	</div>

	<div class="calculator">
	<h3><i class="fas fa-share-alt"></i> محاسبه‌گر سهم هر وثیقه</h3>
	<p>با وارد کردن اطلاعات زیر، سهم هر وثیقه از مانده بدهی را محاسبه کنید:</p>

	<div class="calculator-input">
	<label for="debt-total">کل مانده بدهی (ریال):</label>
	<input type="number" id="debt-total" min="0" placeholder="کل مانده بدهی را وارد کنید">
	</div>

	<div class="calculator-input">
	<label for="collateral1-value">ارزش وثیقه اول (ریال):</label>
	<input type="number" id="collateral1-value" min="0" placeholder="ارزش وثیقه اول را وارد کنید">
	</div>

	<div class="calculator-input">
	<label for="collateral2-value">ارزش وثیقه دوم (ریال):</label>
	<input type="number" id="collateral2-value" min="0" placeholder="ارزش وثیقه دوم را وارد کنید">
	</div>

	<button class="calculator-btn" onclick="calculateCollateralShare()">
	<i class="fas fa-calculator"></i> محاسبه سهم وثایق
	</button>

	<div id="collateral-result" class="calculator-result">
	<h4>نتیجه محاسبه سهم وثایق:</h4>
	<div class="result-item">
	<span>سهم وثیقه اول:</span>
	<span id="collateral1-share">0</span> ریال
	</div>
	<div class="result-item">
	<span>سهم وثیقه دوم:</span>
	<span id="collateral2-share">0</span> ریال
	</div>
	<div class="result-item">
	<span>درصد سهم وثیقه اول:</span>
	<span id="collateral1-percentage">0</span>%
	</div>
	<div class="result-item">
	<span>درصد سهم وثیقه دوم:</span>
	<span id="collateral2-percentage">0</span>%
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- نکات کلیدی -->
	<section id="tips" class="content-section">
	<div class="card">
	<h2 class="card-title"><i class="fas fa-lightbulb"></i> نکات کلیدی و راهکارهای پیشگیری</h2>

	<div class="key-points">
	<h3><i class="fas fa-star"></i> نکات مهم کارت معین</h3>
	<ul>
	<li>برای هر وثیقه، یک کارت معین مجزا ایجاد کنید.</li>
	<li>کد شعبه عامل باید با کد شعبه اعطا/ایجاد کننده پرونده اعتباری یکسان باشد.</li>
	<li>فیلدهای نرخ وجه التزام و مخرج کسر (360 یا 365) را کنترل کنید.</li>
	<li>هنگام تعریف کارت معین جدید، الگوی وصولی نمایشی سیستم را کنترل و اصلاح نمایید.</li>
	<li>جمع کل مبلغ مانده بدهی کارت‌های مربوط به پرونده باید برابر با مبلغ واقعی بدهی پرونده باشد.</li>
	<li>تاریخ دین حال و تاریخ وصول/ثبت هزینه باید منطبق بر واقعیت باشد.</li>
	<li>محاسبه بدهی کارت معین حداقل هر سه ماه یکبار الزامی است.</li>
	</ul>
	</div>

	<div class="key-points">
	<h3><i class="fas fa-shield-alt"></i> راهکارهای پیشگیری از مشکلات</h3>
	<ul>
	<li>دقت در ورود اطلاعات اولیه پرونده (نرخ وجه التزام، مخرج کسر، تاریخ دین حال)</li>
	<li>ایجاد کارت معین مجزا برای هر وثیقه</li>
	<li>بررسی و اصلاح الگوی وصولی پیش از تأیید نهایی</li>
	<li>ثبت به‌موقع و دقیق وصولی‌ها و هزینه‌ها</li>
	<li>به‌روزرسانی منظم محاسبات کارت معین (حداقل هر سه ماه یکبار)</li>
	<li>کنترل مغایرت‌ها در زمان تسویه و صدور اسناد اصلاحی</li>
	<li>مراجعه به دستورالعمل‌ها و بخشنامه‌ها قبل از انجام عملیات خاص</li>
	</ul>
	</div>

	<div class="infographic">
	<div class="info-item">
	<div class="info-icon">
	<i class="fas fa-check-double"></i>
	</div>
	<div class="info-title">کنترل دوره‌ای</div>
	<p>بررسی منظم وضعیت کارت‌های معین و محاسبه به‌روز بدهی</p>
	</div>

	<div class="info-item">
	<div class="info-icon">
	<i class="fas fa-clock"></i>
	</div>
	<div class="info-title">ثبت به‌موقع</div>
	<p>ثبت فوری وصولی‌ها و هزینه‌ها پس از وقوع در سامانه کارت معین</p>
	</div>

	<div class="info-item">
	<div class="info-icon">
	<i class="fas fa-file-alt"></i>
	</div>
	<div class="info-title">مستندسازی</div>
	<p>نگهداری سوابق عملیات انجام شده روی کارت معین</p>
	</div>
	</div>

	<div class="alert-box alert-success">
	<strong>نکته مهم:</strong> پیروی از اصول و ضوابط تشکیل کارت معین مطالبات، موجب تسهیل در وصول مطالبات، کاهش مغایرت‌ها و بهبود فرآیندهای بانکی می‌شود.
	</div>
	</div>
	</section>

	<div class="footer">
	<div style="font-weight: 600; color: var(--primary-color);">
	<span>طراح و توسعه‌دهنده: امین چینی ساز</span>
	</div>
	</div>

	<div class="scroll-top" id="scrollTop" onclick="scrollToTop()">
	<i class="fas fa-arrow-up"></i>
	</div>
	</div>

	<script>
	// Loading screen
	window.addEventListener('load', function() {
	setTimeout(function() {
	document.getElementById('loadingScreen').style.opacity = 0;
	document.getElementById('loadingScreen').style.transform = 'translateY(-10px)';
	setTimeout(function() {
	document.getElementById('loadingScreen').style.display = 'none';

	// Add entrance animations once content is visible
	document.querySelectorAll('.card, .info-item, .process-step, .alert-box').forEach(function(el, index) {
	el.style.animationDelay = (index * 0.1) + 's';
	el.classList.add('animated', 'fadeInUp');
	});
	}, 700);
	}, 1800);
	});

	// Main navigation
	function showSection(sectionId) {
	const sections = document.getElementsByClassName('content-section');
	const navItems = document.getElementsByClassName('nav-item');

	// Hide all sections
	for (let i = 0; i < sections.length; i++) {
	sections[i].classList.remove('active');
	}

	// Remove active class from all nav items
	for (let i = 0; i < navItems.length; i++) {
	navItems[i].classList.remove('active');
	}

	// Show the selected section
	document.getElementById(sectionId).classList.add('active');

	// Find and activate the corresponding nav item
	for (let i = 0; i < navItems.length; i++) {
	if (navItems[i].getAttribute('onclick').includes(sectionId)) {
	navItems[i].classList.add('active');
	}
	}

	// Scroll to top
	window.scrollTo({ top: 0, behavior: 'smooth' });
	}

	// Tab navigation
	function changeTab(tabId, element) {
	// Hide all tab contents
	const tabContents = document.getElementsByClassName('tab-content');
	for (let i = 0; i < tabContents.length; i++) {
	tabContents[i].classList.remove('active');
	}

	// Remove active class from all tabs
	const tabs = document.getElementsByClassName('tab');
	for (let i = 0; i < tabs.length; i++) {
	tabs[i].classList.remove('active');
	}

	// Show the selected tab content and add active class to the clicked tab
	document.getElementById(tabId).classList.add('active');
	element.classList.add('active');
	}

	// Toggle problem sections
	function toggleProblem(header) {
	const content = header.nextElementSibling;
	header.classList.toggle('active');
	content.classList.toggle('active');
	}

	// محاسبه تسهیم بالنسبه وجوه وصولی
	function calculateAllocation() {
	const principal = parseFloat(document.getElementById('principal').value) \|\| 0;
	const profit = parseFloat(document.getElementById('profit').value) \|\| 0;
	const penalty = parseFloat(document.getElementById('penalty').value) \|\| 0;
	const payment = parseFloat(document.getElementById('payment').value) \|\| 0;

	const total = principal + profit + penalty;

	if (total === 0) {
	alert('مجموع مانده‌ها نمی‌تواند صفر باشد');
	return;
	}

	let actualPayment = payment;
	if (payment > total) {
	actualPayment = total;
	}

	const principalShare = actualPayment * (principal / total);
	const profitShare = actualPayment * (profit / total);
	const penaltyShare = actualPayment * (penalty / total);

	// Round to avoid floating point issues
	const principalShareRounded = Math.round(principalShare);
	const profitShareRounded = Math.round(profitShare);
	let penaltyShareRounded = Math.round(penaltyShare);

	// Ensure rounding doesn't cause sum to exceed payment
	const totalShares = principalShareRounded + profitShareRounded + penaltyShareRounded;
	if (totalShares > actualPayment) {
	penaltyShareRounded -= (totalShares - actualPayment);
	}

	document.getElementById('principal-share').textContent = principalShareRounded.toLocaleString();
	document.getElementById('profit-share').textContent = profitShareRounded.toLocaleString();
	document.getElementById('penalty-share').textContent = penaltyShareRounded.toLocaleString();

	document.getElementById('principal-remainder').textContent = (principal - principalShareRounded).toLocaleString();
	document.getElementById('profit-remainder').textContent = (profit - profitShareRounded).toLocaleString();
	document.getElementById('penalty-remainder').textContent = (penalty - penaltyShareRounded).toLocaleString();

	document.getElementById('allocation-result').style.display = 'block';

	// Visual effect on result
	document.getElementById('allocation-result').classList.add('highlight');
	setTimeout(function() {
	document.getElementById('allocation-result').classList.remove('highlight');
	}, 2000);
	}

	// محاسبه مغایرت مانده کارت معین و لوتوس
	function calculateDifference() {
	const cardBalance = parseFloat(document.getElementById('card-balance').value) \|\| 0;
	const lotusBalance = parseFloat(document.getElementById('lotus-balance').value) \|\| 0;

	const difference = Math.abs(cardBalance - lotusBalance);
	let differenceType = '';
	let action = '';

	if (cardBalance < lotusBalance) {
	differenceType = 'مانده کارت معین کمتر از مانده لوتوس است';
	action = 'برداشت مابه‌التفاوت از حساب واسط «بدهکاران داخلی امور شعب» با صدور سند مشخص';
	} else if (cardBalance > lotusBalance) {
	differenceType = 'مانده کارت معین بیشتر از مانده لوتوس است';
	action = 'واریز مازاد موجودی به حساب واسط «بستانکاران داخلی امور شعب» با صدور سند مشخص';
	} else {
	differenceType = 'مغایرتی وجود ندارد';
	action = 'نیازی به اقدام نیست';
	}

	document.getElementById('difference-amount').textContent = difference.toLocaleString();
	document.getElementById('difference-type').textContent = differenceType;
	document.getElementById('required-action').textContent = action;

	document.getElementById('difference-result').style.display = 'block';

	// Visual effect on result
	document.getElementById('difference-result').classList.add('highlight');
	setTimeout(function() {
	document.getElementById('difference-result').classList.remove('highlight');
	}, 2000);
	}

	// محاسبه سهم هر وثیقه
	function calculateCollateralShare() {
	const totalDebt = parseFloat(document.getElementById('debt-total').value) \|\| 0;
	const collateral1Value = parseFloat(document.getElementById('collateral1-value').value) \|\| 0;
	const collateral2Value = parseFloat(document.getElementById('collateral2-value').value) \|\| 0;

	const totalCollateralValue = collateral1Value + collateral2Value;

	if (totalCollateralValue === 0) {
	alert('ارزش وثایق نمی‌تواند صفر باشد');
	return;
	}

	const collateral1Percentage = (collateral1Value / totalCollateralValue) * 100;
	const collateral2Percentage = (collateral2Value / totalCollateralValue) * 100;

	const collateral1Share = (collateral1Percentage / 100) * totalDebt;
	const collateral2Share = (collateral2Percentage / 100) * totalDebt;

	document.getElementById('collateral1-share').textContent = Math.round(collateral1Share).toLocaleString();
	document.getElementById('collateral2-share').textContent = Math.round(collateral2Share).toLocaleString();
	document.getElementById('collateral1-percentage').textContent = collateral1Percentage.toFixed(2);
	document.getElementById('collateral2-percentage').textContent = collateral2Percentage.toFixed(2);

	document.getElementById('collateral-result').style.display = 'block';

	// Visual effect on result
	document.getElementById('collateral-result').classList.add('highlight');
	setTimeout(function() {
	document.getElementById('collateral-result').classList.remove('highlight');
	}, 2000);
	}

	// Scroll to top button
	window.addEventListener('scroll', function() {
	const scrollTop = document.getElementById('scrollTop');
	const mainNav = document.getElementById('mainNav');

	if (window.scrollY > 300) {
	scrollTop.classList.add('visible');
	mainNav.classList.add('scrolled');
	} else {
	scrollTop.classList.remove('visible');
	mainNav.classList.remove('scrolled');
	}
	});

	function scrollToTop() {
	window.scrollTo({ top: 0, behavior: 'smooth' });
	}

	// انیمیشن عناصر و افکت‌های ویژه
	document.addEventListener('DOMContentLoaded', function() {
	// انیمیشن ضربان برای عناصر مهم
	const importantElements = document.querySelectorAll('.alert-box.alert-danger');
	importantElements.forEach(function(element) {
	element.classList.add('pulsate');
	});

	// عناصر فلش در فلوچارت
	const arrows = document.querySelectorAll('.flowchart-arrow i');
	arrows.forEach(function(arrow) {
	arrow.classList.add('bounce');
	});

	// انتخاب خودکار تب اول در زمان بارگذاری
	document.querySelectorAll('.tab-content').forEach(function(content) {
	content.classList.remove('active');
	});
	document.getElementById('tab1').classList.add('active');

	// اعمال افکت شناور به آیکون‌های اینفوگرافیک
	const infoIcons = document.querySelectorAll('.info-item .info-icon');
	infoIcons.forEach(function(icon, index) {
	icon.classList.add('floating');
	icon.style.animationDelay = (index * 0.2) + 's';
	});

	// افکت درخشش به دکمه‌های محاسبه
	const calcButtons = document.querySelectorAll('.calculator-btn');
	calcButtons.forEach(function(button) {
	button.classList.add('glow');
	});

	// افکت ظاهر شدن تدریجی به اجزای صفحه هنگام اسکرول
	const fadeElements = document.querySelectorAll('.card, .calculator, .info-item, .problem-card, .key-points');

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.style.opacity = '1';
	entry.target.style.transform = 'translateY(0)';
	}
	});
	}, { threshold: 0.1 });

	fadeElements.forEach(el => {
	el.style.opacity = '0';
	el.style.transform = 'translateY(20px)';
	el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
	observer.observe(el);
	});
	});
	</script>
	</body>
	</html>