@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=DM+Mono:wght@300;400&display=swap");

@layer reset, tokens, base, layout, cube, ui, cards, reveal, theme, responsive;

@layer reset {

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

@layer tokens {
    :root {
        color-scheme: light;

        --cream: #faf8f4;
        --cream-warm: #f5f0e8;
        --white: #ffffff;
        --green-900: #1a3a2a;
        --green-800: #264d38;
        --green-700: #2d6a4f;
        --green-600: #40916c;
        --green-500: #52b788;
        --green-400: #74c69d;
        --green-300: #95d5b2;
        --green-200: #b7e4c7;
        --green-100: #d8f3dc;
        --green-50: #edf7f0;
        --logo-green: #539457;
        --text-primary: #1a2e23;
        --text-secondary: #4a6858;
        --text-muted: #8fa89a;
        --text-faint: #b8cdc2;

        --bg: var(--cream);
        --fg: var(--text-primary);
        --muted: var(--text-muted);
        --accent: var(--green-700);
        --accent-soft: var(--green-500);

        --font-display: "Outfit", sans-serif;
        --font-mono: "DM Mono", monospace;
        --hairline: 0.0625rem;
        --ui-inset: 2rem;
        --card-bg: rgba(255, 255, 255, 0.72);
        --card-border: rgba(45, 106, 79, 0.18);
        --nav-x: calc(var(--ui-inset) + 0.125rem);
        --reveal-offset: 0.625rem;
        --reveal-duration: 0.5s;
        --z-ui: 10;
    }
}

@layer base {
    html {
        color-scheme: light;
    }

    body {
        background: var(--bg);
        color: var(--fg);
        font-family: var(--font-mono);
        overflow-x: hidden;
        transition: background 0.3s ease, color 0.3s ease;
    }

    ::selection {
        background: var(--green-200);
        color: var(--green-900);
    }
}

@layer layout {
    #scene {
        position: fixed;
        inset: 0;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1100px;
        pointer-events: none;
    }

    #scroll_container {
        position: relative;
        z-index: 1;
    }

    section {
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 6rem calc(5rem + var(--ui-inset)) 6rem 5rem;
    }
}

@layer cube {
    #cube {
        --s: min(74vw, 74vh, 560px);
        width: var(--s);
        height: var(--s);
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(90deg) rotateY(0deg);
        will-change: transform;
    }

    .face {
        position: absolute;
        inset: 0;
        overflow: hidden;
        backface-visibility: hidden;
        background: repeating-linear-gradient(0deg,
                rgba(45, 106, 79, 0.04) 0,
                rgba(45, 106, 79, 0.04) 1px,
                transparent 1px,
                transparent 48px),
            repeating-linear-gradient(90deg,
                rgba(45, 106, 79, 0.04) 0,
                rgba(45, 106, 79, 0.04) 1px,
                transparent 1px,
                transparent 48px),
            linear-gradient(135deg, #f0ede6 0%, #e8e4db 100%);

        img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        &:has(img) .face-ph {
            display: none;
        }
    }

    .face-ph {
        position: absolute;
        bottom: 1.5rem;
        left: 1.75rem;
        font-family: var(--font-display);
        font-size: clamp(2rem, 8vw, 5rem);
        font-weight: 300;
        letter-spacing: 0.04em;
        color: rgba(45, 106, 79, 0.08);
        pointer-events: none;
        user-select: none;
    }

    .face[data-face="front"] {
        transform: translateZ(calc(var(--s) / 2));
    }

    .face[data-face="back"] {
        transform: rotateY(180deg) translateZ(calc(var(--s) / 2));
    }

    .face[data-face="right"] {
        transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
    }

    .face[data-face="left"] {
        transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
    }

    .face[data-face="top"] {
        transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
    }

    .face[data-face="bottom"] {
        transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
    }
}

@layer ui {
    #hud {
        position: fixed;
        top: var(--ui-inset);
        right: var(--ui-inset);
        z-index: var(--z-ui);
        text-align: right;
        font-size: 0.65rem;
        letter-spacing: 0.15em;
        color: var(--muted);
        text-transform: uppercase;

        .progress-bar {
            width: 7.5rem;
            height: var(--hairline);
            background: var(--green-200);
            margin-block-start: 0.5rem;
            margin-inline-start: auto;
            position: relative;
            overflow: hidden;
        }

        .progress-fill {
            position: absolute;
            inset-block: 0;
            inset-inline-start: 0;
            width: 0%;
            background: var(--accent);
            transition: width 0.1s linear;
        }

        .scene-label {
            font-size: 0.6rem;
            color: var(--accent);
            margin-block-start: 0.4rem;
        }
    }

    #scene_strip {
        position: fixed;
        left: var(--nav-x);
        top: 50%;
        translate: -50% -50%;
        z-index: var(--z-ui);
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .scene-dot {
        position: relative;
        display: block;
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        background: var(--green-200);
        transition: background 0.3s, scale 0.3s;
        cursor: pointer;

        &::before {
            content: "";
            position: absolute;
            inset: -0.2rem;
        }

        &.active {
            background: var(--accent);
            scale: 1.8;
        }
    }

    #theme_toggle {
        position: fixed;
        bottom: var(--ui-inset);
        left: var(--nav-x);
        translate: -50% 0;
        z-index: var(--z-ui);
        width: 2rem;
        height: 2rem;
        border: none;
        background: var(--green-100);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;

        &:hover {
            background: var(--green-200);
        }

        svg {
            width: 0.875rem;
            height: 0.875rem;
            position: absolute;
            transition: opacity 0.3s ease, rotate 0.3s ease;
            color: var(--accent);
        }

        .icon-sun {
            opacity: 0;
            rotate: -90deg;
        }

        .icon-moon {
            opacity: 1;
            rotate: 0deg;
        }
    }

    #face_caption {
        --caption-x: 0px;
        --caption-y: 0px;
        --caption-rotate: 0deg;
        --caption-scale: 1;
        --caption-shadow-alpha: 0.08;
        --caption-ring: 0rem;
        --caption-sheen: 0;
        position: fixed;
        bottom: clamp(2.4rem, 6vh, 4.25rem);
        left: 50%;
        translate: -50% 0;
        transform: translate3d(var(--caption-x), var(--caption-y), 0) rotate(var(--caption-rotate)) scale(var(--caption-scale));
        transform-origin: center;
        z-index: var(--z-ui);
        text-align: center;
        pointer-events: none;
        user-select: none;
        min-width: min(40vw, 17rem);
        padding: 0.5rem 1.25rem 0.55rem;
        border: 1px solid color-mix(in srgb, var(--logo-green) 72%, transparent);
        background: rgba(250, 248, 244, 0.72);
        backdrop-filter: blur(8px) saturate(125%);
        -webkit-backdrop-filter: blur(8px) saturate(125%);
        box-shadow:
            0 0.55rem 1.4rem rgba(26, 58, 42, var(--caption-shadow-alpha)),
            0 0 0 var(--caption-ring) color-mix(in srgb, var(--logo-green) 14%, transparent);
        overflow: hidden;
        will-change: transform, box-shadow;
        transition: opacity 0.26s ease, filter 0.26s ease, transform 0.26s ease, background 0.2s ease, border-color 0.2s ease;
    }

    #face_caption.is-exiting {
        opacity: 0;
        filter: blur(2px);
        transform: translate3d(var(--caption-x), calc(var(--caption-y) + 0.45rem), 0) rotate(var(--caption-rotate)) scale(0.985);
    }

    #face_caption.is-entering {
        animation: caption-plaque-enter 0.44s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    #face_caption::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg,
                transparent 0%,
                rgba(83, 148, 87, 0.12) 48%,
                transparent 78%);
        opacity: var(--caption-sheen);
        pointer-events: none;
    }

    #face_caption_num {
        display: none;
    }

    #face_caption_name {
        font-family: var(--font-mono);
        font-size: clamp(0.72rem, 1.15vw, 0.95rem);
        font-weight: 400;
        letter-spacing: 0.22em;
        color: var(--logo-green);
        opacity: 1;
        line-height: 1;
        text-transform: uppercase;
        position: relative;
        z-index: 1;
    }

    #face_caption.is-entering #face_caption_name {
        animation: caption-name-settle 0.44s ease both;
    }

    #face_caption.is-exiting #face_caption_name {
        opacity: 0.25;
    }

    @keyframes caption-plaque-enter {
        0% {
            opacity: 0;
            filter: blur(2px);
            transform: translate3d(var(--caption-x), calc(var(--caption-y) + 0.45rem), 0) rotate(var(--caption-rotate)) scale(0.985);
        }

        100% {
            opacity: 1;
            filter: blur(0);
            transform: translate3d(var(--caption-x), var(--caption-y), 0) rotate(var(--caption-rotate)) scale(var(--caption-scale));
        }
    }

    @keyframes caption-name-settle {
        0% {
            opacity: 0.2;
            letter-spacing: 0.34em;
        }

        100% {
            opacity: 1;
            letter-spacing: 0.22em;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #face_caption {
            transform: none;
            transition: none;
        }

        #face_caption::before {
            display: none;
        }

        #face_caption.is-entering,
        #face_caption.is-entering #face_caption_name {
            animation: none;
        }

        #face_caption.is-exiting {
            opacity: 1;
            filter: none;
        }
    }

    #credit {
        position: fixed;
        right: var(--ui-inset);
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        transform-origin: right center;
        z-index: var(--z-ui);
        font-family: var(--font-mono);
        font-size: 0.65rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;

        a {
            color: var(--muted);
            text-decoration: none;
            transition: color 0.3s;

            &:hover {
                color: var(--accent);
            }
        }
    }
}

@layer cards {
    .text-card {
        max-width: 23.75rem;
        padding: 2.25rem 2rem;
        background: var(--card-bg);
        border-left: var(--hairline) solid var(--card-border);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        overflow: hidden;
        transition: background 0.3s ease, border-color 0.3s ease;
        border-radius: 2px;

        &.right {
            margin-inline-start: auto;
            border-left: none;
            border-right: var(--hairline) solid var(--card-border);
            text-align: right;

            .h-line {
                transform-origin: right;
                margin-inline-start: auto;
            }
        }

        &.center {
            margin-inline: auto;
            border-left: none;
            border-top: var(--hairline) solid var(--card-border);
            text-align: center;
            max-width: 28.75rem;

            .h-line {
                transform-origin: center;
                margin-inline: auto;
            }
        }
    }

    .tag {
        font-size: 0.6rem;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--accent);
        margin-block-end: 1.1rem;
        font-weight: 400;
    }

    :where(h1, h2) {
        font-family: var(--font-display);
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 0.95;
        color: var(--green-900);
        word-break: break-word;
        overflow-wrap: break-word;
    }

    h1 {
        font-size: clamp(2rem, 5vw, 3.5rem);
    }

    h2 {
        font-size: clamp(1.6rem, 4vw, 2.8rem);
    }

    .body-text {
        font-size: 0.78rem;
        line-height: 1.8;
        color: var(--text-secondary);
        margin-block-start: 1.25rem;
    }

    .stat-row {
        display: flex;
        gap: 2.5rem;
        margin-block-start: 2rem;
        flex-wrap: wrap;
    }

    .stat {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .stat-num {
        font-family: var(--font-display);
        font-size: 2.2rem;
        font-weight: 600;
        color: var(--accent);
        line-height: 1;
    }

    .stat-label {
        font-size: 0.58rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .h-line {
        width: 3.125rem;
        height: 2px;
        background: linear-gradient(90deg, var(--green-400), var(--green-600));
        margin-block-end: 1.2rem;
        transform-origin: left;
        border-radius: 1px;
    }

    .cta-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        margin-block-start: 1.75rem;
    }

    .text-card.right .cta-row {
        justify-content: flex-end;
    }

    .cta {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.6rem 1.25rem;
        border: var(--hairline) solid var(--accent);
        color: var(--accent);
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.25s, color 0.25s, transform 0.2s;
        border-radius: 2px;

        &:hover {
            background: var(--accent);
            color: var(--white);
            transform: translateY(-1px);
        }

        svg {
            width: 0.6875rem;
            height: 0.6875rem;
        }
    }

    .cta-back {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.6rem 1.25rem;
        border: var(--hairline) solid var(--green-200);
        color: var(--text-muted);
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        text-decoration: none;
        transition: background 0.25s, color 0.25s, border-color 0.25s;
        border-radius: 2px;

        &:hover {
            background: var(--green-50);
            border-color: var(--green-400);
            color: var(--green-700);
        }

        svg {
            width: 0.6875rem;
            height: 0.6875rem;
        }
    }
}

@layer reveal {
    :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back) {
        opacity: 0;
        translate: 0 var(--reveal-offset);
    }

    :is(h1, h2) {
        translate: 0 1.125rem;
        transition: opacity var(--reveal-duration) ease 0.08s,
            translate var(--reveal-duration) ease 0.08s;
    }

    .tag {
        transition: opacity var(--reveal-duration) ease,
            translate var(--reveal-duration) ease;
    }

    .body-text {
        transition: opacity var(--reveal-duration) ease 0.2s,
            translate var(--reveal-duration) ease 0.2s;
    }

    .stat-row {
        transition: opacity var(--reveal-duration) ease 0.3s,
            translate var(--reveal-duration) ease 0.3s;
    }

    :is(.cta, .cta-back) {
        transition: opacity var(--reveal-duration) ease 0.35s,
            translate var(--reveal-duration) ease 0.35s, background 0.25s, color 0.25s,
            border-color 0.25s, transform 0.2s;
    }

    .h-line {
        opacity: 0;
        scale: 0 1;
        transition: opacity 0.4s ease, scale 0.4s ease;
    }

    :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back).visible {
        opacity: 1;
        translate: 0 0;
    }

    .h-line.visible {
        opacity: 1;
        scale: 1 1;
    }
}

@layer theme {
    /* Light-only design — no dark mode toggle needed */
}

@layer nav {
    #site_nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.15rem var(--ui-inset);
        pointer-events: none;
    }

    #site_nav > * {
        pointer-events: auto;
    }

    .nav-logo {
        display: inline-flex;
        align-items: center;
        width: 3.8rem;
        height: 5.1rem;
        text-decoration: none;
        transition: opacity 0.25s, transform 0.25s;
    }

    .nav-logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .nav-logo:hover {
        opacity: 0.82;
        transform: translateY(-1px);
    }

    #nav_toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.55rem 1.15rem;
        border: var(--hairline) solid var(--card-border);
        border-radius: 2rem;
        background: var(--card-bg);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent);
        cursor: pointer;
        transition: border-color 0.25s, background 0.25s;
    }

    #nav_toggle:hover {
        border-color: var(--green-400);
        background: var(--green-50);
    }

    .nav-btn-icon {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 0.9rem;
    }

    .nav-btn-icon span {
        height: 1px;
        background: currentColor;
        transition: transform 0.3s ease, translate 0.3s ease;
    }

    body.nav-open .nav-btn-icon span:first-child {
        transform: rotate(45deg);
        translate: 0 2.5px;
    }

    body.nav-open .nav-btn-icon span:last-child {
        transform: rotate(-45deg);
        translate: 0 -2.5px;
    }

    #nav_overlay {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(250, 248, 244, 0.88);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.nav-open {
        overflow: hidden;
    }

    body.nav-open #nav_overlay {
        opacity: 1;
        visibility: visible;
    }

    .nav-overlay-grid {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding: var(--ui-inset);
        width: min(100%, 30rem);
    }

    .nav-links {
        display: flex;
        flex-direction: column;
    }

    .nav-links a {
        display: flex;
        align-items: baseline;
        gap: 1.25rem;
        padding-block: 0.55rem;
        font-family: var(--font-display);
        font-size: clamp(1.9rem, 5.5vw, 2.9rem);
        font-weight: 300;
        letter-spacing: 0.01em;
        color: var(--green-900);
        text-decoration: none;
        opacity: 0;
        translate: 0 0.8rem;
        transition: opacity 0.4s ease, translate 0.4s ease, color 0.25s;
        transition-delay: 0s;
    }

    body.nav-open .nav-links a {
        opacity: 1;
        translate: 0 0;
        transition-delay: calc(0.05s + var(--i, 0) * 0.05s);
    }

    .nav-links a:hover {
        color: var(--accent);
    }

    .nav-links a[aria-current="page"] {
        font-weight: 600;
        color: var(--accent);
    }

    .nav-num {
        font-family: var(--font-mono);
        font-size: 0.68rem;
        letter-spacing: 0.2em;
        color: var(--accent-soft);
    }

    .nav-overlay-footer {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.15em;
        color: var(--text-muted);
    }

    .nav-overlay-footer a {
        color: var(--accent);
        text-decoration: none;
    }

    :is(.nav-logo, #nav_toggle, .nav-links a, .nav-overlay-footer a):focus-visible {
        outline: 2px solid var(--green-500);
        outline-offset: 3px;
        border-radius: 2px;
    }

    /* HUD'u sabit menünün altına indir (yalnızca ana sayfada var) */
    #hud {
        top: calc(var(--ui-inset) + 3.4rem);
    }

    @media (width <=56.25em) {
        #site_nav {
            padding: 0.9rem 1.25rem;
        }

        #hud {
            top: 4.2rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {

        #nav_overlay,
        .nav-links a,
        .nav-btn-icon span {
            transition: none;
        }
    }
}

@layer responsive {
    @media (width <=56.25em) {
        #hud {
            top: 1rem;
            right: 1rem;
        }

        #scene_strip {
            display: none;
        }

        #theme_toggle {
            bottom: 1rem;
            left: 1.25rem;
            translate: 0 0;
        }

        #face_caption {
            bottom: 1rem;
        }

        section {
            min-height: 150vh;
            align-items: flex-end;
            padding: 0 1.5rem 3.5rem;
        }

        #s0 {
            min-height: 100vh;
            align-items: center;
            padding: 4rem 1.5rem;
        }

        :is(.text-card, .text-card.right, .text-card.center) {
            max-width: 100%;
            padding: 1.5rem 1.25rem;
        }

        .body-text {
            line-height: 1.55;
        }

        .stat-row {
            gap: 1.5rem;
            margin-block-start: 1.25rem;
        }

        .cta-row {
            margin-block-start: 1.25rem;
        }
    }
}