:root{
    --accent:#FBB955;
    --accent-light:#FCC873;
    --accent-soft:rgba(251,185,85,.12);
    --text-dark:#222222;
    --white:#ffffff;
    --radius-lg:28px;
    --radius-card:26px;
    --container-width:1200px;
    --gap:24px;
  }

  *{ box-sizing:border-box; }

  body{
    margin:0;
    padding:0;
    font-family:'Tahoma','Segoe UI',Arial,sans-serif;
    color:var(--text-dark);
    background:#ffffff;
  }

  .site-wrapper{
    max-width:var(--container-width);
    margin:0 auto;
    padding:20px;
  }

  a{ text-decoration:none; color:inherit; }

  /* ===================== HEADER ===================== */
  .header-section{
    background-color:var(--accent);
    background-image:
      linear-gradient(180deg, rgba(251,185,85,.78), rgba(251,185,85,.78)),
      url("https://commons.wikimedia.org/wiki/Special:FilePath/Cello.jpg?width=1400");
    background-repeat:no-repeat;
    background-position:center 30%;
    background-size:cover;
    border-radius:var(--radius-lg);
    min-height:280px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    position:relative;
    margin-bottom:40px;
    overflow:hidden;
  }

  .header-title{
    font-family:'Vazirmatn', 'Tahoma', sans-serif;
    font-size:44px;
    font-weight:700;
    color:var(--white);
    text-align:center;
    margin:0;
    text-shadow:0 4px 18px rgba(0,0,0,.35);
    transition:transform .4s ease, letter-spacing .4s ease;
  }
  .header-title:hover{
    transform:scale(1.04);
    letter-spacing:1px;
  }

  /* دکمه بازگشت به خانه */
  .home-btn{
    position:absolute;
    top:24px;
    left:24px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
    z-index:5;
  }
  .home-btn svg{
    width:24px;
    height:24px;
    stroke:var(--text-dark);
    transition:transform .35s ease;
  }
  .home-btn:hover{
    transform:translateY(-4px) rotate(-6deg) scale(1.08);
    background:var(--text-dark);
    box-shadow:0 10px 22px rgba(0,0,0,.25);
  }
  .home-btn:hover svg{
    stroke:var(--white);
    transform:scale(1.1);
  }

  /* ===================== ABOUT + گرید اساتید ===================== */
  .about-section{
    display:flex;
    flex-wrap:wrap;
    gap:var(--gap);
    align-items:stretch;
    margin-bottom:40px;
  }

  .about-content{
    flex:1 1 380px;
    min-width:280px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .about-content p{
    font-size:16px;
    line-height:1.9;
    color:#333333;
    text-align:justify;
    margin:0;
    padding:6px 4px;
    border-radius:12px;
    transition:color .4s ease, background-color .4s ease, letter-spacing .4s ease, box-shadow .4s ease;
    cursor:default;
  }
  .about-content p:hover{
    color:#000000;
    background-color:var(--accent-soft);
    letter-spacing:.3px;
    box-shadow:inset 0 0 0 1px rgba(251,185,85,.35);
  }

  /* گرید معرفی اساتید - سایز و چیدمان بدون تغییر */
  .gallery-grid{
    flex:1 1 500px;
    min-width:280px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(2, 1fr);
    gap:20px;
  }

  .teacher-card{
    aspect-ratio:1 / 1;
    border:2px solid var(--accent);
    border-radius:var(--radius-card);
    background-color:var(--white);
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px;
    text-align:center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease, border-color .4s ease;
  }

  .teacher-card .avatar{
    width:46%;
    aspect-ratio:1/1;
    border-radius:50%;
    background:var(--accent-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .4s ease, background .4s ease;
  }
  .teacher-card .avatar svg{
    width:55%;
    height:55%;
    stroke:var(--accent);
    transition:stroke .4s ease;
  }

  .teacher-card h3{
    margin:0;
    font-size:14px;
    font-weight:700;
    color:var(--text-dark);
    transition:color .35s ease;
  }

  .teacher-card .role{
    margin:0;
    font-size:11px;
    color:#888;
    max-height:0;
    opacity:0;
    transition:max-height .35s ease, opacity .35s ease, margin .35s ease;
  }

  .teacher-card:hover{
    transform:translateY(-10px);
    box-shadow:0 16px 30px rgba(251,185,85,.4);
    border-color:var(--text-dark);
  }
  .teacher-card:hover .avatar{
    transform:scale(1.1);
    background:var(--accent);
  }
  .teacher-card:hover .avatar svg{
    stroke:var(--white);
  }
  .teacher-card:hover h3{
    color:var(--accent);
  }
  .teacher-card:hover .role{
    max-height:20px;
    opacity:1;
    margin-top:2px;
  }

  /* ===================== بخش لوح‌های تقدیر و تندیس‌ها ===================== */
  /* این سکشن به صورت پیش‌فرض ترنسپرنت طراحی شده تا پس از قرارگیری
     در المنتور، با بک‌گراند صفحه هماهنگ شود و فقط آیتم‌های داخلی
     (تصاویر لوح/تندیس) با هاور نمایش داده شوند. */
  .awards-section{
    background-color:transparent;
    border:2px dashed rgba(251,185,85,.55);
    border-radius:var(--radius-lg);
    min-height:170px;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:20px;
  }

  .award-item{
    width:110px;
    height:110px;
    border-radius:18px;
    background-color:transparent;
    border:2px dashed rgba(251,185,85,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1), background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
  }
  .award-item:hover{
    transform:translateY(-6px) scale(1.05);
    background-color:var(--accent-soft);
    border-color:var(--accent);
    border-style:solid;
    box-shadow:0 12px 24px rgba(251,185,85,.35);
  }

  /* ===================== ریسپانسیو ===================== */
  @media (max-width: 992px){
    .about-section{ flex-direction:column; }
    .gallery-grid{ width:100%; }
  }

  @media (max-width: 768px){
    .header-section{ min-height:220px; padding:20px; }
    .home-btn{ width:44px; height:44px; top:16px; left:16px; }
    .header-title{ font-size:32px; }
    .gallery-grid{
      grid-template-columns:repeat(2, 1fr);
      grid-template-rows:repeat(3, 1fr);
    }
  }

  @media (max-width: 480px){
    .site-wrapper{ padding:12px; }
    .header-section{ min-height:170px; border-radius:20px; }
    .home-btn{ width:38px; height:38px; }
    .home-btn svg{ width:18px; height:18px; }
    .header-title{ font-size:24px; }
    .about-content p{ font-size:14px; }
    .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
    .teacher-card h3{ font-size:12px; }
    .awards-section{ min-height:120px; border-radius:20px; gap:12px; }
    .award-item{ width:80px; height:80px; border-radius:14px; }
  }