/* :root{
    --bg:#1a1b2e;
    --panel:#262742;
    --text:#fdfdff;
    --accent:#0800fd;

    --accent2:#14ef00;
    --border:#323457;
    --success:#a3ffcb;
} */
    /* --accent2:#8befff; */



/* :root{
    --bg:#0f1117;  
    --panel:#1a1d27;  
    --text:#e4e7ef;     
    --accent:#6d5dfc;  
    --accent2:#00e0b8;   
    --border:#2b2f3b;    
    --success:#39ff9f;    
} */


/* :root{
    --bg:#05060c;
    --panel:#0d0f18;
    --text:#e0e3ff;
    --accent:#8257e6;
    --accent2:#3fffd2;
    --border:#1b1e2b;
    --success:#41ff9f;
} */

/* :root{
    --bg:#0e0b11;
    --panel:#1a141f;  
    --text:#f2e9ff;    
    --accent:#ff4f81;     
    --accent2:#b367ff;     
    --highlight:#ff9fda;  
   --border:#2c2233;     
    --success:#ffb3dd; 
} */

:root{
    --bg:#0a070d;
    --panel:#140f18;
    --text:#ffeaff;
    --accent:#ff2f7b;      /* صورتی نئونی سکسی */
    --accent2:#a742ff;     /* بنفش نئونی */
    --highlight:#ff7cc8;
    --border:#211828;
    --success:#ff92d6;
}


/* ===== FONTS ===== */

@font-face {
    font-family: 'MyFont';
    src: url("../font/Vazir-Medium-FD-WOL.ttf") format("truetype");
}


@font-face {
    font-family: 'MyFont2';
    src: url("../font/Vazir-Medium-FD-WOL.ttf") format('truetype');
}

*{
    margin:0;
    padding:0;
    max-width: 100%;
    box-sizing:border-box;
}



html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

body{
    background:var(--bg);
    color:var(--text);
    direction:rtl;
    font-family:'MyFont2', Vazirmatn, sans-serif;
    line-height:1.7;
}

/* ===== HEADER (Final Version) ===== */
header{
    background:var(--panel);
    color:var(--text);
    padding:15px 75px;
    display:flex;
    justify-content:flex-start; /* لوگو و منو از سمت راست شروع می‌شوند */
    align-items:center;
    gap:30px; /* فاصله بین لوگو و منو */
    font-family:'MyFont', Vazirmatn, sans-serif;
}

header .logo{
    font-size:30px;
    font-weight:bold;
}

/* لینک‌های منو */
header nav a{
    color:var(--text);
    text-decoration:none;
    margin-right:20px; /* به‌جای margin-left */
    padding:10px;
    border-radius:6px;
    transition:0.2s;
}

header nav a:hover{
    background:var(--accent);
}

/* ===== CONTAINER ===== */
.container{
    max-width:1200px;
    margin:auto;
    padding:40px 20px;
}

.container p h2,
.container ul li{
    font-size:18px;
}

/* ===== CARD ===== */
.card{
    background:var(--panel);
    color:var(--text);
    padding:25px;
    border-radius:12px;
    border:1px solid var(--border);
    margin-bottom:25px;
    transition:0.3s;
    position:relative; /* لازم برای دکمه‌ها */
}

.card:hover{
    transform:translateY(-4px);
}

/* ===== BUTTON ===== */
.btn{
    display:inline-block;
    padding:10px 20px;
    /* background:var(--accent); */
    background:linear-gradient(90deg, var(--accent), var(--accent2));
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    transition:0.3s;
    font-size:14px;
}


.btn:hover{
    background:var(--accent2);
    opacity:0.85;
}

/* ===== LAYOUT ===== */
.layout{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

.codes-area{
    flex:1.3;
}

/* ===== GRID ===== */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:25px;
    padding-top:20px;
}

/* ===== CODE CARDS ===== */
.code-card{
    background:var(--panel);
    padding:25px;
    border-radius:14px;
    height:220px;
    box-shadow:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:0.35s ease;
    border:1px solid var(--border);
}

.open-btn:hover{
    color: #3f56ff;;
}
.open-btn {
    color: #14ef00;;
}

#myinf , #myskill{
    color: #ef00ab;
}

.code-card:hover{
    transform:translateY(-8px);
    border-color:var(--accent);
}

.code-card:hover h3{
    color:var(--accent2);
}

.code-card h3{
    font-size:19px;
    margin-bottom:10px;
}

.code-card p{
    font-size:14px;
    color:var(--text);
    line-height:1.6;
    max-height:70px;
    overflow:hidden;
}

.code-card-top{
    display:flex;
    justify-content:flex-end;
}

.lang{
    color:var(--accent2);
    padding:5px 12px;
    border-radius:6px;
    font-weight:bold;
    font-size:11px;
}

/* ===== NOTICE BOX ===== */
.notice-box{
    width:260px;
    background:var(--panel);
    border-radius:12px;
    padding:15px;
    border:1px solid var(--border);
    position:sticky;
    top:20px;
}

.notice-header{
    font-weight:bold;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    gap:10px;
}

.notice-light{
    width:10px;
    height:10px;
    background:#ef4444;
    border-radius:50%;
    animation:blink 2s infinite;
}

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

.notice-item{
    display:block;
    padding:10px 0;
    border-bottom:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
    font-size:14px;
    transition:0.2s;
}

.notice-item:hover{
    color:var(--accent);
    padding-right:6px;
}

/* ===== CODE BLOCK ===== */
pre{
    border-radius:12px !important;
    padding:18px !important;
    background:#2e3440 !important;
    color:#eceff4 !important;
    overflow-x:auto;
    border:1px solid var(--border);
    margin-top:20px;
}

pre code{
    font-size:14px;
    font-family:monospace !important;
}

pre, pre code{
    direction:ltr !important;
    text-align:left !important;
}

/* =========================
   COPY + SHARE BUTTONS
========================= */
.copy-btn,
.share-btn{
    position:absolute;
    top:10px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:8px;
    cursor:pointer;
    transition:.25s;
}

.copy-btn{ left:10px; }
.share-btn{ left:54px; }

.copy-btn:hover,
.share-btn:hover{
    background:#434c5e;
    transform:scale(1.05);
}

.copy-btn svg,
.share-btn svg{
    width:18px;
    height:18px;
    fill:var(--accent2);
    position:absolute;
    transition:all .25s ease;
}

.check-icon{
    opacity:0;
    transform:scale(.5);
    fill:var(--success) !important;
}

.copy-btn.copied .copy-icon,
.share-btn.copied .share-icon{
    opacity:0;
    transform:scale(.5);
}

.copy-btn.copied .check-icon,
.share-btn.copied .check-icon{
    opacity:1;
    transform:scale(1);
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .layout{
        flex-direction:column;
    }
    .notice-box{
        width:100%;
        position:relative;
        top:0;
    }
}

@media(max-width:600px){
    header{
        flex-direction:column;
        gap:10px;
        padding:20px;
        text-align:center;
    }
    header nav a{
        margin-left:10px;
    }
    .container{
        padding:20px 15px;
    }
}
/* ===== SKILLS CHART ===== */
/* ===== SKILLS ===== */

.skill-bar{
    margin:18px 0;
}

.skill-bar span{
    display:block;
    margin-bottom:6px;
    font-size:14px;
    color:var(--text);
}

/* bar background */

.bar{
    width:100%;
    height:8px;
    background:var(--border);
    border-radius:8px;
    overflow:hidden;
}

/* progress */

.fill{
    height:100%;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    border-radius:8px;
    width:0;
    transition:width 0.9s ease;
}

/* skill levels */

.python{ width:90%; }
.front{ width:69%; }
.back{ width:80%; }
.bot{ width:90%; }
.wp{ width:80%; }
.net{ width:76%; }



/* ===== FINAL RESPONSIVE FIXES (PATCH) ===== */

@media(max-width:600px){

    /* اصلاح مهم مخصوص RTL */
    header nav a{
        margin-right:10px !important;
        margin-left:0 !important;
    }

    /* لوگو در موبایل */
    header .logo{
        font-size:24px;
    }

    /* padding کمتر برای موبایل */
    .card{
        padding:18px;
    }

    /* pre موبایلی */
    pre{
        padding:12px !important;
    }

    /* skill bar فونت کوچکتر */
    .skill-bar span{
        font-size:12px;
    }
}


/* ===== PARTICLES BACKGROUND ===== */
#particles{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    pointer-events:none; /* روی کلیک‌ها تأثیر نمی‌ذاره */
    z-index:0;
}

/* محتوا بالاتر از ذرات باشد */
body, header, .container, .layout, .card{
    position:relative;
    z-index:2;
}


.message-box{
    max-width:500px;
    margin-top:20px;
}

.message-box form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.message-box input,
.message-box textarea{
    padding:10px;
    border-radius:8px;
    border:none;
    background:#1c1c2b;
    color:#fff;
    font-family:inherit;
}

.message-box textarea{
    min-height:120px;
    resize:vertical;
}

.message-box button{
    padding:10px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:var(--accent);
    color:#000;
    font-weight:bold;
}


/* ===== MOBILE RESPONSIVE OPTIMIZATION ===== */
/* اصلاح نهایی برای جلوگیری از کوچک شدن صفحه در موبایل */
/* اصلاح ساختار صفحه برای چسباندن فوتر به پایین */
/* 1. اصلاح ساختار صفحه برای چسبیدن فوتر به پایین */
/* 1. ساختار اصلی برای چسبیدن فوتر به پایین */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.container {
    flex: 1;
    width: 90%;
    max-width: 1000px; /* کمی بازتر برای حالت ۲ ستونه */
    margin: 0 auto;
    padding: 20px 0;
}

/* 2. سیستم گرید (۲ تایی در کامپیوتر، ۱ تایی در موبایل) */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* دو ستون */
    gap: 20px;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr; /* تک ستون در موبایل */
    }
}

/* 3. کارت‌ها (رنگ متفاوت از پس‌زمینه سایت) */
.card {
    background: #140f18; /* رنگ پنل کارت‌ها */
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #211828;
    box-sizing: border-box;
}

/* 4. فوتر (رنگ متفاوت از کارت‌ها برای جدا شدن) */
.mini-footer {
    margin-top: auto;
    background: var(--panel);
    color: var(--text);
    text-align: center;
    padding: 16px 12px;
    font-size: 12px;
    border-top: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
}