:root {
    /* ===== حالت روشن (Light Mode - Modern Microsoft) ===== */
    --background-color: #F6F8FA;      /* پس‌زمینه‌ای شبیه صفحه‌ی گیت‌هاب */
    --login-background-color: #F6F8FA;      /* پس‌زمینه‌ای شبیه صفحه‌ی گیت‌هاب */
    --text-color: #1F2328;            /* مشکی نرم و خوانا */

    --primary-color: #512BD4;         /* بنفش رسمی دات‌نت (.NET) */
    --secondary-color: #E6E9F0;       /* پس‌زمینه‌ی هدر هیرو و بخش‌های فرعی */

    --card-background: #FFFFFF;       /* کارت‌های سفید */
    --border-color: #D0D7DE;          /* خطوط جداکننده‌ی ظریف */
    
    --footer-background: #FFFFFF;
    --shadow-bottom: 0 .125rem .25rem rgba(0, 0, 0, 0.050);

    --wave-bg: #D0D7DE;               /* رنگ موج (هماهنگ با Border) */
    --btn-contact-color: #57606A;     /* رنگ آیکون‌های تماس */
    --marker-url: url('../images/marker.svg');
    --theme-transition:
            background-color 0.3s ease,
            color 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease;
}

body.dark-theme {
    /* ===== حالت تاریک نئونی (Neon Dark) ===== */
    --background-color: #0C0F14;
    --login-background-color: #1a1b1e; 
    --text-color: #E6EDF3;            /* سفید مایل به آبی */

    --primary-color: #9A4DFF;         /* بنفش نئونی و درخشان */
    --secondary-color: #1A1F26;       /* پس‌زمینه‌ی هدر در دارک مود */

    --card-background: #161B22;       /* کارت‌های تیره (استاندارد GitHub Dark) */
    --border-color: #30363D;          /* خطوط جداکننده در حالت تاریک */

    --footer-background: #0C0F14;
    --shadow-bottom: 0 .125rem .25rem rgba(0, 0, 0, 0.300);
    --marker-url: url('../images/marker-dark.svg');
    --wave-bg: #178600;               /* ✦ سبز سی‌شارپ ✦ (امضای نئونی تو) */
    --btn-contact-color: #8B949E;     /* خاکستری روشن برای آیکون‌ها */

    --theme-transition:
            background-color 0.3s ease,
            color 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease;
}
/* ===== انیمیشن برای تمام المان‌ها (مطابق کد خودت) ===== */
body,
button,
input,
textarea,
select,
.card,
.modal,
svg,
.fixed-header {
    transition: var(--theme-transition);
}

/* ===== استایل‌های پایه (همان main.css خودت) ===== */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.fixed-header {
    background-color: var(--background-color);
}

a {
    text-decoration: none;
    color: var(--primary-color) !important; /* لینک‌ها رنگ بنفش/نئونی می‌گیرن */
}

/* دکمه سویچر تم (دست نخورده از کد خودت) */
#theme-switcher-button {
    position: fixed;
    bottom: 20px;
    left: 20px;

    padding: 10px 15px;

    border: 1px solid var(--border-color);
    background-color: var(--card-background);
    color: var(--text-color);

    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
    font-size: 14px;
}

#theme-switcher-button:hover {
    background-color: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

/* ===== بقیه استایل‌های خودت (بدون تغییر) ===== */
.card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
}

body.dark-theme .card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}

.skills-card {
    background-color: var(--card-background) !important;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: var(--theme-transition);
}

.card-header {
    background-color: var(--border-color);
    border-bottom: var(--border-color) !important;
}

footer {
    background-color: var(--footer-background);
    color: var(--text-color);
    border-top: 1px solid var(--border-color);
}

footer i {
    color: var(--btn-contact-color);
}

footer i:hover {
    color: var(--text-color);
}

.contact-card {
    background-color: var(--card-background) !important;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: var(--theme-transition);
}

header {
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
}

.header-shadow {
    box-shadow: var(--shadow-bottom);
}

header a.nav-link {
    color: var(--btn-contact-color) !important;
    transition: var(--theme-transition);
}

header a.nav-link:hover {
    color: var(--text-color) !important;
}

.hero-header {
    background-color: var(--secondary-color);
}

.wave-bg svg {
    fill: var(--secondary-color);
    transition: var(--theme-transition);
}

.footer a.nav-link {
    color: var(--text-color) !important;
}

.btn {
    color: var(--text-color) !important;
}

.btn-Contact {
    border: 2px solid var(--border-color);
    color: var(--btn-contact-color) !important;
    transition: var(--theme-transition);
}

.btn-Contact:hover {
    color: var(--text-color) !important;
    border-color: var(--text-color);
}

.fixed-header {
    transition: var(--theme-transition);
}
#services svg{
    fill: var(--text-color) !important;
}

/* دکمه اسکرول فوق‌العاده باریک و هماهنگ با تم */
#scrolltop .btn-scroll {
    width: 30px;
    height: 30px;
    background-color: transparent !important;
    border: 1.5px solid var(--primary-color);   /* حاشیه نازک و هماهنگ با تم */
    color: var(--primary-color);                /* فلش هم دقیقاً همین رنگ */
    padding: 4px 9px;                          /* خیلی جمع و کوچک */
    border-radius: 100% !important;             /* کاملاً گرد */
    font-size: 14px;                           /* فلش کوچک */
    line-height: 1;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: none;
}

/* افکت هاور ملایم (پر نمی‌شه، فقط کمی بزرگتر یا پررنگ‌تر - اختیاری) */
#scrolltop .btn-scroll:hover {
    transform: scale(1.05);
    border-color: var(--primary-color);
    background-color: transparent !important;
    color: var(--primary-color);
    opacity: 0.8;
}
/* رنگ فلش داخل دکمه (دایره) */
#scrolltop .btn-scroll i,
#scrolltop .btn-scroll .icon i,
#scrolltop .btn-scroll svg {
    color: var(--primary-color) !important;
    transition: color 0.2s ease;
}

/* اگر هاور دکمه باعث تغییر رنگ فلش میشه، میتونی اینو هم اضافه کنی (اختیاری) */
#scrolltop .btn-scroll:hover i,
#scrolltop .btn-scroll:hover .icon i {
    color: var(--primary-color) !important; /* یا میتونی بزاری white اگه دکمه پر میشه */
}
/* ===== دکمه همبرگر با رنگ قابل تغییر ===== */
.navbar-toggler {
    right: 20px;
    background-color: transparent !important;
    /* رنگ خطوط از این متغیر می‌گیرد (پیش‌فرض متن) */
    color: var(--primary-color, var(--text-color)) !important;
    transition: var(--theme-transition);
}
/* فوکوس دکمه هماهنگ با تم */
.navbar-toggler:focus {
    box-shadow: 0 0 0 2px var(--primary-color);
    outline: none;
}
/* ================================
   دکمه تغییر تم (خورشید و ماه)
   ================================ */
/* ================================
   دکمه تغییر تم (40×40)
   ================================ */
.theme-toggle {
    bottom: 24px;
    left: 24px;
    width: 40px;           /* ← کاهش از 56 به 40 */
    height: 40px;          /* ← کاهش از 56 به 40 */
    border-radius: 50%;
    background: var(--card-background);
    border: 2px solid var(--border-color);
    cursor: pointer;
    z-index: 1000;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); /* سایه ملایم‌تر برای سایز کوچک */
}

.theme-toggle:hover {
    transform: scale(1.08);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(81, 43, 212, 0.25);
}

.theme-toggle:active {
    transform: scale(0.94);
}

/* کانتینر آیکون‌ها (برای چرخش) */
.toggle-icons {
    position: relative;
    width: 20px;           /* ← از 28 به 20 */
    height: 20px;          /* ← از 28 به 20 */
    transition: transform 0.5s ease;
}

/* هر دو آیکون روی هم قرار می‌گیرند */
.sun-icon, .moon-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.sun-icon {
    opacity: 1;
    transform: rotate(0deg);
    color: #F59E0B;
}

.moon-icon {
    opacity: 0;
    transform: rotate(-90deg);
    color: #CBD5E0;
}

/* حالت تاریک */
body.dark-theme .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

body.dark-theme .moon-icon {
    opacity: 1;
    transform: rotate(0deg);
}

/* کلیک: چرخش کوتاه */
.theme-toggle:active .toggle-icons {
    transform: rotate(25deg);
}

/* افکت نور در هاور */
.theme-toggle:hover .sun-icon,
.theme-toggle:hover .moon-icon {
    filter: drop-shadow(0 0 4px currentColor);
}
.portfolio-item {
    position: relative;
    overflow: visible; /* اطراف رو بپوشونه، متن بیرون نزنه */
    background: #f9fafb;
    border-radius: 0; /* گوشه‌ها تیز */
    transition: transform .35s ease;
}

/* افکت بنفش - از بیرون شروع و می‌آید داخل */
.portfolio-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #7c3aed; /* بنفش */
    opacity: 0;
    transform: scale(1.15); /* از دور */
    transition: all .85s ease;
    pointer-events: none; /* نگذارد مانع کارهای داخل شود */
    border-radius: 0; /* گوشه‌ها تیز */
    z-index: 1; /* بالاتر است */
}

/* متن */
figcaption {
    position: relative; /* برای کنترل اجتماعی */
    padding: 16px; /* حاشیه داخلی */
    z-index: 2; /* بالا قرار می‌گیرد */
    background: transparent; /* شفاف */
}

/* Hover حالت */
.grid-item:hover .portfolio-item::after {
    opacity: 1;
    transform: scale(1); /* نزدیک */
}

/* هنگام hover، اسلاید کردن آیتم */
.grid-item:hover .portfolio-item {
    transform: translateY(-5px);
}

.btn-scroll {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card-background);
    border: 2px solid var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#scrolltop {
    position: fixed;
    bottom: 20px;    /* فاصله از پایین */
    right: 20px;     /* یا left:20px بسته به طرح */
    z-index: 999;
}