/* شروع قسمت صفحه اصلی */
html{
scroll-behavior:smooth;
}

:root{
  --bg:#020617;
  --bg-soft:#0f172a;
  --surface:rgba(15,23,42,0.75);
  --surface-solid:#111827;
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.7);
  --muted:#94a3b8;
  --border: rgba(255, 255, 255, 0.1);
  --primary: #007aff; /* یا هر رنگی که در سایت دوستت است */
  --primary-2: #00c6ff;
  --shadow: 0 10px 25px rgba(0,0,0,0.14);
  --image-filter:none;
}

body.light-mode{
  --bg:#f8fafc;
  --bg-soft:#e2e8f0;
  --surface:rgba(255,255,255,0.88);
  --surface-solid:#fff;
  --text: #1d1d1f;
  --text-soft: #86868b;
  --muted:#475569;
  --border: rgba(0, 0, 0, 0.1);
  --primary:#0ea5e9;
    --primary-2:#0284c7;  /* این رو هم اضافه کن */
  --shadow:0 10px 30px rgba(15,23,42,0.10);
  --image-filter:none;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:tahoma, Arial, sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  transition:background .35s ease, color .35s ease;
}

#progress-bar{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg,var(--primary),#06b6d4);
  z-index:9999;
}

header{
  position:fixed;
  top:0;
    right: 0;
  width:100%;
  z-index:1000;
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
  background: transparent;
}

/* برای حالت دارک (اصلی) */
header.scrolled {
  background: rgba(6, 17, 31, 0.2); /* از 0.45 به 0.2 تغییر کرد تا شفاف‌تر شود */
  backdrop-filter: blur(4px);      /* از 16px به 8px تغییر کرد تا بلوری کمتر شود */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* کمی سایه ملایم‌تر */
}

/* برای حالت لایت */
body.light-mode header.scrolled {
  background: rgba(255, 255, 255, 0.3); /* از 0.65 به 0.3 تغییر کرد */
  backdrop-filter: blur(4px);           /* اینجا هم بلوری را کم کردیم */
}



.nav-container{
  width:min(1180px,calc(100% - 32px));
  margin:auto;
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}


.logo{
  font-size:24px;
  font-weight:700;
}


nav{
  display:flex;
  align-items:center;
  gap:22px;
}


nav a{
  position:relative;
  text-decoration:none;
  color:var(--text-soft);
  font-size:15px;
  transition:color .3s ease;
}

nav a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-8px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  transition:width .3s ease;
}

nav a:hover,
nav a.active{
  color:var(--text);
}

nav a:hover::after,
nav a.active::after{
  width:100%;
}


#hamburger{
  width:46px;
  height:46px;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

#hamburger span{
  width:22px;
  height:2px;
  border-radius:999px;
  background:var(--text);
  transition:.3s ease;
}


#mobileMenu{
  position:fixed;
  top:84px;
  left:50%;
  transform:translate(-50%,-10px);
  width:calc(100% - 32px);
  max-width:420px;

  z-index:999;
  padding:16px;
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(7,19,35,0.72);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;

  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}

body.light-mode #mobileMenu{
  background:rgba(255,255,255,0.82);
}

#mobileMenu.active{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}


#mobileMenu a{
  text-decoration:none;
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
}

#mobileMenu a:hover{
  background:rgba(255,255,255,0.06);
}


.hero{
  min-height:100svh;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .2s ease;
  will-change:transform;
}

.hero-content{
  position:relative;
  z-index:100;
  width:95%;
  max-width:1600px;
  margin:auto;
  transform:translateZ(40px);
  transform-style:preserve-3d;
}

.hero h1{
  font-size:60px;
  margin-bottom:20px;
  position:relative;
  display:inline-block;
  color:var(--text);
  text-shadow:
    1px 1px 0 var(--primary),
    2px 2px 0 var(--primary),
    3px 3px 0 var(--primary),
    4px 4px 0 var(--primary),
    5px 5px 0 rgba(56,189,248,0.85),
    6px 6px 10px rgba(0,0,0,0.25);
}

.hero p{
  max-width:900px;
  margin:auto;
  line-height:2.1;
  color:var(--text);
  text-shadow:
  1px 1px 0 rgba(56,189,248,0.18),
  2px 2px 6px rgba(0,0,0,0.22);
  font-size:clamp(16px,1.2vw,18px);
}


#hero3d{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#network{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-2;
}

#cursor{
  position:fixed;
  top:0;
  left:0;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(0,150,255,0.2);
  backdrop-filter:blur(5px);
  pointer-events:none;
  transform:translate(-50%, -50%);
  z-index:9999;
}

#cursor-dot{
  position:fixed;
  top:0;
  left:0;
  width:6px;
  height:6px;
  background:var(--primary);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%, -50%);
  z-index:9999;
}

#loader{
  position:fixed;
  width:100%;
  height:100%;
  background:var(--bg);
  z-index:99999;
  animation:fadeOut 1s 1s forwards;
}

@keyframes fadeOut{
  to{
    opacity:0;
    visibility:hidden;
  }
}

section{
  min-height:100dvh;
  padding:120px 20px;
}


.header-actions{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:15px;
}

section,header,nav,footer,.card,.project-card,.service-card,.skill-card,.about-card,.contact-card,.timeline-item,.form-box,input,textarea,select,button{
  transition:
    background .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

body,p,li,span,small,label,input,textarea,select,blockquote{
  color:var(--text-soft);
}

h1,h2,h3,h4,h5,h6,.logo,.brand,.hero h1{
  color:var(--text);
}

a{
  color:var(--primary);
}

.glass,.card,.project-card,.service-card,.skill-card,.about-card,.contact-card,.timeline-item,.stat-box,.info-box,form,input,textarea,select{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

input,textarea,select{
  background:var(--surface-solid);
  color:var(--text);
  border:1px solid var(--border);
}

input::placeholder,textarea::placeholder{
  color:var(--muted);
}

img,svg,canvas,video{
  transition:filter .95s ease,opacity .95s ease;
  filter:var(--image-filter);
}

body.light-mode .icon,body.light-mode .social-icon,body.light-mode img.logo-icon{
  filter:brightness(0.9) contrast(1.05);
}

.theme-toggle{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  cursor:pointer;
  box-shadow:var(--shadow);
}
/* dark mode toggle — match friend */
#darkToggle{
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  min-width: 46px;
  min-height: 46px;
  font-size: 18px;
  box-shadow: var(--shadow);
  padding: 0;            /* مهم: ظاهر مربعی/آیکونی */
  display: inline-grid;  /* اختیاری ولی خوش‌فرم‌تر */
  place-items: center;   /* مرکز کردن آیکن */
}


@media(max-width:900px){
  nav{
    display:none;
  }
  #hamburger{
    display:flex;
    order:3;
  }
  .hero h1{
    font-size:40px;
  }
  
.nav-container{
  min-height:76px;
  width:min(100%,calc(100% - 24px));
}

#darkToggle{
  order:2;
}
}

#darkToggle{
  position: relative;
  overflow: visible;
  transition: box-shadow .25s ease;
}

/* light mode (sun glow) */
#darkToggle:hover{
  box-shadow:
    0 0 10px rgba(255,200,80,0.7),
    0 0 22px rgba(255,170,40,0.5),
    0 0 40px rgba(255,150,20,0.35);
}

/* dark mode (moon glow) */
body.light-mode #darkToggle:hover{
  box-shadow:
    0 0 10px rgba(120,180,255,0.7),
    0 0 22px rgba(90,150,255,0.5),
    0 0 40px rgba(70,120,255,0.35);
}

#darkToggle::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  filter:blur(6px);
  transition:opacity .25s ease;
}

/* sun halo */
#darkToggle::after{
  background:radial-gradient(circle,
    rgba(255,210,90,0.9) 0%,
    rgba(255,170,40,0.6) 40%,
    rgba(255,140,0,0.25) 65%,
    transparent 75%);
}

/* moon halo */
body.light-mode #darkToggle::after{
  background:radial-gradient(circle,
    rgba(140,190,255,0.9) 0%,
    rgba(100,160,255,0.6) 40%,
    rgba(80,130,255,0.25) 65%,
    transparent 75%);
}

#darkToggle:hover::after{
  opacity:1;
  animation:glowPulse 1.6s ease-in-out infinite alternate;
}

@keyframes glowPulse{
  from{
    transform:scale(0.9);
    filter:blur(6px);
  }
  to{
    transform:scale(1.1);
    filter:blur(10px);
  }
}

#mobileMenu{
  text-align:center;
  align-items:center;
}

#mobileMenu a{
  width:100%;
  text-align:center;
}

nav{
  position:relative;
}

nav::before{
  content:"";
  position:absolute;
  bottom:-10px;
  height:26px;
  width:70px;
  left:0;
  opacity:0;
  pointer-events:none;
  border-radius:40px;
  background:radial-gradient(circle,
    rgba(0,122,255,0.35) 0%,
    rgba(0,122,255,0.18) 40%,
    transparent 70%);
  filter:blur(10px);
  transition:transform .35s ease, opacity .25s ease;
}

nav a:hover ~ nav::before{
  opacity:1;
}

#darkToggle:hover{
  transform:rotate(18deg) scale(1.05);
}

#hamburger:hover span:nth-child(1){
  transform:translateX(3px);
}

#hamburger:hover span:nth-child(2){
  transform:translateX(-3px);
}

#hamburger:hover span:nth-child(3){
  transform:translateX(3px);
}

.nav-spotlight{
  position:absolute;
  bottom:-10px;
  width:70px;
  height:70px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,
    rgba(56,189,248,0.35) 0%,
    rgba(56,189,248,0.18) 40%,
    transparent 70%);
  filter:blur(10px);
  transition:opacity .25s ease;
}

/* دکمه بازگشت به بالا - نسخه Ultra-Optimized و ظریف */
#scrollToTopBtn {
    position: fixed;
    bottom: 40px;
    right: -15px; /* تغییر: حالا دکمه بیشتر به بیرون چسبیده و ظریف‌تر شده */
    width: 30px;
    height: 45px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(56, 189, 248, 0.7);
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
    z-index: 9999;
    opacity: 0;
    
    transform: scale(0) translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: transform, opacity, right;

    pointer-events: none;
    overflow: visible;
    transition: 
        opacity 0.4s ease, 
        transform 0.4s ease, 
        right 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
        box-shadow 0.3s ease;
}

/* وقتی ظاهر می‌شود (حالت عادی) */
#scrollToTopBtn.show {
    opacity: 1;
    transform: scale(1) translate3d(0,0,0);
    pointer-events: auto;
}

/* وقتی ماوس روی آن می‌رود (حالت فعال) */
#scrollToTopBtn.show:hover {
    right: 5px; /* تغییر: دکمه فقط کمی وارد صفحه می‌شود تا به لبه نزدیک بماند */
    border-color: rgba(56, 189, 248, 1);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.8);
}

/* حلقه انرژی متحرک */
.energy-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 0, 0, 0.8) 90deg,
        transparent 180deg,
        rgba(255, 0, 0, 0.8) 270deg,
        transparent 360deg
    );
    filter: blur(2px); 
    opacity: 0.5;
    animation: spin 3s linear infinite;
    will-change: transform;
    pointer-events: none;
    z-index: -1;
}

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg) translate3d(0,0,0); }
    to   { transform: translate(-50%, -50%) rotate(360deg) translate3d(0,0,0); }
}

#scrollToTopBtn.show:hover .energy-ring {
    opacity: 0.9;
    filter: blur(1.5px);
    animation-duration: 1.8s;
}

/* فلش */
.arrow-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #38bdf8;
    font-size: 20px;
    pointer-events: none;
}

/* ظاهر شدن هر بخش به ارامی */
section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
section.visible {
  opacity: 1;
  transform: translateY(0);
}


/* نمایش لوگو در اول سایت */
#logo-loader{
  position:fixed;
  inset:0;
  background:var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands";
  z-index:99999;
  transition:opacity .6s ease;
  text-align:center;
}

.loader-center{
  text-align:center;
}

.loader-name{
  font-size:2.6rem;
  color:var(--primary);
  letter-spacing:2px;
  font-weight:700;
  animation:logoPulse 2.5s ease-in-out infinite;
}

#field-text{
  display:flex;
  align-items:center;
  justify-content:center;   /* وسط چین افقی */
  gap:10px;
  font-size:1.1rem;
  color:var(--text-soft);
  opacity:1;
  transition:opacity .2s ease;
  text-align:center;
}

.loader-fields{
  margin-top:14px;
  display:flex;
  justify-content:center;
}



/* آیکون */
#field-text i{
  font-size:1.2rem;
  color:var(--primary-2);
}


/* نمایش انیمیشن برای لوگو در اول سایت*/
@keyframes logoPulse{

  0%{
    transform:scale(1);
    filter:drop-shadow(0 0 6px var(--primary));
  }

  50%{
    transform:scale(1.08);
    filter:drop-shadow(0 0 22px var(--primary-2));
  }

  100%{
    transform:scale(1);
    filter:drop-shadow(0 0 6px var(--primary));
  }

}
/* دایره لود شونده برای لوگو اول سایت*/
.loader-progress{
  position:relative;
  width:60px;
  height:60px;
  margin-top:20px;
  margin:20px auto 0;
}

.progress-ring{
  transform:rotate(-90deg);
}

.progress-bg{
  fill:none;
  stroke:rgba(255,255,255,.15);
  stroke-width:4;
}

.progress-bar{
  fill:none;
  stroke:var(--primary);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:163;
  stroke-dashoffset:163;
  transition:stroke-dashoffset .3s linear;
}

.progress-check{
  position:absolute;
  top:50%;
  left:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:#22c55e;
  opacity:0;
  transform:translate(-50%,-50%) scale(.5);
  transition:.4s;
}

.progress-check.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.progress-percent{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:16px; /* اندازه مناسب برای دسکتاپ */
  font-weight:600;
  color:var(--text);
  transition:.2s;
  font-family:tahoma, Arial, sans-serif;
  direction:rtl;
}

/* تنظیم مخصوص موبایل */
@media (max-width:768px){
  .progress-percent{
    font-size:22px;
  }
}
/* پایان قسمت صفحه اصلی */


/* شروع قسمت درباره ی من */
.about-container{
max-width:1150px;
margin:auto;
}

/* =========================
ABOUT HERO GLASS CARD
========================= */

.about-hero{
display:grid;
grid-template-columns:280px 1fr;
gap:50px;
align-items:center;
margin-bottom:80px;

padding:40px;
border-radius:26px;

position:relative;
overflow:hidden;

/* glass system بهتر */
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.15);

backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);

box-shadow:
0 12px 40px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.08);

transition:.35s;
}


/* light reflection روی شیشه */
.about-hero::before{
content:"";
position:absolute;
inset:0;
border-radius:26px;

background:
linear-gradient(
135deg,
rgba(255,255,255,0.18),
rgba(255,255,255,0.04) 40%,
transparent 70%
),
radial-gradient(
circle at top left,
rgba(37,99,235,0.18),
transparent 45%
);

pointer-events:none;
}

/* hover */

.about-hero:hover{
transform:translateY(-4px);
box-shadow:
0 20px 40px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.12);
}

/* PHOTO */

.about-photo{
position:relative;
}

.about-photo img{
width:100%;
border-radius:20px;
border:1px solid var(--border);
box-shadow:var(--shadow);
}

.about-photo::after{
content:"";
position:absolute;
inset:-10px;
border-radius:25px;
background:radial-gradient(circle,
rgba(37,99,235,0.35),
transparent 70%);
filter:blur(20px);
z-index:-1;
animation:aura 6s infinite alternate;
}

@keyframes aura{
from{opacity:.4;transform:scale(.95);}
to{opacity:.8;transform:scale(1.05);}
}

/* INTRO */

.about-intro h3{
font-size:26px;
margin-bottom:18px;
}

.about-intro p{
line-height:2.1;
color:var(--text-soft);
margin-bottom:35px;
}

/* STATS */

.about-stats{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.stat-box{
padding:22px;
border-radius:16px;
background:var(--surface);
border:1px solid var(--border);
min-width:130px;
text-align:center;
transition:.3s;
}

.stat-box:hover{
transform:translateY(-6px);
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.stat-number{
font-size:30px;
font-weight:700;
color:var(--primary);
display:block;
}

.stat-label{
font-size:13px;
color:var(--text-soft);
}

.stat-box:hover .stat-number{
animation:pulse .6s;
}

@keyframes pulse{
0%{transform:scale(1);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}
}

/* TIMELINE */

.timeline{
position:relative;
margin:90px 0;
padding-right:30px;
margin-bottom:80px;
}

.timeline::before{
content:"";
position:absolute;
right:8px;
top:0;
width:3px;
height:100%;
background:linear-gradient(var(--primary),transparent);
opacity:.6;
}

.timeline-title{
font-size:28px;
margin-bottom:40px;
}

.timeline-item{
position:relative;
display:flex;
gap:20px;
padding:20px;
margin-bottom:25px;
background:var(--surface);
border:1px solid var(--border);
border-radius:16px;
transition:.3s;
opacity:0;
transform:translateY(30px);
}

.timeline-item::before{
content:"";
position:absolute;
right:-3px;
top:26px;
width:12px;
height:12px;
background:var(--primary);
border-radius:50%;
box-shadow:0 0 12px var(--primary);
}

.timeline-item.visible{
opacity:1;
transform:translateY(0);
}

.timeline-item:hover{
transform:translateX(-8px);
box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

/* SKILLS */

.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:16px;
}

.skill-card{
padding:16px;
border-radius:14px;
background:linear-gradient(
145deg,
rgba(255,255,255,0.06),
rgba(255,255,255,0.02)
);
z-index:0;

border:1px solid var(--border);

box-shadow:
0 8px 25px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.05);

display:flex;
align-items:center;
gap:12px;
position:relative;
overflow:hidden;

/* مهم: انتقال نرم حرفه‌ای */
transition:transform .35s ease, box-shadow .35s ease;
}




.skill-card i{
color:var(--primary);
font-size:18px;
}

.skill-card:hover{
transform:translateY(-10px) scale(1.15) rotate(-10deg);
box-shadow:0 22px 55px rgba(0,0,0,0.45);
z-index:10;
}


.skill-card::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at var(--x) var(--y),
rgba(37,99,235,0.25),
transparent 60%);
opacity:0;
transition:.3s;
z-index:1;
}


.skill-card:hover::after{
opacity:1;
}

.skill-tools{
font-size:12px;
opacity:0;
max-height:0;
transition:.3s;
color:var(--text-soft);
}

.skill-card:hover .skill-tools{
opacity:1;
max-height:40px;
margin-top:8px;
}

/* NETWORK */

.skills-network{
margin-top:100px;
text-align:center;
}

.network-title{
font-size:28px;
margin-bottom:30px;
}

#skillsCanvas{
width:100%;
height:420px;
border-radius:18px;
border:1px solid var(--border);
background:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size:40px 40px;
}

/* QUOTE */

.about-quote{
margin-top:20px;
font-style:italic;
color:var(--text-soft);
border-right:3px solid var(--primary);
padding-right:15px;
}

/* BUTTON */

.about-btn{
display:inline-block;
margin-top:30px;
padding:12px 28px;
border-radius:30px;
background:linear-gradient(135deg,#2563eb,#1e40af);
color:#fff;
text-decoration:none;
transition:.3s;
}

.about-btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(37,99,235,0.4);
}

/* =========================
RESPONSIVE
========================= */

@media (max-width:900px){
    
    .about-btn{
justify-self:center;
}

.about-hero{
grid-template-columns:1fr;
text-align:center;
gap:35px;
padding:30px 22px;
}

.about-photo{
max-width:220px;
margin:auto;
}

.about-intro p{
text-align:justify;
}

.about-stats{
justify-content:center;
}

.timeline{
padding-right:15px;
margin:60px 0;
}

.timeline-item{
flex-direction:column;
align-items:flex-start;
gap:10px;
backdrop-filter:blur(12px);
box-shadow:0 8px 30px rgba(0,0,0,0.25);
}

.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:20px;
}


#skillsCanvas{
height:280px;
}

}

@media (max-width:500px){
  .skills-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .skill-card:hover{
    transform:none; /* چون موبایل hover واقعی ندارد */
  }

.stat-box{
min-width:100%;
}

.timeline-title,
.network-title{
font-size:22px;
}

.about-intro h3{
font-size:22px;
}

#skillsCanvas{
height:240px;
}

}
.about-quote{
grid-column:1 / -1;
margin-top:20px;
font-style:italic;
color:var(--text-soft);
border-right:3px solid var(--primary);
padding-right:15px;
}

.about-btn{
grid-column:1 / -1;
justify-self:start;

display:inline-block;
margin-top:20px;
padding:12px 28px;
border-radius:30px;
background:linear-gradient(135deg,#2563eb,#1e40af);
color:#fff;
text-decoration:none;
transition:.3s;
}

.skill-card[data-skill="programming"]{
margin-top:25px;
margin-bottom:10px;
}

.about-quote{
margin-top:0px;
}

.about-btn{
margin-top:20px;
}

.skill-card > *{
position:relative;
z-index:2;
}
.about-quote-card{

display:flex;
justify-content:space-between;
align-items:center;

gap:20px;

padding:18px 25px;
min-height:70px;

background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,0.1);
border-radius:16px;

margin-top:30px;
max-width:1150px;
margin:30px auto 0;

}



/* متن نقل قول */

.about-quote{

font-size:16px;
line-height:1.9;
color:#ddd;

text-align:right;

flex:1;
}

/* دکمه رزومه */

.about-btn{

background:linear-gradient(135deg,#3a7bff,#00c6ff);
color:white;

padding:10px 22px;

border-radius:8px;

text-decoration:none;

font-size:14px;
font-weight:500;

transition:all .3s ease;

white-space:nowrap;
}

/* افکت هاور دکمه */

.about-btn:hover{

transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.35);

}
.about-btn{
align-self:center;
display:flex;
align-items:center;
}
.about-btn{
align-self:center;
margin-top:auto;
margin-bottom:auto;
}
#about .section-title{
margin-bottom:25px;
}
/* پایان قسمت درباره ی من */


/* شروع قسمت اسلاید اول سایت */

.hero-glass{
  position: relative;
  width: 95%;
  max-width: 1600px;
  min-height: 360px;
  margin: auto;
  padding: 20px 20px;

  background: rgba(255,255,255,0.03); /* کمتر شد */
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 30px;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  box-shadow:
    0 20px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.2);

  overflow: visible;
}


/* عنوان ثابت */
.hero-title{
  font-size: clamp(22px, 5vw, 40px);
  font-weight: 800;
  margin-bottom: 20px;
}

/* اسلایدشو */
.hero-slider{
  position: relative;
  height: 140px; /* ثابت */
}

.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(25px) scale(0.98);
  transition: all .6s ease;
  text-align: center;

  width: 100%;
  padding: 0;
  box-sizing: border-box;
}


.hero-slide.active{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-slide h3{
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--primary);
}

.hero-slide p{
  font-size: 16px;
  line-height: 2;
  color: var(--text-soft);
}

/* دکمه‌ها */
.slider-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 20px;
  box-shadow: var(--shadow);
}

.slider-btn.prev{ left: -25px; }
.slider-btn.next{ right: -25px; }


.slider-btn:hover{
  background: var(--primary);
  color: #fff;
}
.hero-slide-content{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 12px;

  text-align: center;
}
.hero-slide p{
  max-width: 100% !important;
  width: 100%;
  margin: 0;
}

.hero-slide-content{
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}
/* پایان قسمت اسلاید اول سایت */
/* سایز عنوان اصلی اسلاید شو اول سایت */
.hero-name{
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}





/* شروع قسمت گالری*/
#gallery {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

#gallery .section-title {
  font-size: 32px;
  margin-bottom: 35px;
}

/* کانتینر اصلی اسلایدر */
.gallery-slider-container {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: auto;

  padding: 22px;
  border-radius: 26px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(5px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10);

  overflow: hidden;
}

/* =========================
   SLIDER TRACK
========================= */

.gallery-slider {
  position: relative;
  width: 100%;
  min-height: 380px;
  height:auto;

  overflow: hidden;

  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}



.gallery-slide.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* تصویر داخل اسلاید */
.gallery-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  border-radius: 16px;
  border: 1px solid var(--border);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    inset 0 0 12px rgba(255,255,255,0.08);

  transform: translateZ(0); /* GPU acceleration */

  transition: transform .5s ease, filter .5s ease;
}


.gallery-slide img:hover {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* =========================
   BUTTONS (WITH GLASS EFFECT)
========================= */

.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 48px;
  height: 48px;
  border-radius: 50%;

  /* -- این خطوط را اضافه یا ویرایش کن -- */
  background: rgba(255, 255, 255, 0.05); /* شفافیت کم برای حالت عادی */
  border: 1px solid rgba(255, 255, 255, 0.15); /* حاشیه کمی مشخص‌تر */
  backdrop-filter: blur(8px) saturate(150%); /* افکت شیشه‌ای سبک */
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  /* -- پایان ویرایش -- */

  color: var(--text);

  font-size: 22px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: var(--shadow);
  transition: all .35s ease;
}

/* فلش‌ها داخل تصویر و وسط لبه */
.gallery-btn.prev { right: 20px; }
.gallery-btn.next { left: 20px; }

.gallery-btn:hover {
  background: var(--primary); /* موقع هاور، رنگ اصلی */
  color: #fff;
  transform: translateY(-50%) scale(1.15);
  /* برای هاور، افکت شیشه‌ای را برمیداریم تا رنگ اصلی بهتر دیده شود */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent; /* حاشیه هم حذف شود */
}

/* موبایل — داخل تصویر، کمی نزدیک‌تر */
@media (max-width: 700px) {
  .gallery-btn {
    width: 40px;
    height: 40px;
  }

  .gallery-btn.prev { right: 12px; }
  .gallery-btn.next { left: 12px; }
}



/* =========================
   DOTS (Navigation)
========================= */

.gallery-dots {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.gallery-dots .dot {
  width: 13px;
  height: 13px;

  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: all .25s ease;
  cursor: pointer;
}

.gallery-dots .dot.active {
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
  transform: scale(1.3);
}

.gallery-dots .dot:hover {
  background: var(--primary-2);
  transform: scale(1.25);
}

/* =========================
   FULL GALLERY BUTTON
========================= */

.full-gallery-btn {
  display: inline-block;
  margin-top: 25px;

  padding: 12px 26px;
  border-radius: 24px;

  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  text-decoration: none;

  font-size: 15px;
  font-weight: 600;

  transition: all .3s ease;
}

.full-gallery-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* lightbox */

.gallery-lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;

opacity:0;
pointer-events:none;
transition:.35s;
}

.gallery-lightbox.active{
opacity:1;
pointer-events:auto;
}

.lightbox-image{
max-width:90%;
max-height:90%;
border-radius:14px;
box-shadow:0 20px 60px rgba(0,0,0,.8);
}

.lightbox-close{
position:absolute;
top:30px;
right:30px;
font-size:28px;
cursor:pointer;
color:#fff;
}

/* counter */

.gallery-counter{
margin-top:12px;
font-size:14px;
opacity:.7;
}

/* pause hover */

.gallery-slider-container:hover .gallery-slide img{
transform:scale(1.02);
}

/* parallax effect */

.gallery-slide img{
will-change:transform;
transform:translateZ(0);
pointer-events:auto;
}


.gallery-slide.active{
animation:none;
}

@keyframes loading{
0%{background-position:200%}
100%{background-position:-200%}
}



.gallery-caption{
  margin-top:10px;
  font-size:14px;
  opacity:.8;
  color:#ddd;
}


.zoom-icon{
  position:absolute;
  bottom:12px;
  right:12px;
  background:rgba(0,0,0,.55);
  padding:7px 9px;
  border-radius:6px;
  font-size:14px;
  cursor:pointer;
  opacity:0;
  transition:.25s;
}

.gallery-slide:hover .zoom-icon{
  opacity:1;
}


.gallery-bottom-actions .playpause{
  position:static;
  transform:none;
  width:44px;
  height:44px;
  font-size:18px;
}



.gallery-thumbs{
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.gallery-thumbs img{
  width:70px;
  height:48px;
  object-fit:cover;
  border-radius:6px;
  opacity:.6;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.2);
  transition:.3s;
}

.gallery-thumbs img.active{
  opacity:1;
  transform:scale(1.1);
  border-color:var(--primary);
}



.gallery-bottom-actions .fullscreen-btn{
  padding:12px 26px;
  border-radius:24px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-size:15px;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:all .3s ease;
}

.gallery-bottom-actions .fullscreen-btn:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}


.gallery-main-caption{
  margin-top:10px;
  font-size:14px;
  opacity:.85;
  color:var(--text-soft);
  text-align:center;
}


.gallery-bottom-actions{
  margin-top:25px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.gallery-bottom-actions .playpause,
.gallery-bottom-actions .full-gallery-btn,
.gallery-bottom-actions .fullscreen-btn{
    
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:0;
  font-size: clamp(10px, 1.2vw, 16px);
}

.gallery-bottom-actions .playpause{
  width:44px;
  font-size: clamp(20px, 1.6vw, 20px);
}

@media (max-width:768px){
  #gallery{
    padding-top:40px;
    padding-bottom:60px;
  }
}

/* cinematic slide animation */

.gallery-slide{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  transform:translateX(40px) scale(.96);
  filter:blur(8px);

  transition:
    opacity .6s ease,
    transform .6s ease,
    filter .6s ease;
    transform-style:preserve-3d;
perspective:1200px;

}

.gallery-slide.active{
  opacity:1;
  transform:translateX(0) scale(1);
  filter:blur(0);
}

/* caption animation */

.gallery-main-caption{
  opacity:0;
  transform:translateY(10px);
  transition:all .45s ease;
}

.gallery-main-caption.show{
  opacity:1;
  transform:translateY(0);
}

/* smoother GPU rendering */

.gallery-slider{
  will-change:transform;
    cursor: grab;
  user-select: none;
touch-action:pan-y;

}

.gallery-slide img{
  will-change:transform, opacity;
  transform:translateZ(0);
}



/* ===== GLASS MORPH CAPTION ===== */

.gallery-main-caption{

margin-top:14px;
padding:10px 18px;

display:inline-block;

background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.18);

border-radius:14px;

backdrop-filter:blur(10px) saturate(140%);
-webkit-backdrop-filter:blur(10px) saturate(140%);

box-shadow:
0 8px 25px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.12);

transition:all .4s ease;

opacity:0;
transform:translateY(10px);

}

.gallery-main-caption.show{
opacity:1;
transform:translateY(0);
}

/* ===== GPU OPTIMISATION ===== */

.gallery-slider,
.gallery-slide,
.gallery-slide img{

will-change:transform,opacity;
transform:translate3d(0,0,0);
backface-visibility:hidden;

}

/* ===== GLITCH EFFECT ===== */

.glitch{
animation:glitch .3s linear;
}

@keyframes glitch{

0%{transform:translateX(0)}
20%{transform:translateX(-4px)}
40%{transform:translateX(4px)}
60%{transform:translateX(-2px)}
80%{transform:translateX(2px)}
100%{transform:translateX(0)}

}

/* ===== COVERFLOW ===== */

.gallery-slide.prev{

transform:translateX(-55%) scale(.7) rotateY(35deg);
opacity:.4;

}

.gallery-slide.next{

transform:translateX(55%) scale(.7) rotateY(-35deg);
opacity:.4;

}


/* ===== CUBE MODE ===== */

.gallery-slider.cube .gallery-slide{

transition:transform .8s ease, opacity .6s;

}

.gallery-slider.cube .gallery-slide.prev{

transform:rotateY(-90deg);
opacity:.3;

}

.gallery-slider.cube .gallery-slide.next{

transform:rotateY(90deg);
opacity:.3;

}


/* ===== FLIP MODE ===== */

.gallery-slider.flip{
perspective:1200px;
}

.gallery-slider.flip .gallery-slide{
transition:transform .8s ease, opacity .6s;
transform-style:preserve-3d;
backface-visibility:hidden;
}

.gallery-slider.flip .gallery-slide.prev{
transform:rotateY(-180deg);
opacity:0;
}

.gallery-slider.flip .gallery-slide.next{
transform:rotateY(180deg);
opacity:0;
}

.gallery-slider.flip .gallery-slide.active{
transform:rotateY(0);
opacity:1;
}

/* cinematic motion */

.gallery-slide img{
transition:
transform .7s cubic-bezier(.22,.61,.36,1),
filter .7s cubic-bezier(.22,.61,.36,1);
}

.gallery-slide.active img{
filter:blur(0);
}

.gallery-slide:not(.active) img{
filter:blur(4px);
}


/* progress bar */

.gallery-progress{

position:absolute;
top:0;
left:0;

height:3px;
width:0%;

background:linear-gradient(90deg,var(--primary),var(--primary-2));

transition:width linear;

z-index:20;

}

/* slide glitch */

.gallery-slide.glitch img{
animation:glitch .35s;
}


#gallery:fullscreen {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#gallery:-webkit-full-screen {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#gallery:-moz-full-screen {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#gallery:-ms-fullscreen {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#gallery:fullscreen .gallery-slider-container{
  margin-top:0;
  padding-top:0;
}






/* buttons dim in fullscreen (all devices) */
/* fullscreen dim buttons (works on all devices) */

#gallery:fullscreen .gallery-btn,
#gallery.is-fullscreen .gallery-btn{
opacity:.25;
transition:opacity .35s;
}

/* desktop hover */

@media (hover: hover){

#gallery:fullscreen .gallery-slider-container:hover .gallery-btn,
#gallery.is-fullscreen .gallery-slider-container:hover .gallery-btn{
opacity:1;
}

}


/* desktop: show fully on hover */

@media (hover: hover){

#gallery:fullscreen .gallery-slider-container:hover .gallery-btn{
opacity:1;
}

}


.gallery-btn.playpause{
position:relative;
}

.play-progress{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transform:rotate(-90deg);
}

.play-progress circle{
fill:none;
stroke-width:3;
}

.play-progress .bg{
stroke:rgba(255,255,255,.2);
}


.gallery-btn.playpause .icon{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}


.play-progress .progress{
stroke:var(--primary);
stroke-linecap:round;

stroke-dasharray:100;
stroke-dashoffset:100;

transition:stroke-dashoffset linear;

filter:none;
}

.gallery-btn.playpause{
box-shadow:0 0 10px rgba(0,150,255,.35);
}


@keyframes progressGlow{

0%{
filter:
drop-shadow(0 0 4px var(--primary))
drop-shadow(0 0 8px var(--primary));
}

50%{
filter:
drop-shadow(0 0 8px var(--primary))
drop-shadow(0 0 16px var(--primary));
}

100%{
filter:
drop-shadow(0 0 4px var(--primary))
drop-shadow(0 0 8px var(--primary));
}

}


.gallery-btn.playpause .icon{
display:flex;
align-items:center;
justify-content:center;
}

.gallery-btn.playpause .icon span{
display:inline-block;
transform:translateX(1px);
}

/* پایان قسمت گالری*/





/*شروع قسمت سرویس ها یا خدمات*/

.services-section{
  padding:120px 20px;   /* اگر می‌خوای همین padding بمونه */
  position: relative;
  overflow: hidden;
}

.section-header{
text-align:center;
margin-bottom:70px;
}

.section-header h2{
font-size:34px;
margin-bottom:10px;
}

.section-header p{
opacity:.7;
}

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}


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

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

.service-card{
transition:.35s;
}

/* برای یکسان‌سازی ارتفاع کارت‌ها */
.service-card{
  height:100%;
}

.service-card-inner{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}

.service-card-inner{
padding:35px 28px;
border-radius:18px;

background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.12);

backdrop-filter:blur(3px);

transition:.35s;
}

.service-card:hover .service-card-inner{
transform:translateY(-8px);
box-shadow:0 0 40px rgba(0,150,255,0.25);
border-color:rgba(0,150,255,0.35);
}

.service-icon{
font-size:30px;
margin-bottom:16px;
color:var(--primary);
}

.service-card h3{
margin-bottom:10px;
font-size:20px;
}

.service-card p{
font-size:14px;
line-height:1.8;
opacity:.75;
}

/* reveal animation */

.reveal{
opacity:0;
transform:translateY(40px);
transition:1s;
}

.reveal.show{
opacity:1;
transform:translateY(0);
}



/* خط نورانی زیر عنوان */

.section-header h2::after{
content:"";
display:block;
width:60px;
height:3px;
margin:12px auto 0;
background:linear-gradient(90deg,#00c6ff,#0072ff);
border-radius:10px;
animation:lineGlow 3s infinite;
}

@keyframes lineGlow{
0%{width:40px;opacity:.6;}
50%{width:90px;opacity:1;}
100%{width:40px;opacity:.6;}
}


/* نور گرادیان پس زمینه کارت */

.service-card-inner{
position:relative;
overflow:hidden;
}

.service-card-inner::before{
content:"";
position:absolute;
width:120%;
height:120%;
top:-50%;
left:-50%;
background:linear-gradient(
120deg,
transparent,
rgba(0,150,255,0.15),
transparent
);
transform:rotate(25deg);
transition:1s;
opacity:0;
}

@media (max-width:768px){

.service-card-inner::before{
width:120%;
height:120%;
}

}

.service-card:hover .service-card-inner::before{
opacity:1;
animation:shine 2s linear infinite;
}

@keyframes shine{
0%{transform:translateX(-100%) rotate(25deg);}
100%{transform:translateX(100%) rotate(25deg);}
}


/* چرخش آیکون */

.service-card:hover .service-icon{
transform:rotate(12deg) scale(1.15);
transition:.4s;
}


/* پالس نرم آیکون */

.service-icon{
animation:iconPulse 3s infinite;
}

@keyframes iconPulse{
0%{transform:scale(1);}
50%{transform:scale(1.08);}
100%{transform:scale(1);}
}


/* تاخیر در ظاهر شدن کارت ها */

.service-card:nth-child(1){transition-delay:.1s;}
.service-card:nth-child(2){transition-delay:.2s;}
.service-card:nth-child(3){transition-delay:.3s;}
.service-card:nth-child(4){transition-delay:.4s;}
.service-card:nth-child(5){transition-delay:.5s;}
.service-card:nth-child(6){transition-delay:.6s;}
.service-card:nth-child(7){transition-delay:.7s;}
.service-card:nth-child(8){transition-delay:.8s;}
.service-card:nth-child(9){transition-delay:.9s;}

/* --- افکت سه‌بعدی هنگام حرکت موس --- */

.service-card {
  perspective: 800px;
}

.service-card-inner {
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
}

.service-card-inner:hover {
  transition: transform 0.1s ease-out;
}

/* --- Glow قوی کارت هنگام هاور --- */

.service-card:hover .service-card-inner {
  box-shadow:
    0 0 25px rgba(0,150,255,0.5),
    0 0 60px rgba(0,150,255,0.25);
}

/* --- آیکون حرفه‌ای: Glow + لرزش نرم --- */

.service-icon {
  position: relative;
  z-index: 3;
}

.service-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(0,150,255,0.35), transparent);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  transition: .35s;
}

.service-card:hover .service-icon::after {
  opacity: 1;
  filter: blur(5px);
}

.service-icon {
  animation: iconShake 4s infinite ease-in-out;
}

@keyframes iconShake {
  0% { transform: translateX(0); }
  50% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}



/* glass قوی تر */

.service-card-inner{

background: rgba(255,255,255,0.02);

border:1px solid rgba(255,255,255,0.25);

backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);

box-shadow:
0 8px 32px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.3);

}


/* particles */

.services-particles{

position:absolute;
left:0;
top:0;

width:100%;
height:100%;

pointer-events:none;
overflow:hidden;

}

.particle{

position:absolute;

width:6px;
height:6px;

background:#00c6ff;

border-radius:50%;

opacity:.5;

animation:particleMove linear infinite;

}

@keyframes particleMove{

0%{
transform:translateY(0);
opacity:.2;
}

50%{
opacity:.7;
}

100%{
transform:translateY(-1200px);
opacity:0;
}

}

/* موج زیر کارت */

.service-card::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:100%;
height:6px;

background:linear-gradient(
90deg,
#00c6ff,
#0072ff,
#00c6ff
);

background-size:200%;

opacity:0;

transition:.4s;

}

.service-card{
transition:.35s;
position:relative;
}

.service-card:hover::after{

opacity:1;

animation:wavy 2s linear infinite;

}

@keyframes wavy{

0%{background-position:0%}
100%{background-position:200%}

}


/* پس‌زمینه Glow بخش خدمات */
.services-bg-glow{
position:absolute;
top:-20%;
left:50%;
transform:translateX(-50%);
width:600px;
height:600px;
background:radial-gradient(circle,
rgba(0,150,255,0.25),
transparent 70%
);
filter:blur(90px);
z-index:-1;
pointer-events:none;
}


/* نور درونی کارت هنگام هاور */
.service-card-inner::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
rgba(0,150,255,0.35),
transparent 70%
);
opacity:0;
transition:.35s;
pointer-events:none;
}

.service-card:hover .service-card-inner::after{
opacity:1;
}


/* موج نوری داخل کارت */
.service-card-inner .wave-effect{
position:absolute;
top:0;
left:-150%;
width:130%;
height:100%;
background:linear-gradient(120deg,
transparent,
rgba(0,150,255,0.18),
transparent
);
transform:skewX(-15deg);
filter:blur(6px);
opacity:0;
transition:.6s;
pointer-events:none;
}

.service-card:hover .service-card-inner .wave-effect{
left:150%;
opacity:1;
}


.services-grid{
overflow:hidden;
}

.service-card{
overflow:hidden;
}

.service-card-inner{
max-width:100%;
}

@media (max-width:768px){

.service-card-inner:hover{
transform:none;
}

}


@media (max-width:768px){

.service-card{
perspective:none;
}

.service-card-inner{
transform-style:flat;
}

}

@media (max-width:768px){

.service-icon{
animation:none;
}

}

.service-card.clicked .service-icon {
  transform: rotate(12deg) scale(1.15);
  transition: .4s;
}


/* اصلاح لایه‌بندی آیکون و متن */

.service-icon{
  position: relative;
  z-index: 0;
}

.service-card h3,
.service-card p,
.service-btn{
  position: relative;
  z-index: 5;
}

/* موج نوری داخلی بیشتر و قوی‌تر */
.service-card-inner .wave-effect {
    position: absolute;
    top: 0;
    left: -120%;
    width: 140%;
    height: 100%;
    background: linear-gradient(120deg,
        rgba(0,150,255,0),
        rgba(0,150,255,0.25),
        rgba(0,150,255,0)
    );
    transform: skewX(-20deg);
    filter: blur(8px);
    opacity: 0;
    transition: .7s;
    pointer-events: none;
}

.service-card:hover .wave-effect {
    left: 120%;
    opacity: 1;
}

/* رد نور گرد حرفه‌ای پشت آیکون */
.service-icon::before {
    content: "";
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,150,255,0.4), transparent);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.5;
    animation: glowPulse 3s infinite ease-in-out;
    z-index: -1;
}

@keyframes glowPulse {
    0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.3; }
}

/* لرزش شیشه‌ی کارت هنگام هاور */
.service-card:hover .service-card-inner {
    animation: glassShake 0.35s ease-out;
}

@keyframes glassShake {
    0% { transform: translateY(-8px) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(0.4deg); }
    50% { transform: translateY(-8px) rotate(-0.4deg); }
    100% { transform: translateY(-8px) rotate(0deg); }
}

/*پایان قسمت سرویس ها یا خدمات*/


/*شروع قسمت نمونه کارها*/
/* =========================
PORTFOLIO SECTION
========================= */

.portfolio-section{
padding:100px 20px;
position:relative;
}

.portfolio-container{
max-width:1200px;
margin:auto;
}

/* ===== فیلتر ===== */

.portfolio-filters{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:50px;
}

.filter-btn{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
color:#fff;
padding:10px 18px;
border-radius:30px;
cursor:pointer;
font-size:14px;
transition:0.3s;
}

.filter-btn:hover{
background:#0ea5e9;
}

.filter-btn.active{
background:#0ea5e9;
border-color:#0ea5e9;
}

/* ===== گرید ===== */

.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}

/* ===== کارت ===== */

.portfolio-card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
overflow:hidden;
transition:0.4s;
position:relative;
}

.portfolio-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.35);
border-color:#0ea5e9;
}

/* ===== تصویر ===== */

.portfolio-image{
height:180px;
display:flex;
align-items:center;
justify-content:center;
background:#0b1120;
position:relative;
padding:10px;
}

.portfolio-floating-btn{

position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%) translateY(20px);

background:#0ea5e9;
color:#fff;

padding:6px 14px;
font-size:12px;

border-radius:20px;

opacity:0;

transition:0.4s;

pointer-events:none;

}

.portfolio-card:hover .portfolio-floating-btn{

opacity:1;
transform:translateX(-50%) translateY(0);

}


.portfolio-image::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to top,
rgba(0,0,0,0.7),
transparent
);
opacity:0;
transition:0.4s;
}

.portfolio-card:hover .portfolio-image::after{
opacity:1;
}

.portfolio-image img{
max-width:100%;
max-height:100%;
object-fit:contain;
transition:0.5s;
    transform: translate3d(0,0,0);
    will-change: transform;
}

.portfolio-card:hover img{
transform:scale(1.08);
filter:brightness(1.1);
}

/* ===== محتوا ===== */

.portfolio-content{
padding:18px;
}

.portfolio-content h3{
margin-bottom:12px;
font-size:18px;
position:relative;
}


.portfolio-content h3::after{

content:"";

position:absolute;

bottom:-6px;
left:0;

width:0;
height:2px;

background:#0ea5e9;

transition:0.4s;

}

.portfolio-card:hover h3::after{

width:100%;

}



.portfolio-content p{
font-size:14px;
opacity:0.8;
line-height:1.6;
margin-bottom:15px;
}

/* ===== تگ ها ===== */

.portfolio-tags{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-bottom:15px;
}

.portfolio-tags span{
background:#0ea5e920;
color:#0ea5e9;
font-size:12px;
padding:4px 8px;
border-radius:6px;
}

/* ===== دکمه ===== */

.portfolio-view{
background:#fff;
color:#0ea5e9;
padding:12px 22px;
font-weight:700;
font-size:14px;
border-radius:10px;
border:2px solid rgba(14,165,233,0.8);
box-shadow:0 0 12px rgba(14,165,233,0.4);
cursor:pointer;
transition:all .3s ease;
}

.portfolio-view:hover{
background:#0ea5e9;
color:#fff;
transform:translateY(-3px);
box-shadow:0 0 18px rgba(14,165,233,0.7);
}


/* =========================
MODAL
========================= */

.portfolio-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
padding:20px;
}

.portfolio-modal-content{
background:#0f172a;
border-radius:14px;
max-width:600px;
width:100%;
padding:25px;
text-align:center;
position:relative;
animation:modalIn 0.4s ease;
}

@keyframes modalIn{
from{
opacity:0;
transform:scale(0.8);
}
to{
opacity:1;
transform:scale(1);
}
}

.portfolio-modal-img{
width:100%;
border-radius:10px;
margin-bottom:20px;
}

.portfolio-modal-title{
margin-bottom:10px;
font-size:20px;
}

.portfolio-modal-desc{
font-size:14px;
line-height:1.7;
opacity:0.9;
}

/* دکمه بستن */

.portfolio-close{
position:absolute;
top:10px;
right:15px;
font-size:22px;
cursor:pointer;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width:768px){

.portfolio-section{
padding:70px 15px;
}

.portfolio-image{
height:150px;
}

}


/* reveal animation برای portfolio */

.portfolio-card{
opacity:0;
transform:translateY(40px);
transition:1s;
}

.portfolio-card.show{
opacity:1;
transform:translateY(0);
}

/* نور موس داخل کارت */

.portfolio-card::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(
circle at var(--mx,50%) var(--my,50%),
rgba(0,150,255,0.35),
transparent 60%
);
opacity:0;
transition:.35s;
pointer-events:none;
}

.portfolio-card:hover::after{
opacity:1;
}

/* افکت سه بعدی */

.portfolio-card{
perspective:800px;
}

.portfolio-content{
transform-style:preserve-3d;
transition:transform .2s ease-out;
}

.portfolio-card:hover{
box-shadow:
0 0 25px rgba(0,150,255,0.5),
0 0 60px rgba(0,150,255,0.25);
}

.portfolio-card::before{

content:"";

position:absolute;

top:0;
left:-150%;

width:130%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(0,150,255,0.18),
transparent
);

transform:skewX(-15deg);

filter:blur(6px);

opacity:0;

transition:.6s;

pointer-events:none;

}

.portfolio-card:hover::before{

left:150%;
opacity:1;

}



/* 3D card effect */
.portfolio-card{
transform-style:preserve-3d;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card:hover{
box-shadow:0 25px 60px rgba(0,0,0,0.4);
}

/* mouse light */
.portfolio-card::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at var(--x) var(--y),
rgba(255,255,255,0.15),
transparent 40%);
opacity:0;
transition:opacity 0.3s;
pointer-events:none;
}

.portfolio-card:hover::before{
opacity:1;
}


/* Blur focus فقط وقتی کارت hover شود */

.portfolio-grid:has(.portfolio-card:hover) .portfolio-card{
    filter:blur(3px);
    opacity:0.5;
    transition:0.4s;
}

.portfolio-grid:has(.portfolio-card:hover) .portfolio-card:hover{
    filter:blur(0);
    opacity:1;
    transform:scale(1.05);
    z-index:2;
}

.portfolio-card{
position:relative;
overflow:hidden;
}

.portfolio-card::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.5),
transparent
);
transform:rotate(25deg);
opacity:0;
transition:0.6s;
}

.portfolio-card:hover::before{
animation:shineMove 1.5s ease;
opacity:1;
}

@keyframes shineMove{
0%{
transform:translateX(-100%) rotate(25deg);
}
100%{
transform:translateX(100%) rotate(25deg);
}
}


/*پایان قسمت نمونه کارها*/


/* شروع قسمت رزومه */

.resume-section{
padding:100px 20px;
position:relative;
}

.resume-container{
max-width:1200px;
margin:auto;
}

/* گرید اصلی */

.resume-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
margin-top:50px;
}

/* ستون */

.resume-column-title{
font-size:20px;
margin-bottom:25px;
position:relative;
}

.resume-column-title::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:60px;
height:2px;
background:#0ea5e9;
}

/* کارت رزومه */

.resume-card{

background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);

border-radius:14px;

padding:20px;

margin-bottom:20px;

transition:0.4s;

position:relative;

overflow:hidden;


backdrop-filter:blur(2px);

}

/* hover */

.resume-card:hover{

transform:translateY(-8px);

border-color:#0ea5e9;

box-shadow:
0 0 25px rgba(0,150,255,0.4),
0 0 60px rgba(0,150,255,0.2);

}

/* افکت نور */

.resume-card::before{

content:"";

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.35),
transparent
);

transform:rotate(25deg);

opacity:0;

transition:0.6s;

pointer-events:none;

}

.resume-card:hover::before{

animation:resumeShine 1.5s ease;

opacity:1;

}

@keyframes resumeShine{

0%{
transform:translateX(-100%) rotate(25deg);
}

100%{
transform:translateX(100%) rotate(25deg);
}

}

/* هدر کارت */

.resume-card-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
flex-wrap:wrap;
gap:8px;
}

.resume-job-title{
font-size:16px;
}

.resume-degree{
font-size:16px;
}

/* تاریخ */

.resume-job-date{

background:#0ea5e920;

color:#0ea5e9;

font-size:12px;

padding:4px 10px;

border-radius:6px;

}

/* توضیح */

.resume-job-desc{
font-size:14px;
opacity:0.85;
line-height:1.7;
margin-bottom:10px;
}

/* لیست */

.resume-list{
padding-right:18px;
font-size:13px;
opacity:0.8;
line-height:1.8;
}

/* =========================
SKILLS
========================= */

.resume-skills{
margin-top:70px;
}

.resume-skills-title{
font-size:20px;
margin-bottom:30px;
text-align:center;
}

.resume-skills-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:20px;

}

.resume-skill-card{

background:rgba(255,255,255,0.03);

border:1px solid rgba(255,255,255,0.08);

border-radius:12px;

padding:18px;

text-align:center;

transition:0.3s;

}

.resume-skill-card:hover{

transform:translateY(-6px);

border-color:#0ea5e9;

box-shadow:0 10px 25px rgba(0,0,0,0.35);

}

.resume-skill-card h4{

margin-bottom:8px;

font-size:15px;

}

.resume-skill-card p{

font-size:13px;

opacity:0.85;

}

/* =========================
ACHIEVEMENTS
========================= */

.resume-achievements{
margin-top:70px;
}

.resume-achievements-title{
text-align:center;
font-size:20px;
margin-bottom:30px;
}

.resume-achievements-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:20px;

}

.resume-achievement-card{

background:rgba(255,255,255,0.03);

border:1px solid rgba(255,255,255,0.08);

border-radius:14px;

padding:25px;

text-align:center;

transition:0.3s;

}

.resume-achievement-card:hover{

transform:translateY(-6px);

border-color:#0ea5e9;

box-shadow:0 15px 40px rgba(0,0,0,0.4);

}

.resume-achievement-number{

font-size:28px;

font-weight:bold;

color:#0ea5e9;

display:block;

margin-bottom:8px;

}

/* =========================
DOWNLOAD BUTTON
========================= */

.resume-download{

margin-top:60px;

text-align:center;

}

.resume-download-btn{

background:#fff;

color:#0ea5e9;

padding:14px 26px;

font-weight:700;

font-size:15px;

border-radius:10px;

border:2px solid rgba(14,165,233,0.8);

box-shadow:0 0 12px rgba(14,165,233,0.4);

cursor:pointer;

transition:all .3s ease;

text-decoration:none;

display:inline-block;

}

.resume-download-btn:hover{

background:#0ea5e9;

color:#fff;

transform:translateY(-3px);

box-shadow:0 0 18px rgba(14,165,233,0.7);

}

/* =========================
RESPONSIVE
========================= */

@media (max-width:768px){

.resume-section{
padding:70px 15px;
}

.resume-card-header{
flex-direction:column;
align-items:flex-start;
}

}


.resume-card::after{

content:"";
position:absolute;
top:var(--resume-mouse-y);
left:var(--resume-mouse-x);

width:200px;
height:200px;

background:radial-gradient(circle,
rgba(14,165,233,0.25),
transparent 70%);

transform:translate(-50%,-50%);
pointer-events:none;
opacity:0;
transition:opacity .3s;

border:3px solid rgba(14,165,233,0.3);

}

.resume-card:hover::after{
opacity:1;
}





.resume-column{

position:relative;
padding-right:25px;

}

.resume-column::before{

content:"";
position:absolute;
right:6px;
top:0;
bottom:0;
width:2px;
background:rgba(255,255,255,0.08);

}

.resume-card::after{

content:"";
position:absolute;
right:-33px;
top:25px;

width:12px;
height:12px;

background:#0ea5e9;
border-radius:50%;
box-shadow:0 0 10px #0ea5e9;

}





.resume-download-btn{
position:relative;
overflow:hidden;
}

.resume-download-btn span{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,0.6);
transform:scale(0);
animation:ripple .6s linear;
}

@keyframes ripple{

to{
transform:scale(4);
opacity:0;
}

}






/* 7) parallax */

window.addEventListener("scroll",()=>{

const y = window.scrollY;

document.querySelectorAll(".resume-card")
.forEach(card=>{

card.style.backgroundPosition =
`0 ${y*0.05}px`;

});

});



.resume-tags{

margin-top:12px;
display:flex;
flex-wrap:wrap;
gap:6px;

}

.resume-tags span{

font-size:11px;
padding:4px 8px;
border-radius:6px;

background:rgba(14,165,233,0.15);
color:#38bdf8;

border:1px solid rgba(14,165,233,0.4);

}


.resume-section{

position:relative;

background:
radial-gradient(
600px circle at var(--mouse-x,50%) var(--mouse-y,50%),
rgba(14,165,233,0.15),
transparent 40%
);

transition:background 0.2s;

}

/* progress container */
.resume2-progress-bar-container {
background-color: #e0e0e0;
border-radius: 10px;
height: 12px;
overflow: hidden;
margin-bottom: 8px;
}

/* progress bar */
.resume2-progress-bar {
height: 100%;
border-radius: 10px;
background: linear-gradient(90deg,#6366f1,#ec4899);
width: 0%;
transition: width 1.5s cubic-bezier(0.1,0.82,0.76,0.95);
position: relative;
overflow: hidden;
}

/* animated stripes */
.resume2-progress-bar::after {
content: "";
position: absolute;
top:0;
left:0;
right:0;
bottom:0;

background-image: linear-gradient(
-45deg,
rgba(255,255,255,0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.2) 75%,
transparent 75%,
transparent
);

background-size: 30px 30px;
animation: resume2-moveStripes 3s linear infinite;
border-radius: 10px;
}

/* stripe animation */
@keyframes resume2-moveStripes {
0% { background-position: 0 0; }
100% { background-position: 60px 0; }
}

/* percentage text */
.resume2-skill-percentage {
text-align: left;
font-weight: bold;
color: #1d4ed8;
font-size: 0.9em;
}

/* پایان قسمت رزومه */

/* شروع قسمت بلاگ یا مقالات */
/* ============================================================
   BLOG1 - سیستم کامل بلاگ
   پیشوند: blog1-
   ============================================================ */

/* بخش اصلی */
.blog1-section {
  position: relative;
  padding: 80px 0 60px;
  min-height: 400px;
  overflow: visible;
}

.blog1-bg-blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 0;
  background: transparent;
}

.blog1-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

/* هدر */
.blog1-header {
  text-align: center;
  margin-bottom: 40px;
}

.blog1-main-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.blog1-title-icon {
  font-size: 0.85em;
  -webkit-text-fill-color: initial;
}

.blog1-subtitle {
  color: var(--text-secondary, #94a3b8);
  font-size: 1.1rem;
  margin-bottom: 30px;
}

/* نوار ابزار */
.blog1-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

/* جستجو */
.blog1-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 50px;
  padding: 8px 18px;
  min-width: 260px;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}

.blog1-search-wrap:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

.blog1-search-icon {
  color: #6366f1;
  margin-left: 8px;
  font-size: 0.95rem;
}

#blog1-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: 0.95rem;
  width: 100%;
  font-family: inherit;
  direction: rtl;
}

#blog1-search-input::placeholder {
  color: rgba(148,163,184,0.7);
}

.blog1-search-clear {
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 50%;
  transition: 0.2s;
  opacity: 0;
  pointer-events: none;
}

.blog1-search-clear.visible {
  opacity: 1;
  pointer-events: all;
}

.blog1-search-clear:hover { color: #ef4444; }

.blog1-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  background: rgba(15,23,42,0.97);
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 14px;
  z-index: 999;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.blog1-search-suggestions.active { display: block; }

.blog1-sug-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: 0.2s;
  text-align: right;
}

.blog1-sug-item:hover {
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
}

/* مرتب‌سازی */
#blog1-sort-select {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 50px;
  padding: 8px 16px;
  color: inherit;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(10px);
  transition: 0.3s;
}

#blog1-sort-select:focus {
  border-color: #6366f1;
}

/* دکمه‌های بوکمارک و مطالعه بعدا */
.blog1-bm-toggle-btn,
.blog1-rl-toggle-btn {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 50px;
  padding: 8px 16px;
  color: inherit;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.3s;
  backdrop-filter: blur(10px);
}

.blog1-bm-toggle-btn:hover { border-color: #f59e0b; color: #f59e0b; }
.blog1-rl-toggle-btn:hover { border-color: #10b981; color: #10b981; }

.blog1-bm-toggle-btn span,
.blog1-rl-toggle-btn span {
  background: #6366f1;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

/* دسته‌بندی */
.blog1-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.blog1-cat-btn {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  padding: 7px 20px;
  color: inherit;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.blog1-cat-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  opacity: 0;
  transition: 0.3s;
}

.blog1-cat-btn span { position: relative; z-index: 1; }

.blog1-cat-btn:hover::before,
.blog1-cat-btn.active::before { opacity: 1; }

.blog1-cat-btn:hover,
.blog1-cat-btn.active {
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99,102,241,0.3);
}

/* نوار تگ‌ها */
.blog1-tags-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 10px;
}

.blog1-tag-filter {
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: 0.3s;
  color: #c084fc;
}

.blog1-tag-filter:hover,
.blog1-tag-filter.active {
  background: rgba(168,85,247,0.25);
  border-color: #a855f7;
}

/* ترندینگ */
.blog1-trending-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  padding: 10px 20px;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.blog1-trending-label {
  color: #f87171;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.blog1-trending-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog1-trending-item {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  color: #fca5a5;
  transition: 0.3s;
  animation: blog1-pulse-trend 2s infinite;
}

@keyframes blog1-pulse-trend {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); }
}

.blog1-trending-item:hover {
  background: rgba(239,68,68,0.25);
}

/* ============ گرید مقالات ============ */
.blog1-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
  margin-bottom: 40px;
}

/* کارت مقاله */
.blog1-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  position: relative;
  transform-style: preserve-3d;
  animation: blog1-cardIn 0.5s ease both;
  backdrop-filter: blur(8px);
}

@keyframes blog1-cardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.blog1-card:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
  border-color: rgba(99,102,241,0.4);
  box-shadow:
    0 20px 60px rgba(99,102,241,0.2),
    0 0 0 1px rgba(99,102,241,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.blog1-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  opacity: 0;
  transition: 0.4s;
}

.blog1-card:hover::before { opacity: 1; }

/* تصویر کارت */
.blog1-card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.blog1-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}

.blog1-card:hover .blog1-card-img-wrap img {
  transform: scale(1.08);
}

/* بج دسته‌بندی روی تصویر */
.blog1-card-cat-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}

/* بج ترند */
.blog1-card-trending-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 2;
  animation: blog1-fire 1.5s infinite;
}

@keyframes blog1-fire {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* overlay hover */
.blog1-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.9), transparent 60%);
  opacity: 0;
  transition: 0.4s;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  z-index: 3;
}

.blog1-card:hover .blog1-card-overlay { opacity: 1; }

.blog1-card-overlay-text {
  color: #fff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* بدنه کارت */
.blog1-card-body {
  padding: 20px;
}

.blog1-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--text-primary, #f1f5f9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog1-card-excerpt {
  font-size: 0.875rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.7;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* تگ‌ها */
.blog1-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.blog1-card-tag {
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.25);
  color: #c084fc;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: 0.2s;
}

.blog1-card-tag:hover {
  background: rgba(168,85,247,0.2);
}

/* فوتر کارت */
.blog1-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 12px;
  margin-top: 4px;
}

.blog1-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
  color: #64748b;
  flex-wrap: wrap;
}

.blog1-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* دکمه‌های اکشن کارت */
.blog1-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog1-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.3s;
  color: #64748b;
  position: relative;
}

.blog1-action-btn:hover {
  transform: scale(1.2);
}

.blog1-action-btn.blog1-like-btn:hover,
.blog1-action-btn.blog1-like-btn.active {
  color: #ef4444;
  background: rgba(239,68,68,0.1);
}

.blog1-action-btn.blog1-bm-btn:hover,
.blog1-action-btn.blog1-bm-btn.active {
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
}

.blog1-action-btn.blog1-rl-btn:hover,
.blog1-action-btn.blog1-rl-btn.active {
  color: #10b981;
  background: rgba(16,185,129,0.1);
}

.blog1-action-btn.blog1-share-btn:hover {
  color: #6366f1;
  background: rgba(99,102,241,0.1);
}

/* شمارنده لایک روی دکمه */
.blog1-like-count {
  font-size: 0.7rem;
  color: inherit;
  margin-right: 2px;
}

/* نوار زمان مطالعه */
.blog1-card-readbar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}

.blog1-card-readbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 2px;
  transition: width 1s ease;
}

/* ============ pagination ============ */
.blog1-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.blog1-page-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog1-page-btn:hover,
.blog1-page-btn.active {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px rgba(99,102,241,0.3);
}

.blog1-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ============ مودال ============ */
.blog1-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  padding: 20px;
  backdrop-filter: blur(12px);
}

.blog1-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.blog1-modal {
  background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(30,27,75,0.98));
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 24px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.9) translateY(20px);
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(99,102,241,0.2);
  scrollbar-width: thin;
  scrollbar-color: #6366f1 transparent;
  direction: rtl;
}

.blog1-modal-overlay.active .blog1-modal {
  transform: scale(1) translateY(0);
}

.blog1-modal::-webkit-scrollbar { width: 5px; }
.blog1-modal::-webkit-scrollbar-track { background: transparent; }
.blog1-modal::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 3px; }

/* نوار پیشرفت مطالعه */
.blog1-modal-progress-bar {
  position: sticky;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  width: 0%;
  transition: width 0.1s linear;
  z-index: 10;
  border-radius: 2px;
}

.blog1-modal-header {
  padding: 30px 30px 20px;
  position: relative;
}

.blog1-modal-meta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.blog1-modal-cat-badge {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
}

.blog1-modal-date,
.blog1-modal-readtime {
  font-size: 0.82rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.blog1-modal-title {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  line-height: 1.5;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #e2e8f0, #c7d2fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blog1-modal-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #94a3b8;
}

.blog1-modal-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #6366f1;
}

.blog1-modal-close {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: #94a3b8;
  font-size: 1rem;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog1-modal-close:hover {
  background: rgba(239,68,68,0.2);
  color: #ef4444;
  transform: rotate(90deg);
}

.blog1-modal-image-wrap {
  margin: 0 30px 24px;
  border-radius: 16px;
  overflow: hidden;
  max-height: 320px;
}

.blog1-modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog1-modal-body {
  padding: 0 30px 24px;
  font-size: 1rem;
  line-height: 2;
  color: #cbd5e1;
}

.blog1-modal-body p { margin-bottom: 16px; }
.blog1-modal-body h3 {
  font-size: 1.2rem;
  color: #a5b4fc;
  margin: 20px 0 10px;
}
.blog1-modal-body ul {
  padding-right: 20px;
  margin-bottom: 16px;
}
.blog1-modal-body li {
  margin-bottom: 8px;
  color: #94a3b8;
}
.blog1-modal-body code {
  background: rgba(99,102,241,0.15);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.9em;
  color: #a5b4fc;
  font-family: monospace;
}

/* مقالات مشابه */
.blog1-related {
  padding: 20px 30px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.blog1-related-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #a5b4fc;
}

.blog1-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.blog1-related-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.85rem;
}

.blog1-related-card:hover {
  border-color: rgba(99,102,241,0.35);
  background: rgba(99,102,241,0.08);
  transform: translateY(-3px);
}

.blog1-related-card-title {
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog1-related-card-cat {
  color: #a5b4fc;
  font-size: 0.75rem;
}

/* ============ سیستم کامنت ============ */
.blog1-comments-section {
  padding: 20px 30px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.blog1-comments-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #a5b4fc;
}

.blog1-comments-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.blog1-comment-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px 16px;
  animation: blog1-cardIn 0.4s ease;
}

.blog1-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.blog1-comment-name {
  font-weight: 700;
  color: #a5b4fc;
  font-size: 0.9rem;
}

.blog1-comment-date {
  font-size: 0.75rem;
  color: #475569;
}

.blog1-comment-stars {
  color: #f59e0b;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.blog1-comment-text {
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.7;
}

/* فرم کامنت */
.blog1-comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog1-comment-form input,
.blog1-comment-form textarea {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(99,102,241,0.2);
  border-radius: 12px;
  padding: 10px 14px;
  color: inherit;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: 0.3s;
  direction: rtl;
  resize: vertical;
}

.blog1-comment-form input:focus,
.blog1-comment-form textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

.blog1-comment-form textarea { min-height: 90px; }

.blog1-comment-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #94a3b8;
}

.blog1-stars {
  display: flex;
  gap: 4px;
}

.blog1-star {
  font-size: 1.4rem;
  color: #334155;
  cursor: pointer;
  transition: 0.2s;
}

.blog1-star:hover,
.blog1-star.active { color: #f59e0b; }

#blog1-comment-submit {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border: none;
  border-radius: 12px;
  padding: 10px 24px;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.3s;
  align-self: flex-start;
}

#blog1-comment-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99,102,241,0.4);
}

/* ============ اشتراک‌گذاری ============ */
.blog1-share-section {
  padding: 20px 30px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.blog1-share-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: #a5b4fc;
}

.blog1-share-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.blog1-share-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px 16px;
  color: inherit;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 7px;
}

.blog1-share-btn:hover {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.4);
  color: #a5b4fc;
  transform: translateY(-2px);
}

/* مود مطالعه */
.blog1-focus-btn {
  position: sticky;
  bottom: 20px;
  float: left;
  margin: 0 30px 20px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border: none;
  border-radius: 50px;
  padding: 10px 22px;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(99,102,241,0.4);
  z-index: 10;
}

.blog1-focus-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(99,102,241,0.5);
}

.blog1-focus-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 99998;
  display: none;
}

.blog1-focus-overlay.active { display: block; }

/* حالت فوکوس مودال */
.blog1-modal.focus-mode {
  z-index: 999999;
}

/* ============ پنل بوکمارک/مطالعه بعدا ============ */
.blog1-bm-panel,
.blog1-rl-panel {
  position: fixed;
  top: 0;
  left: -420px;
  width: 400px;
  height: 100vh;
  z-index: 99990;
  transition: left 0.4s cubic-bezier(0.23,1,0.32,1);
  direction: rtl;
}

.blog1-bm-panel.active,
.blog1-rl-panel.active {
  left: 0;
}

.blog1-bm-panel-inner,
.blog1-rl-panel-inner {
  height: 100%;
  background: rgba(10,15,30,0.97);
  border-right: 1px solid rgba(99,102,241,0.3);
  padding: 24px;
  overflow-y: auto;
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog1-bm-panel-header,
.blog1-rl-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blog1-bm-panel-header h3,
.blog1-rl-panel-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #a5b4fc;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog1-bm-close,
.blog1-rl-close {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: #94a3b8;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog1-bm-close:hover,
.blog1-rl-close:hover {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.blog1-bm-list,
.blog1-rl-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog1-panel-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: 0.3s;
  font-size: 0.87rem;
}

.blog1-panel-item:hover {
  border-color: rgba(99,102,241,0.35);
  background: rgba(99,102,241,0.07);
}

.blog1-panel-item-title {
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.blog1-panel-item-meta {
  color: #64748b;
  font-size: 0.78rem;
}

/* ============ خبرنامه ============ */
.blog1-newsletter {
  margin-top: 20px;
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.08));
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 24px;
  padding: 50px 30px;
  text-align: center;
}

.blog1-nl-icon {
  font-size: 3rem;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 16px;
}

.blog1-newsletter h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: #e2e8f0;
}

.blog1-newsletter p {
  color: #94a3b8;
  margin-bottom: 24px;
}

.blog1-nl-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

#blog1-nl-email {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 50px;
  padding: 10px 22px;
  color: inherit;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  width: 280px;
  direction: rtl;
  transition: 0.3s;
}

#blog1-nl-email:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

#blog1-nl-submit {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border: none;
  border-radius: 50px;
  padding: 10px 28px;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.3s;
}

#blog1-nl-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,102,241,0.4);
}

.blog1-nl-msg {
  margin-top: 14px;
  font-size: 0.9rem;
  min-height: 20px;
}

.blog1-nl-msg.success { color: #10b981; }
.blog1-nl-msg.error   { color: #ef4444; }

.blog1-nl-list-wrap {
  margin-top: 16px;
  font-size: 0.82rem;
  color: #64748b;
}

/* ============ انیمیشن‌های ورود ============ */
@keyframes blog1-fadeSlide {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ رسپانسیو ============ */
@media (max-width: 768px) {
  .blog1-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .blog1-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .blog1-search-wrap { min-width: 100%; }

  .blog1-modal {
    max-height: 95vh;
    border-radius: 16px;
  }

  .blog1-modal-header,
  .blog1-modal-body,
  .blog1-related,
  .blog1-comments-section,
  .blog1-share-section {
    padding-right: 18px;
    padding-left: 18px;
  }

  .blog1-modal-image-wrap { margin: 0 18px 18px; }

  .blog1-bm-panel,
  .blog1-rl-panel { width: 100%; left: -110%; }

  .blog1-focus-btn { float: none; margin: 0 18px 20px; }
}

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

  .blog1-categories {
    gap: 7px;
  }

  .blog1-cat-btn {
    padding: 6px 14px;
    font-size: 0.82rem;
  }
}

/* ============ اسکرول اسموث مودال ============ */
.blog1-modal {
  scroll-behavior: smooth;
}

/* ============ حالت پیام خالی ============ */
.blog1-empty {
  text-align: center;
  padding: 60px 20px;
  color: #475569;
  font-size: 1rem;
  grid-column: 1/-1;
}

.blog1-empty i {
  font-size: 3rem;
  margin-bottom: 14px;
  display: block;
  color: #334155;
}


/* پایان قسمت بلاگ یا مقالات */