/* Zihin Atölyesi — tasarım sistemi
   Kavram: deniz haritası. Zemin açık deniz sisi, adalar alanları temsil eder.
   Yazı: Fredoka (başlık), Atkinson Hyperlegible (gövde; okuma güçlüğü için tasarlanmış). */
@font-face { font-family: 'Fredoka'; font-weight: 500 700; font-display: swap; src: url(../fonts/fredoka-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-weight: 500 700; font-display: swap; src: url(../fonts/fredoka-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson'; font-weight: 400; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson'; font-weight: 400; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson'; font-weight: 700; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson'; font-weight: 700; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Zemin ve yüzeyler */
  --bg: #EAF2F5; --bg-desen: #DCE8EE; --yuzey: #FFFFFF; --yuzey-2: #F2F7F9; --yuzey-3: #E2ECF1;
  --murekkep: #0F2A3F; --soluk: #4E6577; --cizgi: #C9D8E1; --cizgi-koyu: #8FA6B5;
  --ana: #0F2A3F; --ana-yazi: #FFFFFF; --odak: #0072B2;
  /* Alan renkleri (Okabe-Ito'dan; açık zeminde metin kontrastı için koyulaştırıldı) */
  --a-dikkat: #C55000; --a-bellek: #0067A3; --a-isitsel: #A9467F; --a-algi: #9A6B00; --a-uzamsal: #007F5F; --a-akil: #2475A8; --a-sozel: #5E4BA8;
  /* Durumlar: renk + simge birlikte */
  --iyi: #00785A; --iyi-zemin: #DDF3EC; --kotu: #B4461A; --kotu-zemin: #FBE6DC; --uyari: #8A6200;
  --yildiz: #E6A100; --yildiz-bos: #C9D8E1;
  /* Maskot */
  --maskot-govde: #3A6E8F; --maskot-gogus: #F1E7D2; --maskot-gozalti: #FFFFFF; --maskot-goz: #0F2A3F; --maskot-gaga: #E69F00;
  /* Yazı */
  --f-baslik: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --f-govde: 'Atkinson', 'Verdana', system-ui, sans-serif;
  --r: 16px; --r-k: 12px;
  --golge: 0 1px 0 rgba(15,42,63,.06), 0 6px 18px -8px rgba(15,42,63,.25);
  --metin: 17px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1724; --bg-desen: #0F2132; --yuzey: #12263A; --yuzey-2: #183049; --yuzey-3: #1F3A56;
    --murekkep: #E7F0F5; --soluk: #9DB3C3; --cizgi: #2A4560; --cizgi-koyu: #4F6E88;
    --ana: #E7F0F5; --ana-yazi: #0A1724; --odak: #56B4E9;
    --a-dikkat: #F08A3E; --a-bellek: #56B4E9; --a-isitsel: #DE8BBE; --a-algi: #F0C24A; --a-uzamsal: #3DC9A0; --a-akil: #7FC4EE; --a-sozel: #B4A2F0;
    --iyi: #3DC9A0; --iyi-zemin: #123C34; --kotu: #F08A5A; --kotu-zemin: #44241A; --uyari: #F0C24A;
    --yildiz: #F2B730; --yildiz-bos: #2A4560;
    --maskot-govde: #6FA5C7; --maskot-gogus: #F1E7D2; --maskot-gozalti: #F7FBFD; --maskot-goz: #0A1724;
    --golge: 0 1px 0 rgba(0,0,0,.2), 0 8px 22px -10px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1724; --bg-desen: #0F2132; --yuzey: #12263A; --yuzey-2: #183049; --yuzey-3: #1F3A56;
  --murekkep: #E7F0F5; --soluk: #9DB3C3; --cizgi: #2A4560; --cizgi-koyu: #4F6E88;
  --ana: #E7F0F5; --ana-yazi: #0A1724; --odak: #56B4E9;
  --a-dikkat: #F08A3E; --a-bellek: #56B4E9; --a-isitsel: #DE8BBE; --a-algi: #F0C24A; --a-uzamsal: #3DC9A0; --a-akil: #7FC4EE; --a-sozel: #B4A2F0;
  --iyi: #3DC9A0; --iyi-zemin: #123C34; --kotu: #F08A5A; --kotu-zemin: #44241A; --uyari: #F0C24A;
  --yildiz: #F2B730; --yildiz-bos: #2A4560;
  --maskot-govde: #6FA5C7; --maskot-gogus: #F1E7D2; --maskot-gozalti: #F7FBFD; --maskot-goz: #0A1724;
  --golge: 0 1px 0 rgba(0,0,0,.2), 0 8px 22px -10px rgba(0,0,0,.6);
  color-scheme: dark;
}
/* Görsel yoğunluğu azaltma ayarı */
:root.sade { --bg-desen: var(--bg); --golge: none; }
:root.buyuk { --metin: 19px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, var(--bg-desen) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
  color: var(--murekkep); font-family: var(--f-govde); font-size: var(--metin); line-height: 1.55;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
body.oyunda { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--f-baslik); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
:focus-visible { outline: 3px solid var(--odak); outline-offset: 2px; }
[hidden] { display: none !important; }
.ikon { flex: none; vertical-align: middle; }
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Düğmeler */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: var(--r-k);
  border: 2px solid var(--cizgi-koyu); background: var(--yuzey); color: var(--murekkep);
  font-weight: 700; font-size: 1rem; text-decoration: none; user-select: none;
  transition: transform .08s, background .15s, border-color .15s;
}
.btn:hover { border-color: var(--murekkep); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.ana { background: var(--ana); color: var(--ana-yazi); border-color: var(--ana); }
.btn.alan { background: var(--k); border-color: var(--k); color: #fff; }
.btn.kucuk { min-height: 44px; padding: 0 14px; font-size: .92rem; }
.btn.tam { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.metin-btn { background: none; border: 0; color: var(--odak); text-decoration: underline; padding: 8px 2px; min-height: 44px; font-weight: 700; }
.eylem { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }

/* Ortak kartlar */
.kart { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); border: 1px solid var(--cizgi); padding: 20px; min-width: 0; }
.etiket { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); font-weight: 700; }
.etiket-pill { font-size: .78rem; padding: 3px 10px; border-radius: 99px; background: var(--yuzey-3); font-weight: 700; }
.not { color: var(--soluk); font-size: .92rem; }
.not.vurgu { color: var(--murekkep); font-weight: 700; }
.mesaj { text-align: center; font-weight: 700; min-height: 1.6em; }
.mesaj.iyi { color: var(--iyi); } .mesaj.kotu { color: var(--kotu); }

/* ===== Oyun ekranı ===== */
.oyun-ekran { position: fixed; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
.oyun-ust {
  display: flex; align-items: center; gap: 12px; background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
  padding-block: calc(8px + env(safe-area-inset-top, 0px)) 8px;
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.oyun-baslik { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.oyun-baslik b { font-family: var(--f-baslik); font-weight: 600; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alan-simge { color: var(--k); display: inline-flex; }
.hud { display: flex; gap: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .95rem; }
.ilerleme { height: 6px; background: var(--yuzey-3); flex: none; }
.ilerleme i { display: block; height: 100%; width: 0; background: var(--k); transition: width .25s; }
.sahne {
  flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding-block: 20px calc(24px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  outline: none;
}
.sahne > * { max-width: 920px; width: 100%; }
.geri-say { font-family: var(--f-baslik); font-size: 120px; font-weight: 700; color: var(--k); text-align: center; margin-top: 12vh; }

/* Tanıtım */
.tanitim { display: flex; flex-direction: column; gap: 18px; max-width: 680px !important; }
.tanitim-ust { display: flex; gap: 14px; align-items: flex-start; }
.balon { position: relative; background: var(--yuzey); border: 2px solid var(--cizgi); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 1; min-width: 0; font-size: 1.08rem; }
.balon::before { content: ""; position: absolute; left: -11px; top: 28px; width: 18px; height: 18px; background: var(--yuzey); border-left: 2px solid var(--cizgi); border-bottom: 2px solid var(--cizgi); transform: rotate(45deg); }
.balon b { color: var(--k); }
.adimlar-liste { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.ornek { display: flex; justify-content: center; }
.maskot { flex: none; line-height: 0; }
.maskot-anlat svg { animation: salla 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes salla { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }

/* Geri bildirim */
.gb-ok { animation: gbok .4s; } .gb-no { animation: gbno .4s; }
@keyframes gbok { 40% { box-shadow: 0 0 0 5px var(--iyi); } }
@keyframes gbno { 40% { box-shadow: 0 0 0 5px var(--kotu); } }
.gb-isaret { position: absolute; top: -10px; right: -10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; z-index: 3; animation: belir .6s forwards; pointer-events: none; }
.gb-isaret.ok { background: var(--iyi); } .gb-isaret.no { background: var(--kotu); }
@keyframes belir { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Soru-seçenek */
.soru { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.soru-metin { width: 100%; text-align: center; font-size: 1.12rem; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.secenekler { display: grid; gap: 12px; width: 100%; max-width: 640px; }
.secenekler.iki { grid-template-columns: repeat(2, minmax(0,1fr)); }
.secenekler.uc { grid-template-columns: repeat(3, minmax(0,1fr)); }
.secenekler.dort { grid-template-columns: repeat(4, minmax(0,1fr)); max-width: 760px; }
.secenekler.liste { grid-template-columns: 1fr; }
@media (max-width: 560px) { .secenekler.dort { grid-template-columns: repeat(2, minmax(0,1fr)); } .secenekler.uc .sec { font-size: 1rem; padding: 10px 6px; } }
.sec {
  position: relative; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--cizgi-koyu);
  background: var(--yuzey); font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.secenekler.liste .sec { justify-content: flex-start; text-align: left; font-weight: 400; font-size: 1.05rem; }
.sec:hover:not(:disabled) { border-color: var(--murekkep); }
.sec:disabled { cursor: default; }
.sec.dogru, .sec.dogru-goster { border-color: var(--iyi); background: var(--iyi-zemin); }
.sec.yanlis { border-color: var(--kotu); background: var(--kotu-zemin); }
.sec.secildi { border-color: var(--murekkep); background: var(--yuzey-3); }
.sec-isaret { position: absolute; top: 6px; right: 6px; display: inline-flex; }
.sec.dogru .sec-isaret, .sec.dogru-goster .sec-isaret { color: var(--iyi); }
.sec.yanlis .sec-isaret { color: var(--kotu); }
.sec svg:not(.ikon) { max-width: 100%; height: auto; }
.aciklama { width: 100%; max-width: 640px; background: var(--yuzey); border: 2px dashed var(--k); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: left; }
.sure-cubuk { width: min(320px, 80%); height: 8px; border-radius: 99px; background: var(--yuzey-3); overflow: hidden; }
.sure-cubuk i { display: block; height: 100%; background: var(--k); animation: azal linear forwards; }
@keyframes azal { from { width: 100%; } to { width: 0; } }

/* Büyük tepki düğmesi */
.tepki { min-height: 88px; width: min(380px, 100%); border-radius: 22px; border: 0; background: var(--k); color: #fff; font-family: var(--f-baslik); font-size: 1.7rem; font-weight: 700; letter-spacing: .04em; box-shadow: 0 6px 0 rgba(0,0,0,.18); user-select: none; -webkit-user-select: none; touch-action: none; }
.tepki:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.uyaran-kutu { width: min(260px, 70vw); aspect-ratio: 1; max-width: 100%; border-radius: 24px; background: var(--yuzey); border: 2px solid var(--cizgi); display: grid; place-items: center; font-family: var(--f-baslik); font-size: clamp(64px, 18vw, 120px); font-weight: 700; }
.uyaran-kutu svg { width: 72%; height: 72%; }

/* Sonuç */
.sonuc { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 600px !important; }
.sonuc h2 { font-size: 2rem; }
.yildizlar { display: flex; gap: 6px; color: var(--yildiz-bos); }
.yildiz.dolu { color: var(--yildiz); }
.yildiz.dolu svg { fill: currentColor; animation: yildizla .5s backwards; }
.yildiz:nth-child(2).dolu svg { animation-delay: .12s; } .yildiz:nth-child(3).dolu svg { animation-delay: .24s; }
@keyframes yildizla { from { transform: scale(.2) rotate(-40deg); opacity: 0; } }
.kiyas { font-size: 1.05rem; }
.birincil { font-size: 1.05rem; } .birincil b { font-family: var(--f-baslik); font-size: 1.3rem; }
.mini-grafik { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mini-grafik figcaption { font-size: .82rem; color: var(--soluk); }
.ipucu, .kopru { width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--yuzey); border-left: 5px solid var(--k); }
.kopru { border-left-color: var(--murekkep); }
.odul-listesi { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.odul { display: flex; gap: 10px; align-items: center; background: var(--yuzey); border-radius: 12px; padding: 10px 14px; border: 2px solid var(--yildiz); color: var(--murekkep); font-weight: 700; text-align: left; }
.odul .ikon { color: var(--yildiz); }
.aciklama-metin { max-width: 52ch; }

/* Onay penceresi */
.perde { position: fixed; inset: 0; z-index: 60; background: rgba(10,23,36,.55); display: grid; place-items: center; padding: 16px; }
.pencere { background: var(--yuzey); border-radius: 20px; padding: 22px; width: min(520px, 100%); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--golge); }
.pencere.kucuk { width: min(400px, 100%); text-align: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }