/* === Base Reset === */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#0b0b0b;
  color:#e8d7a9;
  font-family:'Noto Naskh Arabic','Vazirmatn',Tahoma,Arial,sans-serif;
  line-height:1.8;
  overflow-x:hidden;
}

/* === Links === */
a{color:#d4af37;text-decoration:none}
a:hover{color:#f6da77}

/* === Header === */
header.main-header{
  padding:0.8rem 1rem; /* کمتر شد برای فشرده‌تر */
  text-align:center;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(212,175,55,0.25);
}
.logo{width:80px;height:auto;display:block;margin:0.4rem auto 0.4rem auto}
header.main-header h1{
  margin:.2rem 0;
  font-weight:800;
  color:#f0e2b2;
}
header.main-header p{
  margin:0;
  color:#d4af37;
  font-size:0.95rem;
}

/* === Navigation === */
nav{
  margin-top:0.4rem;
  display:inline-block;
  border-radius:12px;
}
nav a{
  margin:0 .55rem;
  font-weight:700;
  padding:6px 10px;
  border-radius:10px;
  color:#bfbfbf;
  transition:all .25s ease-in-out;
}
nav a.active{
  color:#d4af37;
  background:rgba(212,175,55,0.08);
  border:1px solid rgba(212,175,55,0.25);
  box-shadow:0 0 10px rgba(212,175,55,0.35);
}
nav a:hover{
  color:#d4af37;
  background:rgba(212,175,55,0.12);
  box-shadow:0 0 14px rgba(212,175,55,0.45);
}

/* === Hero Section === */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('/media/images/portraits/khosronazari.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,11,11,0.25), rgba(11,11,11,0.85));
  z-index: 1;
}

.hero h2,
.hero p,
.hero .btn-gold {
  position: relative;
  z-index: 2;
}

.hero h2 {
  margin-top: 0;
  color: #f6e7b9;
  text-shadow: 0 0 10px rgba(212,175,55,0.3);
}

.hero p {
  max-width: 700px;
  text-align: center;
  padding: 0 1rem;
  color: rgba(255,255,255,0.9);
}


/* === Buttons === */
.btn-gold{
  display:inline-block;
  background:#d4af37;
  color:#121212;
  padding:.8rem 1.4rem;
  border-radius:26px;
  font-weight:800;
  transition:.3s;
}
.btn-gold:hover{
  background:#f6da77;
  color:#121212;
  box-shadow:0 0 20px rgba(212,175,55,0.45);
}

/* === Content Grid & Cards === */
.content-grid{
  margin:1.6rem auto;
  padding:0 1rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.6rem;
}
.card{
  background:rgba(11,11,11,0.4);
  border:1px solid rgba(212,175,55,0.25);
  border-radius:12px;
  backdrop-filter:blur(8px);
  padding:1.5rem;
  box-shadow:0 0 26px rgba(212,175,55,0.12);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 0 30px rgba(212,175,55,0.25);
}
.card h3{
  margin-top:.4rem;
  color:#f6e7b9;
}
.card p{color:#e8d7a9}

/* === Inputs, Playlist, Audio === */
input[type="text"],input[type="search"]{
  width:100%;
  max-width:560px;
  margin:1rem auto;
  padding:.7rem 1rem;
  border-radius:10px;
  border:1px solid rgba(212,175,55,.25);
  background:rgba(255,255,255,.04);
  color:#f6e7b9;
}
ul#playlist{
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:720px;
}
ul#playlist li{
  padding:.6rem 1rem;
  margin:.25rem 0;
  border:1px solid rgba(212,175,55,.15);
  border-radius:10px;
  cursor:pointer;
  background:rgba(255,255,255,.03);
  transition:.25s;
}
ul#playlist li.active{
  background:rgba(212,175,55,.1);
  border-color:rgba(212,175,55,.35);
}
ul#playlist li:hover{
  background:rgba(212,175,55,0.08);
}
.audio-wrap{margin:1rem auto;text-align:center}
audio{width:100%;max-width:720px}

/* === Education / Workshop Section === */
.education.glass{
  margin:2.5rem auto 1rem;
  padding:2rem 1.5rem;
  border-radius:16px;
  background:rgba(11,11,11,0.45);
  backdrop-filter:blur(12px);
  border:1px solid rgba(212,175,55,0.3);
  box-shadow:0 0 24px rgba(212,175,55,0.15);
  text-align:center;
  max-width:850px;
}
.education.glass h3{
  color:#d4af37;
  font-weight:700;
  margin-bottom:1rem;
}
.education.glass p{
  color:rgba(255,255,255,0.85);
  line-height:1.9;
  font-size:1rem;
}
.education.glass strong{
  color:#f1e3a3;
}

.btn-download {
  display: inline-block;  
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  color: #0b0b0b;
  background: #d4af37;
  border-radius: 28px;
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 0 8px rgba(212,175,55,.25);
}
.btn-download:hover {
  background: #f2d675;
  box-shadow: 0 0 16px rgba(212,175,55,.45);
  transform: translateY(-2px);
  color:#0b0b0b;
}
.audio-wrap{
  margin:1rem auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
}
audio{flex:1;max-width:720px}
.btn-download{white-space:nowrap}



/* === Footer === */
.site-footer{
  text-align:center;
  padding:1rem;
  margin-top:2rem;
  border-top:1px solid rgba(212,175,55,.25);
  background:rgba(212,175,55,.05);
  font-size:0.95rem; /* فشرده‌تر شد */
}
.site-footer p{margin:0.4rem 0;color:#d4af37}
.site-footer a{
  color:#d4af37;
  text-decoration:none;
}
.site-footer a:hover{
  text-shadow:0 0 8px #d4af37;
}

.footer-summary{
  margin-top:0.8rem;
  color:rgba(212,175,55,0.75);
  font-size:0.9rem;
  line-height:1.8;
  text-align:center;
}


/* === Responsive === */
@media(max-width:768px){
  header.main-header{padding:0.6rem}
  .hero{padding:1.2rem;min-height:60vh}
  .btn-gold{width:100%;max-width:280px}
  nav a{display:inline-block;margin:.2rem auto}
  .container {
    margin-top: 5px;
    max-width: 99%;
    padding: 0 0.5rem;
  }
  .card{
    padding: 0 !important;
  }
}



/* === Gallery Section === */
.gallery-container{
  margin-top:3.5rem; /* فاصله از هدر */
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.6rem;
  padding:2rem 1rem;
}

figure.glass{
  background:rgba(11,11,11,0.5);
  border:1px solid rgba(212,175,55,0.25);
  border-radius:14px;
  backdrop-filter:blur(10px);
  box-shadow:0 0 26px rgba(212,175,55,0.15);
  padding:1rem;
  text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
figure.glass:hover{
  transform:translateY(-4px);
  box-shadow:0 0 32px rgba(212,175,55,0.25);
}
figure.glass img{
  width:100%;
  height:auto;
  border-radius:12px;
  margin-bottom:.6rem;
}
figure.glass figcaption{
  color:#d4af37;
  font-weight:600;
  font-size:.95rem;
}


/* === Video Player in Gallery section === */
.video-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:1.5rem auto;
  text-align:center;
}

.video-wrapper{
  width:560px;          /* اندازه ثابت دسکتاپ */
  max-width:90vw;       /* برای موبایل منعطف */
  border:1px solid rgba(212,175,55,0.3);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 20px rgba(212,175,55,0.15);
}
.video-wrapper video{
  width:100%;
  display:block;
  border:none;
}

.video-player {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 18px;
  background: rgba(10,10,10,0.7);
  box-shadow: 0 0 25px rgba(212,175,55,0.15);
  text-align: center;
}

.video-player video{
  border:1px solid rgba(212,175,55,0.3);
  border-radius:10px;
  box-shadow:0 0 15px rgba(212,175,55,0.15);
}
.video-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:center;
  padding:0;
}
.video-list li{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(212,175,55,0.3);
  color:#f7f7f7;
  padding:.5rem 1rem;
  border-radius:10px;
  cursor:pointer;
  transition:all .3s;
}
.video-list li:hover,
.video-list li.active {
  background:#d4af37;
  color:#0b0b0b;
  font-weight:700;
}

#videoDownloadBtn{
  margin-top: 15px;
}

@media(max-width:768px){
  .video-wrapper{width:340px;max-width:95vw;}
}