/* Zihin Adası — tasarım sistemi (görsel kimlik 2026-11)
   Kaynak: tasarim/ekran/zihin-adasi-ekranlar/assets/ortak.css. Yalnız açık tema (color-scheme: light).
   Yazı: Baloo 2 800 (başlık, düğme), Nunito 600/700/800 (gövde). Atkinson Hyperlegible okuma kolaylığı
   seçeneği için dosyada duruyor: <html class="okuma-yazi"> gövde yazısını Atkinson yapar (henüz ayarı yok).

   BELİRTEÇ ADLANDIRMASI
   1) Tasarım paleti (ortak.css ile aynı adlar):
      --deniz --deniz-koyu --deniz-acik --kum --zemin --mercan --mercan-koyu --yaprak --gunes --metin
      --metin-ikincil --cizgi --baslik --govde
      Ek: --gunes-acik (ana düğme üzerine gelme), --gunes-zemin (rekor/sarı çip zemini),
      --kum-kenar (ince kart/çip kenarı), --kum-kenar-koyu (ikincil düğme kenarı), --yaprak-koyu (ilerleme dolgusu)
   2) Bölge (alan) renkleri — <alan> = dikkat | bellek | isitsel | algi | uzamsal | akil | sozel:
      --a-<alan>        mürekkep: metin/simge/kenar ve beyaz yazılı zemin için (beyaz, --zemin ve kendi
                        tint'i üzerinde ≥4.5:1)
      --a-<alan>-zemin  tint: çip, bölge paneli, kutucuk zemini (üstüne --a-<alan> yazılır)
      --a-<alan>-koyu   = --a-<alan> (areas.js AREA[x].ink bunu okur)
      --a-<alan>-nokta  canlı nokta rengi: yalnız süs/harita noktası (metin için KULLANMAYIN)
      Bileşen içinde: --k = bölge mürekkebi, --kz = bölge tint'i (engine .oyun-ekran'a yazar).
   3) Eski adlar (21 etkinlik CSS'i ve panel.css kullanır; SİLMEYİN): --bg --bg-desen --yuzey --yuzey-2/3
      --murekkep --soluk --cizgi-koyu --ana --ana-yazi --odak --iyi(-zemin) --kotu(-zemin) --uyari
      --yildiz --yildiz-bos --f-baslik --f-govde --r --r-k --golge — yeni palete eşlendi.
   4) Bileşen: --odak-halka (odak halkası), --yildiz-kenar, --metin-boyut (gövde yazı boyu; eskiden --metin). */

@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(../fonts/baloo-2-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(../fonts/baloo-2-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Nunito'; font-weight: 600; font-display: swap; src: url(../fonts/nunito-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url(../fonts/nunito-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Nunito'; font-weight: 700; font-display: swap; src: url(../fonts/nunito-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url(../fonts/nunito-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Nunito'; font-weight: 800; font-display: swap; src: url(../fonts/nunito-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url(../fonts/nunito-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Okuma kolaylığı yazısı (yalnız html.okuma-yazi iken indirilir) */
@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 {
  /* 1) Tasarım paleti */
  --deniz: #0E4F5C; --deniz-koyu: #0A3C46; --deniz-acik: #2A8C9C;
  --kum: #F6EBD3; --zemin: #FBF6EA;
  --mercan: #F0714B; --mercan-koyu: #B9452A;
  --yaprak: #4C9A5B; --yaprak-koyu: #3B8149;
  --gunes: #F4B942; --gunes-acik: #F7C760; --gunes-zemin: #FDE7B0;
  --metin: #17363C; --metin-ikincil: #4E6A6F;
  --cizgi: #EFE6D2; --kum-kenar: #E6D9BC; --kum-kenar-koyu: #CFC2A0;
  --baslik: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --govde: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* 2) Bölge renkleri: mürekkep / tint / nokta (zihin-adasi.js BOLGELER: ink / tint / nokta) */
  --a-dikkat: #8A5A00;  --a-dikkat-zemin: #FDE7B0;  --a-dikkat-nokta: #C98A0E;
  --a-bellek: #2F6E3E;  --a-bellek-zemin: #D6EBD9;  --a-bellek-nokta: #4C9A5B;
  --a-isitsel: #8A2F63; --a-isitsel-zemin: #F6DCEB; --a-isitsel-nokta: #B5508A;
  --a-algi: #2C4B8F;    --a-algi-zemin: #DCE4F7;    --a-algi-nokta: #4A6FC2;
  --a-uzamsal: #A23A1F; --a-uzamsal-zemin: #FFDCD0; --a-uzamsal-nokta: #E0623D;
  --a-akil: #4B3D8F;    --a-akil-zemin: #E3DDF3;    --a-akil-nokta: #6B5BB8;
  --a-sozel: #0E4F5C;   --a-sozel-zemin: #D3ECF1;   --a-sozel-nokta: #2A8C9C;
  --a-dikkat-koyu: var(--a-dikkat); --a-bellek-koyu: var(--a-bellek); --a-isitsel-koyu: var(--a-isitsel); --a-algi-koyu: var(--a-algi);
  --a-uzamsal-koyu: var(--a-uzamsal); --a-akil-koyu: var(--a-akil); --a-sozel-koyu: var(--a-sozel);

  /* 3) Eski adlar → yeni palet */
  --bg: var(--zemin); --bg-desen: var(--zemin);
  --yuzey: #FFFFFF; --yuzey-2: #FFFCF4; --yuzey-3: var(--cizgi);
  --murekkep: var(--metin); --soluk: var(--metin-ikincil);
  --cizgi-koyu: #9A8A6C;                 /* giriş/seçenek kenarı: beyaz üzerinde ≥3:1 */
  --ana: var(--deniz); --ana-yazi: #FFFFFF;
  --odak: var(--deniz);                  /* bağlantı/vurgu rengi; odak halkası ayrı: --odak-halka */
  --iyi: #2F6E3E; --iyi-zemin: #E1F0E3; --kotu: var(--mercan-koyu); --kotu-zemin: #FCE5DC; --uyari: #8A5A00;
  --yildiz: var(--gunes); --yildiz-kenar: #B07A00; --yildiz-bos: #9A8A6C;
  /* Maskot (baykuş Pusula): deniz gövde, kum göğüs, güneş gaga */
  --maskot-govde: var(--deniz-acik); --maskot-gogus: var(--kum); --maskot-gozalti: #FFFFFF; --maskot-goz: var(--deniz-koyu); --maskot-gaga: var(--gunes);
  --f-baslik: var(--baslik); --f-govde: var(--govde);
  --r: 24px; --r-k: 16px; --r-b: 28px;
  --golge: 0 1px 0 rgba(14,79,92,.08), 0 8px 24px -14px rgba(14,79,92,.35);

  /* 4) Bileşen */
  --odak-halka: var(--gunes);
  --metin-boyut: 17px;
  color-scheme: light;
}
/* Görsel yoğunluğu azaltma ayarı */
:root.sade { --golge: none; }
:root.buyuk { --metin-boyut: 19px; }
/* Okuma kolaylığı yazısı (ayar eklendiğinde html'e "okuma-yazi" sınıfı verilir) */
:root.okuma-yazi { --f-govde: 'Atkinson', 'Verdana', system-ui, sans-serif; --govde: var(--f-govde); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--zemin);
  color: var(--metin); font-family: var(--f-govde); font-size: var(--metin-boyut); line-height: 1.5; font-weight: 600;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
body.oyunda { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--f-baslik); font-weight: 800; line-height: 1.12; margin: 0; text-wrap: balance; color: var(--deniz); }
b, strong { font-weight: 800; }
p { margin: 0; }
a { color: var(--deniz); }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
:focus-visible { outline: 4px solid var(--odak-halka); outline-offset: 3px; box-shadow: 0 0 0 2px var(--deniz-koyu); }
[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 (ikincil: beyaz + kum kenar) · .btn.ana (güneş sarısı + koyu metin) · .btn.sade (çerçevesiz)
   .btn.alan (bölge rengi) · .btn.kucuk · .btn.tam */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px; border-radius: 20px;
  border: 2px solid var(--kum-kenar-koyu); background: var(--yuzey); color: var(--deniz);
  font-family: var(--f-baslik); font-weight: 800; font-size: 1.15rem; line-height: 1.1; text-decoration: none; text-align: center;
  user-select: none; -webkit-user-select: none;
  transition: transform .08s, background-color .15s, border-color .15s;
}
.btn:hover { background: #FFFCF4; border-color: #B9AA84; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.ana { background: var(--gunes); border-color: var(--gunes); color: var(--metin); }
.btn.ana:hover { background: var(--gunes-acik); border-color: var(--gunes-acik); }
.btn.sade { background: transparent; border-color: transparent; color: var(--deniz); }
.btn.sade:hover { background: rgba(14,79,92,.06); }
.btn.alan { background: var(--k); border-color: var(--k); color: #fff; }
.btn.kucuk { min-height: 48px; padding: 0 16px; border-radius: 16px; font-size: 1rem; }
.btn.tam { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn .ikon { width: 1.15em; height: 1.15em; }
.metin-btn { background: none; border: 0; color: var(--deniz); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; min-height: 48px; font-weight: 800; }
.eylem { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }

/* ===== Kartlar, çipler ===== */
.kart { background: var(--yuzey); border-radius: var(--r); border: 1px solid var(--cizgi); box-shadow: var(--golge); padding: 22px; min-width: 0; }
.etiket { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); font-weight: 800; }
.etiket-pill, .cip { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; line-height: 1.2; padding: 5px 12px; border-radius: 999px; background: var(--kum); color: var(--metin); font-weight: 800; white-space: nowrap; }
.cip.alan-cip { background: var(--kz, var(--kum)); color: var(--k, var(--metin)); }
.cip.gunes { background: var(--gunes-zemin); color: #6B4600; }
.not { color: var(--soluk); font-size: .95rem; }
.not.vurgu { color: var(--metin); font-weight: 800; }
.mesaj { text-align: center; font-weight: 800; min-height: 1.6em; }
.mesaj.iyi { color: var(--iyi); } .mesaj.kotu { color: var(--kotu); }

/* Yıldızlar: dolu = güneş sarısı + koyu kenar; boş = yalnız kontur */
.yildizlar { display: flex; gap: 6px; color: var(--yildiz-bos); }
.yildiz { display: inline-flex; }
.yildiz svg { stroke-width: 1.6; }
.yildiz.dolu { color: var(--yildiz-kenar); }
.yildiz.dolu svg { fill: var(--yildiz); }

/* ===== Etkinlik ekranı (engine.js) =====
   .oyun-ekran[data-ekran="giris|oyun|sonuc|ara"] — üst çubuğun içeriği ekrana göre değişir. */
.oyun-ekran { position: fixed; inset: 0; z-index: 30; background: var(--zemin); display: flex; flex-direction: column; overflow: hidden; }
.oyun-ust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; flex: none;
  --kenar: clamp(16px, 2.7vw, 32px);
  padding-block: calc(clamp(14px, 1.8vw, 20px) + env(safe-area-inset-top, 0px)) 12px;
  padding-left: max(var(--kenar), env(safe-area-inset-left, 0px)); padding-right: max(var(--kenar), env(safe-area-inset-right, 0px));
}
.geri-btn { min-height: 52px; padding: 0 20px 0 14px; border-radius: 999px; border-color: var(--kum-kenar); font-family: var(--f-govde); font-size: 1.02rem; }
.geri-btn .ikon { width: 22px; height: 22px; }
.bolge-cip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 16px 4px 5px; border-radius: 999px; background: var(--kz); color: var(--k); font-weight: 800; font-size: .95rem; min-width: 0; }
.bolge-cip .mini { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.bolge-cip .mini .ikon { width: 18px; height: 18px; }
.oyun-baslik { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; }
.oyun-baslik b { font-family: var(--f-baslik); font-weight: 800; font-size: 1.45rem; line-height: 1.1; color: var(--deniz); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mod-cip { flex: none; }
.ilerleme { flex: 1 1 180px; min-width: 120px; height: 14px; border-radius: 7px; background: var(--cizgi); overflow: hidden; }
.ilerleme i { display: block; height: 100%; width: 0; background: var(--yaprak-koyu); border-radius: 7px; transition: width .25s; }
.hud { display: flex; gap: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .98rem; color: var(--metin); }
.hud:empty { display: none; }
/* üst çubuk: oyun dışında geri düğmesi + bölge çipi; oyunda Çık + ad + mod + ilerleme */
.oyun-ekran:not([data-ekran="oyun"]) .oyun-baslik,
.oyun-ekran:not([data-ekran="oyun"]) .ilerleme,
.oyun-ekran:not([data-ekran="oyun"]) .hud { display: none; }
.oyun-ekran[data-ekran="oyun"] .bolge-cip { display: none; }
.oyun-ekran[data-ekran="sonuc"] .geri-btn, .oyun-ekran[data-ekran="durdu"] .geri-btn { display: none; }

.sahne {
  flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding-block: 4px calc(20px + env(safe-area-inset-bottom, 0px));
  --kenar: clamp(16px, 2.7vw, 32px);
  padding-left: max(var(--kenar), env(safe-area-inset-left, 0px)); padding-right: max(var(--kenar), env(safe-area-inset-right, 0px));
  outline: none;
}
.sahne:focus, .sahne:focus-visible { outline: none; box-shadow: none; }
.sahne > * { max-width: 920px; width: 100%; }
.sahne > .giris-ekran, .sahne > .sonuc { max-width: 1160px; }
/* oyun alanı: beyaz büyük kart */
.oyun-ekran[data-ekran="oyun"] .sahne {
  background: var(--yuzey); border-radius: var(--r-b); box-shadow: 0 1px 0 rgba(14,79,92,.1);
  margin: 0 max(var(--kenar), env(safe-area-inset-right, 0px)) calc(var(--kenar) + env(safe-area-inset-bottom, 0px)) max(var(--kenar), env(safe-area-inset-left, 0px));
  padding: 24px 16px;
}
.oyun-ekran[data-ekran="oyun"] .sahne:focus-visible { box-shadow: 0 1px 0 rgba(14,79,92,.1); }
/* ara ekranlar (deneme bitti, durduruldu, hata): ortada beyaz kart */
.oyun-ekran[data-ekran="ara"] .sahne > .tanitim, .oyun-ekran[data-ekran="durdu"] .sahne > .tanitim {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-b); box-shadow: var(--golge);
  padding: clamp(20px, 3vw, 32px); margin-top: clamp(0px, 4vh, 40px);
}
.oyun-ekran[data-ekran="ara"] .tanitim .balon, .oyun-ekran[data-ekran="durdu"] .tanitim .balon { background: var(--zemin); box-shadow: none; border-color: var(--zemin); }
.oyun-ekran[data-ekran="ara"] .tanitim .balon::before, .oyun-ekran[data-ekran="durdu"] .tanitim .balon::before { background: var(--zemin); border-color: var(--zemin); }
.geri-say { font-family: var(--f-baslik); font-size: 120px; font-weight: 800; color: var(--k); text-align: center; margin-top: 12vh; }

/* Tanıtım (giriş) — 04/05 */
.tanitim { display: flex; flex-direction: column; gap: 18px; max-width: 680px !important; }
.giris-ekran { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: stretch; max-width: 1160px !important; flex: 1 0 auto; }
.tanitim-kart { display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 3.4vw, 40px); border-radius: var(--r-b); }
.tanitim-baslik { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.02; }
.tanitim-metin { font-size: 1.15rem; line-height: 1.5; color: #2C4A50; font-weight: 600; }
.tanitim-metin b { color: var(--k); }
.tanitim-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.adimlar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.adimlar li { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; font-weight: 700; }
.adimlar .no { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--kum); color: var(--deniz); display: grid; place-items: center; font-family: var(--f-baslik); font-weight: 800; font-size: 1.15rem; }
.tanitim-kart .eylem { margin-top: auto; justify-content: flex-start; padding-top: 6px; }
.tanitim-kart .eylem .btn { min-height: 64px; padding: 0 28px; font-size: 1.4rem; }
.tanitim-kart .eylem .btn.sade { font-size: 1.15rem; padding: 0 14px; }
.tanitim-bolge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; border-radius: var(--r-b); padding: 32px 24px; background: var(--kz); color: var(--k); text-align: center; }
.buyuk-simge { width: clamp(120px, 15vw, 180px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(10,60,70,.12); flex: none; }
.buyuk-simge .ikon { width: 53%; height: 53%; }
.en-iyi { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 800; }
.en-iyi .yildiz svg { width: 34px; height: 34px; }
.ornek { display: flex; justify-content: center; }
@media (max-width: 860px) {
  .giris-ekran { grid-template-columns: 1fr; gap: 14px; flex: 0 0 auto; }
  .tanitim-bolge { order: -1; flex-direction: row; justify-content: flex-start; gap: 18px; padding: 14px 18px; border-radius: var(--r); text-align: left; }
  .buyuk-simge { width: 76px; box-shadow: none; }
  .en-iyi { align-items: flex-start; gap: 2px; }
  .en-iyi .yildiz svg { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
  .tanitim-kart .eylem .btn { flex: 1 1 100%; min-height: 58px; font-size: 1.25rem; }
  .geri-btn { padding: 0 16px 0 10px; }
}
/* eski tanıtım düzeni (durduruldu / deneme bitti ekranları) */
.tanitim-ust { display: flex; gap: 14px; align-items: flex-start; }
.balon { position: relative; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 22px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 1; min-width: 0; font-size: 1.08rem; box-shadow: var(--golge); }
.balon::before { content: ""; position: absolute; left: -10px; top: 28px; width: 18px; height: 18px; background: var(--yuzey); border-left: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); transform: rotate(45deg); }
.balon b { color: var(--k, var(--deniz)); }
.adimlar-liste { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.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: 18px; border: 2px solid var(--kum-kenar-koyu);
  background: var(--yuzey); color: var(--metin); font-size: 1.15rem; font-weight: 800; 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: 600; font-size: 1.05rem; }
.sec:hover:not(:disabled) { border-color: var(--deniz); background: #FFFCF4; }
.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(--deniz); background: var(--kum); }
.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-2); border: 2px dashed var(--k); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: left; }
.sure-cubuk { width: min(320px, 80%); height: 10px; border-radius: 99px; background: var(--cizgi); 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: 24px; border: 0; background: var(--k); color: #fff; font-family: var(--f-baslik); font-size: 1.7rem; font-weight: 800; 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: 800; }
.uyaran-kutu svg { width: 72%; height: 72%; }

/* Sonuç — 07/08/09 */
.sonuc { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 600px; }
.sonuc.ikili { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: stretch; text-align: left; max-width: 1160px !important; flex: 1 0 auto; }
.sonuc-kart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: clamp(22px, 3.4vw, 40px); border-radius: var(--r-b); }
.sonuc h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.05; }
.sonuc .yildizlar { gap: 12px; }
.sonuc-kart .yildizlar .yildiz svg { width: clamp(52px, 7vw, 68px); height: auto; }
.yildiz.dolu svg { 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, .sonuc-alt { font-size: 1.15rem; line-height: 1.45; color: #2C4A50; max-width: 52ch; }
.rekor-cip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: var(--kum); color: var(--metin); font-size: 1rem; font-weight: 800; }
.rekor-cip.yeni { background: var(--gunes-zemin); color: #6B4600; }
.birincil { font-size: 1.05rem; } .birincil b { font-family: var(--f-baslik); font-size: 1.35rem; color: var(--deniz); }
.mini-grafik { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mini-grafik figcaption { font-size: .85rem; color: var(--soluk); }
.sonuc-yan { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kopru-kart { flex: 1 0 auto; background: var(--deniz); color: #fff; border-radius: var(--r-b); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.kopru-kart .kopru-etiket { font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gunes); }
.kopru-kart h3 { margin: 0; color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.15; }
.kopru-kart p { font-size: 1.08rem; line-height: 1.5; color: #E3F1F3; }
.sonuc-yan .eylem { flex-direction: column; align-items: stretch; gap: 12px; }
.sonuc-yan .eylem .btn { width: 100%; min-height: 64px; font-size: 1.3rem; }
.sonuc-yan .eylem .btn.sade { min-height: 52px; font-size: 1.15rem; }
@media (max-width: 860px) {
  .sonuc.ikili { grid-template-columns: 1fr; gap: 14px; flex: 0 0 auto; }
  .kopru-kart { flex: none; }
}
.ipucu, .kopru { width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--yuzey); border-left: 5px solid var(--k); }
.kopru { border-left-color: var(--deniz); }
.odul-listesi { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; }
.odul { display: flex; gap: 10px; align-items: center; background: var(--gunes-zemin); border-radius: 16px; padding: 10px 14px; border: 0; color: var(--metin); font-weight: 800; text-align: left; }
.odul .ikon { color: var(--yildiz-kenar); }
.aciklama-metin { max-width: 52ch; }

/* ===== İletişim kutusu (confirmBox, alertBox, mola, tanışma turu) ===== */
.perde { position: fixed; inset: 0; z-index: 60; background: rgba(10,40,46,.55); display: grid; place-items: center; padding: 16px; }
.pencere { background: var(--yuzey); border-radius: var(--r-b); padding: clamp(20px, 4vw, 32px); width: min(520px, 100%); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(10,60,70,.35); }
.pencere h2 { font-size: 1.75rem; color: var(--deniz); }
.pencere p { font-size: 1.05rem; line-height: 1.5; }
.pencere.kucuk { width: min(440px, 100%); text-align: center; align-items: center; }
.pencere.kucuk .eylem { width: 100%; }
.pencere.kucuk .eylem .btn { flex: 1 1 140px; }

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