:root{
      --figma-bg:#0f1014; --figma-card:#1f1f24; --figma-muted:#2a2a2f; --figma-text:#e8e8ea; --figma-accent:#6ea8fe;
      --figma-border:rgba(255,255,255,.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}

    /*.wrap{width:min(820px, 92vw)}*/
    .animation h1{font-size:28px; margin:0 0 18px}
    .animation p{margin:0 0 24px; opacity:.85}

    /* Demo container */
    .copy-figma-demo { position: relative; width: 640px; max-width: 100%; aspect-ratio: 16/10; margin: 0 auto; overflow: hidden; border-radius:16px; border:1px solid var(--bs-border-color); background: var(--bs-card-bg-color); }
    .copy-figma-demo .scene { position: absolute; inset: 0; display: grid; place-items: center; background: transparent; opacity: 0; pointer-events: none; transform: scale(1.02); transition: opacity .4s ease, transform .6s ease; }
    .copy-figma-demo .scene.active { opacity: 1; transform: scale(1); pointer-events: auto; }

    /* Button (no Bootstrap) */
    .animation .btn {
      --btn-bg:#5151F9; --btn-bg-2:#5151F9; --btn-text:#fff; --btn-ring:rgba(255,255,255,.55);
      position: relative; padding: 14px 38px; font-weight: 500; border:none; border-radius:100px; cursor:pointer;
      background: linear-gradient(180deg,var(--btn-bg),var(--btn-bg-2)); color:var(--btn-text);
      box-shadow: 0 10px 30px rgba(37,99,235,.25);
    }
    .animation .btn:active{transform:translateY(1px)}
    .animation .btn .ripple { position:absolute; inset:0; border-radius:100px; box-shadow: 0 0 0 0 var(--btn-ring); transform: scale(1); opacity:0; transition: box-shadow .3s ease, opacity .3s ease; pointer-events:none; }
    .animation .btn.clicked .ripple { box-shadow: 0 0 0 14px rgba(255,255,255,.0); opacity:1; }

    /* Cursor (SVG) */
    .cursor {
      position: absolute;
      pointer-events: none;
      filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
      color: #e6e6ea; /* svg fill uses currentColor */
    }
    .cursor .cursor-svg {
      display: block;
      width: 22px;
      height: 32px;
    }
    .scene-copy .cursor { top: 58%; left: 32%; }
    .scene-figma .cursor { top: 40%; left: 70%; }

    /* Figma mock */
    .figma-window { position: relative; width: 96%; height: 88%; background: var(--figma-card); color: #ddd; border-radius: 12px; border: 1px solid var(--figma-border); overflow: hidden; }
    .figma-topbar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--figma-muted); border-bottom: 1px solid var(--figma-border); }
    .dot { width: 10px; height: 10px; border-radius: 50%; }
    .red { background:#ff5f56; } .yellow { background:#ffbd2e; } .green { background:#27c93f; }
    .animation .title { margin-left: 8px; font-size: 12px; opacity: .8; }
    .figma-body { display: grid; grid-template-columns: 200px 1fr; height: calc(100% - 36px); }
    .figma-sidebar {
      background: #232328;
      border-right: 1px solid rgba(255,255,255,.06);
    }
    /* Sidebar UI */
    .sb-top { display:flex; align-items:center; gap:8px; padding:10px 10px 8px; }
    .sb-app { width:24px; height:24px; display:grid; place-items:center; opacity:.9; }
    .sb-title { font-size:13px; font-weight:600; letter-spacing:.01em; color:#E6E7EB; flex:1; }
    .sb-icon-btn { background:transparent; border:0; padding:6px; border-radius:6px; cursor:pointer; }
    .sb-icon-btn:hover { background:rgba(255,255,255,.06); }

    .sb-tabs { display:flex; align-items:center; gap:6px; padding:4px 6px 8px; border-bottom:1px solid rgba(255,255,255,.06); }
    .sb-tabs .tab {
      appearance:none; border:0; background:transparent; color:#C9CDD7; font-size:12px; padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:600;
    }
    .sb-tabs .tab.active { background:rgba(255,255,255,.07); color:#fff; }
    .sb-tabs .sb-search { margin-left:auto; }

    .sb-section { padding:8px 6px; }
    .sb-sec-head { display:flex; align-items:center; gap:6px; padding:6px 6px; }
    .sb-sec-head.with-divider { border-top:1px solid rgba(255,255,255,.06); margin-top:2px; }
    .sb-sec-title { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#AAB0BC; flex:1; }
    .caret { background:transparent; border:0; padding:4px; border-radius:6px; cursor:pointer; }
    .caret:hover { background:rgba(255,255,255,.06); }

    .sb-layers { list-style:none; margin:4px 0 0; padding:0 4px; display:grid; gap:2px; }
    .layer {
      display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; color:#DDE0E7; font-size:13px; cursor:default;
    }
    .layer:hover { background:rgba(255,255,255,.06); }
    .layer.active { background:rgba(110,168,254,.18); color:#fff; }
    .layer .hash { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; opacity:.8; }
    .layer .name { letter-spacing:.03em; }

    .figma-canvas {
      position: relative;
      background: radial-gradient(ellipse at top, rgba(255,255,255,.04), transparent 70%), #1b1b20;
      overflow: hidden; /* pasted görselin taşmasını engelle */
    }

    /* Context menu */
    .context-menu { position: absolute; top: 46%; left: 52%; width: 160px; background: #2a2a2f; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.35); padding: 6px 0; opacity: 0; transform: translate(-50%,-50%) scale(.96); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
    .context-menu.show { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events:auto; }
    .context-menu .item { padding: 8px 12px; font-size: 13px; opacity: .92; }
    .context-menu .item.highlight { background: rgba(80,140,255,.18); color: #fff; }
    .context-menu .item.hover { background: rgba(255,255,255,.08); }

    /* Pasted artboard container + title (Figma-like) */
    .pasted-artboard {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* merkezde */
      display: grid;
      place-items: center;
      /* Canvas içine sığacak şekilde sınırlar */
      max-width: calc(100% - 48px);
      max-height: calc(100% - 72px);
      width: auto;
      height: auto;
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
    }
    .pasted-artboard.show { opacity: 1; }

    .pasted-img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.18);
      display: block;
      box-shadow: none;
    }
    .artboard-title {
      position: absolute;
      top: -22px;
      left: 6px;
      font-size: 12px;
      letter-spacing: .02em;
      color: rgba(255,255,255,.75);
      padding: 2px 6px;
      border-radius: 4px;
      background: transparent; /* Figma'daki frame başlığı gibi, arkaplan yok */
    }

    /* Tiny click pulse */
    @keyframes clickPulse { from { transform: scale(1); } 50% { transform: scale(.96); } to { transform: scale(1); } }