/* استایل اصلی سایت — تم تیره شیشه‌ای + راست‌چین */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: Tahoma, "Segoe UI", sans-serif;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    color: #f0f0f5;
    min-height: 100vh;
    direction: rtl;
}

/* بوم سه‌بعدی: ثابت پشت همه‌چیز */
#bg3d {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* کارت شیشه‌ای */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ناوبری */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    margin: 16px auto;
    max-width: 1100px;
    position: sticky;
    top: 12px;
    z-index: 10;
}

.logo { color: #fff; text-decoration: none; font-weight: bold; font-size: 1.2rem; }
.nav-links a { color: #ddd; text-decoration: none; margin-right: 22px; transition: color .2s; }
.nav-links a:hover { color: #7dd3fc; }

main { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* هیرو به سبک Noomo Labs: تمام‌صفحه، تایپوگرافی درشت، صحنه سه‌بعدی پشت */
.noomo-hero {
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding: 24px 8px 64px;
    position: relative;
}
.noomo-text { flex: 1 1 340px; max-width: 620px; z-index: 2; }
.badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 0.85rem;
    color: #7dd3fc;
    margin-bottom: 22px;
    background: rgba(125, 211, 252, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.35);
}
.noomo-text h1 {
    font-size: clamp(3rem, 8vw, 5.2rem);
    line-height: 1.15;
    margin-bottom: 14px;
    text-shadow: 0 4px 44px rgba(56, 189, 248, 0.4);
}
.noomo-text .tagline { font-size: 1.35rem; color: #fff; margin-bottom: 10px; }
.noomo-text .subtitle { margin-bottom: 30px; }
.noomo-text .hero-btns { justify-content: flex-start; }
.scroll-hint {
    position: absolute;
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
    color: #7dd3fc;
    font-size: 0.85rem;
    opacity: 0.7;
    animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 8px; }
}
.hero-card h1 { font-size: 2.2rem; margin-bottom: 12px; }
.accent { color: #7dd3fc; }
.subtitle { color: #c9c9d6; margin-bottom: 26px; font-size: 1.05rem; }
.hero-btns { display: flex; gap: 14px; justify-content: center; }

.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, #38bdf8, #818cf8);
    color: #0b1020;
    font-weight: bold;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #7dd3fc; border: 1px solid #7dd3fc; }

/* بخش‌ها */
.section { margin: 48px 0; }
.section h2 { margin-bottom: 20px; font-size: 1.6rem; }

/* مهارت‌ها */
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.skill-card { padding: 18px; }
.skill-top { display: flex; justify-content: space-between; margin-bottom: 10px; }
.bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #38bdf8, #818cf8); }

/* کارت پروژه‌ها */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.card { padding: 24px; text-decoration: none; color: inherit; transition: transform .15s; display: block; }
.card:hover { transform: translateY(-4px); }
.card h3 { margin-bottom: 10px; color: #7dd3fc; }
.card p { color: #c9c9d6; font-size: .95rem; }
.tech { display: inline-block; margin-top: 12px; color: #a5b4fc; font-size: .8rem; }

/* صفحه جزئیات و تماس */
.detail-card { padding: 36px; max-width: 720px; margin: 0 auto; }
.detail-card h2 { margin-bottom: 14px; }
.detail-card p { color: #c9c9d6; line-height: 1.9; }

.contact-form p { margin-bottom: 16px; }
.contact-form label { display: block; margin-bottom: 6px; }
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-family: inherit;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #888; }

.alert { padding: 14px 20px; margin-bottom: 18px; text-align: center; color: #86efac; }

/* عکس پروفایل سه‌بعدی: با حرکت موس می‌چرخه و برق می‌ندازه */
.photo-wrap { perspective: 1100px; }
.photo-3d {
    position: relative;
    width: 360px;
    aspect-ratio: 3 / 4;
    border-radius: 26px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 24px 70px rgba(56, 189, 248, 0.28), 0 0 0 6px rgba(255, 255, 255, 0.04);
    animation: floaty 5s ease-in-out infinite;
}
.photo-3d img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--gx, 50%) var(--gy, 50%),
        rgba(255, 255, 255, 0.35),
        transparent 60%
    );
    pointer-events: none;
}
/* ناحیه چشم‌ها: هاور موس = افکت گندمی */
.eye-zone {
    position: absolute;
    left: 33%;
    top: 36%;
    width: 16%;
    height: 6%;
    cursor: pointer;
    z-index: 2;
}
.eye-glow {
    position: absolute;
    inset: -60% -30%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 205, 100, 0.9),
        rgba(255, 175, 60, 0.45) 55%,
        transparent 78%
    );
    filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.eye-zone.active .eye-glow { opacity: 1; animation: wheat-pulse 1.1s ease-in-out infinite; }
@keyframes wheat-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}
@keyframes floaty {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -14px; }
}

footer { text-align: center; padding: 30px; color: #888; font-size: .85rem; }