:root {
    /* Dark Mode (Default) */
    --primary-color: #fff;
    --secondary-color: #ccc;
    --bg-color: #000000;
    /* Pure Black requested */
    --text-color: #fff;
    --header-bg: #000;
    --header-text: #fff;
    --card-bg: #111111;
    --overlay-bg: rgba(255, 255, 255, 0.1);

    --font-heading: 'Syne', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Hero Grid Dark Mode */
    --hero-grid-bg: #000000;
    --hero-grid-border: #464646;

    /* Nav Border Dark Mode */
    --nav-border-color: #fff;
}

[data-theme="light"] {
    --primary-color: #000;
    --secondary-color: #555;
    --bg-color: #F1F0EC;
    --text-color: #000;
    --header-bg: #fff;
    --header-text: #000;
    --card-bg: #fff;
    --overlay-bg: rgba(0, 0, 0, 0.3);

    /* Hero Grid Light Mode */
    --hero-grid-bg: #EDECE8;
    --hero-grid-border: #D5D5D5;

    /* Nav Border Light Mode */
    --nav-border-color: #fff;
    /* White to invert to Black via mix-blend-mode */
}

/* Theme Toggle Button */
.theme-toggle {
    background-color: var(--header-bg);
    color: var(--header-text);
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s;
    margin-left: 10px;
}

/* Legacy hover removed */

.theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

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

html {
    overflow-y: scroll;
    background-color: var(--bg-color);
    /* Moved from body */
    transition: background-color 0.3s;
}

body {
    background-color: transparent;
    /* Allows canvas at z-index -1 to be seen */
    color: var(--text-color);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none;
    transition: color 0.3s;
}

/* Custom Cursor */
.cursor {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--primary-color);
    /* Thinner dark stroke */
    background-color: rgba(125, 125, 125, 0.1);
    /* Slight dark tint */
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
    box-shadow: 0 0 0 1px rgba(125, 125, 125, 0.6);
    /* Thinner white outer ring */
}

/* Background Grid */
#bg-grid {
    display: none;
    /* Disabled per user request */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    /* Let clicks pass through */
}

/* ... existing code ... */

.section-header .line {
    height: 1px;
    background: var(--text-color);
    flex: 1;
    opacity: 0.2;
    display: none;
    /* Removed horizontal line per request */
}

a {
    text-decoration: none;
    color: inherit;
    cursor: none;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 60px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    z-index: 100;
    mix-blend-mode: difference;
    color: #fff;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -1px;
    color: var(--header-text);
}

nav {
    display: flex;
    gap: 0;
    align-items: center;
}

nav a,
.theme-toggle {
    margin: 0;
    text-transform: capitalize;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    background-color: transparent;
    color: var(--header-text);
    padding: 0 16px;
    /* Reduced vertical padding */
    height: 36px;
    /* Reduced height (was 44px) */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nav-border-color);
    /* Updated to var */
    margin-left: -1px;
    /* Collapse borders */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    position: relative;
    z-index: 1;
    border-radius: 0;
    /* Default sharp */
}

/* Fix first child border in standard group */
nav a:first-child {
    margin-left: 0;
    border-radius: 0;
    /* Changed from 20px to 0 per user feedback */
}

/* Theme Toggle (Last Child) */
.theme-toggle {
    width: 36px;
    padding: 0;
    border-radius: 0;
    /* Changed from 20px to 0 per user feedback */
}

/* HOVER State ONLY - Becomes Pill without moving */
nav a:hover,
.theme-toggle:hover {
    border-radius: 50px !important;
    /* Force full pill */
    z-index: 10;
    /* margin removed to prevent movement */
    background-color: var(--text-color);
    /* Adaptive hover bg (white on dark, black on light? No, usually distinct) */
    /* Let's keep it simple for now, maybe just fixed color or variable if needed. 
       User wanted "radius" effect primarily. 
       For light mode, black hover might be too strong if text is black. 
       Let's use a variable or just invert. */
    background-color: var(--primary-color);
    color: var(--bg-color);
    /* Invert text color on hover */
    border-color: var(--nav-border-color);
}

/* Active state just standard text highlight if desired, or nothing specialized if user removed it */
nav a.active {
    font-weight: 600;
}

/* When an item is active/hovered, we might need to fix the border of the NEXT item if it was relying on overlap. 
   But since we use margin-left: -1px, the right-side element draws its own border. 
   If left element moves away (positive margin), the right element's border is revealed. This works naturally.
*/

/* Specific adjustment if the First item is active (Work) -> 
   It gets margin 0 10px. 
   The next item (About) has margin-left: -1px. 
   Visual gap = 10px (right of active) + (-1px) = 9px. 
   This is acceptable.
*/

/* Remove old specific child rules */
nav a:nth-child(n) {
    border-radius: 0;
    border-right: 1px solid #fff;
}


/* Import Syne Font */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap');
@import url('noise.css');

/* --- Hero Section (New Takt.com Style) --- */
.hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: var(--bg-color);
    /* Variable for Dark/Light support */
    overflow: visible;
    /* Unbounded per request */
    perspective: 1000px;
    /* Essential for 3D tilt */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    /* Explicit low z-index */
}

/* ... existing styles ... */

/* Work Section */
.work-showcase {
    position: relative;
    /* Create stacking context */
    z-index: 50;
    /* Ensure it sits ABOVE the hero visuals significantly */
    background-color: var(--bg-color);
    /* Ensure it has a background to obscure hero items if needed, or transparent if text only */
    padding: 100px 60px;
    /* Matched to Header Logo/Menu padding */
}

.hero-container {
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 5%;
}

/* Typography Left/Top */
.hero-text-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8%;
    z-index: 10;
    pointer-events: none;
    /* Let clicks pass to grid if needed */
}

.hero-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(3rem, 7vw, 9rem);
    font-weight: 800;
    line-height: 0.95;
    color: var(--text-color);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.line-wrapper {
    overflow: hidden;
    /* For reveal animation */
    display: block;
}

.line-wrapper .word {
    display: inline-block;
    /* transform: translateY(110%); Removed for JS fail-safe */
}

.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.9rem, 1.2vw, 1.2rem);
    color: var(--secondary-color);
    max-width: 100%;
    font-weight: 400;
    margin-top: 1rem;
    white-space: nowrap;
    /* Prevent auto-wrapping */
}

/* 3D Grid / Marquee Container */
.hero-portfolio-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    z-index: 1;
    overflow: visible;
    /* Show overflow per request */
}

/* The wrapper that handles the Tilt */
.hero-marquee-wrapper {
    position: absolute;
    top: -37.5%;
    /* Balanced: Not too high (-50%), not too low (-25%) */
    left: -50%;
    width: 200%;
    height: 200%;
    transform: rotate(-12deg) scale(1.3);
    /* Increased scale to cover corners */
    display: flex;
    align-items: center;
}

/* The sliding tracks */
.marquee-track {
    position: relative;
    width: 100vw;
    /* Base width unit */
    height: 100%;
    flex-shrink: 0;
}

.hero-grid-item {
    position: absolute;
    transform-style: preserve-3d;
    opacity: 0;
    visibility: hidden;
}

.hero-grid-inner {
    position: relative;
    overflow: hidden;
    /* No border radius usually in this brutalist style, but can add if desired */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s linear;
    /* Smooth mouse follow */
}

.hero-grid-inner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Individual Positions */
/* Adjust these to create the "scattered" look */

/* 1. Large Top Rightish (TGP/Green Poster) - Moved right & up per user request */
.item-1 {
    top: 10%;
    /* Was 15% - moved up */
    right: 5%;
    width: 12%;
    /* Was 20% - made significantly smaller */
    z-index: 2;
}

/* 2. Small Left Center - Shifted left to fill gap */
.item-2 {
    top: 55%;
    left: 25%;
    /* Was 40% */
    width: 12%;
    z-index: 3;
}

/* 3. Bottom Right */
.item-3 {
    bottom: 10%;
    right: 25%;
    width: 18%;
    z-index: 2;
}

/* 4. Very small accent */
.item-4 {
    top: 30%;
    left: 55%;
    width: 8%;
    z-index: 1;
}

/* 5. Browser Mockup Top Center/Right */
.item-5 {
    top: 20%;
    right: 45%;
    /* Shifted slightly to balance Item 1 move */
    width: 16%;
    z-index: 1;
}

/* 6. Bottom Leftish - Shifted FAR left to kill start gap */
.item-6 {
    bottom: 20%;
    left: 2%;
    /* Was 20% */
    width: 15%;
    z-index: 2;
}

/* 7. Far Right Vertical (Wristbands) - Adjusted to avoid text overlap */
.item-7 {
    top: 25%;
    /* Was 40% - moved higher to clear text */
    right: 1%;
    /* Was 2% - pushed to edge */
    width: 11%;
    /* Was 14% - made smaller */
    z-index: 3;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-text-wrapper {
        left: 5%;
        z-index: 20;
        /* Ensure text is above */
    }

    .hero-portfolio-grid {
        opacity: 0.5;
        /* Dim images on tablet to make text readable */
    }
}

@media (max-width: 768px) {
    .hero-section {
        flex-direction: column;
        justify-content: center;
    }

    .hero-text-wrapper {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        text-align: center;
        padding: 0 20px;
    }

    .hero-portfolio-grid {
        /* On mobile, maybe just a subtle background or hidden? */
        /* Let's keep it but very subtle */
        opacity: 0.3;
        pointer-events: none;
    }

    .hero-subtitle {
        white-space: normal;
        /* Allow wrapping on mobile */
    }

    .item-1 {
        width: 40%;
        right: -10%;
        top: 10%;
    }

    .item-2 {
        width: 30%;
        left: -10%;
        top: 60%;
    }

    .item-3 {
        display: none;
    }

    .item-5 {
        display: none;
    }

    .item-6 {
        width: 50%;
        bottom: 5%;
        left: 25%;
    }

    /* Fix for 105 Content overlapping TGP on mobile */
    /* Fix for 105 Content overlapping TGP on mobile */
    .item-7 {
        top: 70%;
        right: 5%;
        width: 20%;
    }
}

/* Work Section */
/* Work Section */
.work-showcase {
    position: relative;
    /* Create stacking context */
    z-index: 50;
    /* Ensure it sits ABOVE the hero visuals */
    padding: 100px 60px;
    margin-top: 20vh;
    /* Push down significantly to allow hero images to flow */
    background-color: transparent;
    /* Explicitly transparent */
    /* Matched to Header Logo/Menu padding */
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: 3rem;
    margin-right: 20px;
}

.section-header .line {
    height: 1px;
    background: var(--text-color);
    flex: 1;
    opacity: 0.2;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.project-card {
    position: relative;
    cursor: none;
    display: block;
    /* Make anchor act as block */
}

.project-card:nth-child(even) {
    transform: none;
}

.project-image {
    width: 100%;
    max-width: 509px;
    height: 400px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.project-image:hover img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s;
    overflow: hidden;
    /* Ensure text doesn't spill out */
}

.project-image:hover .overlay {
    opacity: 1;
}

/* KINETIC MARQUEE STYLES */
/* KINETIC MARQUEE STYLES */
.project-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    transform: rotate(-10deg) scale(1.2);
    /* Slight tilt for dynamic feel */
    pointer-events: none;
}

.project-marquee-track {
    display: flex;
    white-space: nowrap;
    animation: marqueeScroll 30s linear infinite;
    width: max-content;
    /* Ensure it fits content */
}

/* Reverse scroll for variety if we had multiple lines, but single line uses standard */
@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* We will duplicate content so -50% is a full loop of one set */
}

.project-marquee-track span {
    font-family: var(--font-heading);
    font-size: 3rem;
    /* BIG TEXT */
    font-weight: 800;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
    /* Outline style */
    margin: 0 20px;
    letter-spacing: -1px;
}

/* Filled version on hover? Or just outline. User said "hoverda yazan yazılar", let's make it distinct. */
/* Let's do solid white for maximum visibility as requested "görünmüyor" */
.project-marquee-track span {
    color: #fff;
    -webkit-text-stroke: 0;
}

.project-info {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--text-color);
}

.project-info h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
}

.project-info p {
    font-size: 0.9rem;
    opacity: 0.6;
    text-transform: uppercase;
}

/* ABOUT PAGE STYLES (Redesign) */
.page-container {
    padding-top: 180px;
    padding-bottom: 100px;
    padding-left: 60px;
    padding-right: 60px;
    max-width: 1600px;
    margin: 0 auto;
}

/* 1. Intro Header */
.about-header {
    margin-bottom: 120px;
    max-width: 900px;
}

.about-header h1 {
    font-family: var(--font-heading);
    font-size: 5rem;
    /* Large "Hello" */
    line-height: 1;
    margin-bottom: 30px;
    color: var(--primary-color);
}

.about-header .intro-sub {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 600px;
    color: var(--text-color);
}

/* 2. Grid Sections */
.about-grid {
    display: flex;
    align-items: flex-start;
    margin-bottom: 80px;
    /* border-top removed for cleaner grid look */
    padding-top: 30px;
}

.grid-label {
    width: 30%;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    padding-top: 0;
}

.grid-content {
    width: 70%;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color);
}

/* 3. Job Items */
.job-item {
    margin-bottom: 50px;
}

.job-item:last-child {
    margin-bottom: 0;
}

.job-item h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.job-item .role {
    font-size: 1rem;
    color: var(--secondary-color);
    /* Slightly lighter for hierarchy */
    margin-bottom: 15px;
    font-family: var(--font-heading);
}

.job-item p {
    margin-bottom: 10px;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* 4. Education */
.school-item h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
}



.school-item p {
    opacity: 0.7;
}

/* 5. Footer CTA */
.about-footer-cta {
    margin-top: 150px;
    text-align: center;
    padding-bottom: 50px;
}

.cta-label {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.cta-email {
    display: block;
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 40px;
    transition: opacity 0.3s;
}

.cta-email:hover {
    opacity: 0.7;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.social-links a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: opacity 0.3s;
}

.social-links a:hover {
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
    .page-container {
        padding-top: 120px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .about-header h1 {
        font-size: 3.5rem;
    }

    .about-grid {
        flex-direction: column;
        gap: 20px;
    }

    .grid-label {
        width: 100%;
        margin-bottom: 20px;
    }

    .grid-content {
        width: 100%;
    }

    .cta-email {
        font-size: 1.8rem;
    }
}

/* HOMEPAGE CONTACT RESTORATION */
.contact-section {
    margin-top: 100px;
    padding: 100px 60px;
    text-align: center;
    width: 100%;
}

.contact-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

/* HOMEPAGE CONTACT RESTORATION */
.contact-section h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    opacity: 0.5;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-color);
}

.contact-section .email-link {
    display: block;
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 40px;
    line-height: 1.1;
    transition: opacity 0.3s, color 0.3s;
}

.socials {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.socials a,
.social-links a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: opacity 0.3s, color 0.3s;
}

/* PROJECT DETAIL STYLES */
.project-hero-image {
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.project-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-container {
    padding: 80px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.project-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 40px;
    margin-bottom: 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.project-header h1 {
    font-family: var(--font-heading);
    font-size: 4rem;
    flex: 1;
}

.project-meta {
    display: flex;
    gap: 60px;
    margin-top: 10px;
}

.meta-item span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 5px;
}

.meta-item p {
    font-family: var(--font-heading);
    font-weight: 700;
}

.project-body {
    max-width: 100%;
    margin-bottom: 80px;
}

.intro-paragraph {
    font-size: 15px;
    margin-bottom: 30px;
}

.project-gallery {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 100px;
}

.project-gallery img {
    width: 100%;
    height: auto;
    display: block;
}

.next-project {
    text-align: right;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 40px;
}

.next-project p {
    font-size: 0.8rem;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 10px;
}

.next-project a {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    transition: opacity 0.3s;
}

.next-project a:hover {
    opacity: 0.6;
}


footer {
    background: #111;
    color: #555;
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
}

/* Simple Animations */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE DESIGN & MOBILE FIXES --- */

@media (max-width: 1200px) {
    .page-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .hero-content-center h1 {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {

    /* 1. Global Reset for Mobile */
    html,
    body {
        cursor: auto !important;
        /* Restore normal cursor */
        overflow-x: hidden;
    }

    .cursor {
        display: none !important;
        /* Hide custom cursor */
    }

    /* 2. Header & Nav (Mobile Burger) */
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        /* Prevent padding from causing overflow */
        height: auto;
        min-height: 60px;
        padding: 15px 20px;
        background-color: var(--bg-color) !important;
        /* Hardcode strictly solid */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        z-index: 9999;
        /* Topmost */
        mix-blend-mode: normal !important;
        /* Disable desktop difference mode */
        border-bottom: 1px solid rgba(125, 125, 125, 0.1);
        /* Subtle seperation */
        gap: 0;
    }

    /* Force About Page Header Light/Dark based on theme */
    body header {
        background-color: var(--bg-color) !important;
        mix-blend-mode: normal !important;
    }

    .logo {
        width: auto;
        font-size: 1.2rem;
        z-index: 10001;
        color: var(--text-color);
        /* Ensure visible color */
        white-space: nowrap;
    }

    /* Burger Button */
    .burger-btn {
        display: flex !important;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10002;
        padding: 0;
        margin: 0;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
    }

    /* Fixed Burger Icon Dimensions */
    .burger-icon {
        width: 24px;
        height: 2px;
        background: var(--text-color) !important;
        /* Auto-switch */
        position: relative;
        transition: background 0.3s;
        display: block;
        /* Ensure block */
    }

    .burger-icon::before,
    .burger-icon::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--text-color) !important;
        /* Auto-switch */
        transition: transform 0.3s, top 0.3s;
    }

    .burger-icon::before {
        top: -8px;
    }

    .burger-icon::after {
        top: 8px;
    }

    /* Nav Overlay */
    nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--bg-color) !important;
        /* Solid background matching body */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        z-index: 9998;
        /* Under header logic/logo but over content */
        opacity: 0;
        visibility: hidden;
        /* Use visibility to fully hide */
        transition: opacity 0.3s ease, visibility 0.3s;
        padding: 0;
        mix-blend-mode: normal !important;
    }

    nav.active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    nav a {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-color) !important;
        font-family: var(--font-heading);
        background: transparent !important;
        border-radius: 0 !important;
        padding: 10px 0 !important;
        width: auto !important;
        text-align: center;
    }

    [data-theme="dark"] nav a {
        color: #ffffff !important;
        /* Explicit white */
    }

    /* Ensure Theme Toggle is Visible and Styled for Mobile Menu */
    .theme-toggle {
        display: flex !important;
        /* Show toggle in mobile menu */
        background: transparent;
        border: 1px solid var(--text-color);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        cursor: pointer;
        z-index: 10005;
        pointer-events: all;
    }

    .theme-toggle svg {
        fill: var(--text-color);
        width: 20px;
        height: 20px;
    }

    /* 3. Padding Correction for Fixed Header */
    .page-container,
    .hero-section {
        padding-top: 100px !important;
        /* Push content down */
    }

    /* 3. Hero Section */
    .hero-section {
        height: auto;
        min-height: 80vh;
        padding: 120px 20px 60px 20px;
        overflow: hidden;
    }

    .hero-content-center {
        width: 100%;
        padding: 0 10px;
    }

    .hero-content-center h1 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .hero-content-center p {
        font-size: 1rem;
    }

    /* Scatter Images Fix */
    .hero-scatter-container {
        opacity: 0.2;
    }

    .scatter-img {
        pointer-events: none;
        max-width: 80px !important;
    }

    /* 4. Page Containers & Grids */
    .page-container,
    .work-showcase,
    .project-container {
        padding: 40px 20px;
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .project-card {
        cursor: pointer;
    }

    .project-image {
        height: auto;
        aspect-ratio: 4/3;
    }

    /* 5. About Page Mobile */
    .about-header {
        margin-bottom: 60px;
    }

    .about-header h1 {
        font-size: 3rem;
    }

    .about-grid {
        flex-direction: column;
        padding-top: 20px;
        margin-bottom: 40px;
    }

    .grid-label {
        width: 100%;
        margin-bottom: 15px;
        font-size: 1.2rem;
    }

    .grid-content {
        width: 100%;
    }

    /* 6. Contact Section (Fixed Overflow & Font Size) */
    .contact-section {
        padding: 60px 20px;
        margin-top: 60px;
        overflow: hidden;
        /* Prevent horizontal scroll */
    }

    .contact-section h2,
    .cta-label {
        font-size: 0.9rem;
        opacity: 0.7;
        /* Make it slightly lighter too for hierarchy */
    }

    .email-link,
    .cta-email {
        font-size: 4.5vw !important;
        /* Reduced from 5.5vw for better fit */
        white-space: nowrap;
        margin-bottom: 30px;
        line-height: 1.5;
        display: inline-block;
    }

    .socials,
    .social-links {
        flex-direction: column;
        gap: 15px;
    }

    .socials a,
    .social-links a {
        font-size: 1rem;
        display: block;
        padding: 12px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
    }

    [data-theme="dark"] .socials a {
        background: rgba(255, 255, 255, 0.1);
    }

    /* 7. Project Detail Mobile */
    .project-hero-image {
        height: 40vh;
    }

    .project-header h1 {
        font-size: 2.5rem;
    }

    .project-meta {
        flex-direction: column;
        gap: 20px;
    }

    .next-project a {
        font-size: 1.5rem;
    }
}

/* Video Support - Detail Page */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 30px;
    background: #000;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =========================================
   NEW HERO SCATTER LAYOUT (MIGRATED)
   ========================================= */

/* Text Wrapper Overrides */
.hero-text-wrapper {
    text-align: left !important;
    left: 60px !important;
    top: 35% !important;
    transform: translateY(-50%) !important;
    max-width: 800px !important;
    padding: 0 !important;
    position: absolute;
    z-index: 10;
}

.hero-title {
    font-size: 60px !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
}

.hero-subtitle {
    margin-top: 0 !important;
    font-size: 1.1rem !important;
    max-width: 400px !important;
    color: #888 !important;
}

/* Scatter Container */
.hero-scatter-container {
    position: absolute;
    top: 15%;
    left: -25%;
    /* Center the wider container */
    width: 150%;
    /* Wider to cover rotation edges */
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    transform: rotate(-12deg) scale(1.25);
    transform-origin: center;
}

.scatter-track {
    display: flex;
    width: max-content;
    animation: scatterScroll 40s linear infinite;
}

.scatter-slide {
    position: relative;
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
}

.scatter-item {
    position: absolute;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.scatter-item img {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes scatterScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.3333%);
    }
}

/* Coordinates */
.item-tgp {
    top: 42%;
    left: 6%;
    width: 14vw;
    transform: rotate(-8deg);
    z-index: 2;
}

.item-laptop {
    top: 46%;
    left: 19%;
    width: 16vw;
    transform: rotate(5deg);
    z-index: 3;
}

.item-yeniacik {
    top: 58%;
    left: 36%;
    width: 22vw;
    transform: rotate(-4deg);
    z-index: 4;
}

.item-pixel-a {
    top: 45%;
    right: 32%;
    width: 9vw;
    transform: rotate(0deg);
    z-index: 2;
}

.item-blue-a {
    top: 32%;
    right: 18%;
    width: 11vw;
    transform: rotate(8deg);
    z-index: 2;
}

.item-green {
    top: 38%;
    right: -2%;
    width: 10vw;
    transform: rotate(-6deg);
    z-index: 1;
}

.item-bands {
    top: 55%;
    right: 5%;
    width: 12vw;
    transform: rotate(15deg);
    z-index: 3;
}

.item-orange {
    top: 72%;
    left: 5%;
    width: 10vw;
    transform: rotate(-5deg);
    z-index: 5;
}

.item-colors {
    top: 65%;
    right: 20%;
    width: 14vw;
    transform: rotate(-3deg);
    z-index: 2;
}

/* Mobile Adjustments */
@media (max-width: 768px) {

    /* Mobile-Specific Animation to prevent glitches/jumps */
    @keyframes scatterScrollMobile {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-33.3333%);
        }
    }

    .hero-text-wrapper {
        left: 20px !important;
        top: 70% !important;
        /* Moved even lower to 70% */
        width: calc(100% - 40px) !important;
        max-width: none !important;
        z-index: 100 !important;
        /* Force to FRONT */
    }

    .hero-title {
        font-size: 40px !important;
    }

    .hero-scatter-container {
        top: 40% !important;
        /* Push further down */
    }

    .scatter-slide {
        height: 100%;
    }

    .scatter-track {
        /* Use the new mobile-specific animation */
        animation: scatterScrollMobile 20s linear infinite;
        width: max-content;
    }

    .scatter-item {
        filter: brightness(0.7);
        /* Darker on mobile */
    }

    /* Scatter Layout - EXPANDED (More breathing room) */
    /* Scatter Disabled - Reverting to Marquee */
    .hero-scatter-container {
        display: block !important;
    }

    /* Restore Marquee Flow */
    .hero-portfolio-grid {
        opacity: 1 !important;
        pointer-events: none !important;
        display: block !important;
    }

    .hero-marquee-wrapper {
        opacity: 0.6;
    }

    .scatter-item {
        filter: brightness(0.6) grayscale(0.1);
        position: absolute !important;
    }

    /* 1. TGP (Top Left) - Shifted Up (~50px) */
    .item-tgp {
        top: 15%;
        left: -15%;
        width: 45vw;
        transform: rotate(8deg) !important;
    }

    /* 2. Laptop (Top Right) - Shifted Up (~50px) */
    .item-laptop {
        top: 11%;
        right: -15%;
        left: auto;
        width: 45vw;
        transform: rotate(-5deg) !important;
        display: block !important;
    }

    /* 3. Blue A (Upper Mid) - Shifted Up (~50px) */
    .item-blue-a {
        top: 28%;
        left: 5%;
        right: auto;
        width: 35vw;
        transform: rotate(-12deg) !important;
    }

    /* 4. Pixel A (Mid) - Shifted Up (~50px) */
    .item-pixel-a {
        top: 25%;
        right: 0%;
        left: auto;
        width: 25vw;
        transform: rotate(4deg) !important;
    }

    /* 5. Green (Lower Mid Left) - Shifted Up (~50px) */
    .item-green {
        top: 45%;
        left: -5%;
        width: 35vw;
        transform: rotate(10deg) !important;
        display: block !important;
    }

    /* 6. Yeni Acik (Lower Mid Right) - Shifted Up (~50px) */
    .item-yeniacik {
        top: 51%;
        left: 20%;
        width: 55vw;
        transform: rotate(-6deg) !important;
    }

    /* 7. Bands (Bottom Left) - Shifted Up (~50px) */
    .item-bands {
        top: 68%;
        left: 5%;
        width: 35vw;
        transform: rotate(-15deg) !important;
    }

    /* 8. Orange (Bottom Right) - Shifted Up (~50px) */
    .item-orange {
        top: 73%;
        right: -5%;
        width: 30vw;
        transform: rotate(8deg) !important;
    }

    /* 9. Colors (Center/Background) - Shifted Up (~50px) */
    .item-colors {
        top: 33%;
        left: 35%;
        width: 30vw;
        transform: rotate(20deg) !important;
        opacity: 0.6;
        display: block !important;
        z-index: 0;
    }

    /* Project Detail Mobile Overrides */
    .project-hero-image {
        padding: 100px 20px 0 20px !important;
        height: auto !important;
    }

    .project-header {
        border-bottom: 1px solid var(--grid-line-color);
        margin-bottom: 30px;
    }

    .header-inner {
        padding: 0 20px 30px 20px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .project-meta {
        margin-top: 30px;
        gap: 30px !important;
        /* Override inline gap */
        width: 100%;
    }

    .project-body {
        padding: 0 20px !important;
        margin-bottom: 60px !important;
    }

    .project-gallery {
        padding: 0 20px !important;
        gap: 30px !important;
        margin-bottom: 60px !important;
    }

    .next-project {
        padding: 40px 20px !important;
    }

    #detail-hero-img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}