:root {
      --ink: #11120f;
      --paper: #f2f0e8;
      --paper-2: #dedbd0;
      --acid: #c8ff35;
      --cobalt: #305cff;
      --orange: #ff5c35;
      --violet: #a387ff;
      --line: rgba(17, 18, 15, .18);
      --line-dark: rgba(242, 240, 232, .18);
      --muted: #696a62;
      --radius: 1.25rem;
      --max: 1440px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
    }
    body.menu-open { overflow: hidden; }
    ::selection { background: var(--acid); color: var(--ink); }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    img { max-width: 100%; }

    .shell { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .65rem;
      margin: 0;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 1.7rem; height: 2px; background: currentColor; }
    .section-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(18rem, .47fr);
      gap: 3rem;
      align-items: end;
      margin-bottom: 3rem;
    }
    .section-heading h2 {
      max-width: 14ch;
      margin: .8rem 0 0;
      font-size: clamp(3rem, 7vw, 7.5rem);
      line-height: .87;
      letter-spacing: -.075em;
      font-weight: 850;
    }
    .section-heading > p { margin: 0; color: var(--muted); font-size: 1rem; max-width: 38rem; }
    .section-heading.light > p { color: rgba(242, 240, 232, .65); }

    .site-header {
      position: fixed;
      z-index: 20;
      inset: 0 0 auto;
      border-bottom: 1px solid rgba(242, 240, 232, .15);
      background: rgba(17, 18, 15, .82);
      color: var(--paper);
      backdrop-filter: blur(18px);
    }
    .nav-wrap { height: 4.75rem; display: flex; align-items: center; justify-content: space-between; }
    .logo { display: inline-flex; align-items: center; gap: .8rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; }
    .logo-mark {
      display: grid;
      place-items: center;
      width: 2.3rem;
      aspect-ratio: 1;
      border: 1px solid rgba(242, 240, 232, .35);
      border-radius: 50%;
      font-size: .65rem;
      transition: .3s ease;
    }
    .logo:hover .logo-mark { color: var(--ink); background: var(--acid); border-color: var(--acid); transform: rotate(-10deg); }
    .nav-links { display: flex; align-items: center; gap: 1.8rem; }
    .nav-links a { position: relative; font-size: .77rem; font-weight: 700; letter-spacing: .04em; }
    .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.4rem; height: 2px; background: var(--acid); transition: .25s ease; }
    .nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
    .nav-cta { padding: .65rem .9rem; border: 1px solid rgba(242, 240, 232, .35); border-radius: 999px; }
    .menu-button { display: none; border: 0; background: transparent; color: inherit; padding: .6rem; cursor: pointer; }
    .menu-button span { display: block; width: 1.5rem; height: 2px; margin: .25rem; background: currentColor; transition: .25s ease; }

    .hero {
      position: relative;
      min-height: 100svh;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      padding: 9.5rem 0 2rem;
      background: var(--ink);
      color: var(--paper);
    }
    .hero::before {
      content: "";
      position: absolute;
      width: min(52vw, 50rem);
      aspect-ratio: 1;
      right: -12vw;
      top: 8%;
      border: 1px solid rgba(200, 255, 53, .28);
      border-radius: 50%;
      box-shadow: 0 0 0 8vw rgba(200, 255, 53, .025), 0 0 0 16vw rgba(200, 255, 53, .02);
    }
    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .45fr);
      gap: 3rem;
      width: 100%;
      align-items: end;
    }
    .availability {
      display: inline-flex;
      align-items: center;
      gap: .65rem;
      margin-bottom: 2rem;
      color: rgba(242, 240, 232, .7);
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .availability::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 .3rem rgba(200, 255, 53, .12); }
    .hero h1 {
      margin: 0;
      font-size: clamp(4.35rem, 12.5vw, 13.2rem);
      font-weight: 900;
      line-height: .75;
      letter-spacing: -.085em;
      text-wrap: balance;
    }
    .hero h1 span { display: block; overflow: visible; color: var(--acid); }
    .hero h1 .hero-first-name { color: var(--paper); }
    .hero-side { padding-bottom: .6rem; }
    .role { margin: 0 0 2rem; font-size: clamp(1.25rem, 2vw, 1.85rem); line-height: 1.18; font-weight: 650; letter-spacing: -.035em; }
    .hero-intro { margin: 0 0 2.3rem; color: rgba(242, 240, 232, .62); max-width: 30rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .8rem;
      min-height: 3.1rem;
      padding: .8rem 1rem;
      border: 1px solid rgba(242, 240, 232, .26);
      border-radius: 999px;
      font-size: .77rem;
      font-weight: 800;
      letter-spacing: .04em;
      transition: transform .25s ease, background .25s ease, color .25s ease;
    }
    .button.primary { border-color: var(--acid); background: var(--acid); color: var(--ink); }
    .button:hover { transform: translateY(-3px); }
    .button:not(.primary):hover { background: var(--paper); color: var(--ink); }
    .hero-index { position: absolute; right: 0; top: 0; color: rgba(242, 240, 232, .3); font: 700 .68rem/1 monospace; letter-spacing: .08em; }

    .marquee { overflow: hidden; padding: .8rem 0; border-top: 1px solid var(--line-dark); background: var(--acid); color: var(--ink); }
    .marquee-track { display: flex; width: max-content; animation: ticker 88s linear infinite; will-change: transform; }
    .marquee-group { display: flex; flex: 0 0 auto; min-width: max-content; }
    .marquee-track span { display: inline-flex; align-items: center; gap: 1.5rem; margin-right: 1.5rem; font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
    .marquee-track span::after { content: "✦"; font-size: .9rem; }
    @keyframes ticker { to { transform: translateX(-50%); } }

    .about { padding: 8rem 0; border-bottom: 1px solid var(--line); }
    .about-grid { display: grid; grid-template-columns: .72fr 1.3fr; gap: 5rem; }
    .about-lead { margin: 0; font-size: clamp(2.3rem, 4.6vw, 5rem); line-height: 1.02; letter-spacing: -.055em; font-weight: 760; }
    .about-lead em { color: var(--cobalt); font-style: normal; }
    .about-copy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; align-self: end; }
    .about-copy p { margin: 0; color: var(--muted); }
    .stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; border-top: 1px solid var(--line); }
    .stat { padding: 1.5rem 1rem 0 0; }
    .stat strong { display: block; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -.06em; }
    .stat span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }

    .projects { padding: 8rem 0 9rem; }
    .filter-bar { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
    .filter {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: .65rem .9rem;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: .2s ease;
    }
    .filter:hover, .filter.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
    .project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
    .project-card {
      grid-column: span 6;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: #e8e5dc;
      transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
    }
    .project-card:nth-child(3n + 1) { grid-column: span 7; }
    .project-card:nth-child(3n + 2) { grid-column: span 5; }
    .project-card:hover { transform: translateY(-6px); }
    .project-card.hidden { display: none; }
    .project-visual { position: relative; min-height: 27rem; overflow: hidden; isolation: isolate; }
    .project-visual::after { content: attr(data-code); position: absolute; z-index: 4; right: 1rem; top: 1rem; padding: .45rem .55rem; border: 1px solid currentColor; border-radius: 999px; font: 700 .6rem/1 monospace; letter-spacing: .08em; }
    .poster { background: #e94d27; color: #141414; }
    .poster .poster-title { position: absolute; z-index: 2; left: 7%; top: 8%; width: 72%; margin: 0; font-size: clamp(4rem, 7.2vw, 7.5rem); line-height: .72; letter-spacing: -.09em; font-weight: 950; text-transform: uppercase; }
    .poster .poster-title i { display: block; padding-left: 18%; color: #f7e925; font-style: normal; }
    .poster .disc { position: absolute; right: -6%; bottom: -15%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: #1c36e7; box-shadow: -8rem -2rem 0 -3.5rem #f7e925; }
    .poster .vertical { position: absolute; left: 1.2rem; bottom: 1.4rem; writing-mode: vertical-rl; rotate: 180deg; font: 800 .65rem/1 monospace; letter-spacing: .15em; }

    .blender { background: #5e45ed; color: #fff; perspective: 800px; }
    .blender .orb { position: absolute; width: 54%; aspect-ratio: 1; left: 23%; top: 18%; border-radius: 37% 63% 60% 40% / 49% 38% 62% 51%; background: radial-gradient(circle at 34% 28%, #fff 0 2%, #ff8d63 4%, #6a27cd 42%, #130b4d 76%); box-shadow: inset -2rem -3rem 4rem rgba(0,0,0,.35), 0 3rem 6rem rgba(20,10,80,.45); animation: morph 8s ease-in-out infinite alternate; }
    .blender .ring { position: absolute; width: 82%; height: 30%; left: 9%; top: 42%; border: .14rem solid rgba(255,255,255,.7); border-radius: 50%; transform: rotate(-12deg); }
    .blender .coordinates { position: absolute; left: 1.2rem; bottom: 1.1rem; font: 600 .62rem/1.6 monospace; color: rgba(255,255,255,.65); }
    @keyframes morph { to { border-radius: 58% 42% 38% 62% / 40% 58% 42% 60%; transform: rotate(9deg) scale(1.04); } }

    .android { background: #c8ff35; color: #14150f; }
    .android .phone { position: absolute; width: 45%; height: 83%; left: 27.5%; top: 11%; padding: 1.2rem; border: .4rem solid #14150f; border-radius: 2.5rem; background: #f4f2eb; box-shadow: 1.4rem 1.4rem 0 rgba(20,21,15,.2); transform: rotate(4deg); }
    .android .phone-top { width: 34%; height: .45rem; margin: 0 auto 1.5rem; border-radius: 999px; background: #14150f; }
    .android .ui-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -.06em; }
    .android .ui-card { height: 28%; margin-top: 1rem; border-radius: 1rem; background: var(--cobalt); }
    .android .ui-lines { margin-top: 1rem; height: 35%; background: repeating-linear-gradient(to bottom, #dedbd0 0 .5rem, transparent .5rem 1rem); }
    .android .badge { position: absolute; z-index: 2; right: 8%; bottom: 11%; padding: .8rem 1rem; border-radius: 999px; background: var(--orange); color: #fff; font-size: .7rem; font-weight: 900; transform: rotate(-6deg); }

    .identity { background: #e8e5dc; color: #161713; }
    .identity .grid-lines { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 3rem 3rem; }
    .identity .letter { position: absolute; z-index: 2; left: 8%; bottom: -9%; font-size: clamp(15rem, 30vw, 30rem); font-weight: 950; letter-spacing: -.14em; line-height: .8; color: #14150f; }
    .identity .swatch { position: absolute; z-index: 3; width: 20%; aspect-ratio: 1; border-radius: 50%; right: 9%; top: 16%; background: var(--orange); mix-blend-mode: multiply; }
    .identity .swatch.two { right: 20%; top: 31%; background: var(--cobalt); }

    .project-info { padding: 1.5rem 1.5rem 1.7rem; }
    .project-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
    .project-title-row h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.045em; }
    .project-title-row span { flex: 0 0 auto; color: var(--muted); font: 700 .65rem/1.4 monospace; }
    .project-summary { min-height: 3rem; max-width: 50rem; margin: .8rem 0 1.4rem; color: var(--muted); }
    .project-meta { display: grid; grid-template-columns: 1.1fr .8fr 1fr; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
    .project-meta dt { color: var(--muted); font-size: .59rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .project-meta dd { margin: .25rem 0 0; font-size: .72rem; font-weight: 700; }

    .experiments { padding: 8rem 0; background: var(--ink); color: var(--paper); }
    .experiment-list { border-top: 1px solid var(--line-dark); }
    .experiment {
      position: relative;
      display: grid;
      grid-template-columns: 4rem 1fr 1.15fr 2rem;
      gap: 2rem;
      align-items: start;
      padding: 2rem 0;
      border-bottom: 1px solid var(--line-dark);
      cursor: pointer;
      transition: color .2s ease;
    }
    .experiment:hover { color: var(--acid); }
    .exp-no { color: rgba(242,240,232,.4); font: 700 .68rem/1.5 monospace; }
    .experiment h3 { margin: 0; font-size: clamp(1.7rem, 3.5vw, 3.4rem); line-height: 1; letter-spacing: -.05em; }
    .exp-copy p { margin: .1rem 0 1rem; color: rgba(242,240,232,.63); max-width: 45rem; }
    .tags { display: flex; flex-wrap: wrap; gap: .45rem; }
    .tags span { padding: .38rem .55rem; border: 1px solid var(--line-dark); border-radius: 999px; color: rgba(242,240,232,.65); font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .exp-arrow { font-size: 1.4rem; transition: transform .25s ease; }
    .experiment:hover .exp-arrow { transform: translate(4px, -4px); }
    .process-note { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; padding-top: 3rem; }
    .process-note blockquote { margin: 0; max-width: 48rem; color: rgba(242,240,232,.7); font-size: clamp(1.2rem, 2.3vw, 2rem); letter-spacing: -.03em; }

    .toolkit { padding: 2.5rem 0; background: var(--violet); }
    .toolkit-grid { display: grid; grid-template-columns: .5fr 2fr; gap: 3rem; align-items: center; }
    .toolkit-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
    .tool { border-left: 1px solid rgba(17,18,15,.28); padding-left: 1rem; }
    .tool strong { display: block; font-size: 1rem; }
    .tool span { display: block; color: rgba(17,18,15,.62); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }

    .journal { padding: 8rem 0; }
    .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .post {
      display: flex;
      min-height: 28rem;
      flex-direction: column;
      padding: 1.4rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      transition: .3s ease;
    }
    .post:hover { color: var(--paper); background: var(--cobalt); border-color: var(--cobalt); transform: translateY(-5px); }
    .post-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; color: var(--muted); font: 700 .63rem/1.4 monospace; letter-spacing: .04em; }
    .post:hover .post-top, .post:hover .post-excerpt { color: rgba(242,240,232,.68); }
    .post-index { display: grid; place-items: center; width: 2.2rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; }
    .post h3 { margin: auto 0 1rem; font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: .95; letter-spacing: -.06em; }
    .post-excerpt { margin: 0 0 1.5rem; color: var(--muted); }
    .post-link { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid currentColor; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

    .contact {
      position: relative;
      overflow: hidden;
      padding: 7rem 0 2rem;
      background: var(--acid);
    }
    .contact-top { display: grid; grid-template-columns: 1.3fr .7fr; gap: 3rem; align-items: end; }
    .contact h2 { margin: 0; max-width: 10ch; font-size: clamp(4rem, 10vw, 11rem); line-height: .79; letter-spacing: -.085em; }
    .contact-side p { max-width: 27rem; margin: 0 0 1.5rem; font-size: 1.15rem; }
    .email-link { display: inline-flex; gap: .8rem; align-items: center; border-bottom: 2px solid currentColor; padding-bottom: .3rem; font-weight: 850; }
    .footer-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: 7rem; padding-top: 1.5rem; border-top: 1px solid rgba(17,18,15,.28); }
    .footer-row p { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
    .socials { display: flex; flex-wrap: wrap; gap: 1rem; }
    .socials a { font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }

    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.2,1); }
    .reveal.visible { opacity: 1; transform: none; }
    .skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .7rem 1rem; background: var(--acid); color: var(--ink); font-weight: 800; }
    .skip-link:focus { top: 1rem; }

    @media (max-width: 960px) {
      .shell { width: min(calc(100% - 2rem), var(--max)); }
      .menu-button { display: block; }
      .nav-links {
        position: fixed;
        inset: 4.75rem 0 auto;
        display: grid;
        align-content: start;
        gap: 0;
        padding: 1rem;
        background: var(--ink);
        border-bottom: 1px solid var(--line-dark);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-1rem);
        transition: .25s ease;
      }
      .nav-links.open { opacity: 1; visibility: visible; transform: none; }
      .nav-links a { padding: 1rem 0; border-bottom: 1px solid var(--line-dark); }
      .nav-cta { border: 0; border-radius: 0; }
      .hero-grid, .about-grid, .section-heading, .contact-top { grid-template-columns: 1fr; }
      .hero { min-height: 52rem; }
      .hero-side { max-width: 35rem; }
      .hero h1 { font-size: clamp(4.35rem, 16vw, 9rem); }
      .about-copy { align-self: auto; }
      .project-card, .project-card:nth-child(3n + 1), .project-card:nth-child(3n + 2) { grid-column: span 6; }
      .project-visual { min-height: 23rem; }
      .experiment { grid-template-columns: 3rem 1fr 2rem; }
      .exp-copy { grid-column: 2 / 3; }
      .exp-arrow { grid-column: 3; grid-row: 1; }
      .toolkit-grid { grid-template-columns: 1fr; }
      .post-grid { grid-template-columns: 1fr 1fr; }
      .post:last-child { grid-column: 1 / -1; min-height: 22rem; }
    }

    @media (max-width: 680px) {
      .hero { min-height: 100svh; padding-top: 8rem; }
      .hero-grid { gap: 2.5rem; }
      .hero h1 { font-size: clamp(4.1rem, 21vw, 7rem); }
      .hero-index { display: none; }
      .about, .projects, .experiments, .journal { padding: 5.5rem 0; }
      .about-grid { gap: 3rem; }
      .about-copy { grid-template-columns: 1fr; gap: 1.3rem; }
      .stats { grid-template-columns: 1fr; }
      .stat { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
      .section-heading { gap: 1.5rem; margin-bottom: 2rem; }
      .section-heading h2 { font-size: clamp(3.3rem, 17vw, 5.8rem); }
      .project-card, .project-card:nth-child(3n + 1), .project-card:nth-child(3n + 2) { grid-column: 1 / -1; }
      .project-visual { min-height: 21rem; }
      .poster .poster-title { font-size: 4rem; }
      .project-meta { grid-template-columns: 1fr; }
      .experiment { grid-template-columns: 2rem 1fr 1.5rem; gap: .8rem; }
      .process-note { grid-template-columns: 1fr; gap: 1rem; }
      .toolkit-list { grid-template-columns: 1fr 1fr; }
      .post-grid { grid-template-columns: 1fr; }
      .post, .post:last-child { grid-column: auto; min-height: 24rem; }
      .contact-top { gap: 2rem; }
      .contact h2 { font-size: clamp(4rem, 19vw, 7rem); }
      .footer-row { align-items: flex-start; flex-direction: column-reverse; margin-top: 5rem; }
    }

    /* Hareket isteğe bağlı olarak body.motion-reduced ile kapatılabilir.
       Sistem ayarı animasyonları otomatik olarak susturmaz. */
    body.motion-reduced *,
    body.motion-reduced *::before,
    body.motion-reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    body.motion-reduced .reveal { opacity: 1; transform: none; }

    /* --- CINEMATIC INTERACTION LAYER --- */
    :root {
      --display: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", sans-serif;
      --mono: "IBM Plex Mono", Consolas, monospace;
    }
    body { font-family: var(--display); }
    body.intro-active { overflow: hidden; }
    .eyebrow, .availability, .nav-links a, .button, .filter, .tool span, .socials a { font-family: var(--mono); }
    .section-heading h2, .hero h1, .contact h2, .project-title-row h3, .post h3 { font-family: var(--display); }
    .section-heading h2 { letter-spacing: -.085em; }
    .hero h1 { letter-spacing: -.095em; }
    .role { max-width: 13ch; font-weight: 500; letter-spacing: -.045em; }

    /* Floating glass-island navigation */
    .site-header {
      top: 0;
      padding: .85rem 0;
      border: 0;
      background: transparent;
      backdrop-filter: none;
      pointer-events: none;
      transition: padding .35s ease;
    }
    .nav-wrap {
      width: min(calc(100% - 2rem), 72rem);
      height: 4.2rem;
      padding: 0 .75rem 0 .9rem;
      border: 1px solid rgba(242, 240, 232, .22);
      border-radius: 999px;
      background: linear-gradient(115deg, rgba(39, 41, 35, .78), rgba(17, 18, 15, .58));
      box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.11);
      backdrop-filter: blur(22px) saturate(145%);
      -webkit-backdrop-filter: blur(22px) saturate(145%);
      pointer-events: auto;
      transition: width .4s cubic-bezier(.2,.8,.2,1), height .35s ease, background .35s ease, box-shadow .35s ease;
    }
    .site-header.scrolled { padding-top: .55rem; }
    .site-header.scrolled .nav-wrap {
      width: min(calc(100% - 2rem), 65rem);
      height: 3.75rem;
      background: rgba(17, 18, 15, .82);
      box-shadow: 0 .7rem 2.5rem rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.1);
    }
    .logo-mark { border-color: rgba(200,255,53,.55); }
    .nav-links { gap: .45rem; }
    .nav-links a {
      padding: .7rem .72rem;
      border-radius: 999px;
      font-size: .65rem;
      letter-spacing: .065em;
      transition: color .25s ease, background .25s ease, transform .25s ease;
    }
    .nav-links a:not(.nav-cta):hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
    .nav-links a::after { bottom: .35rem; left: .72rem; right: calc(100% - .72rem); }
    .nav-links a:hover::after, .nav-links a:focus-visible::after { right: .72rem; }
    .nav-links .nav-cta {
      margin-left: .25rem;
      padding-inline: 1.05rem;
      border-color: rgba(200,255,53,.52);
      overflow: hidden;
    }
    .nav-links .nav-cta::after { display: none; }
    .nav-links .nav-cta:hover,
    .nav-links .nav-cta:focus-visible {
      color: var(--ink);
      border-color: var(--acid);
      background: var(--acid);
      box-shadow: 0 0 0 .35rem rgba(200,255,53,.1);
      transform: translateY(-2px) scale(1.025);
    }

    /* Reference-inspired moving ribbon */
    .marquee {
      position: relative;
      height: 3.35rem;
      display: flex;
      align-items: center;
      border: 0;
      background: var(--acid);
      box-shadow: inset 0 1px rgba(17,18,15,.2), inset 0 -1px rgba(17,18,15,.2);
    }
    .marquee::before,
    .marquee::after {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0 auto 0 0;
      width: 4rem;
      background: linear-gradient(90deg, var(--acid), transparent);
      pointer-events: none;
    }
    .marquee::after { inset: 0 0 0 auto; background: linear-gradient(-90deg, var(--acid), transparent); }
    .marquee-track {
      padding: 0;
      animation-name: ticker;
      animation-duration: 18s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-play-state: running;
      will-change: transform;
      transform: translateZ(0);
    }
    .marquee-track span { margin-right: 1.7rem; gap: 1.7rem; font: 500 .66rem/1 var(--mono); letter-spacing: .13em; white-space: nowrap; }
    .marquee-track span::after { content: "✦"; font-size: .75rem; }
    .marquee:hover .marquee-track { animation-play-state: running; }

    /* A more authored About section */
    .about { position: relative; overflow: hidden; padding: 9rem 0; }
    .about::before {
      content: "ABOUT / 01";
      position: absolute;
      right: -1vw;
      top: 1.6rem;
      color: rgba(17,18,15,.035);
      font: 700 clamp(5rem, 13vw, 13rem)/1 var(--display);
      letter-spacing: -.09em;
      white-space: nowrap;
      pointer-events: none;
    }
    .about-intro {
      position: relative;
      display: grid;
      grid-template-columns: .32fr 1.2fr .62fr;
      gap: 2.5rem;
      align-items: end;
      margin-bottom: 4rem;
    }
    .about-intro .eyebrow { align-self: start; }
    .about-kicker {
      margin: 0;
      font-size: clamp(3.4rem, 7.4vw, 7.8rem);
      font-weight: 650;
      line-height: .88;
      letter-spacing: -.085em;
    }
    .about-kicker span { color: var(--cobalt); }
    .about-intro-copy { margin: 0; color: var(--muted); font-size: 1.02rem; }
    .about-lab { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(24rem, .84fr); gap: 1rem; }
    .about-manifesto {
      position: relative;
      min-height: 39rem;
      overflow: hidden;
      padding: 1.5rem;
      border-radius: 1.5rem;
      background: var(--cobalt);
      color: #fff;
      isolation: isolate;
      transform-style: preserve-3d;
    }
    .about-manifesto::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 28rem;
      aspect-ratio: 1;
      right: -12rem;
      top: -11rem;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 50%;
      box-shadow: 0 0 0 5rem rgba(255,255,255,.025), 0 0 0 10rem rgba(255,255,255,.02);
      transform: translate(calc(var(--mx, .5) * -2rem), calc(var(--my, .5) * 2rem));
      transition: transform .2s ease-out;
    }
    .about-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font: 500 .62rem/1 var(--mono); letter-spacing: .1em; }
    .manifesto-stack { margin-top: 7rem; }
    .manifesto-stack span {
      display: block;
      width: fit-content;
      font-size: clamp(3.8rem, 7vw, 7.2rem);
      font-weight: 700;
      line-height: .78;
      letter-spacing: -.085em;
      transition: transform .45s cubic-bezier(.2,.8,.2,1), color .35s ease;
    }
    .manifesto-stack span:nth-child(2) { margin-left: 10%; color: var(--acid); }
    .manifesto-stack span:nth-child(3) { margin-left: 2%; }
    .manifesto-stack span:nth-child(4) { margin-left: 18%; color: var(--acid); }
    .about-manifesto:hover .manifesto-stack span:nth-child(odd) { transform: translateX(1.2rem); }
    .about-manifesto:hover .manifesto-stack span:nth-child(even) { transform: translateX(-1.2rem); }
    .about-manifesto > p { position: absolute; left: 1.5rem; bottom: 1.5rem; max-width: 31rem; margin: 0; color: rgba(255,255,255,.74); }
    .manifesto-mark { position: absolute; right: 1.5rem; bottom: .1rem; font-size: 6rem; line-height: 1; font-weight: 200; color: var(--acid); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
    .about-manifesto:hover .manifesto-mark { transform: rotate(135deg) scale(.82); }
    .discipline-index { display: grid; grid-template-rows: repeat(4, 1fr); gap: 1rem; }
    .discipline {
      position: relative;
      display: grid;
      grid-template-columns: 2.5rem 1fr auto;
      gap: 1rem;
      align-items: center;
      overflow: hidden;
      padding: 1.25rem;
      border: 1px solid var(--line);
      border-radius: 1.2rem;
      background: rgba(255,255,255,.24);
      transform-style: preserve-3d;
      transition: background .35s ease, color .35s ease, border-color .35s ease;
    }
    .discipline > span { font: 500 .62rem/1 var(--mono); color: var(--muted); }
    .discipline h3 { margin: 0; font-size: clamp(1.5rem, 2.3vw, 2.45rem); line-height: 1; letter-spacing: -.055em; }
    .discipline p { grid-column: 2; margin: -.25rem 0 0; color: var(--muted); font-size: .78rem; }
    .discipline strong { grid-column: 3; grid-row: 1 / span 2; font: 500 .56rem/1.3 var(--mono); letter-spacing: .06em; text-align: right; opacity: .54; }
    .discipline::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--acid);
      transform: translateX(-102%);
      transition: transform .48s cubic-bezier(.2,.8,.2,1);
      z-index: -1;
    }
    .discipline:hover { border-color: var(--acid); color: var(--ink); }
    .discipline:hover::before { transform: none; }
    .discipline:hover p, .discipline:hover > span { color: rgba(17,18,15,.62); }
    .discipline:hover strong { opacity: 1; }
    .process-rail {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 1rem;
      padding: 1.5rem 1.7rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      font: 500 .66rem/1 var(--mono);
      letter-spacing: .12em;
    }
    .process-rail i { color: var(--cobalt); font-style: normal; font-size: 1.1rem; }

    /* Enter / exit behavior in both scroll directions */
    .reveal {
      opacity: 0;
      transform: translate3d(0, 34px, 0) scale(.985);
      filter: blur(7px);
      transition: opacity .75s ease, transform .85s cubic-bezier(.16,.8,.22,1), filter .7s ease;
      will-change: transform, opacity, filter;
    }
    .reveal.visible { opacity: 1; transform: none; filter: blur(0); }
    .reveal.out-view { opacity: 0; transform: translate3d(0, var(--exit-y, -28px), 0) scale(.985); filter: blur(6px); }
    .motion-surface {
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      --surface-y: 0px;
      transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--surface-y));
      position: relative;
      transition: transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, filter .28s ease;
      will-change: transform;
    }
    .motion-surface::after {
      content: "";
      position: absolute;
      z-index: 8;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.22) var(--mxp, 50%), transparent 82%);
      opacity: 0;
      pointer-events: none;
      transform: translateX(var(--shine-x, 0%));
      transition: opacity .22s ease, transform .18s ease-out;
    }
    .motion-surface.is-pointer-in {
      --surface-y: -12px;
      filter: saturate(1.15) contrast(1.03);
      box-shadow: 0 1.8rem 4.5rem rgba(17,18,15,.2);
    }
    .motion-surface.is-pointer-in::after { opacity: .72; }
    .motion-surface.is-pointer-out { --surface-y: 0px; }
    .project-card.motion-surface:hover { transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--surface-y)); }
    .magnetic { translate: var(--mag-x, 0) var(--mag-y, 0); transition: translate .18s ease-out, color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; }
    .reactive-node.is-pointer-in { animation: tactileIn .38s cubic-bezier(.16,.8,.22,1) both; }
    .reactive-node.is-pointer-out { animation: tactileOut .46s cubic-bezier(.2,.7,.2,1) both; }
    @keyframes tactileIn { 50% { filter: brightness(1.12) saturate(1.12); } }
    @keyframes tactileOut { from { filter: brightness(1.06); } to { filter: none; } }

    /* Non-circular cursor: a kinetic focus frame with a directional tail */
    .cursor-frame { display: none; }
    @media (min-width: 0px) {
      body.cursor-ready, body.cursor-ready a, body.cursor-ready button { cursor: none; }
      .cursor-frame {
        display: block;
        position: fixed;
        z-index: 120;
        left: 0;
        top: 0;
        width: 2.2rem;
        height: 1.45rem;
        opacity: 0;
        pointer-events: none;
        transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) translate(-50%, -50%) rotate(var(--cursor-tilt, 0deg));
        transition: width .25s ease, height .25s ease, opacity .2s ease;
        mix-blend-mode: difference;
      }
      body.cursor-ready .cursor-frame { opacity: 1; }
      .cursor-frame::after {
        content: "";
        position: absolute;
        width: 3.4rem;
        height: 1px;
        left: calc(100% + .25rem);
        top: 50%;
        background: linear-gradient(90deg, #fff, transparent);
        transform-origin: left;
        transform: scaleX(var(--cursor-speed, .45));
      }
      .corner { position: absolute; width: .48rem; height: .48rem; border-color: #fff; transition: border-color .2s ease; }
      .corner-tl { left: 0; top: 0; border-left: 1px solid; border-top: 1px solid; }
      .corner-tr { right: 0; top: 0; border-right: 1px solid; border-top: 1px solid; }
      .corner-bl { left: 0; bottom: 0; border-left: 1px solid; border-bottom: 1px solid; }
      .corner-br { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }
      .cursor-readout {
        position: absolute;
        left: calc(100% + 3.8rem);
        top: 50%;
        width: max-content;
        padding: .25rem .35rem;
        color: #fff;
        font: 500 .48rem/1 var(--mono);
        letter-spacing: .1em;
        transform: translateY(-50%);
        opacity: .62;
      }
      .cursor-frame.over-interactive { width: 4.6rem; height: 2.8rem; }
      .cursor-frame.over-interactive .corner { border-color: var(--acid); }
    }

    /* Full-screen cinematic intro on every page load */
    .cinematic-intro {
      position: fixed;
      z-index: 100;
      inset: 0;
      overflow: hidden;
      background: #0b0c0a;
      color: var(--paper);
      clip-path: inset(0 0 0 0);
      transition: clip-path .9s cubic-bezier(.77,0,.18,1), visibility .9s;
    }
    .cinematic-intro::before,
    .cinematic-intro::after {
      content: "";
      position: absolute;
      inset: 0 50% 0 0;
      border-right: 1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.018);
      transform: scaleY(0);
      transform-origin: top;
      animation: introPanel 1.1s .15s cubic-bezier(.16,.8,.22,1) forwards;
    }
    .cinematic-intro::after { inset: 0 0 0 50%; border: 0; transform-origin: bottom; animation-delay: .28s; }
    .cinematic-intro.is-closing { clip-path: inset(0 0 100% 0); visibility: hidden; }
    .intro-grid {
      position: absolute;
      inset: 0;
      opacity: .16;
      background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
      background-size: 7.5vw 7.5vw;
      mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    }
    .intro-scan { position: absolute; z-index: 2; left: 0; right: 0; top: -2px; height: 2px; background: var(--acid); box-shadow: 0 0 2rem rgba(200,255,53,.6); animation: introScan 5.2s .25s cubic-bezier(.5,0,.35,1) forwards; }
    .intro-meta { position: absolute; z-index: 3; top: 2rem; left: 2rem; font: 500 .58rem/1 var(--mono); letter-spacing: .14em; color: rgba(242,240,232,.58); }
    .intro-sequence { position: absolute; z-index: 3; left: 5vw; right: 5vw; top: 50%; transform: translateY(-52%); }
    .intro-line { display: block; overflow: hidden; }
    .intro-line i {
      display: block;
      font: 700 clamp(4rem, 13vw, 13.5rem)/.74 var(--display);
      letter-spacing: -.09em;
      font-style: normal;
      transform: translateY(118%) skewY(6deg);
      animation: introType 1.15s .6s cubic-bezier(.16,.8,.22,1) forwards;
    }
    .intro-line:nth-child(2) i { animation-delay: 1.35s; }
    .intro-line:nth-child(3) i { animation-delay: 2.1s; }
    .intro-line.accent { color: var(--acid); }
    .intro-bottom { position: absolute; z-index: 3; display: flex; align-items: end; justify-content: space-between; left: 2rem; right: 2rem; bottom: 1.7rem; }
    .intro-status { font: 500 .57rem/1 var(--mono); letter-spacing: .12em; color: rgba(242,240,232,.55); }
    .intro-counter { font: 500 clamp(2.6rem, 6vw, 6rem)/.8 var(--mono); letter-spacing: -.08em; }
    .intro-skip { position: absolute; z-index: 4; right: 2rem; top: 1.3rem; padding: .7rem .9rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: transparent; color: rgba(242,240,232,.75); font: 500 .56rem/1 var(--mono); letter-spacing: .08em; cursor: pointer; transition: .25s ease; }
    .intro-skip:hover { color: var(--ink); background: var(--acid); border-color: var(--acid); }
    @keyframes introPanel { to { transform: scaleY(1); } }
    @keyframes introScan { 0% { top: -2px; } 100% { top: calc(100% + 2px); } }
    @keyframes introType { to { transform: none; } }

    @media (max-width: 960px) {
      .site-header { padding: .65rem 0; }
      .nav-wrap, .site-header.scrolled .nav-wrap { width: calc(100% - 1rem); height: 4rem; }
      .nav-links {
        inset: 5.1rem .5rem auto;
        padding: .7rem;
        border: 1px solid rgba(242,240,232,.18);
        border-radius: 1.25rem;
        background: rgba(17,18,15,.94);
        backdrop-filter: blur(22px);
      }
      .nav-links a { border-bottom-color: rgba(242,240,232,.12); border-radius: .75rem; }
      .nav-links .nav-cta { margin: .4rem 0 0; border: 1px solid rgba(200,255,53,.45); border-radius: .75rem; text-align: center; }
      .about-intro { grid-template-columns: 1fr 1.8fr; }
      .about-intro-copy { grid-column: 2; }
      .about-lab { grid-template-columns: 1fr; }
      .about-manifesto { min-height: 35rem; }
      .discipline-index { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
      .discipline { min-height: 10rem; grid-template-columns: 2rem 1fr; }
      .discipline strong { grid-column: 2; grid-row: auto; text-align: left; }
      .process-rail { overflow-x: auto; justify-content: flex-start; border-radius: 1.2rem; }
      .process-rail span { flex: 0 0 auto; }
    }
    @media (max-width: 680px) {
      .logo > span:last-child { display: none; }
      .nav-wrap { padding-left: .65rem; }
      .about { padding: 6rem 0; }
      .about-intro { grid-template-columns: 1fr; gap: 1.5rem; }
      .about-intro-copy { grid-column: auto; max-width: 31rem; }
      .about-kicker { font-size: clamp(3.25rem, 16vw, 5.6rem); }
      .about-manifesto { min-height: 31rem; }
      .manifesto-stack { margin-top: 6.5rem; }
      .manifesto-stack span { font-size: clamp(3rem, 14vw, 5rem); }
      .about-manifesto > p { right: 4rem; }
      .discipline-index { grid-template-columns: 1fr; }
      .discipline { min-height: 8.5rem; }
      .process-rail { padding: 1.2rem; }
      .intro-meta, .intro-bottom { left: 1rem; }
      .intro-bottom { right: 1rem; bottom: 1.2rem; }
      .intro-skip { right: 1rem; top: .9rem; }
      .intro-sequence { left: 1rem; right: 1rem; }
      .intro-line i { font-size: clamp(3.7rem, 18vw, 6.5rem); }
    }
    body.motion-reduced .cinematic-intro { transition-duration: .2s !important; }
    body.motion-reduced .cursor-frame { display: none !important; }
    body.motion-reduced,
    body.motion-reduced a,
    body.motion-reduced button { cursor: auto !important; }
    body.motion-reduced .motion-surface { transform: none !important; }
    .project-card > a { display: block; }
    .project-visual.has-image { background: #181a16; }
    .project-visual.has-image img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
    .project-card:hover .project-visual.has-image img { transform: scale(1.045); filter: saturate(1.08); }
    .project-visual.generic { display: flex; flex-direction: column; justify-content: space-between; padding: 1.4rem; background: var(--project-accent, var(--cobalt)); color: white; }
    .generic-index { font: 600 .65rem/1 var(--mono); letter-spacing: .1em; }
    .generic-letter { position: absolute; right: -1rem; bottom: -3.5rem; font-size: clamp(15rem, 30vw, 28rem); line-height: .8; letter-spacing: -.12em; opacity: .18; }
    .generic-title { position: relative; z-index: 2; max-width: 10ch; font-size: clamp(2.4rem, 5vw, 5.5rem); font-weight: 700; line-height: .88; letter-spacing: -.07em; }

    /* Yönetilebilir hero yerleşimleri */
    .hero--center { align-items: center; padding-bottom: 3.5rem; text-align: center; }
    .hero--center .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2rem; }
    .hero--center .hero-copy { max-width: 100%; }
    .hero--center h1 { font-size: clamp(4.5rem, 12vw, 12rem); }
    .hero--center .hero-side { max-width: 50rem; padding: 0; }
    .hero--center .hero-portrait { position: relative; grid-column: 1; grid-row: auto; justify-self: center; order: -1; width: clamp(5.5rem, 8vw, 8rem); min-height: 0; aspect-ratio: 1; margin: 0 0 -.65rem; border-radius: 50%; }
    .hero--center .hero-portrait::after { display: none; }
    .hero--center .hero-portrait img { min-height: 0; }
    .hero--center .role { max-width: 34rem; margin-inline: auto; text-wrap: balance; }
    .hero--center .hero-intro { margin-inline: auto; }
    .hero--center .hero-actions { justify-content: center; }
    .hero--center .hero-index { right: 0; }
    .hero--portrait .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .58fr); grid-template-rows: auto auto; align-items: end; }
    .hero--portrait .hero-copy, .hero--portrait .hero-side { grid-column: 1; }
    .hero--portrait .hero-side { max-width: 37rem; }
    .hero--portrait h1 { font-size: clamp(4rem, 9.4vw, 10rem); }
    .hero-portrait { position: relative; grid-column: 2; grid-row: 1 / 3; align-self: stretch; min-height: min(70vh, 48rem); margin: 0; overflow: hidden; border: 1px solid rgba(200,255,53,.35); border-radius: clamp(1.5rem, 4vw, 4rem) clamp(8rem, 14vw, 15rem) 1.5rem 1.5rem; background: #101f22; isolation: isolate; }
    .hero-portrait::after { content: "HK / PORTRAIT"; position: absolute; z-index: 2; right: 1rem; bottom: 1rem; padding: .55rem .7rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,26,29,.55); font: 700 .58rem/1 var(--mono); letter-spacing: .12em; backdrop-filter: blur(12px); }
    .hero-portrait img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; filter: saturate(.88) contrast(1.06); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
    .hero-portrait:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.02); }

    .projects-more { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; transition: .25s ease; }
    .projects-more span:last-child { font-size: 1.25rem; transition: transform .25s ease; }
    .projects-more:hover { color: var(--paper); background: var(--ink); transform: translateY(-2px); }
    .projects-more:hover span:last-child { transform: translate(4px,-3px); }
    .design-card .project-visual img { transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
    .design-card:hover .project-visual img { transform: scale(1.035); filter: saturate(1.08); }

    /* Android uygulamaları */
    .apps-section { position: relative; padding: 8rem 0; overflow: hidden; border-top: 1px solid var(--line); background: #dfe2d6; }
    .apps-section::before { content: "ANDROID"; position: absolute; right: -2vw; top: 2rem; color: rgba(0,26,29,.045); font-size: clamp(8rem,22vw,24rem); font-weight: 950; line-height: .75; letter-spacing: -.1em; pointer-events: none; }
    .apps-grid { position: relative; display: grid; grid-template-columns: repeat(12,1fr); gap: 1rem; }
    .app-card { --app-accent: var(--acid); grid-column: span 6; min-height: 35rem; display: grid; grid-template-columns: minmax(0,1fr) minmax(11rem,.72fr); overflow: hidden; border: 1px solid rgba(0,26,29,.18); border-radius: var(--radius); background: var(--ink); color: var(--paper); box-shadow: 0 1.5rem 4rem rgba(0,26,29,.09); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
    .app-card:hover { transform: translateY(-8px) rotate(-.25deg); box-shadow: 0 2.4rem 5rem rgba(0,26,29,.18); }
    .app-content { display: flex; flex-direction: column; padding: 1.5rem; }
    .app-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .app-icon { display: grid; place-items: center; width: 4.25rem; aspect-ratio: 1; overflow: hidden; border-radius: 1.15rem; background: var(--app-accent); color: var(--ink); font-size: 1.8rem; font-weight: 950; }
    .app-icon img { width: 100%; height: 100%; object-fit: cover; }
    .app-status { padding: .5rem .65rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: rgba(255,255,255,.68); font: 700 .58rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .app-card h3 { margin: auto 0 .8rem; font-size: clamp(2.4rem,5vw,5.5rem); line-height: .9; letter-spacing: -.07em; }
    .app-card p { margin: 0 0 1.5rem; color: rgba(242,240,232,.65); }
    .app-cta { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.16); color: var(--app-accent); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
    .app-media { position: relative; min-height: 100%; overflow: hidden; background: color-mix(in srgb, var(--app-accent) 78%, white); }
    .app-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
    .app-card:hover .app-media img { transform: scale(1.045); }
    .app-media.empty::before { content: "APK"; position: absolute; right: -1rem; bottom: -.8rem; color: rgba(0,26,29,.18); font-size: 8rem; font-weight: 950; letter-spacing: -.12em; }
    .apps-empty { position: relative; padding: 2rem; border: 1px dashed rgba(0,26,29,.3); border-radius: var(--radius); color: rgba(0,26,29,.65); }

    /* Deneysel projeler: sonuçtan çok süreç odaklı kart sistemi */
    .experiment-showcase { display: grid; grid-template-columns: repeat(12,1fr); gap: 1rem; }
    .experiment-card { grid-column: span 6; position: relative; min-height: 30rem; display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; border: 1px solid var(--line-dark); border-radius: var(--radius); background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012)); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
    .experiment-card:nth-child(3n) { grid-column: span 12; min-height: 24rem; }
    .experiment-card:hover { transform: translateY(-6px); border-color: rgba(200,255,53,.55); }
    .exp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
    .exp-identity { display: flex; align-items: center; gap: .9rem; }
    .exp-logo { display: grid; place-items: center; width: 4rem; aspect-ratio: 1; overflow: hidden; border-radius: 1.1rem; background: var(--acid); color: var(--ink); font-weight: 950; font-size: 1.35rem; }
    .exp-logo img { width: 100%; height: 100%; object-fit: cover; }
    .exp-status { color: rgba(242,240,232,.5); font: 700 .6rem/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .experiment-card h3 { max-width: 12ch; margin: auto 0 .9rem; font-size: clamp(2.8rem,6vw,6rem); line-height: .88; letter-spacing: -.075em; }
    .experiment-card > p { max-width: 42rem; margin: 0 0 1.2rem; color: rgba(242,240,232,.64); }
    .experiment-card .tags { margin-bottom: 1rem; }
    .exp-details { margin-top: .25rem; border-top: 1px solid var(--line-dark); }
    .exp-details summary { display: flex; justify-content: space-between; padding: .9rem 0; cursor: pointer; color: rgba(242,240,232,.72); font: 700 .65rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; list-style: none; }
    .exp-details summary::-webkit-details-marker { display: none; }
    .exp-details summary::after { content: "+"; color: var(--acid); font-size: 1rem; }
    .exp-details[open] summary::after { content: "−"; }
    .exp-details p { margin: 0 0 1rem; color: rgba(242,240,232,.58); }
    .exp-cta { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; padding: .9rem 1rem; border-radius: 999px; background: var(--acid); color: var(--ink); font-size: .68rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
    .exp-cta.disabled { border: 1px solid var(--line-dark); background: transparent; color: rgba(242,240,232,.5); }

    /* Türkçe büyük harflerin üst işaretleri için güvenli satır kutuları */
    .hero h1 { font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif; line-height: .9; padding-block: .1em .08em; letter-spacing: -.08em; }
    .hero-surname { padding-bottom: .12em; margin-bottom: -.1em; }
    .section-heading h2, .about-kicker, .manifesto-stack span, .contact h2 { line-height: .94; padding-top: .08em; }
    .poster .poster-title, .generic-title, .post h3 { line-height: .9; padding-top: .07em; }
    .intro-line { padding-top: .2em; margin-top: -.2em; }
    .intro-line i { line-height: .9; padding-top: .04em; }
    .app-card.motion-surface:hover, .experiment-card.motion-surface:hover, .hero-portrait.motion-surface:hover { transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--surface-y)); }

    @media (max-width: 900px) {
      .hero--portrait .hero-grid { grid-template-columns: 1fr; }
      .hero--portrait .hero-copy, .hero--portrait .hero-side, .hero--portrait .hero-portrait { grid-column: 1; }
      .hero--portrait .hero-portrait { grid-row: auto; min-height: 34rem; }
      .app-card, .experiment-card, .experiment-card:nth-child(3n) { grid-column: span 12; }
    }
    @media (max-width: 620px) {
      .hero--center { text-align: left; }
      .hero--center .hero-grid { justify-items: start; }
      .hero--center h1 { font-size: clamp(3.7rem, 17vw, 6rem); line-height: .93; letter-spacing: -.072em; }
      .hero--center .role { max-width: 27rem; margin-inline: 0; }
      .hero--center .hero-portrait { justify-self: start; width: 5rem; }
      .hero--center .hero-intro { margin-inline: 0; }
      .hero--center .hero-actions { justify-content: flex-start; }
      .app-card { grid-template-columns: 1fr; }
      .app-media { min-height: 18rem; order: -1; }
      .app-content { min-height: 25rem; }
      .experiment-card { min-height: 26rem; }
    }

    /* Eşit ritimli, daha kompakt proje ızgarası */
    .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .project-card,
    .project-card:nth-child(3n + 1),
    .project-card:nth-child(3n + 2) { grid-column: auto; }
    .project-visual { min-height: 0; aspect-ratio: 4 / 3; }
    .project-info { padding: 1.15rem 1.15rem 1.3rem; }
    .project-title-row h3 { font-size: clamp(1.2rem, 1.7vw, 1.65rem); }
    .project-summary { min-height: 2.7rem; margin: .65rem 0 1rem; font-size: .84rem; }
    .project-meta { gap: .65rem; }
    .project-meta dd { font-size: .66rem; overflow-wrap: anywhere; }
    @media (max-width: 1100px) {
      .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 680px) {
      .project-grid { grid-template-columns: minmax(0, 1fr); }
      .project-visual { aspect-ratio: 1 / 1; }
    }