* { margin: 0; padding: 0; box-sizing: border-box; }
    #cursor { display: none !important; }

    body {
      width: 100vw;
      height: 100vh;
      background: #000;
      overflow: hidden;
      font-family: Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ── CURSOR ── */
    #cursor {
      position: fixed;
      top: 0; left: 0;
      width: 36px; height: 36px;
      pointer-events: none;
      z-index: 9999;
      will-change: transform;
    }
    #cursor svg {
      width: 100%; height: 100%;
      filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.55));
    }

    /* ── SAHNE ── */
    .scene {
      position: relative;
      width: 100vw; height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ── DESKTOP (site.html screen) ── */
    .desktop {
      position: absolute;
      width: 97vw; height: 95vh;
      border-radius: 42px;
      overflow: hidden;
      z-index: 30;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.9s ease;
      display: flex;
      flex-direction: column;

      background:
        linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 16%, rgba(0,0,0,.03) 78%, rgba(0,0,0,.12)),
        repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0px, rgba(0,0,0,.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0px, rgba(0,0,0,.03) 1px, transparent 1px, transparent 2px),
        #f3f3f3;
      box-shadow: inset 0 0 0 2px #000, inset 0 0 40px rgba(0,0,0,.15), inset 0 0 90px rgba(255,255,255,.08);
      filter: contrast(1.02) brightness(.985);
    }
    .desktop.visible { opacity: 1; pointer-events: auto; }

    /* grain */
    .desktop::after {
      content: ""; position: absolute; inset: -12%; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
      background-size: 140px 140px;
      mix-blend-mode: multiply;
      opacity: .42;
      animation: noiseFlicker 2s ease-in-out infinite;
      z-index: 20;
    }

    /* vignette */
    .desktop::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(circle at 50% 46%, transparent 52%, rgba(0,0,0,.14) 78%, rgba(0,0,0,.24) 100%),
        linear-gradient(to bottom, rgba(255,255,255,.06), transparent 18%, transparent 82%, rgba(0,0,0,.12));
      z-index: 20;
    }

    .desktop-main {
      flex: 1;
      position: relative;
      overflow: hidden;
    }

    /* ── TOPBAR ── */
    .topbar {
      height: 74px;
      border-bottom: 3px solid #000;
      display: grid;
      grid-template-columns: 260px 1fr auto;
      align-items: center;
      padding: 8px 20px;
      position: relative;
      z-index: 10;
    }

    .brand {
      font-family: 'Playfair Display', serif;
      font-size: 44px;
    }
    .brand span { font-weight: 700; font-style: italic; }

    .lines {
      height: 32px;
      background: repeating-linear-gradient(
        to bottom,
        #000 0px, #000 2px,
        transparent 2px, transparent 6px
      );
    }

    .right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-left: 24px; }

    .mail { font-size: 14px; font-weight: 700; text-align: right; line-height: 1.4; }
    .mail #clock { font-weight: 400; }

    .icons { display: flex; gap: 6px; align-items: center; }

    /* ── APPS ── */
    .apps {
      z-index: 10;
      position: absolute;
      right: 24px; top: 96px;
      display: flex;
      flex-direction: row;
      gap: 32px;
    }

    .app {
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      cursor: grab;
      transition: transform .18s steps(3), filter .18s steps(3);
      user-select: none;
      -webkit-user-select: none;
    }
    .app:hover { filter: contrast(1.05); }
    .app.dragging { cursor: grabbing; z-index: 100; transform: scale(1.06); filter: contrast(1.08); transition: none; }

    .app-img {
      width: 90px; height: 90px;
      margin: 0 auto 6px;
      display: block;
    }

    /* ── PENCERE ── */
    .win {
      position: absolute;
      inset: 40px 60px;
      border: 2.5px solid #000;
      border-radius: 22px;
      background:
        repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 2px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 2px),
        #efefef;
      z-index: 50;
      display: none;
      flex-direction: column;
      overflow: hidden;
      box-shadow:
        0 24px 60px rgba(0,0,0,.35),
        0 8px 20px rgba(0,0,0,.2),
        0 2px 6px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.6);
    }
    .win.open { display: flex; }

    .win-bar {
      flex-shrink: 0;
      height: 62px;
      border-bottom: 2.5px solid #000;
      display: grid;
      grid-template-columns: 80px 1fr;
      align-items: center;
    }
    .win-close {
      width: 44px; height: 44px;
      border: 2.5px solid #000;
      border-radius: 50%;
      background: #efefef;
      font-size: 16px;
      font-weight: 900;
      cursor: pointer;
      margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
      transition: background .12s, color .12s;
      font-family: Arial, sans-serif;
    }
    .win-close:hover { background: #000; color: #fff; }
    .win-lines {
      height: 28px;
      background: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 5px);
    }

    .win-body {
      display: grid;
      grid-template-columns: 280px 1fr;
      flex: 1;
      overflow: hidden;
    }

    .win-sidebar {
      border-right: 2px solid #000;
      overflow-y: auto;
      padding: 24px 18px 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .sidebar-badge {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      padding: 9px 18px;
      border: 2px solid #000;
      border-radius: 999px;
      text-align: center;
      margin-bottom: 18px;
      cursor: default;
      background: #efefef;
    }
    .proj-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      color: #777;
      transition: background .1s, color .1s;
    }
    .proj-item:hover { color: #333; }
    .proj-item.active { color: #111; font-weight: 600; }
    .proj-item svg { flex-shrink: 0; opacity: .75; }

    .win-content {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 48px;
      padding: 44px 40px 40px 44px;
      overflow-y: auto;
      align-content: start;
    }
    .proj-title {
      font-family: 'Playfair Display', serif;
      font-size: 60px;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 12px;
    }
    .proj-subtitle {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      font-weight: 400;
      margin-bottom: 24px;
      line-height: 1.3;
    }
    .proj-desc {
      font-size: 13.5px;
      line-height: 1.78;
      margin-bottom: 24px;
      color: #1a1a1a;
    }
    .proj-stack {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .1em;
      margin-bottom: 22px;
      color: #000;
    }
    .proj-link {
      cursor: pointer;
      display: inline-block;
      opacity: .8;
      transition: opacity .15s;
    }
    .proj-link:hover { opacity: 1; }
    .proj-preview {
      border: 2.5px solid #111;
      border-radius: 18px;
      overflow: hidden;
      background: #fff;
      align-self: start;
    }
    .proj-preview img { width: 100%; display: block; }
    .proj-preview-empty {
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bbb;
      font-size: 12px;
    }

    /* ── ABOUT ME PENCERE ── */
    #win-about {
      inset: auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 580px;
      height: auto;
      max-height: 88vh;
      overflow: hidden;
    }
    .about-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32px 52px 36px;
      overflow-y: auto;
    }
    .about-img {
      width: 150px;
      height: auto;
      margin-bottom: 18px;
    }
    .about-title {
      font-family: 'Playfair Display', serif;
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .about-version {
      font-size: 14px;
      color: #444;
      margin-bottom: 22px;
    }
    .about-mem-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    .about-membar {
      width: 100%;
      height: 30px;
      border: 2px solid #000;
      border-radius: 4px;
      display: flex;
      overflow: hidden;
      margin-bottom: 22px;
    }
    .membar-seg {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }
    .membar-seg + .membar-seg { border-left: 1.5px solid #000; }
    .seg-nudes { background: #555; color: #fff; flex: 3; }
    .seg-life  { background: #aaa; color: #000; flex: 1.5; }
    .seg-shit  { background: #ddd; color: #000; flex: 1; }
    .about-specs {
      width: 100%;
      margin-bottom: 26px;
    }
    .spec-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 0;
      border-bottom: 1px solid #ccc;
      font-size: 13.5px;
      gap: 12px;
    }
    .spec-key { font-weight: 700; white-space: nowrap; }
    .spec-val { color: #333; text-align: right; }
    .about-btn {
      width: 100%;
      padding: 15px;
      border: 2.5px solid #000;
      border-radius: 10px;
      background: #f3f3f3;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .1em;
      cursor: pointer;
      margin-bottom: 26px;
      transition: background .12s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .about-btn:hover { background: #e2e2e2; }
    .about-logo { height: 38px; width: auto; }
    .solutions-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px 28px;
    }
    .sol-item { display: flex; flex-direction: column; gap: 5px; }
    .sol-ico { width: 48px; height: 48px; object-fit: contain; margin-bottom: 4px; }
    .partners-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      align-items: center;
    }
    .partner-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      border: 1.5px solid #ddd;
      border-radius: 10px;
      background: #fff;
      transition: border-color .15s;
    }
    .partner-item:hover { border-color: #000; }
    .partner-item img { width: 80%; max-height: 52px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: opacity .15s, filter .15s; }
    .partner-item:hover img { filter: grayscale(0); opacity: 1; }

    /* ── DİL SEÇİCİ ── */
    .lang-toggle {
      min-width: 36px; height: 28px;
      padding: 0 6px;
      border: 2px solid #1D1D1B;
      border-radius: 6px;
      background: #C1C1BF;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 800;
      letter-spacing: .04em;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      transition: background .12s, color .12s;
    }
    .lang-toggle:hover { background: #1D1D1B; color: #fff; }

    /* ── OUR PARTNERS PENCERE ── */
    .partners-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 44px 44px 40px;
    }

    .sol-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; border-bottom: 1.5px solid #000; padding-bottom: 4px; margin-bottom: 2px; }
    .sol-desc { font-size: 12.5px; line-height: 1.65; color: #333; }

    /* ── SOCIAL PENCERE ── */
    .social-grid {
      display: flex;
      flex-direction: row;
      gap: 24px;
      padding: 44px;
      align-items: flex-start;
    }
    .social-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      text-decoration: none;
      color: #000;
    }
    .social-icon {
      width: 110px; height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .15s steps(2);
    }
    .social-icon img { width: 110px; height: 110px; object-fit: contain; display: block; }
    .social-item:hover .social-icon { transform: translateY(-3px); }
    .social-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
    }

    /* ── CRT EFFECTs ── */
    .scanline {
      position: absolute; left: 0; right: 0; height: 10px; top: -14px;
      background: linear-gradient(to bottom, rgba(255,255,255,.24), rgba(255,255,255,.08), transparent);
      mix-blend-mode: screen;
      animation: scan 6.5s linear infinite;
      pointer-events: none;
      z-index: 5;
      opacity: .8;
    }

    .static-noise { display: none; }

    .crt-glow {
      position: absolute; inset: 0; pointer-events: none; z-index: 3;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(0,0,0,.12), transparent 28%);
      opacity: .8;
    }

    .tube-warp {
      position: absolute; inset: 0; pointer-events: none; z-index: 2;
      box-shadow: inset 0 0 24px rgba(0,0,0,.12), inset 0 0 110px rgba(0,0,0,.08);
      border-radius: 42px;
    }

    .glitch {
      position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: multiply; z-index: 4;
      background:
        repeating-linear-gradient(90deg, transparent 0 180px, rgba(0,0,0,.18) 180px 181px, transparent 181px 360px),
        repeating-linear-gradient(0deg, transparent 0 120px, rgba(0,0,0,.1) 120px 121px, transparent 121px 240px);
      animation: glitchShift 6s steps(2) infinite;
    }


    /* ── KEYFRAMES ── */
    @keyframes scan {
      0%   { transform: translateY(0); }
      100% { transform: translateY(95vh); }
    }
    @keyframes glitchShift {
      0%, 100% { transform: translate(0,0); }
      20%  { transform: translate(1px,0); }
      21%  { transform: translate(-1px,0); }
      22%  { transform: translate(0,0); }
      62%  { transform: translate(0,1px); }
      63%  { transform: translate(0,-1px); }
      64%  { transform: translate(0,0); }
    }
    @keyframes noiseFlicker {
      0%   { opacity:.36; }
      50%  { opacity:.42; }
      100% { opacity:.36; }
    }
    @keyframes staticJump {
      0%   { transform: translate(0,0); }
      20%  { transform: translate(1px,0); }
      21%  { transform: translate(-1px,0); }
      22%  { transform: translate(0,0); }
      33%  { transform: translate(0,-1px); }
      62%  { transform: translate(0,1px); }
      63%  { transform: translate(0,-1px); }
      64%  { transform: translate(0,0); }
      66%  { transform: translate(1px,1px); }
      100% { transform: translate(-1px,0); }
    }

    /* ── MOBİL ── */
    @media (max-width: 768px) {
      .desktop {
        width: 100vw; height: 100vh;
        border-radius: 24px;
        overflow: hidden;
        display: flex; flex-direction: column;
      }
      .desktop-main {
        flex: 1; min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: block; position: relative;
      }

      /* Topbar: kompakt */
      .topbar {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        padding: 10px 12px 8px;
        gap: 4px;
        border-bottom: 2px solid #000;
      }
      .brand { display: flex; justify-content: center; width: 100%; }
      .brand img { height: 40px; }
      .lines { display: none; }
      .right { justify-content: center; padding-left: 0; width: 100%; }
      .mail { font-size: 10px; text-align: center; }


      /* İkonlar: üstte */
      .apps {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important;
        width: calc(100% - 56px);
        margin: 28px auto 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 16px;
        padding: 0;
        pointer-events: auto;
        z-index: 10;
      }

      /* İkon stili */
      .app {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .05em;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .app-img { width: 80px; height: 80px; }

      /* ── PENCERELER ── */
      .win {
        position: absolute; inset: 0;
        border-radius: 0; z-index: 300;
        box-shadow: none; overflow: hidden;
        display: none; flex-direction: column;
      }
      .win.open { display: flex; }
      .win-bar { flex-shrink: 0; }

      /* win-body: tek scroll container */
      .win-body {
        flex: 1; min-height: 0;
        overflow-y: scroll; overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: block;
      }

      /* Sidebar: sticky, yatay scroll */
      .win-sidebar {
        position: sticky; top: 0; z-index: 20;
        border-right: none; border-bottom: 2px solid #000;
        height: 72px; min-height: 72px;
        overflow-x: scroll; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        display: flex; flex-direction: row;
        align-items: center; gap: 8px;
        padding: 0 16px; background: #efefef;
      }
      .sidebar-badge { display: none; }
      #blog-list, #about-list {
        display: flex; flex-direction: row;
        align-items: center; gap: 8px; flex-shrink: 0;
      }
      .proj-item {
        flex-shrink: 0; padding: 6px 14px; font-size: 11px;
        font-weight: 600; border-radius: 999px;
        border: 1.5px solid #bbb; white-space: nowrap; cursor: pointer;
      }
      .proj-item svg { display: none; }
      .proj-item.active { background: #000; color: #fff; border-color: #000; }

      /* İçerik */
      .win-content {
        display: flex; flex-direction: column;
        padding: 20px 18px 48px; gap: 16px;
      }
      .proj-preview {
        display: flex; order: -1; margin-bottom: 4px;
        border-radius: 12px; overflow: hidden; height: 200px;
        box-shadow: 0 6px 20px rgba(0,0,0,.12);
      }
      .proj-preview img { width: 100%; height: 100%; object-fit: cover; }
      .proj-preview-empty {
        width: 100%; height: 100%; display: flex;
        align-items: center; justify-content: center;
        color: #bbb; font-size: 12px;
      }
      .proj-title { font-size: 26px; margin-bottom: 4px; }
      .proj-subtitle { font-size: 13px; margin-bottom: 12px; }
      .proj-desc { font-size: 13px; line-height: 1.75; }
      .proj-stack { font-size: 10px; letter-spacing: .06em; }
      .proj-link svg { width: 28px; height: 28px; }

      /* About Me */
      #win-about {
        inset: 12px; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 24px); height: 80vh;
        max-height: 80vh; border-radius: 16px;
        overflow: hidden;
      }
      #win-about .about-body {
        overflow-y: scroll; -webkit-overflow-scrolling: touch;
        padding: 20px 22px 32px;
      }
      .about-img { width: 88px; }
      .about-title { font-size: 20px; }
      .about-version { font-size: 11px; }
      .spec-row { font-size: 12px; padding: 7px 0; }
      .about-btn { font-size: 11px; padding: 12px; margin-bottom: 20px; }

      /* Social */
      .social-grid { flex-wrap: wrap; padding: 24px 16px; gap: 16px; justify-content: center; }
      .social-icon { width: 76px; height: 76px; }
      .social-icon img { width: 76px; height: 76px; }
      .social-label { font-size: 10px; }

      /* Solutions & Partners */
      .solutions-grid { grid-template-columns: 1fr; gap: 14px; }
      .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
      .partners-body { padding: 24px 18px 48px; }
    }