:root {
    --ink: #0a1020;
    --paper: #eef3fb;
    --muted: #9aabbf;
    --line: rgba(238, 243, 251, .16);
    --acid: #9ec4ff;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--acid) #070b14;
}

html::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html::-webkit-scrollbar-track {
    background: #070b14;
}

html::-webkit-scrollbar-thumb {
    background: var(--acid);
    border: 3px solid #070b14;
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--paper);
}

html::-webkit-scrollbar-corner {
    background: #070b14;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: "Work Sans", sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .13;
    z-index: 30;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.site-wrap {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 5.25rem;
}

.site-wrap::before {
    content: "";
    position: absolute;
    top: 170px;
    right: -20vw;
    width: 55vw;
    height: 55vw;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(158, 196, 255, .18), transparent 65%);
    filter: blur(12px);
    pointer-events: none;
}

.site-wrap::after {
    content: "";
    position: absolute;
    top: 900px;
    left: -20vw;
    width: 45vw;
    height: 45vw;
    border: 1px solid rgba(158, 196, 255, .18);
    border-radius: 50%;
    pointer-events: none;
}

.display {
    font-family: "Fraunces", serif;
    letter-spacing: -.055em;
}

.eyebrow {
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 700;
    color: var(--acid);
}

#anasayfa {
    min-height: calc(100 * min(var(--vh, 1vh), 1vh) - 5.25rem);
}

.line-grid {
    background-image: linear-gradient(to right, rgba(238, 243, 251, .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(238, 243, 251, .055) 1px, transparent 1px);
    background-size: 72px 72px;
}

.nav-link {
    color: #eef3fb;
    font-weight: 600;
    position: relative;
    transition: color .25s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--acid);
    transition: transform .25s ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
    color: var(--paper);
}

.nav-link.is-active::after {
    transform: scaleX(1);
}

.focus-ring:focus-visible {
    outline: 2px solid var(--acid);
    outline-offset: 4px;
}

.primary-btn,
.secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    border-radius: 999px;
    padding: .95rem 1.25rem;
    font-size: .88rem;
    font-weight: 700;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.primary-btn {
    background: var(--acid);
    color: #0c1730;
}

.secondary-btn {
    background: transparent;
    color: var(--paper);
    border: 1px solid rgba(238, 243, 251, .35);
}

.primary-btn:hover,
.secondary-btn:hover {
    transform: translateY(-3px);
}

.secondary-btn:hover {
    background: var(--paper);
    color: var(--ink);
}

.hero-inner {
    min-height: calc(78 * min(var(--vh, 1vh), 1vh));
}

.hero-orb {
    position: absolute;
    width: clamp(220px, 32vw, 460px);
    aspect-ratio: 1;
    right: 4%;
    bottom: 0;
    border-radius: 46% 54% 34% 66% / 55% 35% 65% 45%;
    background: var(--acid);
    transform: translate3d(var(--orb-x, 0px), var(--orb-y, 0px), 0) rotate(-18deg);
    box-shadow: 0 0 100px rgba(158, 196, 255, .18);
    animation: orbMorph 14s ease-in-out infinite, orbGlow 4.5s ease-in-out infinite;
    will-change: transform, border-radius;
}

.hero-orb::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 60%;
    right: -14%;
    top: -16%;
    border: 1px solid var(--paper);
    border-radius: 50%;
}

.project-card {
    border: 1px solid var(--line);
    background: #121a2c;
    transform-style: preserve-3d;
    transition: border-color .3s ease, box-shadow .3s ease;
    will-change: transform;
}

.project-card:hover,
.project-card:focus-within {
    border-color: rgba(158, 196, 255, .72);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}

.project-image {
    transition: transform .65s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
}

.project-card:hover .project-image,
.project-card:focus-within .project-image {
    transform: scale(1.08);
    filter: brightness(.7);
}

.project-overlay {
    opacity: 0;
    transition: opacity .35s ease;
}

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

.blog-card {
    border-top: 1px solid var(--line);
    transition: background .28s ease, padding .28s ease;
}

.blog-card:hover,
.blog-card:focus-within {
    background: rgba(238, 243, 251, .055);
    padding-left: 1rem;
    padding-right: 1rem;
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

.hero-reveal {
    opacity: 0;
    transform: translateY(24px);
}

body.is-ready .hero-reveal {
    animation: heroIn .95s cubic-bezier(.16, 1, .3, 1) forwards;
}

body.is-ready .hero-reveal:nth-child(1) {
    animation-delay: .08s;
}

body.is-ready .hero-reveal:nth-child(2) {
    animation-delay: .18s;
}

body.is-ready .hero-reveal:nth-child(3) {
    animation-delay: .28s;
}

body.is-ready .hero-reveal:nth-child(4) {
    animation-delay: .4s;
}

body.is-ready .hero-reveal:nth-child(5) {
    animation-delay: .5s;
}

@keyframes heroIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-view {
    display: none;
}

.detail-view.is-open {
    display: block;
    animation: heroIn .45s ease forwards;
}

.is-reading [data-listing] {
    display: none;
}

.detail-back {
    display: inline-flex;
    align-items: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--acid);
}

.stack-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
}

.stack-list li {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem .8rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--paper);
}

.detail-image {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    margin-top: 2rem;
}

.detail-body {
    max-width: 42rem;
    margin-top: 2rem;
    color: #d4deea;
    font-size: 1.125rem;
    line-height: 2;
}

.detail-body p + p {
    margin-top: 1.25rem;
}

.load-error {
    color: var(--muted);
    line-height: 1.6;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    background: #070b14;
}

.page-loader-bar {
    width: min(220px, 46vw);
    height: 2px;
    background: rgba(238, 243, 251, .16);
    overflow: hidden;
}

.page-loader-bar::after {
    content: "";
    display: block;
    height: 100%;
    background: var(--acid);
    transform: scaleX(0);
    transform-origin: left center;
    animation: loadBar .7s cubic-bezier(.77, 0, .18, 1) forwards;
}

.page-loader.is-done {
    animation: loaderLeave .5s cubic-bezier(.77, 0, .18, 1) forwards;
}

@keyframes loadBar {
    to {
        transform: scaleX(1);
    }
}

@keyframes loaderLeave {
    to {
        transform: translateY(-101%);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal,
    .hero-reveal,
    .split-word > span,
    .preview-card,
    .preview-feature,
    .site-header,
    .site-wrap,
    .intro {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none !important;
    }

    .intro {
        display: none;
    }

    .cursor {
        display: none !important;
    }

    .page-loader {
        display: none !important;
    }
}

body.intro-active {
    overflow: hidden;
}

body.intro-active .site-wrap {
    transform: scale(1.045);
    filter: blur(16px);
}

body.is-sharp .site-wrap {
    transform: none;
    filter: none;
    transition: transform .7s ease, filter .7s ease;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(8, 14, 28, .96);
    border-bottom: 2px solid rgba(158, 196, 255, .8);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .38);
    backdrop-filter: blur(18px);
    transform: translateY(-120%);
}

body.is-ready .site-header {
    transform: none;
    transition: transform .4s ease;
}

body.is-ready .site-header.is-away {
    transform: translateY(-110%);
}

.intro {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    pointer-events: none;
    isolation: isolate;
}

.intro-veil {
    position: absolute;
    inset: 0;
    background: #070b14;
}

.intro-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.intro-kicker {
    margin: 0 0 1rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 700;
    color: var(--acid);
    opacity: 0;
    animation: fadeUp .7s ease forwards .15s;
}

.intro-name {
    margin: 0;
    font-size: clamp(3rem, 9vw, 8rem);
    line-height: .9;
    clip-path: inset(0 100% 0 0);
    animation: clipReveal 1s cubic-bezier(.16, 1, .3, 1) forwards .35s;
}

.intro-rule {
    display: block;
    width: min(42vw, 280px);
    height: 2px;
    margin: 1.4rem auto 0;
    background: var(--acid);
    transform: scaleX(0);
    transform-origin: center;
    animation: ruleIn .7s cubic-bezier(.16, 1, .3, 1) forwards .85s;
}

.intro-curtain {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background: var(--acid);
    z-index: 3;
    will-change: transform;
}

.intro-curtain--top {
    top: 0;
    transform: translateY(-101%);
}

.intro-curtain--bottom {
    bottom: 0;
    transform: translateY(101%);
}

.intro.is-covered .intro-content,
.intro.is-covered .intro-veil,
.intro.is-exit .intro-content,
.intro.is-exit .intro-veil {
    visibility: hidden;
}

.intro.is-wiping .intro-curtain--top {
    animation: curtainDown .72s cubic-bezier(.77, 0, .18, 1) forwards;
}

.intro.is-wiping .intro-curtain--bottom {
    animation: curtainUp .72s cubic-bezier(.77, 0, .18, 1) forwards;
}

.intro.is-exit .intro-curtain--top {
    animation: curtainOutTop .8s cubic-bezier(.77, 0, .18, 1) forwards;
}

.intro.is-exit .intro-curtain--bottom {
    animation: curtainOutBottom .8s cubic-bezier(.77, 0, .18, 1) forwards;
}

.cursor {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    body.has-cursor.is-ready,
    body.has-cursor.is-ready a,
    body.has-cursor.is-ready button {
        cursor: none;
    }

    .cursor {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        pointer-events: none;
        mix-blend-mode: difference;
        opacity: 0;
        visibility: hidden;
    }

    body.has-cursor.is-ready .cursor {
        opacity: 1;
        visibility: visible;
    }

    body.intro-active .cursor {
        opacity: 0;
        visibility: hidden;
        z-index: 5;
    }

    .cursor-ring,
    .cursor-dot {
        position: absolute;
        border-radius: 50%;
        translate: -50% -50%;
    }

    .cursor-ring {
        width: 42px;
        height: 42px;
        border: 1px solid #fff;
        transition: width .25s ease, height .25s ease, background .25s ease;
    }

    .cursor-dot {
        width: 6px;
        height: 6px;
        background: var(--acid);
    }

    body.cursor-grow .cursor-ring {
        width: 78px;
        height: 78px;
        background: rgba(158, 196, 255, .12);
    }
}

.brand-link {
    position: relative;
    display: inline-block;
}

.primary-btn,
.secondary-btn {
    position: relative;
    overflow: hidden;
}

.primary-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .45) 45%, transparent 70%);
    transform: translateX(-120%);
}

.primary-btn:hover::before {
    animation: shine 0.7s ease;
}

.split-title .split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    margin-right: .18em;
}

.split-title .split-word > span {
    display: inline-block;
    transform: translateY(115%);
}

body.is-ready .split-title .split-word > span {
    animation: wordUp 1s cubic-bezier(.16, 1, .3, 1) forwards;
}

.ticker {
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: #0e1524;
    padding: .85rem 0;
}

.ticker-track {
    display: flex;
    gap: 3.2rem;
    width: max-content;
    animation: marquee 28s linear infinite;
}

.ticker-track span {
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    color: #8d9aab;
    white-space: nowrap;
}

.ticker-track span::before {
    content: "✦";
    margin-right: 3.2rem;
    color: var(--acid);
}

#projeler.visible .project-card {
    animation: cardIn .85s cubic-bezier(.16, 1, .3, 1) both;
}

#projeler.visible .project-card:nth-child(1) { animation-delay: .05s; }
#projeler.visible .project-card:nth-child(2) { animation-delay: .12s; }
#projeler.visible .project-card:nth-child(3) { animation-delay: .19s; }
#projeler.visible .project-card:nth-child(4) { animation-delay: .26s; }
#projeler.visible .project-card:nth-child(5) { animation-delay: .33s; }
#projeler.visible .project-card:nth-child(6) { animation-delay: .4s; }

.more-link {
    color: var(--acid);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.more-link::after {
    content: " →";
    display: inline-block;
    transition: transform .3s ease;
}

.more-link:hover::after {
    transform: translateX(6px);
}

.preview-card,
.preview-feature {
    position: relative;
    opacity: 0;
}

.preview-card.is-in {
    animation: previewIn 1.5s cubic-bezier(.16, 1, .3, 1) forwards;
}

.preview-feature.is-in {
    animation: previewIn 1.65s cubic-bezier(.16, 1, .3, 1) forwards;
}

.preview-card.is-in .project-image,
.preview-card.is-in img,
.preview-feature.is-in img {
    animation: previewZoom 1.8s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: inherit;
}

.preview-card.is-settled,
.preview-feature.is-settled {
    opacity: 1;
    animation: none;
    filter: none;
    transform: none;
}

@keyframes previewIn {
    from {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes previewZoom {
    from {
        transform: scale(1.06);
    }
    to {
        transform: none;
    }
}

.contact-form {
    display: grid;
    gap: 1.15rem;
    max-width: 36rem;
    margin-top: 2.5rem;
}

.contact-form .primary-btn {
    justify-self: start;
}

.contact-field {
    display: grid;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 0;
    background: #10182a;
    color: var(--paper);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: .9rem 1rem;
}

.contact-field textarea {
    resize: vertical;
    min-height: 9rem;
}

.contact-field input:focus,
.contact-field textarea:focus {
    outline: 2px solid var(--acid);
    outline-offset: 2px;
}

.contact-success {
    max-width: 36rem;
    margin-top: 2.5rem;
    border: 1px solid var(--acid);
    padding: 1.25rem 1.4rem;
    color: var(--paper);
    font-size: 1.125rem;
    line-height: 1.7;
}

.contact-panel {
    position: relative;
}

.contact-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
    transform: translateX(-140%);
    pointer-events: none;
}

#iletisim.visible .contact-panel::after {
    animation: shine 1.15s ease .2s;
}

@keyframes clipReveal {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ruleIn {
    to {
        transform: scaleX(1);
    }
}

@keyframes curtainDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes curtainUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes curtainOutTop {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-101%);
    }
}

@keyframes curtainOutBottom {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(101%);
    }
}

@keyframes wordUp {
    to {
        transform: translateY(0);
    }
}

@keyframes shine {
    to {
        transform: translateX(140%);
    }
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(42px) scale(.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes orbMorph {
    0%,
    100% {
        border-radius: 46% 54% 34% 66% / 55% 35% 65% 45%;
    }
    50% {
        border-radius: 62% 38% 58% 42% / 42% 62% 38% 58%;
    }
}

@keyframes orbGlow {
    0%,
    100% {
        box-shadow: 0 0 90px rgba(158, 196, 255, .16);
    }
    50% {
        box-shadow: 0 0 140px rgba(158, 196, 255, .38);
    }
}