/* --- Global Styles & Variables --- */
:root {
    --bg-dark: #030a10;
    --bg-white: #ffffff;
    --text-primary: #e6edf3;
    --text-secondary: #7d8590;
    --accent-neon: #079b56;
    --accent-glow: rgba(7, 155, 86, 0.5);
    --card-bg: rgba(22, 27, 34, 0.8);
    --border-color: rgba(240, 246, 252, 0.1);
    --accent-orange: #ff6b6b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.7;
    direction: ltr;
}

/* --- General Section & Content Styling --- */
.section {
    position: relative;
    overflow: hidden;
    padding: 120px 40px;
    text-align: center;
}

.section-content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 60px;
    text-align: center;
    color: var(--text-primary);
    text-shadow: 0 0 10px var(--accent-glow);
}

/* --- Hero Section (Minimalist Design) --- */
.hero-section-new {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.hero-container {
    display: grid;
    grid-template-columns: 0.7fr 1.5fr;
    align-items: center;
    gap: 80px;
    max-width: 1100px;
    width: 100%;
    position: relative;
}

.hero-image-wrapper {
    position: relative;
    transition: 0.3s;
}

.hero-image-wrapper:hover {
    transform: translateY(-10px);
}

.hero-profile-pic {
    width: 100%;
    display: block;
    border-radius: 0 30px 30px 0px;
    border-left: 8px solid #104459cf;
    border-top: 8px solid #07430eb2;
}

.hero-graphic-icon {
    position: absolute;
    top: -20px;
    left: -20px;
    background-color: #161b22;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
}

.hero-graphic-icon svg path {
    stroke: var(--text-primary);
}
.hero-graphic-icon svg path:nth-child(2) {
    fill: var(--text-primary);
}

.hero-text-content {
    position: relative;
    z-index: 2;
}

.hero-main-title {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 6rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.hero-main-title::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 10px;
    width: 80px;
    height: 80px;
    background-color: var(--accent-orange);
    opacity: 0.3;
    z-index: -1;
}

.hero-bio {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 500px;
    border-left: 2px solid var(--text-primary);
    padding-left: 20px;
    margin-bottom: 30px;
    color: var(--text-secondary);
}

.hero-bio span {
    color: #23c6a0;
}

/* --- Hero Social Media --- */
.hero-social-media {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.hero-social-media a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    transition: transform 0.3s;
}

.hero-social-media a span {
    transition: color 0.3s;
}

.hero-social-media a:hover {
    transform: translateX(5px);
}

.hero-social-media a:hover span {
    color: var(--bg-white);
}

.hero-social-media a i {
    font-size: 1.3rem;
    width: 30px;
    margin-right: 10px;
    text-align: center;
}

.hero-social-media a[aria-label="YouTube"] i { color: #C60B0B; }
.hero-social-media a[aria-label="Telegram"] i { color: #24A1DE; }
.hero-social-media a[aria-label="Twitter"] i { color: #0E7DC1; }
.hero-social-media a[aria-label="GitHub"] i { color: #FFFFFF; }
.hero-social-media a[aria-label="Email"] i { color: #079b56; }

/* --- Decorative Background Shapes --- */
.bg-shape, .hero-bg-shape { position: absolute; z-index: 1; }
.shape-1 { top: -50px; left: 40%; width: 200px; height: 100px; border: 2px solid var(--accent-orange); border-color: transparent transparent var(--accent-orange) transparent; border-radius: 50%; transform: rotate(-20deg); opacity: 0.5; }
.shape-2 { bottom: 20px; right: 0; width: 100px; height: 50px; background: linear-gradient(135deg, transparent 49.5%, var(--text-secondary) 49.5%, var(--text-secondary) 50.5%, transparent 50.5%), linear-gradient(45deg, transparent 49.5%, var(--text-secondary) 49.5%, var(--text-secondary) 50.5%, transparent 50.5%); background-size: 10px 10px; opacity: 0.1; }
.shape-3 { top: 20%; right: 5%; width: 20px; height: 20px; border: 2px solid var(--text-secondary); transform: rotate(15deg); }
.video-shape-1 { top: 10%; right: 5%; width: 80px; height: 80px; background-color: var(--accent-neon); opacity: 0.1; transform: rotate(45deg); }
.video-shape-2 { bottom: 15%; left: 10%; width: 150px; height: 80px; border: 2px solid var(--accent-orange); border-color: var(--accent-orange) transparent transparent transparent; border-radius: 50%; transform: rotate(30deg); opacity: 0.4; }
.project-shape-1 { bottom: 55%; right: 5%; width: 120px; height: 120px; border: 2px solid var(--accent-neon); border-radius: 50%; opacity: 0.2; }
.project-shape-3 { bottom: 8%; left: 16%; width: 20px; height: 20px; border: 2px solid #a2acb5; transform: rotate(45deg); }

/* --- Projects & Video Section Layout --- */
.featured-projects-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    text-align: left;
}

.projects-intro h2 {
    text-align: left;
    margin-bottom: 20px;
}

.projects-intro p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 40px;
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    transform: skew(4deg);
}

.card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}
.card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-neon);
    box-shadow: 0 0 25px var(--accent-glow);
}
.card-content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card h3 {
    color: var(--text-primary);
    margin-bottom: 5px;
    font-size: 1.3rem;
}
.card p {
    color: var(--text-secondary);
    flex-grow: 1;
    margin-bottom: 10px;
}
.repo-stats {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: auto;
}
.repo-stats span {
    margin-right: 5px;
}

.single-video-container video {
    width: 100%;
    display: block;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    aspect-ratio: 16 / 9;
    background-color: #000;
}

/* --- Buttons --- */
.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--accent-neon);
    color: var(--bg-white);
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
}
.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px var(--accent-glow);
}
.github-button {
    background-color: #045643;
    color: var(--bg-white);
}
.github-button:hover {
    box-shadow: 0 0 25px rgba(5, 148, 86, 0.5);
}
.youtube-button {
    background-color: #A20000;
    color: var(--bg-white);
}
.youtube-button:hover {
    background-color: #cc0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.5);
}
.github-button, .youtube-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.github-button .fab, .youtube-button .fab {
    font-size: 1.2rem;
}

/* --- Footer --- */
.footer-section {
    background-color: #060f19;
    padding: 120px 40px 60px 40px;
    margin-top: 0;
}
.cta-title {
    margin-bottom: 15px;
}
.cta-text {
  max-width: 700px;
  margin: auto;
  margin-bottom: 40px;
}
.copyright {
    margin-top: 60px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

#youtube-videos-section {
   padding: 150px 40px;
   background-color: #060f19; 
}

#github-projects-section {
  margin: 100px 0;
}

.telegram-button {
    background-color: #0457c3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.telegram-button:hover {
    background-color: #1e85b9;
    box-shadow: 0 0 25px rgba(36, 161, 222, 0.5);
}

.telegram-button .fab {
    font-size: 1.5rem;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .hero-container, .featured-projects-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-image-wrapper {
        max-width: 300px;
        margin: 0 auto 40px auto;
    }
    .hero-bio {
        border-left: none;
        border-top: 2px solid var(--text-primary);
        padding-left: 0;
        padding-top: 20px;
        margin: 0 auto 30px auto;
    }
    .hero-main-title {
        font-size: 4rem;
    }
    .projects-intro h2 {
        text-align: center;
    }
    .hero-social-media {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }
    .hero-social-media a span {
        display: none;
    }
    .hero-social-media a i {
        margin-right: 0;
        font-size: 1.8rem;
    }
    .hero-social-media a:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 768px) {
    .section {
        padding: 80px 20px;
    }
    #youtube-videos-section {
        padding: 100px 20px;
    }
    .hero-main-title {
        font-size: 3.5rem;
    }
    .hero-container {
        gap: 20px;
    }
    #github-projects-section {
        margin: 40px 0;
    }
    .bg-shape, .hero-bg-shape {
        display: none;
    }
}

@media (max-width: 600px) {
    .hero-main-title {
        font-size: 2.8rem;
    }
    .hero-profile-pic {
        height: 400px;
        object-position: 22% 42%;
        object-fit: none;
    }
    h2 {
        font-size: 2.2rem;
    }
    .hero-profile-pic {
        border-radius: 10px;
    }
    .projects-list {
       transform: skew(2deg);
    }
}