/* =========================================================
   PERSONAL PORTFOLIO
   SECTIONS.CSS
   ---------------------------------------------------------
   استایل مشترک بخش‌های اصلی Portfolio
   ========================================================= */


/* =========================================================
   1. SECTION HEADER
   ---------------------------------------------------------
   عنوان و توضیح بالای هر بخش
   ========================================================= */

.section-header {
    max-width: 720px;

    margin-inline: auto;

    margin-bottom:
        var(--space-12);

    text-align: center;
}


/* =========================================================
   2. SECTION EYEBROW
   ---------------------------------------------------------
   متن کوچک بالای عنوان
   مثال:
   ABOUT ME
   MY SKILLS
   SELECTED WORK
   ========================================================= */

.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    margin-bottom:
        var(--space-3);

    color:
        var(--color-primary);

    font-size:
        var(--text-sm);

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* نقطه کنار Eyebrow */

.section-eyebrow::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 12px
        var(--color-primary);
}


/* =========================================================
   3. SECTION TITLE
   ========================================================= */

.section-title {
    margin-bottom:
        var(--space-4);

    color:
        var(--color-text);

    font-size:
        clamp(
            2rem,
            4vw,
            3.25rem
        );

    font-weight:
        800;

    line-height:
        var(--line-tight);

    letter-spacing:
        -0.035em;
}


/* بخش Accent عنوان */

.section-title-accent {
    color:
        var(--color-primary);
}


/* =========================================================
   4. SECTION DESCRIPTION
   ========================================================= */

.section-description {
    max-width:
        650px;

    margin-inline:
        auto;

    color:
        var(--color-text-secondary);

    font-size:
        var(--text-base);

    line-height:
        var(--line-relaxed);
}


/* =========================================================
   5. SECTION GRID
   ---------------------------------------------------------
   Grid عمومی برای کارت‌ها
   ========================================================= */

.section-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--space-6);
}


/* =========================================================
   6. GENERIC CARD
   ---------------------------------------------------------
   کارت عمومی که در بخش‌های مختلف استفاده می‌شود.
   ========================================================= */

.section-card {
    position: relative;

    padding:
        var(--space-8);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        var(--color-surface);

    backdrop-filter:
        blur(var(--blur-md));

    -webkit-backdrop-filter:
        blur(var(--blur-md));

    box-shadow:
        var(--shadow-sm);

    overflow:
        hidden;

    transition:
        transform var(--transition-smooth),
        border-color var(--transition-normal),
        box-shadow var(--transition-smooth),
        background-color var(--transition-normal);
}


/* نور داخلی کارت */

.section-card::before {
    content: "";

    position: absolute;

    top: -120px;
    right: -120px;

    width: 240px;
    height: 240px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    filter:
        blur(90px);

    opacity:
        0;

    transition:
        opacity var(--transition-smooth);
}


.section-card:hover {
    transform:
        translateY(-6px);

    border-color:
        var(--color-border-strong);

    box-shadow:
        var(--shadow-lg);
}


.section-card:hover::before {
    opacity:
        0.07;
}


/* =========================================================
   7. CARD ICON
   ========================================================= */

.card-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom:
        var(--space-5);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        var(--color-primary-soft);

    color:
        var(--color-primary);

    font-size:
        var(--text-lg);

    transition:
        transform var(--transition-normal),
        background-color var(--transition-normal);
}


.section-card:hover .card-icon {
    transform:
        translateY(-3px)
        rotate(-3deg);

    background:
        var(--color-primary);
    
    color:
        #ffffff;
}


/* =========================================================
   8. CARD TITLE
   ========================================================= */

.card-title {
    margin-bottom:
        var(--space-3);

    color:
        var(--color-text);

    font-size:
        var(--text-xl);

    font-weight:
        750;

    line-height:
        var(--line-tight);
}


/* =========================================================
   9. CARD DESCRIPTION
   ========================================================= */

.card-description {
    color:
        var(--color-text-secondary);

    font-size:
        var(--text-sm);

    line-height:
        var(--line-relaxed);
}


/* =========================================================
   10. ABOUT SECTION
   ========================================================= */

.about-grid {
    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap:
        var(--space-12);

    align-items:
        center;
}


/* =========================================================
   11. ABOUT VISUAL
   ========================================================= */

.about-visual {
    position: relative;

    min-height:
        460px;

    display:
        grid;

    place-items:
        center;
}


/* کارت تصویری About */

.about-image-card {
    position: relative;

    width:
        min(
            100%,
            420px
        );

    aspect-ratio:
        1 / 1.08;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-2xl);

    background:
        linear-gradient(
            145deg,
            var(--color-surface-hover),
            var(--color-surface)
        );

    box-shadow:
        var(--shadow-xl);

    overflow:
        hidden;

    transform:
        rotate(-2deg);

    transition:
        transform var(--transition-smooth);
}


.about-image-card:hover {
    transform:
        rotate(0deg)
        translateY(-6px);
}


/* =========================================================
   12. ABOUT IMAGE
   ========================================================= */

.about-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


/* =========================================================
   13. ABOUT CONTENT
   ========================================================= */

.about-content {
    max-width:
        650px;
}


.about-content p {
    margin-bottom:
        var(--space-5);

    color:
        var(--color-text-secondary);

    line-height:
        var(--line-relaxed);
}


/* =========================================================
   14. ABOUT HIGHLIGHTS
   ========================================================= */

.about-highlights {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--space-4);

    margin-top:
        var(--space-8);
}


.about-highlight {
    padding:
        var(--space-5);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal);
}


.about-highlight:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--color-primary);
}


.about-highlight-value {
    display:
        block;

    margin-bottom:
        var(--space-1);

    color:
        var(--color-text);

    font-size:
        var(--text-2xl);

    font-weight:
        800;
}


.about-highlight-label {
    color:
        var(--color-text-muted);

    font-size:
        var(--text-xs);
}


/* =========================================================
   15. SKILLS SECTION
   ========================================================= */

.skills-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--space-5);
}


/* Skill Card */

.skill-card {
    position:
        relative;

    padding:
        var(--space-6);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);

    overflow:
        hidden;

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}


.skill-card:hover {
    transform:
        translateY(-5px);

    border-color:
        var(--color-primary);

    box-shadow:
        var(--shadow-md);
}


/* Skill Header */

.skill-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    margin-bottom:
        var(--space-4);
}


.skill-name {
    color:
        var(--color-text);

    font-size:
        var(--text-sm);

    font-weight:
        700;
}


.skill-level {
    color:
        var(--color-primary);

    font-size:
        var(--text-xs);

    font-weight:
        700;
}


/* Skill Progress */

.skill-progress {
    width:
        100%;

    height:
        6px;

    border-radius:
        var(--radius-full);

    background:
        var(--color-bg-tertiary);

    overflow:
        hidden;
}


.skill-progress-bar {
    width:
        var(--skill-progress, 0%);

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-accent)
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 1s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.skill-card.is-visible
.skill-progress-bar {
    transform:
        scaleX(1);
}


/* =========================================================
   16. EXPERIENCE TIMELINE
   ========================================================= */

.timeline {
    position:
        relative;

    max-width:
        900px;

    margin-inline:
        auto;
}


/* خط Timeline */

.timeline::before {
    content: "";

    position:
        absolute;

    top: 0;
    bottom: 0;

    left: 20px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            var(--color-primary),
            var(--color-border),
            transparent
        );
}


/* Timeline Item */

.timeline-item {
    position:
        relative;

    padding-left:
        var(--space-16);

    margin-bottom:
        var(--space-10);
}


.timeline-item:last-child {
    margin-bottom:
        0;
}


/* Timeline Dot */

.timeline-dot {
    position:
        absolute;

    top: 4px;
    left: 14px;

    width: 13px;
    height: 13px;

    border:
        3px solid var(--color-bg);

    border-radius:
        50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 0 4px
        var(--color-primary-soft);
}


/* Timeline Date */

.timeline-date {
    display:
        inline-block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-primary);

    font-size:
        var(--text-xs);

    font-weight:
        700;
}


/* Timeline Title */

.timeline-title {
    margin-bottom:
        var(--space-2);

    color:
        var(--color-text);

    font-size:
        var(--text-xl);

    font-weight:
        750;
}


/* Timeline Company */

.timeline-company {
    margin-bottom:
        var(--space-3);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);

    font-weight:
        600;
}


/* Timeline Description */

.timeline-description {
    color:
        var(--color-text-secondary);

    font-size:
        var(--text-sm);

    line-height:
        var(--line-relaxed);
}


/* =========================================================
   17. PROJECTS
   ========================================================= */

.projects-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--space-6);
}


/* Project Card */

.project-card {
    position:
        relative;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        var(--color-surface);

    overflow:
        hidden;

    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth),
        border-color var(--transition-normal);
}


.project-card:hover {
    transform:
        translateY(-7px);

    border-color:
        var(--color-border-strong);

    box-shadow:
        var(--shadow-lg);
}


/* Project Image */

.project-image-wrapper {
    position:
        relative;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        var(--color-bg-tertiary);
}


.project-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 700ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.project-card:hover .project-image {
    transform:
        scale(1.05);
}


/* Project Overlay */

.project-overlay {
    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            15,
            23,
            42,
            0.35
        );

    opacity:
        0;

    transition:
        opacity var(--transition-normal);
}


.project-card:hover .project-overlay {
    opacity:
        1;
}


/* Project Content */

.project-content {
    padding:
        var(--space-6);
}


.project-title {
    margin-bottom:
        var(--space-2);

    color:
        var(--color-text);

    font-size:
        var(--text-xl);

    font-weight:
        750;
}


.project-description {
    margin-bottom:
        var(--space-4);

    color:
        var(--color-text-secondary);

    font-size:
        var(--text-sm);

    line-height:
        var(--line-relaxed);
}


/* =========================================================
   18. PROJECT TAGS
   ========================================================= */

.project-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        var(--space-2);
}


.project-tag {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        0
        var(--space-3);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-full);

    background:
        var(--color-bg-tertiary);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-xs);

    font-weight:
        600;
}


/* =========================================================
   19. SERVICES
   ========================================================= */

.services-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--space-6);
}


/* =========================================================
   20. CV / RESUME
   ========================================================= */

.cv-section {
    position:
        relative;

    padding:
        var(--space-10);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-2xl);

    background:
        linear-gradient(
            135deg,
            var(--color-primary-soft),
            var(--color-accent-soft)
        );

    overflow:
        hidden;
}


.cv-section::before {
    content: "";

    position:
        absolute;

    width:
        300px;
    height:
        300px;

    top:
        -180px;
    right:
        -100px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    filter:
        blur(100px);

    opacity:
        0.12;
}


.cv-content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-8);
}


.cv-title {
    margin-bottom:
        var(--space-3);

    color:
        var(--color-text);

    font-size:
        var(--text-2xl);

    font-weight:
        800;
}


.cv-description {
    max-width:
        600px;

    color:
        var(--color-text-secondary);

    font-size:
        var(--text-sm);

    line-height:
        var(--line-relaxed);
}


/* =========================================================
   21. CONTACT
   ========================================================= */

.contact-grid {
    display:
        grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap:
        var(--space-8);
}


/* Contact Info */

.contact-info {
    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-4);
}


.contact-item {
    display:
        flex;

    align-items:
        center;

    gap:
        var(--space-4);

    padding:
        var(--space-5);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal);
}


.contact-item:hover {
    transform:
        translateX(4px);

    border-color:
        var(--color-primary);
}


.contact-icon {
    width:
        44px;
    height:
        44px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        var(--radius-md);

    background:
        var(--color-primary-soft);

    color:
        var(--color-primary);
}


.contact-label {
    margin-bottom:
        2px;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-xs);
}


.contact-value {
    color:
        var(--color-text);

    font-size:
        var(--text-sm);

    font-weight:
        650;

    word-break:
        break-word;
}


/* =========================================================
   22. CONTACT FORM
   ========================================================= */

.contact-form {
    display:
        grid;

    gap:
        var(--space-5);

    padding:
        var(--space-8);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-xl);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-sm);
}


.form-group {
    display:
        grid;

    gap:
        var(--space-2);
}


.form-label {
    color:
        var(--color-text);

    font-size:
        var(--text-sm);

    font-weight:
        650;
}


.form-input,
.form-textarea {
    width:
        100%;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        var(--color-bg-secondary);

    color:
        var(--color-text);

    padding:
        13px
        var(--space-4);

    outline:
        none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}


.form-input {
    height:
        48px;
}


.form-textarea {
    min-height:
        150px;

    resize:
        vertical;
}


.form-input::placeholder,
.form-textarea::placeholder {
    color:
        var(--color-text-light);
}


.form-input:focus,
.form-textarea:focus {
    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 4px
        var(--color-primary-soft);
}


/* =========================================================
   23. FOOTER
   ========================================================= */
/* =========================================================
   PROFESSIONAL FOOTER
   ========================================================= */

.site-footer {

    position: relative;

    margin-top: 100px;

    padding: 80px 0 28px;

    background:
        linear-gradient(
            180deg,
            rgba(241, 245, 249, 0.45),
            var(--color-background)
        );

    border-top: 1px solid var(--color-border);

    overflow: hidden;
}


/* =========================================================
   FOOTER GLOW
   ---------------------------------------------------------
   نور بسیار ظریف پشت فوتر
   ========================================================= */

.site-footer::before {

    content: "";

    position: absolute;

    top: -180px;
    left: 50%;

    width: 520px;
    height: 300px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(37, 99, 235, 0.09),
            transparent 70%
        );

    pointer-events: none;

    filter: blur(20px);
}


/* =========================================================
   FOOTER TOP
   ========================================================= */

.footer-top {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(260px, 1.7fr)
        minmax(150px, 1fr)
        minmax(180px, 1fr)
        minmax(230px, 1.2fr);

    gap: 60px;

    padding-bottom: 64px;
}


/* =========================================================
   BRAND
   ========================================================= */

.footer-brand {
    max-width: 360px;
}


.footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: var(--color-text);

    font-size: 20px;

    font-weight: 800;

    text-decoration: none;
}


.footer-logo-mark {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 11px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-accent)
        );

    box-shadow:
        0 8px 24px rgba(37, 99, 235, 0.20);

    font-size: 18px;
}


.footer-logo-text {
    letter-spacing: -0.4px;
}


.footer-description {

    margin-top: 20px;

    max-width: 340px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   SOCIALS
   ========================================================= */

.footer-socials {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 24px;
}


.footer-social {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid var(--color-border);

    border-radius: 10px;

    color: var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.45);

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}


.footer-social:hover {

    transform: translateY(-4px);

    color: var(--color-primary);

    border-color:
        rgba(37, 99, 235, 0.35);

    background:
        var(--color-primary-soft);

    box-shadow:
        0 10px 25px rgba(37, 99, 235, 0.10);
}


/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.footer-column {
    position: relative;
}


.footer-heading {

    margin: 4px 0 20px;

    color: var(--color-text);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: -0.1px;
}


/* =========================================================
   FOOTER LINKS
   ========================================================= */

.footer-links {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


.footer-links a {

    position: relative;

    color: var(--color-text-muted);

    font-size: 14px;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.footer-links a::before {

    content: "";

    position: absolute;

    left: -14px;

    top: 50%;

    width: 0;
    height: 1px;

    background: var(--color-primary);

    transform: translateY(-50%);

    transition:
        width var(--transition-fast);
}


.footer-links a:hover {

    color: var(--color-primary);

    transform: translateX(4px);
}


.footer-links a:hover::before {

    width: 8px;
}


/* =========================================================
   EXPERTISE TAGS
   ========================================================= */

.footer-skills {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    max-width: 230px;
}


.footer-skills span {

    display: inline-flex;

    align-items: center;

    padding: 7px 10px;

    border: 1px solid var(--color-border);

    border-radius: 8px;

    color: var(--color-text-muted);

    background:
        rgba(255, 255, 255, 0.45);

    font-size: 11px;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


.footer-skills span:hover {

    color: var(--color-primary);

    border-color:
        rgba(37, 99, 235, 0.30);

    background:
        var(--color-primary-soft);

    transform: translateY(-2px);
}


/* =========================================================
   CTA
   ========================================================= */

.footer-cta {

    padding: 22px;

    border:
        1px solid var(--color-border);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.75),
            rgba(241, 245, 249, 0.55)
        );

    box-shadow:
        var(--shadow-sm);
}


.footer-cta-label {

    display: block;

    margin-bottom: 8px;

    color: var(--color-primary);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.footer-cta-title {

    margin: 0;

    color: var(--color-text);

    font-size: 20px;

    line-height: 1.4;

    letter-spacing: -0.5px;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.footer-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    width: 100%;

    margin-top: 22px;

    padding: 11px 13px;

    border-radius: 10px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #3b82f6
        );

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 10px 24px rgba(37, 99, 235, 0.20);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


.footer-cta-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(37, 99, 235, 0.28);
}


.footer-cta-arrow {

    font-size: 17px;

    transition:
        transform var(--transition-fast);
}


.footer-cta-button:hover .footer-cta-arrow {

    transform: translateX(4px);
}


/* =========================================================
   DIVIDER
   ========================================================= */

.footer-divider {

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-border),
            transparent
        );
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 24px;
}


.footer-copyright {

    margin: 0;

    color: var(--color-text-muted);

    font-size: 12px;
}


.footer-bottom-links {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--color-text-muted);

    font-size: 12px;
}


.footer-bottom-links a {

    color: var(--color-text-muted);

    text-decoration: none;

    transition:
        color var(--transition-fast);
}


.footer-bottom-links a:hover {

    color: var(--color-primary);
}


.footer-dot {

    opacity: 0.5;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .site-footer {

    background:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, 0.45),
            var(--color-background)
        );
}


html[data-theme="dark"] .footer-social,
html[data-theme="dark"] .footer-skills span {

    background:
        rgba(15, 23, 42, 0.35);
}


html[data-theme="dark"] .footer-cta {

    background:
        linear-gradient(
            145deg,
            rgba(30, 41, 59, 0.65),
            rgba(15, 23, 42, 0.55)
        );
}


/* =========================================================
   RTL
   ========================================================= */

html[dir="rtl"] .footer-links a:hover {

    transform: translateX(-4px);
}


html[dir="rtl"] .footer-links a::before {

    left: auto;
    right: -14px;
}


html[dir="rtl"] .footer-cta-arrow {

    transform: scaleX(-1);
}


html[dir="rtl"] .footer-cta-button:hover .footer-cta-arrow {

    transform:
        scaleX(-1)
        translateX(4px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .footer-top {

        grid-template-columns:
            1.5fr 1fr 1fr;

        gap: 40px;
    }

    .footer-cta {

        grid-column: 1 / -1;

        max-width: 100%;
    }
}


@media (max-width: 700px) {

    .site-footer {

        margin-top: 70px;

        padding-top: 60px;
    }

    .footer-top {

        grid-template-columns: 1fr;

        gap: 38px;

        padding-bottom: 45px;
    }

    .footer-brand {

        max-width: 100%;
    }

    .footer-description {

        max-width: 500px;
    }

    .footer-cta {

        grid-column: auto;
    }

    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        padding-top: 20px;
    }
}


@media (max-width: 480px) {

    .footer-socials {

        gap: 8px;
    }

    .footer-social {

        width: 36px;
        height: 36px;
    }

    .footer-cta {

        padding: 18px;
    }

    .footer-cta-title {

        font-size: 18px;
    }

    .footer-bottom-links {

        flex-wrap: wrap;
    }
}
/* =========================================================
   26. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .section-header {
        margin-bottom:
            var(--space-8);
    }


    .section-title {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.7rem
            );
    }


    .section-description {
        font-size:
            var(--text-sm);
    }


    .section-inner {
        padding-block:
            var(--space-16);
    }


    .section-grid,
    .skills-grid,
    .services-grid {
        grid-template-columns:
            1fr;
    }


    .section-card {
        padding:
            var(--space-6);
    }


    .about-visual {
        min-height:
            380px;
    }


    .about-image-card {
        width:
            min(
                100%,
                340px
            );
    }


    .about-highlights {
        grid-template-columns:
            1fr;
    }


    .timeline-item {
        padding-left:
            var(--space-12);
    }


    .cv-section {
        padding:
            var(--space-6);
    }


    .cv-content {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .footer-inner {
        flex-direction:
            column;

        text-align:
            center;
    }


    .footer-links {
        justify-content:
            center;
    }
}


/* =========================================================
   27. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .contact-form {
        padding:
            var(--space-5);
    }


    .about-highlights {
        gap:
            var(--space-3);
    }


    .project-content {
        padding:
            var(--space-5);
    }
}


/* =========================================================
   28. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .section-card,
    .skill-card,
    .project-card,
    .about-image-card,
    .contact-item {
        transition:
            none;
    }
}

/* ============================================================
   SKILL PROGRESS BAR
   ============================================================ */

/*
 * پس‌زمینه نوار
 */

.skill-progress {
    width: 100%;
    height: 8px;

    margin-top: 18px;

    background: #eef2f7;

    border-radius: 999px;

    overflow: hidden;
}


/*
 * نوار آبی
 *
 * مقدار width توسط JavaScript
 * از data-progress خوانده می‌شود.
 */

.skill-progress-bar {
    display: block;

    width: 0;

    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-accent)
    );

    transition: width 1s ease;
}


/*
 * حالت تاریک
 */

html[data-theme="dark"] .skill-progress {
    background: rgba(148, 163, 184, 0.15);
}