:root {
  --bg: #ffffff;              
  --ink: #1f2937;              /* metin */
  --muted: #6b7280;            /* ikincil metin */
  --card: #f7fafc;             /* çok açık gri/mavi kart zemin */
  --primary: #3b82f6;          /* mavi (vurgular) */
  --primary-2: #22c55e;        /* yeşil (ikincil vurgu) */
  --accent: #a78bfa;           /* mor (süsler) */
  --ring: #60a5fa;             /* odak halkası */
  --shadow: 0 6px 14px rgba(31,41,55,.12), 0 2px 6px rgba(31,41,55,.06);
}

/* Özel font (gerekirse yolu düzeltin) */
@font-face {
  font-family: 'dik-temel-harfler'; 
  src: url('dik-temel-harfler.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* GENEL */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'dik-temel-harfler', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* BAŞLIK */
.site-header {
  padding: 28px 16px 10px;
  text-align: center;
  font-family: 'dik-temel-harfler', system-ui, -apple-system, sans-serif;
}
.app-title {
  display: inline-block;
  margin: 0 0 6px;
  padding: 8px 16px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  color: white;
  border-radius: 18px;
  border: 4px solid rgba(0,0,0,.05);
  box-shadow: var(--shadow);
  letter-spacing: .5px;
}
.subtitle {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

/* IZGARALAR */
.grid {
  display: grid;
  gap: 14px;
  padding: 16px;
  max-width: 1100px;
  margin: 10px auto 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* KART: büyük dokunmatik hedef, çocuk dostu */
.level-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 6px;
  min-height: 140px;
  padding: 16px 14px;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 3px dashed rgba(99,102,241,.25);
  border-radius: 22px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.level-card strong { font-size: 18px; line-height: 1.1; margin-left: 17px; }
.level-card em {
  font-style: normal;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .2px;
}
.level-card .badge {
  position: absolute;
  top: -12px; left: -12px;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: white;
  border: 4px solid var(--primary);
  color: var(--primary);
  display: grid; place-items: center;
  font-weight: 900; font-size: 18px;
  box-shadow: var(--shadow);
}
.level-card::after {
  content: "";
  position: absolute; right: -10px; bottom: -10px; width: 64px; height: 64px;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0 35%, transparent 36% 100%);
  opacity: .25;
  filter: blur(0.2px);
}
.level-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(31,41,55,.16), 0 3px 8px rgba(31,41,55,.08); }
.level-card:active { transform: translateY(0); }

/* ODAK (klavye) */
.level-card:focus { outline: none; }
.level-card:focus-visible {
  box-shadow: 0 0 0 4px white, 0 0 0 8px var(--ring);
}

/* ALT KISIM (isteğe bağlı bilgi/bağlantı alanı) */
.site-footer { padding: 18px; text-align: center; color: var(--muted); font-size: .95rem; }

/* RESPONSIVE İYİLEŞTİRMELER */
@media (min-width: 540px) {
  .grid { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .level-card { min-height: 160px; padding: 18px; }
}
@media (min-width: 900px) {
  .grid { gap: 18px; grid-template-columns: repeat(3, 1fr); }
  .level-card { min-height: 180px; }
}

/* HAREKET AZALTMA İSTEĞİ İÇİN */
@media (prefers-reduced-motion: reduce) {
  .level-card { transition: none; }
}

.ad-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  background: #fef3c7; /* açık sarı örnek */
  border: 3px dashed #f59e0b;
  border-radius: 22px;
  box-shadow: var(--shadow);
  font-weight: bold;
  color: #92400e;
  font-size: 18px;
}
@media (min-width: 540px) {
  .ad-card { min-height: 160px; }
}
@media (min-width: 900px) {
  .ad-card { min-height: 180px; }
}