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

  :root {
    --ground:   #000000;
    --ground-2: #0a0a0a;
    --raised:   #121212;
    --line:     rgba(235, 235, 228, 0.14);
    --line-2:   rgba(235, 235, 228, 0.30);
    --ink:      #ECECE4;
    --ink-dim:  rgba(236, 236, 228, 0.56);
    --ink-faint:rgba(236, 236, 228, 0.36);
    --inv:      #000000;
    --paper:    #F3F3EE;
    --mq-ink:   #60706D;
    --accent:   #00f1a9;
    --accent-2: #00d194;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
    --shell: 1320px;
    --pad-x: clamp(1.15rem, 4.5vw, 3rem);
    --pad-y: clamp(5rem, 10vw, 9rem);

    --f-display: "Urbanist", "Helvetica Neue", Arial, sans-serif;
    --f-body: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  }

  /* Acik tema. Renk scroll ile kademeli yaziliyor (JS): tek parca halinde,
     kenar cizgisi olmadan ve kaydirma hiziyla ayni ritimde akiyor. Asagidaki
     sinif kurali yalnizca JS calismazsa devreye giren yedek. */
  html.tema-acik, html.tema-acik body { background-color: #FDFDFD; }
  html:not(.js) .tk, html.no-st .tk { background-color: #FDFDFD; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground); scrollbar-width: none; -ms-overflow-style: none; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  /* hide the scrollbar (scrolling still works) */
  html::-webkit-scrollbar, body::-webkit-scrollbar,
  .menu-panel::-webkit-scrollbar, .brief-modal::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .menu-panel, .brief-modal { scrollbar-width: none; -ms-overflow-style: none; }

  body {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .grain {
    position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  ::selection { background: var(--accent); color: var(--inv); }
  a { color: inherit; text-decoration: none; }
  svg { display: block; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad-x); }
  .skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--accent); color: var(--inv); padding: 0.65rem 1rem; font-weight: 600; }
  .skip:focus { left: 0; }

  /* ---------- Logo ---------- */
  .logo-full { display: block; height: 100%; width: auto; color: var(--ink); }

  /* ---------- Type ---------- */
  .sec-num { font-family: var(--f-mono); font-size: 1rem; color: var(--accent); }
  h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.0; letter-spacing: -0.03em; text-wrap: balance; }
  .h1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); line-height: 1.03; }
  .accent { color: var(--accent); }

  /* word-split reveal (added by JS to .split) */
  .split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .split-wi { display: inline-block; will-change: transform; }
  .hl-line { display: block; font-size: 1.75em; letter-spacing: -0.02em; line-height: 1.2142857142857142; }
  .hl-u { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1.5px; text-decoration-color: var(--ink-faint); }

  /* ---------- Intro loader ---------- */
  .intro {
    position: fixed; inset: 0; z-index: 300;
    background: var(--ground);
    display: grid; place-items: center;
    opacity: 0; pointer-events: none;
  }
  .intro.on { opacity: 1; pointer-events: auto; }
  /* proje adresiyle acilista: yuzde sayaci yok, sadece duz zemin (anasayfa gorunmesin) */
  .intro.vaka-bekleme > * { display: none; }
  .intro-mark { width: clamp(110px, 20vw, 200px); color: var(--ink); }
  .intro-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; background: var(--accent); }
  .intro-count { position: absolute; right: var(--pad-x); bottom: clamp(1rem, 4vw, 2rem); font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--ink-dim); }
  .intro-count::after { content: "%"; margin-left: 0.15em; opacity: 0.5; }

  /* ---------- Buttons ---------- */

  /* ---------- Header ---------- */
  /* corner info scrolls away with the hero - not sticky */
  .nav-wrap { position: absolute; inset: 0 0 auto 0; z-index: 110; }
  /* pushed ~50px down so the label lines up with the hero wordmark */
  .nav { width: 100%; padding: calc(clamp(0.85rem, 1.7vw, 1.15rem) + 50px) var(--pad-x) clamp(0.85rem, 1.7vw, 1.15rem); display: flex; align-items: flex-start; justify-content: flex-end; gap: 1.5rem; }
  /* two columns: descriptor left, time + contact right */
  .nav-meta { display: flex; align-items: flex-start; justify-content: flex-end; gap: clamp(2.5rem, 12vw, 7rem); font-family: var(--f-display); font-weight: 300; font-size: clamp(0.8rem, 0.95vw, 0.9rem); letter-spacing: -0.004em; line-height: 1.42; color: rgba(244, 244, 240, 0.92); }
  .nav-meta .nm-label { margin: 0; text-align: left; white-space: nowrap; }
  .nav-meta .nm-lbl-m { display: none; }
  .nav-meta .nm-info { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 0.12rem; white-space: nowrap; }
  .nav-meta .nm-info #clock { font-variant-numeric: tabular-nums; }
  .nav-meta .nm-info a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: rgba(244, 244, 240, 0.5); transition: color 0.25s var(--ease); }
  .nav-meta .nm-info a:hover { color: var(--accent); text-decoration-color: var(--accent); }

  /* ---------- Bottom dock (paper pill) ---------- */
  .dock { position: fixed; left: 0; right: 0; bottom: calc(clamp(0.9rem, 3vw, 1.6rem) + 10px); width: max-content; margin-inline: auto; z-index: 144; }
  .dock-inner { display: flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.3rem; background: var(--paper); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
  .dock-inner > * { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.25rem; border-radius: 999px; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inv); background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
  .nav-close-btn:hover { background: rgba(15,15,14,0.07); }
  .dock-cta { background: var(--inv); color: var(--paper); position: relative; overflow: hidden; isolation: isolate; }
  .dock-cta .cta-label, .dock-cta .arw { position: relative; z-index: 1; }
  .dock-cta .cta-fill { position: absolute; inset: -2px; background: var(--accent); z-index: 0; transform: translateY(101%); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
  .dock-cta.is-fill { color: var(--inv); }
  .dock-cta .arw svg { stroke: var(--accent); transition: stroke 0.3s var(--ease); }
  .dock-cta.is-fill .arw svg { stroke: var(--inv); }
  .menu-button-text { position: relative; height: 1em; width: 3.6em; overflow: hidden; text-align: left; }
  .menu-button-text p { line-height: 1; position: absolute; left: 0; top: 0; transition: transform 0.42s var(--ease); }
  .menu-button-text p + p { top: 100%; }
  .nav-close-btn.is-open .menu-button-text p { transform: translateY(-100%); }
  .icon-wrap { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid currentColor; opacity: 0.7; }
  .menu-button-icon { width: 11px; height: 11px; color: currentColor; display: block; transition: transform 0.45s var(--ease); }
  .nav-close-btn.is-open .menu-button-icon { transform: rotate(315deg); }

  /* ---------- Center-expanding menu ---------- */
  .menu-overlay { position: fixed; inset: 0; z-index: 142; background: rgba(0, 0, 0, 0.58); -webkit-backdrop-filter: blur(7px) saturate(0.9); backdrop-filter: blur(7px) saturate(0.9); opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease); }
  .menu-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
  .menu-panel {
    position: fixed; left: 0; right: 0; margin-inline: auto; bottom: clamp(1.4rem, 2.4vw, 2.3rem);
    transform: translateY(24px) scale(0.86);
    transform-origin: bottom center;
    z-index: 143;
    /* narrower left-right, and reaches further up the screen */
    width: min(92vw, 588px);
    background: var(--paper); color: var(--inv);
    border-radius: 26px;
    /* links sit toward the top-left: tighter top + left padding, roomier right/bottom */
    padding: clamp(1.5rem, 3vw, 2.1rem) clamp(2rem, 4.6vw, 3.4rem) clamp(1.9rem, 4.4vw, 3rem) clamp(1.5rem, 3.2vw, 2.3rem);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.35s var(--ease), visibility 0s linear 0.5s;
    display: flex; flex-direction: column;
    min-height: min(56vh, 520px); max-height: min(90vh, 820px); overflow: hidden auto;
  }
  .menu-panel[data-open="true"] {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s var(--ease), visibility 0s;
  }
  .menu-panel .mp-media {
    position: absolute; top: 0; right: 0;
    width: 62%; height: 50%;
    pointer-events: none; z-index: 0;
    overflow: hidden;
    background: var(--paper);
    border-top-right-radius: 26px;
    will-change: clip-path;
    /* feather only the inner (bottom-left) edge so the fluid melts into the card;
       most of the box stays at full opacity so the fluid reads sharp, not hazy.
       white stops (not black) so this renders correctly under both alpha- and
       luminance-mode mask interpretation - see the .hero-ring comment above. */
    -webkit-mask-image: radial-gradient(150% 150% at 100% 0%, #fff 68%, rgba(255,255,255,0.5) 87%, transparent 100%);
    mask-image: radial-gradient(150% 150% at 100% 0%, #fff 68%, rgba(255,255,255,0.5) 87%, transparent 100%);
  }
  .menu-panel .mp-media video {
    /* the video is larger than its box and its centre is pushed past the top-right
       corner, so ~half the fluid ring shows entering from the corner, the rest
       hidden outside the box. only a modest upscale of the 1280px source keeps it
       crisp. source is teal-on-black; invert() -> coral-on-white, multiply drops
       the white field into the paper card. */
    position: absolute; width: 150%; height: 150%; right: -58%; top: -56%;
    object-fit: cover; object-position: center;
    filter: invert(1) hue-rotate(-6deg) saturate(1.32) contrast(1.12) brightness(1);
    mix-blend-mode: multiply;
  }
  .menu-panel .m-links, .menu-panel .m-foot { position: relative; z-index: 1; }
  .menu-panel .m-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .menu-panel .m-links a { display: block; overflow: hidden; }
  .menu-panel .m-links a .mi {
    display: block;
    font-family: var(--f-display); font-weight: 500;
    font-size: clamp(1.4rem, 3.7vw, 2.35rem); letter-spacing: -0.022em; line-height: 1.24; color: var(--inv);
    transition: color 0.3s var(--ease), transform 0.4s var(--ease), letter-spacing 0.4s var(--ease);
    will-change: transform;
  }
  .menu-panel .m-links a:hover .mi, .menu-panel .m-links a:focus-visible .mi { color: var(--accent-2); transform: translateX(-0.5rem); letter-spacing: -0.03em; }
  .menu-panel .m-foot { margin-top: auto; margin-bottom: 4.6rem; padding-top: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; font-family: var(--f-body); font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: normal; text-transform: none; color: #60706d; }
  .menu-panel .m-foot .mf-c { display: flex; flex-direction: column; gap: 3.6px; }
  .menu-panel .m-foot .mf-c + .mf-c { text-align: right; color: var(--inv); }
  .menu-panel .m-foot a:hover { color: var(--accent-2); }

  @media (prefers-reduced-motion: reduce) {
    .menu-panel, .menu-overlay { transition: none !important; }
  }

  /* ---------- Hero ---------- */
  /* `overflow: clip visible` = clip on X, visible on Y. The oversized rotated
     video still can't produce a horizontal scrollbar, but it IS allowed to bleed
     past the hero's bottom edge into the black space below - otherwise the hero's
     own overflow cuts the fluid off in a hard straight line mid-arc.
     (clip+visible is the one mixed overflow pair the spec keeps as-authored;
     hidden+visible would silently compute to auto+auto and clip again.)
     The plain `overflow: hidden` above it is the fallback: a browser too old for
     the `clip` keyword throws the whole second declaration out, and without a
     fallback it would be left with `visible` on BOTH axes - i.e. the oversized
     rotated video escaping sideways and forcing a horizontal scrollbar. */
  .hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding-top: clamp(2.25rem, 5vh, 3.75rem); padding-bottom: clamp(3rem, 8vh, 5.5rem); position: relative; overflow: hidden; overflow: clip visible; isolation: isolate; }
  .hero .shell { position: relative; z-index: 2; width: 100%; max-width: none; margin-inline: 0; }
  /* wordmark sits UNDER the fluid video so the (mix-blend: lighten) fluid appears
     to flow across / through the logo */
  .hero .hero-wordmark { z-index: 0; padding-inline: clamp(0.9rem, 3.5vw, 2.4rem); }
  .hero-wordmark .logo-full { height: clamp(4.5rem, 13vw, 11.5rem); width: auto; }
  /* nudge the headline + team block up a little */
  .hero-mid { align-self: center; display: block; margin-top: clamp(-4.5rem, -6vh, -2rem); }
  .hero-copy { max-width: 24ch; }
  /* headline: thin, not bold; sized so .hl-line's 1.75em lands large */
  .hero-copy .h1 { margin: 1rem 0 1.3rem; font-weight: 300; font-size: clamp(1.7rem, 4.2vw, 2.5rem); letter-spacing: -0.02em; }
  /* no mask - the video is a plain rectangle, full clarity. mix-blend-mode:
     lighten already drops its solid-black background against the black page,
     so the corners read as black on their own without any extra masking. */
  /* The ring box hangs `--ring-bleed` BELOW the hero so the torus keeps going into
     the black space under the fold instead of being sliced mid-arc. The clip still
     happens (at the extended box), but by then the video's own content is black,
     and black + mix-blend-mode:lighten over a black page = invisible - so the cut
     edge simply cannot be seen. No mask needed, video stays fully sharp.
     The video is re-anchored to the HERO's centre, not the taller box's centre:
       top   -> 50% of (heroH + bleed) minus bleed/2  = heroH/2
       cover -> min-height is (100% - bleed) = heroH, so it isn't scaled up either. */
  .hero-ring { --ring-bleed: clamp(120px, 20vh, 220px); position: absolute; left: 0; right: 0; top: 0; bottom: calc(-1 * var(--ring-bleed)); z-index: 1; overflow: hidden; pointer-events: none; mix-blend-mode: lighten; }
  .hero-ring video { position: absolute; left: 50%; top: calc(50% - var(--ring-bleed) / 2); min-width: 100%; min-height: calc(100% - var(--ring-bleed)); width: auto; height: auto; transform: translate(-50%, -50%) rotate(40deg) scale(1.13); }
  @media (max-width: 700px) {
    /* Portrait hero keeps its own framing (width-driven 385%, nudged to 52%), but it
       gets the SAME bleed as desktop - the torus was being sliced mid-arc at the fold
       here too. Only the vertical anchor needs redoing: 52% of the now-taller box
       would drop the video, so measure the 52% against the hero's height instead. */
    .hero-ring video { min-width: 0; min-height: 0; width: 385%; height: auto; top: calc((100% - var(--ring-bleed)) * 0.52); transform: translate(-50%, -50%) rotate(38deg) scale(1); }
  }
  /* The ring now hangs below the hero, and its BLACK pixels are opaque out there:
     mix-blend-mode only blends against .hero's own isolation group, so anything the
     ring overlaps outside the hero gets painted over rather than blended with.
     The scroll parallax (yPercent 12) can push its bottom edge as far as the (01)
     heading, so layer this section above the hero instead of relying on the gap. */

  /* ---------- Slogan: kaydirmayla beyazlayan metin ---------- */
  /* The long black run-in the client asked for (min 200px) lives on this margin,
     so the hero video has finished well before any text arrives. The z-index guard matters:
     the hero ring bleeds below the fold and its black pixels are opaque out
     there, so this section content has to sit above it. */
  /* Layout follows the vision block the client sent: one very large
     left-aligned statement on ~3 tight lines, a big empty run under it, then a
     two-column foot - small parenthetical label far left, supporting paragraph
     on the right half. */
  .slogan {
    position: relative; z-index: 2;
    margin-top: clamp(200px, 26vh, 360px);
    min-height: 100vh; min-height: 100svh;
    display: grid; align-content: center;
    padding-block: clamp(4rem, 10vh, 8rem);
  }
  .slogan-text {
    font-family: var(--f-display); font-weight: 400;
    font-size: clamp(2.2rem, 6.9vw, 5.75rem);
    line-height: 1.04; letter-spacing: -0.035em;
    margin: 0;
  }
  /* cumleler ayri satirlarda: kirilim metnin uzunluguna degil kurguya bagli */
  .slogan-text .sl { display: block; }
  /* Words are revealed with OPACITY, not by tweening `color`. Tweening colour on
     every word forces a style recalculation per word per frame, which is what made
     the sweep feel sticky; opacity is composited on the GPU and stays smooth even
     with the pin and the video running behind it. inline-block so each word can
     also carry a transform. */
  .slogan-text .sw { display: inline-block; will-change: opacity, transform; }
  @media (max-width: 900px) {
    .slogan-text { max-width: none; }
  }
  @media (max-width: 720px) {
    .slogan { margin-top: clamp(200px, 22vh, 280px); }
    /* the statement has to stay a STATEMENT on phones: drop the ch cap so the
       lines run the full column width, and scale off vw so it lands ~41px on a
       375px screen instead of the ~31px the old clamp floor was giving. */
    .slogan-text { font-size: clamp(2.35rem, 12.2vw, 3.8rem); line-height: 1.1; max-width: none; }
  }
  .hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; transform: translateY(clamp(0.6rem, 1.8vh, 1.4rem)); }
  .hero-kw { font-family: var(--f-display); font-weight: 400; font-size: clamp(0.82rem, 1.25vw, 1.02rem); letter-spacing: -0.01em; }
  .hero-kw .kw-m { display: none; }
  .scroll-cue { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 0.5rem; }
  .scroll-cue span { width: 1px; height: 26px; background: var(--line-2); display: block; }

  /* ---------- Secili isler: yatay ray ---------- */
  /* Track is one flex row wider than the screen; GSAP slides it on X while the
     section is pinned, so a single composited transform does all the work. */
  /* Full-bleed bolum: baslik yok, ekranda sadece kartlar var ve ray dikeyde
     ortalanir. Yukseklik svh ile verildi ki mobil tarayici cubugu acilip
     kapanirken kartlar zipla­masin. */
  .cases { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; overflow: hidden; overflow: clip; padding-block: clamp(1.5rem, 4vh, 3rem); }
  .cases-head .sec-title { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
  .cases-viewport { overflow: hidden; }
  .cases-track { display: flex; align-items: stretch; gap: clamp(1rem, 2.2vw, 1.75rem); width: max-content; padding-inline: var(--pad-x); will-change: transform; }

  .case-card { flex: 0 0 auto; }
  /* full-bleed portrait tile, everything else sits on top of it */
  .case-thumb {
    position: relative; display: block; overflow: hidden;
    /* Istenen olcu 720x840 (6/7). Uc sinirdan en kucugu alinir: gercek olcu,
       dar ekranda yatay tasmayi onleyen 84vw, ve alcak ekranda karti iceri
       sigdiran 92svh karsiligi. Normal ekranlarda tam 720x840 kalir. */
    width: min(720px, 84vw, calc(92vh * 6 / 7)); width: min(720px, 84vw, calc(92svh * 6 / 7)); aspect-ratio: 6 / 7;
    background: linear-gradient(155deg, #121212 0%, #0a0a0a 52%, #161616 100%);
    isolation: isolate; cursor: pointer;
  }
  .case-thumb::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 85% at 12% 100%, rgba(0, 241, 169, 0.10), transparent 62%);
    transition: opacity 0.5s var(--ease);
  }
  /* pill row, top left - same treatment as the reference badges but carrying real
     capability tags instead of invented awards */
  .ct-tags { position: absolute; left: 1.15rem; top: 1.15rem; z-index: 3; display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .ct-tags span {
    font-family: var(--f-body); font-weight: 500; font-size: 0.82rem; letter-spacing: -0.005em;
    color: var(--ink); background: rgba(10, 10, 10, 0.78);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: 999px; padding: 0.5rem 0.95rem; white-space: nowrap;
  }
  .ct-name {
    position: absolute; left: 1.35rem; bottom: 1.25rem; z-index: 3;
    font-family: var(--f-display); font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2.15rem); letter-spacing: -0.03em; color: var(--ink);
  }
  /* Ok butonu: buton yerinde durur. Uzerine gelince beyaz daire sol alt
     kosesinden buyuyerek butonu doldurur; mevcut ok sag ust koseye dogru
     kuculerek kaybolur, ikinci ok ayni yoldan sol alttan buyuyerek girer. */
  .ct-arw {
    --ok-egri: cubic-bezier(0.65, 0.1, 0, 1);
    position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 3;
    width: 3.1rem; height: 3.1rem; border-radius: 50%; overflow: hidden;
    background: var(--accent); color: var(--inv); display: grid; place-items: center;
  }
  .ct-arw::before {
    content: ""; grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 50%;
    background: var(--paper); transform: scale(0); transform-origin: 0% 100%;
    transition: transform 0.5s var(--ok-egri);
  }
  .ct-arw svg { grid-area: 1 / 1; position: relative; transition: transform 0.5s var(--ok-egri), opacity 0.35s var(--ok-egri); }
  .ct-arw svg + svg { transform: translate(-58%, 58%) scale(0.1); opacity: 0; }
  .case-thumb:hover .ct-arw::before { transform: scale(1.35); }
  .case-thumb:hover .ct-arw svg { transform: translate(58%, -58%) scale(0.1); opacity: 0; }
  .case-thumb:hover .ct-arw svg + svg { transform: none; opacity: 1; }
  /* card art recedes a touch on hover so the follow tile reads clearly */
  .case-thumb:hover::after { opacity: 0.55; }

  /* rayin sonundaki kapanis slayti: ray cikmaz sokakta bitmesin */
  .case-all { display: flex; }
  .case-all-inner { display: grid; place-items: center; width: min(520px, 62vw, calc(66vh * 6 / 7)); width: min(520px, 62vw, calc(66svh * 6 / 7)); aspect-ratio: 6 / 7; }
  .ca-text { position: relative; display: inline-block; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -0.035em; color: var(--ink); }
  /* hover: alt cizgi soldan saga cizilir (scaleX + sol orijin, tek transform) */
  .ca-text::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 2px;
    background: var(--ink); transform: scaleX(0); transform-origin: left center;
    transition: transform 0.55s var(--ease);
  }
  .case-all-inner:hover .ca-text::after,
  .case-all-inner:focus-visible .ca-text::after { transform: scaleX(1); }
  .ca-text sup { font-size: 0.42em; vertical-align: super; margin-left: 0.12em; color: var(--ink-faint); }


  /* imleci takip eden kare - sadece fare ile kullanilan cihazlarda */
  .case-cursor {
    position: fixed; left: 0; top: 0; z-index: 136; pointer-events: none;
    width: 280px; height: 330px; border-radius: 0; overflow: hidden;
    display: grid; place-items: center; text-align: center;
    background: linear-gradient(150deg, #1a1a1a, #0d0d0d);
    opacity: 0; transform: translate(-50%, -50%) scale(0.6);
    will-change: transform, opacity;
  }
  /* Proje medyasi iki katmanda duruyor. Projeden projeye gecerken katmanlar
     yan yana kayiyor: yeni olan kutunun disindan girer, eski olan ayni anda
     ters yone cikar. Kaydirma JS tarafinda kare basina %10 yaklasan bir
     yumusatmayla yapiliyor (referans olcumu: ~160ms zaman sabiti). */
  .case-cursor .cc-kat {
    position: absolute; inset: 0; overflow: hidden; opacity: 0;
    will-change: transform;
  }
  .case-cursor .cc-kat.is-acik { opacity: 1; }
  .case-cursor .cc-gorsel {
    position: absolute; inset: 0; background-size: cover; background-position: center;
  }
  .case-cursor .cc-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0;
  }
  .case-cursor .cc-kat.is-video .cc-video { opacity: 1; }
  /* ortadaki beyaz buton: proje gorselinin ya da videosunun ustunde */
  .case-cursor .cc-buton {
    position: relative; z-index: 2; justify-self: center; align-self: center;
    padding: 0.62rem 1.15rem 0.66rem; background: var(--paper); color: var(--inv);
    font-family: var(--f-mono); font-weight: 600;
    font-size: 0.74rem; letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  @media (max-width: 720px) {
    /* Ray telefonda da masaustuyle ayni: yatay ve sabitlenmis. Kart olcusu zaten
       min(720px, 84vw, 92svh oranı) ile kendini kucultuyor, ayrica bir sey
       gerekmiyor. Sadece imleci takip eden kare kapali - dokunmatikte imlec yok. */
    .case-cursor { display: none; }
    /* Telefonda 6/7 orani kartin ekranin ancak %45ini kaplamasina yol aciyordu.
       Daha dik bir oran (2/3) ve 78vw genislik: kart ekranda hakim, yanindan da
       bir sonraki kart goz kirpiyor - referanstaki mobil gorunumun duzeni. */
    .case-thumb { width: min(78vw, calc(64vh * 2 / 3)); width: min(78vw, calc(64svh * 2 / 3)); aspect-ratio: 2 / 3; }
    .case-all-inner { width: min(62vw, calc(64vh * 2 / 3)); width: min(62vw, calc(64svh * 2 / 3)); aspect-ratio: 2 / 3; }
  }

  /* ---------- Uzmanlik seridi (marquee) ----------
     Referans olculer (1440px ekranda olculdu): 165px / weight 400 /
     letter-spacing -0.02em / renk rgb(96,112,109) / bolum bosluklari 180px.
     Kenarlarda maske YOK - kelimeler ekran kenarinda kesiliyor, referanstaki
     gibi. Dikeyde kirpma da yok, yoksa "g" ve "y" nin alti kesiliyordu. */
  .mq { position: relative; z-index: 2;
    /* yatayda kirp, dikeyde serbest birak: karisik cift oldugu gibi korunur,
       hidden+visible olsa ikisi de auto olur ve sayfa yandan kayardi */
    overflow: hidden; overflow: clip visible;
    padding-block: clamp(8.5rem, 19vw, 17rem); }
  .mq-vp { position: relative; }
  .mq-track { display: flex; align-items: baseline; width: max-content; will-change: transform; }
  .mq-i, .mq-s { display: inline-block; font-family: var(--f-display); font-weight: 400;
    font-size: clamp(2.6rem, 11.5vw, 12rem); line-height: 1; letter-spacing: -0.02em;
    color: var(--mq-ink); white-space: nowrap; }
  .mq-s { padding-inline: clamp(1rem, 2.4vw, 2.2rem); }
  @media (max-width: 720px) {
    .mq { padding-block: clamp(5.5rem, 19vw, 8rem); }
    .mq-i, .mq-s { font-size: clamp(2.4rem, 13.5vw, 4rem); }
  }

  /* ---------- Teklif bolumu (acik zemin) ---------- */
  /* Zemin bu bolume ait: sayfanin geri kalani koyu kaliyor, gecis kesitin
     kendi sinirlarinda basliyor ve bitiyor. */
  /* Zemini sayfa tasiyor (html.tema-acik); bolum yalnizca kendi koyu yazi
     rengini veriyor. */
  .tk { position: relative; z-index: 2; color: var(--tk-ink, var(--inv)); transition: color 0.25s ease;
    min-height: 100vh; min-height: 100svh; display: grid; align-content: start;
    padding-block: clamp(3rem, 7vh, 5rem) clamp(14rem, 45vh, 26rem); padding-block: clamp(3rem, 7vh, 5rem) clamp(14rem, 45svh, 26rem); }
  /* icerik sayfanin sol kenarina dayaniyor - ortalanmis kapsayici yok */
  .tk-in { max-width: none; margin-inline: 0; }
  .tk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; }
  .tk-label { font-family: var(--f-body); font-weight: 500; font-size: 0.92rem;
    letter-spacing: -0.01em; color: rgba(15, 15, 14, 0.62); }
  .tk-idx { font-family: var(--f-body); font-weight: 500; font-size: 0.92rem;
    color: rgba(15, 15, 14, 0.62); }
  .tk-rule { display: block; height: 1px; margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
    background: rgba(15, 15, 14, 0.16); transform: scaleX(0); transform-origin: left center; }
  .tk-title { margin: clamp(3.5rem, 9vw, 8rem) 0 0;
    font-family: var(--f-display); font-weight: 400;
    font-size: clamp(2.4rem, 7vw, 6.2rem); line-height: 1.1; letter-spacing: -0.035em; }
  /* Maske artik KELIME bazinda. Satir maskesi kullanilinca "g" ve "y"
     kuyruklari kirpiliyordu; kelime kutusuna alt pay verilip ayni kadar
     negatif margin ile satir ritmi korunuyor - kuyruk tam gorunuyor. */
  .tk .tl { display: block; }
  .tk .tl-i { display: block; }
  .tk .tw { display: inline-block; overflow: hidden; vertical-align: bottom;
    padding-bottom: 0.2em; margin-bottom: -0.2em; }
  .tk .tw-i { display: inline-block; will-change: transform; }
  @media (max-width: 720px) {
    .tk { padding-block: clamp(2.4rem, 6vh, 3.6rem); }
    .tk-title { font-size: clamp(2.1rem, 9.8vw, 3.4rem); margin-top: clamp(2.5rem, 12vw, 4rem); }
  }

  /* ---------- Hizmet kartlari (ust uste kayan) ----------
     Referanstaki yontem: her kart position:sticky ile ekranin tepesine
     yapisiyor, bir sonraki kart uzerine kayiyor. Altta kalan kartin uzerinde
     siyah bir ortu var, ustu kapandikca opakligi artiyor - derinlik hissi
     bundan geliyor. */
  .hz-stack { display: flex; flex-direction: column; margin-top: clamp(3rem, 8vw, 7rem); }
  /* Mobilde baslik beyaz zeminde okunabilsin diye siyah kart daha sonra
     geliyor; aksi halde dar ekranda kart basligin ustune biniyordu. */
  @media (max-width: 900px) {
    .hz-stack { margin-top: clamp(3rem, 8vw, 7rem); }
    .tk { padding-bottom: 0; }
  }
  .hz-kart { position: sticky; top: 0; isolation: isolate; min-height: 100vh; min-height: 100svh; align-content: center;
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 17rem);
    gap: clamp(1.5rem, 3vw, 2.6rem); align-items: start;
    padding-block: clamp(2.5rem, 4vw, 3.75rem) clamp(2.5rem, 3.5vw, 3.2rem);
    padding-inline: var(--pad-x);
    background: var(--ground); border-top: 1px solid var(--line); }
  .hz-ort { position: absolute; inset: 0; z-index: 3; background: #000;
    opacity: 0; pointer-events: none; }
  .hz-art { position: relative; overflow: hidden; height: clamp(240px, 34vw, 500px); aspect-ratio: 30 / 29;
    background: rgba(26, 35, 33, 0.4); display: grid; place-items: center; }
  .hz-art .hz-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hz-baslik { margin: 0; font-family: var(--f-display); font-weight: 600;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -0.03em; color: var(--ink); }
  .hz-no { color: var(--ink-faint); font-weight: 400; }
  .hz-metin { margin: clamp(1.2rem, 2.2vw, 1.9rem) 0 0; max-width: 34ch;
    font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.5; color: var(--ink-dim); }
  .hz-liste { list-style: none; margin: clamp(1.2rem, 2.2vw, 1.9rem) 0 0; padding: 0;
    font-family: var(--f-display); font-weight: 500;
    font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.85; color: var(--ink); }
  @media (max-width: 900px) {
    .hz-kart { grid-template-columns: 1fr; gap: clamp(1.2rem, 4vw, 2rem);
      padding-block: clamp(2rem, 6vw, 3rem); }
    .hz-art { height: auto; aspect-ratio: 16 / 11; width: 100%; }
    .hz-metin, .hz-liste { max-width: none; margin-top: clamp(0.8rem, 3vw, 1.2rem); }
  }

  /* Video cercevesi: mobilde kutuyu tam dolduruyor (onceki gibi) */
  .hz-cer { position: absolute; inset: 0; overflow: hidden; }

  /* ---------- Hizmet kartlari: masaustu duzeni ----------
     Referans sitede 1440px ekranda olculen degerler, vw'ye cevrildi:
     gorsel kutusu 450x435 (30:29) ve icinde 261x294 dikey video ortada;
     yazi sutunu x=605'ten basliyor (gorselden 125px acik), 488px genis;
     hizmet listesi 218px, basligin 60px altindan basliyor, satir 22.5px.
     Baslik 28.5px/600, aciklama 19.5/25.5px/500 gri-yesil. */
  @media (min-width: 901px) {
    .hz-kart {
      grid-template-columns: 31.25vw 7.4vw minmax(0, 33.9vw) minmax(0, 1fr) 15.14vw;
      column-gap: 0; }
    .hz-art { grid-column: 1; width: 100%; height: auto; aspect-ratio: 30 / 29;
      background: linear-gradient(180deg, #0A1211 0%, #16201E 100%); }
    .hz-cer { inset: auto; left: 50%; top: 50%; width: 58%; height: 67.6%;
      transform: translate(-50%, -50%); }
    .hz-govde { grid-column: 3; }
    .hz-liste { grid-column: 5; margin-top: 4.17vw;
      font-size: clamp(0.95rem, 1.146vw, 1.15rem); line-height: 1.364; font-weight: 500; }
    .hz-baslik { font-size: clamp(1.4rem, 1.98vw, 1.9rem); line-height: 1.26; font-weight: 600; }
    .hz-no { color: #60706D; font-weight: 600; }
    .hz-metin { margin-top: 2vw; max-width: 26.5vw;
      font-size: clamp(1.05rem, 1.354vw, 1.3rem); line-height: 1.31; font-weight: 500;
      color: #60706D; }
  }

  /* ---------- Cerez bildirimi ---------- */
  .ck { position: fixed; z-index: 128;
    right: var(--pad-x); bottom: calc(clamp(0.9rem, 3vw, 1.6rem) + 10px);
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.3rem 0.3rem 0.3rem 1.5rem; border-radius: 999px;
    background: #0F0F0E; border: 1px solid rgba(236, 236, 228, 0.10);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5); }
  .ck-t { margin: 0; font-family: var(--f-body); font-weight: 500;
    font-size: 0.92rem; line-height: 1.3; color: var(--ink); white-space: nowrap; }
  .ck-b { font-family: var(--f-body); font-weight: 500; font-size: 0.92rem;
    color: var(--inv); background: var(--paper); border: 0; border-radius: 999px;
    padding: 0.78rem 1.3rem; cursor: pointer; white-space: nowrap;
    transition: background-color 0.3s var(--ease), transform 0.3s var(--ease); }
  .ck-b:hover, .ck-b:focus-visible { background: #FFFFFF; transform: translateY(-1px); }
  /* display: flex hidden niteligini eziyordu; onaydan sonra da, sonraki
     ziyaretlerde de kutu gorunur kaliyordu */
  .ck[hidden] { display: none; }
  /* Cerez bildirimi yalnizca masaustunde: mobilde gosterilmiyor */
  @media (max-width: 900px) {
    .ck { display: none !important; }
  }

  /* ---------- Footer ---------- */
  /* Referans olculer (1440x900 ekranda olculdu): ust bosluk 135px,
     sutunlar bittikten 134px sonra kapanis grubu, yasal satir kelime isaretinin
     47px ustunde, alt bosluk 30px. Footer tek akis - linkler ilk ekrani
     dolduruyor, biraz kaydirinca logo + akiskan geliyor. */
  /* Footer kendi koyu zeminini tasiyor: acik tema henuz kapanmamis olsa bile
     footer asla beyaz gorunmuyor. */
  footer { background: var(--ground);
    position: relative; overflow: hidden; overflow: clip; min-height: 100vh; min-height: 100svh;
    background: var(--ground);
    display: flex; flex-direction: column;
    padding-block: clamp(3rem, 7vh, 5.5rem) clamp(1.4rem, 2.1vw, 2.2rem); }
  .foot-inner { flex: 1 1 auto; }
  /* yasal satir footer'in dibinde */
  .foot-end { position: relative; z-index: 3; margin-top: clamp(2.5rem, 6vw, 4.5rem); }

  /* sag alt kosedeki akiskan: siyah zemine lighten ile oturuyor, maske yok */
  .foot-vid {
    /* Footer dorde bolunse, akiskan sag alt kareyi (yarim genislik x yarim
       yukseklik) dolduracak kadar buyuk. Cemberin merkezi footer'in sag alt
       kosesine oturuyor, yaricap kareyi kapsiyor; gerisi disarida kirpiliyor.
       Kadrajda cember ~%49 genislikte oldugu icin olculer buna gore. */
    --fv-w: min(172vw, 2600px);
    position: absolute; width: var(--fv-w);
    right: calc(var(--fv-w) * -0.475); bottom: calc(var(--fv-w) * -0.32);
    /* kelime isaretinin USTUNDE duruyor ki akiskan beyaz harflerin uzerinden
       akiyormus gibi gorunsun. difference secildi cunku lighten/screen beyaz
       uzerinde hicbir sey gostermez (beyaz zaten en parlak deger); difference
       ise hem siyah zeminde akiskani oldugu gibi hem beyaz harflerin uzerinde
       ters cevrilmis haliyle gosterir - iki yerde de gorunur kalir. */
    z-index: 2; pointer-events: none; mix-blend-mode: lighten;
    /* Varsayilan GORUNUR. Gizli baslangici GSAP kuruyor; boylece animasyon
       zincirinin herhangi bir halkasi kopsa bile akiskan ekranda kaliyor. */
    opacity: 1; will-change: opacity, transform, filter;
  }
  /* kaynak tembel atandigi icin yuklenmeden once intrinsic olcu yok; oran
     verilmezse kutu cokuyor ve video gelince sayfa zipliyor */
  .foot-vid video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

  /* referanstaki gibi tam kanama: ortalanmis kapsayici yok, sadece kenar boslugu */
  .foot-inner { position: relative; z-index: 1; max-width: none; margin-inline: 0; }
  .foot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
    padding-bottom: clamp(1.2rem, 2.5vw, 1.8rem); border-bottom: 1px solid var(--line); }
  .foot-kicker { font-family: var(--f-body); font-weight: 500; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--ink); }
  .foot-idx { font-family: var(--f-body); font-weight: 500; font-size: 0.92rem; color: var(--ink); }

  .foot-cols { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: clamp(2rem, 5vw, 4rem);
    padding-top: clamp(2.5rem, 5vw, 4rem); }
  .foot-col { display: flex; flex-direction: column; align-items: flex-start; }
  .foot-label { font-family: var(--f-body); font-size: 1.08rem; color: var(--ink-faint); margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem); }

  /* Buyuk, gosterisli baglantilar. Hover'da alt cizgi soldan saga cizilir ve
     metin hafifce saga kayar - tek transform, GPU'da compose edilir. */
  .foot-col a {
    position: relative; display: inline-block;
    font-family: var(--f-display); font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.42;
    color: var(--ink);
    transition: transform 0.45s var(--ease), color 0.35s var(--ease);
  }
  .foot-col a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 1.5px;
    background: currentColor; transform: scaleX(0);
    /* girerken soldan saga cizilir, cikarken yine soldan saga toplanir:
       origin hover disinda saga alindigi icin kaybolus da ayni yonde akiyor */
    transform-origin: right center; transition: transform 1.45s var(--ease);
  }
  .foot-col a:hover, .foot-col a:focus-visible { transform: translateX(6px); }
  .foot-col a:hover::after, .foot-col a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

  .foot-say p { max-width: 34ch; font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.45; color: var(--ink); margin: 0 0 1.7rem; }
  .foot-say .foot-mail { color: var(--accent); font-family: var(--f-body); font-size: clamp(1.08rem, 1.5vw, 1.38rem); }
  .foot-say .foot-mail::after { background: var(--accent); bottom: -0.15em; }
  /* mailin altindaki telefon: mail ile ayni renk, farki surekli alti cizili olmasi */
  /* iki numara yan yana */
  .foot-say .foot-teller { display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; margin-top: 0.75rem; }
  .foot-say .foot-tel::after { transform: scaleX(1); transform-origin: left center; }
  .foot-say .foot-tel:hover::after, .foot-say .foot-tel:focus-visible::after { transform: scaleX(0); transform-origin: right center; }

  /* Yasal satir akiskanin USTUNDE kaliyor. difference sayesinde siyah zeminde
     oldugu gibi, akiskanin parlak kisimlarinin uzerinde ise ters cevrilmis
     gorunuyor - her iki durumda da okunakli. */
  /* Videonun ustunde duruyor - akiskan yaziyi yutmasin */
  .foot-legal { position: relative; z-index: 5;
    margin: 0 0 clamp(1.6rem, 3.3vw, 3rem); padding-inline: var(--pad-x);
    font-family: var(--f-body); font-size: 0.86rem; color: var(--ink-dim); }


  @media (max-width: 860px) {
    /* referanstaki mobil duzen: Site ve Takip yan yana, Merhaba deyin altlarinda
       tam genislikte */
    .foot-cols { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 2.5rem); }
    .foot-say { grid-column: 1 / -1; margin-top: clamp(2rem, 7vw, 3rem); }
    .foot-say p { max-width: none; }
    .foot-col a { font-size: clamp(1.15rem, 5vw, 1.5rem); }
    /* Mobilde de akiskan gorunuyor. Dar ve uzun ekranda cember daha kucuk bir
       yaricapla sag alt bolgeye oturuyor. */
    /* mobilde konum degismedi: masaustunde biraz sola/asagi alindi */
    .foot-vid { --fv-w: 272vw;
      right: calc(var(--fv-w) * -0.51); bottom: calc(var(--fv-w) * -0.287); }
    footer { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
      padding-block: clamp(2.4rem, 5.5vh, 3.6rem) 0; }
    .foot-inner { flex: 1 1 auto; }
    .foot-end { margin-top: clamp(1.6rem, 6vw, 3rem); }
    .foot-legal { margin-bottom: clamp(1rem, 3.5vw, 1.8rem); }
  }

  /* ---------- Hero team + preview ---------- */
  /* portraits + text sit side by side (never stacked); tiny gap between photos.
     width:max-content lets the row escape the narrow .hero-copy column */
  .hero-team { display: flex; align-items: center; gap: 1.3rem; margin-top: 2rem; flex-wrap: nowrap; width: max-content; max-width: min(88vw, 900px); }
  /* text-wrap: balance instead of a hard <br> - the row's max-width is fluid
     (min(88vw, 900px)), so a fixed break lands badly at in-between widths. Balanced
     wrapping keeps "bir araya getirerek" from being split across the two lines. */
  .hero-team p { flex: 1 1 auto; min-width: 0; font-family: var(--f-body); color: rgb(236 236 228 / 52%); font-size: 1.35rem; line-height: 1.38; margin: 0; text-wrap: balance; }
  /* small vertical video tile with a round button inside it - draggable +
     magnetic follow on hover */
  .hero-preview { position: absolute; right: calc(var(--pad-x) + 1rem); bottom: calc(clamp(9.5rem, 25vh, 15.5rem) + 18px); width: 210px; z-index: 3; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; will-change: transform; }
  .hero-preview.is-drag { cursor: grabbing; }
  #workCard[data-vaka-ac] .hp-art { cursor: pointer; }
  .hero-preview .hp-art { width: 210px; height: 280px; position: relative; overflow: hidden; background: var(--ground); border: 1px solid var(--line); border-radius: 6px; }
  .hero-preview .hp-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
  .hero-preview .hp-arw { position: absolute; right: 0.65rem; bottom: 0.65rem; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: var(--inv); display: grid; place-items: center; z-index: 2; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease); }
  .hero-preview .hp-arw:hover { transform: scale(1.1); background: #ffffff; color: var(--inv); }
  @media (max-width: 1120px) { .hero-preview { display: none; } }

  /* ---------- Brief modal (contact form) ---------- */
  .brief-backdrop { position: fixed; inset: 0; z-index: 145; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(10px) saturate(0.85); backdrop-filter: blur(10px) saturate(0.85); opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease); }
  .brief-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
  .brief-modal {
    /* slides in from off the right edge and floats near the right with a margin */
    --bm-gap: clamp(0.75rem, 2.2vw, 1.75rem);
    position: fixed; right: var(--bm-gap); top: var(--bm-gap); bottom: var(--bm-gap);
    width: min(94vw, 760px);
    overflow-y: auto;
    z-index: 146;
    background: var(--paper); color: var(--inv);
    border-radius: 26px;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.4rem);
    transform: translateX(calc(100% + var(--bm-gap)));
    opacity: 1; pointer-events: none;
    box-shadow: -60px 0 160px rgba(0, 0, 0, 0.5);
    transition: transform 0.68s var(--cubic-default);
    will-change: transform;
  }
  .brief-modal[data-open="true"] { transform: translateX(0); pointer-events: auto; }
  .bm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
  .bm-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); color: var(--inv); letter-spacing: -0.03em; }
  .bm-close { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(15, 15, 14, 0.06); border: 0; border-radius: 999px; padding: 0.6rem 1rem; cursor: pointer; color: var(--inv); flex: none; }
  .bm-close:hover { background: rgba(15, 15, 14, 0.12); }
  .bm-form { display: flex; flex-direction: column; gap: 1.5rem; }
  .bm-fieldset { border: 0; padding: 0; }
  .bm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media (max-width: 560px) { .bm-row { grid-template-columns: 1fr; } }
  .bm-field { display: flex; flex-direction: column; gap: 0.4rem; }
  .bm-field input, .bm-field textarea { font-family: var(--f-body); font-size: 0.95rem; color: var(--inv); background: rgba(15, 15, 14, 0.05); border: 1px solid transparent; border-radius: 8px; padding: 0.85rem 1rem; width: 100%; resize: vertical; }
  .bm-field textarea { min-height: 6.5rem; }
  .bm-field input::placeholder, .bm-field textarea::placeholder { color: rgba(15, 15, 14, 0.45); }
  .bm-field input:focus, .bm-field textarea:focus { outline: none; border-color: var(--accent-2); background: #fff; }
  .bm-err { font-family: var(--f-mono); font-size: 0.72rem; color: #d21f3c; display: none; }
  .bm-field.invalid input, .bm-field.invalid textarea { border-color: #d21f3c; }
  .bm-field.invalid .bm-err { display: block; }
  .bm-group legend { font-family: var(--f-body); font-weight: 600; font-size: 0.95rem; color: var(--inv); margin-bottom: 0.7rem; }
  .bm-group.invalid legend { color: #d21f3c; }
  .bm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .bm-chips label { font-family: var(--f-mono); font-size: 0.8rem; border: 1px solid rgba(15, 15, 14, 0.2); border-radius: 6px; padding: 0.55rem 0.95rem; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
  .bm-chips label:hover { border-color: var(--inv); }
  .bm-chips input { position: absolute; opacity: 0; pointer-events: none; }
  .bm-chips label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--inv); }
  .bm-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
  .bm-submit button { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--inv); color: var(--paper); border: 0; border-radius: 999px; padding: 0.85rem 1.6rem; font-family: var(--f-body); font-weight: 600; font-size: 0.92rem; cursor: pointer; }
  .bm-submit button .arw svg { stroke: var(--accent); }
  .bm-submit button:hover { background: #000; }
  .bm-note { font-family: var(--f-mono); font-size: 0.7rem; color: rgba(15, 15, 14, 0.5); }

  /* ---------- Reveal base (only hidden once JS confirms it can animate) ---------- */
  html.js .reveal { opacity: 0; }
  .reveal.is-in, .no-st .reveal { opacity: 1; }

  /* ---------- Responsive ---------- */
  @media (max-width: 940px) {
    .hero-ring { opacity: 0.92; }
  }
  @media (max-width: 720px) {
    /* "Tasarım. Yazılım. Büyüme." : centred, above the dock, near-white, 12pt,
       a touch heavier so it is not too thin on phones */
    .hero-foot { flex-direction: column; align-items: center; gap: 1.25rem; transform: none; }
    /* mobile keeps "Yazılım" and its own weight (site owner: "mobil aynı kalsın") */
    .hero-kw { font-weight: 500; text-align: center; width: 100%; font-size: 12pt; letter-spacing: 0.005em; margin-bottom: 4.25rem; color: rgba(240, 240, 235, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
    .hero-kw .accent { color: rgba(240, 240, 235, 0.92); }
    .hero-kw .kw-d { display: none; }
    .hero-kw .kw-m { display: inline; }
    .scroll-cue { display: none; }
    /* portraits + text side by side; text bottom-aligned so it ends where the
       photos end */
    .hero-team { gap: 0.85rem; align-items: flex-end; }
    /* portreler kalkti: cumle iki satira sigacak genislikte */
    .hero-team p { font-size: 0.95rem; max-width: 44ch; line-height: 1.34; }
    /* bigger bottom dock */
    .menu-button-text { width: 3.9em; }
    .dock-inner { padding: 0.4rem; }
    .dock-inner > * { padding: 1rem 1.55rem; font-size: 0.78rem; letter-spacing: 0.12em; gap: 0.7rem; }
    .icon-wrap { width: 22px; height: 22px; }
    .menu-button-icon { width: 12px; height: 12px; }
    /* top corner: "360 derecelik / yaklaşım." - white; no clock / email.
       drop the desktop +50px push so it lines up with the wordmark on mobile */
    .nav { padding-top: calc(clamp(1.9rem, 4.5vh, 2.7rem) + 4px); }
    .nav-meta { font-size: 13pt; gap: 0; }
    .nav-meta .nm-info { display: none; }
    .nav-meta .nm-label { text-align: left; color: #ffffff; font-weight: 500; }
    .nav-meta .nm-lbl-m { display: none; }
    /* menu opens as a tall bottom sheet covering ~half the screen */
    .menu-panel {
      width: calc(100vw - 4.2rem); max-width: none;
      bottom: 1.5rem;
      min-height: 0; max-height: 76vh;
      padding: 1.5rem 1.6rem 1.7rem 1.3rem; border-radius: 22px;
    }
    .menu-panel .m-links a .mi { font-size: clamp(1.55rem, 6.6vw, 2.05rem); line-height: 1.34; }
    .menu-panel .mp-media { width: 54%; height: 42%; border-top-right-radius: 22px; }
    .menu-panel .mp-media video { width: 158%; height: 158%; right: -66%; top: -54%; }
    /* content-height panel on mobile: normal gap, no auto-fill that can overlap */
    .menu-panel .m-foot { margin-top: 2.1rem; margin-bottom: 5.5rem; }
    .brief-modal { --bm-gap: 0.6rem; width: calc(100vw - 1.2rem); border-radius: 18px; }
  }

  /* Animations run regardless of the OS reduced-motion setting (client requested a
     heavily animated experience). Only a permanently-still fallback
     is kept for the no-JS case via the html.js guard on .reveal above. */

  /* ---------- Vaka detayi (karta tiklaninca acilan katman) ----------
     Olculer 1440px ekrana gore vw ile olceklenir. Acilis: siyah perde,
     kapak netlesir, tanim satirlari egikten duzelerek yukselir, proje adi
     dev serit halinde akar. Bolumler: etiket satiri + buyuk cumle +
     parantezli sol sutun / sag icerik, kosesiz 15px aralikli gorseller. */
  /* taban yazi boyutu ekranla olcekleniyor (1440px'te 12px): em ile verilen tum olculer buna gore */
  .cv { position: fixed; inset: 0; z-index: 135; font-size: clamp(8px, 0.8333vw, 16px); --cvx: clamp(16px, 2.08vw, 40px); --cvg: clamp(8px, 1.04vw, 20px); --cizgi-renk: #1c2321; }
  .cv[hidden] { display: none; }
  .cv:focus { outline: none; }
  /* katmanlar: eski sayfa kopyasi (geciste) < karartma < detay < kapanis perdesi */
  .cv-eski { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; color: #fff; pointer-events: none; }
  .cv-karart { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
  .cv-scroll {
    position: absolute; inset: 0; z-index: 2; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: #000; color: #fff; scrollbar-width: none;
    transition: background-color 0.8s var(--ease);
  }
  .cv-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
  /* sayfanin sonuna inince zemin aciliyor */
  .cv-scroll.is-acik, .cv-eski.is-acik { background: #fdfdfd; }
  .cv-perde { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }
  .cv-icerik { position: relative; min-height: 100%; }
  .cv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cv-next-card:focus-visible, .cv-cta-b:focus-visible, .cv-canli-b:focus-visible, .cv-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  /* satir maskesi: metin olculup satirlara bolunuyor, her satir kendi kutusundan kayiyor */
  .cv .l { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .cv .li { display: block; white-space: nowrap; will-change: transform; }
  /* cizgiler soldan uzayarak geliyor: --cizgi 0'dan 1'e */
  .cv [data-cizgi] { position: relative; }
  .cv [data-cizgi]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cizgi-renk); transform: scaleX(var(--cizgi, 1)); transform-origin: 0 50%; }

  /* ust serit: anasayfadaki logo ve kose yazisiyla ayni olculer, hero ile birlikte kayar */
  .cv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; pointer-events: none; }
  .cv-top .nav-meta { pointer-events: auto; }
  .cv-top .nm-label, .cv-top .nm-info { overflow: hidden; }
  .cv-top .nm-info > * { display: block; }
  .cv-top .nm-lbl-d { display: inline-block; }
  .cv-logo { position: absolute; z-index: 1; top: clamp(2.25rem, 5vh, 3.75rem); left: clamp(0.9rem, 3.5vw, 2.4rem); display: block; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); line-height: 0; cursor: pointer; pointer-events: auto; overflow: hidden; }
  .cv-logo .logo-full { display: block; width: auto; height: clamp(4.5rem, 10.4vw, 9.2rem); }
  .cv-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

  /* acilis ekrani */
  .cv-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; }
  .cv-hero-media { position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 79.75em; background: #0b0b0b; overflow: hidden; }
  .cv-hero-media > * { will-change: transform, filter; }
  .cv-hero-shade { position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 79.75em; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.5) 47%, #000 100%); }
  .cv-intro { position: absolute; left: var(--cvx); bottom: calc(45% + 0.526em); margin: 0; width: 15.79em; font-family: var(--f-display); font-weight: 400; font-size: 2.375em; line-height: 1.2632; letter-spacing: -0.02em; color: #fff; }
  .cv-hero-mq { position: absolute; left: 0; right: 0; top: calc(55% + 40px); overflow: hidden; }
  .cv-hmq-ray, .cv-nmq-ray { display: flex; width: max-content; will-change: transform; }
  .cv-hmq-grup, .cv-nmq-grup { display: flex; flex: none; }
  .cv-hmq-grup span, .cv-nmq-grup span { flex: none; white-space: nowrap; padding-right: 0.25em; font-family: var(--f-display); font-weight: 400; font-size: 13.75em; line-height: 1; letter-spacing: -0.02em; }
  .cv-hmq-grup span { color: #fff; }
  /* satir yuksekligi 1 iken g, ğ, ş, y kuyruklari tasmayi kesen kutuda
     kesiliyordu: alt dolgu kuyruk payi kadar, taban cizgisi yerinden oynamiyor */
  .cv-hmq-grup span, .cv-nmq-grup span { padding-bottom: 0.22em; }
  .cv-nmq-grup span { color: #60706d; }
  .cv-hero-foot { position: absolute; left: var(--cvx); right: var(--cvx); bottom: 3.375em; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--f-body); font-weight: 500; font-size: 1em; line-height: 1.375; color: #fff; }

  /* bolumler */
  .cv-main { padding-inline: var(--cvx); }
  .cv-sec { padding-top: 22.6em; }
  .cv-main > .cv-sec:first-child { padding-top: 31.4em; }
  .cv-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 2.625em; font-family: var(--f-body); font-size: 1em; line-height: 1.375; }
  .cv-sec-label { font-weight: 600; color: #60706d; }
  .cv-sec-no { font-weight: 400; color: #fff; }
  .cv-statement { margin: 0; max-width: 78vw; font-family: var(--f-display); font-weight: 500; font-size: 6.25em; line-height: 1; letter-spacing: -.02em; color: #fff; }
  .cv-statement { margin-top: 1.0067em; }
  .cv-row { display: grid; grid-template-columns: 61.3em minmax(0, 1fr); margin-top: 12.54em; }
  .cv-row + .cv-row { margin-top: 12.54em; }
  .cv-paren { align-self: start; font-family: var(--f-body); font-weight: 400; font-size: 1.375em; line-height: 1.2; color: #fff; }
  .cv-row-r { min-width: 0; max-width: 53.7em; }
  .cv-text { margin: 0; max-width: 30.7em; font-family: var(--f-body); font-weight: 500; font-size: 1.625em; line-height: 1.31; letter-spacing: -0.02em; color: #fff; }
  .cv-facts { list-style: none; margin: 0; padding: 0; max-width: 49.9em; }
  .cv-text + .cv-facts { margin-top: 8.625em; }
  .cv-fact { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0 0 1.17em; font-family: var(--f-body); font-weight: 500; font-size: 1.625em; line-height: 1.2; letter-spacing: -0.02em; }
  .cv-fact + .cv-fact { padding-top: 2.36em; }
  .cv-k { flex: none; color: #60706d; }
  .cv-v { display: block; min-width: 0; color: #fff; text-align: right; }

  .cv-media { display: grid; gap: var(--cvg); margin: 23.8em calc(var(--cvg) - var(--cvx)) 0; }
  .cv-media-row { display: grid; gap: var(--cvg); }
  .cv-media-row.is-cift { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-tile { position: relative; overflow: hidden; aspect-ratio: 698 / 668; background: #0b0b0b; }
  .cv-tile--wide { aspect-ratio: 2 / 1.3; }
  .cv-tile-in { position: absolute; inset: 0; display: grid; place-items: center; }
  .cv-tile-bos { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
  .cv-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); }
  .cv-vid.is-hazir { opacity: 1; }

  .cv-stats { list-style: none; margin: 0; padding: 0; }
  .cv-stat { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.25em; padding-block: 0.36em; font-family: var(--f-display); font-weight: 500; font-size: 6.25em; line-height: 1; letter-spacing: -0.02em; }
  .cv-num { color: #fff; font-variant-numeric: tabular-nums; }
  .cv-stat-ad { color: #c1c8c7; }
  .cv-stat-no { align-self: flex-start; font-family: var(--f-body); font-weight: 400; font-size: 0.16em; letter-spacing: 0; color: #60706d; }
  .cv-note { margin: 1.5em 0 0; font-family: var(--f-body); font-size: 1em; color: #60706d; }

  .cv-item + .cv-item, .cv-text + .cv-item { margin-top: 6.29em; }
  .cv-item-t { margin: 0; padding-bottom: 1.16em; font-family: var(--f-body); font-weight: 500; font-size: 1.625em; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
  .cv-item-p { margin: 1.59em 0 0; max-width: 33em; font-family: var(--f-body); font-weight: 400; font-size: 1.625em; line-height: 1.31; letter-spacing: -0.02em; color: #60706d; }

  /* canli site cagrisi */
  .cv-canli[hidden] { display: none; }
  .cv-canli { display: flex; flex-direction: column; align-items: center; padding: 30em var(--cvx) 0; text-align: center; }
  .cv-canli-t, .cv-canli-b { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 6.25em; line-height: 1; letter-spacing: -0.02em; }
  .cv-canli-t { color: #60706d; }
  .cv-canli-b { display: block; color: #fff; text-decoration: none; transition: color 0.3s var(--ease); }
  .cv-canli-b:hover { color: var(--accent); }

  .cv-next { padding-top: 25em; }
  .cv-canli:not([hidden]) + .cv-next { padding-top: 23.75em; }
  .cv-next-mq { overflow: hidden; }
  .cv-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cvg); margin-top: 12.5em; padding-inline: var(--cvx); }
  .cv-next-card { position: relative; display: block; margin: 0; padding: 0; border: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #0b0b0b; color: #fff; text-align: left; font: inherit; cursor: pointer; }
  .cv-next-art { position: absolute; inset: 0; transition: transform 1s var(--ease); }
  .cv-next-card:hover .cv-next-art { transform: scale(1.04); }
  .cv-next-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 45%); }
  .cv-next-ad { position: absolute; left: var(--cvx); bottom: 1.16em; z-index: 1; font-family: var(--f-display); font-weight: 400; font-size: 2.375em; line-height: 1.26; letter-spacing: -0.02em; }

  /* is teklifi: zemin acildiginda gri baslik, siyah buyuk baglanti */
  .cv-cta { position: relative; padding: 28.5em var(--cvx) 22.75em; text-align: center; }
  .cv-cta::before { content: ""; position: absolute; left: 3.33em; right: 3.33em; top: 12.5em; height: 1px; background: rgba(0, 0, 0, 0.14); }
  .cv-cta-t, .cv-cta-b { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 6.25em; line-height: 1; letter-spacing: -0.02em; }
  .cv-cta-t { color: #c1c8c7; }
  .cv-cta-b { display: inline-block; color: #000; text-decoration: none; transition: color 0.3s var(--ease); }
  .cv-cta-b:hover { color: #60706d; }

  /* alt bilgi: anasayfanin footer'i oldugu gibi kopyalaniyor, kendi kurali yok */
  .cv-foot-yuva > footer { min-height: 100vh; min-height: 100svh; }


  /* anasayfa kartinda ornek projenin videosu ve rozeti */
  .ct-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); }
  .ct-media.is-hazir { opacity: 1; }
  .ct-ornek, .wk-tags .wk-ornek {
    font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); background: rgba(10, 10, 10, 0.78); border: 1px solid rgba(0, 241, 169, 0.45);
    border-radius: 999px; padding: 0.45rem 0.8rem; white-space: nowrap;
  }
  .ct-ornek { position: absolute; right: 1.15rem; top: 1.15rem; z-index: 3; }
  .wk-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
  .wk-card:hover .wk-vid { transform: scale(1.045); }

  /* mobil: 375px'te taban 13.36px */
  @media (max-width: 720px) {
    .cv { font-size: 3.5623vw; --cvx: 16px; --cvg: 16px; }
    /* urun fotografi telefonda: genisletilip ortasi gosteriliyor, boylece makine buyuk gorunuyor */
    .cv-hero-media .is-sigdir > img { object-fit: contain; object-position: center 4px; width: 150%; margin-left: -25%; }
    .cv-intro { width: auto; right: var(--cvx); bottom: calc(46.55% + 0.727em); font-size: 2em; line-height: 1.2143; }
    .cv-hero-mq { top: calc(53.45% + 40px); }
    .cv-hmq-grup span, .cv-nmq-grup span { font-size: 7.143em; }
    .cv-hero-media, .cv-hero-shade { height: calc(100% + 41px); }
    .cv-hero-foot { bottom: 133px; justify-content: center; font-family: var(--f-display); font-size: 12pt; font-weight: 500; line-height: 1.6; letter-spacing: 0.005em; color: rgba(240, 240, 235, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
    .cv-kaydir { display: none; }
    .cv-main > .cv-sec:first-child { padding-top: 7.6em; }
    .cv-sec { padding-top: 14.67em; }
    .cv-sec-head { padding-bottom: 1.9em; line-height: 1.2857; }
    .cv-sec-label { font-weight: 600; }
    .cv-sec-no { font-weight: 500; }
    .cv-statement { max-width: none; font-size: 2.857em; margin-top: 0.75em; }
    .cv-row { grid-template-columns: 1fr; row-gap: 1.4em; margin-top: 4.5em; }
    .cv-row + .cv-row { margin-top: 4.5em; }
    .cv-paren { font-size: 1.143em; }
    .cv-row-r, .cv-text, .cv-facts, .cv-item-p { max-width: none; }
    .cv-text { font-size: 1.286em; line-height: 1.2222; letter-spacing: 0; }
    .cv-text + .cv-facts { margin-top: 4.5em; }
    .cv-fact { font-size: 1.143em; padding-bottom: 1.19em; }
    .cv-fact + .cv-fact { padding-top: 2.39em; }
    .cv-k { font-weight: 400; }
    .cv-v { font-weight: 600; }
    .cv .cv-v .li { white-space: normal; }
    .cv-media { margin-top: 13em; }
    .cv-media-row.is-cift { grid-template-columns: 1fr; }
    .cv-tile { aspect-ratio: 343 / 390; }
    .cv-tile--wide { aspect-ratio: 2 / 1.3; }
    .cv-stat { font-size: 2.857em; }
    .cv-item-t { font-size: 1.143em; }
    .cv-item-p { font-size: 1.286em; line-height: 1.2222; letter-spacing: 0; }
    .cv-canli { padding-top: 14.67em; }
    .cv-canli-t, .cv-canli-b, .cv-cta-t, .cv-cta-b { font-size: 2.857em; }
    .cv .cv-canli .li, .cv .cv-cta .li { white-space: normal; }
    .cv-next, .cv-canli:not([hidden]) + .cv-next { padding-top: 14.67em; }
    .cv-next-grid { grid-template-columns: 1fr; margin-top: 4.5em; }
    .cv-next-ad { font-size: 2em; bottom: 1.5em; }
    .cv-cta { padding: 14.67em var(--cvx) 12em; }
    .cv-cta::before { left: var(--cvx); right: var(--cvx); top: 6em; }
  }

  /* ---------- Vaka calismalari listesi (menuden acilan katman) ----------
     Vaka detayinin (.cv, z 135) hemen altinda: listeden bir karta
     tiklaninca detay listenin ustunde aciliyor. Display verilmedi,
     [hidden] niteligi tek basina gizliyor. */
  /* Secili isler sayfasinin kartlari: proje detayindaki genis karolarin aynisi,
     altinda proje adi ve etiketleri */
  .cv-liste-kart {
    display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit;
    font: inherit; text-align: left; cursor: pointer; width: 100%;
  }
  .cv-liste-alt { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5em; margin-top: 1.1em; }
  .cv-liste-ad { font-family: var(--f-display); font-weight: 500; font-size: 2.4em; letter-spacing: -0.03em; }
  .cv-liste-etiket { font-family: var(--f-mono); font-size: 0.85em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
  .cv-liste-kart.cv-tile { aspect-ratio: 16 / 10; }
  .cv-liste-kart .cv-tile-in { transition: transform 0.9s var(--ease); }
  .cv-liste-kart .sahne--gorsel > img { object-fit: cover; }
  .cv-liste-kart:hover .cv-tile-in { transform: scale(1.03); }
  .cv-liste-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
  /* telefonda kartlar dikey, ad daha kucuk */
  @media (max-width: 720px) {
    .cv-liste-kart.cv-tile { aspect-ratio: 358 / 460; }
    .cv-liste-alt { margin-top: 0.9em; }
    .cv-liste-ad { font-size: 1.9em; }
    .cv-liste-etiket { font-size: 0.72em; }
  }

  .wk { position: fixed; inset: 0; z-index: 134; }
  /* proje detayi aciktan listeye geciste liste ustte acilir */
  .wk.wk-ustte { z-index: 136; }
  .wk[hidden] { display: none; }
  /* baska bir sayfadan gelirken ekrani kapatan perde: once kapanir, eski sayfa
     arkada kaldirilir, sonra liste en ustunden acilir */
  .wk-perde { position: absolute; inset: 0; z-index: 5; background: var(--ground); opacity: 0; pointer-events: none; }
  /* Liste sayfasi sitenin kendi koyu zemininde: logo ve ust bilgi anasayfadaki gibi okunuyor */
  .wk-panel { position: absolute; inset: 0; background: var(--ground); color: var(--ink); }
  .wk-scroll {
    position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .wk-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
  /* liste bir sayfa oldugu icin kapat butonu yok: cikis menuden, geri tusundan ya da Esc ile */
  .wk-close { display: none; }
  .wk-close-eski {
    position: absolute; z-index: 2; top: clamp(0.9rem, 2.4vw, 1.6rem); right: clamp(0.9rem, 2.4vw, 1.6rem);
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.35rem 0.35rem 0.35rem 1.15rem; border: 0; border-radius: 999px;
    background: var(--inv); color: var(--paper); cursor: pointer;
    font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .wk-close i { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--inv); transition: transform 0.5s var(--ease); }
  .wk-close:hover i { transform: rotate(90deg); }
  .wk-close:focus-visible, .wk-cta a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

  /* Referans olcumu (1440): giris cumlesi 28.5/36, ls -0.57; dev kayan yazi;
     en altta solda "Design, Development, Growth." sagda "Kaydır" 12px/500.
     Bolum tam ekran yuksekliginde, kartlar hemen altinda basliyor. */
  /* ust serit: sayfayla birlikte kayar, logo anasayfaya doner */
  .wk-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; pointer-events: none; }
  .wk-top .nav-meta { pointer-events: auto; }
  .wk-top .nm-label, .wk-top .nm-info { overflow: hidden; }
  .wk-top .nm-info > * { display: block; }
  .wk-top .nm-lbl-d { display: inline-block; }
  .wk-logo {
    position: absolute; z-index: 1; top: clamp(2.25rem, 5vh, 3.75rem); left: clamp(0.9rem, 3.5vw, 2.4rem);
    display: block; margin: 0; padding: 0; border: 0; background: none;
    color: var(--ink); cursor: pointer; pointer-events: auto;
  }
  .wk-logo .logo-full { display: block; width: auto; height: clamp(4.5rem, 10.4vw, 9.2rem); }
  .wk-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  .wk .nav-meta, .wk .nm-label, .wk .nm-info a, .wk .nm-info span { color: var(--ink); }

  .wk-head {
    position: relative; min-height: 100svh; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(5rem, 12vh, 8rem) 30px clamp(1.4rem, 3.4vh, 2rem);
  }
  /* referans: giris cumlesi ekranin %41'inde, kayan yazi %65'inde */
  .wk-title {
    position: absolute; left: 30px; right: 30px; top: 40.9%;
    margin: 0; max-width: 24ch;
    font-family: var(--f-body); font-weight: 400;
    font-size: clamp(1.25rem, 1.98vw, 1.9rem); line-height: 1.264; letter-spacing: -0.02em;
  }
  .wk-title .w { display: block; overflow: hidden; }
  .wk-title .wi { display: inline-block; will-change: transform; }
  .wk-count { display: none; }
  /* dev kayan yazi: iki kume yan yana, biri bitince digeri devam eder */
  /* satir yuksekligi harf kuyruklarini (ç, ş, g) icine alacak kadar genis,
     yoksa yatay tasmayi kesen kutu alt kuyruklari da kesiyordu */
  .wk-serit { position: absolute; left: 0; right: 0; top: 52%; overflow: hidden; pointer-events: none; }
  .wk-ray { display: flex; width: max-content; will-change: transform; }
  .wk-ray i {
    font-style: normal; font-family: var(--f-display); font-weight: 400;
    font-size: clamp(3.4rem, 10.4vw, 10rem); line-height: 1.34; letter-spacing: -0.045em;
    padding-right: 0.32em;
  }
  .wk-ray i::after { content: " ·"; }
  @keyframes wkKay { to { transform: translate3d(-50%, 0, 0); } }
  .wk-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
  .wk-sub p, .wk-cue { margin: 0; font-family: var(--f-body); font-size: 12px; font-weight: 500; line-height: 1.375; letter-spacing: normal; text-transform: none; color: var(--ink); }

  /* kare kartlar, ince yatay bosluk, genis dikey bosluk (referans: 15px / 135px) */
  .wk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 9.4vh, 8.45rem) 15px; padding: 0 30px; }
  .wk-card { display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .wk-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; isolation: isolate; }
  .wk-tile-in { position: absolute; inset: 0; display: block; will-change: transform; }
  .wk-tile-bg {
    position: absolute; inset: 0; display: block;
    background: linear-gradient(155deg, #121212 0%, #0a0a0a 52%, #161616 100%);
    transition: transform 0.9s var(--ease);
  }
  .wk-tile-bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 85% at 12% 100%, rgba(0, 241, 169, 0.10), transparent 62%);
  }
  .wk-tags { position: absolute; left: 1.15rem; top: 1.15rem; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .wk-tags span {
    font-family: var(--f-body); font-weight: 500; font-size: 12px; line-height: 1.375;
    color: #fff; background: #000; border: 0;
    border-radius: 999px; padding: 0.58rem 1rem; white-space: nowrap;
  }
  .wk-no { display: none; position: absolute; right: 1.3rem; top: 1.3rem; z-index: 2; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-faint); }
  .wk-arw {
    position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 2;
    width: 3.1rem; height: 3.1rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent); color: var(--inv); transition: transform 0.45s var(--ease);
  }
  .wk-arw svg { width: 17px; height: 17px; }
  .wk-card:hover .wk-tile-bg { transform: scale(1.045); }
  .wk-card:hover .wk-arw { transform: translate(3px, -3px); }
  .wk-card:focus-visible .wk-tile { outline: 2px solid var(--accent); outline-offset: 4px; }
  /* proje adi referanstaki gibi kutunun sol alt kosesinde, gorselin uzerinde */
  .wk-meta { position: absolute; left: 1.55rem; right: 5.5rem; bottom: 1.35rem; z-index: 2; display: block; }
  .wk-name { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 1.95vw, 1.85rem); letter-spacing: -0.03em; color: #fff; }
  .wk-desc { display: none; }

  .wk-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap;
    margin: clamp(5rem, 14vh, 9rem) var(--pad-x) 0; padding-block: clamp(2.5rem, 7vh, 4rem);
    border-top: 1px solid var(--line);
  }
  .wk-cta p { margin: 0; font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.8rem); letter-spacing: -0.03em; }
  .wk-cta a {
    display: inline-flex; align-items: center; padding: 0.95rem 1.5rem; border-radius: 999px;
    background: var(--paper); color: var(--inv); text-decoration: none;
    font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    transition: background-color 0.3s var(--ease);
  }
  .wk-cta a:hover { background: #ffffff; }

  @media (max-width: 720px) {
    /* referans mobil: tek sutun, 16px kenar bosluk, 358x500 oraninda kartlar */
    /* referans mobil: 16px kenar, giris 22px, kayan yazi ekrani dolduran olcude */
    .wk-head { padding-inline: 16px; }
    .wk-title { left: 16px; right: 16px; top: 39%; font-size: 22px; line-height: 1.3; }
    .wk-ray i { font-size: 20vw; }
    .wk-serit { top: 53%; }
    .wk-grid { grid-template-columns: 1fr; gap: 16px; padding-inline: 16px; }
    .wk-tile { aspect-ratio: 358 / 500; }
    .wk-close { padding-left: 0.95rem; }
    .wk-serit { top: 58%; }
  }

  /* ---------- GECICI: ornek proje gorselleri (Tanelia, hayali marka) ----------
     Videolar yerine tamamen CSS ile cizilmis sahneler. Yazi boyutlari
     kapsayici birimleriyle (cqw) kutuya gore olcekleniyor; eski tarayici
     icin once vw yedegi var. Yayindan once kaldirilacak. */
  .ct-art { position: absolute; inset: 0; z-index: 0; }
  /* karta gelince projeden ikinci gorsel yumusakca beliriyor */
  .ct-art .ct-art-ust { opacity: 0; transition: opacity 0.7s var(--ease); }
  .case-thumb:hover .ct-art .ct-art-ust, .case-thumb:focus-visible .ct-art .ct-art-ust { opacity: 1; }

  /* ---------- Gymsoft marka sahneleri ---------- */
  .sahne--gymsoftAmblem, .sahne--gymsoftMavi, .sahne--gymsoftPalet { background: #000; }
  .g-amblem { display: grid; place-items: center; width: 100%; height: 100%; background: #000; }
  .g-amblem--mavi { background: #09F; }
  /* Sammak amblemi: kurumsal siyah zemin, ince kontur 1500'luk vektore gore */
  .g-amblem--sammak { background: #0D0D0D; }
  .g-svg--sammak { stroke-width: 6; }
  /* marka karti: siyah zemin uzerinde marka mavisinden gelen yumusak isik */
  .g-kart { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #000; font-family: var(--f-body); color: #fff; }
  .g-kart::before { content: ""; position: absolute; inset: -25%; filter: blur(7cqw); background:
    radial-gradient(46% 40% at 88% 26%, rgba(0, 153, 255, 0.92) 0%, rgba(0, 105, 195, 0.42) 46%, rgba(0, 40, 90, 0) 78%),
    radial-gradient(34% 30% at 96% 62%, rgba(0, 140, 245, 0.45) 0%, rgba(0, 60, 130, 0) 74%); }
  .g-kart > * { position: relative; }
  .g-kart-serit { position: absolute; top: 6cqw; left: 6cqw; right: 6cqw; display: flex; gap: 1.6cqw; }
  .g-kart-serit i { flex: 1 1 0; height: 0.32cqw; background: rgba(255, 255, 255, 0.28); border-radius: 1px; }
  .g-kart-serit i.on { background: #fff; }
  .g-kart-olcu { position: absolute; top: 10.4cqw; right: 6cqw; font-size: 2.7cqw; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); }
  .g-kart-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); display: flex; align-items: center; gap: 3cqw; }
  .g-kart-amblem { width: 12.5cqw; height: auto; display: block; fill: #fff; }
  .g-kart-yazi { width: 31cqw; height: auto; display: block; fill: #fff; }
  .g-kart-alt { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
  .g-kart-alt em { font-style: normal; font-size: 3.6cqw; line-height: 1.24; letter-spacing: -0.01em; }
  .g-kart-alt small { font-size: 2.7cqw; color: #4db8ff; white-space: nowrap; }
  .g-amblem img { width: 26cqw; max-width: 180px; height: auto; display: block; }
  /* cizilebilir amblem: once kontur, sonra dolgu */
  .g-svg { width: 24cqw; max-width: 175px; height: auto; display: block; fill: #fff; stroke: #fff; stroke-width: 3.2; stroke-linejoin: round; }
  .g-amblem--buyuk .g-svg { width: 32cqw; max-width: 240px; }
  /* marka paleti: dort renk, ust uste seritler */
  .g-palet { display: flex; flex-direction: column; width: 100%; height: 100%; }
  .g-renk { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 0.15em; padding: 0 6cqw; font-family: var(--f-body); font-size: 3.1cqw; line-height: 1.32; }
  .g-renk em { font-style: normal; font-weight: 500; }
  .g-renk small { font-size: 1em; opacity: 0.78; }
  .g-renk--mavi { background: #09F; color: #fff; }
  .g-renk--siyah { background: #000; color: #fff; }
  .g-renk--gri { background: #F9F9F9; color: #000; }
  .g-renk--beyaz { background: #fff; color: #000; }
  .sahne {
    --esp: #24160f; --kavrum: #6b3e26; --krema: #eadbc8; --kagit: #f4ede3; --ada: #8fa58c;
    position: absolute; inset: 0; overflow: hidden; container-type: size;
    font-family: var(--f-display); color: var(--esp); background: var(--kagit);
  }
  .sahne i, .sahne b, .sahne em, .sahne small { font-style: normal; }
  .wk-tile-in .sahne { transition: transform 0.9s var(--ease); }
  .wk-card:hover .wk-tile-in .sahne { transform: scale(1.045); }
  .sahne .s-not { position: absolute; left: 6%; bottom: 7%; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
  @keyframes sahneDon { to { transform: rotate(360deg); } }

  .sahne--kapak { background: radial-gradient(90% 75% at 72% 28%, #4d2e1d 0%, var(--esp) 62%); color: var(--krema); }
  .sahne--kapak .s-halka {
    position: absolute; right: -24%; top: -30%; width: 84%; aspect-ratio: 1 / 1; border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(234, 219, 200, 0.14) 0 1px, transparent 1px 18px);
    animation: sahneDon 80s linear infinite;
  }
  .sahne--kapak .s-halka--ic {
    right: -4%; top: -6%; width: 44%;
    background: radial-gradient(circle, var(--kavrum) 0 36%, transparent 37%), repeating-radial-gradient(circle, rgba(234, 219, 200, 0.24) 0 1px, transparent 1px 11px);
    animation-duration: 50s; animation-direction: reverse;
  }
  .sahne--kapak .s-blok { position: absolute; left: 6%; bottom: 16%; display: flex; flex-direction: column; gap: 0.8rem; }
  .sahne--kapak .s-ust { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
  .sahne--kapak .s-marka { font-weight: 600; line-height: 0.8; letter-spacing: -0.06em; font-size: 12vw; font-size: 24cqw; }

  .sahne--amblem { background: var(--krema); display: grid; place-items: center; }
  .sahne--amblemKoyu { background: var(--esp); color: var(--krema); display: grid; place-items: center; }
  .s-amblem {
    width: 46%; width: min(46cqw, 62cqh); aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle, transparent 0 30%, currentColor 30.5% 32%, transparent 32.5% 44%, currentColor 44.5% 46%, transparent 46.5% 58%, currentColor 58.5% 60%, transparent 60.5% 69%, currentColor 69.5% 71%, transparent 71.5%);
  }
  .s-amblem b { font-weight: 700; line-height: 1; letter-spacing: -0.06em; font-size: 10vw; font-size: min(20cqw, 27cqh); transform: translateY(-5%); }

  .sahne--palet { display: grid; grid-template-columns: repeat(4, 1fr); }
  .s-bant { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem; padding: 10% 12%; }
  .s-bant em { font-weight: 600; letter-spacing: -0.03em; font-size: 2vw; font-size: 4.2cqw; }
  .s-bant small { font-family: var(--f-mono); letter-spacing: 0.08em; opacity: 0.75; font-size: 0.8vw; font-size: 2cqw; }
  .s-b1 { background: var(--esp); color: var(--krema); }
  .s-b2 { background: var(--kavrum); color: var(--krema); }
  .s-b3 { background: var(--krema); }
  .s-b4 { background: var(--ada); }

  .sahne--paket { display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 0 8% 9%; }
  .s-paket {
    position: relative; width: 24%; height: 72%; border-radius: 12px 12px 8px 8px;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4em; padding: 7%;
    color: var(--krema); box-shadow: 0 30px 60px -30px rgba(36, 22, 15, 0.55);
  }
  .s-paket i { position: absolute; left: 0; right: 0; top: 0; height: 13%; border-radius: 12px 12px 0 0; background: rgba(0, 0, 0, 0.18); }
  .s-paket b { font-weight: 600; letter-spacing: -0.02em; font-size: 1.6vw; font-size: 3.4cqw; }
  .s-paket small { opacity: 0.8; font-size: 0.9vw; font-size: 1.8cqw; }
  .s-paket em { letter-spacing: 0.2em; font-size: 1vw; font-size: 2cqw; }
  .s-p1 { background: var(--ada); color: var(--esp); }
  .s-p2 { background: var(--kavrum); height: 80%; }
  .s-p3 { background: var(--esp); }

  .sahne--tipografi { background: var(--esp); color: var(--krema); }
  .s-aa { position: absolute; left: 7%; top: 2%; font-weight: 600; line-height: 1; letter-spacing: -0.06em; font-size: 20vw; font-size: min(50cqw, 60cqh); }
  .s-tip { position: absolute; left: 8%; bottom: 8%; display: flex; flex-direction: column; gap: 0.5rem; }
  .s-tip b { font-weight: 600; letter-spacing: -0.03em; font-size: 3vw; font-size: 7cqw; }
  .s-tip small { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }

  .sahne--telefon { background: linear-gradient(160deg, var(--ada) 0%, #7a9277 100%); display: grid; place-items: center; }
  .s-tel {
    height: 84%; aspect-ratio: 9 / 18.5; border-radius: 22px; background: var(--kagit);
    border: 6px solid var(--esp); border-width: 1.2cqw;
    display: flex; flex-direction: column; gap: 3%; padding: 12% 9% 9%;
    box-shadow: 0 40px 80px -40px rgba(20, 12, 8, 0.6);
  }
  .s-tel-foto { display: block; flex: 1 1 auto; border-radius: 12px; background: radial-gradient(60% 50% at 50% 45%, #8a5a3c 0%, var(--kavrum) 55%, #4a2b1b 100%); }
  .s-tel b { font-weight: 600; line-height: 1.15; color: var(--esp); font-size: 1.4vw; font-size: 2.8cqw; }
  .s-tel small { color: var(--kavrum); font-size: 0.9vw; font-size: 1.9cqw; }
  .s-tel em { display: block; text-align: center; padding: 7% 0; border-radius: 999px; background: var(--esp); color: var(--krema); font-weight: 600; font-size: 0.9vw; font-size: 2cqw; }

  .sahne--etiket { background: var(--krema); display: grid; place-items: center; }
  .s-etiket { width: 80%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 2px solid var(--esp); }
  .s-etiket > span { display: flex; flex-direction: column; gap: 0.7em; padding: 6% 7%; }
  .s-etiket > span + span { border-left: 2px solid var(--esp); }
  .s-etiket small { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--kavrum); font-size: 0.8vw; font-size: 1.8cqw; }
  .s-etiket b { font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-size: 2.4vw; font-size: 4.6cqw; }

  .sahne--insta { display: grid; place-items: center; }
  .s-izgara { height: 80%; aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2%; }
  .s-izgara i { display: flex; align-items: flex-end; padding: 9%; font-weight: 600; line-height: 1.1; color: var(--krema); background: var(--kavrum); font-size: 0.9vw; font-size: min(2.2cqw, 2.8cqh); }
  .s-izgara i:nth-child(2n) { background: var(--esp); }
  .s-izgara i:nth-child(3n) { background: var(--ada); color: var(--esp); }
  .s-izgara i:nth-child(5) { background: var(--krema); color: var(--esp); }

  /* ---------- Proje gorselleri: fotograf ya da cerceve icinde ekran goruntusu ---------- */
  .sahne--gorsel { background: #1d1f24; }
  /* urun fotograflari dar ekranda kirpilmasin: kutuya sigdiriliyor, zemin siyah */
  .sahne--gorsel.is-sigdir { background: #000; }
  .sahne--gorsel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cerceve { display: grid; place-items: center; }
  .zemin--koyu { background: #23262d; }
  .zemin--siyah { background: #000; }
  /* siyah zeminli kesit: gorsel kirpilmadan ortada dursun */
  /* Turnike kesiti kaynak olcusune yakin gosteriliyor: yuksek yogunluklu
     ekranlarda tarayici gorseli buyutmek yerine kucultuyor, ekrandaki ikonlar
     daha net kaliyor. */
  .zemin--siyah .cerceve-ic { width: auto; height: 72%; max-width: 70%; border-radius: 0; }
  /* Telefonda kutu zaten dar: gorsel daha genis durabilir, piksel yogunlugu
     yine kaynagin altinda kaliyor. */
  @media (max-width: 720px) {
    /* siyah zeminli kesit telefonda kare karoya oturuyor, gorsel genisligin
       %92'sini kapliyor: kucuk kalmiyor ama yine de kaynaktan buyuk degil */
    .cv-tile--siyah { aspect-ratio: 1 / 1; }
    .cv-tile--wide.cv-tile--siyah .cerceve--kesit .cerceve-ic { width: 92%; max-width: 92%; height: auto; }
    .cv-tile--wide.cv-tile--siyah .zemin--siyah .cerceve-img { width: 100%; height: auto; }
  }
  .zemin--siyah .cerceve-img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
  .zemin--bakir { background: linear-gradient(135deg, #b98545 0%, #7a6a4f 52%, #3f5553 100%); }
  .cerceve-ic { position: relative; overflow: hidden; background: #111317; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75); }
  .cerceve--tarayici .cerceve-ic { width: 84%; border-radius: 10px; }
  .cv-tile--wide .cerceve--tarayici .cerceve-ic, .cv-hero-media .cerceve--tarayici .cerceve-ic { width: 72%; }
  .cerceve-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding-inline: 12px; background: #2c2f37; }
  .cerceve-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
  .cerceve--tarayici .cerceve-img { display: block; width: 100%; height: auto; }
  .cerceve--telefon .cerceve-ic { height: 86%; aspect-ratio: 520 / 1125; border-radius: 24px; border: 8px solid #0d0e11; border-width: min(8px, 1.6cqw); }
  .cerceve--telefon .cerceve-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .cv-bag { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color 0.3s var(--ease); }
  .cv-bag:hover { color: var(--accent); }
  .cv-proof[hidden], .cv-quote[hidden] { display: none; }

  /* ---------- Proje gorselleri: ek zeminler ve sayfadan kesit cercevesi ---------- */
  .zemin--mavi { background: radial-gradient(120% 90% at 50% 115%, #09f 0%, #05294d 55%, #03060f 100%); }
  .zemin--acik { background: #e6e8eb; }
  .cerceve--kesit .cerceve-ic { width: 84%; border-radius: 10px; }
  .cv-tile--wide .cerceve--kesit .cerceve-ic { width: 80%; }
  .cerceve--kesit .cerceve-img { display: block; width: 100%; height: auto; }

  /* ---------- Sammak kurumsal kimlik sahneleri ---------- */
  .zemin--bordo { background: radial-gradient(110% 90% at 80% 0%, #8c1b2f 0%, #3a0a14 50%, #0d0d0d 100%); }
  .sahne--sammakKoyu { background: #161616; color: #ffffff; display: grid; place-items: center; }
  .sahne--sammakKirmizi { background: #8c1b2f; color: #0d0d0d; display: grid; place-items: center; }
  .sahne--sammakBeyaz { background: #ffffff; color: #580414; display: grid; place-items: center; }
  .s-sm { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
  .s-sm svg { display: block; width: 120px; width: min(34cqw, 46cqh); height: auto; fill: currentColor; }
  .s-sm small { display: flex; align-items: center; gap: 0.8em; font-family: var(--f-body); font-style: italic; font-weight: 500; letter-spacing: 0.02em; color: inherit; font-size: 12px; font-size: max(11px, 2.4cqw); }
  .sahne--sammakBeyaz .s-sm small { color: #0d0d0d; }
  .s-sm small::before, .s-sm small::after { content: ""; width: 2.2em; height: 1px; background: #8c1b2f; }
  .sahne--sammakKirmizi .s-sm small::before, .sahne--sammakKirmizi .s-sm small::after { background: #0d0d0d; }
  .sahne--sammakPalet { background: #161616; display: flex; justify-content: center; align-items: center; gap: 3%; }
  .s-hx { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; width: 14%; width: 13cqw; }
  .s-hx i { display: block; width: 100%; aspect-ratio: 0.87 / 1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  .s-hx small { font-family: var(--f-mono); color: #bdbdbd; font-size: 9px; font-size: max(9px, 1.7cqw); }

  /* dar karolarda (telefonda) Sammak sahnelerinin yazilari kutudan tasmasin */
  @container (max-width: 260px) {
    .s-sm { gap: 0.6rem; }
    .s-sm small { font-size: 8px; gap: 0.4em; }
    .s-sm small::before, .s-sm small::after { width: 0.9em; }
    .s-hx small { display: none; }
  }