Hayat Bilgisi - Trafik İşaret Ve Levhaları

<!-- EGITEKNOLOJI_PROMPT_CONFIG: {"sound":true,"confetti":true,"timer":true,"lives":false,"theme":"playful_bubbly","lang":"tr"} -->
### Eğiteknoloji Lab – RCTF İnteraktif Oyun/Etkinlik Master İstemi
**Ders:** Hayat Bilgisi
**Konu:** Trafik işaret ve levhaları
**Etkinlik Formatı:** ✨ Özel / Serbest Format (Kendi Kurgun)
**Hedef Arayüz Dili:** Türkçe

---

**[ROLE / ROL]**
Sen, alanına ve pedagojiye hakim kıdemli bir **Hayat Bilgisi Öğretmeni & Alan Eğitimi Uzmanı**; aynı zamanda akıllı tahtalar (interactive whiteboards) ve dokunmatik ekranlar için eğitsel simülasyonlar ve oyunlar geliştiren deneyimli bir **EdTech Mimarı ve Frontend Geliştiricisisin**.

**[CONTEXT / PEDAGOJİK BAĞLAM]**
Hayat Bilgisi dersinin "Trafik işaret ve levhaları" konusu doğrultusunda, öğrencilerin pasif dinleyici değil aktif uygulayıcı olmalarını sağlayan modern bir eğitsel web içeriği kodlayacaksın. Öğrencilerin kavram yanılgısına (misconception) düşmesini önlemek adına pedagojik gerçekliğe, terminolojiye ve bilimsel doğruluğa %100 sadık kalacaksın.

**[TASK / GÖREV & MEKANİKLER]**
Aşağıdaki pedagojik kurguyu ve etkileşimleri eksiksiz içeren, çalışır durumda tek dosyalık bir HTML5 uygulaması üret:
1. Etkinlik Türü: ✨ Özel / Serbest Format (Kendi Kurgun)
2. Özel Senaryo ve Akış: 2. sınıf seviyesine uygun Hayat bilgisi Dersinde kullanmak üzere, Trafik işaret ve levhalarıyla ilgili bir etkinlik tasarla. Etkinlikte yaya geçidi, okul geçidi, alt geçit, üst geçit, ışıklı işaret levhası( kırmızı, sarı ve yeşil yanarken ayrı ayrı resmedilmiş), yaya giremez, bisiklet giremez, mecburi bisiklet yolu, mecburi yaya yolu levhalarının ve bu levhaların açıklamalarının olduğu kartlar olsun. Bu kartlar arkası dönük olsun ve tıkladığımızda ön yüzü görünsün. ilk iki kart bilgi ve görsel açısından eşleşiyorsa bu kartları ekrandan kaldır. eşleşmiyorsa geri döndür.  Bu etkinlik için 1 dakikalık  süre ver. Akıllı tahtaya ve mobile uyumlu olsun. Aynı zamanda html olarak indirilebilsin.
3. Dahili Mekanikler:
   - Web Audio API ile harici dosya indirmeden sentezlenen doğru/yanlış ve buton tıklama ses efektleri.
   - Etkinlik tamamlandığında tebrik modalı ve canvas-confetti (veya saf CSS/Canvas) kutlama animasyonu.
   - Sınıf içi tempoyu ve odaklanmayı koruyan görsel dijital geri sayım sayacı.

**[FORMAT, TİPOGRAFİ, EĞİTEKNOLOJİ LAB DOKUNSAL UI & EKRAN MİMARİSİ]**
1. TEK DOSYA İNTERAKTİF HTML & KURUMSAL STANDARTLAR:
   - Çıktı SADECE ve TAMAMEN tarayıcıda çalışan TEK PARÇA HTML (HTML5 + Gömülü CSS + Vanilla JS + Web Audio API) olmalıdır. Dışarıdan yerel JS/CSS/ses dosyası bağımlılığı KESİNLİKLE olmamalıdır.
   - Tasarım ve ikon altyapısı için evrensel CDN bağlantıları <head> içine eksiksiz eklenmelidir:
     &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0" />
     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet">
     <style> .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } </style>

2. ÜST HEADER ENTEGRE KONTROLLERİ (MASAÜSTÜ & AKILLI TAHTA ERGONOMİSİ):
   - Sol tarafta sahneyi daraltan ayrı bir dock KESİNLİKLE KULLANILMAYACAKTIR; tüm kontroller üst başlık çubuğunun doğal akışında yer almalıdır:
   - Sol Üst: Tıklanabilir resmi platform logosu ve marka rozeti:
     <a href="https://egiteknolojilab.com" target="_blank" rel="noopener noreferrer" title="Eğiteknoloji Lab" class="flex items-center gap-2 group cursor-pointer transition-transform hover:scale-105">
       <img src="https://egiteknolojilab.com/assets/img/logo_icon_colorful.png?v=v2.7.0" alt="Eğiteknoloji Lab" class="w-8 h-8 object-contain">
       <span class="font-outfit font-black text-slate-800 text-sm tracking-tight hidden sm:inline-flex items-center gap-1">
         Eğiteknoloji <span class="bg-indigo-100 text-indigo-700 text-[10px] px-1.5 py-0.5 rounded-md font-extrabold">Lab</span>
       </span>
     </a>
     Logonun hemen yanında etkinlik başlığı ve ders rozeti yer alır.
   - Sağ Üst (Doğal Kontrol & HUD Barı):
     * Can/Puan veya Süre Sayaçları (Oyunlaştırılmış renkli pill rozetler).
     * Ses Aç / Kapat: Zarif dairesel ikon butonu ('volume_up' / 'volume_off').
     * Nasıl Oynanır? / Rehber: Dairesel ikon butonu ('help'), tıklandığında oyun kurallarını açıklayan şık bir modal açar.
     * Sıfırla / Yeniden Başlat: Dairesel ikon butonu ('restart_alt') ve ayrıca oyun sonu kutlama ekranında beliren büyük renkli ana "Tekrar Oyna" butonu.
   - Böylece oyun sahnesi (main canvas) sol dock baskısı olmadan 16:9 alanın tamamını ferahça kullanır.

3. KRİTİK TASARIM PRENSİBİ: GEREKSİZLİK İLKESİ, TEMİZ ALAN & GÖRSEL YORGUNLUĞU ÖNLEME (ZERO-CLUTTER & CLEAN WHITESPACE):
   - GEREKSİZLİK İLKESİ (CLUTTER-FREE): Ekranı kalabalıklaştıran, hiçbir pedagojik işlevi olmayan yapay rozetler (örneğin "Canlı Atölye", "420+ Öğretmen", yapay minik etiketler), gereksiz alt başlıklar ve görsel kirlilik KESİNLİKLE KULLANILMAYACAKTIR.
   - MAKSİMUM TEMİZ ALAN (BREATHING ROOM): Ekranda olabildiğince ferah, gözü dinlendiren ve dikkati doğrudan soru/etkileşim nesnesine çeken temiz alanlar (whitespace) bırak. Bilişsel yükü ve görsel yorgunluğu sıfıra indir.
   - ÜSTÜN MOBİL ERGONOMİ & THUMB-ZONE: Hangi tarz olursa olsun, dikey telefon ekranlarında (@media (max-width: 768px)):
     * Tek sütunlu ferah dikey akışa (grid-template-columns: 1fr;) geçmeli, ekranda asla yatay taşma (horizontal scroll) olmamalıdır.
     * Alt Sabit Bar (Sticky Bottom Action Bar): Ekranın en altında başparmak hizasında sabit bir aksiyon alanı bulunmalı ve oyunun birincil aksiyonu (Geniş, dokunsal 3D "KONTROL ET", "CEVAPLA", "DEVAM ET" butonu) burada yer almalıdır.

4. ERKEN YAŞ & SEVİMLİ PUFUDUK TASARIM DİLİ (BUBBLY & PLAYFUL DESIGN):
   - Mimari ve Tasarım Referansı: Erken çocukluk ve ilkokul pedagojisine uygun devasa yuvarlatılmış köşeler (rounded-3xl veya rounded-full), pufuduk (bubbly) dokunsal butonlar.
   - Şeker & Neşeli Renk Paleti: Sevimli pastel-şeker renkler (tatlı sarılar, pamuk mavileri, neşeli mercan ve nane yeşili); yumuşak ve şefkatli renk geçişleri.
   - İri Dokunsal Butonlar: Küçük parmakların kolayca basabileceği yüksek dokunma hedefleri (min 60px), basıldığında hafif esneyen neşeli elastik basılma hissi (scale-95).
   - Pozitif Pekiştireç: Doğru cevaplarda gülümseten tebrikler ve sıcak bir pedagojik atmosfer.

5. 16:9 GENİŞ EKRAN STANDARDI (MASAÜSTÜ & AKILLI TAHTA):
   - Masaüstünde tam 16:9 en-boy oranında, üst ve alt kenarları sıfır boşlukla (zero-margin) dolduran akıllı tahta uyumlu yerleşim:
     height: 100vh; height: 100dvh; aspect-ratio: 16 / 9; max-width: calc(100vh * (16 / 9)); width: min(100vw, calc(100vh * (16 / 9))); margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column;

6. ARAYÜZ VE İÇERİK DİLİ: Tüm butonlar, yönergeler, sorular, başlıklar ve geri bildirimler tamamen **TÜRKÇE** dilinde olmalıdır.

**[KESİN KISITLAR, YASAKLAR VE NEGATİF KURALLAR / STRICT CONSTRAINTS]**
1. GEREKSİZ TEORİK ALT BİLGİ BANDI KOYMA: Ekranın en altına müfredat teorik notları içeren kaba şeritler KESİNLİKLE KOYMA.
2. SOL DOCK ÇIKINTISI KOYMA: Sahneyi daraltan sol yüzen dock kullanma; kontrolleri üst header'da doğal akışa entegre et.
3. İÇİ BOMBOŞ BEYAZ ÇERÇEVELİ KUTU YA DA SOLUK RENK KOYMA: Canlı, dinamik ve seçilen tema tarzına uygun doygun zeminler ve dokunsal butonlar kullan.
4. GÖRSEL YORGUNLUK VE SÜS KİRLİLİĞİ KESİNLİKLE YASAKTIR: Ekranı süsleme veya doldurma amacıyla konulan minik badge'ler, banner'lar ve işlevsiz yazılar ASLA eklenmeyecektir; olabildiğince ferah ve temiz alan bırakılmalıdır.
5. DAHİLİ TAM EKRAN BUTONU KOYMA: Eğiteknoloji Lab platformu dış çerçevesinde tam ekran özelliğine zaten sahiptir.
6. HARİCİ DOSYA / SES / MP3 KOYMA: Sesler Web Audio API ile üretilmeli; logo haricindeki tüm grafikler CSS/SVG/Canvas ile çizilmelidir.
7. NEON IŞIKLAR VE SİYAH SİBER TEMA KOYMA: Koyu siyah arka planlar ve göz yoran fosforlu neon ışıklar KESİNLİKLE YASAKTIR.

⚡ Google Gemini İçin Ek Talimat: Açıklama veya giriş cümlesi yapmadan doğrudan ve sadece ```html ... ``` kod bloğu ver. Kodun hiçbir yerini '// kodlar buraya gelecek' diyerek yarım bırakma, %100 eksiksiz tamamla.