/* Redesign Experiment Styles v2 */

:root {
    /* Visible Grid Line Color - Use red for test if requested, or theme color. 
       User said "kırmızı olarak çizdim" (I drew it red) for the GUIDE. 
       The actual design likely uses the theme color. I'll use a visible red for the TEST to be sure, then switch if needed?
       No, "siteye çizgiler ekledim" implies design lines. I'll use the theme border color.
    */
    --grid-line-color: #414141;
    --grid-red-test: rgba(255, 0, 0, 0.5);
    /* Just in case */
}

[data-theme="light"] {
    --grid-line-color: rgba(0, 0, 0, 0.5);
    /* Ensure other variables are also flipped if style.css isn't catching them for some reason */
    --bg-color: #F1F0EC;
    --text-color: #000;
    --header-bg: #fff;
    --header-text: #000;
    --card-bg: #fff;
    --primary-color: #000;
}

/* GLOBAL LAYOUT RESET */
/* We need a consistent container for the lines to match the content */
.redesign-container {
    max-width: 1720px;
    /* 1600px content + 60px*2 padding? Or just 100%? Let's use specific max-width matching standard */
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 60px;
    /* Match Header Padding */
}

/* 1. VISIBLE GRID LINES */
.global-grid-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    /* Layer 2: Above potential noise/bg, below content */
}

/* ... */



/* 4. NEW INTRO SECTION (Below Hero) */
.intro-section {
    position: relative;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    border-bottom: 1px solid var(--grid-line-color);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Maintain 3-col logic for this part if desired */

    pointer-events: auto;
}

/* Hero Text should also be high */
.hero-text-area {
    /* ... */
    z-index: 30;
    /* Highest priority for title */
}

.line-left,
.line-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--grid-line-color);
}

.line-left {
    left: 100px;
}

.line-right {
    right: 100px;
}

/* 2. GLOBAL CONTENT ALIGNMENT (Reset Padding to Match Grid) */
/* 2. GLOBAL CONTENT ALIGNMENT (Reset Padding to Match Grid) */
.redesign-container,
.work-showcase,
.intro-section,
.contact-section,
header {
    padding-left: 125px !important;
    padding-right: 125px !important;
    max-width: none !important;
    /* Full width flow between lines */
}

/* Header Specifics */
header {
    border-bottom: 1px solid var(--grid-line-color);
    box-sizing: border-box;
    /* Ensure padding includes border */
    padding-top: 25px !important;
    padding-bottom: 25px !important;

    /* Header Background Styles */
    background-color: var(--header-bg);
    mix-blend-mode: normal !important;
    color: var(--header-text);
    z-index: 1000;
    /* Ensure it stays on top */
}

/* Header Grid Lines Extension */
header::before,
header::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--grid-line-color);
    z-index: 1001;
    pointer-events: none;
}

header::before {
    left: 100px;
}

header::after {
    right: 100px;
}

/* Responsive adjustment for header lines */
@media (max-width: 1200px) {
    header::before {
        left: 60px;
    }

    header::after {
        right: 60px;
    }
}

@media (max-width: 768px) {

    header::before,
    header::after {
        display: none;
    }
}

/* 3. RESTORED HERO SECTION (Scatter Focus) */
.hero-section {
    position: relative;
    /* Allow scatter items to flow freely without strict grid columns */
    display: block;
    height: 100vh;
    padding: 0;
    /* No padding on container, let items place themselves relative to viewport */
    /* border-bottom: 1px solid var(--grid-line-color); */
    z-index: 10;
    /* Hoist Hero above Grid Lines (2) */
    background-color: transparent !important;
    /* Ensure transparency so lines show through */
}

/* Hero Text area - Positioned relative to the 100px line logic effectively */
.hero-text-area {
    /* Position purely for text visibility */
    position: absolute;
    top: 30%;
    /* Default Mobile State */
    left: 20px;
    width: calc(100% - 40px);

    /* Fill space between lines */
    box-sizing: border-box;
    pointer-events: auto;
    padding-left: 0 !important;
    /* Force alignment to line */
}

/* Desktop Override */
@media (min-width: 769px) {
    .hero-text-area {
        left: 125px;
        /* Shifted 125px right */
        width: calc(100% - 125px);
    }
}

/* Force Font Size Override */
.hero-title {
    font-size: 45px !important;
    line-height: 1.1;
    margin-bottom: 1rem;
    margin-left: -3px;
    /* Optical optical alignment fix for large fonts */
    text-align: left !important;
    display: block !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 32px !important;
        /* Smaller font on mobile */
    }
}

.line-wrapper {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
}

.hero-subtitle {
    font-size: 16px;
    margin-left: 0;
    text-align: left !important;
    align-self: flex-start !important;
    width: 100%;
}

/* UTILITY CLASSES FOR ABOUT PAGE FIXES */
.responsive-padding {
    padding-left: 125px !important;
    padding-right: 125px !important;
}

.responsive-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 50px;
}

@media (max-width: 1024px) {
    .responsive-padding {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
}

@media (max-width: 768px) {
    .responsive-padding {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .responsive-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Footer Fix for Mobile - REORDERING COPYRIGHT TO BOTTOM */
    .new-footer-section {
        grid-template-columns: 1fr !important;
        padding: 50px 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .footer-col-left,
    .footer-col-right {
        /* Use display: contents to unbox the children so they become direct flex items of the parent */
        display: contents !important;
    }

    /* 1. Logo */
    .footer-logo {
        order: 1;
        margin-bottom: 40px !important;
        text-align: left !important;
    }

    /* 2. CTA (Create Together) */
    .footer-cta {
        order: 2;
        margin-bottom: 40px !important;
        text-align: left !important;
    }

    /* 3. Socials */
    .footer-socials {
        order: 3;
        margin-bottom: 80px !important;
        /* Space before copyright */
        justify-content: flex-start !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    /* 4. Copyright */
    .footer-copyright {
        order: 4;
        text-align: left !important;
        margin-top: 20px !important;
        width: 100%;
    }

    .footer-col-mid {
        display: none !important;
    }

    /* Intro Section Mobile Fix */
    .intro-section {
        grid-template-columns: 1fr !important;
        padding-top: 100px !important;
        padding-bottom: 50px !important;
        gap: 20px !important;
    }

    .hero-about-area {
        grid-column: 1 !important;
    }

    .intro-section .about-btn {
        grid-column: 1 !important;
        justify-self: start !important;
        align-self: flex-start !important;
        margin-top: 10px;
    }
}

/* 4. NEW INTRO SECTION (Below Hero) */
.intro-section {
    position: relative;
    z-index: 20;
    /* Ensure text sits ABOVE any scrolling hero images (10) */
    padding-top: 200px !important;
    padding-bottom: 100px !important;
    border-bottom: 1px solid var(--grid-line-color);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Maintain 3-col logic for this part if desired */
}

.hero-about-area {
    grid-column: 1 / 3;
    /* Expanded to 2 columns */
    /* No border-top needed as it's a new section */
    margin-top: 0;
}

.hero-about-area h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    color: var(--text-color);
}

.hero-about-area p {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 0;
    /* Remove bottom margin since button is moved */
    opacity: 1;
    /* User wants it clear */
    font-family: 'Syne', sans-serif;
    font-weight: 400;
    /* Regular */
    max-width: 75%;
    /* Added to prevent text from being too wide per feedback */
}

/* Responsive adjustment for max-width */
@media (max-width: 768px) {
    .hero-about-area p {
        max-width: 100%;
    }
}

/* Position the button in the 3rd column */
.intro-section .about-btn {
    grid-column: 3;
    justify-self: end;
    align-self: end;
    /* Bottom aligned */
    margin-bottom: 5px;

    /* Replicate Nav Button Style */
    margin: 0;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    background-color: transparent;
    color: var(--text-color);
    padding: 0 24px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grid-line-color);
    border-radius: 100px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.intro-section .about-btn:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
    border-color: var(--text-color);
}

/* 5. WORK SHOWCASE ALIGNMENT */
.work-showcase {
    margin-top: 0;
}

.section-header {
    display: none;
    /* Removed/Hidden as it's now inside grid */
}

/* Dynamic Grid */
.project-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0 !important;
    width: 100%;
    border-left: 1px solid var(--grid-line-color);
    /* Left border matches grid line position effectively if container padding is right? 
       Wait, container padding is 125px. 
       Grid line is at 100px.
       The grid container is INSIDE the 125px padding. 
       So the grid starts at 125px. 
       The left line is at 100px. 
       So there is a 25px gap between the line and the grid?
       The user said "Selected Works kısmındaki gridler işaretlediğim gibi olacak".
       The image showed the grid STARTING at the red line? 
       If so, we might need to negative margin the grid to touch the 100px line?
       OR (Simpler): The grid lines are just borders on the cards.
       If the container has simple padding, the grid is inside.
       Let's stick to the 125px padding for now as "content alignment".
       If it needs to touch the 100px line, we would need `margin-left: -25px`.
       Let's keep standard alignment for now to align with "Hello I'm Fatih".
    */
}

/* Title Card (First Cell) */
.title-card {
    display: flex;
    align-items: flex-start;
    /* Top aligned or center? Image shows top-ish "Selected Works" */
    justify-content: flex-start;
    padding: 40px;
    border-right: 1px solid var(--grid-line-color);
    border-bottom: 1px solid var(--grid-line-color);
    aspect-ratio: 1 / 1.2;
    box-sizing: border-box;
}

.title-card h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-color);
    margin: 0;
    line-height: 1.2;
}

/* Adjust project borders to match the 3-column inner grid */
.project-card {
    border-right: 1px solid var(--grid-line-color);
    /* Inner dividers */
    border-bottom: 1px solid var(--grid-line-color);
    padding: 0;
    /* Image fills card? Or padded? Usually full bleed images in cards with overlay */
    /* Previous CSS had 40px padding? Let's check. 
       If images are full size, no padding.
       Let's allow full size images.
    */
    position: relative;
    aspect-ratio: 1 / 1.2;
    display: block;
    overflow: hidden;
}

.project-card:nth-child(3n) {
    border-right: none;
    /* Last column has no right border */
}


/* Responsive Adjustments */
@media (max-width: 1200px) {
    .line-left {
        left: 60px;
    }

    .line-right {
        right: 60px;
    }

    .redesign-container,
    .work-showcase,
    .intro-section,
    .contact-section,
    header {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }

    .hero-text-area {
        left: 80px;
        width: calc(100% - 160px);
    }
}

@media (max-width: 768px) {
    .global-grid-lines {
        display: none;
    }

    /* Provide standard mobile experience */
    .redesign-container,
    .work-showcase,
    .intro-section,
    .contact-section,
    header {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero-text-area {
        left: 20px;
        width: calc(100% - 40px);
        top: 60%;
        /* Lower on mobile */
    }

    .intro-section {
        padding-top: 200px !important;
        padding-bottom: 100px !important;
        border-bottom: 1px solid var(--grid-line-color);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        /* Maintain 3-col logic for this part if desired */
    }

    .hero-about-area {
        grid-column: 1 / 2;
        /* First Column */
        /* No border-top needed as it's a new section */
        margin-top: 0;
    }

    .hero-about-area h2 {
        font-size: 2rem;
        margin-bottom: 15px;
        font-family: var(--font-heading);
        color: var(--text-color);
    }

    .hero-about-area p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 25px;
        opacity: 0.8;
    }

    /* 5. WORK SHOWCASE ALIGNMENT */
    .work-showcase {
        margin-top: 0;
    }

    .section-header {
        padding: 40px 0;
        border-bottom: 1px solid var(--grid-line-color);
        margin-bottom: 0;
    }

    .project-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 0 !important;
        width: 100%;
        border-left: 1px solid var(--grid-line-color);
        /* Add left border to grid to match line? OR just use lines */
        /* The 100px grid lines are overlay. The project grid should probably fill the space between them. */
        position: relative;
        z-index: 10;
        /* Ensure above grid lines (2) & scatter (5) */
        pointer-events: auto;
    }

    /* Adjust project borders to match the 3-column inner grid */
    .project-card {
        border-right: 1px solid var(--grid-line-color);
        /* Inner dividers */
        border-bottom: 1px solid var(--grid-line-color);
        padding: 40px;
        aspect-ratio: 1 / 1.2;
    }

    .project-card:nth-child(3n) {
        border-right: none;
        /* Last column has no right border (aligns with 100px line) */
    }


    /* Responsive Adjustments */
    @media (max-width: 1200px) {
        .line-left {
            left: 60px;
        }

        .line-right {
            right: 60px;
        }

        .redesign-container,
        .work-showcase,
        .intro-section,
        .contact-section,
        header {
            padding-left: 80px !important;
            padding-right: 80px !important;
        }

        .hero-text-area {
            left: 80px;
            width: calc(100% - 160px);
        }
    }

    @media (max-width: 768px) {
        .global-grid-lines {
            display: none;
        }

        /* Provide standard mobile experience */
        .redesign-container,
        .work-showcase,
        .intro-section,
        .contact-section,
        header {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .hero-text-area {
            left: 20px;
            width: calc(100% - 40px);
            top: 60%;
            /* Lower on mobile */
        }

        .hero-title {
            font-size: 24px !important;
            /* Reduced to 24px for long words */
            line-height: 1.2;
            overflow-wrap: break-word;
            word-wrap: break-word;
            hyphens: auto;
        }

        .intro-section {
            grid-template-columns: 1fr;
        }

        .project-grid {
            grid-template-columns: 1fr !important;
        }

        .project-card {
            border-right: none;
        }
    }

    /* Force Scatter Container z-index */
    .hero-scatter-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Closing media query if open */

    /* Force Scatter Container z-index */
    .hero-scatter-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5 !important;
        pointer-events: none;

        /* Entrance Animation */
        opacity: 0;
        animation: heroImagesFadeIn 1.5s ease-out 0.5s forwards;
    }

    @keyframes heroImagesFadeIn {
        0% {
            opacity: 0;
            transform: scale(1.1);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

}

/* --- PROJECT HOVER MARQUEE (Slow Flow) --- */
.project-image {
    position: relative;
    overflow: hidden;
}

.project-image img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.project-image .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent overlay */
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Mask the marquee */
    z-index: 20;
    pointer-events: none;
}

/* Hover States */
.project-card:hover .project-image img {
    transform: scale(1.05);
}

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

.project-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap !important;
    transform: rotate(-3deg) scale(1.1);
    /* Slight tilt */
}

.project-marquee-tracking {
    display: inline-block;
    white-space: nowrap !important;
    animation: marquee-scroll 20s linear infinite;
    /* SLOW speed (20s) */
    font-family: 'Syne', sans-serif;
    font-size: 3rem;
    /* Large impact */
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
    /* Outline style for elegance */
    text-transform: uppercase;
    will-change: transform;
}

/* Fill effect on hover? Or just keep outline? User said "flowing titles". */
/* Let's keep it simple outline or filled. User complained about "font exploded" (filled overlapping). Outline is cleaner. */

.project-marquee-tracking span {
    display: inline-block;
    padding-right: 50px;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

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


/* FOOTER LINK HOVER EFFECT */
.footer-link-hover {
    position: relative;
    text-decoration: none !important;
    display: inline-block;
}

.footer-link-hover::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.footer-link-hover:hover::after {
    width: 100%;
}