/*
Theme Name: Mahdi Aram Portfolio
Theme URI: https://M-Aram.ir
Author: Mahdi Aram
Author URI: https://M-Aram.ir
Description: قالب شخصی مهندس مهدی آرام - مهندس کامپیوتر
Version: 1.0.0

Text Domain: mahdi-aram
Tags: portfolio, dark, rtl-language-support
*/

:root{
  --bg:#07110B;
  --card:#0D1B12;
  --text:#F0FDF4;
  --muted:#86A78F;
  --primary:#22C55E;
  --hover:#4ADE80;
  --neon:#00FF88;
  --gold:#FFD700;
  --gold-glow:#FFA500;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'Vazirmatn', Tahoma, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.9;
  position:relative;
}

#matrix-bg{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.55;
}

.content-layer{position:relative;z-index:1;}

.glow-overlay{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(34,197,94,.14), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0,255,136,.10), transparent 45%),
    linear-gradient(180deg, rgba(7,17,11,.5), rgba(7,17,11,.8));
}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#07110B;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--neon));
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{background:var(--hover);}

header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:rgba(7,17,11,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(34,197,94,.25);
  transition:.4s;
}

header::after{
  content:'';
  position:absolute;
  bottom:-1px;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--neon),transparent);
  opacity:.7;
}

nav{
  max-width:1300px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 30px;
}

.logo{display:flex;align-items:center;gap:14px;font-weight:900;}

.logo-icon{
  width:52px;height:52px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--primary),var(--neon));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  color:#07110B;
  font-weight:900;
  box-shadow:0 0 30px rgba(34,197,94,.7);
  animation:pulseGlow 3s ease-in-out infinite;
  font-family:monospace;
  flex-shrink:0;
}

@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 30px rgba(34,197,94,.7);}
  50%{box-shadow:0 0 50px rgba(0,255,136,1);}
}

.logo-text{display:flex;flex-direction:column;line-height:1.2;}

.logo-text .title{
  font-size:.75rem;
  color:var(--muted);
  font-weight:500;
  letter-spacing:1px;
  margin-bottom:2px;
}

.logo-text .name{
  font-size:1.35rem;
  font-weight:900;
  display:flex;
  gap:8px;
  align-items:center;
}

.logo-text .name .first{
  background:linear-gradient(90deg,var(--primary),var(--neon));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% auto;
  animation:shine 3s linear infinite;
}

.logo-text .name .last{color:var(--text);}

@keyframes shine{to{background-position:200% center;}}

.nav-links{display:flex;gap:35px;list-style:none;}

.nav-links a{
  color:var(--text);
  text-decoration:none;
  font-size:.95rem;
  font-weight:500;
  position:relative;
  padding:5px 0;
  transition:.3s;
}

.nav-links a::after{
  content:'';
  position:absolute;
  bottom:0;right:0;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--neon));
  transition:.4s;
  box-shadow:0 0 10px var(--neon);
}

.nav-links a:hover{color:var(--hover);}
.nav-links a:hover::after{width:100%;}

.menu-toggle{
  display:none;
  font-size:1.6rem;
  color:var(--primary);
  cursor:pointer;
  background:none;border:none;
}

.slider{
  position:relative;
  width:100%;
  height:100vh;
  min-height:650px;
  overflow:hidden;
}

.slide{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.2s ease, visibility 1.2s ease, transform 1.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform:scale(1.1);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.slide.active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  z-index:2;
}

.slide::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(34,197,94,.08), transparent 70%),
    linear-gradient(180deg, rgba(7,17,11,.45), rgba(7,17,11,.7));
  z-index:1;
}

.slide-content{
  position:relative;
  z-index:3;
  padding:0 30px;
  max-width:950px;
}

.slide-content .badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--primary);
  color:var(--hover);
  padding:8px 22px;
  border-radius:50px;
  font-size:.8rem;
  letter-spacing:2px;
  margin-bottom:30px;
  background:rgba(7,17,11,.5);
  backdrop-filter:blur(10px);
  box-shadow:0 0 30px rgba(34,197,94,.3);
}

.badge-dot{
  width:8px;height:8px;
  background:var(--neon);
  border-radius:50%;
  box-shadow:0 0 14px var(--neon);
  animation:blink 1.5s ease-in-out infinite;
}

@keyframes blink{
  0%,100%{opacity:1;}
  50%{opacity:.3;}
}

.slide-content h1{
  font-size:clamp(2.2rem,6.5vw,4.5rem);
  font-weight:900;
  margin-bottom:25px;
  background:linear-gradient(90deg,var(--primary),var(--hover),var(--neon),var(--primary));
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.3;
  animation:shine 4s linear infinite;
  text-shadow:0 0 60px rgba(0,255,136,.5);
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.9));
}

.slide-content p{
  color:#E8F5EC;
  font-size:clamp(1rem,2vw,1.2rem);
  margin-bottom:40px;
  max-width:650px;
  margin-inline:auto;
  text-shadow:0 3px 15px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,.8);
  font-weight:500;
}

.btn{
  display:inline-block;
  padding:15px 45px;
  border:2px solid var(--primary);
  color:var(--hover);
  text-decoration:none;
  border-radius:50px;
  font-weight:700;
  letter-spacing:1px;
  position:relative;
  overflow:hidden;
  transition:.4s;
  z-index:1;
  background:rgba(7,17,11,.6);
  cursor:pointer;
  font-family:inherit;
  font-size:1rem;
  backdrop-filter:blur(8px);
}

.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--primary),var(--neon));
  transform:translateX(100%);
  transition:.4s;
  z-index:-1;
}

.btn:hover{color:#07110B;box-shadow:0 0 45px rgba(0,255,136,.9);border-color:var(--neon);}
.btn:hover::before{transform:translateX(0);}

.slider-dots{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:14px;
  z-index:10;
}

.dot{
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid var(--primary);
  background:transparent;
  cursor:pointer;
  transition:.3s;
  padding:0;
}

.dot.active{
  background:linear-gradient(135deg,var(--primary),var(--neon));
  box-shadow:0 0 20px var(--neon);
  transform:scale(1.3);
  border-color:transparent;
}

.slider-arrows{
  position:absolute;
  top:50%;
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:0 30px;
  transform:translateY(-50%);
  z-index:10;
  pointer-events:none;
}

.arrow{
  pointer-events:auto;
  background:rgba(34,197,94,.2);
  border:1px solid var(--primary);
  color:var(--hover);
  width:55px;height:55px;
  border-radius:50%;
  cursor:pointer;
  font-size:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
  backdrop-filter:blur(10px);
  font-family:inherit;
}

.arrow:hover{
  background:linear-gradient(135deg,var(--primary),var(--neon));
  color:#07110B;
  box-shadow:0 0 35px rgba(0,255,136,.9);
  transform:scale(1.1);
  border-color:transparent;
}

section{padding:110px 30px;position:relative;}
.container{max-width:1250px;margin:auto;}

.section-title{text-align:center;margin-bottom:80px;}

.section-title .tag{
  display:inline-block;
  color:var(--hover);
  font-size:.8rem;
  letter-spacing:4px;
  margin-bottom:15px;
  opacity:.9;
  font-family:monospace;
}

.section-title h2{
  font-size:clamp(1.8rem,4.5vw,3rem);
  font-weight:900;
  background:linear-gradient(90deg,var(--primary),var(--hover),var(--neon));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  position:relative;
  padding-bottom:20px;
}

.section-title h2::after{
  content:'';
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:100px;height:3px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--neon),transparent);
  border-radius:5px;
  box-shadow:0 0 20px var(--neon);
}

.section-title p{color:var(--muted);margin-top:18px;font-size:1rem;}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:70px;
  align-items:center;
}

.about-image{position:relative;display:flex;justify-content:center;}

.avatar{
  width:300px;height:300px;
  border-radius:50%;
  background:linear-gradient(135deg,#0D1B12,#07110B);
  border:3px solid var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 90px rgba(0,255,136,.55),
    inset 0 0 50px rgba(34,197,94,.2);
  position:relative;
  z-index:2;
  animation:float 5s ease-in-out infinite;
  overflow:hidden;
}

.avatar img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  filter:grayscale(15%) contrast(1.1);
}

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

.avatar-ring{
  position:absolute;
  width:370px;height:370px;
  border-radius:50%;
  border:2px dashed rgba(0,255,136,.5);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:spin 25s linear infinite;
}

.avatar-ring::before{
  content:'';
  position:absolute;
  top:-6px;left:50%;
  width:12px;height:12px;
  background:var(--neon);
  border-radius:50%;
  box-shadow:0 0 25px var(--neon);
  transform:translateX(-50%);
}

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

.about-text h3{
  font-size:2rem;
  color:var(--hover);
  margin-bottom:10px;
}

.about-text .role{
  color:var(--neon);
  font-size:1rem;
  margin-bottom:25px;
  display:inline-block;
  padding:5px 18px;
  border:1px solid rgba(0,255,136,.4);
  border-radius:50px;
  background:rgba(0,255,136,.08);
}

.about-text p{color:var(--muted);margin-bottom:18px;}

.gold-text{
  color:var(--gold);
  font-weight:700;
  text-shadow:0 0 10px var(--gold), 0 0 20px var(--gold-glow);
  animation:goldBlink 2s ease-in-out infinite;
}

@keyframes goldBlink{
  0%, 100%{
    color:var(--gold);
    text-shadow:0 0 10px var(--gold), 0 0 20px var(--gold-glow), 0 0 30px var(--gold);
    opacity:1;
  }
  50%{
    color:#B8860B;
    text-shadow:0 0 5px #B8860B, 0 0 10px var(--gold-glow);
    opacity:.6;
  }
}

.skills{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}

.skill{
  padding:9px 22px;
  border:1px solid rgba(34,197,94,.4);
  border-radius:50px;
  color:var(--hover);
  font-size:.85rem;
  background:rgba(34,197,94,.06);
  transition:.3s;
  font-family:monospace;
}

.skill:hover{
  background:rgba(0,255,136,.2);
  transform:translateY(-4px);
  box-shadow:0 8px 25px rgba(0,255,136,.4);
  color:#fff;
  border-color:var(--neon);
}

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

.service-card{
  background:linear-gradient(145deg,var(--card),#0a1710);
  border:1px solid rgba(34,197,94,.25);
  border-radius:22px;
  padding:45px 30px;
  transition:.5s;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
}

.service-card::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,255,136,.12),transparent);
  transition:.7s;
}

.service-card:hover::before{left:100%;}

.service-card:hover{
  transform:translateY(-12px);
  border-color:var(--neon);
  box-shadow:0 25px 60px rgba(0,255,136,.3);
}

.service-icon{
  width:70px;height:70px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(34,197,94,.25),rgba(0,255,136,.15));
  border:1px solid rgba(34,197,94,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.9rem;
  margin-bottom:25px;
  transition:.4s;
}

.service-card:hover .service-icon{
  transform:rotate(-8deg) scale(1.1);
  box-shadow:0 0 35px rgba(0,255,136,.7);
  border-color:var(--neon);
}

.service-card h4{
  color:var(--hover);
  font-size:1.25rem;
  margin-bottom:12px;
}

.service-card p{color:var(--muted);font-size:.92rem;}

.contact-form-wrapper{
  max-width:850px;
  margin:auto;
  background:linear-gradient(145deg,var(--card),#0a1710);
  border:1px solid rgba(34,197,94,.3);
  border-radius:25px;
  padding:55px 45px;
  backdrop-filter:blur(15px);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 0 60px rgba(0,255,136,.04);
  position:relative;
  overflow:hidden;
}

.contact-form-wrapper::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--neon),var(--primary),transparent);
}

.contact-form{display:grid;gap:25px;}

.form-group{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}

.form-group label{
  color:var(--hover);
  font-size:.9rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}

.form-group label .required{color:#ff4d4d;font-size:1.1rem;line-height:1;}

.form-group input,
.form-group textarea{
  width:100%;
  padding:16px 20px;
  background:rgba(7,17,11,.85);
  border:1px solid rgba(34,197,94,.25);
  border-radius:12px;
  color:var(--text);
  font-family:inherit;
  font-size:1rem;
  transition:.3s;
  outline:none;
}

.form-group textarea{resize:vertical;min-height:140px;line-height:1.8;}

.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--neon);
  box-shadow:0 0 25px rgba(0,255,136,.4);
  background:rgba(7,17,11,.95);
}

.form-group input::placeholder,
.form-group textarea::placeholder{color:#4a6656;font-size:.9rem;}

.form-group input.error,
.form-group textarea.error{
  border-color:#ff4d4d;
  box-shadow:0 0 20px rgba(255,77,77,.4);
}

.error-msg{color:#ff6b6b;font-size:.8rem;display:none;margin-top:2px;}
.error-msg.show{display:block;}

.submit-btn{
  margin-top:15px;
  padding:18px 50px;
  border:2px solid transparent;
  background:linear-gradient(90deg,var(--primary),var(--neon));
  color:#07110B;
  border-radius:50px;
  font-weight:900;
  font-size:1.05rem;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:1px;
  transition:.4s;
  box-shadow:0 10px 35px rgba(0,255,136,.4);
}

.submit-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 50px rgba(0,255,136,.8);
  filter:brightness(1.15);
  background:linear-gradient(90deg,var(--hover),var(--neon));
}

.submit-btn:active{transform:translateY(-2px);}

.success-msg{
  display:none;
  text-align:center;
  padding:20px;
  background:rgba(0,255,136,.12);
  border:1px solid var(--neon);
  border-radius:12px;
  color:var(--hover);
  font-weight:600;
  margin-top:15px;
  animation:fadeIn .5s ease;
  box-shadow:0 0 25px rgba(0,255,136,.3);
}

.success-msg.show{display:block;}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}

footer{
  background:rgba(7,17,11,.95);
  text-align:center;
  padding:40px 30px;
  border-top:1px solid rgba(34,197,94,.2);
  color:var(--muted);
  font-size:.9rem;
  position:relative;
}

footer span{
  background:linear-gradient(90deg,var(--primary),var(--neon));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:700;
}

.reveal{opacity:0;transform:translateY(50px);transition:opacity 1s ease, transform 1s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:50px;}
  .avatar{width:230px;height:230px;}
  .avatar-ring{width:290px;height:290px;}
  .contact-form-wrapper{padding:40px 25px;}
}

@media (max-width:768px){
  .menu-toggle{display:block;}
  .nav-links{
    position:absolute;
    top:100%;right:0;left:0;
    background:rgba(7,17,11,.98);
    flex-direction:column;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:.4s;
    border-bottom:1px solid rgba(34,197,94,.3);
    backdrop-filter:blur(20px);
  }
  .nav-links.open{max-height:450px;}
  .nav-links li{width:100%;text-align:center;}
  .nav-links a{display:block;padding:18px;}
  .arrow{width:44px;height:44px;font-size:1.1rem;}
  .slider-arrows{padding:0 15px;}
  .logo-text .name{font-size:1.15rem;}
  .logo-icon{width:44px;height:44px;font-size:1.1rem;}
}

@media (max-width:480px){
  section{padding:80px 20px;}
  .slider{min-height:560px;}
  nav{padding:14px 18px;}
  .logo-icon{width:40px;height:40px;font-size:1rem;}
  .logo-text .title{font-size:.65rem;}
  .logo-text .name{font-size:1rem;}
  .contact-form-wrapper{padding:30px 20px;border-radius:18px;}
}