/* Uçan Balonlar */
.u-sahne {
  width: 100%; max-width: 420px; height: auto; margin: 0 auto 6px;
  background: linear-gradient(#d9ecff, #f3f9ff); border-radius: 14px; color: #fff;
}
@media (prefers-color-scheme: dark) {
  .u-sahne { background: linear-gradient(#26305a, #33406e); color: #4a5585; }
}
.u-ucan { transition: transform 1.2s ease; }
.u-ucan.u-yuksel { transform: translateY(-14px); }
.u-ucan.u-indi .u-sepet { transform: translateY(14px); transition: transform 1s ease 0.4s; }
.u-balon { transition: transform 1.4s cubic-bezier(0.3, 0, 0.7, 1), opacity 1.4s ease; }
.u-balon.u-uctu { transform: translateY(-240px) rotate(8deg); opacity: 0; }
.u-balon:nth-child(odd).u-uctu { transform: translateY(-240px) rotate(-8deg); }
.u-ucan:not(.u-indi) .u-balon:not(.u-uctu) { animation: u-salin 3.2s ease-in-out infinite; }
.u-balon:nth-child(2n) { animation-delay: -1.1s !important; }
.u-balon:nth-child(3n) { animation-delay: -2s !important; }
@keyframes u-salin { 50% { transform: translateY(-4px); } }

.u-kategori { text-align: center; font-size: 1.1rem; margin: 10px 0; }
.u-kategori strong { color: var(--k); }

.u-kelime { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.u-harf {
  width: min(8.4vw, 40px); height: min(10.5vw, 48px);
  display: grid; place-items: center; font-weight: 800; font-size: min(6vw, 1.6rem);
  border-bottom: 4px solid var(--metin-2); color: var(--metin);
}
.u-harf--acik { border-bottom-color: var(--k); animation: u-acil 0.3s ease; }
.u-harf--gosterilen { color: var(--tehlike); }
@keyframes u-acil { 0% { transform: scale(0.6); opacity: 0; } }

.u-sonraki { display: flex; justify-content: center; margin-bottom: 12px; }
.u-sonraki .dugme[hidden] { display: none; }

.u-klavye {
  display: grid; gap: 6px; max-width: 520px; margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}
.u-tus {
  font: inherit; font-weight: 700; font-size: 1.1rem; min-height: 46px; padding: 0;
  border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey-2); color: var(--metin);
  cursor: pointer; touch-action: manipulation;
}
.u-tus:hover:not([disabled]) { filter: brightness(0.95); }
.u-tus[disabled] { cursor: default; }
.u-tus.dogru { background: var(--basari); color: #fff; border-color: transparent; }
.u-tus.yanlis { background: transparent; color: var(--metin-2); text-decoration: line-through; opacity: 0.6; }
.u-tus[disabled]:not(.dogru):not(.yanlis) { opacity: 0.5; }
@media (prefers-color-scheme: dark) { .u-tus.dogru { color: #14162a; } }