:root {
  --zemin: #1b3b2b;
  --bar-zemin: #264e3a;
  --bar-cizgi: rgba(255, 249, 238, 0.2);
  --ana-metin: #fff9ee;
  --bar-yardimci: #d8eadf;
  --kart-zemin: #fff9ee;
  --kart-ikincil: #f5ebd6;
  --murekkep: #1f2922;
  --yardimci: #435449;
  --kehribar: #f5a623;
  --kehribar-golge: #bf7a0b;
  --odak-dis: #f5a623;
  --lavanta: #6b21a8;
  --lavanta-acik: #f3ebff;
  --lavanta-koyu: #582c83;
  --onay-arka: #ecf9ee;
  --onay-kenar: #2a7d41;
  --onay-metin: #1e5e2f;
  --uyari-arka: #fef2f2;
  --uyari-kenar: #b91c1c;
  --uyari-metin: #991b1b;
  --kilit-zemin: #223d30;
  --kilit-buton: #162920;
  --kilit-metin: #dbe7df;
  --kilit-buton-metin: #cbd5e1;
  --kilit-kenar: #4b6b5a;
  --kaplama-arka: rgba(16, 36, 26, 0.88);
}

html[data-tema="acik"] {
  --zemin: #f4efe4;
  --bar-zemin: #e7dec8;
  --bar-cizgi: rgba(31, 41, 34, 0.18);
  --ana-metin: #1f2922;
  --bar-yardimci: #3d4f43;
  --kart-zemin: #ffffff;
  --kart-ikincil: #f4efe4;
  --murekkep: #1f2922;
  --yardimci: #435449;
  --odak-dis: #b45309;
  --kilit-zemin: #eae3d2;
  --kilit-buton: #ddd3bc;
  --kilit-metin: #3d4f43;
  --kilit-buton-metin: #3d4f43;
  --kilit-kenar: #8c7f65;
  --kaplama-arka: rgba(24, 34, 28, 0.78);
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--zemin);
  color: var(--ana-metin);
  font-family: 'Nunito', 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  line-height: 1.44;
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, .baslik-yazi {
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* R-39: Etkin kontrollerde pointer, devre dışı kontrollerde not-allowed imleci */
a[href],
button:not(:disabled),
summary,
select,
label[for],
[role="button"]:not([aria-disabled="true"]),
[role="tab"]:not([aria-disabled="true"]),
[role="switch"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--odak-dis);
  outline-offset: 3px;
}

.kart-zemin-odak a:focus-visible,
.kart-zemin-odak button:focus-visible,
.yonerge button:focus-visible,
.sonuc button:focus-visible,
.sonuc a:focus-visible {
  outline: 3px solid var(--murekkep);
  outline-offset: 3px;
}

.ekran-okuyucu {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gizli {
  display: none !important;
}

.ust-bar {
  flex: 0 0 auto;
  z-index: 20;
  background: var(--bar-zemin);
  border-bottom: 2px solid var(--bar-cizgi);
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 6px;
}

.ust-nav {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ust-baslik-kutu {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.oyun-h1 {
  margin: 0;
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  font-weight: 800;
  color: var(--ana-metin);
  text-align: center;
}

.yaprak-ilerleme {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #162920;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 249, 238, 0.26);
}

.adim-yaprak {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: rgba(255, 249, 238, 0.34);
  transition: transform 0.2s ease, color 0.2s ease;
}

.adim-yaprak svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.adim-yaprak.simdi {
  color: var(--kehribar);
  transform: scale(1.16);
}

.adim-yaprak.tamam {
  color: #6ee798;
}

.ust-sag-grup {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ikon-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  border: 2px solid var(--murekkep);
  background: var(--kart-zemin);
  color: var(--murekkep);
  box-shadow: 0 3px 0 rgba(15, 31, 22, 0.36);
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  touch-action: manipulation;
  transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.12s ease;
}

.ikon-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #fff0c7;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(15, 31, 22, 0.4);
}

.ikon-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(15, 31, 22, 0.38);
}

.ikon-btn:disabled,
.ikon-btn[aria-disabled="true"] {
  opacity: 0.52;
  box-shadow: none;
}

.yonerge {
  background: var(--kart-zemin);
  color: var(--murekkep);
  border: 2.5px solid var(--murekkep);
  border-radius: 18px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(14, 30, 21, 0.2);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.adim-ikon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff0c2;
  border: 2px solid #b4690e;
  color: var(--murekkep);
  font-weight: 800;
  font-size: 0.98rem;
  display: grid;
  place-items: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.yonerge .metin {
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  font-weight: 800;
  color: var(--murekkep);
  line-height: 1.3;
}

.yonerge.uyari-balon {
  background: var(--uyari-arka);
  border-color: var(--uyari-kenar);
}

.yonerge.uyari-balon .adim-ikon {
  background: var(--uyari-metin);
  border-color: #7f1d1d;
  color: #ffffff;
}

.yonerge.uyari-balon .metin {
  color: var(--uyari-metin);
}

.yonerge.kutlama-balon {
  background: var(--onay-arka);
  border-color: var(--onay-kenar);
}

.yonerge.kutlama-balon .adim-ikon {
  background: #1e5e2f;
  border-color: #144522;
  color: #ffffff;
  transform: scale(1.06);
}

.yonerge.kutlama-balon .metin {
  color: var(--onay-metin);
}

.oyun-alt-bilgi {
  flex: 0 0 auto;
  background: var(--bar-zemin);
  border-top: 1.5px solid var(--bar-cizgi);
  padding: 6px 12px calc(env(safe-area-inset-bottom, 0px) + 6px);
  text-align: center;
  font-size: clamp(0.78rem, 1.9vw, 0.85rem);
  font-weight: 700;
  color: var(--bar-yardimci);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 14px;
  border: 2.5px solid var(--murekkep);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.52;
  box-shadow: none;
}

.btn-kehribar {
  background: var(--kehribar);
  color: #1f2922;
  box-shadow: 0 4px 0 var(--kehribar-golge);
}

.btn-kehribar:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #ffb83d;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--kehribar-golge);
}

.btn-kehribar:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--kehribar-golge);
}

.btn-parsomen {
  background: var(--kart-zemin);
  color: var(--murekkep);
  box-shadow: 0 3px 0 #b8a583;
}

.btn-parsomen:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #fff4db;
  transform: translateY(-1px);
}

.btn-parsomen:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #b8a583;
}

.kaplama {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--kaplama-arka);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  overflow-y: auto;
}

.sonuc-kart {
  margin: auto 0;
  width: min(100%, 450px);
  background: var(--kart-zemin);
  color: var(--murekkep);
  border: 3px solid var(--murekkep);
  border-radius: 22px;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.sonuc-ust-etiket {
  display: inline-block;
  background: var(--onay-arka);
  color: var(--onay-metin);
  border: 1.5px solid var(--onay-kenar);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 800;
}

.sonuc-kart h2 {
  margin: 8px 0 6px;
  font-size: clamp(1.35rem, 4vw, 1.65rem);
  color: var(--murekkep);
}

.sonuc-ozet {
  margin: 0 0 14px;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--yardimci);
}

.kimya-kutu {
  background: var(--lavanta-acik);
  border: 2px solid #bfa3e6;
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 16px;
  text-align: left;
}

.kimya-kutu strong {
  display: block;
  font-size: 0.96rem;
  color: var(--lavanta-koyu);
  margin-bottom: 4px;
}

.kimya-kutu p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f2922;
  line-height: 1.4;
}

.sonuc-aksiyonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#konfeti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
}

.svg-buton {
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.svg-buton:hover:not([aria-disabled="true"]) {
  filter: brightness(1.06);
}

.svg-buton:active:not([aria-disabled="true"]) {
  filter: brightness(0.95);
}

.svg-buton[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.72;
}

.svg-buton:focus {
  outline: none;
}

.svg-buton:focus-visible .odak-halka {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}