/* Uygulama kabuğu: profil, ana ekran, harita, gelişim, öğretmen paneli + ortak form bileşenleri.
   Yeni ana ekran / ada haritası stilleri css/ada.css'te. Yalnız açık tema. */
:root { --harita-deniz: #D3ECF1; --harita-dalga: #B9DDE4; --harita-kara: var(--kum); --harita-sig: #E4F1E6; --harita-rota: #6E8FA3; }

.acilis { min-height: 100vh; display: grid; place-items: center; color: var(--soluk); }
.kabuk { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: calc(12px + env(safe-area-inset-top, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 18px; }
.sayfa-baslik { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.bolum-baslik { font-size: 1.3rem; }

/* Giriş ve profil */
.giris { max-width: 760px; padding-bottom: 32px; }
.giris-ust { display: flex; align-items: center; gap: 16px; padding-top: 12px; }
.giris-ust h1 { font-size: clamp(2rem, 6vw, 2.6rem); }
.profil-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.profil-kart { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: var(--r); border: 2px solid var(--cizgi); background: var(--yuzey); box-shadow: var(--golge); min-height: 160px; justify-content: center; }
.profil-kart:hover { border-color: var(--murekkep); }
.profil-kart b { font-size: 1.1rem; }
.profil-kart.yeni { border-style: dashed; box-shadow: none; }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-family: var(--f-baslik); font-weight: 800; flex: none; }
.avatar.arti { width: 64px; height: 64px; background: var(--yuzey-3); color: var(--murekkep); font-size: 32px; }
.karsilama { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; font-size: 1.1rem; }
.giris-alt { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border-top: 1px dashed var(--cizgi); padding-top: 12px; margin-top: 8px; }
.form { display: flex; flex-direction: column; gap: 18px; }
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan > span { font-weight: 700; }
.girdi { min-height: 52px; border-radius: 16px; border: 2px solid var(--cizgi-koyu); background: var(--yuzey); padding: 0 16px; font-size: 1.05rem; font-weight: 700; color: var(--metin); width: 100%; }
.girdi.kisa { width: auto; min-height: 48px; }
.girdi:focus { border-color: var(--deniz); outline: none; box-shadow: 0 0 0 4px var(--odak-halka); }
.girdi::placeholder { color: var(--metin-ikincil); font-weight: 600; opacity: .85; }
.secim-satir { display: flex; flex-wrap: wrap; gap: 8px; }
.secim { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--kum-kenar-koyu); background: var(--yuzey); color: var(--deniz); font-weight: 800; }
.secim:hover { background: #FFFCF4; }
.secim.secili { background: var(--ana); color: var(--ana-yazi); border-color: var(--ana); }

/* Üst çubuk ve gezinme */
.ust-cubuk { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profil-dugme { display: flex; align-items: center; gap: 10px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 99px; padding: 4px 16px 4px 4px; min-height: 50px; box-shadow: var(--golge); }
.profil-ad { font-weight: 700; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.durum { display: flex; gap: 8px; }
.durum-oge { display: inline-flex; align-items: center; gap: 4px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 99px; padding: 6px 12px; font-family: var(--f-baslik); font-size: 1.1rem; min-height: 40px; }
.durum-oge .ikon { color: var(--a-dikkat); }
.durum-oge.yildiz-say .ikon { color: var(--yildiz-kenar); fill: var(--yildiz); }
.durum-oge.buz .ikon { color: var(--a-bellek); }
.alt-gezinme { display: flex; gap: 6px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px; padding: 5px; box-shadow: var(--golge); }
.gez { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 13px; text-decoration: none; color: var(--soluk); font-weight: 700; }
.gez.etkin { background: var(--ana); color: var(--ana-yazi); }
@media (max-width: 640px) {
  .alt-gezinme { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; border-radius: 18px 18px 0 0; padding: 6px max(8px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px)); }
  .gez { flex-direction: column; gap: 2px; font-size: .78rem; min-height: 56px; }
  .profil-ad { display: none; }
  .profil-dugme { padding-right: 4px; }
}

/* Bugün */
.bugun { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bugun > .selam, .bugun > .gorev { grid-column: 1; }
.bugun > .hafta, .bugun > .olcum-kart, .bugun > .odev { grid-column: 2; }
.bugun > .selam { grid-row: 1; } .bugun > .gorev { grid-row: 2 / span 3; } .bugun > .hafta { grid-row: 1 / span 2; }
@media (max-width: 820px) { .bugun { grid-template-columns: 1fr; } .bugun > * { grid-column: 1 !important; grid-row: auto !important; } }
.selam { display: flex; gap: 12px; align-items: center; }
.gorev { display: flex; flex-direction: column; gap: 14px; }
.gorev-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gorev-ust h2 { font-size: 1.5rem; }
.cubuk { height: 10px; border-radius: 99px; background: var(--yuzey-3); overflow: hidden; flex: 1; }
.cubuk i { display: block; height: 100%; border-radius: 99px; background: var(--k, var(--ana)); transition: width .4s; }
.gorev-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gorev-oge { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--yuzey-2); border: 2px solid transparent; }
.gorev-oge.siradaki { border-color: var(--k); background: var(--yuzey); }
.gorev-oge .no { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--k); color: var(--k); font-family: var(--f-baslik); font-weight: 800; font-size: 1.1rem; }
.gorev-oge.bitti .no { background: var(--k); color: #fff; }
.gorev-metin { display: flex; flex-direction: column; min-width: 0; }
.gorev-metin b { font-size: 1.08rem; }
.anahtar { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; min-height: 48px; }
.anahtar input, .anahtar-kutu { width: 22px; height: 22px; accent-color: var(--odak); flex: none; }
.hafta { display: flex; flex-direction: column; gap: 12px; }
.gunler { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.gun { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gun span { width: 100%; aspect-ratio: 1; max-width: 44px; border-radius: 50%; border: 2px dashed var(--cizgi-koyu); display: grid; place-items: center; }
.gun.tamam span { background: var(--iyi); border: 0; color: #fff; }
.gun.bugun span { border-style: solid; border-color: var(--murekkep); }
.gun small { color: var(--soluk); font-size: .75rem; }
.olcum-kart { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; border: 2px solid var(--odak); }
/* başlangıç ölçümü / süren batarya: görevin üstünde ve vurgulu */
.bugun.olcum-once > .olcum-kart { grid-column: 1; grid-row: 2; }
.bugun.olcum-once > .gorev { grid-row: 3 / span 3; }
.olcum-kart.oncelikli { border-width: 3px; box-shadow: 0 0 0 4px var(--yuzey-3); background: var(--yuzey); }
.olcum-once-not { font-weight: 700; color: var(--murekkep); margin-top: 6px; }
.odev summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 4px 0; list-style-position: inside; }
.odev summary::-webkit-details-marker { margin-right: 4px; }
.odev-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.odev-form .girdi { flex: 1 1 180px; text-transform: uppercase; }

/* Harita */
.harita-sayfa { display: flex; flex-direction: column; gap: 12px; }
.harita-kutu { width: 100%; overflow: hidden; border-radius: 24px; box-shadow: var(--golge); }
.harita-svg { width: 100%; height: auto; display: block; }
.ada { cursor: pointer; outline: none; }
.ada:hover path:nth-child(2), .ada:focus-visible path:nth-child(2) { stroke-width: 7; }
.ada-ad { font-family: var(--f-baslik); font-weight: 800; font-size: 16px; fill: var(--murekkep); }
.ada-yildiz { font-family: var(--f-baslik); font-size: 16px; font-weight: 800; fill: var(--murekkep); }
.durak { fill: var(--harita-deniz); stroke: var(--k); stroke-width: 2; }
.durak.acik { fill: var(--k); }
.ada-detay { scroll-margin-bottom: 90px; }
.ada-detay h2 { display: flex; align-items: center; gap: 8px; color: var(--k); }
.ada-detay .kart { display: flex; flex-direction: column; gap: 10px; border-top: 5px solid var(--k); }

/* Etkinlik kartları */
.etkinlik-sayfa, .gelisim-sayfa { display: flex; flex-direction: column; gap: 18px; }
.alan-blok { display: flex; flex-direction: column; gap: 10px; }
.alan-blok h2 { display: flex; align-items: center; gap: 8px; color: var(--k); }
.etkinlik-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.etkinlik-kart { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r); background: var(--yuzey); border: 1px solid var(--cizgi); border-top: 5px solid var(--k); box-shadow: var(--golge); min-height: 150px; }
.etkinlik-kart:hover { border-color: var(--k); }
.etkinlik-kart b { font-family: var(--f-baslik); font-weight: 800; font-size: 1.2rem; }
.ek-simge { color: var(--k); }
.ek-alt { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--soluk); }
.mini-yildiz { display: inline-flex; color: var(--yildiz-bos); }
.mini-yildiz .dolu { color: var(--yildiz-kenar); } .mini-yildiz .dolu svg { fill: var(--yildiz); }
.uyari-not { font-size: .8rem; color: var(--uyari); font-weight: 700; }

/* Gelişim */
.alan-cubuklar { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.alan-cubuk { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 2fr) 40px; gap: 12px; align-items: center; }
.ac-ad { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--k); }
.alan-cubuk b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .alan-cubuk { grid-template-columns: minmax(0, 1fr) 40px; } .alan-cubuk .cubuk { grid-column: 1 / -1; grid-row: 2; } }
.rekor-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rekor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--yuzey-2); border-left: 5px solid var(--k); }
.rekor b { flex: 1 1 140px; }
.egilim { font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }
.egilim.artis { color: var(--iyi); } .egilim.dusus { color: var(--soluk); }
.rozet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.rozet { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px; border-radius: 14px; background: var(--yuzey-2); opacity: .6; }
.rozet.var { opacity: 1; background: var(--yuzey); border: 2px solid var(--yildiz); }
.rozet-simge { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--yuzey-3); }
.rozet.var .rozet-simge { background: var(--yildiz); color: var(--metin); }

/* Ayarlar penceresi */
.ayar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.ayar > span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.ayar input[type=range] { width: min(220px, 100%); min-height: 44px; accent-color: var(--odak); cursor: pointer; }
.pencere.tur .balon { font-size: 1.1rem; }

/* Şifre */
.pin-noktalar { display: flex; justify-content: center; gap: 14px; }
.pin-noktalar span { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--deniz); }
.pin-noktalar span.dolu { background: var(--deniz); }
.pin-tuslar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-tuslar button { min-height: 64px; border-radius: 20px; border: 2px solid var(--kum-kenar-koyu); background: var(--yuzey); color: var(--deniz); font-family: var(--f-baslik); font-size: 1.6rem; font-weight: 800; }
.pin-tuslar button:hover { background: #FFFCF4; }
.pin-tuslar button:active { background: var(--kum); }
.pin-tuslar button.yan { font-family: var(--f-govde); font-size: .95rem; color: var(--metin-ikincil); border-color: var(--cizgi); background: var(--yuzey-2); }

/* Bildirim */
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--deniz-koyu); color: #fff; padding: 14px 20px; border-radius: 18px; font-weight: 800; max-width: min(92vw, 480px); box-shadow: 0 12px 30px -10px rgba(10,60,70,.5); border-left: 6px solid var(--gunes); transition: opacity .4s, transform .4s; }
.toast.git { opacity: 0; transform: translate(-50%, 10px); }

/* Öğretmen paneli */
.ogretmen { max-width: 1100px; }
.og-ust { display: flex; align-items: center; gap: 14px; }
.og-ust h1 { font-size: clamp(1.4rem, 3.6vw, 2rem); }
.tablo-kutu { overflow-x: auto; }
.tablo { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tablo th, .tablo td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); white-space: nowrap; }
.tablo td.sayi { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.uyari-listesi { display: flex; flex-wrap: wrap; gap: 4px; }
.uyari-cip { font-size: .78rem; padding: 2px 8px; border-radius: 99px; background: var(--kotu-zemin); color: var(--kotu); font-weight: 700; white-space: nowrap; }
.eylem.sola { justify-content: flex-start; }
.btn.tehlike { color: var(--kotu); border-color: var(--kotu); }
.secim-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.alan-secim { border: 1px solid var(--cizgi); border-top: 4px solid var(--k); border-radius: 12px; padding: 8px 12px; margin: 0; }
.alan-secim legend { font-weight: 700; color: var(--k); display: inline-flex; gap: 4px; align-items: center; padding: 0 4px; }
.onay { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.onay input { width: 20px; height: 20px; accent-color: var(--odak); }
.kod-satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kod { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.4rem; letter-spacing: .08em; background: var(--yuzey-2); padding: 8px 14px; border-radius: 10px; user-select: all; }
.kod-cikti { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ozet-sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ozet-sayi { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; }
.ozet-sayi b { font-family: var(--f-baslik); font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.ozet-sayi span { color: var(--soluk); font-size: .88rem; }
.grafik-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 10px; }
.grafik-kart { margin: 0; background: var(--yuzey-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.grafik-kart figcaption { display: flex; flex-direction: column; }
.hukum { font-weight: 700; font-size: .92rem; } .hukum.iyi { color: var(--iyi); } .hukum.kotu { color: var(--kotu); }
.spark svg { display: block; }
.kart > h2 + * { margin-top: 6px; }
.kart h3 { margin-top: 12px; font-size: 1.1rem; }

/* Sürüm 1.1 */
.guncelle-bant { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--gunes-zemin); border: 0; border-radius: 20px; padding: 10px 12px 10px 18px; }
.guncelle-bant span { display: inline-flex; align-items: center; gap: 8px; color: #6B4600; font-weight: 800; }
.guncelle-bant .btn { min-height: 48px; }
.kurulum { display: flex; flex-direction: column; gap: 12px; border-top: 5px solid var(--odak); }
.alan-hata { color: var(--kotu); font-weight: 700; min-height: 1.2em; font-size: .95rem; }
.girdi[aria-invalid="true"] { border-color: var(--kotu); }
.oneri-kutu { background: var(--yuzey-2); border-radius: 14px; padding: 12px 14px; border: 2px solid var(--cizgi-koyu); }
.oneri { display: flex; gap: 8px; align-items: flex-start; }
.oneri .ikon { margin-top: 3px; color: var(--odak); }
.oneri-kutu .satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.olcum-ilerleme { margin-top: 4px; }
.olcum-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.olcum-oge { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--cizgi); }
.olcum-oge .oo-simge { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--cizgi-koyu); }
.olcum-oge.tamam .oo-simge { background: var(--iyi); border-color: var(--iyi); color: #fff; }
.olcum-oge.yeniden .oo-simge { border-color: var(--uyari); color: var(--uyari); }
.olcum-oge.yeniden small { color: var(--uyari); font-weight: 700; }
.aks-ayar { align-items: flex-start; }
.aks-izgara { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow: auto; padding: 2px; }
.aks-sec { width: 64px; height: 64px; border-radius: 18px; border: 2px solid var(--cizgi); background: var(--yuzey-2); display: grid; place-items: center; padding: 0; }
.aks-sec.secili { border-color: var(--deniz); border-width: 3px; background: var(--yuzey); }
.mola .pencere { align-items: center; }
.mola-sayac { font-family: var(--f-baslik); font-weight: 800; font-size: 2.4rem; color: var(--deniz); font-variant-numeric: tabular-nums; }
.onay .sira { min-width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; }
.onay .sira:not(:empty) { background: var(--odak); color: var(--yuzey); }
.secim-sirasi { font-weight: 700; color: var(--murekkep); }
.kod.kucuk { font-size: 1rem; padding: 2px 8px; }
.odev-dokum { margin: 0; padding-left: 20px; }
.odev-bilgi { width: 100%; }
.pin-tuslar.kilitli button:not(.yan) { opacity: .4; pointer-events: none; }
.durduruldu .balon p + p { color: var(--soluk); }

/* Sürüm 2.0 — kurum modu */
.mod-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mod-kart { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--r); border: 2px solid var(--cizgi); background: var(--yuzey); box-shadow: var(--golge); min-height: 200px; }
.mod-kart:hover { border-color: var(--murekkep); }
.mod-kart b { font-family: var(--f-baslik); font-weight: 800; font-size: 1.3rem; line-height: 1.2; }
.mod-kart small { margin-top: auto; }
.mod-simge { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--yuzey-3); color: var(--odak); }
.mod-kart.kurum { border-top: 5px solid var(--odak); }
.mod-kart.yerel { border-top: 5px solid var(--a-uzamsal); }
.mod-kart.yerel .mod-simge { color: var(--a-uzamsal); }
.kod-girdi { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.6rem; letter-spacing: .18em; text-transform: uppercase; text-align: center; max-width: 320px; }
.profil-kart.kopuk { border-style: dashed; opacity: .75; }
.ust-sol { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.esitleme-rozet { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--soluk); white-space: nowrap; min-height: 30px; }
.esitleme-rozet::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.esitleme-rozet.iyi { color: var(--iyi); }
.esitleme-rozet.bekliyor { color: var(--uyari); border-color: var(--uyari); }
.esitleme-rozet.kotu { color: var(--kotu); border-color: var(--kotu); }
.esitleme-rozet.suruyor::before { animation: rozet-nabiz 1s ease-in-out infinite alternate; }
@keyframes rozet-nabiz { from { opacity: .3; } to { opacity: 1; } }
@media (max-width: 640px) { .esitleme-rozet { font-size: .74rem; padding: 3px 8px; white-space: normal; } }

/* ===================================================================================================
   ETKİNLİK EKRANLARI — Yön 1 (engine.js: giriş · oyun · ara/durdu · sonuç). Gündüz + gece (yalnız --y-* belirteçleri).
   Tasarım: Giris/Oyun/Sonuc(.dc) — üst çubuk 68px, kartlar 18px köşe + 1px kenar, ana düğme deniz rengi.
   app.css'teki eski etkinlik ekranı kurallarının üstüne yazar (hepsi .oyun-ekran altında).
   =================================================================================================== */
.oyun-ekran { background: var(--y-zemin); color: var(--y-metin); font-family: var(--govde); }
.oyun-ekran h1, .oyun-ekran h2, .oyun-ekran h3 { color: var(--y-metin); font-family: var(--baslik); }

/* --- Üst çubuk --- */
.oyun-ekran .oyun-ust {
  flex-wrap: nowrap; gap: 16px; min-height: 68px;
  padding-block: calc(12px + env(safe-area-inset-top, 0px)) 12px;
  background: var(--y-ust); border-bottom: 1px solid var(--y-kenar);
}
.oyun-ekran .geri-btn {
  flex: none; min-height: 44px; height: 44px; padding: 0 16px 0 12px; gap: 8px; border-radius: var(--y-r-k);
  border: 1px solid var(--y-kenar); background: transparent; color: var(--y-metin);
  font-family: var(--govde); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.oyun-ekran .geri-btn:hover { background: var(--y-yuzey-2); border-color: var(--y-kenar-2); }
.oyun-ekran .geri-btn .ikon { width: 18px; height: 18px; }
.oyun-ekran .konum { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; color: var(--y-metin-2); white-space: nowrap; }
.oyun-ekran .konum > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oyun-ekran .konum > span[aria-hidden] { flex: none; }
.oyun-ekran .konum-nokta { width: 8px; height: 8px; border-radius: 2px; background: var(--kn, var(--k)); flex: none; }
.oyun-ekran .konum-bolge { flex: 0 1 auto; }
.oyun-ekran .konum-burada { font-weight: 700; color: var(--y-metin); flex: 0 1 auto; }
.oyun-ekran[data-ekran="oyun"] .konum { display: none; }
.oyun-ekran .oyun-baslik { gap: 12px; flex: 0 1 auto; }
.oyun-ekran .oyun-baslik b { font-family: var(--baslik); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--y-metin); }
.oyun-ekran .mod-cip { padding: 4px 10px; border-radius: 8px; background: var(--y-gelecek); color: var(--y-metin-2); font-size: 12px; font-weight: 700; }
.oyun-ekran .ilerleme { flex: 1 1 160px; min-width: 80px; height: 8px; border-radius: 4px; background: var(--y-iz); }
.oyun-ekran .ilerleme i { background: var(--y-ana); border-radius: 4px; }
.oyun-ekran .hud { gap: 12px; font-size: 14px; font-weight: 700; color: var(--y-metin-2); }
.oyun-ekran .tema-btn {
  margin-left: auto; flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  border-radius: var(--y-r-k); border: 1px solid var(--y-kenar); background: var(--y-yuzey); color: var(--y-metin);
}
.oyun-ekran[data-ekran="oyun"] .tema-btn { margin-left: 0; }

@media (min-width: 1100px) { .oyun-ekran .oyun-ust { min-height: 76px; } }

/* --- Sahne (oyun alanı kabı) --- */
.oyun-ekran .sahne { padding-top: clamp(14px, 3.4vh, 28px); gap: 16px; }
.oyun-ekran[data-ekran="oyun"] .sahne {
  background: var(--y-yuzey); border-radius: var(--y-r); box-shadow: inset 0 0 0 1px var(--y-kenar);
  margin: 12px max(var(--kenar), env(safe-area-inset-right, 0px)) calc(20px + 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: inset 0 0 0 1px var(--y-kenar); }
/* oyun içi ortak öğeler (engine'in kurduğu soru/geri bildirim) gece modunda da belirteçle */
.oyun-ekran .sec:hover:not(:disabled) { background: var(--y-yuzey-2); }
.oyun-ekran .gb-isaret { color: var(--y-yuzey); }
.oyun-ekran .btn:not(.ana):not(.alan):not(.sade):hover { background: var(--y-yuzey-2); }
.oyun-ekran .btn.sade:hover { background: var(--y-yumusak); }
/* oyun içindeki ana düğmeler de Yön 1 ana rengi (etkinlik CSS'i kendi sınıfıyla ezebilir) */
.oyun-ekran .sahne .btn.ana { background: var(--y-ana); border-color: var(--y-ana); color: var(--y-ana-uzeri); }
.oyun-ekran .sahne .btn.ana:hover { background: var(--y-ana-koyu); border-color: var(--y-ana-koyu); }

/* --- Ortak kart + düğmeler (giriş, ara ekranlar, sonuç) --- */
.oyun-ekran .y-kart { background: var(--y-yuzey); border: 1px solid var(--y-kenar); border-radius: var(--y-r); box-shadow: var(--y-golge); min-width: 0; }
.oyun-ekran .sahne > .tanitim .btn, .oyun-ekran .sonuc .btn {
  min-height: 56px; padding: 0 22px; gap: 10px; border-radius: var(--y-r-d); border: 1px solid var(--y-kenar-2);
  background: transparent; color: var(--y-metin); font-family: var(--govde); font-weight: 600; font-size: 16px;
}
.oyun-ekran .sahne > .tanitim .btn.ana, .oyun-ekran .sonuc .btn.ana { background: var(--y-ana); border-color: var(--y-ana); color: var(--y-ana-uzeri); font-weight: 700; font-size: 17px; padding: 0 28px; }
.oyun-ekran .sahne > .tanitim .btn.ana:hover, .oyun-ekran .sonuc .btn.ana:hover { background: var(--y-ana-koyu); border-color: var(--y-ana-koyu); }
.oyun-ekran .sahne > .tanitim .btn.sade { border-color: transparent; color: var(--y-ana); font-weight: 700; font-size: 15px; padding: 0 14px; gap: 8px; }
.oyun-ekran .sahne > .tanitim .btn .ikon, .oyun-ekran .sonuc .btn .ikon { width: 20px; height: 20px; }

/* --- Giriş (tanıtım) --- */
.oyun-ekran .sahne > .giris-ekran, .oyun-ekran .sahne > .sonuc.ikili { max-width: 1240px !important; width: 100%; }
.oyun-ekran .giris-ekran { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; }
.oyun-ekran .tanitim-kart { padding: 36px; gap: 22px; border-radius: var(--y-r); }
.oyun-ekran .tanitim-meta { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--y-metin-2); }
.oyun-ekran .tanitim-baslik { margin-top: 8px; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.oyun-ekran .tanitim-metin { margin-top: 12px; font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--y-metin-2); max-width: 60ch; }
.oyun-ekran .tanitim-metin b { color: var(--y-metin); font-weight: 800; }
.oyun-ekran .tanitim-cipler { gap: 8px; }
.oyun-ekran .tanitim-cipler .cip { padding: 6px 12px; border-radius: 8px; background: var(--y-gelecek); color: var(--y-metin); font-size: 13px; font-weight: 700; }
.oyun-ekran .tanitim-cipler .cip.alan-cip { background: var(--kz); color: var(--k); }
.oyun-ekran .tanitim-cipler .cip.duzey-cip { background: var(--y-yumusak); color: var(--y-yumusak-metin); }
.oyun-ekran .tanitim-cipler .cip .ikon { width: 16px; height: 16px; }
.oyun-ekran .tanitim-kart .adimlar { gap: 14px; }
.oyun-ekran .tanitim-kart .adimlar li { gap: 14px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--y-metin); }
.oyun-ekran .tanitim-kart .adimlar .no { width: 30px; height: 30px; background: var(--y-gelecek); color: var(--y-metin); font-family: var(--govde); font-size: 14px; font-weight: 800; }
.oyun-ekran .tanitim-kart .not.vurgu { padding: 10px 14px; border-radius: var(--y-r-k); background: var(--y-yumusak); color: var(--y-yumusak-metin); font-size: 15px; font-weight: 600; line-height: 1.4; }
.oyun-ekran .tanitim-kart .eylem { margin-top: auto; justify-content: flex-start; gap: 12px; padding-top: 0; }
.oyun-ekran .tanitim-yan { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.oyun-ekran .yan-kart { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.oyun-ekran .yan-kart h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.oyun-ekran .yan-kart.ozet { gap: 16px; }
/* bölge paneli: bölge tint'i, ortada beyaz simge karosu + bölge adı (örnek varsa altında "Nasıl oynanır?") */
.oyun-ekran .bolge-panel {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; border-radius: var(--y-r); background: var(--kz); color: var(--k); text-align: center;
}
.oyun-ekran .bolge-karo { width: 120px; height: 120px; flex: none; border-radius: 28px; background: var(--y-yuzey); color: var(--k); display: grid; place-items: center; }
.oyun-ekran .bolge-karo .ikon { width: 56px; height: 56px; }
.oyun-ekran .bolge-ad { font-size: 17px; font-weight: 700; color: var(--k); }
.oyun-ekran .bolge-panel.ornekli { gap: 10px; padding: 20px; }
.oyun-ekran .bolge-panel.ornekli .bolge-karo { width: 72px; height: 72px; border-radius: 20px; }
.oyun-ekran .bolge-panel.ornekli .bolge-karo .ikon { width: 36px; height: 36px; }
.oyun-ekran .bolge-panel .nasil { align-self: stretch; margin-top: 4px; padding: 14px 16px 16px; border-radius: var(--y-r-k); background: var(--y-yuzey); color: var(--y-metin); text-align: left; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.oyun-ekran .bolge-panel .nasil h2 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--y-metin); }
.oyun-ekran .bolge-panel .ornek { overflow-x: auto; }
.oyun-ekran .bolge-panel .ornek > * { max-width: 100%; }
.oyun-ekran .bolge-panel .ornek svg { max-width: 100%; height: auto; }
.oyun-ekran .en-iyi { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; font-size: 14px; font-weight: 600; color: var(--y-metin-2); }
.oyun-ekran .en-iyi .not { font-size: 14px; }
.oyun-ekran .en-iyi .yildizlar { gap: 2px; }
.oyun-ekran .en-iyi .yildiz svg { width: 22px; height: 22px; }
.oyun-ekran .ayrac { height: 1px; background: var(--y-kenar); flex: none; }
.oyun-ekran .beceriler h3 { margin: 0 0 8px; font-family: var(--govde); font-size: 14px; font-weight: 600; color: var(--y-metin-2); }
.oyun-ekran .beceri-cipler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.oyun-ekran .beceri-cipler li { padding: 6px 12px; border-radius: 8px; background: var(--y-yumusak); color: var(--y-yumusak-metin); font-size: 13px; font-weight: 700; line-height: 1.3; }
/* yatay tablet (1194×834, 1024×768, 1366×768): Başla / Deneme turu kaydırmadan görünsün */
@media (min-width: 861px) and (max-height: 920px) {
  .oyun-ekran .giris-ekran { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .oyun-ekran .tanitim-kart { padding: clamp(24px, 4.2vh, 36px) clamp(26px, 3vw, 36px); gap: clamp(14px, 2.4vh, 22px); }
  .oyun-ekran .tanitim-baslik { font-size: clamp(34px, 5vh, 44px); }
  .oyun-ekran .tanitim-metin { font-size: clamp(16px, 2.2vh, 19px); line-height: 1.45; margin-top: 10px; }
  .oyun-ekran .tanitim-kart .adimlar { gap: clamp(8px, 1.5vh, 14px); }
  .oyun-ekran .tanitim-kart .adimlar li { font-size: 15px; }
  .oyun-ekran .tanitim-kart .not { margin: 0; }
  .oyun-ekran .tanitim-kart .eylem .btn { min-height: 52px; }
  .oyun-ekran .yan-kart { padding: clamp(18px, 2.8vh, 24px); }
  .oyun-ekran .bolge-karo { width: clamp(88px, 14vh, 120px); height: clamp(88px, 14vh, 120px); }
  .oyun-ekran .bolge-panel.ornekli .bolge-karo { width: 64px; height: 64px; }
}
/* alçak yatay ekran (1024×768, 1366×768): örnekli bölge panelinde karo gizlenir, ad küçük başlık olur */
@media (min-width: 861px) and (max-height: 800px) {
  .oyun-ekran .bolge-panel.ornekli { gap: 8px; padding: 16px; }
  .oyun-ekran .bolge-panel.ornekli .bolge-karo { display: none; }
  .oyun-ekran .bolge-panel.ornekli .bolge-ad { font-size: 15px; }
  .oyun-ekran .bolge-panel .nasil { padding: 12px 14px 14px; gap: 8px; }
  .oyun-ekran .tanitim-yan { gap: 16px; }
  .oyun-ekran .yan-kart.ozet { gap: 12px; }
}
@media (max-width: 860px) {
  .oyun-ekran .giris-ekran { grid-template-columns: 1fr; gap: 16px; }
  .oyun-ekran .tanitim-kart { padding: 26px 24px; gap: 18px; }
  .oyun-ekran .tanitim-baslik { font-size: clamp(32px, 7vw, 40px); }
  .oyun-ekran .tanitim-metin { font-size: 17px; }
}
@media (max-width: 480px) {
  .oyun-ekran .tanitim-kart { padding: 22px 18px; }
  .oyun-ekran .yan-kart { padding: 20px 18px; }
  .oyun-ekran .tanitim-kart .eylem .btn { flex: 1 1 100%; }
}

/* --- Ara ekranlar: deneme bitti, tur durduruldu, hata --- */
.oyun-ekran[data-ekran] .sahne > .tanitim.ara-kart {
  background: var(--y-yuzey); border: 1px solid var(--y-kenar); border-radius: var(--y-r); box-shadow: var(--y-golge);
  padding: clamp(22px, 3.4vw, 36px); margin-top: clamp(0px, 6vh, 56px); max-width: 640px !important; gap: 22px;
}
.oyun-ekran[data-ekran] .tanitim.ara-kart .balon { background: transparent; border: 0; box-shadow: none; padding: 6px 0 0; font-size: 18px; line-height: 1.5; color: var(--y-metin); }
.oyun-ekran[data-ekran] .tanitim.ara-kart .balon::before { display: none; }
.oyun-ekran[data-ekran] .tanitim.ara-kart .balon b { color: var(--y-metin); }
.oyun-ekran[data-ekran] .tanitim.ara-kart .balon p + p { color: var(--y-metin-2); }
.oyun-ekran[data-ekran] .tanitim.ara-kart .eylem { justify-content: flex-start; }
.oyun-ekran[data-ekran] .tanitim.ara-kart .mesaj { text-align: left; }

/* --- Sonuç --- */
.oyun-ekran .sonuc.ikili { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; }
.oyun-ekran .sonuc-kart { align-items: stretch; justify-content: flex-start; text-align: left; padding: clamp(24px, 3.2vw, 36px); gap: 24px; border-radius: var(--y-r); }
.oyun-ekran .sonuc-ust { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; }
.oyun-ekran .sonuc h1 { font-size: clamp(34px, 4.6vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.oyun-ekran .sonuc .yildizlar { gap: 8px; }
.oyun-ekran .sonuc-kart .yildizlar .yildiz svg { width: 48px; height: 48px; }
.oyun-ekran .sonuc .kiyas, .oyun-ekran .sonuc .sonuc-alt { font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--y-metin-2); max-width: 56ch; }
.oyun-ekran .sonuc-kart .not { color: var(--y-metin-2); font-size: 15px; }
.oyun-ekran .sonuc-kart .not.vurgu { padding: 10px 14px; border-radius: var(--y-r-k); background: var(--y-yumusak); color: var(--y-yumusak-metin); font-weight: 600; }
.oyun-ekran .rekor-cip { min-height: 34px; padding: 0 12px; gap: 8px; border-radius: 10px; background: var(--y-yuzey-2); color: var(--y-metin-2); font-size: 14px; font-weight: 700; }
.oyun-ekran .rekor-cip:not(.yeni) .ikon { display: none; }
.oyun-ekran .rekor-cip.yeni { background: var(--y-seri-zemin); color: var(--y-seri-metin); }
.oyun-ekran .sonuc-olcu { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.oyun-ekran .birincil { font-size: 15px; color: var(--y-metin-2); }
.oyun-ekran .birincil b { font-family: var(--baslik); font-size: 22px; color: var(--y-metin); }
.oyun-ekran .mini-grafik { align-items: flex-start; }
.oyun-ekran .mini-grafik figcaption { color: var(--y-metin-2); font-size: 13px; }
.oyun-ekran .odul-listesi { max-width: none; }
.oyun-ekran .odul { background: var(--y-seri-zemin); color: var(--y-metin); border-radius: var(--y-r-k); font-size: 15px; padding: 10px 14px; }
.oyun-ekran .odul .ikon { color: var(--y-seri-metin); }
.oyun-ekran .plan-kutu { width: 100%; padding: 18px 20px; border-radius: var(--y-r-d); background: var(--y-yuzey-2); display: flex; flex-direction: column; gap: 10px; }
.oyun-ekran .plan-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.oyun-ekran .plan-ust b { font-size: 15px; font-weight: 800; }
.oyun-ekran .plan-ust span, .oyun-ekran .plan-kalan { font-size: 14px; color: var(--y-metin-2); }
.oyun-ekran .plan-kalan strong { color: var(--y-metin); }
.oyun-ekran .plan-cubuk { height: 8px; border-radius: 4px; background: var(--y-iz); overflow: hidden; }
.oyun-ekran .plan-cubuk i { display: block; height: 100%; border-radius: 4px; background: var(--y-ana); }
.oyun-ekran .sonuc-yan { gap: 20px; }
.oyun-ekran .kopru-kart { flex: 1 0 auto; justify-content: center; background: var(--y-yumusak); color: var(--y-yumusak-metin); border-radius: var(--y-r); padding: clamp(22px, 2.7vw, 32px); gap: 14px; }
.oyun-ekran .kopru-kart .kopru-etiket { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--y-yumusak-metin); }
.oyun-ekran .kopru-kart h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--y-yumusak-metin); }
.oyun-ekran .kopru-kart p { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--y-yumusak-metin); }
.oyun-ekran .sonuc-yan .eylem { flex-direction: column; align-items: stretch; gap: 12px; }
.oyun-ekran .sonuc-yan .eylem .btn { width: 100%; min-height: 56px; }
.oyun-ekran .eylem-ikincil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oyun-ekran .eylem-ikincil.tek { grid-template-columns: 1fr; }
.oyun-ekran .sonuc-yan .eylem-ikincil .btn { min-height: 52px; padding: 0 12px; font-size: 15px; }
@media (max-width: 860px) {
  .oyun-ekran .sonuc.ikili { grid-template-columns: 1fr; gap: 16px; }
  .oyun-ekran .kopru-kart { flex: none; }
}

/* --- Telefon / dar ekran: üst çubuk iki satır (Çık + ad / ilerleme + sayaç) --- */
@media (max-width: 640px) {
  .oyun-ekran .oyun-ust { flex-wrap: wrap; gap: 8px 12px; min-height: 0; padding-block: calc(9px + env(safe-area-inset-top, 0px)) 9px; }
  .oyun-ekran[data-ekran="oyun"] .sahne { margin-top: 10px; margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .oyun-ekran .oyun-baslik { flex: 1 1 calc(100% - 140px); gap: 10px; }
  .oyun-ekran .oyun-baslik b { font-size: 17px; }
  .oyun-ekran .ilerleme { flex: 1 1 120px; }
  .oyun-ekran .hud { margin-left: auto; }
  .oyun-ekran .konum { flex: 1 1 0; font-size: 14px; }
  .oyun-ekran .konum-bolge, .oyun-ekran .konum > span[aria-hidden]:not(.konum-nokta) { display: none; }
  .oyun-ekran .tema-btn { margin-left: 0; }
}