Before you send your project

<!-- Loodos Playground: dönüş butonu (zorunlu). Ayrıntı: https://playground.loodos.com/contribute/ -->
<a class="pg-exit" href="https://playground.loodos.com/" aria-label="Loodos Playground'a dön"><span aria-hidden="true">←</span> Playground</a>
<style>
  .pg-exit{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;color:inherit;font-family:inherit;font-size:13px;font-weight:500;line-height:1.4;text-decoration:none;white-space:nowrap}
  .pg-exit:hover{border-color:#1AB0BA;color:#1AB0BA}
  .pg-exit:focus-visible{outline:2px solid #5D5DF7;outline-offset:2px}
  /* Header kaydırınca ekrandan çıkıyorsa butona pg-exit--float ekleyin: her zaman sol üstte kalır. */
  .pg-exit--float{position:fixed;z-index:2147483000;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));background:#FFFFFF;color:#131E20;border-color:#E5E5E5}
</style>

We are adding this project to Loodos Playground (https://playground.loodos.com). Every project on Playground shares one rule: a keyboard-accessible "← Playground" button that takes visitors back, visible on every page, every screen size and every scroll position.

Your task:
1. Add the code below to the project's navbar (header) as its first item, to the left of the logo. You may move the <style> block into <head> or the global CSS; do not change the rules.
2. If the project has several pages or routes, put the button once in the shared layout so it appears everywhere. With a framework such as React, Next.js, Vue or Astro, add it as plain HTML to the shared layout component.
3. If the header scrolls out of view (it is not sticky or fixed), place the button at the start of <body> and add the class pg-exit--float so it stays in the top-left corner. If it covers one of the project's controls there, move it to a corner where it does not.
4. If the project lives inside the Playground repository (static/<project>/), set href to "../index.html"; otherwise keep "https://playground.loodos.com/". If the site is in English, set aria-label to "Back to Loodos Playground".
5. Do not hide the button, shrink it, lower its opacity or leave it underneath another element.
6. Check and report briefly: is it visible on desktop and mobile, at the top and bottom of the page; does it receive focus with Tab; does clicking it open Playground; which file did you change.

Code:

<!-- Loodos Playground: dönüş butonu (zorunlu). Ayrıntı: https://playground.loodos.com/contribute/ -->
<a class="pg-exit" href="https://playground.loodos.com/" aria-label="Loodos Playground'a dön"><span aria-hidden="true">←</span> Playground</a>
<style>
  .pg-exit{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;color:inherit;font-family:inherit;font-size:13px;font-weight:500;line-height:1.4;text-decoration:none;white-space:nowrap}
  .pg-exit:hover{border-color:#1AB0BA;color:#1AB0BA}
  .pg-exit:focus-visible{outline:2px solid #5D5DF7;outline-offset:2px}
  /* Header kaydırınca ekrandan çıkıyorsa butona pg-exit--float ekleyin: her zaman sol üstte kalır. */
  .pg-exit--float{position:fixed;z-index:2147483000;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));background:#FFFFFF;color:#131E20;border-color:#E5E5E5}
</style>

Bu projeyi Loodos Playground'a (https://playground.loodos.com) ekleyeceğiz. Playground'daki her projenin ortak kuralı şu: her sayfada, her ekranda ve her kaydırma konumunda görünen, klavyeyle erişilebilir bir "← Playground" dönüş butonu olmalı.

Görevin:
1. Aşağıdaki kodu projenin navbar'ına (header'ına) ilk öğe olarak, logonun soluna ekle. <style> bloğunu <head>'e ya da global CSS'e taşıyabilirsin; kuralları değiştirme.
2. Projede birden fazla sayfa ya da route varsa butonu ortak layout'a bir kez koy ki her sayfada görünsün. React, Next.js, Vue, Astro gibi bir framework varsa ortak layout bileşenine düz HTML olarak ekle.
3. Header kaydırınca ekrandan çıkıyorsa (sticky ya da fixed değilse) butonu <body>'nin başına koy ve class'ına pg-exit--float ekle; böylece hep sol üstte kalır. Orada projenin bir düğmesini kapatıyorsa kapatmayacağı bir köşeye taşı.
4. Proje Playground reposunun içindeyse (static/<proje>/) href'i "../index.html" yap; değilse "https://playground.loodos.com/" olarak bırak. Site İngilizceyse aria-label'ı "Back to Loodos Playground" yap.
5. Butonu gizleme, küçültme, opaklığını düşürme ve başka bir öğenin altında bırakma.
6. Kontrol et ve kısaca raporla: masaüstünde ve mobilde, sayfanın en üstünde ve en altında görünüyor mu; Tab ile odaklanıyor mu; tıklayınca Playground açılıyor mu; hangi dosyaya eklendi.

Kod:

<!-- Loodos Playground: dönüş butonu (zorunlu). Ayrıntı: https://playground.loodos.com/contribute/ -->
<a class="pg-exit" href="https://playground.loodos.com/" aria-label="Loodos Playground'a dön"><span aria-hidden="true">←</span> Playground</a>
<style>
  .pg-exit{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;color:inherit;font-family:inherit;font-size:13px;font-weight:500;line-height:1.4;text-decoration:none;white-space:nowrap}
  .pg-exit:hover{border-color:#1AB0BA;color:#1AB0BA}
  .pg-exit:focus-visible{outline:2px solid #5D5DF7;outline-offset:2px}
  /* Header kaydırınca ekrandan çıkıyorsa butona pg-exit--float ekleyin: her zaman sol üstte kalır. */
  .pg-exit--float{position:fixed;z-index:2147483000;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));background:#FFFFFF;color:#131E20;border-color:#E5E5E5}
</style>