@font-face {
  font-family: 'dik-temel-harfler';
  src: url('dik-temel-harfler.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
html, body {
  font-family: 'dik-temel-harfler', sans-serif;
}   
button, input, select, textarea {
  font-family: var(--app-font) !important;
  font-weight: 400; /* fontunuzun gerçek ağırlığı */
} 
@media (prefers-reduced-motion: reduce) {
  .bubble { transition: none !important; }
}
    .hud { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:10px }
    .stat { font-weight:900; color: var(--muted); }

    /* Oyun alanı: mutlak konumlama için göreli konteyner */
    .area {
      position: relative;
      width: 100%;
      height: clamp(360px, 52vh, 640px);
      background: var(--card);
      border: 3px dashed rgba(99,102,241,.25);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden; /* taşan buton olmasın */
    }

    :root { --btn-size: clamp(80px, 12vmin, 120px); }
    .bubble {
      position: absolute; /* mutlak konum */
      width: var(--btn-size); height: var(--btn-size);
      border-radius: 50%;
      background: white; /* karttan ayrılaşıp okunurluk arttırır */
      border: 3px dashed rgba(99,102,241,.35);
      box-shadow: var(--shadow);
      display:grid; place-items:center;
      font-weight: 900; font-size: calc(var(--btn-size) * .42);
      color: var(--ink);
      cursor: pointer;
      user-select: none;
      transition: transform .08s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease, filter .12s ease, left .08s ease, top .08s ease;
        will-change: transform, left, top;
  touch-action: manipulation;
    }
    .bubble:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(31,41,55,.16), 0 3px 8px rgba(31,41,55,.08) }
    .bubble:active{ transform: translateY(0) }

    .bubble.done{ opacity:.65; filter: grayscale(.1); position: absolute; }
    .bubble.done::after{ content:"✔"; position:absolute; right:8px; bottom:8px; font-size: calc(var(--btn-size) * .24); color: var(--primary-2); text-shadow:0 1px 0 white }

    .controls { display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap }
    .btn2 { border:0; border-radius:14px; padding:10px 12px; font-weight:900; cursor:pointer; }
    .btn2.secondary { background:#e5e7eb; color:#111827 }

    .disabled { pointer-events:none; filter: grayscale(.2); }
a.back {
  display: inline-block;
  padding: 10px 18px;
  background-color: #007BFF; /* mavi buton */
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

a.back:hover {
  background-color: #0056b3; /* hover rengi */
}