:root {
  --zemin: #15171a;
  --yuzey: #1f2226;
  --yuzey2: #2a2e33;
  --cizgi: #3a3f46;
  --yazi: #e8eaed;
  --soluk: #9aa1a9;
  --vurgu: #4c9be8;
  --vurgu-koyu: #2f6fb0;
  --tamam: #4caf7a;
  --uyari: #e0a84c;
  --hata: #e86a6a;
  --yaricap: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--zemin); color: var(--yazi);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[hidden] { display: none !important; }
button, select, input, textarea { font: inherit; color: inherit; }
button {
  background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  padding: 5px 12px; cursor: pointer;
}
button:hover { border-color: var(--soluk); }
button.birincil { background: var(--vurgu-koyu); border-color: var(--vurgu); font-weight: 600; }
button.birincil:hover { background: var(--vurgu); }
button.bag { background: none; border: none; color: var(--soluk); padding: 4px 6px; }
button.bag:hover { color: var(--yazi); }
select, input:not([type]), input[type=password], textarea {
  background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 5px 8px;
}
.soluk { color: var(--soluk); }
.hata { color: var(--hata); min-height: 1.4em; }

/* giriş */
.giris { display: grid; place-items: center; height: 100%; }
.giris-kutu {
  background: var(--yuzey); padding: 32px; border-radius: 10px; width: min(340px, 92vw);
  display: flex; flex-direction: column; gap: 12px;
}
.giris-kutu h1 { margin: 0; font-size: 22px; }
.giris-kutu p { margin: 0 0 6px; }
.giris-kutu label { display: flex; flex-direction: column; gap: 4px; color: var(--soluk); }
.giris-kutu input { color: var(--yazi); }

/* üst çubuk */
.ust {
  display: flex; align-items: center; gap: 16px; padding: 8px 16px;
  background: var(--yuzey); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 5;
}
.marka { font-weight: 700; }
.gezinme { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
.gezinme button { font-size: 18px; line-height: 1; padding: 4px 12px; }
.gezinme select { min-width: 190px; }
.sag { display: flex; align-items: center; gap: 6px; }

/* araç çubuğu */
.arac {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 8px 16px;
  border-bottom: 1px solid var(--cizgi);
}
.arac label { display: flex; align-items: center; gap: 6px; color: var(--soluk); }
.arac input[type=range] { width: 120px; accent-color: var(--vurgu); }
.arac .dilim input { width: 180px; }
.arac #dilim-yazi { color: var(--yazi); min-width: 70px; font-variant-numeric: tabular-nums; }
.arac .ipucu { margin-left: auto; }

/* paneller */
.paneller {
  display: grid; gap: 12px; padding: 12px 16px;
  grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr));
}
@media (max-width: 1400px) { .paneller { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .paneller { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 8px; padding: 8px; }
.panel.dolu { border-color: var(--tamam); }
.panel-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.harf { font-size: 20px; font-weight: 700; }
.sira-rozet { color: var(--vurgu); font-weight: 600; }
.tuval-kap { position: relative; }
.tuval-kap canvas {
  width: 100%; aspect-ratio: 1; display: block; background: #000;
  image-rendering: pixelated; cursor: zoom-in; border-radius: 4px;
}
.isaret { position: absolute; background: #ffd34d; pointer-events: none; opacity: 0.85; }
.isaret.u { left: 50%; top: 0; width: 2px; height: 6%; transform: translateX(-1px); }
.isaret.a { left: 50%; bottom: 0; width: 2px; height: 6%; transform: translateX(-1px); }
.isaret.s { top: 50%; left: 0; height: 2px; width: 6%; transform: translateY(-1px); }
.isaret.g { top: 50%; right: 0; height: 2px; width: 6%; transform: translateY(-1px); }
.isaret-gizli .isaret { display: none; }

.puan { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 4px; margin-top: 5px; }
.puan .ad { color: var(--soluk); font-size: 12.5px; cursor: help; }
.puan .dugmeler { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.puan .dugmeler button { padding: 3px 0; font-size: 13px; min-width: 0; }
.puan .dugmeler button.secili { background: var(--vurgu-koyu); border-color: var(--vurgu); font-weight: 700; }

/* alt */
.alt {
  display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 16px; align-items: end;
  padding: 12px 16px 20px; border-top: 1px solid var(--cizgi); background: var(--yuzey);
}
.siralama .baslik { margin-bottom: 6px; }
.sira-harfler { display: flex; gap: 6px; flex-wrap: wrap; }
.sira-harfler button { width: 38px; font-weight: 700; }
.sira-harfler button.kullanildi { opacity: 0.3; }
.sira-sonuc { margin-top: 6px; min-height: 1.4em; font-weight: 600; letter-spacing: 0.5px; }
.not { display: flex; flex-direction: column; gap: 4px; color: var(--soluk); }
.not span { display: inline; }
.not textarea { width: 100%; resize: vertical; color: var(--yazi); }
.kaydet { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.kaydet button { padding: 8px 18px; }
#durum.uyari { color: var(--uyari); }
#durum.tamam { color: var(--tamam); }

/* büyütme ve yönerge */
.buyut {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.82); z-index: 20;
  display: grid; place-items: center;
}
.buyut-ic { display: flex; flex-direction: column; gap: 8px; }
.buyut-ust { display: flex; justify-content: space-between; gap: 24px; }
#buyut-baslik { font-size: 20px; font-weight: 700; }
#buyut-tuval {
  width: min(86vh, 92vw); aspect-ratio: 1; image-rendering: pixelated; background: #000; border-radius: 4px;
}
.yonerge-ic {
  background: var(--yuzey); border-radius: 10px; padding: 24px 28px; width: min(640px, 94vw);
  max-height: 90vh; overflow: auto;
}
.yonerge-ic h2 { margin-top: 0; }
.yonerge-ic li { margin-bottom: 4px; }

@media (max-width: 900px) {
  .alt { grid-template-columns: 1fr; }
  .kaydet { align-items: stretch; }
  .arac .ipucu { display: none; }
}