:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0f1724;
  --muted:#64748b;
  --accent:#6c7ef6;
  --accent-2:#00d4ff;
  --glass: rgba(255,255,255,0.6);
  --radius:14px;
  --shadow: 0 6px 20px rgba(10,10,20,0.06);
  --glass-2: rgba(15,23,36,0.2);
  --success: #22c55e;
}

/* حالت دارک مود */
body.dark{
  --bg:#071025;
  --card:#071827;
  --text:#e6eef8;
  --tb:#949494;
  --muted:#9fb0c7;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.logo{
    fill:var(--text);
    background-color:var(--bg);
}
strong{
    color:var(--tb);
}
/* پایه */
body{
  font-family: 'Vazirmatn', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  background:linear-gradient(180deg,var(--bg), #e9f0ff05);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* ظرف اصلی */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:1.5rem;
}

/* نِویگیشن */
.navbar{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.15));
  box-shadow:var(--shadow);
}
body.dark .navbar{
  background: linear-gradient(180deg, rgba(7,16,37,0.6), rgba(7,16,37,0.25));
}

/* ساختار داخلی ناوبار */
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

/* برند */
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--text);
}
.logo{ width:38px; height:38px; object-fit:contain; border-radius:8px; }
.brand-name{ font-weight:700; letter-spacing:.6px; }

/* لینک‌ها */
.nav-links{
  display:flex;
  gap:1rem;
  align-items:center;
}
.nav-links a{
  text-decoration:none;
  color:var(--muted);
  padding:.6rem .9rem;
  border-radius:8px;
  transition:all .2s;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.nav-links a:hover{ color:var(--text); background:var(--glass); }
.nav-actions{
    display: flex;
    align-items: center;
}
/* دکمه‌ها */
.btn{
  display:inline-block;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;
  padding:.6rem 1rem;
  border-radius:10px;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.btn-outline{
  background:transparent;
  border:1px solid rgba(0,0,0,0.06);
  color:var(--text);
}
.btn-ghost{
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:1.1rem;
}

/* هَمبرگر موبایل */
.hamburger{
  display:none;
  width:44px;height:44px;border-radius:10px;border:none;background:transparent;
  align-items:center;justify-content:center;cursor:pointer;
}
.hamburger span{
  display:block;height:2px;width:20px;background:var(--text);margin:4px 0;border-radius:2px;transition:all .25s;
}
body.dark .hamburger span{ background:var(--muted); }

/* هِیرو */
.hero{
  padding:3.5rem 0;
  position:relative;
  overflow:hidden;
}
.hero-inner{ display:grid; grid-template-columns:1fr 380px; gap:2rem; align-items:center; }
@media (max-width:940px){ .hero-inner{ grid-template-columns:1fr; } }

.hero-left h1{ font-size:2.2rem; margin:0; }
.sub{ color:var(--muted); margin:.3rem 0 1rem; font-weight:500; }
.intro{ max-width:54ch; color:var(--muted); margin-bottom:1.1rem; }

.typing{ font-weight:600; color:var(--accent); font-size:1rem; margin-bottom:1rem; }
.cursor{ color:var(--muted); margin-left:.3rem; opacity:1; animation:blink 1s step-end infinite;}
@keyframes blink{ 50%{ opacity:0 } }

/* کارت پروفایل */
.card-profile{
  background:linear-gradient(180deg,var(--card), rgba(255,255,255,0.03));
  border-radius:16px; padding:1rem; display:flex; gap:1rem; align-items:center; box-shadow:var(--shadow);
}
.profile-img{ width:84px;height:84px;border-radius:12px; object-fit:cover; border:2px solid rgba(255,255,255,0.04); }
.profile-meta h3{ margin:0; }
.profile-meta p{ margin:.2rem 0; color:var(--muted); }

.contact-mini a{ display:inline-flex; gap:.5rem; align-items:center; color:var(--muted); text-decoration:none; margin-right:.5rem; }
.contact-mini a:hover{ color:var(--text); }

/* پس‌زمینه هِیرو پارالاکس */
.hero-bg{
  position:absolute; right:-10%; top:-10%; width:60vw; height:60vh;
  background: radial-gradient(circle at 30% 30%, rgba(108,126,246,0.12), transparent 20%),
              radial-gradient(circle at 70% 70%, rgba(0,212,255,0.08), transparent 25%);
  filter: blur(40px);
  transform:translateZ(0);
  pointer-events:none;
  z-index:0;
}

/* سکشن‌ها */
.section{ padding:3rem 0; }
.section.alt{ background: linear-gradient(180deg, transparent, rgba(0,0,0,0.02)); }

/* هدر سکشن */
.section-head{ text-align:right; margin-bottom:1.5rem; }
.section-head h2{ margin:0 0 .3rem; }
.section-head p{ margin:0; color:var(--muted); }

/* درباره‌ من: گرید */
.about-grid{ display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:center; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.about-text h3{ margin-top:0; }
.about-list{ list-style:none; padding:0; color:var(--muted); }
.about-list li{ margin:.5rem 0; }

/* کارت مهارت‌ها */
.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .skills-grid{ grid-template-columns:1fr; } }

.skill-card{ background:var(--card); padding:1rem; border-radius:12px; box-shadow:var(--shadow); }
.skills-list{ list-style:none; padding:0; color:var(--muted); margin:0 0 .8rem; }
.progress{ height:10px; background:rgba(0,0,0,0.04); border-radius:999px; overflow:hidden; }
.bar{ height:100%; width:0%; background: linear-gradient(90deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:flex-end; padding-right:.6rem; color:white; font-size:.8rem; transition:width 1s cubic-bezier(.2,.9,.2,1); }

/* پروژه‌ها */
.projects-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .projects-grid{ grid-template-columns:1fr; } }

.project-card{ display:flex; flex-direction:column; background:var(--card); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.project-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-media.placeholder{ display:flex; align-items:center; justify-content:center; height:100%; background:linear-gradient(90deg,#f0f7ff,#f8f8ff); color:var(--muted); font-weight:700; }
.project-body{ padding:1rem; }
.project-tags span{ background:rgba(15,23,36,0.05); padding:.25rem .5rem; border-radius:8px; margin-left:.4rem; font-size:.8rem; }

/* تایم‌لاین */
.timeline{ display:flex; flex-direction:column; gap:1rem; }
.timeline-item{ display:flex; gap:1rem; align-items:flex-start; }
.time{ min-width:72px; background:var(--card); padding:.6rem .8rem; border-radius:10px; box-shadow:var(--shadow); font-weight:700; text-align:center; }
.timeline-body{ background: linear-gradient(270deg, var(--card), rgb(255 255 255 / 8%)); padding:1rem; border-radius:10px; box-shadow:var(--shadow); }

/* فرم تماس */
.contact-grid{ display:grid; grid-template-columns:1fr 320px; gap:1.5rem; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-form{ background:var(--card); padding:1rem; border-radius:12px; box-shadow:var(--shadow); }
.form-row{ margin-bottom:.9rem; display:flex; flex-direction:column; }
.form-row label{ margin-bottom:.3rem; color:var(--muted); font-size:.95rem; }
.form-row input,.form-row textarea{
  padding:.7rem .8rem; border-radius:10px; border:1px solid rgba(0,0,0,0.06); background:transparent; color:var(--text);
}
.form-actions{ display:flex; gap:1rem; align-items:center; }
.form-status{ color:var(--muted); font-size:.95rem; }

/* فوتر */
.footer{ padding:1.2rem 0; background:transparent; color:var(--muted); border-top:1px solid rgba(0,0,0,0.04); }
.footer-inner{ display:flex; justify-content:space-between; gap:1rem; align-items:center; }

/* افکت‌های reveal (اسکرول) */
.reveal{ opacity:0; transform:translateY(18px); transition:all .7s cubic-bezier(.2,.9,.2,1); will-change:opacity,transform; }
.revealed{ opacity:1; transform:translateY(0); }

/* حالت‌های واکنش‌گرایی برای ناوبار موبایل */
@media (max-width:900px){
  .nav-links{ position:fixed; right:-100%; top:70px; background:var(--card); flex-direction:column; width:220px; padding:1rem; gap:0.5rem; border-radius:12px; box-shadow:var(--shadow); transition: right .3s; }
  .nav-links.open{ right:12px; }
  .hamburger{ display:inline; }
  .nav-inner{ gap:.5rem; }
}

/* کلاس‌های کمکی */
.btn-sm{ padding:.4rem .6rem; border-radius:8px; text-decoration:none; color:var(--text); background:var(--glass); }
.btn-disabled{ opacity:0.5; pointer-events:none; }

/* حالت‌های کوچک */
@media (max-width:600px){
  .hero-left h1{ font-size:1.6rem; }
  .profile-img{ width:64px;height:64px; }
}

/* نمایش پیام موفقیت / خطا */
.form-success{ color:var(--success); }
.form-error{ color:#ef4444; }

/* آداب دسترسی */
a{ outline: none; text-decoration: none; color: #64748b;}
a:focus{ box-shadow:0 0 0 3px rgba(108,126,246,0.14); border-radius:8px; }

/* ---------------- آیکون‌ها: سبک کوچک و هماهنگ ---------------- */
/* آیکون‌ها با currentColor هستن؛ بنابراین رنگ آیکون مطابق رنگ متن تغییر می‌کند */
.icon{
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:middle;
  flex:0 0 16px;
  stroke: currentColor;
  fill: none;
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
  opacity:0.95;
}

/* فاصله مناسب در RTL: آیکون معمولاً در سمت چپ متن قرار می‌گیرد */
a .icon{ margin-left:.45rem; }

/* انیمیشن کوچک در hover */
a:hover .icon{ transform: translateX(-3px) rotate(-4deg); color:var(--accent-2); }

/* در لینک‌های تماس داخل کارت پروفایل رنگ ملایم داریم */
.contact-mini a .icon{ width:14px;height:14px; margin-left:.35rem; }

/* در دکمه‌ها آیکون کمی بزرگتر */
.btn .icon{ width:18px;height:18px; margin-left:.6rem; filter: drop-shadow(0 4px 10px rgba(108,126,246,0.08)); }

/* لینک muted */
p#m{direction: ltr;}
a.muted .icon{ color:var(--muted); }

/* اگر خواستی آیکون خارجی در انتهای لینک نمایش داده شود (مثلاً external)، کلاس external را اضافه کن */
a.external::after{
  content: '';
  display:inline-block;
  width:12px; height:12px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 3h6v6M10 14L21 3" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') no-repeat center / contain;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  margin-right:.4rem;
  vertical-align:middle;
}

/* -------------------------------------------------------------- */

/* توضیحات: بقیهٔ استایل‌های اصلی همان‌طور که پیش‌تر بودند حفظ شده‌اند */
/* توضیحات: بقیهٔ استایل‌های اصلی همان‌طور که پیش‌تر بودند حفظ شده‌اند */