@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700;900&display=swap');

@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: bold;
	src: url('../../yavaran/Dashbord/dist/css/fonts/IRANSansWeb_Bold.eot');
	src: url('../../yavaran/Dashbord/dist/css/fonts/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../../yavaran/Dashbord/dist/css/fonts/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../../yavaran/Dashbord/dist/css/fonts/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../../yavaran/Dashbord/dist/css/fonts/IRANSansWeb_Bold.ttf') format('truetype');
}
/* ۱. ریست عمومی و المان‌های پایه */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'IRANSans', sans-serif;
}

body {
    background-color: #030712;
    color: #9ca3af;
    overflow-x: hidden;
    position: relative;
    font-size: 14px;
}

.font-mono {
}

/* رنگ‌های نئونی شاخص قالب */
.text-neon { color: #38bdf8; text-shadow: 0 0 12px rgba(56, 189, 248, 0.5); }
.text-cyan { color: #06b6d4; }
.text-amber { color: #f59e0b; }
.text-purple { color: #a855f7; }
.text-green { color: #10b981; }
.accent-color { color: #38bdf8; }

/* ۲. نوار وضعیت بالایی */
.top-status-bar {
    background-color: #090d16;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 5%;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #4b5563;
    letter-spacing: 1px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
}

.blink-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 5px;
}
.blink-dot.green { background-color: #10b981; animation: blink 1.2s infinite; }

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

/* ۳. هدر و منوی ناوبری */
header {
    background-color: rgba(6, 10, 18, 0.9);
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 27px;
    width: 100%;
    z-index: 1000;
}

.header-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding: 15px 4%;
    max-width: 1500px;
    margin: 0 auto;
}

.brand-box { display: flex; align-items: center; gap: 12px; }
.brand-icon { font-size: 24px; color: #38bdf8; }
.main-logo { font-size: 18px; font-weight: 900; color: #fff; display: block; }
.sub-logo { font-size: 11px; color: #6b7280; }

.header-center nav ul { display: flex; justify-content: center; list-style: none; gap: 25px; }
.header-center nav ul li a { text-decoration: none; color: #9ca3af; font-weight: 700; font-size: 13px; transition: color 0.3s; }
.header-center nav ul li a:hover, .header-center nav ul li a.active { color: #38bdf8; }
.nav-num { font-size: 10px; color: #4b5563; margin-left: 4px; font-family: monospace; }

.user-status-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 6px 12px;
    border-radius: 6px;
    justify-self: end;
}
.widget-icon { font-size: 16px; color: #10b981; }
.widget-title { display: block; font-size: 10px; color: #6b7280; }
.widget-value { font-size: 11px; font-weight: 900; }

/* ۴. بخش هیرو (خانه) */
.hero-section {
    padding-top: 180px;
    padding-bottom: 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-container-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 25px;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 30px;
}

.glass-widget {
    background-color: rgba(11, 17, 30, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.profile-actions { display: flex; flex-direction: column; gap: 12px; }
.widget-btn {
    background-color: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    color: #d1d5db;
    padding: 12px 15px;
    border-radius: 6px;
    cursor: pointer;
    text-align: right;
    font-weight: 700;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.widget-btn:hover, .widget-btn.active {
    background-color: #38bdf8; color: #000; border-color: #38bdf8;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
}

.counters-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.mini-stat { border-bottom: 1px solid rgba(255,255,255,0.03); padding-bottom: 10px; }
.mini-stat:last-child { border: none; padding: 0; }
.stat-header { font-size: 11px; color: #6b7280; margin-bottom: 4px; }
.stat-body { font-size: 28px; font-weight: 900; }

/* قاب تصویر سه‌بعدی و خط اسکنر */
.hero-center-profile { display: flex; justify-content: center; align-items: center; }
.profile-frame-container {
    border: 1px solid rgba(56, 189, 248, 0.2);
    background-color: rgba(7, 11, 22, 0.8);
    border-radius: 12px;
    padding: 25px;
    position: relative;
    width: 100%;
    max-width: 450px;
}

.frame-corner { position: absolute; width: 20px; height: 20px; border-color: #38bdf8; border-style: solid; }
.frame-corner.top-left { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.frame-corner.top-right { top: -2px; right: -2px; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.frame-corner.bottom-left { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.frame-corner.bottom-right { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

.avatar-wrapper {
    width: 100%; height: 320px; background-color: #020617;
    border-radius: 8px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.05);
}
.profile-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(10%) brightness(90%); }
.scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, #38bdf8, transparent);
    animation: scan 3s linear infinite; box-shadow: 0 0 8px #38bdf8;
}

@keyframes scan { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } }

.profile-caption-card { text-align: center; margin-top: 20px; }
.profile-caption-card h2 { font-size: 22px; color: #fff; font-weight: 900; }
.profile-caption-card h3 { font-size: 13px; color: #6b7280; font-weight: 400; margin-top: 5px; }

.panel-tag { font-family: monospace; font-size: 10px; color: #4b5563; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 6px; margin-bottom: 12px; }
.data-nodes { list-style: none; }
.data-nodes li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.03); }
.node-label { color: #6b7280; font-weight: 700; }
.node-val { color: #f3f4f6; font-weight: 700; }
.core-features-box .feature-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: #e5e7eb; font-weight: 700; }

/* ۵. بخش مهارت‌ها و اصلاحات ساختار انیمیشن نئون */
.skills-section, .projects-section { padding: 80px 0; }
.sub-section-title { font-size: 22px; color: #fff; font-weight: 900; margin-bottom: 45px; text-align: center; position: relative; }
.sub-section-title::after { content: ''; display: block; width: 40px; height: 3px; background-color: #38bdf8; margin: 10px auto 0; }

.skills-main-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 25px; max-width: 1400px; margin: 0 auto; padding: 0 30px; }
.skills-details-grid { display: flex; flex-direction: column; gap: 20px; }
.complex-skill-card { background-color: #0b111e; border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; padding: 20px; }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.tech-icon { font-size: 26px; width: 50px; height: 50px; background-color: rgba(255,255,255,0.02); display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.php-color { color: #4f5b93; }
.css-color { color: #e34f26; }
.jq-color { color: #0769ad; }
.tech-meta { flex: 1; margin-right: 15px; }
.tech-meta h3 { font-size: 15px; color: #fff; font-weight: 700; }
.tech-meta p { font-size: 12px; color: #6b7280; margin-top: 2px; }
.tech-per { font-size: 16px; font-weight: 900; }

.progress-line-track { 
    background-color: #030712; 
    height: 8px; 
    border-radius: 4px; 
    overflow: hidden; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.progress-line-fill { 
    height: 100%; 
    width: 0%; 
    border-radius: 4px;
    transition: width 2s cubic-bezier(0.1, 1, 0.1, 1); 
    position: relative;
}

/* افکت‌های نئونی اختصاصی مهارت‌ها */
.bg-blue { 
    background-color: #38bdf8; 
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7); 
}
.bg-orange { 
    background-color: #f97316; 
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.7); 
}
.bg-green { 
    background-color: #10b981; 
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.7); 
}

/* ساختار کاور لایه انیمیشنی لود جریان داده نئون */
.progress-line-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(
        -45deg, 
        rgba(255, 255, 255, 0.15) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0.15) 75%, 
        transparent 75%, 
        transparent
    );
    z-index: 1;
    background-size: 40px 40px;
    animation: move-stripes 2s linear infinite;
    border-radius: 4px;
}

@keyframes move-stripes {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

.cyber-box { background-color: #0b111e; border: 1px solid rgba(56, 189, 248, 0.1); border-radius: 8px; padding: 25px; }
.cyber-box h3 { color: #fff; font-size: 15px; margin-bottom: 20px; }
.ecosystem-icons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.eco-item { background-color: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.03); padding: 15px; border-radius: 6px; text-align: center; }
.eco-item i { font-size: 24px; color: #38bdf8; display: block; margin-bottom: 8px; }
.eco-item span { font-size: 11px; font-weight: 700; color: #9ca3af; }

/* ۶. بخش پروژه‌ها */
.projects-complex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 30px; max-width: 1400px; margin: 0 auto; padding: 0 30px; }
.enterprise-project-card { background-color: #0b111e; border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; overflow: hidden; }
.proj-screen { background-color: #030712; height: 180px; padding: 20px; display: flex; align-items: center; justify-content: center; }
.mock-dashboard { width: 90%; height: 100px; background-color: #090d16; border: 1px solid rgba(56, 189, 248, 0.2); border-radius: 4px; padding: 10px; }
.mock-nav { display: flex; gap: 5px; margin-bottom: 15px; }
.mock-nav span { width: 6px; height: 6px; background-color: #4b5563; border-radius: 50%; }
.mock-grid-visual { display: flex; align-items: flex-end; gap: 10px; height: 50px; }
.visual-bar { width: 25px; border-radius: 2px 2px 0 0; }
.visual-bar.v1 { height: 40%; background-color: #ec4899; }
.visual-bar.v2 { height: 85%; background-color: #38bdf8; }
.visual-bar.v3 { height: 60%; background-color: #10b981; }
.mock-dashboard.alternate .visual-bar.v4 { height: 70%; background-color: #eab308; }
.mock-dashboard.alternate .visual-bar.v5 { height: 45%; background-color: #a855f7; }
.mock-dashboard.alternate .visual-bar.v6 { height: 90%; background-color: #ef4444; }
.proj-desc { padding: 25px; }
.proj-desc h3 { color: #fff; font-size: 17px; margin-bottom: 10px; }
.proj-desc p { font-size: 13px; color: #6b7280; text-align: justify; margin-bottom: 15px; line-height: 1.7; }
.proj-footer-tags { display: flex; gap: 8px; }
.p-tag { font-size: 11px; font-weight: 700; background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 3px 10px; border-radius: 4px; color: #9ca3af; }

/* ۷. بخش تماس با ما (بازطراحی نئون سایبرپانک) */
.cyber-contact-section { padding: 80px 0; background-color: #030712; position: relative; }
.cyber-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; max-width: 1400px; margin: 0 auto; padding: 0 30px; }

.contact-info-panel { display: flex; flex-direction: column; justify-content: center; }
.panel-header-tag { font-family: monospace; font-size: 10px; color: #4b5563; letter-spacing: 2px; margin-bottom: 10px; }
.panel-title { font-size: 26px; color: #fff; font-weight: 900; margin-bottom: 15px; }
.panel-subtitle { color: #6b7280; line-height: 1.8; margin-bottom: 35px; text-align: justify; }

.cyber-info-cards { display: flex; flex-direction: column; gap: 20px; }
.info-card-item { display: flex; align-items: center; gap: 20px; background-color: rgba(11, 17, 30, 0.4); border: 1px solid rgba(255, 255, 255, 0.02); padding: 15px 20px; border-radius: 8px; transition: transform 0.3s, border-color 0.3s; }
.info-card-item:hover { transform: translateX(-5px); border-color: rgba(56, 189, 248, 0.2); }

.card-icon { font-size: 18px; width: 48px; height: 48px; background-color: rgba(56, 189, 248, 0.05); border: 1px solid rgba(56, 189, 248, 0.15); display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #38bdf8; }
.card-texts { display: flex; flex-direction: column; gap: 4px; }
.card-label { font-size: 11px; color: #6b7280; font-weight: 700; }
.card-value { font-size: 15px; color: #f3f4f6; text-decoration: none; font-weight: 700; }
.card-value.font-mono { direction: ltr; unicode-bidi: embed; }

/* فرم پیشرفته گلس‌مورفیسم */
.cyber-form-container { background-color: rgba(11, 17, 30, 0.7); border: 1px solid rgba(56, 189, 248, 0.1); padding: 40px; border-radius: 4px; position: relative; width: 100%; backdrop-filter: blur(5px); }
.form-corner { position: absolute; width: 12px; height: 12px; border-color: #38bdf8; border-style: solid; }
.form-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.form-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.form-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.form-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.form-top-meta { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 15px; margin-bottom: 25px; }
.form-box-title { color: #fff; font-size: 15px; font-weight: 700; }
.form-status-indicator { font-family: monospace; font-size: 10px; color: #4b5563; display: flex; align-items: center; gap: 6px; }
.pulse-dot { width: 6px; height: 6px; background-color: #10b981; border-radius: 50%; display: inline-block; animation: blink 1.5s infinite; box-shadow: 0 0 8px #10b981; }

.modern-cyber-form { display: flex; flex-direction: column; gap: 20px; }
.form-input-wrapper { display: flex; flex-direction: column; gap: 8px; }
.form-input-wrapper label { font-size: 12px; font-weight: 700; color: #9ca3af; display: flex; align-items: center; gap: 8px; }
.form-input-wrapper label i { color: #4b5563; font-size: 13px; }
.required-star { color: #ef4444; margin-right: 2px; }

.input-field-group { position: relative; width: 100%; }
.input-field-group input, .input-field-group textarea { width: 100%; background-color: #030712; border: 1px solid rgba(255, 255, 255, 0.05); padding: 14px 16px; color: #fff; border-radius: 4px; font-size: 13px; transition: all 0.3s ease; }
.input-field-group textarea { resize: vertical; }

/* انیمیشن باز شدن خط متحرک نئونی */
.field-border-effect { position: absolute; bottom: 0; right: 50%; width: 0; height: 1px; background-color: #38bdf8; transition: all 0.3s ease; box-shadow: 0 0 8px #38bdf8; }
.input-field-group input:focus ~ .field-border-effect, .input-field-group textarea:focus ~ .field-border-effect { width: 100%; right: 0; }
.input-field-group input:focus, .input-field-group textarea:focus { outline: none; background-color: #050b14; border-color: rgba(56, 189, 248, 0.3); }

.cyber-btn-submit { width: 100%; background-color: transparent; border: 1px solid #38bdf8; color: #38bdf8; padding: 14px; border-radius: 4px; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; transition: all 0.3s ease; margin-top: 10px; }
.cyber-btn-submit:hover { background-color: #38bdf8; color: #000; box-shadow: 0 0 20px rgba(56, 189, 248, 0.4); }
.cyber-btn-submit .btn-icon { font-size: 13px; transition: transform 0.3s; }
.cyber-btn-submit:hover .btn-icon { transform: translateX(-5px); }

/* استایل باکس پیام هوشمند */
.cyber-alert { padding: 12px 16px; border-radius: 4px; font-size: 13px; font-weight: 700; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; line-height: 1.6; }
.cyber-alert.success { background-color: rgba(16, 185, 129, 0.06); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); box-shadow: 0 0 10px rgba(16, 185, 129, 0.05); }
.cyber-alert.error { background-color: rgba(239, 68, 68, 0.06); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); box-shadow: 0 0 10px rgba(239, 68, 68, 0.05); }

/* ۸. فوتر نهایی انتهای صفحه */
footer { background-color: #060a12; padding: 25px 4%; border-top: 1px solid rgba(255,255,255,0.04); margin-top: 60px; }
.footer-grid-container { display: flex; justify-content: space-between; align-items: center; max-width: 1500px; margin: 0 auto; font-size: 12px; color: #4b5563; }

/* ۹. لایه پاسخ‌گویی هوشمند سیستم (Responsive Grid) */
@media (max-width: 1024px) {
    .hero-container-grid { grid-template-columns: 1fr; padding-top: 40px; }
    .header-container { grid-template-columns: 1fr 1fr; }
    .header-center { display: none; }
    .skills-main-layout, .cyber-contact-grid { grid-template-columns: 1fr; }
    .info-card-item:hover { transform: none; }
}

@media (max-width: 768px) {
    .projects-complex-grid { grid-template-columns: 1fr; }
    .footer-grid-container { flex-direction: column; gap: 10px; text-align: center; }
}