/* رنگ‌ها */
:root {
    --primary: #9e35c7;
    --secondary: #b910a2;
    --accent: #5f0dda;
    --background: #1e293b;
    --text: #f9fafb;
    --card-bg: rgba(255,255,255,0.05);
    --nav-bg: rgba(30,41,59,0.95);
}

/* Reset */
* { box-sizing:border-box; margin:0; padding:0 }
html,body { height:100%; font-family:"Vazir",sans-serif; background:var(--background); color:var(--text); line-height:1.6; }

/* body {
    font-family: 'Vazir', sans-serif;
} */

.main-content {
    background-color: var(--background);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.02),
        rgba(255,255,255,0.02) 5px,
        transparent 100px,
        transparent 50px
    );
}


.hero-bio > div,
.skills {
    background-color: rgba(255,255,255,0.05); /* یا رنگ کارت قبلی ولی با alpha کم */
    backdrop-filter: blur(10px); /* اختیاری: برای شیشه‌ای شدن */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}


/* Hero + Bio */
.hero-bio {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:50px;
    padding:70px 20px;
    flex-direction: row; /* همیشه hero سمت چپ و bio سمت راست */
}

html[dir="rtl"] .hero-bio {
    flex-direction: row; /* فارسی: bio سمت چپ و hero سمت راست */
}

.hero-bio > div {
    flex:1;
    min-width:280px;
    background: var(--card-bg);
    border-radius:16px;
    padding:30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.hero-bio .hero { text-align:center; }
.hero-bio .hero .avatar {
    width:140px;
    height:140px;
    border-radius:50%;
    border:4px solid #8f0dda;
    margin-bottom:15px;
}
.hero-bio .hero h1 { font-size:30px; margin-bottom:8px; }
.hero-bio .hero p { font-size:15px; margin-bottom:15px; }
.hero-bio .hero .btn {
    background: var(--accent);
    color:#fff;
    padding:10px 22px;
    border-radius:25px;
    text-decoration:none;
    font-weight:bold;
    transition:0.3s;
}
.hero-bio .hero .btn:hover { background:#fff; color:var(--primary); }

.hero-bio .bio {
    max-width:480px;
    text-align:right;
}
html[dir="ltr"] .hero-bio .bio {
    text-align:left;
}
.hero-bio .bio h2 { font-size:24px; margin-bottom:12px; color:#fff; }
.hero-bio .bio p { font-size:15px; line-height:1.8; color:#f9fafb; }
.bio3 { color: #c2f30fde; }

/* Skills */
.skills {
    padding: 50px 20px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    margin: 50px auto;
    max-width: 900px;
    text-align: right;
}
html[dir="ltr"] .skills { text-align: left; }

.skills h2 {
    font-size: 26px;
    margin-bottom: 25px;
    color: var(--primary);
    text-align: center;
}

.certificate-link {
    margin-left: 6px;
    color: goldenrod;   /* رنگ طلایی شبیه مدال */
    font-size: 1.1em;
    transition: transform 0.2s ease, color 0.2s ease;
}
.certificate-link:hover {
    color: darkorange;
    transform: scale(1.2);
}



.skill { margin-bottom: 18px; }
.skill-title { font-weight: bold; margin-bottom: 6px; color: var(--text); }
.bar { background: rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden; }
.bar-fill { background: var(--secondary); color: #fff; text-align: right; padding: 4px 8px; font-size: 13px; border-radius: 6px 0 0 6px; transition: width 1s ease-in-out; }
html[dir="ltr"] .bar-fill { text-align: left; border-radius: 0 6px 6px 0; }


/* Responsive */
@media(max-width:768px) {
    .hero-bio { flex-direction: column; gap: 20px; }
    .hero-bio .bio { text-align: center; }
    .hero h1 { font-size:28px; }
}

@media(max-width:600px){
    .hamburger{display:flex;}
    .nav-links{
        display:none;
        position:absolute;
        top:64px;
        left:0;
        right:0;
        background: var(--nav-bg);
        flex-direction:column;
        padding:12px 20px;
        border-radius:0 0 10px 10px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    }
    .nav-links.active{display:flex;}
    .nav-links li a{color:#f9fafb; margin-bottom:8px;}
}


* {
  -webkit-tap-highlight-color: transparent;  
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
  -webkit-focus-ring-color: rgba(0,0,0,0); 
  outline: none; 
}