@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;
}
 /* SAYFAYI DİKEYDE 3 PARÇAYA AYIR: 20% (açıklama) / 50% (görsel) / 30% (butonlar) */
    .page-card{ max-width: 960px; margin: 0 auto; width: 100%; }
    .layout{
      display:grid;
      grid-template-areas:
        "info"
        "stage"
        "ctrl";
      grid-template-rows: 20% 50% 30%;
      height: min(82svh, 920px);
      min-height: 560px;
      gap: 10px;
    }

    .info{ grid-area: info; display:flex; align-items:center; }
    .stage{ grid-area: stage; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; height: 100%; }
    .ctrl{ grid-area: ctrl; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px }

    /* ——— RESPONSIVE GÖRSEL KARTI ———
       Kare oran korunur, boyutlar ekrana göre ölçeklenir.
       100×100 minimum; tablet/masaüstünde büyür. */
    :root { --art-size: clamp(100px, 28vmin, 340px); }
    .paper {
      width: calc(var(--art-size) + 40px);  /* iç boşlukla birlikte kart genişliği */
      height: calc(var(--art-size) + 60px); /* başlık/dot payı için biraz fazla */
      max-width: 90vw;
      max-height: 100%;
      background: var(--card);
      border: 3px dashed rgba(99,102,241,.25);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 10px;
      display:flex; align-items:center; justify-content:center;
    }
    .paper img {
      width: var(--art-size);
      height: var(--art-size);
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display:block;
    }

    .progressdots { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; max-width: 92%; }
    .dot { width:12px; height:12px; border-radius:50%; background:#e5e7eb; border:2px solid #cbd5e1 }
    .dot.on { background: var(--primary-2); border-color: var(--primary-2) }

    .hud { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .hud .stat { font-weight:900; color: var(--muted) }

    .tempo-btn { background:#ef4444; color:white; border:0; border-radius:18px; padding:14px 18px; font-weight:900; cursor:pointer; box-shadow:var(--shadow) }
    .tempo-btn:active { transform: translateY(1px) }

    .meter { width: clamp(200px, 40vw, 360px); height: 12px; background:#e5e7eb; border-radius:999px; overflow:hidden; border:2px solid #cbd5e1 }
    .meter > div { height:100%; width:0%; background:#ef4444 }
    .hint { font-size:.9rem; color: var(--muted); font-weight:800; text-align:center; max-width: 90%; }

    /* Daha dar ekranlarda yüksekliği arttır ve bölümleri akıcı yap */
    @media (max-width: 480px){
      .layout{ height: 88svh; }
      .hud{ flex-direction:column; align-items:flex-start; gap:6px }
      :root { --art-size: clamp(100px, 40vmin, 300px); }
    }

    /* Geniş ekranda kart çok büyümesin */
    @media (min-width: 1200px){
      :root { --art-size: clamp(120px, 22vmin, 360px); }
      .page-card{ max-width: 1040px; }
    }
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 */
}