:root {
    --primary: #14b8a6;
    --primary-strong: #0d9488;
    --primary-light: #5eead4;
    --secondary: #06b6d4;

    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;

    --text: #0f172a;
    --text-soft: #64748b;
    --text-muted: #94a3b8;

    --border: rgba(15,23,42,.08);

    --hero-bg: #07111f;
    --hero-bg-2: #0b1727;

    --shadow-xs: 0 4px 12px rgba(15,23,42,.04);
    --shadow-sm: 0 12px 35px rgba(15,23,42,.07);
    --shadow-md: 0 22px 55px rgba(15,23,42,.11);
    --shadow-lg: 0 35px 85px rgba(15,23,42,.16);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;

    --container: 1240px;

    --transition: .35s cubic-bezier(.2,.8,.2,1);
}

/* ======================================================
   THEMES
====================================================== */
html[data-theme="blue"] { --primary: #2563eb; --primary-strong: #1d4ed8; --primary-light: #60a5fa; --secondary: #0ea5e9; }
html[data-theme="purple"] { --primary: #8b5cf6; --primary-strong: #7c3aed; --primary-light: #c4b5fd; --secondary: #a855f7; }
html[data-theme="green"] { --primary: #10b981; --primary-strong: #059669; --primary-light: #6ee7b7; --secondary: #22c55e; }
html[data-theme="orange"] { --primary: #f97316; --primary-strong: #ea580c; --primary-light: #fdba74; --secondary: #fb923c; }
html[data-theme="pink"] { --primary: #ec4899; --primary-strong: #db2777; --primary-light: #f9a8d4; --secondary: #d946ef; }

/* ======================================================
   DARK
====================================================== */
html[data-color-scheme="dark"] {
    --bg: #07101d; --surface: #0d1725; --surface-soft: #111d2c;
    --text: #f8fafc; --text-soft: #a9b5c5; --text-muted: #718096;
    --border: rgba(255,255,255,.08);
    --shadow-xs: 0 4px 12px rgba(0,0,0,.18); --shadow-sm: 0 15px 35px rgba(0,0,0,.20);
    --shadow-md: 0 25px 60px rgba(0,0,0,.28); --shadow-lg: 0 40px 100px rgba(0,0,0,.34);
}

/* ======================================================
   RESET
====================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
    font-family: "Vazirmatn", sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.8;
    overflow-x: hidden; transition: background-color .3s ease, color .3s ease;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }

/* ======================================================
   LOADER
====================================================== */
.page-loader {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    z-index: 99999; background: #07111f; transition: opacity .5s ease, visibility .5s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; }
.loader { display: flex; gap: 8px; }
.loader span {
    width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
    box-shadow: 0 0 20px rgba(20,184,166,.45); animation: loaderBounce .9s infinite alternate;
}
.loader span:nth-child(2) { animation-delay: .15s; }
.loader span:nth-child(3) { animation-delay: .30s; }
@keyframes loaderBounce { to { transform: translateY(-10px); opacity: .55; } }

/* ======================================================
   HEADER
====================================================== */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 5000; padding: 15px 0; transition: var(--transition); }
.site-header.scrolled { padding: 9px 0; }
.nav-wrapper {
    width: min(calc(100% - 26px), 1320px); margin-inline: auto; display: flex;
    align-items: center; justify-content: space-between; gap: 16px; padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: rgba(7,17,31,.58);
    backdrop-filter: blur(22px) saturate(145%); box-shadow: 0 18px 50px rgba(0,0,0,.12);
}
.site-header.scrolled .nav-wrapper { background: color-mix(in srgb, var(--surface) 90%, transparent); border-color: var(--border); }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; font-size: .82rem; font-weight: 800;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { color: #fff; font-size: .9rem; }
.site-header.scrolled .brand-text strong { color: var(--text); }
.brand-text small { margin-top: 4px; color: rgba(255,255,255,.45); font-size: .58rem; }
.site-header.scrolled .brand-text small { color: var(--text-muted); }
.main-nav { display: flex; align-items: center; gap: 4px; }
.nav-link { padding: 8px 11px; border-radius: 10px; color: rgba(255,255,255,.68); font-size: .82rem; transition: var(--transition); }
.site-header.scrolled .nav-link { color: var(--text-soft); }
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.07); }
.site-header.scrolled .nav-link:hover, .site-header.scrolled .nav-link.active {
    color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.nav-business-card {
    display: inline-flex; align-items: center; gap: 7px; margin-inline-start: 7px; padding: 8px 12px;
    border-radius: 11px; background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff; font-size: .74rem; font-weight: 700; transition: var(--transition);
}
.nav-business-card:hover { transform: translateY(-2px); }
.header-tools { display: flex; align-items: center; gap: 7px; }
.icon-button, .language-button {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: 11px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.06);
    color: #fff; cursor: pointer; transition: var(--transition);
}
.site-header.scrolled .icon-button, .site-header.scrolled .language-button {
    background: var(--surface); border-color: var(--border); color: var(--text);
}
.icon-button:hover, .language-button:hover { color: var(--primary); transform: translateY(-2px); }
.language-button { font-size: .72rem; font-weight: 800; }
.theme-picker { position: relative; }
.theme-menu {
    position: absolute; top: calc(100% + 9px); left: 0; display: flex; gap: 6px; padding: 9px;
    border-radius: 14px; background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--border); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden;
    transform: translateY(-5px) scale(.95); transition: var(--transition);
}
.theme-picker.open .theme-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.theme-color { width: 19px; height: 19px; padding: 0; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; cursor: pointer; }
.theme-color.teal { background: linear-gradient(135deg,#14b8a6,#0d9488); }
.theme-color.blue { background: linear-gradient(135deg,#2563eb,#1d4ed8); }
.theme-color.purple { background: linear-gradient(135deg,#8b5cf6,#7c3aed); }
.theme-color.green { background: linear-gradient(135deg,#10b981,#059669); }
.theme-color.orange { background: linear-gradient(135deg,#f97316,#ea580c); }
.theme-color.pink { background: linear-gradient(135deg,#ec4899,#db2777); }
.mobile-menu-button {
    display: none; width: 38px; height: 38px; padding: 8px; border-radius: 11px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.06); cursor: pointer;
}
.mobile-menu-button span { display: block; height: 2px; margin: 4px 0; border-radius: 10px; background: #fff; }
.site-header.scrolled .mobile-menu-button { background: var(--surface); border-color: var(--border); }
.site-header.scrolled .mobile-menu-button span { background: var(--text); }

/* ======================================================
   HERO
====================================================== */
.hero-section {
    position: relative; min-height: 730px; padding: 125px 0 70px; display: flex;
    align-items: center; overflow: hidden; background: linear-gradient(135deg, var(--hero-bg), var(--hero-bg-2));
}
.hero-background { position: absolute; inset: 0; }
.hero-grid {
    position: absolute; inset: 0; opacity: .14;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 55px 55px;
}
.hero-glow { position: absolute; width: 440px; height: 440px; border-radius: 50%; filter: blur(100px); opacity: .18; }
.glow-one { top: 5%; right: 5%; background: var(--primary); }
.glow-two { left: -10%; bottom: -20%; background: var(--secondary); }
.hero-container { position: relative; z-index: 2; }
.hero-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(310px,.9fr); align-items: center; gap: 55px; }
.hero-content { max-width: 750px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.67); font-size: .68rem;
}
.online-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #2dd4bf;
    box-shadow: 0 0 0 5px rgba(45,212,191,.09), 0 0 18px rgba(45,212,191,.42);
}
.hero-title { margin-top: 21px; color: #fff; font-size: clamp(2.8rem,5.5vw,5rem); line-height: 1.05; font-weight: 800; letter-spacing: -.045em; }
.hero-title strong {
    display: block; margin-top: 7px; background: linear-gradient(90deg, #fff, var(--primary-light) 45%, var(--primary));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-subtitle { max-width: 700px; margin-top: 20px; color: rgba(255,255,255,.80); font-size: 1rem; }
.hero-description { max-width: 620px; margin-top: 10px; color: rgba(255,255,255,.48); font-size: .76rem; line-height: 2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.button {
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; padding: 0 18px; border-radius: 14px; font-size: .77rem; font-weight: 700; transition: var(--transition);
}
.button-light { background: #fff; color: #06111f; }
.button-outline { color: #fff; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.button:hover { transform: translateY(-3px); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 32px; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat strong { color: #fff; font-size: 1.05rem; }
.hero-stat span { color: rgba(255,255,255,.40); font-size: .59rem; }
.hero-profile { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.profile-card {
    position: relative; z-index: 2; width: min(100%,360px); padding: 25px; text-align: center;
    border: 1px solid rgba(255,255,255,.11); border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    backdrop-filter: blur(24px); box-shadow: 0 30px 85px rgba(0,0,0,.23);
}
.profile-image {
    position: relative; width: 200px; height: 200px; padding: 7px; margin: 0 auto 16px;
    border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.profile-image::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.20); border-radius: 50%; }
.profile-image img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-placeholder {
    position: absolute; inset: 7px; display: none; align-items: center; justify-content: center;
    border-radius: 50%; background: linear-gradient(135deg, #15253a, #0a1524); color: rgba(255,255,255,.32); font-size: 2.8rem;
}
.profile-image.fallback .profile-placeholder { display: flex; }
.profile-availability {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.54); font-size: .59rem;
}
.profile-card h2 { margin-top: 12px; color: #fff; font-size: 1.3rem; }
.profile-card p { color: rgba(255,255,255,.40); font-size: .66rem; }
.profile-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.profile-tags span {
    padding: 5px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px;
    background: rgba(255,255,255,.05); color: rgba(255,255,255,.65); font-size: .56rem;
}
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.orbit-one { width: 440px; height: 440px; }
.orbit-two { width: 360px; height: 360px; border-color: color-mix(in srgb, var(--primary) 28%, transparent); }

/* ======================================================
   FEATURED GALLERY
====================================================== */
.featured-section { position: relative; padding: 85px 0 80px; background: linear-gradient(180deg, var(--bg), var(--surface)); }
.compact-heading { margin-bottom: 38px; }
.featured-gallery { display: grid; grid-template-columns: 1.4fr .8fr .8fr; grid-auto-rows: 210px; gap: 12px; }
.featured-item {
    position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--border);
    background: #0c1826; cursor: pointer; box-shadow: var(--shadow-xs); transition: transform .4s ease, box-shadow .4s ease;
}
.featured-item:first-child { grid-row: span 2; }
.featured-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.featured-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.featured-item:hover img { transform: scale(1.05); }
.featured-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.60), transparent 65%); }
.featured-caption { position: absolute; right: 17px; left: 17px; bottom: 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; color: #fff; }
.featured-caption strong { display: block; font-size: .72rem; }
.featured-caption small { display: block; margin-top: 2px; color: rgba(255,255,255,.50); font-size: .54rem; }
.featured-open {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px);
}

/* ======================================================
   SUMMARY
====================================================== */
.summary-section { position: relative; z-index: 10; }
.summary-panel {
    display: grid; grid-template-columns: repeat(4,1fr); align-items: center; padding: 20px 24px;
    border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg);
}
.summary-item { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.summary-icon {
    width: 41px; height: 41px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary);
}
.summary-item strong { display: block; font-size: .76rem; }
.summary-item small { display: block; margin-top: 1px; color: var(--text-muted); font-size: .57rem; }

/* ======================================================
   SECTIONS
====================================================== */
.section { padding: 110px 0; }
.section-heading { max-width: 780px; margin: 0 auto 57px; text-align: center; }
.section-kicker { color: var(--primary); font-size: .60rem; font-weight: 800; letter-spacing: 2px; }
.section-heading h2 { margin-top: 9px; font-size: clamp(2rem,4vw,3.1rem); line-height: 1.25; letter-spacing: -.04em; }
.section-heading h2 b { color: var(--primary); }
.section-heading p { margin-top: 12px; color: var(--text-soft); font-size: .75rem; }

/* ======================================================
   ABOUT
====================================================== */
.about-section { background: linear-gradient(180deg, var(--surface), var(--bg)); }
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.card { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.about-main { padding: 37px; }
.card-mini-title { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); font-size: .67rem; font-weight: 700; }
.about-main h3 { margin-top: 18px; font-size: clamp(1.5rem,2.7vw,2.3rem); line-height: 1.45; letter-spacing: -.03em; }
.about-main p { margin-top: 15px; color: var(--text-soft); font-size: .75rem; line-height: 2; }
.about-highlight {
    display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px; border-radius: 15px;
    background: color-mix(in srgb, var(--primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}
.highlight-icon { width: 41px; height: 41px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--primary); color: #fff; }
.about-highlight strong { display: block; font-size: .69rem; }
.about-highlight span { display: block; margin-top: 2px; color: var(--text-soft); font-size: .61rem; }
.about-info-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.info-box {
    padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--shadow-xs); transition: var(--transition);
}
.info-box:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.info-icon {
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
    border-radius: 13px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
}
.info-box > span { display: block; margin-top: 14px; color: var(--primary); font-size: .56rem; font-weight: 700; }
.info-box h3 { margin-top: 4px; font-size: .87rem; }
.info-box p { margin-top: 4px; color: var(--text-soft); font-size: .60rem; }

/* ======================================================
   SKILLS
====================================================== */
.skills-section { background: var(--bg); }
.skills-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.skill-card {
    position: relative; padding: 27px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); text-align: center; transition: var(--transition);
}
.skill-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.circular-progress { position: relative; width: 126px; height: 126px; margin: 0 auto 18px; }
.circular-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-bg, .progress-value { fill: none; stroke-width: 8; }
.progress-bg { stroke: color-mix(in srgb, var(--text) 6%, transparent); }
.progress-value {
    stroke: var(--primary); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16;
    transition: stroke-dashoffset 1.5s cubic-bezier(.2,.8,.2,1);
}
.progress-number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; direction: ltr; }
.progress-number strong { font-size: 1.40rem; font-weight: 800; }
.progress-number span { margin-top: 6px; color: var(--primary); font-size: .64rem; font-weight: 800; }
.skill-content { text-align: center; }
.skill-icon {
    width: 43px; height: 43px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
    border-radius: 13px; background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary);
}
.skill-content h3 { font-size: .93rem; }
.skill-content p { margin-top: 8px; color: var(--text-soft); font-size: .65rem; line-height: 1.9; }

/* ======================================================
   PROJECTS (اصلاح شده برای قفل کردن موقعیت عناصر)
====================================================== */
.projects-section { background: var(--surface); }
.project-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; max-width: 850px; margin: 0 auto 35px; }
.project-tab {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 15px; background: var(--bg); color: var(--text-soft);
    cursor: pointer; font-size: .70rem; font-weight: 700; transition: var(--transition);
}
.project-tab i { font-size: .88rem; }
.project-tab:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 15%, transparent); }
.project-tab.active {
    color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    border-color: transparent; box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 25%, transparent);
}
.projects-container { min-height: 300px; }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.project-card {
    position: relative; overflow: hidden; z-index: 1; border: 1px solid var(--border);
    border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); transition: var(--transition);
}
.project-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); z-index: 10; }

.project-media {
    position: relative; height: 220px; background: #0c1826; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-bottom: 35px; overflow: visible;
}
.project-preview {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform-origin: center center;
    transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.project-card:hover .project-preview { transform: scale(1.06); }
.media-gradient {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.03) 70%);
}

/* همیشه گوشه بالا سمت راست (در هر دو زبان) */
.project-media-label {
    position: absolute; top: 15px; right: 15px; left: auto;
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0;
    border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-size: .85rem; z-index: 10; box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.project-media-label span { display: none; }
.project-media-label i { display: flex; align-items: center; justify-content: center; margin: 0; line-height: 1; }

/* همیشه سمت راست (در هر دو زبان) برای بالانس با عناصر سمت چپ */
.project-app-icon {
    position: absolute; bottom: -35px; right: 24px; left: auto;
    width: 70px; height: 70px; padding: 4px; border-radius: 18px;
    background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 15px 32px rgba(0,0,0,.24); overflow: hidden; z-index: 20;
}
.project-app-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

.project-body { position: relative; z-index: 2; padding: 45px 24px 24px; }
.project-number { color: var(--primary); font-size: .56rem; font-weight: 800; }

.project-title-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 3px; }

/* در حالت فارسی: عنوان راست، دسته‌بندی چپ */
html[dir="rtl"] .project-title-row { flex-direction: row; justify-content: space-between; }
/* در حالت انگلیسی: معکوس می‌کنیم تا دسته‌بندی چپ بماند و عنوان راست برود (عدم جابجایی) */
html[dir="ltr"] .project-title-row { flex-direction: row-reverse; justify-content: space-between; }

.project-body h4 { font-size: .96rem; line-height: 1.4; }

.project-category {
    padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 7%, transparent);
    color: var(--primary); font-size: .48rem; white-space: nowrap; flex-shrink: 0;
}

.project-description { margin-top: 9px; color: var(--text-soft); font-size: .66rem; line-height: 1.9; min-height: 45px; }

/* همیشه سمت چپ (در هر دو زبان) */
html[dir="rtl"] .project-tags { justify-content: flex-end; }
html[dir="ltr"] .project-tags { justify-content: flex-start; }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.project-tags span {
    padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text-soft); font-size: .51rem;
}

/* همیشه سمت چپ (در هر دو زبان) */
.project-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; align-items: center; }
html[dir="rtl"] .project-actions { justify-content: flex-end; }
html[dir="ltr"] .project-actions { justify-content: flex-start; }

.project-actions a {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 9px;
    border-radius: 8px; background: color-mix(in srgb, var(--primary) 7%, transparent);
    color: var(--primary); font-size: .55rem; transition: var(--transition); white-space: nowrap;
}
.project-actions a:hover { background: var(--primary); color: #fff; }
.project-actions .action-primary { margin-inline-start: 0; } /* حذف margin خودکار قدیمی */

/* ======================================================
   RESPONSIVE 700px (موبایل)
====================================================== */
@media (max-width: 700px) {
    .project-media { height: 205px; margin-bottom: 25px; }
    .project-app-icon {
        bottom: -25px; right: 20px; left: auto; /* همیشه راست، حتی در موبایل */
        width: 62px; height: 62px; padding: 3px; border-radius: 16px;
    }
    .project-app-icon img { border-radius: 13px; }
    .project-body { padding: 40px 20px 21px; }
    .project-media-label { top: 12px; right: 12px; width: 35px; height: 35px; border-radius: 10px; font-size: .78rem; }
}

/* ======================================================
   CERTIFICATES
====================================================== */
.certificates-section { background: var(--bg); }
.cert-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.cert-card {
    position: relative; padding: 29px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); transition: var(--transition);
}
.cert-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.cert-number { position: absolute; top: 17px; left: 20px; color: var(--text-muted); font-size: .58rem; font-weight: 800; }
.cert-icon {
    width: 53px; height: 53px; display: flex; align-items: center; justify-content: center;
    border-radius: 15px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
}
.cert-card > span { display: block; margin-top: 17px; color: var(--primary); font-size: .55rem; font-weight: 800; }
.cert-card h3 { margin-top: 5px; font-size: .90rem; }
.cert-card p { margin-top: 7px; color: var(--text-soft); font-size: .63rem; line-height: 1.9; }

/* ======================================================
   CONTACT
====================================================== */
.contact-section { position: relative; overflow: hidden; background: #07111f; }
.contact-background {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(20,184,166,.18), transparent 28%), radial-gradient(circle at 90% 80%, rgba(6,182,212,.15), transparent 30%);
}
.contact-panel {
    position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; padding: 43px;
    border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-xl);
    background: rgba(255,255,255,.045); backdrop-filter: blur(22px);
}
.contact-copy .section-kicker { color: var(--primary-light); }
.contact-copy h2 { margin-top: 10px; color: #fff; font-size: clamp(2rem,4vw,3.2rem); line-height: 1.35; }
.contact-copy p { max-width: 650px; margin-top: 14px; color: rgba(255,255,255,.51); font-size: .75rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.quick-contact {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; background: rgba(255,255,255,.03); transition: var(--transition);
}
.quick-contact:hover { transform: translateY(-3px); background: rgba(255,255,255,.06); }
.quick-contact > span {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: rgba(255,255,255,.07); color: var(--primary-light);
}
.quick-contact small { display: block; color: rgba(255,255,255,.33); font-size: .51rem; }
.quick-contact strong { display: block; color: #fff; font-size: .63rem; }
.contact-links { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.contact-link {
    display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px; background: rgba(255,255,255,.03); transition: var(--transition);
}
.contact-link:hover { transform: translateX(-5px); background: rgba(255,255,255,.06); }
.contact-icon { width: 41px; height: 41px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff; }
.contact-icon.telegram { background: #229ed9; }
.contact-icon.instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.contact-link div { flex: 1; }
.contact-link small { display: block; color: rgba(255,255,255,.33); font-size: .51rem; }
.contact-link strong { display: block; margin-top: 1px; color: #fff; font-size: .67rem; }
.contact-link > i { color: rgba(255,255,255,.25); }

/* ======================================================
   FOOTER
====================================================== */
.site-footer { background: #050b14; color: #fff; }
.footer-top { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-logo {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: 11px; background: linear-gradient(135deg, var(--primary), var(--secondary)); font-size: .74rem; font-weight: 800;
}
.footer-brand strong { display: block; font-size: .74rem; }
.footer-brand small { display: block; margin-top: 2px; color: rgba(255,255,255,.30); font-size: .56rem; }
.footer-socials { display: flex; gap: 6px; }
.footer-socials a {
    width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.59); transition: var(--transition);
}
.footer-socials a:hover { transform: translateY(-3px); background: var(--primary); color: #fff; }
.footer-bottom {
    min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 15px;
    border-top: 1px solid rgba(255,255,255,.05); color: rgba(255,255,255,.24); font-size: .55rem;
}

/* ======================================================
   BACK TO TOP
====================================================== */
.back-to-top {
    position: fixed; left: 20px; bottom: 20px; z-index: 2000; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: 13px;
    background: var(--primary); color: #fff; box-shadow: 0 15px 30px color-mix(in srgb, var(--primary) 25%, transparent);
    cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(15px); transition: var(--transition);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ======================================================
   IMAGE MODAL
====================================================== */
.image-modal {
    position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
    padding: 25px; background: rgba(2,8,15,.94); backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.image-modal.active { opacity: 1; visibility: visible; }
.modal-image-wrapper { max-width: 92vw; max-height: 88vh; }
.modal-image-wrapper img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 18px; box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.modal-close, .modal-nav {
    position: absolute; width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
}
.modal-close { top: 20px; right: 20px; }
.modal-nav { top: 50%; transform: translateY(-50%); }
.modal-nav.prev { right: 20px; }
.modal-nav.next { left: 20px; }

/* ======================================================
   REVEAL
====================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ======================================================
   LTR
====================================================== */
html[dir="ltr"] body { direction: ltr; }
html[dir="ltr"] .hero-actions .button i { transform: rotate(180deg); }

/* ======================================================
   RESPONSIVE 1000
====================================================== */
@media (max-width: 1000px) {
    .main-nav {
        position: fixed; top: 76px; right: 13px; left: 13px; display: flex; flex-direction: column;
        align-items: stretch; padding: 10px; border: 1px solid var(--border); border-radius: 18px;
        background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: var(--shadow-lg);
        opacity: 0; visibility: hidden; transform: translateY(-10px); transition: var(--transition);
    }
    .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-link { color: var(--text-soft) !important; padding: 11px; }
    .nav-link.active, .nav-link:hover { color: var(--primary) !important; }
    .nav-business-card { justify-content: center; margin: 4px 0 0; }
    .mobile-menu-button { display: block; }
    .hero-section { min-height: 650px; }
    .hero-layout { grid-template-columns: 1fr; }
    .hero-content { max-width: 850px; margin-inline: auto; text-align: center; }
    .hero-description { margin-inline: auto; }
    .hero-actions, .hero-stats { justify-content: center; }
    .hero-profile { min-height: 400px; }
    .about-grid { grid-template-columns: 1fr; }
    .skills-grid { grid-template-columns: repeat(2,1fr); }
    .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .cert-grid { grid-template-columns: repeat(2,1fr); }
    .contact-panel { grid-template-columns: 1fr; }
    .summary-panel { grid-template-columns: repeat(2,1fr); }
    .featured-gallery { grid-template-columns: 1fr 1fr; }
    .featured-item:first-child { grid-row: span 1; grid-column: span 2; }
}

/* ======================================================
   RESPONSIVE 700
====================================================== */
@media (max-width: 700px) {
    .container { width: min(calc(100% - 26px), var(--container)); }
    .site-header { padding-top: 9px; }
    .nav-wrapper { width: calc(100% - 12px); }
    .brand-text small { display: none; }
    .language-button { display: none; }
    .hero-section { min-height: auto; padding: 112px 0 55px; }
    .hero-title { font-size: clamp(2.35rem, 11vw, 3.7rem); }
    .hero-subtitle { font-size: .87rem; }
    .hero-description { font-size: .71rem; }
    .hero-actions { flex-direction: column; }
    .button { width: 100%; }
    .hero-stats { gap: 18px; }
    .hero-profile { min-height: 360px; }
    .profile-card { width: min(100%, 335px); padding: 22px; }
    .profile-image { width: 185px; height: 185px; }
    .orbit-one { width: 380px; height: 380px; }
    .orbit-two { width: 305px; height: 305px; }
    .featured-section { padding: 70px 0 65px; }
    .featured-gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .featured-item:first-child { grid-column: auto; }
    .summary-panel { grid-template-columns: 1fr 1fr; padding: 15px; gap: 7px; }
    .summary-item { padding: 7px; }
    .summary-item strong { font-size: .67rem; }
    .summary-item small { font-size: .52rem; }
    .section { padding: 85px 0; }
    .section-heading { margin-bottom: 38px; }
    .about-main { padding: 26px; }
    .about-info-grid { grid-template-columns: 1fr; }
    .skills-grid { grid-template-columns: 1fr; }
    .project-tabs { display: flex; overflow-x: auto; justify-content: flex-start; padding-bottom: 5px; scrollbar-width: none; }
    .project-tabs::-webkit-scrollbar { display: none; }
    .project-tab { flex: 0 0 auto; min-width: 145px; }
    .projects-grid { grid-template-columns: 1fr; gap: 24px; }
    .cert-grid { grid-template-columns: 1fr; }
    .contact-panel { padding: 27px; }
    .contact-actions { flex-direction: column; }
    .quick-contact { width: 100%; }
    .footer-top, .footer-bottom { flex-direction: column; justify-content: center; text-align: center; padding: 19px 0; }
}

/* ======================================================
   RESPONSIVE 450
====================================================== */
@media (max-width: 450px) {
    .hero-badge { font-size: .55rem; }
    .hero-title { font-size: 2.25rem; }
    .hero-profile { min-height: 330px; }
    .profile-card { width: min(100%, 310px); }
    .profile-image { width: 160px; height: 160px; }
    .summary-panel { grid-template-columns: 1fr; }
    .summary-item { justify-content: flex-start; }
    .featured-gallery { grid-auto-rows: 200px; }
    .project-media { height: 205px; }
    .project-app-icon { width: 63px; height: 63px; right: 15px; bottom: -25px; }
    .project-body { padding: 0 21px 21px; }
    .project-actions a { flex: 1 1 auto; }
    .contact-copy h2 { font-size: 2rem; }
}

/* ======================================================
   REDUCED MOTION
====================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}