:root {
  --primary-color: #9c1919;
  --secondary-color: #860b00;
  --background-dark: #000000;
  --text-light: #e0e0e0;
  --text-muted: #aaaaaa;
  --card-background: rgba(255, 255, 255, 0.05);
  --card-shadow: rgba(255, 126, 252, 0.15);
  --card-hover-shadow: rgb(117, 10, 10);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  line-height: 1.7;
  background: var(--background-dark);
  color: var(--text-light);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.stars, .stars2, .stars3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  z-index: -1;
  
}

.stars {
  box-shadow:
    100px 200px white, 500px 300px white, 800px 100px white, 200px 400px white,
    600px 700px white, 300px 900px white, 900px 1200px white, 400px 150px white,
    750px 550px white, 150px 1050px white, 950px 950px white, 1200px 350px white,
    50px 50px white, 250px 250px white, 1050px 950px white, 650px 1150px white,
    1300px 200px white, 1400px 800px white;
  animation: animStar 50s linear infinite, twinkle 2s ease-in-out infinite;
}

.stars2 {
  box-shadow:
    50px 150px white, 250px 450px white, 650px 250px white, 850px 850px white,
    150px 750px white, 450px 50px white, 950px 300px white, 700px 650px white,
    1050px 150px white, 350px 1150px white, 150px 350px white, 1150px 750px white,
    550px 950px white, 800px 400px white, 1250px 600px white, 1350px 100px white;
  animation: animStar 100s linear infinite, twinkle 3s ease-in-out infinite;
}

.stars3 {
  box-shadow:
    80px 80px white, 380px 380px white, 580px 180px white, 780px 780px white,
    180px 580px white, 480px 980px white, 880px 880px white, 1180px 680px white,
    220px 820px white, 1020px 420px white, 620px 220px white, 820px 1020px white,
    1320px 720px white, 1420px 320px white;
  animation: animStar 150s linear infinite, twinkle 4s ease-in-out infinite;
}

@keyframes animStar {
  from {transform: translateY(0);}
  to {transform: translateY(-2000px);}
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes float {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-20px);}
}

header {
  position: fixed;
  width: 100%;
  padding: 1rem 2rem;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(5px);
}

header h1 {
  color: white;
  font-size: 1.8rem;
}

header nav a {
  color: var(--text-light);
  margin-left: 1.5rem;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 1.1rem;
  position: relative;
}

header nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  right: 0;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

header nav a:hover {
  color: var(--primary-color);
}

header nav a:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

.hero {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  z-index: 10;
}

.hero-content h2 {
  font-size: 3rem;
  color: white;
  margin-bottom: 0.5rem;
}

.hero-content p {
  font-size: 1.3rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.hero img {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); /*...............................................................................*/
  animation: float 4s ease-in-out infinite;
  margin-bottom: 1.5rem;
}

.btn-primary {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: white !important;
  text-decoration: none;
  border-radius: 25px;
  font-size: 1.1rem;
  margin-top: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 15px rgba(193, 53, 132, 0.4);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(193, 53, 132, 0.6);
}

section {
  padding: 5rem 0;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

section h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: white;
  position: relative;
  padding-bottom: 1rem;
}

section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}

section p {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1.5rem;
}

#about {
  background-color: rgba(0,0,0,0.3);
}

.about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}

.about-content .bio {
  flex: 1;
  min-width: 300px;
  text-align: right;
}

.about-content .bio p {
  text-align: right;
  font-size: 1.2rem;
  color: var(--text-light);
  margin-bottom: 1.2rem;
}

.about-content .hero-image-container {
  flex-basis: 300px;
  flex-shrink: 0;
  text-align: center;
}
.about-content-link {
  display: inline-block;
}

.about-content .hero-image-container img {
  width: 100%;
  max-width: 250px;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px var(--primary-color));
  animation: float 4s ease-in-out infinite;
}

.skills {
  text-align: center;
  margin-top: 3rem;
}

.skills h3 {
  color: white;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  text-align: center;
}

.skill-item {
  background: var(--card-background);
  padding: 1.5rem;
  border-radius: 10px;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.skill-item:hover {
  transform: translateY(-8px);
  background: rgba(255,126,252,0.1);
  box-shadow: 0 10px 25px var(--card-shadow);
}

.skill-item img {
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 10px var(--primary-color));
}

.skill-item h4 {
  color: white;
  margin-bottom: 0.8rem;
  font-size: 1.5rem;
}

.skill-item p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 1rem;
}

.progress-bar div {
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 4px;
  transition: width 1s ease-in-out;
}

#works {
  background-color: rgba(0,0,0,0.4);
}

.portfolio-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.portfolio-item {
  background: var(--card-background);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(255,255,255,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
}

.portfolio-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px var(--card-hover-shadow);
}

.portfolio-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.portfolio-content {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.portfolio-item h3 {
  margin: 0;
  color: white;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.portfolio-item p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  flex-grow: 1;
  text-align: right;
}

.btn-details {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: white !important;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-size: 0.9rem;
  box-shadow: 0 3px 10px rgba(193, 53, 132, 0.3);
}

.btn-details:hover {
  opacity: 0.85;
  transform: translateY(-2px);
  color: white !important;
}


#contact {
  padding: 5rem 0;
  text-align: center;
}

#contact h2 {
  text-align: center;
}

#contact p {
  text-align: center;
}

.btn-youtube {
  display: inline-block;
  margin: 2rem auto;
  padding: 1rem 2.5rem;
  background: #FF0000;
  color: white !important;
  text-decoration: none;
  border-radius: 30px;
  font-size: 1.2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 20px rgba(255,0,0,0.5);
}

.btn-youtube:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(255,0,0,0.7);
}


footer {
  text-align: center;
  padding: 2.5rem;
  background: rgba(0,0,0,0.7);
  font-size: 0.9rem;
  color: var(--text-muted);
  position: relative;
  z-index: 10;
}

footer p {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}


/* --- Responsive Design --- */
@media (max-width: 1024px) {
  header nav a {
    margin-left: 1rem;
    font-size: 1rem;
  }
  .hero-content h2 {
    font-size: 2.5rem;
  }
  .hero-content p {
    font-size: 1.1rem;
  }
  .btn-primary {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
  }
  section h2 {
    font-size: 2.2rem;
  }
  .portfolio-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    padding: 1rem;
  }
  header h1 {
    margin-bottom: 0.5rem;
  }
  header nav {
    margin-top: 0.5rem;
  }
  .hero {
    min-height: auto;
    padding-top: 8rem;
  }
  .hero-content h2 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .about-content {
    flex-direction: column-reverse;
  }
  .about-content .bio {
    text-align: center;
    margin-bottom: 2rem;
  }
  .about-content .bio p {
    text-align: center;
    font-size: 1.1rem;
  }
  .about-content .hero-image-container {
    margin-bottom: 2rem;
  }
  .about-content .hero-image-container img {
    max-width: 180px;
  }
  .skills h3 {
    font-size: 1.8rem;
  }
  .portfolio-container {
    grid-template-columns: 1fr;
  }
  .btn-youtube {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  header nav a {
    margin: 0 0.5rem;
    font-size: 0.9rem;
  }
  .hero img {
    width: 150px;
    height: 150px;
  }
  .hero-content h2 {
    font-size: 1.8rem;
  }
  .hero-content p {
    font-size: 0.95rem;
  }
  section h2 {
    font-size: 2rem;
  }
  section p {
    font-size: 1rem;
  }
  .skill-item {
    padding: 1rem;
  }
  .skill-item h4 {
    font-size: 1.3rem;
  }
  .portfolio-item h3 {
    font-size: 1.2rem;
  }
  .btn-youtube {
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
  }
}

img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}


@media (max-width: 768px) {
  header {
     flex-direction: column;
     padding: 1rem;
  }
  .site-logo {
    height: 50px;
    margin-bottom: 0.5rem;
  }
  header nav {
      margin-top: 0.8rem;
  }
  header nav a {
      margin: 0 0.7rem;
  }
}

.hero-main-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 50%;
  animation: float 4s ease-in-out infinite;
  margin: 0 auto 1.5rem auto;
  display: block;
}

@media (max-width: 1024px) {

  header nav a {
    margin-left: 1rem;
    font-size: 1rem;
  }

  .hero-content h2 {
    font-size: 2.4rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }

  .portfolio-container {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (max-width: 768px) {

  .container {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    text-align: center;
  }

  header {
    text-align: center;
  }

  header nav {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  header nav a {
    margin: 0 10px;
  }

  .hero {
    text-align: center;
  }

  .hero-main-image,
  .hero img {
    margin: 0 auto !important;
    display: block !important;
  }

  .about-content {
    text-align: center;
  }

  .about-content .bio {
    text-align: center;
  }

  .about-content .hero-image-container {
    text-align: center;
  }

  .portfolio-container {
    margin: 0 auto;
  }

  .portfolio-item {
    margin: 0 auto;
  }
}

@media (max-width: 480px) {

  .container {
    padding: 0 15px;
  }

  header nav a {
    margin: 0 6px;
  }

  .hero-main-image,
  .hero img {
    margin: 0 auto !important;
  }
}


img {
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

[data-aos] {
  opacity: 0;
  transition: all 0.8s ease;
}

[data-aos].aos-exit {
  opacity: 0;
  transform: translateY(40px);
}

[data-aos] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos].in-view {
  opacity: 1;
  transform: translateY(0);
}

[data-aos].out-up {
  opacity: 0;
  transform: translateY(-40px);
}

[data-aos].out-down {
  opacity: 0;
  transform: translateY(40px);
}

.blog-wrapper {
  padding-top: 120px;
  padding-bottom: 80px;
}

.blog-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.blog-search input {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  color: #fff;
  min-width: 220px;
}

.blog-search input::placeholder {
  color: rgba(255,255,255,0.5);
}

.blog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cat-btn {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: 0.2s;
}

.cat-btn:hover,
.cat-btn.active {
  border-color: #f5c542;
  color: #f5c542;
}

.blog-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr);
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
  background: rgba(0,0,0,0.6);
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
}

.blog-featured img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.featured-content .badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: #f5c542;
  color: #000;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.featured-content h2 {
  margin: 0.3rem 0 0.7rem;
}

.featured-content p {
  color: rgba(255,255,255,0.8);
}

.featured-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin: 0.8rem 0 1rem;
}

.blog-list h2 {
  margin-bottom: 1.5rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 1rem;
}

@media (max-width: 992px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  background: rgba(0,0,0,0.6);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: #f5c542;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.blog-card-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  padding: 1rem 1.1rem 1.2rem;
}

.blog-card-body h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.blog-card-body h3 a {
  color: #fff;
  text-decoration: none;
}

.blog-card-body h3 a:hover {
  color: #f5c542;
}

.blog-card-body p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.7rem;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.5rem;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.75rem;
}

.blog-tags span {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
}

.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.page-btn {
  background: rgba(0,0,0,0.6);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.4rem 0.9rem;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: 0.2s;
}

.page-btn:hover {
  border-color: #f5c542;
  color: #f5c542;
}

.page-btn.active {
  background: #f5c542;
  color: #000;
  border-color: #f5c542;
}

.page-btn.disabled {
  opacity: 0.4;
  cursor: default;
}

/* ===== BLOG PAGE ===== */

.blog-wrapper {
  padding: 40px 0 80px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.search input {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: #fff;
  min-width: 220px;
}

.categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cat-btn {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.cat-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* Featured Post */
.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.featured img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 10px;
}

.featured h2 {
  margin: 0 0 10px 0;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.page-btn {
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}

.page-btn.active {
  background: var(--accent);
  color: #000;
}

html, body {
  margin: 0;
  padding: 0;
}

.site-header {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);

  margin: 0;      /* مهم */
  padding: 0;     /* مهم */
  height: 65px;   /* هدر کوچک */
  display: flex;
  align-items: center;
}





body {
  margin: 0;
  padding: 0;
}

.blog-wrapper {
  padding-top: 70px; /* محتوا پایین میره، هدر تکون نمی‌خوره */
}



.header-inner {
  max-width: 1200px;
  margin: auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.brand-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
}

.nav ul {
  display: flex;
  gap: 25px;
  list-style: none;
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: 0.2s;
}

.nav a:hover {
  color: #00eaff;
}

/* Mobile */
.menu-toggle {
  display: none;
  font-size: 1.8rem;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav ul {
    position: absolute;
    top: 70px;
    right: 0;
    background: rgba(0,0,0,0.85);
    width: 200px;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
    display: none;
  }

  .nav ul.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

/* ============================
   دسته‌بندی‌ها (نسخه نهایی)
   ============================ */

.categories {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.cat-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  transition: 0.25s ease;
  backdrop-filter: blur(8px);
  letter-spacing: 0.3px;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.15);
}

.cat-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffcc00;
  color: #ffcc00;
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.4);
}

.cat-btn.active {
  background: #ffcc00;
  color: #000;
  border-color: #ffcc00;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
}

/* ============================
   صفحه‌بندی (۱،۲،۳)
   ============================ */

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

.page-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 14px;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  transition: 0.25s ease;
  backdrop-filter: blur(8px);
}

.page-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffcc00;
  color: #ffcc00;
  transform: translateY(-2px);
}

.page-btn.active {
  background: #ffcc00;
  color: #000;
  border-color: #ffcc00;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
}

.blog-wrapper a {
  color: inherit;
  text-decoration: none;
}

.blog-wrapper a:hover {
  color: #ffcc00;
  text-decoration: none;
}

/* ============================================
   📱 موبایل (تا 600px)
   ============================================ */
@media (max-width: 600px) {

  body {
    overflow-x: hidden;
  }

  .container {
    width: 100%;
    padding: 0 15px;
  }

  /* هدر */
  .site-header {
    padding: 10px 0;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .brand-title {
    font-size: 18px;
  }

  /* سرچ و دسته‌بندی */
  .topbar {
    flex-direction: column;
    gap: 10px;
  }

  .search input {
    width: 100%;
    font-size: 14px;
    padding: 10px;
  }

  .categories {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 5px;
  }

  .categories::-webkit-scrollbar {
    display: none;
  }

  /* Featured */
  #featured {
    margin-bottom: 20px;
  }

  /* گرید پست‌ها */
  .posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* پست‌ها */
  .post-card {
    padding: 15px;
  }

  .post-card img {
    width: 100%;
    height: auto;
  }

  /* صفحه‌بندی */
  .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .pagination button {
    padding: 6px 10px;
    font-size: 14px;
  }

  /* فوتر */
  .footer {
    text-align: center;
    padding: 20px 0;
  }
}

/* ============================================
   📱📲 تبلت و آیپد (600px تا 900px)
   ============================================ */
@media (min-width: 600px) and (max-width: 900px) {

  .container {
    width: 100%;
    padding: 0 25px;
  }

  .brand-logo {
    width: 50px;
    height: 50px;
  }

  .brand-title {
    font-size: 22px;
  }

  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .search input {
    width: 250px;
    padding: 10px;
  }

  .categories {
    display: flex;
    gap: 12px;
    overflow-x: auto;
  }

  .posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .post-card img {
    width: 100%;
    height: auto;
  }

  .pagination {
    justify-content: center;
  }
}

/* ============================================
   💻 لپ‌تاپ کوچک (900px تا 1200px)
   ============================================ */
@media (min-width: 900px) and (max-width: 1200px) {

  .container {
    width: 90%;
  }

  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   📱 تایپوگرافی Featured — موبایل (تا 600px)
   ============================================ */
@media (max-width: 600px) {

  #featured .post-title {
    font-size: 17px !important;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
  }

  #featured .post-excerpt {
    font-size: 13px !important;
    line-height: 1.8;
    text-align: center;
    opacity: 0.9;
  }

  #featured .post-meta {
    font-size: 11px !important;
    text-align: center;
    opacity: 0.7;
  }

  #featured .btn-read {
    font-size: 13px !important;
    padding: 8px 0;
  }
}

/* ============================================
   📲 تایپوگرافی Featured — تبلت و آیپد (600px تا 900px)
   ============================================ */
@media (min-width: 600px) and (max-width: 900px) {

  #featured .post-title {
    font-size: 20px !important;
    line-height: 1.5;
    font-weight: 700;
  }

  #featured .post-excerpt {
    font-size: 14px !important;
    line-height: 1.9;
    opacity: 0.9;
  }

  #featured .post-meta {
    font-size: 12px !important;
    opacity: 0.75;
  }

  #featured .btn-read {
    font-size: 14px !important;
    padding: 9px 18px;
  }
}

/* ============================================
   📌 دسته‌بندی‌ها — نسخه پایدار برای همه دستگاه‌ها
   ============================================ */

.categories {
  display: flex;
  flex-wrap: nowrap;          /* جلوگیری از شکستن */
  overflow-x: auto;           /* اسکرول افقی شیک */
  gap: 10px;
  padding: 8px 0;
  scrollbar-width: none;      /* حذف اسکرول در فایرفاکس */
}

.categories::-webkit-scrollbar {
  display: none;              /* حذف اسکرول در کروم/سافاری */
}

.categories button,
.categories .category-item {
  white-space: nowrap;        /* جلوگیری از شکستن متن */
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 10px;
  flex-shrink: 0;             /* جلوگیری از فشرده شدن */
}

/* ============================================
   📱 موبایل (تا 600px)
   ============================================ */
@media (max-width: 600px) {

  .categories {
    gap: 8px;
    padding-bottom: 6px;
  }

  .categories button,
  .categories .category-item {
    font-size: 13px;
    padding: 7px 12px;
  }
}

/* ============================================
   📲 تبلت و آیپد (600px تا 900px)
   ============================================ */
@media (min-width: 600px) and (max-width: 900px) {

  .categories {
    gap: 12px;
  }

  .categories button,
  .categories .category-item {
    font-size: 14px;
    padding: 8px 14px;
  }
}

/* ============================================
   📱 موبایل — سرچ همیشه زیر دسته‌بندی‌ها
   ============================================ */
@media (max-width: 600px) {

  .topbar {
    display: flex;
    flex-direction: column-reverse; /* جابه‌جایی ترتیب */
    gap: 12px;
    width: 100%;
  }

  .categories {
    order: 1;
  }

  .search {
    order: 2;
    width: 100%;
  }

  .search input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ============================================
   📲 تبلت و آیپد — سرچ زیر دسته‌بندی‌ها
   ============================================ */
@media (min-width: 600px) and (max-width: 900px) {

  .topbar {
    display: flex;
    flex-direction: column-reverse; /* سرچ پایین */
    gap: 15px;
  }

  .search input {
    width: 100%;
    padding: 12px;
    font-size: 15px;
  }
}

/* ============================================
   📱 موبایل — سرچ همیشه دیده شود و زیر دسته‌بندی‌ها باشد
   ============================================ */
@media (max-width: 600px) {

  .topbar {
    display: flex;
    flex-direction: column; /* ترتیب طبیعی */
    width: 100%;
    gap: 12px;
  }

  /* دسته‌بندی‌ها بالا */
  .categories {
    order: 1;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 5px;
  }

  .categories::-webkit-scrollbar {
    display: none;
  }

  /* سرچ پایین */
  .search {
    order: 2;
    width: 100%;
    display: block;
  }

  .search input {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border-radius: 10px;
    box-sizing: border-box;
    display: block;
  }
}

/* ============================================
   📲 تبلت و آیپد — سرچ زیر دسته‌بندی‌ها
   ============================================ */
@media (min-width: 600px) and (max-width: 900px) {

  .topbar {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
  }

  .categories {
    order: 1;
  }

  .search {
    order: 2;
    width: 100%;
  }

  .search input {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 10px;
    box-sizing: border-box;
  }
}

/* ============================================
   📱 موبایل — دسته‌بندی‌ها زیر هدر + سرچ زیر دسته‌بندی
   ============================================ */
@media (max-width: 600px) {

  /* فاصله بین هدر و topbar */
  .topbar {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  /* دسته‌بندی‌ها همیشه بالا */
  .categories {
    order: 1;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 5px;
  }

  .categories::-webkit-scrollbar {
    display: none;
  }

  /* سرچ همیشه پایین */
  .search {
    order: 2;
    width: 100%;
  }

  .search input {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border-radius: 10px;
    box-sizing: border-box;
  }
}

/* ============================================
   📲 تبلت و آیپد — همان رفتار موبایل
   ============================================ */
@media (min-width: 600px) and (max-width: 900px) {

  .topbar {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
  }

  .categories {
    order: 1;
  }

  .search {
    order: 2;
    width: 100%;
  }

  .search input {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 10px;
    box-sizing: border-box;
  }
}

/* فاصله‌ی ثابت بین هدر و topbar برای همه دستگاه‌ها */
.site-header {
  position: relative;
  z-index: 10;
}

.topbar {
  margin-top: 25px; /* فاصله‌ی واقعی و ثابت */
}

/* موبایل */
@media (max-width: 600px) {

  .topbar {
    margin-top: 35px !important; /* فاصله بیشتر برای موبایل */
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .categories {
    order: 1;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
  }

  .categories::-webkit-scrollbar {
    display: none;
  }

  .search {
    order: 2;
    width: 100%;
  }

  .search input {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border-radius: 10px;
    box-sizing: border-box;
  }
}

/* تبلت و آیپد */
@media (min-width: 600px) and (max-width: 900px) {

  .topbar {
    margin-top: 40px !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .categories {
    order: 1;
  }

  .search {
    order: 2;
    width: 100%;
  }

  .search input {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 10px;
    box-sizing: border-box;
  }
}