/* ============================================================
   NOVA OYUN LAB — Keycap tasarım sistemi
   Palet: mürekkep lacivert / klavye mavisi / yıldız sarısı /
          mercan / filiz yeşili — açık "masa matı" zemin
   ============================================================ */
:root {
  --murekkep: #1d2b4f;
  --murekkep-2: #3a4a75;
  --zemin: #eef2f9;
  --kart: #ffffff;
  --cizgi: #d7deee;
  --mavi: #3e63dd;
  --mavi-koyu: #2a4bb5;
  --sari: #ffb930;
  --sari-koyu: #e09a10;
  --mercan: #ff5d73;
  --mercan-koyu: #d63d55;
  --yesil: #2fbf71;
  --yesil-koyu: #1f9c58;
  --mor: #8b5cf6;
  --mor-koyu: #6d3fd6;
  --golge: 0 6px 16px rgba(29, 43, 79, 0.1);
  --font-baslik: "Baloo 2", system-ui, sans-serif;
  --font-govde: "Nunito", system-ui, sans-serif;
  --font-kod: "JetBrains Mono", "Consolas", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-govde);
  background: var(--zemin);
  background-image: radial-gradient(var(--cizgi) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  color: var(--murekkep);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, .logo { font-family: var(--font-baslik); }

/* ---------- Keycap: sitenin imza öğesi ---------- */
.tus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-baslik);
  font-weight: 700;
  background: var(--kart);
  color: var(--murekkep);
  border: 2.5px solid var(--murekkep);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--murekkep);
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s;
  text-decoration: none;
}
.tus:hover { background: #f4f7ff; }
.tus:active, .tus.basili {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--murekkep);
}
.tus:focus-visible { outline: 3px solid var(--sari); outline-offset: 3px; }
.tus.mavi   { background: var(--mavi);   color: #fff; box-shadow: 0 5px 0 var(--mavi-koyu);   border-color: var(--mavi-koyu); }
.tus.mavi:active   { box-shadow: 0 1px 0 var(--mavi-koyu); }
.tus.sari   { background: var(--sari);   color: var(--murekkep); box-shadow: 0 5px 0 var(--sari-koyu); border-color: var(--sari-koyu); }
.tus.sari:active   { box-shadow: 0 1px 0 var(--sari-koyu); }
.tus.mercan { background: var(--mercan); color: #fff; box-shadow: 0 5px 0 var(--mercan-koyu); border-color: var(--mercan-koyu); }
.tus.mercan:active { box-shadow: 0 1px 0 var(--mercan-koyu); }
.tus.yesil  { background: var(--yesil);  color: #fff; box-shadow: 0 5px 0 var(--yesil-koyu);  border-color: var(--yesil-koyu); }
.tus.yesil:active  { box-shadow: 0 1px 0 var(--yesil-koyu); }
.tus.mor    { background: var(--mor);    color: #fff; box-shadow: 0 5px 0 var(--mor-koyu);    border-color: var(--mor-koyu); }
.tus.mor:active    { box-shadow: 0 1px 0 var(--mor-koyu); }
.tus[disabled] { opacity: 0.5; cursor: not-allowed; }

.tus.buton { padding: 10px 22px; font-size: 1.05rem; gap: 8px; }
.tus.kucuk { padding: 5px 12px; font-size: 0.85rem; border-width: 2px; box-shadow: 0 3px 0 var(--murekkep); border-radius: 9px; }

/* ---------- Üst çubuk ---------- */
.ust {
  background: var(--kart);
  border-bottom: 3px solid var(--murekkep);
  padding: 12px clamp(14px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 50;
}
.logo { display: flex; gap: 5px; text-decoration: none; align-items: center; }
.logo .tus {
  width: 34px; height: 34px; font-size: 1.05rem; border-radius: 9px;
  box-shadow: 0 4px 0 var(--murekkep); pointer-events: none;
}
.logo .tus:nth-child(1) { background: var(--mavi); color: #fff; border-color: var(--mavi-koyu); box-shadow: 0 4px 0 var(--mavi-koyu); }
.logo .tus:nth-child(2) { background: var(--sari); border-color: var(--sari-koyu); box-shadow: 0 4px 0 var(--sari-koyu); }
.logo .tus:nth-child(3) { background: var(--mercan); color: #fff; border-color: var(--mercan-koyu); box-shadow: 0 4px 0 var(--mercan-koyu); }
.logo .tus:nth-child(4) { background: var(--yesil); color: #fff; border-color: var(--yesil-koyu); box-shadow: 0 4px 0 var(--yesil-koyu); }
.logo-yazi { font-size: 1.2rem; font-weight: 800; margin-left: 8px; color: var(--murekkep); }
.logo-yazi span { color: var(--mavi); }

.ust nav { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.ust nav a {
  font-family: var(--font-baslik); font-weight: 700; text-decoration: none;
  color: var(--murekkep-2); padding: 7px 14px; border-radius: 10px; font-size: 0.98rem;
}
.ust nav a:hover { background: var(--zemin); color: var(--murekkep); }
.ust nav a.aktif { background: var(--murekkep); color: #fff; }

.oturum { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.oturum .rozet {
  background: var(--sari); border: 2px solid var(--sari-koyu); border-radius: 999px;
  padding: 5px 14px; font-family: var(--font-baslik); font-size: 0.92rem;
}

main { flex: 1; width: min(1080px, 100% - 28px); margin: 0 auto; padding: 30px 0 60px; }

/* ---------- Giriş sayfası ---------- */
.kahraman { text-align: center; padding: 28px 0 10px; }
.kahraman .buyuk-tuslar { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.kahraman .buyuk-tuslar .tus {
  width: clamp(52px, 9vw, 76px); height: clamp(52px, 9vw, 76px);
  font-size: clamp(1.5rem, 4vw, 2.3rem); border-radius: 16px; animation: ziplat 2.6s ease-in-out infinite;
}
.kahraman .buyuk-tuslar .tus:nth-child(2) { animation-delay: 0.15s; }
.kahraman .buyuk-tuslar .tus:nth-child(3) { animation-delay: 0.3s; }
.kahraman .buyuk-tuslar .tus:nth-child(4) { animation-delay: 0.45s; }
.kahraman .buyuk-tuslar .tus:nth-child(5) { animation-delay: 0.6s; }
.kahraman .buyuk-tuslar .tus:nth-child(6) { animation-delay: 0.75s; }
.kahraman .buyuk-tuslar .tus:nth-child(7) { animation-delay: 0.9s; }
.kahraman .buyuk-tuslar .tus:nth-child(8) { animation-delay: 1.05s; }
@keyframes ziplat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .kahraman .buyuk-tuslar .tus { animation: none; }
}
.kahraman h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); }
.kahraman p { color: var(--murekkep-2); font-size: 1.08rem; margin-top: 6px; }

.giris-kart {
  background: var(--kart); border: 3px solid var(--murekkep); border-radius: 20px;
  box-shadow: var(--golge), 0 8px 0 var(--murekkep);
  max-width: 520px; margin: 30px auto 0; padding: 28px;
}
.giris-kart h2 { margin-bottom: 16px; font-size: 1.35rem; }
.alan { margin-bottom: 18px; }
.alan label { display: block; font-weight: 800; margin-bottom: 7px; font-family: var(--font-baslik); }
.alan input[type="text"], .alan input[type="password"], .alan select {
  width: 100%; padding: 12px 14px; font-size: 1.05rem; font-family: var(--font-govde);
  border: 2.5px solid var(--murekkep); border-radius: 12px; background: #fbfcff;
}
.alan input:focus, .alan select:focus { outline: 3px solid var(--sari); outline-offset: 1px; }

.yas-secim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.yas-secim .tus { flex-direction: column; padding: 14px 6px; gap: 2px; }
.yas-secim .tus .yas { font-size: 1.25rem; }
.yas-secim .tus .aciklama { font-size: 0.75rem; font-weight: 600; opacity: 0.75; }
.yas-secim .tus.secili { background: var(--mavi); color: #fff; border-color: var(--mavi-koyu); box-shadow: 0 5px 0 var(--mavi-koyu); }

.hata-mesaj { color: var(--mercan-koyu); font-weight: 700; margin-top: 10px; min-height: 1.3em; }

/* ---------- Kart ızgaraları ---------- */
.bolum-baslik { display: flex; align-items: center; gap: 12px; margin: 34px 0 16px; }
.bolum-baslik h2 { font-size: 1.5rem; }
.bolum-baslik .cizgi { flex: 1; height: 3px; background: var(--cizgi); border-radius: 2px; }
.etiket {
  font-family: var(--font-baslik); font-weight: 700; font-size: 0.8rem;
  padding: 3px 10px; border-radius: 999px; border: 2px solid;
}
.etiket.klavye { background: #e3eaff; color: var(--mavi-koyu); border-color: var(--mavi); }
.etiket.mouse  { background: #ffe6ea; color: var(--mercan-koyu); border-color: var(--mercan); }
.etiket.python { background: #e9f9f0; color: var(--yesil-koyu); border-color: var(--yesil); }
.etiket.scratch{ background: #f1eaff; color: var(--mor-koyu); border-color: var(--mor); }
.etiket.seviye { background: #fff3d9; color: var(--sari-koyu); border-color: var(--sari); }

.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.oyun-kart {
  background: var(--kart); border: 3px solid var(--murekkep); border-radius: 18px;
  padding: 20px; box-shadow: 0 6px 0 var(--murekkep);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.12s ease;
}
.oyun-kart:hover { transform: translateY(-4px); }
.oyun-kart .ikon { font-size: 2.2rem; line-height: 1; }
.oyun-kart h3 { font-size: 1.2rem; }
.oyun-kart p { color: var(--murekkep-2); font-size: 0.93rem; flex: 1; }
.oyun-kart .satir { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.oyun-kart .tus.buton { margin-top: 4px; }

/* ---------- Oyun katmanı (overlay) ---------- */
.oyun-perde {
  position: fixed; inset: 0; background: rgba(29, 43, 79, 0.55);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 14px;
}
.oyun-perde.acik { display: flex; }
.oyun-kutu {
  background: var(--kart); border: 3px solid var(--murekkep); border-radius: 20px;
  box-shadow: 0 10px 0 var(--murekkep);
  width: min(1680px, 100%); height: calc(100vh - 28px); height: calc(100dvh - 28px);
  display: flex; flex-direction: column; overflow: hidden;
}
.oyun-perde:fullscreen { padding: 0; background: var(--zemin); }
.oyun-perde:fullscreen .oyun-kutu { width: 100%; height: 100vh; border-radius: 0; border: 0; box-shadow: none; }
.oyun-ust {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 3px solid var(--murekkep); flex-wrap: wrap;
}
.oyun-ust h3 { font-size: 1.2rem; margin-right: auto; }
.gosterge {
  font-family: var(--font-baslik); font-weight: 800; font-size: 1rem;
  background: var(--zemin); border: 2px solid var(--murekkep); border-radius: 10px; padding: 5px 12px;
}
.gosterge b { color: var(--mavi); }
.oyun-alan {
  position: relative; height: auto; min-height: 320px; overflow: hidden;
  background: linear-gradient(#f7f9ff, #eef2f9);
  touch-action: none;
}
.oyun-alt { padding: 12px 18px; border-top: 3px solid var(--murekkep); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.oyun-alt .bilgi { color: var(--murekkep-2); font-weight: 700; font-size: 0.9rem; margin-left: auto; }

/* Oyun içi öğeler */
.dusen-harf {
  position: absolute; top: -60px;
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-baslik); font-weight: 800; font-size: 1.5rem;
  background: var(--kart); border: 2.5px solid var(--murekkep); border-radius: 12px;
  box-shadow: 0 4px 0 var(--murekkep); pointer-events: none;
}
.dusen-harf.patla { background: var(--yesil); color: #fff; border-color: var(--yesil-koyu); box-shadow: 0 4px 0 var(--yesil-koyu); transform: scale(1.25); transition: all 0.12s; }

.balon {
  position: absolute; bottom: -90px; border-radius: 50% 50% 50% 50%/ 45% 45% 55% 55%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-baslik); font-weight: 800; color: rgba(255,255,255,0.9);
  border: 3px solid rgba(0,0,0,0.15);
}
.balon::after { content: ""; position: absolute; bottom: -14px; left: 50%; width: 2px; height: 14px; background: var(--murekkep-2); }

.hedef {
  position: absolute; border-radius: 50%; cursor: crosshair;
  background: radial-gradient(circle, #fff 18%, var(--mercan) 20%, var(--mercan) 38%, #fff 40%, #fff 58%, var(--mercan) 60%);
  border: 3px solid var(--mercan-koyu);
}

.kelime-sahne { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; }
.hedef-kelime { font-family: var(--font-kod); font-size: clamp(1.6rem, 5vw, 2.6rem); letter-spacing: 3px; font-weight: 700; }
.hedef-kelime .dogru { color: var(--yesil); }
.hedef-kelime .yanlis { color: var(--mercan); text-decoration: underline; }
.hedef-kelime .bekleyen { color: var(--murekkep-2); opacity: 0.55; }

.metin-sahne { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.hedef-metin {
  font-family: var(--font-kod); font-size: 1.12rem; line-height: 1.9; background: var(--kart);
  border: 2.5px solid var(--murekkep); border-radius: 14px; padding: 16px; flex: 1; overflow: auto;
}
.metin-sahne textarea {
  font-family: var(--font-kod); font-size: 1.05rem; padding: 12px; border: 2.5px solid var(--murekkep);
  border-radius: 12px; resize: none; height: 110px;
}
.metin-sahne textarea:focus { outline: 3px solid var(--sari); }

.surukle-sahne { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.slotlar, .sekiller { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.slot {
  width: 74px; height: 74px; border: 3px dashed var(--murekkep-2); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.6);
}
.slot.dolu { border-style: solid; border-color: var(--yesil); background: #e9f9f0; }
.sekil {
  width: 62px; height: 62px; cursor: grab; touch-action: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
  border-radius: 14px; border: 3px solid var(--murekkep); background: var(--kart);
  box-shadow: 0 4px 0 var(--murekkep); user-select: none;
}
.sekil.tasiniyor { opacity: 0.85; cursor: grabbing; z-index: 20; position: fixed; pointer-events: none; }

/* Sonuç ekranı */
.sonuc-sahne {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; background: rgba(255,255,255,0.94); text-align: center; padding: 20px;
}
.sonuc-sahne .buyuk-puan { font-family: var(--font-baslik); font-size: 3.2rem; font-weight: 800; color: var(--mavi); }
.sonuc-sahne .rekor { background: var(--sari); border: 2px solid var(--sari-koyu); border-radius: 999px; padding: 6px 18px; font-weight: 800; font-family: var(--font-baslik); }
.geri-sayim {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-baslik); font-size: 5rem; font-weight: 800; color: var(--mavi);
  background: rgba(255,255,255,0.85); z-index: 5;
}

/* ---------- Dersler ---------- */
.ders-icerik { background: var(--kart); border: 3px solid var(--murekkep); border-radius: 18px; box-shadow: 0 6px 0 var(--murekkep); padding: 26px; }
.ders-icerik h2 { margin-bottom: 4px; }
.ders-icerik .alt-bilgi { color: var(--murekkep-2); font-weight: 700; margin-bottom: 18px; }
.ders-bolum { margin: 20px 0; }
.ders-bolum h3 { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ders-bolum p { line-height: 1.75; margin-bottom: 8px; }
.kod-blok {
  font-family: var(--font-kod); font-size: 0.95rem; background: #232a3f; color: #e8ecfb;
  border-radius: 12px; padding: 14px 16px; overflow-x: auto; margin: 10px 0; line-height: 1.7;
  white-space: pre; border: 3px solid var(--murekkep);
}
.ipucu-kutu {
  border: 2.5px solid var(--sari); background: #fff8e8; border-radius: 12px; padding: 12px 16px; margin: 12px 0;
  font-weight: 600;
}
.ipucu-kutu b { color: var(--sari-koyu); }

.quiz-soru { border: 2.5px solid var(--cizgi); border-radius: 14px; padding: 16px; margin: 14px 0; background: #fbfcff; }
.quiz-soru h4 { margin-bottom: 10px; }
.quiz-soru .secenek {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 2px solid var(--cizgi);
  border-radius: 10px; margin: 7px 0; cursor: pointer; font-weight: 600; background: #fff;
}
.quiz-soru .secenek:hover { border-color: var(--mavi); }
.quiz-soru .secenek input { accent-color: var(--mavi); width: 18px; height: 18px; }
.quiz-soru.dogru { border-color: var(--yesil); background: #f0fbf5; }
.quiz-soru.yanlis { border-color: var(--mercan); background: #fff2f4; }
.quiz-soru .aciklama-kutu { margin-top: 8px; font-weight: 700; }
.quiz-soru.dogru .aciklama-kutu { color: var(--yesil-koyu); }
.quiz-soru.yanlis .aciklama-kutu { color: var(--mercan-koyu); }

/* ---------- Tablolar ---------- */
.tablo-kap { background: var(--kart); border: 3px solid var(--murekkep); border-radius: 16px; box-shadow: 0 6px 0 var(--murekkep); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; }
thead th { background: var(--murekkep); color: #fff; font-family: var(--font-baslik); font-size: 0.95rem; }
tbody tr { border-top: 2px solid var(--cizgi); }
tbody tr:nth-child(odd) { background: #fbfcff; }
td.sira { font-family: var(--font-baslik); font-weight: 800; width: 62px; }
tr.birinci td.sira::after { content: " 🥇"; }
tr.ikinci td.sira::after { content: " 🥈"; }
tr.ucuncu td.sira::after { content: " 🥉"; }
tr.ben { outline: 3px solid var(--sari); outline-offset: -3px; }
td.puan { font-family: var(--font-baslik); font-weight: 800; color: var(--mavi); }

.filtre-satir { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filtre-satir select {
  padding: 9px 13px; border: 2.5px solid var(--murekkep); border-radius: 11px;
  font-family: var(--font-baslik); font-weight: 700; font-size: 0.95rem; background: var(--kart);
}

.bos-durum { text-align: center; padding: 44px 20px; color: var(--murekkep-2); font-weight: 700; }

/* ---------- Admin ---------- */
.sekmeler { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.istatistik-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.istatistik {
  background: var(--kart); border: 3px solid var(--murekkep); border-radius: 16px; box-shadow: 0 5px 0 var(--murekkep);
  padding: 18px; text-align: center;
}
.istatistik .sayi { font-family: var(--font-baslik); font-size: 2.2rem; font-weight: 800; color: var(--mavi); }
.istatistik .ad { font-weight: 700; color: var(--murekkep-2); }
.tehlike-kutu { border: 3px solid var(--mercan); border-radius: 16px; padding: 18px; background: #fff2f4; margin-top: 24px; }
.tehlike-kutu h3 { color: var(--mercan-koyu); margin-bottom: 8px; }

/* ---------- Bildirim ---------- */
.bildirim {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--murekkep); color: #fff; padding: 12px 22px; border-radius: 12px;
  font-family: var(--font-baslik); font-weight: 700; z-index: 200; opacity: 0; transition: all 0.3s;
}
.bildirim.goster { transform: translateX(-50%) translateY(0); opacity: 1; }

footer { text-align: center; padding: 18px; color: var(--murekkep-2); font-weight: 600; font-size: 0.88rem; }

@media (max-width: 620px) {
  .ust nav { order: 3; width: 100%; justify-content: center; }
  .yas-secim { grid-template-columns: 1fr 1fr 1fr; }
  th, td { padding: 9px 8px; font-size: 0.88rem; }
}

/* ---------- KOD LAB ---------- */
.kod-sekmeler { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.kod-panel { display: none; }
.kod-panel.acik { display: block; }

.kodlab-duzen { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .kodlab-duzen { grid-template-columns: 1fr; } }

.kod-kart { background: var(--kart); border: 3px solid var(--murekkep); border-radius: 16px; box-shadow: 0 6px 0 var(--murekkep); padding: 16px; }
.kod-kart h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Blok Macera — dünya */
.dunya-kap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dunya { display: grid; gap: 4px; background: #d9e6d2; border: 3px solid var(--murekkep); border-radius: 14px; padding: 8px; }
.hucre {
  width: clamp(38px, 6.5vw, 52px); height: clamp(38px, 6.5vw, 52px);
  background: #eaf3e4; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.2rem, 4vw, 1.7rem); position: relative;
}
.hucre.duvar { background: #b98b62; }
.hucre .karakter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: all 0.28s ease; z-index: 2; }
.hucre .yon-ok { position: absolute; font-size: 0.7rem; bottom: 1px; right: 3px; }
.hucre.toplandi { animation: parla 0.4s ease; }
@keyframes parla { 0% { background: var(--sari); transform: scale(1.15); } 100% { background: #eaf3e4; } }

/* Palet ve program */
.palet { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.palet .tus { padding: 8px 12px; font-size: 0.92rem; }
.tekrar-sayi { width: 58px; padding: 8px; border: 2.5px solid var(--murekkep); border-radius: 10px; font-family: var(--font-baslik); font-weight: 800; font-size: 0.95rem; }
.program-listesi { min-height: 90px; border: 3px dashed var(--cizgi); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; background: #fbfcff; }
.program-listesi.bos::after { content: "Bloklara tıklayarak programını oluştur 👆"; color: var(--murekkep-2); font-weight: 700; text-align: center; padding: 16px 0; }
.blok-satir {
  display: flex; align-items: center; gap: 8px; background: var(--kart); border: 2.5px solid var(--murekkep);
  border-radius: 10px; padding: 7px 10px; font-family: var(--font-baslik); font-weight: 700; box-shadow: 0 3px 0 var(--murekkep);
}
.blok-satir.girintili { margin-left: 26px; border-color: var(--mor); box-shadow: 0 3px 0 var(--mor-koyu); }
.blok-satir.tekrar-blok { background: #f1eaff; border-color: var(--mor); box-shadow: 0 3px 0 var(--mor-koyu); }
.blok-satir.calisiyor { background: var(--sari); }
.blok-satir .sil { margin-left: auto; cursor: pointer; color: var(--mercan-koyu); font-weight: 800; padding: 0 4px; }
.gorev-bilgi { background: #fff8e8; border: 2.5px solid var(--sari); border-radius: 12px; padding: 10px 14px; font-weight: 700; margin-bottom: 12px; }

/* Python IDE */
.py-editor {
  width: 100%; min-height: 240px; font-family: var(--font-kod); font-size: 1rem; line-height: 1.65;
  border: 3px solid var(--murekkep); border-radius: 12px; padding: 14px; background: #232a3f; color: #e8ecfb;
  resize: vertical; tab-size: 4;
}
.py-editor:focus { outline: 3px solid var(--sari); }
.py-cikti {
  font-family: var(--font-kod); font-size: 0.98rem; background: #101523; color: #7ee787;
  border: 3px solid var(--murekkep); border-radius: 12px; padding: 14px; min-height: 90px;
  white-space: pre-wrap; margin-top: 10px; line-height: 1.6;
}
.py-cikti .hata { color: #ff7b8a; }
.gorev-liste { display: flex; flex-direction: column; gap: 8px; }
.gorev-satir {
  display: flex; align-items: center; gap: 10px; border: 2.5px solid var(--cizgi); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; font-weight: 700; background: #fff;
}
.gorev-satir:hover { border-color: var(--mavi); }
.gorev-satir.secili { border-color: var(--mavi); background: #eef3ff; }
.gorev-satir.cozuldu { border-color: var(--yesil); background: #f0fbf5; }
.gorev-satir .rozet-kucuk { margin-left: auto; font-size: 1.1rem; }

/* ============================================================
   v2 EKLENTİLERİ — avatar, günlük görev, turnuva, profil,
   on parmak, turtle, ders editörü
   ============================================================ */

/* Avatar seçici (giriş) */
.avatar-secim { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.avatar-tus { font-size: 1.3rem; padding: 8px 0; justify-content: center; opacity: 0.65; }
.avatar-tus.secili { opacity: 1; background: #fff7e0; border-color: var(--sari); box-shadow: 0 4px 0 #d99e1f; transform: translateY(-2px); }
@media (max-width: 480px) { .avatar-secim { grid-template-columns: repeat(4, 1fr); } }

/* Günlük görev kartı */
.gunluk-kart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: #fff; border: 3px solid var(--cizgi); border-radius: var(--kose);
  padding: 12px 16px; margin-bottom: 16px; font-weight: 700;
}
.gunluk-kart b { font-family: var(--font-baslik); color: var(--murekkep); }
.gunluk-madde { color: var(--murekkep-2); }
.gunluk-madde.tamam { color: var(--yesil); }
.gunluk-odul { margin-left: auto; background: #fff3d6; border: 2px solid var(--sari); border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; }

/* Turnuva banner + sahne */
.turnuva-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  background: linear-gradient(100deg, #fff1f3, #fff7e0);
  border: 3px solid var(--mercan); border-radius: var(--kose);
  padding: 12px 16px; margin-bottom: 14px; font-weight: 700; color: var(--murekkep);
}
.yanip { color: var(--mercan); font-weight: 900; animation: yanip 1s infinite; }
@keyframes yanip { 50% { opacity: 0.35; } }
.turnuva-sahne { background: #fff; border: 3px solid var(--cizgi); border-radius: var(--kose); padding: 22px; box-shadow: var(--golge); }
.turnuva-sayac { font-family: var(--font-kod); font-size: 1.5rem; color: var(--mercan); background: var(--murekkep); padding: 2px 12px; border-radius: 10px; color: #ffd166; }
.turnuva-kazanan {
  background: #eefcf4; border: 3px solid var(--yesil); border-radius: var(--kose);
  padding: 14px 18px; margin: 8px 0 16px; font-size: 1.15rem; font-weight: 800; color: var(--murekkep);
}

/* Profil */
.profil-kart { display: flex; align-items: center; gap: 16px; background: #fff; border: 3px solid var(--cizgi); border-radius: var(--kose); padding: 18px 22px; margin-bottom: 16px; box-shadow: var(--golge); }
.profil-avatar { font-size: 3rem; background: var(--zemin); border: 3px solid var(--cizgi); border-radius: 20px; width: 78px; height: 78px; display: grid; place-items: center; flex: none; }
.profil-kart h2 { font-family: var(--font-baslik); }
.profil-kart p { color: var(--murekkep-2); font-weight: 700; }
.rozet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.rozet-kart {
  position: relative; background: #fff; border: 3px solid var(--cizgi); border-radius: var(--kose);
  padding: 14px 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.rozet-kart .rozet-ikon { font-size: 1.9rem; }
.rozet-kart b { font-family: var(--font-baslik); font-size: 0.92rem; color: var(--murekkep); }
.rozet-kart small { color: var(--murekkep-2); font-weight: 700; font-size: 0.75rem; line-height: 1.3; }
.rozet-kart.kazanildi { border-color: var(--sari); background: #fffaf0; box-shadow: 0 4px 0 #e8c76a; }
.rozet-kart.kilitli { opacity: 0.45; filter: grayscale(0.7); }
.yeni-etiket {
  position: absolute; top: -10px; right: -6px; background: var(--mercan); color: #fff;
  font-size: 0.68rem; font-weight: 900; padding: 3px 8px; border-radius: 999px; border: 2px solid #fff;
  animation: yanip 1.2s infinite;
}

/* On Parmak Antrenmanı */
.onparmak-sahne { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0; }
.op-hedef { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.op-harf {
  font-family: var(--font-baslik); font-size: 3.4rem; font-weight: 800; color: var(--murekkep);
  background: #fff; border: 3px solid var(--cizgi); border-bottom-width: 7px; border-radius: 18px;
  width: 92px; height: 92px; display: grid; place-items: center;
}
.op-parmak { font-weight: 800; color: var(--mavi); }
.klavye-gorsel { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.k-satir { display: flex; gap: 5px; }
.k-tus {
  --parmak-renk: #dde4f2;
  width: clamp(26px, 6.4vw, 40px); height: clamp(30px, 6.8vw, 42px);
  display: grid; place-items: center; font-weight: 800; font-size: clamp(0.7rem, 2vw, 0.95rem);
  background: #fff; border: 2px solid var(--cizgi); border-bottom-width: 5px; border-radius: 8px;
  border-bottom-color: var(--parmak-renk); box-shadow: inset 0 -3px 0 var(--parmak-renk);
  color: var(--murekkep); user-select: none;
}
.k-tus.pasif { opacity: 0.3; }
.k-tus.hedef { background: var(--parmak-renk); animation: opNabiz 0.8s infinite; border-color: var(--murekkep); }
@keyframes opNabiz { 50% { transform: translateY(-3px); } }
.k-tus.yanlis-titre { animation: titre 0.3s; background: #ffe3e8; }
.op-lejant { display: flex; flex-wrap: wrap; gap: 12px; font-weight: 700; font-size: 0.85rem; color: var(--murekkep-2); }
.op-lejant i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--cizgi); vertical-align: -2px; margin-right: 4px; }

/* Turtle tuvali */
.turtle-tuval {
  min-height: 120px; background: #fff; border: 3px dashed var(--cizgi); border-radius: var(--kose);
  display: flex; justify-content: center; align-items: center; overflow: hidden;
}
.turtle-tuval canvas { max-width: 100%; }

/* Ders/quiz editörü */
.editor-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; }
.editor-satir { background: var(--zemin); border: 2px solid var(--cizgi); border-radius: var(--kose); padding: 12px 14px; margin-bottom: 12px; }
.editor-satir-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.editor-satir textarea, .editor-satir input, #dersForm input, #dersForm select, #dersForm textarea {
  width: 100%; padding: 8px 10px; border: 2px solid var(--cizgi); border-radius: 10px;
  font: inherit; font-weight: 600; background: #fff;
}
.editor-satir textarea:focus, #dersForm input:focus, #dersForm textarea:focus { outline: none; border-color: var(--mavi); }
#dersForm .alan { margin-bottom: 8px; }
#dersForm h3 { font-family: var(--font-baslik); color: var(--murekkep); }

/* Araç çubuğu inputları */
.arac-cubugu input[type="text"] { padding: 9px 12px; border: 2px solid var(--cizgi); border-radius: 12px; font: inherit; font-weight: 700; }
.arac-cubugu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

/* ============================================================
   v3 — Meydan Okumalar + Kod Sıralama (Parsons)
   ============================================================ */

/* Meydan okuma kartları */
.meydan-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-bottom: 22px; }
.meydan-kart {
  background: #fff; border: 3px solid var(--mercan); border-radius: var(--kose);
  padding: 14px 16px; box-shadow: 0 5px 0 #d94b60; display: flex; flex-direction: column; gap: 8px;
}
.meydan-kart.yenildi { border-color: var(--yesil); box-shadow: 0 5px 0 #26985a; }
.meydan-bas { display: flex; align-items: center; gap: 10px; }
.meydan-avatar {
  font-size: 1.7rem; background: var(--zemin); border: 2px solid var(--cizgi);
  border-radius: 14px; width: 48px; height: 48px; display: grid; place-items: center; flex: none;
}
.meydan-bas b { font-family: var(--font-baslik); color: var(--murekkep); }
.meydan-detay { font-weight: 700; color: var(--murekkep-2); font-size: 0.88rem; }
.meydan-mesaj { font-style: italic; font-weight: 700; color: var(--murekkep); background: var(--zemin); border-radius: 10px; padding: 6px 10px; }
.meydan-yenenler { font-weight: 700; font-size: 0.82rem; color: var(--murekkep-2); }
.meydan-alt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.meydan-form {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 3px dashed var(--sari); border-radius: var(--kose);
  padding: 12px 14px; margin-bottom: 14px;
}
.meydan-form input[type="text"] { flex: 1; min-width: 180px; padding: 9px 12px; border: 2px solid var(--cizgi); border-radius: 12px; font: inherit; font-weight: 700; }
.meydan-not { font-size: 0.8rem; font-weight: 700; color: var(--murekkep-2); width: 100%; }

/* Kod Sıralama (Parsons) */
.hedef-cikti-kutu {
  background: var(--murekkep); color: #d7f7c8; border-radius: 12px;
  padding: 10px 14px; margin-bottom: 12px; font-weight: 700;
}
.hedef-cikti-kutu b { color: #ffd166; }
.hedef-cikti-kutu pre { font-family: var(--font-kod); font-size: 0.95rem; margin-top: 4px; white-space: pre-wrap; }
.parsons-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .parsons-izgara { grid-template-columns: 1fr; } }
.parsons-izgara h4 { font-family: var(--font-baslik); color: var(--murekkep-2); margin-bottom: 8px; }
.parsons-havuz, .parsons-cozum {
  min-height: 160px; background: var(--zemin); border: 3px dashed var(--cizgi);
  border-radius: var(--kose); padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.parsons-cozum { border-style: solid; background: #fff; }
.parsons-satir {
  font-family: var(--font-kod); font-size: 0.88rem; font-weight: 700; text-align: left;
  background: #fff; color: var(--murekkep); border: 2px solid var(--cizgi); border-bottom-width: 5px;
  border-radius: 10px; padding: 8px 12px; cursor: pointer; white-space: pre;
  transition: transform 0.1s;
}
.parsons-satir:hover { transform: translateY(-2px); border-color: var(--mavi); }
.parsons-satir.cozumde { background: #eef4ff; border-color: var(--mavi); display: flex; align-items: center; gap: 8px; }
.parsons-no {
  background: var(--mavi); color: #fff; font-family: var(--font-baslik); font-size: 0.75rem;
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none;
}
.parsons-bos { color: var(--murekkep-2); font-weight: 700; text-align: center; padding: 20px 8px; }

/* ============================================================
   v4 — Canlı skor paneli + Bilgi oyunları + Kısayol Ustası
   ============================================================ */

/* Overlay içi skor paneli */
.oyun-orta { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 260px; gap: 12px; align-items: stretch; }
@media (max-width: 860px) { .oyun-orta { grid-template-columns: 1fr; } .oyun-skor { display: none; } }
.oyun-skor {
  background: var(--zemin); border: 3px solid var(--cizgi); border-radius: var(--kose);
  padding: 12px; overflow-y: auto;
}
.oyun-skor h4 { font-family: var(--font-baslik); color: var(--murekkep); margin-bottom: 10px; text-align: center; }
.skor-panel-satir {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 2px solid var(--cizgi); border-radius: 10px;
  padding: 6px 8px; margin-bottom: 6px; font-size: 0.82rem; font-weight: 700;
}
.skor-panel-satir.ben { border-color: var(--sari); background: #fffaf0; }
.skor-panel-satir.ayrik { margin-top: 12px; }
.sp-sira { flex: none; width: 24px; text-align: center; }
.sp-ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-puan { color: var(--mavi); flex: none; }
.skor-panel-bos { font-weight: 700; color: var(--murekkep-2); font-size: 0.82rem; text-align: center; padding: 10px 4px; }

/* Bilgi oyun kartı etiketi */
.etiket.bilgi { background: #fff3d6; border-color: var(--sari); }

/* Hızlı quiz sahnesi */
.quiz-sahne { width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 6px; display: flex; flex-direction: column; gap: 12px; }
.quiz-soru {
  font-family: var(--font-baslik); font-weight: 800; font-size: clamp(1.05rem, 3vw, 1.35rem);
  color: var(--murekkep); text-align: center; background: #fff; border: 3px solid var(--cizgi);
  border-radius: var(--kose); padding: 16px 18px; min-height: 84px; display: grid; place-items: center;
}
.quiz-kod {
  font-family: var(--font-kod); font-size: 0.95rem; background: var(--murekkep); color: #d7f7c8;
  border-radius: 12px; padding: 12px 16px; white-space: pre-wrap;
}
.quiz-geri { min-height: 26px; text-align: center; font-weight: 800; }
.quiz-dogru { color: var(--yesil); }
.quiz-yanlis { color: var(--mercan); }
.df-butonlar { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.df-btn { font-size: 1.1rem; padding: 14px 26px; }
.df-btn small { font-weight: 600; opacity: 0.7; }
.quiz-secenekler { display: flex; flex-direction: column; gap: 10px; }
.quiz-secenek {
  justify-content: flex-start; text-align: left; font-weight: 700; font-size: 0.98rem; padding: 12px 16px;
}
.quiz-secenek.secenek-dogru { background: #eefcf4; border-color: var(--yesil); box-shadow: 0 4px 0 #26985a; }
.quiz-secenek.secenek-yanlis { background: #ffe9ed; border-color: var(--mercan); box-shadow: 0 4px 0 #d94b60; animation: titre 0.3s; }

/* Kısayol Ustası */
.kisayol-sahne { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 10px; }
.kisayol-komut {
  font-family: var(--font-baslik); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2.3rem);
  color: var(--murekkep); background: #fff; border: 3px solid var(--cizgi); border-bottom-width: 8px;
  border-radius: 20px; padding: 22px 34px; min-width: min(420px, 90%); text-align: center;
}
.kisayol-komut.dogru-yanip { animation: ksYanip 0.4s; }
@keyframes ksYanip { 0% { background: #eefcf4; border-color: var(--yesil); } }
.kisayol-ipucu { min-height: 24px; font-weight: 800; color: var(--murekkep-2); }
@keyframes titre { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ============================================================
   v5 — Akış Şeması (Algoritma) modülü
   ============================================================ */

/* Lejant (öğretim bölümü) */
.fc-lejant { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 12px 0; }
.fc-lejant-kart {
  background: var(--zemin); border: 2px solid var(--cizgi); border-radius: var(--kose);
  padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.fc-lejant-kart b { font-family: var(--font-baslik); color: var(--murekkep); }
.fc-lejant-kart small { font-weight: 700; color: var(--murekkep-2); }
.fc-mini { font-size: 0.72rem; min-height: 34px; }

/* Şema alanı */
.fc-sema {
  background: #fff; border: 3px solid var(--cizgi); border-radius: var(--kose);
  padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 180px; overflow-x: auto;
}

/* Düğüm şekilleri */
.fc-dugum {
  display: grid; place-items: center; text-align: center;
  font-weight: 800; font-size: 0.82rem; color: var(--murekkep);
  min-width: 150px; max-width: 230px; min-height: 40px; padding: 8px 14px;
  border: 2.5px solid var(--murekkep); background: #fff; position: relative;
}
.fc-oval { border-radius: 999px; background: #eef4ff; border-color: var(--mavi); }
.fc-kutu { border-radius: 6px; background: #fffaf0; border-color: var(--sari); }
.fc-paralel { transform: skewX(-14deg); background: #eefcf4; border-color: var(--yesil); border-radius: 4px; }
.fc-paralel span, .fc-paralel i { display: block; transform: skewX(14deg); }
.fc-lejant-kart .fc-dugum { min-width: 120px; margin-bottom: 6px; }
.fc-dugum.fc-karar-sekil.fc-karar-sekil {
  --karar-ic: #fff1f3;
  background: var(--mercan) !important; border: none;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  min-width: 190px; min-height: 78px; padding: 16px 34px; font-size: 0.76rem;
}
/* Kenar: dış şekil mercan, içte açık renkli küçük eşkenar dörtgen */
.fc-karar-sekil::before { content: ""; position: absolute; inset: 3px 5px; background: var(--karar-ic); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.fc-karar-sekil > * { position: relative; z-index: 1; }
.fc-bos.fc-karar-sekil.fc-dogru { --karar-ic: #d9f7e6; }
.fc-bos.fc-karar-sekil.fc-yanlis { --karar-ic: #ffdbe1; }

/* Boş / seçili / doğru / yanlış durumları */
.fc-bos { cursor: pointer; border-style: dashed !important; box-shadow: none; }
.fc-bos.fc-karar-sekil { border: none !important; }
.fc-bos span { color: var(--murekkep-2); }
.fc-bos.dolu span { color: var(--murekkep); }
.fc-bos.secili { outline: 3px solid var(--mavi); outline-offset: 3px; animation: opNabiz 1s infinite; }
.fc-bos.fc-dogru { background: #d9f7e6 !important; }
.fc-bos.fc-yanlis { background: #ffdbe1 !important; animation: titre 0.3s; }

/* Oklar ve dallar */
.fc-ok { color: var(--murekkep-2); font-weight: 900; font-size: 0.85rem; line-height: 1.1; text-align: center; padding: 1px 0; }
.fc-ok b { color: var(--mavi); margin-right: 4px; }
.fc-dallar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; align-items: start; margin: 2px 0; }
.fc-kol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fc-kol .fc-ok b { color: var(--yesil); }
.fc-kol:last-child .fc-ok b { color: var(--mercan); }
.fc-devam { font-weight: 800; color: var(--murekkep-2); font-size: 0.8rem; padding: 8px; }
.fc-geri {
  font-weight: 800; font-size: 0.78rem; color: var(--mor);
  background: #f3eeff; border: 2px dashed var(--mor); border-radius: 999px; padding: 5px 12px; margin-top: 2px;
}
.fc-geri small { font-weight: 700; }
.fc-birles { font-weight: 800; font-size: 0.78rem; color: var(--murekkep-2); padding: 2px 0; }

/* Adım kartları havuzu */
.fc-havuz { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; background: var(--zemin); border: 3px dashed var(--cizgi); border-radius: var(--kose); padding: 10px; }
.fc-cip {
  font-weight: 800; font-size: 0.85rem; color: var(--murekkep);
  background: #fff; border: 2px solid var(--cizgi); border-bottom-width: 5px; border-radius: 12px;
  padding: 8px 14px; cursor: pointer; transition: transform 0.1s;
}
.fc-cip:hover { transform: translateY(-2px); border-color: var(--mavi); }

/* Kelime Avcısı — doğru kelime işareti (sayfanın en üstünde) */
.dogru-isaret {
  position: fixed; top: 10px; left: 50%; z-index: 300;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--yesil); color: #fff; box-shadow: 0 4px 0 #26985a;
  display: grid; place-items: center;
  font-family: var(--font-baslik); font-size: 1.5rem; font-weight: 800;
  opacity: 0; transform: translate(-50%, -12px) scale(0.6);
  transition: opacity 0.15s, transform 0.2s; pointer-events: none;
}
.dogru-isaret.goster { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Drone Kodlama — 3B izometrik sahne */

/* ============================================================
   YÖNETİM PANELİ v3 — sekmeler + turnuva kontrol merkezi
   ============================================================ */
:root { --kose: 14px; }
.sekme { padding: 9px 16px; font-size: 0.95rem; gap: 6px; white-space: nowrap; }
.sekme.aktif { background: var(--murekkep); color: #fff; box-shadow: 0 5px 0 #0d1530; }
.sekme.aktif:hover { background: var(--murekkep); }
#adminPanel .bolum-baslik .tus { flex-shrink: 0; }
.tr-kart { padding: 18px; margin-top: 16px; }
.tr-aciklama { color: var(--murekkep-2); font-weight: 700; margin: 6px 0 14px; line-height: 1.55; }
.tr-sablonlar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.tr-sablon-baslik { font-weight: 800; color: var(--murekkep-2); font-size: 0.88rem; }
.tr-sablon, .tr-cipler button {
  font-family: var(--font-baslik); font-weight: 700; font-size: 0.9rem; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--zemin); color: var(--murekkep); border: 2px solid var(--cizgi); transition: background 0.12s, border-color 0.12s;
}
.tr-sablon small { color: var(--murekkep-2); font-weight: 700; }
.tr-sablon:hover, .tr-cipler button:hover { border-color: var(--mavi); }
.tr-sablon.secili, .tr-cipler button.secili { background: #e3eaff; border-color: var(--mavi); color: var(--mavi-koyu); }
.tr-sablon:focus-visible, .tr-cipler button:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
.tr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.tr-form .tr-genis { grid-column: 1 / -1; }
.tr-form select, .tr-form input[type="text"] { width: 100%; padding: 10px 12px; border: 2.5px solid var(--cizgi); border-radius: 12px; font: inherit; font-weight: 700; background: #fff; color: var(--murekkep); }
.tr-form select:focus, .tr-form input:focus { outline: none; border-color: var(--mavi); }
@media (max-width: 700px) { .tr-form { grid-template-columns: 1fr; } }
.tr-cipler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tr-ozel { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--murekkep-2); }
.tr-ozel input { width: 70px; padding: 6px 8px; border: 2px solid var(--cizgi); border-radius: 10px; font-family: var(--font-kod); font-weight: 700; }

.tr-canli { padding: 18px; }
.tr-canli.aktif { border-color: var(--mercan); box-shadow: 0 6px 0 var(--mercan-koyu); background: linear-gradient(180deg, #fff6f7, #fff 40%); }
.tr-bos { font-weight: 800; color: var(--murekkep-2); text-align: center; padding: 16px 8px; font-size: 1.05rem; }
.tr-canli-ust { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.tr-rozet { display: inline-block; font-family: var(--font-baslik); font-weight: 800; font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; background: var(--mercan); color: #fff; animation: yanip 1.4s infinite; }
.tr-rozet.sari { background: var(--sari); color: var(--murekkep); }
.tr-rozet.gri { background: var(--murekkep-2); animation: none; }
.tr-bilgi { color: var(--murekkep-2); font-weight: 700; font-size: 0.92rem; }
.tr-sayac-kap { text-align: center; }
.tr-sayac-etiket { font-weight: 800; color: var(--murekkep-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.tr-sayac { font-family: var(--font-kod); font-size: 2.6rem; font-weight: 700; background: var(--murekkep); color: #ffd166; padding: 2px 18px; border-radius: 14px; min-width: 150px; }
.tr-sayac.son { color: #ff8a9a; animation: yanip 1s infinite; }
.tr-kursu { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 14px; }
.tr-basamak { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 130px; font-weight: 700; text-align: center; }
.tr-basamak .av { font-size: 2rem; }
.tr-basamak span { color: var(--mavi); font-family: var(--font-baslik); font-weight: 800; }
.tr-basamak .blok { width: 100%; display: grid; place-items: center; font-size: 1.6rem; border: 3px solid var(--murekkep); border-radius: 10px 10px 0 0; margin-top: 4px; }
.tr-basamak.b1 { order: 2; } .tr-basamak.b1 .blok { height: 90px; background: #fff3d9; }
.tr-basamak.b2 { order: 1; } .tr-basamak.b2 .blok { height: 64px; background: #eef2f9; }
.tr-basamak.b3 { order: 3; } .tr-basamak.b3 .blok { height: 46px; background: #ffe9dc; }
.tr-gecmis { border: 2px solid var(--cizgi); border-radius: 12px; margin-bottom: 8px; background: #fbfcff; }
.tr-gecmis summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; cursor: pointer; font-weight: 700; }
.tr-gecmis summary .tarih { font-family: var(--font-kod); font-size: 0.82rem; color: var(--murekkep-2); }
.tr-gecmis summary .kazanan { margin-left: auto; font-weight: 800; }
.tr-gecmis summary .kazanan small { color: var(--mavi); }
.tr-gecmis[open] { background: #fff; }
.tr-gecmis[open] > :not(summary) { margin: 0 12px 10px; }
.turnuva-not { font-size: 0.85rem; color: var(--mercan-koyu); }

/* ============================================================
   v8 YENİ OYUNLAR — Sayı Yağmuru, Ok Tuşu Macerası, Kelime Kalesi,
   Tık Tık Ustası, Fare Yolu
   ============================================================ */
.etiket.yeni { background: #e9f9f0; color: var(--yesil-koyu); border-color: var(--yesil); }
@keyframes salla { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* Sayı Yağmuru */
.sayi-damla { width: auto; min-width: 72px; padding: 0 14px; font-size: 1.25rem; white-space: nowrap; background: #e8f4ff; border-color: var(--mavi-koyu); box-shadow: 0 4px 0 var(--mavi-koyu); border-radius: 26px 26px 26px 8px; }
.sayi-girdi {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: var(--murekkep); color: #fff; font-family: var(--font-baslik); font-weight: 700; font-size: 1.1rem;
  padding: 6px 20px; border-radius: 12px; border: 3px solid var(--murekkep); box-shadow: 0 4px 0 #0d1530;
}
.sayi-girdi b { font-family: var(--font-kod); color: #ffd166; font-size: 1.4rem; letter-spacing: 2px; display: inline-block; min-width: 3ch; }
.sayi-girdi.salla { animation: salla 0.35s; background: var(--mercan-koyu); }

/* Ok Tuşu Macerası */
.ok-sahne { position: absolute; inset: 0; display: grid; place-items: center; }
.ok-izgara { position: relative; background: #fffdf5; border: 3px solid var(--murekkep); border-radius: 10px; overflow: hidden; }
.ok-duvar { position: absolute; background: var(--murekkep-2); border-radius: 4px; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25); }
.ok-nesne { position: absolute; display: grid; place-items: center; line-height: 1; }
.ok-robot { transition: left 0.09s linear, top 0.09s linear; z-index: 2; }
.ok-ari { transition: left 0.4s, top 0.4s; }
.ok-robot.salla { animation: salla 0.25s; }

/* Kelime Kalesi */
.kale { position: absolute; left: 0; top: 0; bottom: 0; width: 74px; display: grid; place-items: center; font-size: 3rem; background: repeating-linear-gradient(0deg, #e9dcc4 0 22px, #dccaa9 22px 24px); border-right: 4px solid var(--murekkep-2); z-index: 1; }
.kale.salla { animation: salla 0.35s; background: #ffd7dd; }
.kale-kelime {
  position: absolute; left: 0; font-family: var(--font-kod); font-weight: 700; font-size: 1.15rem; white-space: nowrap;
  background: var(--kart); border: 2.5px solid var(--murekkep); border-radius: 10px; padding: 4px 10px; box-shadow: 0 3px 0 var(--murekkep);
  color: var(--murekkep-2); will-change: transform;
}
.kale-kelime .yazildi { color: var(--yesil-koyu); }
.kale-kelime.kilitli { border-color: var(--sari-koyu); background: #fff8e1; box-shadow: 0 3px 0 var(--sari-koyu); z-index: 2; }
.kale-kelime.patla { background: var(--yesil); color: #fff; border-color: var(--yesil-koyu); opacity: 0; transition: opacity 0.16s, background 0.05s; }

/* Tık Tık Ustası */
.tik-kart {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; user-select: none;
  border: 3px solid var(--murekkep); border-radius: 18px; box-shadow: 0 5px 0 var(--murekkep); font-family: var(--font-baslik); overflow: hidden;
  animation: tikGel 0.18s ease-out;
}
.tik-kart .ikon { font-size: 2.2rem; line-height: 1; pointer-events: none; }
.tik-kart b { font-size: 0.95rem; text-align: center; pointer-events: none; }
.tik-kart.tek  { background: #e3eaff; }
.tik-kart.cift { background: #fff3d9; }
.tik-kart.sag  { background: #ffe6ea; }
.tik-kart .omur { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: var(--murekkep-2); transform-origin: left; animation: tikOmur linear forwards; pointer-events: none; }
.tik-kart.dogru { background: var(--yesil); color: #fff; transform: scale(1.12); transition: transform 0.15s; }
.tik-kart.yanlis { background: var(--mercan); color: #fff; animation: salla 0.35s; }
.tik-kart.kacti { opacity: 0; transform: scale(0.6); transition: all 0.3s; }
@keyframes tikGel { from { transform: scale(0.4); opacity: 0; } }
@keyframes tikOmur { to { transform: scaleX(0); } }

/* Fare Yolu */
.fare-tuval { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
@media (prefers-reduced-motion: reduce) { .tik-kart { animation: none; } }

/* ============================================================
   DRONE KODLAMA (drone.html) — tam ekran: solda koyu kod paneli, sağda 3B sahne
   ============================================================ */
.dl-govde { overflow: hidden; height: 100vh; height: 100dvh; background: #070b14; }
.dl-uygulama {
  --dl-zemin: #070b14; --dl-panel-bg: #0b1120; --dl-kenar: #1c2742; --dl-yazi: #e8ecfb; --dl-soluk: #8d9bc2; --dl-vurgu: #19e3a5;
  display: flex; height: 100%; color: var(--dl-yazi);
}
.dl-panel { position: relative; display: flex; flex-direction: column; flex: 0 0 auto; width: var(--dl-panel, clamp(360px, 36vw, 600px)); min-width: 0; background: var(--dl-panel-bg); border-right: 1px solid var(--dl-kenar); transition: width 0.3s ease, visibility 0.3s; }
.dl-baslik { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--dl-kenar); }
.dl-logo { font-family: var(--font-baslik); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.3px; }
.dl-logo b { color: var(--dl-vurgu); }
.dl-ogrenci { margin-left: auto; font-weight: 700; font-size: 0.85rem; color: var(--dl-soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-kapat { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--dl-kenar); background: #111a2e; color: var(--dl-yazi); text-decoration: none; font-weight: 800; cursor: pointer; flex-shrink: 0; }
.dl-kapat:hover { background: #1a2541; }
.dl-sekmeler { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--dl-kenar); }
.dl-sekmeler button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--dl-soluk); font-family: var(--font-kod); font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; padding: 11px 6px; cursor: pointer; }
.dl-sekmeler button.aktif { color: var(--dl-vurgu); border-bottom-color: var(--dl-vurgu); background: #0e1730; }
.dl-calistir { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid var(--dl-kenar); }
.dl-btn { font-family: var(--font-kod); font-weight: 700; letter-spacing: 1px; border-radius: 8px; padding: 9px 14px; cursor: pointer; border: 1px solid transparent; font-size: 0.9rem; transition: filter 0.12s, transform 0.08s; }
.dl-btn:active { transform: translateY(1px); }
.dl-btn:hover { filter: brightness(1.08); }
.dl-btn:focus-visible, .dl-mini:focus-visible, .dl-cip-btn:focus-visible, .dl-sekmeler button:focus-visible, .dl-asama:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.dl-btn.calistir { flex: 1; background: var(--dl-vurgu); color: #04241a; }
.dl-btn.calistir.durdur { background: #ff5d73; color: #fff; }
.dl-btn.calistir:disabled { opacity: 0.6; cursor: wait; }
.dl-btn.tekrar { background: #2a1418; color: #ff8a8a; border-color: #6b2a33; }
.dl-btn.asamalar { background: #0d2b25; color: var(--dl-vurgu); border-color: #1b7a62; }
.dl-editor-kap { position: relative; flex: 1; min-height: 0; display: flex; }
.dl-blockly { flex: 1; min-height: 0; }
.dl-blockly[hidden], .dl-python[hidden] { display: none; }
.dl-python { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--dl-zemin); }
.dl-python-arac { display: flex; gap: 8px; align-items: flex-start; padding: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--dl-kenar); }
.dl-mini { background: #131c33; color: var(--dl-yazi); border: 1px solid var(--dl-kenar); border-radius: 7px; padding: 4px 10px; font-weight: 700; font-size: 0.8rem; cursor: pointer; font-family: var(--font-govde); }
.dl-mini:hover { background: #1b2746; }
.dl-komutlar { font-size: 0.82rem; font-weight: 700; color: var(--dl-soluk); }
.dl-komutlar summary { cursor: pointer; padding: 4px 2px; }
.dl-komut-tablo { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 6px; }
.dl-komut-tablo code { font-family: var(--font-kod); color: var(--dl-vurgu); }
.dl-kod { flex: 1; min-height: 0; resize: none; border: 0; outline: none; background: var(--dl-zemin); color: #e8ecfb; font-family: var(--font-kod); font-size: 0.98rem; line-height: 1.7; padding: 14px 16px; tab-size: 4; }
.dl-kod:focus { box-shadow: inset 0 0 0 2px #1b7a62; }
.dl-gunluk { max-height: 96px; overflow-y: auto; font-family: var(--font-kod); font-size: 0.78rem; padding: 4px 10px; border-top: 1px solid var(--dl-kenar); background: #080d19; }
.dl-gunluk:empty { display: none; }
.dl-gunluk-satir { padding: 1px 0; color: #b8c4e6; }
.dl-gunluk-satir.hata { color: #ff8a9a; }
.dl-gunluk-satir.basari { color: var(--dl-vurgu); }
.dl-gunluk-satir.cikti { color: #c4a6ff; }
.dl-gunluk-satir .not { color: var(--dl-soluk); font-family: var(--font-govde); font-weight: 700; }
.dl-alt { border-top: 1px solid var(--dl-kenar); }
.dl-hedef-yazi { padding: 8px 12px; font-weight: 800; color: var(--dl-vurgu); font-size: 0.88rem; border-bottom: 1px solid var(--dl-kenar); background: #0a1a1a; }
.dl-alt-satir { display: flex; gap: 16px; align-items: center; padding: 8px 12px; font-family: var(--font-kod); font-size: 0.82rem; color: var(--dl-soluk); }
.dl-alt-satir b { color: var(--dl-yazi); font-size: 1rem; }
.dl-yildizlar { margin-left: auto; color: #ffd166; letter-spacing: 2px; }
.dl-bolucu { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 5; }
.dl-bolucu:hover { background: rgba(25, 227, 165, 0.25); }

/* Blockly koyu tema uyumları */
.dl-blockly .blocklyToolboxDiv { padding-top: 6px; border-right: 1px solid var(--dl-kenar); }
.dl-blockly .blocklyTreeRow { height: 36px; line-height: 36px; margin-bottom: 2px; padding-right: 12px; border-radius: 0 6px 6px 0; }
.dl-blockly .blocklyTreeLabel { font-family: var(--font-baslik); font-weight: 700; font-size: 0.95rem; color: #e8ecfb; }
.dl-blockly .blocklyTreeSelected .blocklyTreeLabel { color: #fff; }
.dl-blockly .blocklyFlyoutLabelText { fill: #cfd8f0; font-family: var(--font-govde); font-weight: 700; }
.blocklyWidgetDiv .blocklyMenu, .blocklyDropDownDiv { font-family: var(--font-govde); }

/* Sahne */
/* Not: genel "main" stili (en fazla 1080px, ortalı) burada iptal edilir — sahne tüm boşluğu kaplar */
main.dl-sahne { position: relative; min-width: 0; width: auto; margin: 0; padding: 0; flex: 1 1 0; overflow: hidden; background: #bfe3ff; }
.dl-sahne > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.dl-sahne.titre { animation: d3Titre 0.45s; }
@keyframes d3Titre { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
.dl-sol-ust { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.dl-durum, .dl-cip { font-family: var(--font-kod); font-size: 0.78rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(11, 17, 32, 0.85); color: #cfd8f0; border: 1px solid #22304f; }
.dl-durum.ucuyor { color: #7cc4ff; } .dl-durum.hata { color: #ff8a9a; } .dl-durum.tamam { color: var(--dl-vurgu); }
.dl-cip { color: #ffd166; }
.dl-gorev-kart { position: absolute; top: 46px; left: 10px; width: min(380px, calc(100% - 250px)); background: rgba(11, 17, 32, 0.9); border: 1px solid #22304f; border-radius: 12px; padding: 10px 14px; z-index: 2; backdrop-filter: blur(4px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.dl-gorev-ust { display: flex; align-items: center; gap: 8px; }
.dl-gorev-ust b { font-family: var(--font-kod); color: #7cc4ff; font-size: 0.9rem; }
.dl-gorev-ust .dl-mini { margin-left: auto; padding: 0 9px; }
#dlGorevHikaye { margin: 6px 0 8px; color: #ffd98a; font-weight: 700; font-size: 0.9rem; line-height: 1.5; }
#dlGorevHikaye b { color: #fff; }
.dl-hedefler { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 0.84rem; color: #d6def5; }
.dl-hedefler .ok { color: var(--dl-vurgu); }
.dl-gorev-arac { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dl-yeni { font-size: 0.78rem; font-weight: 800; color: #c4a6ff; }
.dl-ipucu { margin-top: 8px; font-size: 0.85rem; font-weight: 700; color: #e8ecfb; background: #13213d; border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
.dl-ipucu b { color: var(--dl-vurgu); }
.dl-sag-ust { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 2; }
.dl-telemetri { display: grid; grid-template-columns: auto auto auto; gap: 3px 10px; background: rgba(11, 17, 32, 0.85); border: 1px solid #22304f; border-radius: 10px; padding: 9px 12px; font-family: var(--font-kod); font-size: 0.74rem; min-width: 190px; }
.dl-telemetri span { color: #8d9bc2; letter-spacing: 1px; }
.dl-telemetri b { color: var(--dl-vurgu); text-align: right; }
.dl-telemetri i { color: #5d6b92; font-style: normal; font-size: 0.68rem; }
.dl-turnuva { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 60%; }
.dl-turnuva .turnuva-banner { margin: 0; padding: 6px 12px; font-size: 0.85rem; }
.dl-alt-bar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; background: rgba(11, 17, 32, 0.88); border: 1px solid #22304f; border-radius: 12px; z-index: 2; max-width: calc(100% - 20px); flex-wrap: wrap; justify-content: center; }
.dl-dunya-ad { font-family: var(--font-kod); font-weight: 700; font-size: 0.75rem; color: #cfd8f0; padding: 0 8px; white-space: nowrap; }
.dl-cip-btn { font-family: var(--font-kod); font-weight: 700; font-size: 0.75rem; color: #cfd8f0; background: #111a2e; border: 1px solid #22304f; border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.dl-cip-btn:hover { background: #1a2541; }
.dl-cip-btn.aktif { background: #0d2b25; color: var(--dl-vurgu); border-color: #1b7a62; }
.dl-ayrac { width: 1px; height: 22px; background: #22304f; margin: 0 3px; }
.dl-hiz { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; padding: 0 6px; }
.dl-hiz input { width: 80px; accent-color: var(--dl-vurgu); }
.dl-ipucu-alt { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); font-family: var(--font-kod); font-size: 0.7rem; color: #4a5778; background: rgba(255,255,255,0.6); padding: 3px 10px; border-radius: 6px; pointer-events: none; z-index: 1; }
.dl-ipucu-alt[hidden] { display: none; }
.dl-sonuc { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); max-width: min(680px, calc(100% - 24px)); padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; background: rgba(11,17,32,0.94); color: #e8ecfb; border: 1px solid #22304f; z-index: 3; box-shadow: 0 8px 24px rgba(0,0,0,0.3); line-height: 1.5; }
.dl-sonuc[hidden] { display: none; }
.dl-sonuc.basari { border-color: #1b7a62; color: var(--dl-vurgu); }
.dl-sonuc.hata { border-color: #6b2a33; color: #ffb3bd; }
.dl-sonuc.uyari { border-color: #7a5d1b; color: #ffd98a; }
.dl-sonuc code { font-family: var(--font-kod); background: rgba(255,255,255,0.08); padding: 0 5px; border-radius: 4px; }
.dl-flas { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
.dl-flas.ac { animation: d3Flas 0.5s ease-out; }
@keyframes d3Flas { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.dl-yukleniyor { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-baslik); font-weight: 800; font-size: 1.2rem; color: #e8ecfb; background: #0b1120; z-index: 10; }

/* Pencereler */
.dl-perde { position: fixed; inset: 0; background: rgba(4, 8, 18, 0.72); display: grid; place-items: center; z-index: 50; padding: 16px; }
.dl-perde[hidden] { display: none; }
.dl-pencere { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #0b1120; color: #e8ecfb; border: 1px solid #22304f; border-radius: 16px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.dl-pencere-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dl-pencere-ust h2 { font-family: var(--font-baslik); font-size: 1.4rem; }
.dl-pencere-ust .dl-kapat { margin-left: auto; }
.dl-asama-bilgi { color: #b8c4e6; font-weight: 600; margin-bottom: 12px; line-height: 1.5; }
.dl-asama-bilgi b { color: var(--dl-vurgu); }
.dl-asama-grup { margin-bottom: 14px; }
.dl-asama-grup h3 { font-family: var(--font-baslik); font-size: 1.05rem; margin-bottom: 8px; color: #cfd8f0; }
.dl-asama-izgara { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 720px) { .dl-asama-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dl-asama { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 9px 10px; border-radius: 10px; border: 1px solid #22304f; background: #111a2e; color: #e8ecfb; cursor: pointer; font-family: var(--font-govde); transition: background 0.12s, border-color 0.12s; }
.dl-asama:hover { background: #18233f; border-color: #3a4d7a; }
.dl-asama .no { font-family: var(--font-kod); font-weight: 700; font-size: 0.8rem; color: #8d9bc2; }
.dl-asama .ad { font-weight: 800; font-size: 0.88rem; line-height: 1.2; }
.dl-asama .yildiz { font-size: 0.78rem; color: #ffd166; letter-spacing: 1px; }
.dl-asama.tamam { border-color: #1b7a62; }
.dl-asama.tamam .no { color: var(--dl-vurgu); }
.dl-asama.sirada { border-color: var(--dl-vurgu); box-shadow: 0 0 0 2px rgba(25,227,165,0.25); animation: dlNabiz 1.6s infinite; }
.dl-asama.sirada .yildiz { color: var(--dl-vurgu); }
.dl-asama.kilitli { opacity: 0.55; }
.dl-asama.acik { background: #13213d; outline: 2px solid #3e63dd; }
.dl-asama.serbest { width: 100%; flex-direction: row; align-items: center; gap: 10px; margin-top: 4px; }
@keyframes dlNabiz { 50% { box-shadow: 0 0 0 5px rgba(25,227,165,0.12); } }
.dl-basari { width: min(440px, 100%); text-align: center; }
.dl-basari-yildiz { font-size: 2.6rem; letter-spacing: 6px; }
.dl-basari h2 { font-family: var(--font-baslik); font-size: 1.6rem; margin: 6px 0; color: var(--dl-vurgu); }
.dl-basari p { color: #cfd8f0; font-weight: 600; line-height: 1.6; }
.dl-basari-arac { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.dl-basari-arac .dl-btn.calistir { flex: 0 1 auto; }

/* Dar ekran: sahne üstte, panel altta */
@media (max-width: 900px) {
  .dl-govde { overflow: auto; height: auto; }
  .dl-uygulama { flex-direction: column; height: auto; }
  main.dl-sahne { order: -1; flex: 0 0 48vh; }
  .dl-panel { width: 100%; height: 80vh; border-right: 0; border-top: 1px solid var(--dl-kenar); }
  .dl-bolucu { display: none; }
  .dl-gorev-kart { width: calc(100% - 20px); top: 46px; max-height: calc(100% - 110px); overflow-y: auto; padding: 8px 12px; }
  #dlGorevHikaye { font-size: 0.82rem; }
  .dl-dunya-ad, .dl-hiz, .dl-ayrac, #dlSesBtn { display: none; }
  .dl-alt-bar { flex-wrap: nowrap; bottom: 8px; }
  .dl-sol-ust .dl-cip:last-child { display: none; }
  .dl-btn.asamalar { padding: 6px 10px; font-size: 0.8rem; }
  .dl-telemetri { display: none; }
  .dl-sag-ust { top: 10px; }
  .dl-sonuc { bottom: auto; top: 50px; }
}
@media (prefers-reduced-motion: reduce) { .dl-sahne.titre, .dl-asama.sirada { animation: none; } }
.dl-blockly .dl-calisan > .blocklyPath { stroke: #ffd166 !important; stroke-width: 3px !important; filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.9)) !important; }
.dl-govde .bildirim { top: auto; bottom: 70px; left: auto; right: 16px; transform: translateY(20px); }
.dl-govde .bildirim.goster { transform: none; }
@media (max-width: 900px) { .dl-govde .bildirim { bottom: auto; top: 58px; } }

/* Kod paneli aç/kapat */
.dl-uygulama.panel-kapali .dl-panel { width: 0; overflow: hidden; border: 0; visibility: hidden; }
.dl-panel-ac {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 4; display: none;
  flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 0 12px 12px 0;
  background: rgba(11, 17, 32, 0.92); color: var(--dl-vurgu); border: 1px solid #22304f; border-left: 0; cursor: pointer;
  font-size: 1.3rem; box-shadow: 4px 0 18px rgba(0,0,0,0.25);
}
.dl-panel-ac span { font-family: var(--font-kod); font-weight: 700; font-size: 0.72rem; letter-spacing: 2px; writing-mode: vertical-rl; }
.dl-panel-ac:hover { background: #13213d; }
.dl-panel-ac:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.dl-uygulama.panel-kapali .dl-panel-ac { display: flex; }
.dl-hizli-calistir { display: none; background: #0d2b25; color: var(--dl-vurgu); border-color: #1b7a62; }
.dl-hizli-calistir.durdur { background: #3a1219; color: #ff8a9a; border-color: #6b2a33; }
.dl-uygulama.panel-kapali .dl-hizli-calistir { display: inline-block; }
.dl-uygulama.panel-kapali .dl-gorev-kart { left: 52px; }
.dl-uygulama.panel-kapali .dl-sol-ust { left: 52px; }
@media (max-width: 900px) {
  .dl-uygulama.panel-kapali .dl-panel { display: none; }
  .dl-uygulama.panel-kapali main.dl-sahne { flex-basis: 100dvh; }
}
@media (prefers-reduced-motion: reduce) { .dl-panel { transition: none; } }

/* ============================================================
   v11 — Dosya Gezgini Ustası, Doğru Tuşu Bul, Hikâye Yazıcı
   ============================================================ */
.etiket.beceri { background: #f1eaff; color: var(--mor-koyu); border-color: var(--mor); }

/* Dosya Gezgini */
.dg-sahne { position: absolute; inset: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; user-select: none; }
.dg-gorev { background: #fff8e1; border: 2.5px solid var(--sari); border-radius: 12px; padding: 8px 12px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dg-gorev small { color: var(--murekkep-2); font-weight: 600; }
.dg-gorev .tus { margin-left: auto; }
.dg-gorev-metin { flex: 1; min-width: 200px; }
.dg-adimlar { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 0.88rem; }
.dg-adimlar li { color: var(--murekkep-2); } .dg-adimlar li.simdi { color: var(--mavi-koyu); font-weight: 800; } .dg-adimlar li.tamam { text-decoration: line-through; opacity: 0.7; }
.dg-ipucu { animation: dgIpucu 1.1s ease-in-out infinite; box-shadow: 0 0 0 3px var(--sari); }
@keyframes dgIpucu { 50% { box-shadow: 0 0 0 6px rgba(255,190,40,0.35); background: #fff3c4; } }
.dg-gorev-no { background: var(--murekkep); color: #fff; border-radius: 8px; padding: 1px 8px; font-size: 0.8rem; font-family: var(--font-baslik); }
.dg-pencere { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 2px solid #b8c2d8; border-radius: 10px; box-shadow: 0 6px 18px rgba(29,43,79,0.15); overflow: hidden; }
.dg-baslik { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: #e9eef8; font-weight: 800; font-size: 0.9rem; border-bottom: 1px solid #cfd7e6; }
.dg-noktalar { display: flex; gap: 6px; } .dg-noktalar i { width: 11px; height: 11px; border-radius: 50%; background: #ffbd2e; } .dg-noktalar i:first-child { background: #28c840; } .dg-noktalar i:last-child { background: #ff5f57; }
.dg-yolcubugu { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #e3e8f2; }
.dg-yukari { border: 1px solid #cfd7e6; background: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-weight: 800; }
.dg-yol { flex: 1; background: #f4f7fc; border: 1px solid #e3e8f2; border-radius: 6px; padding: 3px 10px; font-weight: 700; font-size: 0.88rem; color: var(--murekkep-2); }
.dg-govde { flex: 1; min-height: 0; display: flex; }
.dg-yan { width: 160px; flex-shrink: 0; background: #f7f9fd; border-right: 1px solid #e3e8f2; padding: 6px; overflow-y: auto; }
.dg-yan-oge { padding: 6px 8px; border-radius: 6px; font-weight: 700; font-size: 0.88rem; cursor: pointer; white-space: nowrap; }
.dg-yan-oge:hover { background: #e9eef8; }
.dg-yan-oge.aktif { background: #dbe5ff; color: var(--mavi-koyu); }
.dg-alan { flex: 1; min-width: 0; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); align-content: start; gap: 6px; overflow-y: auto; outline: none; }
.dg-oge { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 8px; border: 1.5px solid transparent; cursor: default; text-align: center; }
.dg-oge:hover { background: #f0f4fc; }
.dg-oge.secili { background: #dbe5ff; border-color: #8aa4f0; }
.dg-ikon { font-size: 2rem; line-height: 1; pointer-events: none; }
.dg-ad { font-size: 0.8rem; font-weight: 700; word-break: break-all; pointer-events: none; }
.dg-ad-gir { width: 92px; font: inherit; font-size: 0.8rem; font-weight: 700; border: 2px solid var(--mavi); border-radius: 4px; padding: 1px 3px; text-align: center; }
.dg-bos { grid-column: 1 / -1; color: var(--murekkep-2); font-weight: 700; text-align: center; padding: 30px 0; }
.dg-durum { padding: 4px 12px; font-size: 0.78rem; font-weight: 700; color: var(--murekkep-2); border-top: 1px solid #e3e8f2; background: #f7f9fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-hedef-ust { background: #c9f2dc !important; outline: 2px dashed var(--yesil); }
.dg-hayalet { position: fixed; z-index: 300; pointer-events: none; background: #fff; border: 2px solid var(--mavi); border-radius: 8px; padding: 3px 10px; font-weight: 800; font-size: 0.85rem; box-shadow: 0 6px 14px rgba(0,0,0,0.2); }
.dg-menu { position: absolute; z-index: 20; min-width: 180px; background: #fff; border: 1px solid #cfd7e6; border-radius: 8px; box-shadow: 0 10px 24px rgba(29,43,79,0.22); padding: 4px; }
.dg-menu[hidden], .dg-acildi[hidden] { display: none; }
.dg-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 10px; border-radius: 6px; font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--murekkep); }
.dg-menu button:hover { background: #dbe5ff; }
.dg-menu hr { border: 0; border-top: 1px solid #e3e8f2; margin: 3px 0; }
.dg-acildi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--murekkep); color: #fff; padding: 14px 22px; border-radius: 12px; font-weight: 700; z-index: 15; box-shadow: 0 10px 24px rgba(0,0,0,0.3); }
@media (min-width: 1300px) and (min-height: 760px) {
  .dg-alan { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; padding: 16px; }
  .dg-ikon { font-size: 3rem; } .dg-ad { font-size: 0.95rem; } .dg-yan { width: 200px; } .dg-yan-oge { font-size: 1rem; padding: 9px 10px; }
  .dg-gorev { font-size: 1.1rem; padding: 10px 16px; } .dg-yol, .dg-baslik { font-size: 1rem; }
}
@media (max-width: 620px) { .dg-yan { width: 110px; } .dg-yan-oge { font-size: 0.75rem; } }

/* Doğru Tuşu Bul */
.dt-sahne { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; text-align: center; }
.dt-ust { font-family: var(--font-baslik); font-weight: 800; color: var(--murekkep-2); font-size: 1.1rem; }
.dt-hedef { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dt-hedef span { min-width: 1.3em; font-family: var(--font-kod); font-weight: 700; font-size: clamp(3.5rem, 10vw, 6rem); line-height: 1.1; padding: 6px 18px; background: var(--kart); border: 3px solid var(--murekkep); border-radius: 16px; box-shadow: 0 6px 0 var(--murekkep); }
.dt-hedef.kelime span { font-size: clamp(1.6rem, 4.5vw, 2.6rem); padding: 4px 8px; min-width: 1em; border-width: 2px; box-shadow: 0 4px 0 var(--murekkep); }
.dt-hedef span.ok { background: #c9f2dc; border-color: var(--yesil-koyu); box-shadow: 0 4px 0 var(--yesil-koyu); }
.dt-hedef span.simdi { background: #fff3d9; border-color: var(--sari-koyu); }
.dt-hedef.dogru span { background: var(--yesil); color: #fff; }
.dt-hedef.salla { animation: salla 0.35s; }
.dt-ipucu { min-height: 2.2em; font-weight: 700; font-size: 1.1rem; background: #eef3ff; border-radius: 12px; padding: 6px 16px; }
.dt-ipucu small { color: var(--murekkep-2); }
.dt-klavye-not { font-size: 0.8rem; color: var(--murekkep-2); font-weight: 700; }

/* Hikâye Yazıcı */
.hy-sahne { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; }
.hy-baslik { font-family: var(--font-baslik); font-weight: 800; font-size: 1.15rem; }
.hy-gecmis { flex: 1; min-height: 0; overflow-y: auto; background: #fffdf5; border: 2px solid #eadfc3; border-radius: 12px; padding: 10px 14px; font-size: 1.02rem; line-height: 1.6; color: #5a4a2a; }
.hy-gecmis p { margin: 0 0 4px; }
.hy-gecmis .hy-secildi { color: var(--mor-koyu); font-weight: 700; }
.hy-gecmis .hy-son { color: var(--yesil-koyu); font-weight: 800; }
.hy-simdi { font-family: var(--font-kod); font-size: clamp(1.1rem, 2.4vw, 1.45rem); line-height: 1.6; background: var(--kart); border: 3px solid var(--murekkep); border-radius: 14px; padding: 12px 16px; min-height: 3.4em; }
.hy-simdi .ok { color: var(--yesil-koyu); }
.hy-simdi .simdi { background: #fff3d9; border-bottom: 3px solid var(--sari-koyu); }
.hy-simdi .bekle { color: var(--murekkep-2); opacity: 0.6; }
.hy-simdi.salla, .hy-secim.salla { animation: salla 0.3s; }
.hy-soru { font-family: var(--font-govde); font-weight: 800; color: var(--mor-koyu); }
.hy-secim { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hy-secim[hidden] { display: none; }
.hy-secenek { background: #f1eaff; border: 2.5px solid var(--mor); border-radius: 12px; padding: 8px 16px; font-weight: 700; }
.hy-secenek b { font-family: var(--font-kod); font-size: 1.2rem; }
.hy-secenek .ok { color: var(--yesil-koyu); }
.hy-secenek.eslesiyor { background: #e2d6ff; box-shadow: 0 0 0 3px rgba(139,92,246,0.25); }
.hy-veya { font-weight: 700; color: var(--murekkep-2); }

/* ============================================================
   v13 — Kod Lab laboratuvar galerisi (sitenin keycap tasarımıyla)
   ============================================================ */
.kl-galeri[hidden], .kl-geri[hidden] { display: none; }
.kl-giris { text-align: center; max-width: 720px; margin: 6px auto 30px; }
.kl-ust-etiket { display: inline-block; font-family: var(--font-baslik); font-weight: 800; font-size: 0.85rem; color: var(--murekkep); background: var(--sari); border: 2.5px solid var(--murekkep); box-shadow: 0 3px 0 var(--murekkep); padding: 3px 14px; border-radius: 10px; }
.kl-giris h2 { font-family: var(--font-baslik); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; margin: 16px 0 8px; color: var(--murekkep); }
.kl-giris h2 em { font-style: normal; color: var(--mavi); background: linear-gradient(transparent 62%, rgba(255, 185, 48, 0.55) 62%); padding: 0 4px; }
.kl-giris p { color: var(--murekkep-2); font-size: 1.05rem; font-weight: 600; }
.kl-filtre { display: inline-flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.kl-filtre button { background: #fff; border: 2.5px solid var(--murekkep); box-shadow: 0 4px 0 var(--murekkep); color: var(--murekkep); font-family: var(--font-baslik); font-weight: 800; font-size: 0.95rem; padding: 6px 16px; border-radius: 12px; cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; }
.kl-filtre button:hover { transform: translateY(-1px); }
.kl-filtre button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--murekkep); }
.kl-filtre button.aktif { background: var(--mavi); color: #fff; }

.kl-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 26px; }
.kl-kart {
  --vurgu: var(--mavi); --vurgu-acik: #e6ecff;
  display: flex; flex-direction: column; text-align: left; font: inherit; color: var(--murekkep); text-decoration: none; cursor: pointer; padding: 0;
  background: var(--kart); border: 3px solid var(--murekkep); border-radius: 22px; overflow: hidden;
  box-shadow: 0 8px 0 var(--murekkep); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kl-kart[hidden] { display: none; }
.kl-kart:hover, .kl-kart:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 0 var(--murekkep); outline: none; }
.kl-kart:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--murekkep); }
.kl-vitrin {
  position: relative; padding: 46px 26px 50px; display: flex; justify-content: center; overflow: hidden;
  background-color: var(--vurgu-acik);
  background-image: radial-gradient(color-mix(in srgb, var(--vurgu) 22%, transparent) 1.3px, transparent 1.3px);
  background-size: 18px 18px; border-bottom: 3px solid var(--murekkep);
}
.kl-yas { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--font-baslik); font-weight: 800; font-size: 0.85rem; color: var(--murekkep); background: #fff; border: 2.5px solid var(--murekkep); box-shadow: 0 3px 0 var(--murekkep); padding: 2px 12px; border-radius: 10px; }
.kl-no {
  position: absolute; left: 14px; top: 14px; z-index: 2; font-family: var(--font-baslik); font-weight: 800; font-size: 1.05rem; line-height: 1;
  color: #fff; background: var(--vurgu); border: 2.5px solid var(--murekkep); box-shadow: 0 3px 0 var(--murekkep); border-radius: 10px; padding: 6px 9px;
}
.kl-laptop { position: relative; z-index: 1; width: min(90%, 420px); transition: transform 0.3s ease; }
.kl-kart:hover .kl-laptop { transform: translateY(-3px) rotate(-1deg); }
.kl-ekran { background: #11141c; border: 6px solid var(--murekkep); border-bottom-width: 8px; border-radius: 12px 12px 0 0; aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.kl-ekran img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.kl-taban { height: 12px; margin: 0 -7%; background: #fff; border: 3px solid var(--murekkep); border-radius: 0 0 12px 12px; position: relative; box-shadow: 0 5px 0 rgba(29, 43, 79, 0.18); }
.kl-taban::after { content: ""; position: absolute; top: -3px; left: 50%; width: 18%; height: 5px; transform: translateX(-50%); background: var(--cizgi); border-radius: 0 0 6px 6px; }
.kl-bilgi { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kl-etiket { align-self: flex-start; font-family: var(--font-baslik); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vurgu); background: var(--vurgu-acik); border-radius: 8px; padding: 2px 10px; }
.kl-bilgi h3 { font-family: var(--font-baslik); font-size: 1.7rem; line-height: 1.15; color: var(--murekkep); }
.kl-bilgi p { color: var(--murekkep-2); font-size: 0.98rem; font-weight: 600; line-height: 1.5; flex: 1; }
.kl-ilerleme { position: relative; height: 12px; border-radius: 99px; background: var(--zemin); border: 2px solid var(--murekkep); margin: 4px 54px 2px 0; }
.kl-ilerleme i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--vurgu); }
.kl-ilerleme span { position: absolute; right: -54px; top: 50%; transform: translateY(-50%); font-family: var(--font-baslik); font-size: 0.85rem; font-weight: 800; color: var(--murekkep); width: 46px; text-align: right; }
.kl-alt { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.kl-rozetler { display: flex; gap: 6px; flex-wrap: wrap; }
.kl-rozetler span { background: var(--zemin); border: 2px solid var(--cizgi); color: var(--murekkep-2); font-weight: 800; font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; }
.kl-kesfet { flex: none; font-family: var(--font-baslik); font-weight: 800; color: #fff; background: var(--vurgu); border: 2.5px solid var(--murekkep); box-shadow: 0 4px 0 var(--murekkep); border-radius: 12px; padding: 5px 14px; white-space: nowrap; transition: transform 0.15s; }
.kl-kart:hover .kl-kesfet { transform: translateX(3px); }

.kl-geri { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.kl-geri h2 { font-family: var(--font-baslik); color: var(--murekkep); font-size: 1.6rem; }
body.kl-sayfa main { width: min(1340px, 100% - 32px); }
@media (max-width: 620px) {
  .kl-vitrin { padding: 52px 16px 30px; }
  .kl-bilgi { padding: 18px; }
  .kl-bilgi h3 { font-size: 1.45rem; }
}
@media (max-width: 620px) { #oyunTamEkran { display: none !important; } .oyun-ust { padding: 10px 12px; gap: 8px; } }

/* ============================================================
   v15 — Sınıf sistemi, ödevler, öğretmen karnesi, canlı yarışma
   ============================================================ */
#sinifSecim[hidden], #sinifGiris[hidden] { display: none; }
#sinifSecim + #sinifGiris { margin-top: 8px; }
.konfeti-parca { position: fixed; top: -14px; width: 10px; height: 14px; border-radius: 2px; z-index: 400; pointer-events: none; animation: konfetiDus linear forwards; }
@keyframes konfetiDus { to { top: 105vh; transform: translateX(40px) rotate(720deg); } }

/* Canlı yarışma bildirimi (öğrenci sayfaları) */
.canli-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px;
  background: linear-gradient(100deg, #e6ecff, #efe7ff); border: 3px solid var(--mavi); border-radius: var(--kose);
  box-shadow: 0 5px 0 var(--mavi-koyu); padding: 12px 16px; font-weight: 700; color: var(--murekkep);
}
.canli-banner .yanip { color: var(--mavi-koyu); }
.canli-banner .tus { margin-left: auto; }
.canli-pin { font-family: var(--font-kod); letter-spacing: 0.12em; background: #fff; border-radius: 8px; padding: 1px 8px; border: 2px solid var(--murekkep); }

/* Ödevlerim */
.odev-kutu { background: #fff; border: 3px solid var(--murekkep); border-radius: var(--kose); box-shadow: 0 6px 0 var(--murekkep); padding: 14px 16px; margin-bottom: 20px; }
.odev-kutu h3 { font-family: var(--font-baslik); display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.odev-kutu h3 .etiket { font-size: 0.8rem; background: var(--sari); border: 2px solid var(--murekkep); border-radius: 999px; padding: 0 10px; }
.odev-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
.odev-kart { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2.5px solid var(--cizgi); border-radius: 14px; text-decoration: none; color: var(--murekkep); background: var(--zemin); transition: transform 0.12s, border-color 0.12s; }
.odev-kart:hover { transform: translateY(-2px); border-color: var(--mavi); }
.odev-kart.acil { border-color: var(--mercan); background: #fff4f6; }
.odev-kart.bitti { border-color: var(--yesil); background: #effbf4; opacity: 0.85; }
.odev-kart.gecti { opacity: 0.6; }
.odev-ikon { font-size: 1.8rem; flex: none; }
.odev-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.odev-metin small { color: var(--murekkep-2); font-weight: 700; font-size: 0.8rem; }
.odev-not { font-style: italic; }
.odev-sag { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.odev-sag b { font-family: var(--font-baslik); font-size: 1.2rem; }
.odev-sag small { font-size: 0.75rem; font-weight: 800; color: var(--murekkep-2); white-space: nowrap; }
.odev-cubuk { display: block; height: 7px; border-radius: 99px; background: #fff; border: 1.5px solid var(--cizgi); margin-top: 4px; overflow: hidden; }
.odev-cubuk i { display: block; height: 100%; background: var(--yesil); border-radius: 99px; }

/* ---------- Öğrenci canlı yarışma ekranı ---------- */
.cy-sayfa main.cy-ana { width: min(980px, 100% - 24px); padding: 18px 0 30px; display: flex; flex-direction: column; }
.cy-ekran[hidden] { display: none; }
.cy-giris { text-align: center; background: #fff; border: 3px solid var(--murekkep); border-radius: 24px; box-shadow: 0 8px 0 var(--murekkep); padding: 34px 22px; margin: 24px auto; width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cy-logo { font-size: 3rem; width: 84px; height: 84px; display: grid; place-items: center; background: var(--sari); border: 3px solid var(--murekkep); border-radius: 22px; box-shadow: 0 5px 0 var(--murekkep); }
.cy-giris h1 { font-family: var(--font-baslik); font-size: 1.9rem; }
.cy-pin-giris { width: 100%; text-align: center; font-family: var(--font-kod); font-size: 2.2rem; font-weight: 700; letter-spacing: 0.3em; padding: 12px; border: 3px solid var(--murekkep); border-radius: 16px; }
.cy-pin-giris:focus { outline: 4px solid var(--sari); }
.cy-buyuk-tus { width: 100%; justify-content: center; font-size: 1.3rem; }
.cy-hata { color: var(--mercan-koyu); font-weight: 800; min-height: 1.2em; }
.cy-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 800; margin-bottom: 12px; }
.cy-ust-ad { font-family: var(--font-baslik); font-size: 1.1rem; }
.cy-ben { background: #fff; border: 2px solid var(--murekkep); border-radius: 999px; padding: 2px 12px; }
.cy-orta { text-align: center; background: #fff; border: 3px solid var(--murekkep); border-radius: 24px; box-shadow: 0 8px 0 var(--murekkep); padding: 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cy-orta h2 { font-family: var(--font-baslik); font-size: 2rem; }
.cy-orta p { color: var(--murekkep-2); font-weight: 700; max-width: 520px; }
.cy-kucuk { font-size: 0.9rem; }
.cy-avatar-buyuk { font-size: 4.5rem; animation: cyZipla 1.4s ease-in-out infinite; }
@keyframes cyZipla { 50% { transform: translateY(-10px); } }
.cy-bekle { display: flex; gap: 8px; justify-content: center; margin: 6px 0; }
.cy-bekle i { width: 14px; height: 14px; border-radius: 50%; background: var(--mavi); animation: cyNokta 1.2s infinite; }
.cy-bekle i:nth-child(2) { animation-delay: 0.2s; background: var(--sari); } .cy-bekle i:nth-child(3) { animation-delay: 0.4s; background: var(--mercan); }
@keyframes cyNokta { 50% { transform: scale(0.4); opacity: 0.4; } }
.cy-sure { height: 12px; background: #fff; border: 2.5px solid var(--murekkep); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.cy-sure i { display: block; height: 100%; background: linear-gradient(90deg, var(--yesil), var(--sari)); transition: width 0.2s linear; }
.cy-sure-yazi { text-align: center; font-family: var(--font-baslik); font-weight: 800; font-size: 1.15rem; margin-top: 12px; color: var(--murekkep-2); }
.cy-soru-kap { background: #fff; border: 3px solid var(--murekkep); border-radius: 20px; padding: 18px 20px; margin-bottom: 14px; text-align: center; }
.cy-soru-metin { font-family: var(--font-baslik); font-weight: 800; font-size: clamp(1.25rem, 3.4vw, 1.8rem); line-height: 1.25; }
.cy-kod, .cs-kod { text-align: left; background: #1d2b4f; color: #e8eeff; font-family: var(--font-kod); font-size: 1rem; padding: 12px 16px; border-radius: 12px; margin: 12px auto 0; overflow-x: auto; width: fit-content; max-width: 100%; white-space: pre; }
.cy-siklar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cy-sik { display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 14px 16px; border: 3px solid var(--murekkep); border-radius: 18px; box-shadow: 0 6px 0 var(--murekkep); font: inherit; font-weight: 800; font-size: clamp(1rem, 2.6vw, 1.3rem); color: #fff; text-align: left; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s; }
.cy-sik:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--murekkep); }
.cy-sik:disabled { cursor: default; }
.cy-sik.cy-soluk { opacity: 0.3; }
.cy-sik.cy-secildi { outline: 5px solid var(--sari); outline-offset: 3px; }
.cy-harf { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.95); color: var(--murekkep); font-family: var(--font-baslik); font-size: 1.4rem; border: 2.5px solid var(--murekkep); }
.cy-sik-metin { flex: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
.cy-renk-0 { background: var(--mavi); } .cy-renk-1 { background: var(--mercan); } .cy-renk-2 { background: var(--sari-koyu); } .cy-renk-3 { background: var(--yesil); }
.cy-renk-yazi-0 { color: var(--mavi-koyu); } .cy-renk-yazi-1 { color: var(--mercan-koyu); } .cy-renk-yazi-2 { color: var(--sari-koyu); } .cy-renk-yazi-3 { color: var(--yesil-koyu); }
.cy-sik-kucuk { color: #fff; font-family: var(--font-baslik); font-weight: 800; font-size: 2rem; padding: 6px 22px; border-radius: 16px; border: 3px solid var(--murekkep); }
.cy-sonuc.dogru { background: linear-gradient(180deg, #e2f8ec, #fff 60%); border-color: var(--yesil-koyu); box-shadow: 0 8px 0 var(--yesil-koyu); }
.cy-sonuc.yanlis { background: linear-gradient(180deg, #ffe6ea, #fff 60%); border-color: var(--mercan-koyu); box-shadow: 0 8px 0 var(--mercan-koyu); }
.cy-sonuc-ikon { font-size: 4.2rem; animation: cyBuyu 0.4s ease-out; }
@keyframes cyBuyu { from { transform: scale(0.3); opacity: 0; } }
.cy-kazanc { font-family: var(--font-baslik); font-weight: 800; font-size: 2.4rem; color: var(--yesil-koyu); }
.cy-seri { font-weight: 800; color: var(--mercan-koyu); }
.cy-puan-kutu { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cy-puan-kutu span { background: var(--zemin); border: 2px solid var(--cizgi); border-radius: 12px; padding: 6px 14px; font-weight: 700; }
.cy-puan-kutu b { font-family: var(--font-baslik); font-size: 1.2rem; color: var(--mavi-koyu); }
.cy-ilk { list-style: none; width: min(380px, 100%); display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.cy-ilk li { display: flex; gap: 8px; align-items: center; background: var(--zemin); border-radius: 10px; padding: 6px 12px; font-weight: 700; }
.cy-ilk li b { margin-left: auto; }
@media (max-width: 560px) { .cy-siklar { grid-template-columns: 1fr; } .cy-sik { min-height: 70px; } }

/* ---------- Öğretmen sunum ekranı (tahta) ---------- */
body.cs-sayfa { display: flex; flex-direction: column; min-height: 100vh; }
.cs-ust { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: #fff; border-bottom: 3px solid var(--murekkep); }
.cs-baslik { font-family: var(--font-baslik); font-weight: 800; font-size: 1.3rem; }
.cs-ilerleme { font-weight: 800; background: var(--sari); border: 2px solid var(--murekkep); border-radius: 999px; padding: 2px 14px; }
.cs-araclar { margin-left: auto; display: flex; gap: 8px; }
.cs-sahne { flex: 1; display: flex; flex-direction: column; padding: 22px clamp(14px, 3vw, 44px); min-height: 0; }
.cs-merkez { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cs-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: #fff; border-top: 3px solid var(--murekkep); }
.cs-ana-tus { font-size: 1.25rem; }
.cs-ipucu { margin-left: auto; color: var(--murekkep-2); font-weight: 700; font-size: 0.9rem; }
.cs-lobi { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cs-katil-kutu { text-align: center; background: #fff; border: 3px solid var(--murekkep); border-radius: 26px; box-shadow: 0 8px 0 var(--murekkep); padding: 22px 40px; }
.cs-katil-adim { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; margin: 4px 0; }
.cs-katil-adim b { color: var(--mavi-koyu); }
.cs-soluk { color: var(--murekkep-2); font-size: 1rem !important; }
.cs-pin { font-family: var(--font-kod); font-weight: 700; font-size: clamp(3.5rem, 10vw, 7.5rem); letter-spacing: 0.08em; line-height: 1.05; color: var(--murekkep); background: var(--sari); border: 4px solid var(--murekkep); border-radius: 22px; padding: 4px 26px; margin: 8px 0; display: inline-block; }
.cs-oyuncu-baslik { font-family: var(--font-baslik); font-size: 1.5rem; }
.cs-oyuncu-baslik b { color: var(--mavi); font-size: 2rem; }
.cs-oyuncular { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1200px; }
.cs-oyuncu { background: #fff; border: 2.5px solid var(--murekkep); border-radius: 999px; padding: 6px 16px; font-weight: 800; font-size: 1.15rem; box-shadow: 0 3px 0 var(--murekkep); animation: cyBuyu 0.35s ease-out; }
.cs-soru-duzen { flex: 1; display: grid; grid-template-columns: 130px 1fr 130px; gap: 20px; align-items: center; }
.cs-soru { background: #fff; border: 3px solid var(--murekkep); border-radius: 24px; box-shadow: 0 8px 0 var(--murekkep); padding: 22px 28px; text-align: center; margin-bottom: 22px; }
.cs-soru-metin { font-family: var(--font-baslik); font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
.cs-kod { font-size: clamp(1rem, 1.7vw, 1.5rem); }
.cs-siklar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-sik { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 3px solid var(--murekkep); border-radius: 20px; box-shadow: 0 6px 0 var(--murekkep); color: #fff; font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.9rem); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
.cs-sik .cy-harf { width: 54px; height: 54px; font-size: 1.7rem; text-shadow: none; }
.cs-sayac { position: relative; width: 120px; height: 120px; }
.cs-sayac svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cs-sayac circle { fill: #fff; stroke-width: 9; }
.cs-sayac-iz { stroke: var(--cizgi); }
.cs-sayac-dolu { fill: none !important; stroke: var(--mavi); stroke-linecap: round; stroke-dasharray: 276.5; transition: stroke-dashoffset 0.1s linear; }
.cs-sayac b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-baslik); font-size: 2.8rem; }
.cs-sayac.az .cs-sayac-dolu { stroke: var(--mercan); } .cs-sayac.az b { color: var(--mercan-koyu); animation: yanip 0.5s infinite; }
.cs-cevap-sayi { text-align: center; background: #fff; border: 3px solid var(--murekkep); border-radius: 20px; padding: 14px 8px; box-shadow: 0 5px 0 var(--murekkep); }
.cs-cevap-sayi b { display: block; font-family: var(--font-baslik); font-size: 2rem; color: var(--mavi-koyu); }
.cs-cevap-sayi small { font-weight: 800; color: var(--murekkep-2); }
.cs-sonuc-duzen { flex: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 26px; align-items: start; }
.cs-sonuc-sol .cs-soru { padding: 16px 22px; margin-bottom: 18px; }
.cs-sonuc-sol .cs-soru-metin { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.cs-grafik { display: flex; gap: 16px; align-items: flex-end; height: min(38vh, 340px); background: #fff; border: 3px solid var(--murekkep); border-radius: 22px; padding: 18px 18px 10px; }
.cs-cubuk-kap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; gap: 6px; }
.cs-cubuk-kap.yanlis { opacity: 0.45; }
.cs-cubuk { border: 3px solid var(--murekkep); border-radius: 12px 12px 4px 4px; animation: csCubuk 0.7s ease-out; transform-origin: bottom; }
@keyframes csCubuk { from { transform: scaleY(0); } }
.cs-cubuk-sayi { font-family: var(--font-baslik); font-weight: 800; font-size: 1.8rem; }
.cs-cubuk-etiket { font-weight: 800; font-size: clamp(0.8rem, 1.2vw, 1.05rem); min-height: 2.5em; }
.cs-cubuk-kap.dogru .cs-cubuk-etiket { color: var(--yesil-koyu); }
.cs-ozet { margin-top: 14px; font-weight: 800; font-size: 1.2rem; text-align: center; }
.cs-sonuc-sag h3 { font-family: var(--font-baslik); font-size: 1.6rem; margin-bottom: 10px; }
.cs-sira { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cs-sira li { display: flex; align-items: center; gap: 12px; background: #fff; border: 3px solid var(--murekkep); border-radius: 16px; padding: 10px 14px; font-weight: 800; font-size: 1.25rem; box-shadow: 0 4px 0 var(--murekkep); animation: csKay 0.45s ease-out both; }
.cs-sira li:first-child { background: #fff6dd; }
@keyframes csKay { from { transform: translateX(40px); opacity: 0; } }
.cs-sira-no { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--murekkep); color: #fff; font-family: var(--font-baslik); }
.cs-sira-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-sira b { font-family: var(--font-baslik); color: var(--mavi-koyu); }
.cs-yukari { color: var(--yesil-koyu); font-size: 0.95rem; }
.cs-bitti { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cs-bitti h2 { font-family: var(--font-baslik); font-size: clamp(2rem, 4vw, 3.2rem); }
.cs-kursu { display: flex; align-items: flex-end; gap: 18px; margin-top: 10px; }
.cs-kursu-yer { display: flex; flex-direction: column; align-items: center; gap: 4px; width: clamp(150px, 18vw, 240px); animation: csYuksel 0.8s ease-out both; }
.cs-kursu-yer.ikinci { animation-delay: 0.4s; } .cs-kursu-yer.birinci { animation-delay: 1s; } .cs-kursu-yer.ucuncu { animation-delay: 0s; }
@keyframes csYuksel { from { transform: translateY(60px); opacity: 0; } }
.cs-kursu-avatar { font-size: 3.4rem; }
.cs-kursu-ad { font-family: var(--font-baslik); font-weight: 800; font-size: 1.5rem; text-align: center; }
.cs-kursu-puan { font-weight: 800; color: var(--mavi-koyu); font-size: 1.2rem; }
.cs-kursu-blok { width: 100%; display: grid; place-items: center; font-family: var(--font-baslik); font-weight: 800; font-size: 3rem; color: #fff; border: 3px solid var(--murekkep); border-radius: 16px 16px 0 0; }
.birinci .cs-kursu-blok { height: 200px; background: var(--sari-koyu); } .ikinci .cs-kursu-blok { height: 145px; background: #9aa6c4; } .ucuncu .cs-kursu-blok { height: 105px; background: #d08a52; }
.cs-kursu-yer.bos { opacity: 0.35; }
.cs-tum { background: #fff; border: 3px solid var(--murekkep); border-radius: 18px; padding: 10px 18px; width: min(560px, 100%); font-weight: 700; }
.cs-tum summary { cursor: pointer; font-weight: 800; }
.cs-tum ol { margin: 8px 0 0 22px; max-height: 30vh; overflow-y: auto; }
@media (max-width: 900px) { .cs-soru-duzen { grid-template-columns: 1fr; } .cs-sonuc-duzen { grid-template-columns: 1fr; } .cs-sol-bilgi, .cs-sag-bilgi { display: flex; justify-content: center; } }

/* ---------- Öğretmen paneli: sınıflar, karne, ödev, canlı ---------- */
.ogr-duzen { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .ogr-duzen { grid-template-columns: 1fr; } }
.ogr-siniflar h3 { margin-bottom: 10px; }
.ogr-sinif-ekle { display: flex; gap: 6px; margin-bottom: 10px; }
.ogr-sinif-ekle input { flex: 1; min-width: 0; padding: 8px 10px; border: 2.5px solid var(--cizgi); border-radius: 10px; font: inherit; font-weight: 700; }
.ogr-sinif-liste { display: flex; flex-direction: column; gap: 6px; }
.ogr-sinif-satir { display: flex; gap: 4px; align-items: center; }
.ogr-sinif { flex: 1; display: flex; justify-content: space-between; align-items: center; background: var(--zemin); border: 2.5px solid transparent; border-radius: 10px; padding: 7px 10px; font: inherit; font-weight: 800; cursor: pointer; color: var(--murekkep); }
.ogr-sinif:hover { border-color: var(--cizgi); }
.ogr-sinif.secili { background: var(--mavi); color: #fff; border-color: var(--murekkep); }
.ogr-sinif small { background: rgba(255, 255, 255, 0.8); color: var(--murekkep); border-radius: 99px; padding: 0 8px; font-size: 0.78rem; }
.ogr-sil { background: none; border: 0; color: var(--mercan-koyu); font-weight: 900; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.ogr-sil:hover { background: #ffe3e8; }
.ogr-etiket { font-size: 0.68rem; font-weight: 800; color: var(--murekkep-2); background: #fff3d6; border-radius: 6px; padding: 1px 5px; }
.ogr-ipucu { color: var(--murekkep-2); font-weight: 600; font-size: 0.88rem; margin: 8px 0; }
.ogr-karne-ust h3 { margin: 0; }
.ogr-lab-sekme { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.ogr-lab-sekme button { background: #fff; border: 2.5px solid var(--murekkep); border-radius: 12px; padding: 6px 12px; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--murekkep); color: var(--murekkep); }
.ogr-lab-sekme button.secili { background: var(--mavi); color: #fff; }
.ogr-lab-sekme small { opacity: 0.8; }
.ogr-zor { background: #fff8e6; border: 2.5px solid var(--sari); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; }
.ogr-zor h4 { margin-bottom: 6px; } .ogr-zor h4 small { font-weight: 600; color: var(--murekkep-2); }
.ogr-zor-satir { padding: 4px 0; font-weight: 600; }
.ogr-zor-satir small { display: block; color: var(--murekkep-2); }
.ogr-zor-satir.soluk { color: var(--murekkep-2); }
.ogr-tablo-kart { padding: 10px; }
.ogr-tablo-kap { overflow: auto; max-height: 62vh; }
.ogr-tablo { border-collapse: separate; border-spacing: 0; font-size: 0.85rem; min-width: 100%; }
.ogr-tablo th, .ogr-tablo td { padding: 6px 7px; text-align: center; border-bottom: 1px solid var(--cizgi); white-space: nowrap; background: #fff; }
.ogr-tablo thead th { position: sticky; top: 0; z-index: 2; background: var(--zemin); color: var(--murekkep); font-family: var(--font-baslik); text-transform: none; letter-spacing: 0; }
.ogr-tablo thead tr.ogr-yuzde th { top: 31px; font-size: 0.72rem; color: var(--murekkep); background: color-mix(in srgb, var(--yesil) calc(var(--y, 0) * 0.6%), #fff); }
.ogr-tablo .ogr-yapis { position: sticky; left: 0; z-index: 1; text-align: left; border-right: 2px solid var(--cizgi); }
.ogr-tablo thead .ogr-yapis { z-index: 3; }
.ogr-tablo td.h-tamam { background: #dff6e8; color: var(--yesil-koyu); cursor: pointer; font-size: 0.7rem; letter-spacing: -1px; }
.ogr-tablo td.h-takildi { background: #ffe9cc; color: #b36200; font-weight: 800; cursor: pointer; }
.ogr-tablo td.h-bos { color: #b8c2d8; }
.ogr-tablo td[data-g]:hover { outline: 2px solid var(--mavi); outline-offset: -2px; }
.ogr-lejant { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; font-weight: 700; color: var(--murekkep-2); padding: 8px 4px 0; }
.ogr-lejant i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; }
.ogr-lejant .h-tamam { background: #dff6e8; border: 1px solid var(--yesil); } .ogr-lejant .h-takildi { background: #ffe9cc; border: 1px solid #f0a64a; } .ogr-lejant .h-bos { background: #fff; border: 1px solid var(--cizgi); }
.ogr-perde { position: fixed; inset: 0; z-index: 150; background: rgba(29, 43, 79, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ogr-modal { position: relative; background: #fff; border: 3px solid var(--murekkep); border-radius: 20px; box-shadow: 0 10px 0 var(--murekkep); width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 22px; }
.ogr-modal.genis { width: min(900px, 100%); }
.ogr-modal h3 { font-family: var(--font-baslik); margin: 0 30px 10px 0; }
.ogr-modal h4 { margin: 14px 0 6px; }
.ogr-kapat { position: absolute; top: 12px; right: 12px; background: var(--zemin); border: 2px solid var(--murekkep); border-radius: 10px; width: 34px; height: 34px; font-weight: 900; cursor: pointer; }
.ogr-kod-bilgi { display: flex; gap: 8px; flex-wrap: wrap; }
.ogr-rozet { background: var(--zemin); border: 2px solid var(--cizgi); border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 0.85rem; }
.ogr-rozet.yesil { background: #dff6e8; border-color: var(--yesil); } .ogr-rozet.turuncu { background: #ffe9cc; border-color: #f0a64a; }
.ogr-hata { color: var(--mercan-koyu); font-weight: 700; margin-top: 8px; }
.ogr-kod { background: #1d2b4f; color: #e8eeff; font-family: var(--font-kod); font-size: 0.92rem; padding: 14px; border-radius: 12px; overflow: auto; max-height: 50vh; white-space: pre; }
.ogr-modal-alt { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.ogr-perde.tahta { padding: 0; }
.ogr-perde.tahta .ogr-modal { width: 100%; height: 100%; max-height: none; border-radius: 0; font-size: 1.3rem; }
.ogr-perde.tahta .ogr-kod { font-size: clamp(1.2rem, 2.2vw, 2rem); max-height: none; }
.ogr-gorev-sec-ust { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.ogr-gorev-sec { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; padding: 4px; margin-bottom: 10px; }
.ogr-gorev-cip { display: flex; gap: 6px; align-items: center; background: var(--zemin); border-radius: 10px; padding: 6px 10px; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.ogr-gorev-cip:has(input:checked) { background: #e6ecff; outline: 2px solid var(--mavi); }
#odevLabAlan .alan, #odevOyunAlan .alan { max-width: 360px; }
#odevLabAlan select, #odevTarih, #odevAciklama, #odevHedef, #odevBaslik { width: 100%; padding: 10px 12px; border: 2.5px solid var(--cizgi); border-radius: 12px; font: inherit; font-weight: 700; background: #fff; color: var(--murekkep); }
.ogr-odev { border: 2.5px solid var(--cizgi); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; background: #fff; }
.ogr-odev[open] { border-color: var(--mavi); }
.ogr-odev summary { display: flex; align-items: center; gap: 14px; cursor: pointer; flex-wrap: wrap; list-style: none; }
.ogr-odev summary::-webkit-details-marker { display: none; }
.ogr-odev-ust { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.ogr-odev-ust small { color: var(--murekkep-2); font-weight: 700; }
.ogr-odev-ilerleme { width: 170px; display: flex; flex-direction: column; gap: 2px; }
.ogr-odev-ilerleme small { font-weight: 700; color: var(--murekkep-2); }
.ogr-odev-tarih { font-weight: 800; font-size: 0.85rem; white-space: nowrap; }
.ogr-odev-tarih.gecti { color: var(--mercan-koyu); }
.ogr-odev-ogrenciler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ogr-odev-ogrenciler span { background: var(--zemin); border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 0.85rem; }
.ogr-odev-ogrenciler span.bitti { background: #dff6e8; } .ogr-odev-ogrenciler span.yarim { background: #fff3d6; }
.ogr-odev-ogrenciler small { color: var(--murekkep-2); }
.cy-set-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cy-set { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: #fff; border: 2.5px solid var(--cizgi); border-radius: 14px; padding: 10px 12px; font: inherit; cursor: pointer; color: var(--murekkep); }
.cy-set:hover { border-color: var(--murekkep-2); }
.cy-set.secili { border-color: var(--murekkep); background: #e6ecff; box-shadow: 0 4px 0 var(--murekkep); }
.cy-set-ikon { font-size: 1.6rem; }
.cy-set small { color: var(--murekkep-2); font-weight: 700; }
.ogr-onay { display: flex; gap: 8px; align-items: center; font-weight: 700; margin: 6px 0 12px; }
.ogr-set-satir { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.ogr-set-satir > span { flex: 1; }
.ogr-set-satir small { color: var(--murekkep-2); font-weight: 700; }
.ogr-kopyala { display: flex; flex-wrap: wrap; gap: 6px; }
.ogr-aktif-canli .tus { margin-left: 0; }
.ogr-gecmis-sira { margin: 10px 0 0 24px; font-weight: 600; }
.se-sorular { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.se-soru { border: 2.5px solid var(--cizgi); border-radius: 14px; padding: 10px; background: var(--zemin); }
.se-soru-ust { display: flex; gap: 8px; align-items: flex-start; }
.se-soru textarea, .se-soru select, .se-sik input[type=text] { font: inherit; font-weight: 700; border: 2px solid var(--cizgi); border-radius: 10px; padding: 7px 9px; background: #fff; color: var(--murekkep); }
.se-soru-ust textarea { flex: 1; resize: vertical; }
.se-kod { width: 100%; margin-top: 6px; font-family: var(--font-kod) !important; font-size: 0.85rem !important; resize: vertical; }
.se-siklar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.se-sik { display: flex; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 10px; }
.se-sik input[type=text] { flex: 1; min-width: 0; }
.se-sik input[type=radio] { width: 20px; height: 20px; accent-color: #fff; }
@media (max-width: 600px) { .se-siklar { grid-template-columns: 1fr; } }
.sinif-degis { font: inherit; font-weight: 700; padding: 3px 6px; border: 2px solid var(--cizgi); border-radius: 8px; background: #fff; }
.ogr-modal .tr-form input, #canliAd { width: 100%; padding: 10px 12px; border: 2.5px solid var(--cizgi); border-radius: 12px; font: inherit; font-weight: 700; background: #fff; color: var(--murekkep); }

/* ============================================================
   v16 — Kelime Düellosu (1v1)
   ============================================================ */
.duello-tanitim { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--murekkep); margin: 4px 0 26px; padding: 16px 20px; border: 3px solid var(--murekkep); border-radius: 20px; box-shadow: 0 7px 0 var(--murekkep); background: linear-gradient(100deg, #ffe7eb 0%, #fff3d6 55%, #e6ecff 100%); transition: transform 0.15s, box-shadow 0.15s; }
.duello-tanitim:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--murekkep); }
.dt-ikon { font-size: 2.8rem; animation: duSalla 2.4s ease-in-out infinite; }
@keyframes duSalla { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(12deg); } }
.dt-metin { flex: 1; display: flex; flex-direction: column; }
.dt-metin b { font-family: var(--font-baslik); font-size: 1.45rem; }
.dt-metin small { font-weight: 700; color: var(--murekkep-2); font-size: 0.98rem; }
.dt-yeni { font-size: 0.75rem; background: var(--mercan); color: #fff; border-radius: 8px; padding: 1px 8px; vertical-align: 3px; }
@media (max-width: 620px) { .duello-tanitim { flex-wrap: wrap; } .duello-tanitim .tus { width: 100%; justify-content: center; } }

body.du-sayfa main { width: min(1240px, 100% - 28px); }
.du-giris { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.du-giris-ikon { font-size: 3rem; width: 86px; height: 86px; flex: none; display: grid; place-items: center; background: var(--mercan); border: 3px solid var(--murekkep); border-radius: 24px; box-shadow: 0 6px 0 var(--murekkep); }
.du-giris h1 { font-family: var(--font-baslik); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.du-giris p { color: var(--murekkep-2); font-weight: 700; max-width: 680px; }
.du-lobi-duzen { display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
@media (max-width: 1050px) { .du-lobi-duzen { grid-template-columns: 1fr 1fr; } .du-sampiyon { grid-column: 1 / -1; } }
@media (max-width: 700px) { .du-lobi-duzen { grid-template-columns: 1fr; } }
.du-kucuk { color: var(--murekkep-2); font-weight: 700; font-size: 0.9rem; }
.du-seviye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.du-seviye button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; background: #fff; border: 2.5px solid var(--cizgi); border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; color: var(--murekkep); }
.du-seviye button small { font-size: 0.68rem; color: var(--murekkep-2); font-weight: 700; }
.du-seviye button.secili { border-color: var(--murekkep); background: #fff3d6; box-shadow: 0 3px 0 var(--murekkep); }
.du-onay { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 12px; }
.du-buyuk { width: 100%; justify-content: center; font-size: 1.2rem; }
.du-istatistik { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.du-istatistik span { background: var(--zemin); border-radius: 10px; padding: 4px 10px; font-weight: 700; font-size: 0.85rem; }
.du-nasil { margin-top: 12px; font-weight: 700; }
.du-nasil summary { cursor: pointer; }
.du-nasil ul { margin: 8px 0 0 18px; color: var(--murekkep-2); font-size: 0.9rem; display: flex; flex-direction: column; gap: 4px; }
.du-oyuncular h3, .du-sampiyon h3 { display: flex; align-items: center; gap: 8px; }
.du-sayi { background: var(--yesil); color: #fff; border-radius: 999px; padding: 0 10px; font-size: 0.85rem; }
.du-filtre { margin-left: auto; display: flex; gap: 4px; }
.du-filtre button { background: var(--zemin); border: 2px solid transparent; border-radius: 8px; padding: 2px 10px; font: inherit; font-weight: 800; font-size: 0.8rem; cursor: pointer; color: var(--murekkep-2); }
.du-filtre button.secili { border-color: var(--murekkep); background: #fff; color: var(--murekkep); }
.du-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 520px; overflow-y: auto; }
.du-oyuncu { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2.5px solid var(--cizgi); border-radius: 14px; background: #fff; animation: cyBuyu 0.3s ease-out; }
.du-avatar { font-size: 1.8rem; position: relative; }
.du-avatar::after { content: ""; position: absolute; right: -2px; bottom: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--yesil); border: 2px solid #fff; }
.du-ad { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.du-ad small { color: var(--murekkep-2); font-weight: 700; }
.du-durum.oyunda { font-weight: 800; font-size: 0.8rem; color: var(--mercan-koyu); background: #ffe7eb; border-radius: 999px; padding: 3px 10px; }
.du-tablo { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.du-tablo li { display: flex; align-items: center; gap: 6px; background: var(--zemin); border-radius: 10px; padding: 6px 10px; font-weight: 700; font-size: 0.9rem; }
.du-tablo li.ben { outline: 2px solid var(--sari); background: #fff8e6; }
.du-tablo li small { color: var(--murekkep-2); }
.du-tablo li b { margin-left: auto; }
.du-tablo li.bos { color: var(--murekkep-2); justify-content: center; }

.du-modal-perde { position: fixed; inset: 0; z-index: 160; background: rgba(29, 43, 79, 0.6); display: grid; place-items: center; padding: 16px; }
.du-modal-perde[hidden] { display: none; }
.du-modal { background: #fff; border: 3px solid var(--murekkep); border-radius: 24px; box-shadow: 0 10px 0 var(--murekkep); padding: 26px 30px; width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: cyBuyu 0.3s ease-out; }
.du-modal h2 { font-family: var(--font-baslik); font-size: 1.6rem; }
.du-modal p { font-weight: 700; color: var(--murekkep-2); }
.du-modal-ikon { font-size: 3.4rem; animation: duSalla 1.2s ease-in-out infinite; }
.du-don { animation: duDon 1s linear infinite; } @keyframes duDon { to { transform: rotate(360deg); } }
.du-modal-tuslar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.du-geri-cubuk { width: 100%; height: 6px; background: var(--zemin); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.du-geri-cubuk i { display: block; height: 100%; background: var(--mercan); animation: duAzal 30s linear forwards; }
@keyframes duAzal { from { width: 100%; } to { width: 0; } }

/* Arena */
.du-arena { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: linear-gradient(180deg, #bfe3ff 0%, #e6f4ff 55%, #cfeec0 55.2%, #b6e3a2 100%); }
.du-arena[hidden] { display: none; }
.du-arena.vuruldu { animation: duSars 0.35s; }
@keyframes duSars { 20% { transform: translate(-8px, 3px); } 40% { transform: translate(7px, -4px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(3px, -1px); } }
.du-arena-ust { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: rgba(255, 255, 255, 0.9); border-bottom: 3px solid var(--murekkep); }
.du-arena-baslik { font-family: var(--font-baslik); font-weight: 800; font-size: 1.2rem; flex: 1; text-align: center; }
.du-arena-baslik small { font-size: 0.85rem; color: var(--murekkep-2); }
.du-sure { font-family: var(--font-kod); font-weight: 700; font-size: 1.5rem; background: var(--murekkep); color: #fff; border-radius: 12px; padding: 2px 14px; min-width: 92px; text-align: center; }
.du-sure.az { background: var(--mercan); animation: yanip 0.6s infinite; }
.du-savas { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: end; padding: 10px clamp(12px, 4vw, 70px) 0; min-height: 0; overflow: hidden; }
.du-taraf { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 8px; }
.du-isim { font-family: var(--font-baslik); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.5rem); background: #fff; border: 3px solid var(--murekkep); border-radius: 14px; padding: 2px 14px; box-shadow: 0 4px 0 var(--murekkep); }
.du-isim small { font-size: 0.8rem; color: var(--murekkep-2); }
.du-can { position: relative; width: min(320px, 90%); height: 26px; background: #fff; border: 3px solid var(--murekkep); border-radius: 99px; overflow: hidden; }
.du-can i { position: absolute; inset: 0 auto 0 0; background: var(--yesil); transition: width 0.4s ease, background 0.3s; }
.du-can i.orta { background: var(--sari-koyu); } .du-can i.az { background: var(--mercan); animation: yanip 0.8s infinite; }
.du-can span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-baslik); font-weight: 800; color: var(--murekkep); }
.du-taraf.rakip .du-can i { inset: 0 0 0 auto; }
.du-kale { position: relative; height: clamp(120px, 26vh, 240px); display: flex; align-items: flex-end; justify-content: center; }
.du-kale-gorsel { font-size: clamp(100px, 22vh, 210px); line-height: 1; filter: drop-shadow(0 8px 0 rgba(29, 43, 79, 0.25)); transition: transform 0.4s, filter 0.4s; }
.du-taraf.rakip .du-kale-gorsel { transform: scaleX(-1); }
.du-kale.sars .du-kale-gorsel { animation: duKaleSars 0.35s; }
@keyframes duKaleSars { 30% { translate: -6px 0; rotate: -3deg; } 60% { translate: 6px 0; rotate: 3deg; } }
.du-kale.yikildi .du-kale-gorsel { filter: grayscale(1) brightness(0.6) drop-shadow(0 8px 0 rgba(0, 0, 0, 0.25)); transform: translateY(30%) rotate(8deg) scale(0.85); }
.du-sayac { font-weight: 800; background: rgba(255, 255, 255, 0.85); border-radius: 10px; padding: 2px 12px; }
.du-sayac b { font-family: var(--font-baslik); font-size: 1.3rem; color: var(--mavi-koyu); }
.du-orta-alan { align-self: center; display: grid; place-items: center; }
.du-vs { font-family: var(--font-baslik); font-weight: 800; font-size: 2.6rem; color: #fff; background: var(--mercan); border: 3px solid var(--murekkep); border-radius: 50%; width: 92px; height: 92px; display: grid; place-items: center; box-shadow: 0 6px 0 var(--murekkep); transform: rotate(-8deg); }
.du-bomba { position: absolute; left: 0; top: 0; font-size: 2.6rem; margin: -1.3rem 0 0 -1.3rem; pointer-events: none; z-index: 5; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3)); }
.du-bomba.super { filter: drop-shadow(0 0 10px #ff5d73); }
.du-patlama { position: absolute; left: 0; top: 0; font-size: 4rem; margin: -2rem 0 0 -2rem; pointer-events: none; z-index: 6; animation: duPatla 0.6s ease-out forwards; }
.du-patlama.super { font-size: 7rem; margin: -3.5rem 0 0 -3.5rem; }
@keyframes duPatla { from { scale: 0.3; opacity: 1; } to { scale: 1.6; opacity: 0; } }
.du-yuzen { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); font-family: var(--font-baslik); font-weight: 800; font-size: 2rem; color: var(--mercan-koyu); -webkit-text-stroke: 1px #fff; animation: duYuz 1.1s ease-out forwards; pointer-events: none; z-index: 7; white-space: nowrap; }
.du-yuzen.super { font-size: 3rem; color: #c3002a; } .du-yuzen.tamir { color: var(--yesil-koyu); }
@keyframes duYuz { to { top: -20%; opacity: 0; } }
.du-yazi-alan { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px 22px; background: rgba(255, 255, 255, 0.92); border-top: 3px solid var(--murekkep); }
.du-rozet { font-weight: 800; font-size: 0.9rem; background: var(--zemin); border: 2px solid var(--cizgi); border-radius: 999px; padding: 2px 12px; }
.du-rozet.super { background: #ffe7eb; border-color: var(--mercan); color: var(--mercan-koyu); animation: yanip 0.9s infinite; }
.du-rozet.tamir { background: #dff6e8; border-color: var(--yesil); color: var(--yesil-koyu); }
.du-kelime { font-family: var(--font-kod); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: 0.06em; color: var(--murekkep-2); }
.du-kelime span.dogru { color: var(--yesil-koyu); }
.du-kelime span.yanlis { color: #fff; background: var(--mercan); border-radius: 6px; }
.du-kelime span.imlec { border-bottom: 5px solid var(--mavi); }
.du-kelime.hata { animation: titre 0.25s; }
.du-siradaki { display: flex; gap: 12px; color: var(--murekkep-2); font-weight: 800; font-family: var(--font-kod); opacity: 0.75; }
.du-siradaki .super { color: var(--mercan-koyu); } .du-siradaki .tamir { color: var(--yesil-koyu); }
.du-giris-kutu { width: min(460px, 100%); text-align: center; font-family: var(--font-kod); font-weight: 700; font-size: 1.6rem; padding: 10px 14px; border: 3px solid var(--murekkep); border-radius: 16px; box-shadow: 0 5px 0 var(--murekkep); }
.du-giris-kutu:focus { outline: 4px solid var(--sari); }
.du-perde { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(29, 43, 79, 0.55); padding: 16px; }
.du-perde[hidden] { display: none; }
.du-geri-kap { text-align: center; color: #fff; }
.du-geri-vs { font-size: 3.4rem; } .du-geri-vs span { font-family: var(--font-baslik); font-size: 1.6rem; vertical-align: middle; margin: 0 10px; }
.du-geri { font-family: var(--font-baslik); font-weight: 800; font-size: 9rem; line-height: 1; color: #fff; text-shadow: 0 8px 0 var(--murekkep); animation: cyBuyu 0.4s ease-out; }
.du-geri.basla { font-size: 6rem; color: var(--sari); }
.du-geri-kap p { font-weight: 800; font-size: 1.3rem; }
.du-son { background: #fff; border: 3px solid var(--murekkep); border-radius: 26px; box-shadow: 0 10px 0 var(--murekkep); padding: 26px 34px; text-align: center; width: min(480px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; animation: cyBuyu 0.35s ease-out; }
.du-son.kazandi { background: linear-gradient(180deg, #fff3d6, #fff 60%); }
.du-son.kaybetti { background: linear-gradient(180deg, #ffe7eb, #fff 60%); }
.du-son-ikon { font-size: 4.4rem; }
.du-son h2 { font-family: var(--font-baslik); font-size: 2.4rem; }
.du-son p { font-weight: 700; color: var(--murekkep-2); }
.du-son-tablo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 6px 0; }
.du-son-tablo div { display: flex; flex-direction: column; background: var(--zemin); border-radius: 14px; padding: 10px; font-weight: 700; }
.du-son-tablo b { font-family: var(--font-baslik); }
@media (max-width: 700px) { .du-savas { grid-template-columns: 1fr 50px 1fr; padding: 6px 8px 0; } .du-vs { width: 50px; height: 50px; font-size: 1.3rem; } .du-isim { font-size: 0.95rem; } }
.du-liste { align-items: stretch; } .du-oyuncu { width: 100%; }
.du-savas { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }
.du-kale-gorsel { font-size: min(22vh, 15vw, 210px); }
.du-kale { height: min(26vh, 18vw, 240px); min-height: 70px; }
@media (max-width: 700px) {
  .du-savas { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); }
  .du-kale-gorsel { font-size: min(20vh, 30vw); } .du-kale { height: min(22vh, 34vw); }
  .du-isim { font-size: 0.85rem; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .du-can { width: 100%; } .du-arena-baslik { font-size: 0.95rem; }
}

/* ============================================================
   v17 — Düello Arenası: oyun seçimi, Balon Kapışması, Robot Sumo
   ============================================================ */
.du-oyun-sec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.du-arena-etiket { font-family: var(--font-baslik); font-weight: 800; color: var(--murekkep-2); margin-right: 4px; }
.du-oyun-sec button { background: #fff; border: 3px solid var(--murekkep); border-radius: 14px; box-shadow: 0 4px 0 var(--murekkep); padding: 8px 16px; font: inherit; font-family: var(--font-baslik); font-weight: 800; font-size: 1.05rem; cursor: pointer; color: var(--murekkep); transition: transform 0.1s; }
.du-oyun-sec button small { font-size: 0.7rem; background: var(--mor); color: #fff; border-radius: 6px; padding: 0 6px; vertical-align: 2px; }
.du-oyun-sec button:hover { transform: translateY(-2px); }
.du-oyun-sec button.secili { background: var(--murekkep); color: #fff; }
.du-giris-ikon.mavi { background: var(--mavi); } .du-giris-ikon.mor { background: var(--mor); } .du-giris-ikon.mercan { background: var(--mercan); }
.du-davet-oyun { background: var(--zemin); border-radius: 10px; padding: 4px 12px; color: var(--murekkep) !important; }

/* Balon Kapışması */
.bk-arena { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: #fff; }
.bk-arena.bk-sars { animation: duSars 0.35s; }
.bk-govde { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 270px; min-height: 0; }
.bk-alan { position: relative; overflow: hidden; background: linear-gradient(180deg, #8fd0ff 0%, #c9ebff 60%, #e9f8ff 100%); cursor: crosshair; touch-action: none; }
.bk-alan::before { content: "☁️      ☁️          ☁️"; position: absolute; top: 8%; left: 5%; font-size: 3.2rem; opacity: 0.7; white-space: pre; pointer-events: none; }
.bk-arena.bk-hizli .bk-alan { background: linear-gradient(180deg, #b7f0f5 0%, #d8f7fa 100%); box-shadow: inset 0 0 0 6px #14b8c4; }
.bk-balon { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: pointer; will-change: transform; touch-action: none; }
.bk-govdesi { position: absolute; inset: 0 0 18% 0; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.75) 0 10%, transparent 11%), var(--renk); box-shadow: inset -6px -8px 0 rgba(0,0,0,0.15); display: grid; place-items: center; font-size: 1.6rem; border: 2.5px solid rgba(29,43,79,0.55); }
.bk-ip { position: absolute; left: 50%; bottom: 0; width: 2px; height: 20%; background: rgba(29,43,79,0.5); }
.bk-bomba .bk-govdesi { border-color: #ff5d73; box-shadow: inset -6px -8px 0 rgba(0,0,0,0.35), 0 0 0 3px rgba(255,93,115,0.35); }
.bk-altin .bk-govdesi { box-shadow: inset -6px -8px 0 rgba(0,0,0,0.12), 0 0 18px #ffd96a; }
.bk-simsek .bk-govdesi { box-shadow: inset -6px -8px 0 rgba(0,0,0,0.12), 0 0 16px #6ff1fb; }
.bk-balon.bk-kaybol { transition: opacity 0.4s; opacity: 0; }
.bk-patla { position: absolute; pointer-events: none; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; animation: bkPatla 0.7s ease-out forwards; z-index: 4; }
.bk-patla span { font-size: 2.6rem; } .bk-patla b { font-family: var(--font-baslik); font-size: 1.6rem; color: var(--yesil-koyu); -webkit-text-stroke: 1px #fff; }
.bk-patla.bomba b { color: var(--mercan-koyu); } .bk-patla.bomba span { font-size: 4rem; }
@keyframes bkPatla { from { scale: 0.5; opacity: 1; } to { scale: 1.3; opacity: 0; translate: 0 -30px; } }
.bk-sis { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.5s; background: radial-gradient(circle at 25% 35%, rgba(255,255,255,0.95) 0 13%, transparent 21%), radial-gradient(circle at 68% 58%, rgba(244,247,252,0.95) 0 15%, transparent 23%), radial-gradient(circle at 40% 80%, rgba(255,255,255,0.92) 0 11%, transparent 19%); background-size: 100% 100%; }
.bk-arena.bk-sisli .bk-sis { opacity: 1; animation: bkSis 2.6s ease-in-out; }
@keyframes bkSis { from { background-position: -80px 0; } to { background-position: 80px -30px; } }
.bk-uyari { position: absolute; top: 14px; left: 50%; transform: translate(-50%, -20px); z-index: 5; font-family: var(--font-baslik); font-weight: 800; font-size: 1.2rem; background: #fff; border: 3px solid var(--murekkep); border-radius: 14px; padding: 4px 16px; opacity: 0; transition: all 0.25s; pointer-events: none; }
.bk-uyari.goster { opacity: 1; transform: translate(-50%, 0); }
.bk-uyari.iyi { background: #dff6e8; } .bk-uyari.kotu { background: #ffe3e8; }
.bk-yan { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--zemin); border-left: 3px solid var(--murekkep); overflow-y: auto; }
.bk-oyuncu { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; background: #fff; border: 3px solid var(--murekkep); border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 0 var(--murekkep); }
.bk-oyuncu > span { font-size: 2rem; grid-row: 1 / 3; }
.bk-oyuncu small { color: var(--murekkep-2); font-weight: 700; }
.bk-oyuncu.ben { border-color: var(--mavi-koyu); } .bk-oyuncu.rakip { border-color: var(--mercan-koyu); }
.bk-puan { grid-column: 1 / -1; font-family: var(--font-baslik); font-weight: 800; font-size: 2.2rem; text-align: center; color: var(--murekkep); }
.bk-halat { position: relative; height: 22px; border-radius: 99px; background: var(--mercan); border: 3px solid var(--murekkep); overflow: hidden; }
.bk-halat i { position: absolute; inset: 0 auto 0 0; background: var(--mavi); transition: width 0.4s; }
.bk-halat span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.9rem; }
.bk-lejant { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 0.85rem; color: var(--murekkep-2); margin-top: auto; }
.bk-lejant span { display: flex; align-items: center; gap: 8px; }
.bk-mini { width: 22px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 0.75rem; flex: none; }
@media (max-width: 760px) { .bk-govde { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .bk-yan { order: -1; flex-direction: row; flex-wrap: wrap; border-left: 0; border-bottom: 3px solid var(--murekkep); padding: 8px; gap: 8px; } .bk-oyuncu { flex: 1; padding: 6px 8px; } .bk-oyuncu > span { font-size: 1.4rem; } .bk-puan { font-size: 1.5rem; } .bk-halat { order: 3; flex-basis: 100%; height: 14px; } .bk-lejant { display: none; } }

/* Robot Sumo */
.sm-arena { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: #0b1020; }
.sm-arena .du-arena-ust { background: #fff; }
.sm-rakip-durum { font-weight: 800; background: var(--zemin); border-radius: 999px; padding: 3px 12px; font-size: 0.9rem; }
.sm-kod-ekran { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; }
.sm-kod-ekran[hidden], .sm-mac-ekran[hidden] { display: none; }
.sm-blockly { position: relative; min-height: 0; }
.sm-yukleniyor { color: #cfd8f0; font-weight: 800; display: grid; place-items: center; height: 100%; }
.sm-yan { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; border-left: 3px solid var(--murekkep); overflow-y: auto; }
.sm-yan-baslik { font-family: var(--font-baslik); font-weight: 800; font-size: 1.1rem; }
.sm-yan-baslik small { font-family: var(--font-govde); font-size: 0.8rem; color: var(--mavi-koyu); }
.sm-tuval { width: 100%; aspect-ratio: 1; border-radius: 16px; border: 3px solid var(--murekkep); display: block; background: #e9e1cf; }
.sm-tuval.kucuk { max-height: 300px; width: auto; max-width: 100%; align-self: center; }
.sm-dene-ayar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sm-dene-ayar select { font: inherit; font-weight: 700; padding: 6px 8px; border: 2px solid var(--cizgi); border-radius: 10px; }
.sm-dene-sonuc { font-weight: 700; background: var(--zemin); border-radius: 12px; padding: 8px 10px; min-height: 2.6em; font-size: 0.92rem; }
.sm-ipucu { font-size: 0.85rem; font-weight: 600; color: var(--murekkep-2); }
.sm-hazir { font-size: 1.2rem; justify-content: center; margin-top: auto; }
.sm-hazir-not { color: var(--murekkep-2); font-weight: 700; text-align: center; }
.sm-mac-ekran { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 10px; gap: 8px; }
.sm-mac-ust { display: flex; align-items: center; gap: 18px; color: #fff; font-family: var(--font-baslik); font-weight: 800; font-size: 1.2rem; flex-wrap: wrap; justify-content: center; }
.sm-oyuncu { display: flex; align-items: center; gap: 8px; }
.sm-oyuncu i { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #fff; }
.sm-oyuncu.a i { background: #3e63dd; } .sm-oyuncu.b i { background: #ff5d73; }
.sm-skor { font-size: 2rem; background: #fff; color: var(--murekkep); border-radius: 14px; padding: 0 18px; border: 3px solid var(--sari); }
.sm-mac-tuval-kap { position: relative; flex: 1; min-height: 0; aspect-ratio: 1; max-width: 100%; }
.sm-mac-tuval-kap .sm-tuval { width: 100%; height: 100%; aspect-ratio: auto; }
.sm-raunt-yazi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6); opacity: 0; transition: all 0.25s; background: #fff; border: 4px solid var(--murekkep); border-radius: 20px; padding: 14px 28px; text-align: center; box-shadow: 0 8px 0 var(--murekkep); pointer-events: none; display: flex; flex-direction: column; }
.sm-raunt-yazi.goster { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sm-raunt-yazi b { font-family: var(--font-baslik); font-size: 2.2rem; } .sm-raunt-yazi span { font-weight: 800; color: var(--murekkep-2); }
.sm-raunt-yazi.iyi { background: #dff6e8; } .sm-raunt-yazi.kotu { background: #ffe3e8; }
.sm-mac-alt { display: flex; gap: 10px; align-items: center; color: #cfd8f0; font-weight: 800; }
.sm-kod-goster { text-align: left; width: 100%; max-height: 40vh; overflow-y: auto; }
.sm-kod-goster h3, .sm-kod-goster h4 { font-family: var(--font-baslik); margin: 6px 0; font-size: 1rem; }
.sm-kod-goster pre { background: #1d2b4f; color: #e8eeff; font-family: var(--font-kod); font-size: 0.82rem; padding: 10px 12px; border-radius: 10px; white-space: pre-wrap; }
@media (max-width: 860px) { .sm-kod-ekran { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) auto; } .sm-yan { border-left: 0; border-top: 3px solid var(--murekkep); max-height: 45vh; } .sm-rakip-durum { display: none; } }

/* v18 — Oyunlar galerisi */
.og-galeri { margin-top: 8px; }
.og-rekor { font-weight: 700; font-size: 0.88rem; color: var(--murekkep-2); background: var(--zemin); border-radius: 10px; padding: 5px 10px; align-self: flex-start; }
.og-rekor.var { background: var(--vurgu-acik); color: var(--murekkep); }
.og-rekor b { font-family: var(--font-baslik); color: var(--vurgu); font-size: 1.05rem; }
.og-rekor small { color: var(--murekkep-2); }
.og-galeri .kl-ekran img { object-position: center top; }
.og-meydan { margin-top: 34px; }

/* ============================================================
   v19 — DEVRE LAB (Arduino uyumlu 3B simülatör)
   ============================================================ */
body.dv-govde { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #0b1020; background-image: none; }
.dv-uygulama { display: flex; height: 100%; }
.dv-panel { width: 440px; flex: none; display: flex; flex-direction: column; background: #0d1322; color: #e8ecfb; border-right: 2px solid #1d2742; min-height: 0; transition: width 0.25s, margin 0.25s; overflow: hidden; }
.dv-uygulama.panel-kapali .dv-panel { width: 0; border: 0; }
.dv-baslik { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #1d2742; }
.dv-logo { font-family: var(--font-baslik); font-weight: 800; font-size: 1.2rem; white-space: nowrap; }
.dv-logo b { color: #19c3a6; } .dv-logo small { font-size: 0.7rem; background: #19c3a6; color: #052a24; border-radius: 6px; padding: 1px 6px; vertical-align: 3px; }
.dv-ogrenci { margin-left: auto; font-weight: 700; font-size: 0.85rem; color: #aab4d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-ikon-tus { background: #18213a; color: #e8ecfb; border: 1px solid #2a3a66; border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; text-decoration: none; font-weight: 800; flex: none; }
.dv-sekmeler { display: flex; gap: 4px; padding: 8px 10px 0; }
.dv-sekmeler button { flex: 1; background: none; border: 0; border-bottom: 3px solid transparent; color: #94a0c6; font: inherit; font-weight: 800; padding: 8px 4px; cursor: pointer; }
.dv-sekmeler button.aktif { color: #fff; border-bottom-color: #19c3a6; }
.dv-sekme { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; }
.dv-sekme[hidden] { display: none; }
.dv-gorev { background: #141c30; border: 1px solid #24304f; border-radius: 12px; padding: 10px 12px; font-size: 0.9rem; line-height: 1.45; }
.dv-gorev-baslik { font-family: var(--font-baslik); font-weight: 800; font-size: 1.15rem; margin-bottom: 4px; }
.dv-gorev p { margin: 4px 0; color: #cfd8f0; } .dv-gorev b { color: #fff; }
.dv-ogret { font-size: 0.82rem; color: #9fb0d8 !important; }
.dv-gorev code, .dv-mesaj code { font-family: var(--font-kod); background: #0b1020; color: #7ee0c8; border-radius: 5px; padding: 0 4px; font-size: 0.82rem; }
.dv-rozet { font-family: var(--font-govde); font-size: 0.72rem; background: #19c3a6; color: #052a24; border-radius: 999px; padding: 1px 8px; vertical-align: 3px; }
.dv-editor { flex: 1; min-height: 220px; display: flex; background: #070b14; border: 1px solid #24304f; border-radius: 12px; overflow: hidden; font-family: var(--font-kod); font-size: 13.5px; line-height: 1.55; }
.dv-satirlar { flex: none; width: 38px; padding: 10px 0; text-align: right; color: #4a5680; background: #0a0f1c; overflow: hidden; user-select: none; }
.dv-satirlar span { display: block; padding-right: 8px; } .dv-satirlar span.hata { background: #ff5d73; color: #fff; }
.dv-kod-kap { position: relative; flex: 1; min-width: 0; }
.dv-kod-kap textarea, .dv-renkli { position: absolute; inset: 0; margin: 0; padding: 10px 12px; border: 0; font: inherit; line-height: inherit; white-space: pre; overflow: auto; tab-size: 2; box-sizing: border-box; }
.dv-kod-kap textarea { background: transparent; color: transparent; caret-color: #fff; resize: none; outline: none; z-index: 1; }
.dv-kod-kap textarea::selection { background: rgba(25,195,166,0.35); color: transparent; }
.dv-renkli { color: #e8ecfb; pointer-events: none; scrollbar-width: none; }
.dv-renkli::-webkit-scrollbar { display: none; }
.r-anahtar { color: #c792ea; } .r-fonk { color: #7ee0c8; } .r-sabit { color: #ffcb6b; } .r-sayi { color: #f78c6c; } .r-yorum { color: #5f6b92; font-style: italic; } .r-metin { color: #c3e88d; } .r-on { color: #ff79c6; }
.dv-mesaj { border-radius: 10px; padding: 8px 12px; font-size: 0.88rem; font-weight: 700; line-height: 1.45; }
.dv-mesaj.hata { background: #3a1420; color: #ffc2cc; border: 1px solid #ff5d73; }
.dv-mesaj.uyari { background: #3a2c10; color: #ffe2a6; border: 1px solid #ffb930; }
.dv-mesaj.basari { background: #0f3326; color: #b9f5d8; border: 1px solid #2fbf71; }
.dv-mesaj.bilgi, .dv-mesaj.ipucu { background: #13213d; color: #cfe0ff; border: 1px solid #3e63dd; }
.dv-komut-liste { margin: 6px 0 0 16px; display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.dv-tuslar { display: flex; gap: 6px; flex-wrap: wrap; }
.dv-tuslar.ince { margin-top: -2px; }
.dv-tus { flex: 1; background: #18213a; color: #e8ecfb; border: 1px solid #2a3a66; border-radius: 10px; padding: 9px 10px; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.dv-tus:hover:not(:disabled) { filter: brightness(1.2); }
.dv-tus:disabled { opacity: 0.45; cursor: default; }
.dv-tus.yesil { background: #19c3a6; color: #052a24; border-color: #19c3a6; }
.dv-tus.mavi { background: #3e63dd; border-color: #3e63dd; }
.dv-tus.kucuk { font-size: 0.8rem; padding: 6px 8px; }
.dv-tus[hidden] { display: none; }
.dv-ilerleme { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.85rem; color: #aab4d4; }
.dv-ilerleme-cubuk { flex: 1; height: 10px; background: #18213a; border-radius: 99px; overflow: hidden; }
.dv-ilerleme-cubuk i { display: block; height: 100%; background: #19c3a6; }
.dv-deney-liste { display: flex; flex-direction: column; gap: 6px; }
.dv-deney { display: flex; align-items: center; gap: 10px; background: #141c30; border: 1px solid #24304f; border-radius: 12px; padding: 8px 10px; color: #e8ecfb; font: inherit; text-align: left; cursor: pointer; }
.dv-deney:hover { border-color: #3a4c80; }
.dv-deney.secili { border-color: #19c3a6; background: #10263a; }
.dv-deney-no { width: 28px; height: 28px; flex: none; border-radius: 8px; background: #24304f; display: grid; place-items: center; font-weight: 800; }
.dv-deney.bitti .dv-deney-no { background: #19c3a6; color: #052a24; }
.dv-deney-ad { display: flex; flex-direction: column; font-weight: 800; }
.dv-deney-ad small { color: #6f7ca6; font-size: 0.72rem; letter-spacing: 2px; }
.dv-not { color: #aab4d4; font-size: 0.88rem; font-weight: 600; }
.dv-baglanti { display: flex; flex-direction: column; gap: 6px; }
.dv-parca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #141c30; border: 1px solid #24304f; border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 0.9rem; }
.dv-parca-ad { flex: 1; min-width: 140px; }
.dv-parca select { background: #0b1020; color: #e8ecfb; border: 1px solid #2a3a66; border-radius: 6px; padding: 3px 4px; font: inherit; font-weight: 700; }
.dv-parca select:disabled { opacity: 1; color: #7ee0c8; border-color: transparent; -webkit-appearance: none; appearance: none; }
.dv-renk { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; border: 1px solid #fff; }
.dv-sil { background: none; border: 0; color: #ff8a9b; font-weight: 900; cursor: pointer; }
.dv-ekle { background: #10263a; border: 1px dashed #19c3a6; border-radius: 12px; padding: 10px; }
.dv-ekle[hidden] { display: none; }
.dv-ekle-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.dv-ekle-izgara button { background: #18213a; color: #e8ecfb; border: 1px solid #2a3a66; border-radius: 8px; padding: 7px; font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.dv-panel-ac { position: absolute; left: 10px; top: 60px; z-index: 5; background: #0d1322; color: #fff; border: 1px solid #2a3a66; border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 800; cursor: pointer; }
.dv-panel-ac[hidden] { display: none; }
.dv-sahne { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #eef1f6; }
.dv-sahne canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.dv-ust-bilgi { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 10px; pointer-events: none; z-index: 3; }
.dv-ust-bilgi > * { pointer-events: auto; }
.dv-durum { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px solid var(--murekkep); border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 0.85rem; color: var(--murekkep); }
.dv-durum i { width: 9px; height: 9px; border-radius: 50%; background: #9aa3b8; }
.dv-durum.calisiyor i { background: #19c3a6; animation: yanip 1s infinite; } .dv-durum.yukle i { background: #ffb930; animation: yanip 0.3s infinite; } .dv-durum.hata i { background: #ff5d73; }
.dv-sahne-baslik { font-family: var(--font-baslik); font-weight: 800; font-size: 1.1rem; color: var(--murekkep); background: rgba(255,255,255,0.85); border-radius: 12px; padding: 2px 12px; }
.dv-kamera { margin-left: auto; display: flex; gap: 6px; }
.dv-kamera button { width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 2px solid var(--murekkep); box-shadow: 0 3px 0 var(--murekkep); cursor: pointer; font-size: 1rem; }
.dv-ipucu-yazi { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); background: rgba(29,43,79,0.75); color: #fff; font-weight: 700; font-size: 0.82rem; border-radius: 999px; padding: 4px 14px; pointer-events: none; transition: opacity 0.6s; z-index: 2; white-space: nowrap; }
.dv-ipucu-yazi.gizle { opacity: 0; }
.dv-kontroller { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 3; max-width: calc(100% - 24px); }
.dv-kontrol-buton { background: #fff; border: 3px solid var(--murekkep); border-radius: 14px; box-shadow: 0 5px 0 var(--murekkep); padding: 10px 16px; font: inherit; font-weight: 800; cursor: pointer; user-select: none; touch-action: none; align-self: flex-start; }
.dv-kontrol-buton.basili { transform: translateY(4px); box-shadow: 0 1px 0 var(--murekkep); background: #ffe3e8; }
.dv-kaydirici { display: flex; align-items: center; gap: 8px; background: #fff; border: 3px solid var(--murekkep); border-radius: 14px; padding: 8px 12px; font-weight: 800; font-size: 0.9rem; }
.dv-kaydirici input { width: 160px; accent-color: #19c3a6; }
.dv-kaydirici b { font-family: var(--font-kod); min-width: 40px; text-align: right; color: #0b7a7c; }
.dv-seri { position: absolute; right: 12px; bottom: 12px; width: min(380px, calc(100% - 24px)); background: #0d1322; border: 2px solid #1d2742; border-radius: 12px; z-index: 3; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.dv-seri-ust { display: flex; }
.dv-seri-ust button { background: none; border: 0; color: #e8ecfb; font: inherit; font-weight: 800; padding: 8px 12px; cursor: pointer; }
.dv-seri-ust button:first-child { flex: 1; text-align: left; }
.dv-seri-ust small { color: #19c3a6; font-weight: 700; }
.dv-seri pre { display: none; margin: 0; height: 170px; overflow-y: auto; padding: 8px 12px; font-family: var(--font-kod); font-size: 0.85rem; color: #7ee0c8; background: #070b14; border-top: 1px solid #1d2742; white-space: pre-wrap; }
.dv-seri.acik pre { display: block; }
.dv-yukleniyor { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; background: #eef1f6; font-weight: 800; color: var(--murekkep); z-index: 10; }
.dv-basari { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; background: rgba(11,16,32,0.45); }
.dv-basari[hidden] { display: none; }
.dv-basari-kutu { background: #fff; border: 3px solid var(--murekkep); border-radius: 24px; box-shadow: 0 10px 0 var(--murekkep); padding: 24px 30px; text-align: center; width: min(420px, 92%); animation: cyBuyu 0.3s ease-out; }
.dv-basari-ikon { font-size: 3.6rem; }
.dv-basari-kutu h2 { font-family: var(--font-baslik); font-size: 1.9rem; color: var(--murekkep); }
.dv-basari-kutu p { font-weight: 700; color: var(--murekkep-2); margin: 6px 0 14px; }
.dv-basari-tuslar { display: flex; gap: 8px; }
.dv-basari-tuslar .dv-tus:not(.yesil) { background: #eef1f6; color: var(--murekkep); border-color: #cfd6e6; }
@media (max-width: 860px) {
  body.dv-govde { overflow: auto; height: auto; }
  .dv-uygulama { flex-direction: column-reverse; height: auto; }
  .dv-panel { width: 100%; border-right: 0; min-height: 70vh; }
  .dv-uygulama.panel-kapali .dv-panel { width: 100%; }
  .dv-sahne { height: 62vh; flex: none; }
  .dv-panel-ac, #dvPanelGizle { display: none; }
  .dv-kaydirici input { width: 110px; }
  .dv-seri { width: calc(100% - 24px); bottom: auto; top: 54px; }
  .dv-ipucu-yazi { display: none; }
}