* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #c3f4f6 0, #06375c 65%);
  color: #e5e7eb;
  font-family: sans-serif;
  /* تغییرات برای وسط‌چین شدن کامل */
  display: flex;
  justify-content: center;
  align-items: center; /* از flex-start به center تغییر کرد */
  padding: 24px;
}

.page-wrapper {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* اضافه کردن margin-top برای اینکه اگر محتوا زیاد بود از بالا نچسبد */
  margin-top: 20px; 
  justify-content: center;
  align-items: center;
  text-align: justify;
}

.about-wrapper {
  position: relative;
  box-shadow: #e5e7eb 5px;
  max-width: 980px;
  width: 100%;
  background: rgba(15, 23, 42, 0.95);
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.8);
  overflow: hidden;
  padding: 30px;
  backdrop-filter: blur(14px);
}

.accent-bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, #38bdf8, #a855f7);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}

.intro-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin-bottom: 8px;
}

.intro-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #f9fafb;
}

.intro-role {
  font-size: 1.05rem;
  color: #9ca3af;
  margin: 0 0 18px;
}

 /* استایل برای جلوگیری از پرش صفحه */
.typewriter-container {
/* یک ارتفاع ثابت یا حداقل ارتفاع انتخاب کنید که از بلندترین جمله شما کمی بیشتر باشد */
  min-height: 3.6em; 
  display: flex;
  align-items: center; /* متن را عمودی وسط قرار می‌دهد */
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
  color: #cbd5f5;
  text-align: justify;
}
.type-cursor {
  display: inline-block;
  width: 7px;
  margin-right: 2px;
  background: #22c55e;
  animation: blink 0.9s step-start infinite;
  border-radius: 999px;
  height: 1.1em;
  vertical-align: text-bottom;
}

@keyframes blink {
  50% { opacity: 0; }
}

.skills-label {
  margin-top: 20px;
  font-size: 0.8rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.skills-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 0.78rem;
  color: #e5e7eb;
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.9));
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  animation: chip-in 0.4s ease-out forwards;
}

.skill-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
}

@keyframes chip-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-primary{
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #020617;
  box-shadow: 0 10px 30px rgba(22, 163, 74, 0.45);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 40px rgba(22, 163, 74, 0.60);
}

.profile-card {
  position: relative;
  padding: 14px;
  border-radius: 20px;
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), rgba(15, 23, 42, 1));
  border: 1px solid rgba(148, 163, 184, 0.45);
  overflow: hidden;
}

.profile-inner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #020617;
  isolation: isolate;
}

.profile-avatar {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(35%) contrast(1.02);
  transform-origin: center;
  transition: transform 0.7s ease, filter 0.7s ease;
}

.profile-card:hover .profile-avatar {
  transform: scale(1.04);
  filter: grayscale(0%);
}

.profile-gradient-overlay {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(15, 23, 42, 1), transparent);
  pointer-events: none;
}

.profile-meta {
  position: absolute;
  inset-inline: 14px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 2;
}

.profile-name {
  font-size: 1rem;
  font-weight: 600;
  color: #f9fafb;
}

.profile-role {
  font-size: 0.78rem;
  color: #cbd5f5;
}

.profile-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.7);
  font-size: 0.72rem;
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
}

.status-strip {
  position: absolute;
  inset-inline: -40px;
  bottom: 34px;
  height: 1px;
  background: radial-gradient(circle at center, rgba(148, 163, 184, 0.85), transparent 55%);
  opacity: 0.7;
  pointer-events: none;
}

.status-pills {
  position: absolute;
  top: 14px;
  inset-inline: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  z-index: 2;
}

.status-pill {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
}

.about-footer {
  margin-top: 18px;
  font-size: 0.89rem;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dot-muted {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #858f9c;
  align-self: center;
}


   /* استایل برای واکنش‌گرا شدن (موبایل) */
@media (max-width: 768px) {
    body {
    align-items: stretch;
  }
  .about-wrapper {
    padding: 22px 18px 20px;
    border-radius: 20px;
  }
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .intro-name {
    font-size: 1.8rem;
  }
  .profile-card {
    max-width: 320px;
    margin-inline: auto;
  }
  .container {
    width: 100%;
    padding: 5px;
    margin: 5px;
        }
      h1 { font-size: 1.5rem; width: 100%; }
      h2 { font-size: 1.2rem; width: 100%;}
      p, li { font-size: 0.95rem; line-height: 1.7; width: 100%;}
        
    .typewriter-container {
      min-height: 4.5em; /* در موبایل جملات ممکن است در ۲ یا ۳ خط بشکنند */
      }
    }
@media (max-width: 480px) {
  .intro-name {
    font-size: 1.6rem;
  }
  .intro-typewriter {
    font-size: 0.92rem;
  }
  .about-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-primary,
  .btn-ghost {
    justify-content: center;
    width: 100%;
  }
}
    .container {
      max-width: 900px;
      margin: 20px;
    }

    h1 {
      text-align: center;
      margin-bottom: 32px;
      color: #F9FAFB;
      font-weight: 600;
      font-family: sans-serif;
    }

    .accordion {
      background: linear-gradient(135deg, #020617, #0f172a);
      border-radius: 12px;
      padding: 16px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
    }

    .accordion-item {
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 12px;
      background: rgba(15, 23, 42, 0.9);
      border: 1.5px solid rgba(148, 163, 184, 0.25);
    }

    .accordion-header {
      width: 100%;
      padding: 14px 16px;
      background: rgba(15, 23, 42, 0.9);
      color: #f5f7fa;
      border: none;
      outline: none;
      cursor: pointer;
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .accordion-header:hover {
      background: rgba(34, 197, 94, 0.6);
      color: #f2f3f7;
      font-size: 16px;
    }

    .accordion-header-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      font-size: 15px;
      background: radial-gradient(circle at 30% 0%, #22c55e 0, #16a34a 45%, #065f46 100%);
      color: #f8fefb;
      box-shadow: 0 0 16px rgba(34, 197, 94, 0.6);
    }

    .accordion-icon {
      font-size: 18px;
      width: 20px;
      text-align: center;
      color: #36d671;
      transition: transform 0.2s ease, color 0.2s ease;

    }

    .accordion-header.active .accordion-icon {
      transform: rotate(90deg);
      color: #38bdf8;
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      background: rgba(15, 23, 42, 0.95);
      color: #d3d7de;
      padding: 0 16px;
      font-size: 14px;
      line-height: 1.9;
      transition: max-height 0.25s ease-out, padding-bottom 0.25s ease-out;
    }

    .accordion-content-inner {
      padding: 8px 0 16px 0;
    }

    .accordion-content.open {
      padding-bottom: 16px;
    }

    .highlight {
      color: #38bdf8;
      font-weight: bold;
    }

    .code-inline {
      background: rgba(15, 23, 42, 0.8);
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid rgba(148, 163, 184, 0.4);
    }

    .accordion-item:last-child {
      margin-bottom: 0;
    }
        .image-placeholder {
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            border-radius: 8px;
            /* background-color: #fafafa; */
            width: 100%;
            color: #666;
            font-style: italic;
              justify-content: center;
  align-items: center; /* از flex-start به center تغییر کرد */
 
        }
        .image-placeholder img {
            max-width: 80%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
.download-link {
            display: block;
            text-align: center;
            margin-top: 40px;
            font-size: 1.1em;
            font-weight: bold;
            color: #6aaef7;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .download-link:hover {
            color: #e8eff7;
            text-decoration: underline;
        }
        strong {
            color: #bfd3e8;
        }