body {
    box-sizing: border-box;
    font-family: 'Vazir', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    color: #111827;
    background-color: #f5f5fb;
    margin: 0;
    padding: 0;
}

header,footer{
    background-color: white;
    box-shadow: 0px 0px 1px #bbb;
}

header{
    position: fixed;z-index: 1;
}

.blank-header{
    height: 150px;
}

h1 { font-size: 25.2px; font-weight: bold; }
h2 { font-size: 21px; font-weight: 600; }
h3 { font-size: 15.4px; font-weight: 600; }
p { line-height: 1.5; }

.app-wrapper { height: 100%; width: 100%; overflow: auto; }
.max-w-5xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pt-8 { padding-top: 2rem; }
.pb-6 { padding-bottom: 1.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.md\:flex-row { flex-direction: row; }
.md\:items-center { align-items: center; }
.md\:justify-between { justify-content: space-between; }
.gap-6 { gap: 1.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-2 { gap: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.border { border-width: 1px; }
.border-transparent { border-color: transparent; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-base { font-size: 1rem; }
.opacity-75 { opacity: 0.75; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.rounded-full { border-radius: 9999px; }
.bg-white\/60 { background-color: rgba(255,255,255,0.6); }

/* کارت‌ها */
article { background-color: #ffffff; padding: 1rem; border: 1px solid #e6e6e6;border-radius: 6px; }

/* تگ‌ها و دکمه‌ها */
.timeline-tag, #projects-section span { background-color: #4b556311; color: #4b5563; border: 1px solid #4b556333; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 11px; }
#projects-section a { background-color: #0f766e; color: #ffffff; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 11px; text-decoration: none; }

/* تایم‌لاین */
.timeline-dot { background-color: #ffffff; border: 4px solid #0f766e; border-radius: 50%; width: 1.5rem; height: 1.5rem; position: absolute; right: -3.05rem;top: -20px;;}
#timeline-line { position: absolute; right: 11px; top: 0px; bottom: 0; width: 0.125rem; background: linear-gradient(to bottom, #0f766e, #0f766e88); }

/* افکت Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal-visible { opacity: 1; transform: translateY(0); }
:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }