/* Zihin Adası — tasarım sistemi Yön 1 (2026-11-04; kanvas "Zihin Adası Tasarımları", gündüz + gece)
   Gündüz varsayılan; gece modu html[data-tema="gece"] ile (belirteçler aşağıda).
   Yazı: Plus Jakarta Sans 400–800 (başlık ve 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: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url(../fonts/plus-jakarta-sans-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+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: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-ext-400-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: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-500-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: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-ext-500-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: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url(../fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url(../fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url(../fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url(../fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url(../fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url(../fonts/plus-jakarta-sans-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 {
  /* 0) Yön 1 yüzey belirteçleri (tasarım: "Zihin Adası Tasarımları" kanvası, Yön 1 gündüz/gece).
        Yeni kod bunları kullanır; gece modu yalnız bu blok ve bölge renkleriyle değişir. */
  --y-zemin: #F4F2ED;       /* sayfa zemini */
  --y-ust: #FFFFFF;         /* üst çubuk */
  --y-yuzey: #FFFFFF;       /* kart */
  --y-yuzey-2: #F8F7F3;     /* kart içi satır, tamamlanmış öğe */
  --y-kenar: #E4E0D6;       /* kart kenarı */
  --y-kenar-2: #D5D0C4;     /* ikincil düğme kenarı */
  --y-iz: #ECE8DF;          /* ilerleme çubuğu izi */
  --y-ayrac: #EFEBE3;
  --y-metin: #14262B; --y-metin-2: #55666A; --y-metin-3: #8A989B;
  --y-ana: #0E4F5C; --y-ana-uzeri: #FFFFFF;   /* ana düğme / seçili sekme */
  --y-ana-koyu: #0A3C46;                      /* ana düğme üzerine gelme */
  --y-yumusak: #EAF3F4; --y-yumusak-metin: #0E3E48;   /* ipucu kutusu */
  --y-basari: #2F6E3E; --y-basari-zemin: #E3F0E5;
  --y-seri-zemin: #FDF1DC; --y-seri-metin: #7A4A00;   /* günlük seri çipi */
  --y-amber: #C98A0E;                         /* haftalık hedef dolgusu */
  --y-gelecek: #F1EEE7;                       /* henüz yapılmamış gün/adım */
  --y-yildiz-bos: #A39A86;
  --y-perde: rgba(20,38,43,.32);              /* yan panel arkası */
  --y-hap: #FFFFFF; --y-hap-golge: 0 1px 2px rgba(20,38,43,.12);   /* bölümlü süzgeç seçili hapı */
  --y-marka: #0E4F5C; --y-logo-zemin: #0E4F5C; --y-logo-ada: #F6EBD3;
  --y-golge: 0 1px 2px rgba(20,38,43,.06);
  --y-r: 18px; --y-r-k: 12px; --y-r-d: 14px;  /* kart / satır / düğme köşe yarıçapı */

  /* 1) Tasarım paleti (eski adlar Yön 1'e eşlendi) */
  --deniz: var(--y-ana); --deniz-koyu: var(--y-ana-koyu); --deniz-acik: #2A8C9C;
  --kum: var(--y-gelecek); --zemin: var(--y-zemin);
  --mercan: #F0714B; --mercan-koyu: #B9452A;
  --yaprak: #4C9A5B; --yaprak-koyu: #3B8149;
  --gunes: #F4B942; --gunes-acik: #F7C760; --gunes-zemin: var(--y-seri-zemin);
  --metin: var(--y-metin); --metin-ikincil: var(--y-metin-2);
  --cizgi: var(--y-ayrac); --kum-kenar: var(--y-kenar); --kum-kenar-koyu: var(--y-kenar-2);
  --baslik: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --govde: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  /* 2) Bölge renkleri: mürekkep (metin/simge) / tint (zemin) / nokta (süs, çubuk dolgusu) */
  --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 (24 etkinlik CSS'i ve panel.css kullanır; SİLMEYİN) */
  --bg: var(--y-zemin); --bg-desen: var(--y-zemin);
  --yuzey: var(--y-yuzey); --yuzey-2: var(--y-yuzey-2); --yuzey-3: var(--y-ayrac);
  --murekkep: var(--y-metin); --soluk: var(--y-metin-2);
  --cizgi-koyu: #9A8A6C;                 /* giriş/seçenek kenarı: yüzey üzerinde ≥3:1 */
  --ana: var(--y-ana); --ana-yazi: var(--y-ana-uzeri);
  --odak: var(--y-ana);
  --iyi: var(--y-basari); --iyi-zemin: var(--y-basari-zemin); --kotu: #B9452A; --kotu-zemin: #FCE5DC; --uyari: #8A5A00;
  --yildiz: var(--gunes); --yildiz-kenar: #B07A00; --yildiz-bos: var(--y-yildiz-bos);
  --maskot-govde: var(--deniz-acik); --maskot-gogus: #F6EBD3; --maskot-gozalti: #FFFFFF; --maskot-goz: #0A3C46; --maskot-gaga: var(--gunes);
  --f-baslik: var(--baslik); --f-govde: var(--govde);
  --r: var(--y-r); --r-k: var(--y-r-k); --r-b: 22px;
  --golge: var(--y-golge);

  /* 4) Bileşen */
  --odak-halka: #F4B942;
  --metin-boyut: 17px;
  color-scheme: light;
}
/* GECE MODU: <html data-tema="gece">. Yalnız belirteçler değişir; bileşenler belirteç kullanmalı (sabit #fff yazmayın). */
/* DİKKAT: css/act-uyaran.css (.uyaran-karti: ölçüm/uyaran panelleri gece de gündüz renkleriyle) bu bloğun GÜNDÜZ değerlerini kopyalar; :root değişirse orayı da güncelleyin. */
html[data-tema="gece"] {
  --y-zemin: #0F1A1D; --y-ust: #121F23; --y-yuzey: #16252A; --y-yuzey-2: #1B2D33;
  --y-kenar: #26393F; --y-kenar-2: #34494F; --y-iz: #26393F; --y-ayrac: #22343A;
  --y-metin: #E8F0F1; --y-metin-2: #9FB3B7; --y-metin-3: #6F868B;
  --y-ana: #5CC8D4; --y-ana-uzeri: #0B1A1E; --y-ana-koyu: #7FD6DF;
  --y-yumusak: #163A42; --y-yumusak-metin: #CFE9EC;
  --y-basari: #6CC287; --y-basari-zemin: #1E3626;
  --y-seri-zemin: #3A2C12; --y-seri-metin: #F4C861;
  --y-amber: #F4B942; --y-gelecek: #1E3036; --y-yildiz-bos: #5D7378;
  --y-perde: rgba(0,0,0,.5); --y-hap: #34494F; --y-hap-golge: none;
  --y-marka: #FFFFFF; --y-logo-zemin: #F6EBD3; --y-logo-ada: #0E4F5C;
  --y-golge: none;
  --deniz-acik: #6FD0DB;
  --mercan: #F49A7C; --mercan-koyu: #F49A7C; --yaprak: #7BC48A; --yaprak-koyu: #6CC287;
  --a-dikkat: #F4C861;  --a-dikkat-zemin: #3A3218;  --a-dikkat-nokta: #F4C861;
  --a-bellek: #7BC48A;  --a-bellek-zemin: #1E3626;  --a-bellek-nokta: #7BC48A;
  --a-isitsel: #E28BBE; --a-isitsel-zemin: #3A2232; --a-isitsel-nokta: #E28BBE;
  --a-algi: #8EA8EE;    --a-algi-zemin: #232E45;    --a-algi-nokta: #8EA8EE;
  --a-uzamsal: #F49A7C; --a-uzamsal-zemin: #3C2620; --a-uzamsal-nokta: #F49A7C;
  --a-akil: #A99BE8;    --a-akil-zemin: #2B2743;    --a-akil-nokta: #A99BE8;
  --a-sozel: #6FD0DB;   --a-sozel-zemin: #173A40;   --a-sozel-nokta: #6FD0DB;
  --cizgi-koyu: #6F868B;
  --kotu: #F49A7C; --kotu-zemin: #3C2620; --uyari: #F4C861;
  --yildiz-kenar: #F4C861;
  --maskot-goz: #0B1A1E;
  color-scheme: dark;
}
/* 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 (Yön 1) =====
   .btn (ikincil: saydam + ince kenar) · .btn.ana (deniz mavisi, gece açık turkuaz + koyu yazı) · .btn.sade (çerçevesiz)
   .btn.alan (bölge rengi) · .btn.kucuk · .btn.tam · .btn.tehlike. Renkler yalnız belirteçten (gece modu). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: var(--y-r-d);
  border: 1px solid var(--y-kenar-2); background: transparent; color: var(--y-metin);
  font-family: var(--f-govde); font-weight: 600; font-size: 16px; line-height: 1.15; text-decoration: none; text-align: center;
  user-select: none; -webkit-user-select: none; cursor: pointer;
  transition: transform .08s, background-color .15s, border-color .15s;
}
.btn:hover { background: var(--y-yuzey-2); border-color: var(--y-metin-3); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.ana { background: var(--y-ana); border-color: var(--y-ana); color: var(--y-ana-uzeri); font-weight: 700; font-size: 17px; }
.btn.ana:hover { background: var(--y-ana-koyu); border-color: var(--y-ana-koyu); }
.btn.sade { background: transparent; border-color: transparent; color: var(--y-ana); font-weight: 700; }
.btn.sade:hover { background: var(--y-yumusak); }
.btn.alan { background: var(--k); border-color: var(--k); color: var(--ana-yazi); }
.btn.tehlike { color: var(--kotu); border-color: var(--kotu); }
.btn.kucuk { min-height: 44px; padding: 0 16px; border-radius: var(--y-r-k); font-size: 15px; }
.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(--y-ana); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; min-height: 44px; font-weight: 700; cursor: pointer; }
.eylem { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }

/* ===== Kartlar, çipler ===== */
.kart { background: var(--y-yuzey); border-radius: var(--y-r); border: 1px solid var(--y-kenar); box-shadow: none; 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(--y-seri-zemin); color: var(--y-seri-metin); }
.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: var(--y-yuzey); 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: var(--y-metin); 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: var(--y-yuzey); 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; }
/* yatay tablet (ör. 1194×834): giriş kartı tek ekrana sığsın, düğmeler kaydırmadan görünsün */
@media (min-width: 861px) and (max-height: 920px) {
  .giris-ekran { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .tanitim-kart { gap: 14px; padding: 26px 30px; }
  .tanitim-baslik { font-size: clamp(2rem, 4.2vw, 2.7rem); }
  .tanitim-metin { font-size: 1.08rem; line-height: 1.45; }
  .adimlar { gap: 8px; }
  .adimlar .no { width: 32px; height: 32px; font-size: 1.05rem; }
  .tanitim-kart .eylem { padding-top: 0; gap: 10px; }
  .tanitim-kart .eylem .btn { min-height: 58px; padding: 0 22px; font-size: 1.3rem; }
  .tanitim-kart .eylem .btn.sade { padding: 0 10px; font-size: 1.05rem; }
  .tanitim-kart .not { margin: 0; }
}
@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: var(--ana-yazi); 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: var(--y-yuzey-2); }
.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: var(--ana-yazi); 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: var(--y-metin); 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(--y-seri-zemin); color: var(--y-seri-metin); }
.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(--y-ozet-zemin, var(--y-ana)); color: var(--y-ozet-metin, var(--y-ana-uzeri)); 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: inherit; 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: var(--y-ozet-govde, inherit); }
.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,.45); display: grid; place-items: center; padding: 16px; }
.pencere { background: var(--yuzey); color: var(--y-metin); border-radius: var(--y-r); 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.5rem; color: var(--y-metin); }
.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; } }

/* ödevde çalışma düzeyi */
.duzey-liste h3 { margin: 16px 0 4px; font-size: 1.05rem; }
.duzey-satirlar { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.duzey-satirlar li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-radius: 12px; background: var(--kum, #F3EBD8); }
.duzey-satirlar .ad { font-weight: 800; min-width: 150px; flex: 1 1 150px; }
.duzey-sec { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.duzey-sec .girdi { width: auto; min-width: 0; }
.duzey-sec select:disabled { opacity: .5; }
.duzey-ogr { margin-top: 12px; }
.duzey-ogr summary { cursor: pointer; font-weight: 800; color: var(--deniz, #0E4F5C); }
small.blok { display: block; margin-top: 2px; }