/* --- TOKENS --- */
    :root {
      --snap-border: rgba(255, 255, 255, .15);
      --snap-bg: rgba(255, 255, 255, .05);
      --bg: #0d0d0d;
      --fg: #e8e4de;
      --fg-muted: rgba(232, 228, 222, .45);
      --fg-faint: rgba(232, 228, 222, .06);
      --line: rgba(232, 228, 222, .12);
      --font-display: 'Barlow Condensed', sans-serif;
      --font-serif: 'Playfair Display', serif;
      --font-meta: 'Barlow Condensed', sans-serif;
      --meta-tracking: 3px;
    }

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

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
      margin: 0;
      padding: 0;
    }

    @media (max-width: 768px) {

      html,
      body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      body {
        position: relative;
      }

      #root {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh;
        overflow: visible !important;
      }
    }

    /* Fade in */
    body {
      animation: fadeIn .3s ease both;
    }
    /* Theme soft fade */
    #root, #root * {
      transition: background-color 2s ease, color 2s ease, border-color 2s ease, box-shadow 2s ease, fill 2s ease, stroke 2s ease;
    }
    /* Soft theme transitions for hero & fake icons */
    .hero-inner, .hero-services, .hero-headline, .hero-sub, .hero-pill {
      transition: color 2s ease, filter 3s ease, opacity 2s ease;
    }
    .hero-inner * {
      transition: color 2s ease, filter 3s ease, opacity 2s ease;
    }
    .desk-col.right, .desk-col.right * {
      transition: color 2s ease, fill 2s ease, stroke 2s ease, filter 3s ease, opacity 2s ease;
    }
    #root svg, #root svg * {
      transition: stroke 2s ease, fill 2s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    /* CRT */
    .boot-bg-glitch,
    .desktop-bg-glitch {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 4;
      opacity: .08;
      background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .36) 1px, rgba(0, 0, 0, .36) 100%, transparent 100%);
      transform: translateX(0);
    }

    .boot-bg-noise,
    .desktop-bg-noise {
      position: absolute;
      inset: -8%;
      pointer-events: none;
      opacity: .03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 7 -3 0 0 0 7 -3 0 0 0 7 -3 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 84px 84px;
      image-rendering: pixelated;
    }

    .boot-bg-noise {
      animation: noiseJitter .12s steps(2) infinite, crtFlicker 6s steps(1) infinite;
    }

    .boot-bg-scan,
    .desktop-bg-scan {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .014;
      background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, .018) 2px, rgba(255, 255, 255, .018) 3px);
    }

    .boot-bg-vignette,
    .desktop-bg-vignette {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at center, transparent 44%, rgba(0, 0, 0, .68) 100%);
    }

    .boot-bg-flicker,
    .desktop-bg-flicker {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .012;
      background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 18%, transparent 72%, rgba(255, 255, 255, .012));
      animation: bootScreenPulse 7s ease-in-out infinite;
    }

    @keyframes glitchLine {
      0% {
        transform: translateX(-1.2%);
        opacity: 0
      }

      10% {
        transform: translateX(1.4%);
        opacity: .16
      }

      22% {
        transform: translateX(-2.2%);
        opacity: .24
      }

      36% {
        transform: translateX(1.1%);
        opacity: .12
      }

      52% {
        transform: translateX(-.8%);
        opacity: .22
      }

      68% {
        transform: translateX(1.8%);
        opacity: .15
      }

      82% {
        transform: translateX(-.5%);
        opacity: .1
      }

      100% {
        transform: translateX(0);
        opacity: 0
      }
    }

    @keyframes noiseJitter {
      0% {
        background-position: 0 0;
        opacity: .03
      }

      20% {
        background-position: 3px -2px;
        opacity: .045
      }

      40% {
        background-position: -3px 2px;
        opacity: .035
      }

      60% {
        background-position: 2px 3px;
        opacity: .05
      }

      80% {
        background-position: -2px -3px;
        opacity: .04
      }

      100% {
        background-position: 0 0;
        opacity: .03
      }
    }

    @keyframes crtFlicker {

      0%,
      18%,
      22%,
      63%,
      100% {
        opacity: .03
      }

      20% {
        opacity: .02
      }

      21% {
        opacity: .038
      }

      64% {
        opacity: .026
      }

      65% {
        opacity: .034
      }
    }

    @keyframes bootScreenPulse {

      0%,
      100% {
        opacity: .012;
        transform: translate3d(0, 0, 0)
      }

      48% {
        opacity: .02
      }

      50% {
        opacity: .026;
        transform: translate3d(0, 0, 0)
      }

      52% {
        opacity: .015
      }
    }

    /* Hero wallpaper styles */
    .hero-services {
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--fg-muted);
      margin-bottom: 2rem;
      line-height: 1.9;
    }

    .hero-services strong {
      font-family: var(--font-display);
      font-weight: 400;
      color: var(--fg);
      display: block;
      margin-bottom: .7rem;
      font-size: 2em;
      line-height: 1.05;
      letter-spacing: 2px;
    }

    .hero-service-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem .6rem;
      max-width: 860px;
    }

    .hero-pill {
      display: inline-flex;
      align-items: center;
      padding: .45rem .75rem;
      border-radius: 9px;
      border: 1px solid var(--line);
      background: var(--fg-faint);
      color: var(--fg);
      font-family: var(--font-meta);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: var(--meta-tracking);
      text-transform: uppercase;
    }
    .hero-pill:lang(tr) {
      text-transform: uppercase;
    }
    /* Explicit fix for Turkish dotted İ */
    .hero-pill:lang(tr) {
      font-variant: none;
    }

    .hero-headline {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(3rem, 6.5vw, 8rem);
      line-height: .86;
      letter-spacing: -.025em;
      text-transform: uppercase;
      color: var(--fg);
    }

    .hero-headline .hl {
      white-space: nowrap;
      overflow: visible;
      display: block;
    }

    .hero-headline .hl>span {
      display: block;
    }

    .hero-headline .hl:nth-child(2) {
      line-height: 1;
      white-space: nowrap;
    }

  .hero-headline em.hi,
  .hero-headline em.HI,
  .hero-headline em.Hİ,
  .hero-headline em[class="hi"],
  .hero-headline em[class="HI"],
  .hero-headline em[class="Hİ"] {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
    letter-spacing: -.01em;
    font-size: clamp(40px, 8vw, 60px);
    line-height: 1.1;
    vertical-align: baseline;
    position: relative;
    display: inline-block;
  }

    .hero-inner {
      transform: scale(var(--hero-scale, 1));
      transform-origin: center;
    }

    .hero-sub {
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--fg-muted);
      margin-top: 2.5rem;
    }

    .mono-icon {
      filter: grayscale(1) contrast(1.2) brightness(1.1);
    }

    @media (max-height: 820px) {
      .desk-col.left {
        left: 12px;
        top: 10px;
      }

      .desk-col.left.shift {
        left: 96px;
      }

      .desk-col.right {
        transform: scale(.9);
        transform-origin: top right;
      }
    }

    @media (max-width: 1024px) {
      .hero-service-tags {
        max-width: 520px;
        gap: .4rem .5rem;
      }

      .hero-pill {
        font-size: 10px;
        padding: .35rem .6rem;
        letter-spacing: 2px;
      }
    }

    @media (max-width: 1366px) {
      .hero-services { font-size: 9px; max-width: 560px; }
      .hero-services strong { font-size: 1.6em; }
      .hero-service-tags { max-width: 560px; }
      .hero-sub { max-width: 560px; line-height: 1.5; }
    }

    @media (max-width: 1200px) {
      .hero-service-tags { max-width: 480px; }
      .hero-pill { font-size: 9px; padding: .3rem .55rem; letter-spacing: 1.6px; }
      .hero-sub { max-width: 480px; }
    }

    @media (max-width: 1080px) {
      .hero-services { font-size: 8.5px; max-width: 420px; }
      .hero-services strong { font-size: 1.4em; }
      .hero-pill { font-size: 8.5px; padding: .25rem .5rem; letter-spacing: 1.4px; }
      .hero-sub { max-width: 420px; font-size: 10px; }
    }

    @media (max-width: 900px) {
      .hero-headline { font-size: clamp(2.4rem, 6vw, 6rem); }
      .hero-headline em.hi { font-size: clamp(32px, 7vw, 48px); }
    }

    /* Win11 System Root */
    #root {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: var(--app-vh, 100vh);
      overflow: hidden;
      font-family: 'Tahoma', 'Verdana', sans-serif;
    }

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

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

    @keyframes slideUp {
      from {
        transform: translateY(10px);
        opacity: 0
      }

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

    @keyframes clippyFloat {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-6px); }
    }

    @keyframes clippyBlink {
      0%, 85%, 100% { transform: scaleY(1); }
      90% { transform: scaleY(0.06); }
      95% { transform: scaleY(1); }
    }

    @keyframes clippyBlinkR {
      0%, 80%, 100% { transform: scaleY(1); }
      85% { transform: scaleY(0.06); }
      90% { transform: scaleY(1); }
    }

    @keyframes clippyBubbleIn {
      from { opacity: 0; transform: translateY(8px) scale(0.94); }
      to   { opacity: 1; transform: translateY(0)  scale(1); }
    }

    @keyframes clippyWiggle {
      0%, 100% { transform: rotate(0deg); }
      20%  { transform: rotate(-3deg); }
      40%  { transform: rotate(3deg); }
      60%  { transform: rotate(-2deg); }
      80%  { transform: rotate(1deg); }
    }

    .clippy-float { animation: clippyFloat 3.2s ease-in-out infinite; }
    .clippy-eye-l { animation: clippyBlink  5s ease-in-out 0.4s infinite; transform-origin: 45px 18px; }
    .clippy-eye-r { animation: clippyBlinkR 5s ease-in-out 1.1s infinite; transform-origin: 70px 18px; }
    .clippy-bubble { animation: clippyBubbleIn 0.32s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    .clippy-wrap:hover .clippy-float { animation: clippyWiggle 0.5s ease-in-out; }

    * {
      box-sizing: border-box;
    }

    a {
      cursor: pointer !important;
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-track {
      background: var(--sb-track);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--sb-thumb);
      border: 1px solid var(--sb-thumb-border);
      border-radius: 8px;
    }

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

    .nosb::-webkit-scrollbar {
      display: none;
    }

    .nosb {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .snap-preview {
      position: absolute;
      background: rgba(255, 255, 255, .12);
      border: 3px solid rgba(255, 255, 255, .25);
      pointer-events: none;
      z-index: 9999;
      transition: all .35s cubic-bezier(0.1, 0.9, 0.2, 1);
      border-radius: 14px;
      backdrop-filter: blur(32px);
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
    }

    .context-menu {
      position: absolute;
      width: 200px;
      background: var(--chrome-bg, rgba(30, 30, 30, 0.85));
      backdrop-filter: blur(28px);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
      padding: 6px;
      z-index: 10000;
      color: var(--fg);
      font-family: inherit;
      animation: winOpen 0.45s cubic-bezier(0.05, 0.7, 0.1, 1.0);
    }

    .context-menu-item {
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      color: inherit;
      cursor: default;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: background 0.15s;
    }

    .context-menu-item:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* Mobile Parity & AI Lab Fixes */
    .mob-app-scroll {
      display: flex;
      flex-direction: column;
    }
    .mob-app-scroll > * {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }