:root{
  --zemin:#12101f;
  --kat:#1d1a33;
  --kat2:#272248;
  --vurgu:#2ee6c5;
  --sari:#ffcb45;
  --mercan:#ff5c7a;
  --metin:#ece9ff;
  --sonuk:#9a93bf;
  --alt: max(24px, env(safe-area-inset-bottom));
  --ust: env(safe-area-inset-top);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--zemin);
  color:var(--metin);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
  overscroll-behavior-y:contain;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
#uygulama{
  height:100dvh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-top:var(--ust);
}
@supports (height:100dvh){ #uygulama{min-height:0} }

.gizli{display:none !important}

/* ---------- SAYAC: asla yeniden cizilmez, rAF ile guncellenir ---------- */
#sayac{
  flex:0 0 auto;
  padding:10px 16px 8px;
  text-align:center;
}
#sayacSayi{
  font-size:44px;
  font-weight:800;
  line-height:1;
  font-feature-settings:"tnum" 1;
  letter-spacing:-1px;
  color:var(--vurgu);
}
#sayacSayi.az{color:var(--mercan)}
#sayacCubuk{
  margin-top:8px;height:6px;border-radius:99px;background:#2a2545;overflow:hidden;
}
#sayacDolgu{display:block;height:100%;width:100%;background:var(--vurgu);border-radius:99px;transition:background .3s}
#sayacDolgu.az{background:var(--mercan)}
#sayac.dev{padding-top:6vh}
#sayac.dev #sayacSayi{font-size:26vh}

/* ---------- EKRAN ---------- */
#ekran{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0 16px var(--alt);
  overflow:hidden;
}
.kaydir{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
.orta{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0;gap:14px}
.altBlok{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:10px}

h1.marka{
  font-size:40px;font-weight:900;letter-spacing:-1.5px;color:var(--vurgu);text-align:center;
}
.slogan{text-align:center;color:var(--sonuk);font-size:15px;margin-top:4px}
.baslik{font-size:22px;font-weight:800;text-align:center}
.ipucu{font-size:13px;color:var(--sonuk);text-align:center;line-height:1.5}
.etiket{font-size:12px;color:var(--sonuk);letter-spacing:1px;font-weight:700}

input{
  width:100%;font-size:18px;padding:15px 16px;border-radius:14px;
  border:2px solid #332d55;background:#191630;color:var(--metin);
  font-family:inherit;touch-action:manipulation;
}
input:focus{outline:none;border-color:var(--vurgu)}
input#kodGiris{text-align:center;letter-spacing:8px;font-size:26px;font-weight:800}

button{
  font-family:inherit;font-size:18px;font-weight:800;
  padding:16px 18px;border-radius:16px;border:0;
  background:var(--kat2);color:var(--metin);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;cursor:pointer;
  width:100%;
}
button:focus-visible{outline:3px solid var(--sari);outline-offset:2px}
button:active{transform:scale(.98)}
button[disabled]{opacity:.35}
button.ana{background:var(--vurgu);color:#0c1a17}
button.sari{background:var(--sari);color:#2b2000}
button.hayalet{background:transparent;border:2px solid #3a3462;color:var(--sonuk);font-size:15px;padding:12px}
button.kucuk{font-size:14px;padding:10px;width:auto}

/* ---------- KART ---------- */
.kart{
  background:linear-gradient(160deg,#241f42,#1a1730);
  border:1px solid #3a3462;
  border-radius:22px;padding:18px 16px;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.kelime{font-size:clamp(26px,8vw,42px);font-weight:900;color:var(--vurgu);line-height:1.1;word-break:break-word}
.yasakBaslik{margin:14px 0 8px;font-size:11px;letter-spacing:2px;color:var(--mercan);font-weight:800}
.yasaklar{list-style:none;display:flex;flex-direction:column;gap:6px}
.yasaklar li{
  font-size:clamp(15px,4.6vw,20px);font-weight:700;color:#ffd9e2;
  background:rgba(255,92,122,.10);border-radius:10px;padding:7px 8px;
}

/* ---------- LISTELER ---------- */
.takimlar{display:flex;gap:10px}
.takim{flex:1;background:var(--kat);border-radius:16px;padding:12px;border:2px solid transparent}
.takim.t0{border-color:rgba(46,230,197,.5)}
.takim.t1{border-color:rgba(255,203,69,.5)}
.takim h3{font-size:13px;letter-spacing:1px;margin-bottom:8px}
.takim.t0 h3{color:var(--vurgu)}
.takim.t1 h3{color:var(--sari)}
.takim ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.takim li{font-size:15px;padding:6px 8px;border-radius:9px;background:#221e3d}
.takim li.ben{outline:1px solid var(--vurgu)}
.takim li.kopuk{opacity:.45}
.rozet{font-size:10px;font-weight:800;padding:1px 5px;border-radius:5px;margin-left:5px;vertical-align:1px}
.rozet.a{background:var(--vurgu);color:#0c1a17}
.rozet.g{background:var(--mercan);color:#2a0410}
.rozet.k{background:#3a3462;color:var(--metin)}

.odaKodu{
  font-size:clamp(44px,16vw,72px);font-weight:900;letter-spacing:10px;
  color:var(--sari);text-align:center;line-height:1;padding-left:10px;
}
.skorSatir{display:flex;gap:10px;text-align:center}
.skorKutu{flex:1;background:var(--kat);border-radius:14px;padding:10px}
.skorKutu .ad{font-size:12px;letter-spacing:1px;font-weight:700}
.skorKutu .p{font-size:34px;font-weight:900;line-height:1.1}
.skorKutu.t0 .ad,.skorKutu.t0 .p{color:var(--vurgu)}
.skorKutu.t1 .ad,.skorKutu.t1 .p{color:var(--sari)}
.skorKutu.aktif{outline:2px solid currentColor}

.rolSerit{
  text-align:center;font-size:12px;font-weight:800;letter-spacing:2px;
  padding:6px;border-radius:99px;background:var(--kat);color:var(--sonuk);
}
.rolSerit.anlatici{background:rgba(46,230,197,.15);color:var(--vurgu)}
.rolSerit.gozcu{background:rgba(255,92,122,.15);color:var(--mercan)}

button.dogru{background:var(--vurgu);color:#0c1a17;font-size:24px;padding:24px}
button.pas{background:#332d55;color:var(--metin)}
/* ---- Gozcu karar bloku (DESIGN 12.4) ----
   Ceza tusu en pahali hata (-1). Basparmagin dogal dinlenme yerinden UZAK dursun:
   en ustte, altinda ayirac var. DOGRU en altta ve en buyuk (en sik basilan). */
.kararBlok{gap:8px}
button.cezaBtn{
  background:var(--mercan);color:#2a0410;font-size:26px;font-weight:900;
  letter-spacing:2px;padding:16px;border-radius:16px;
}
.cezaNotu{font-size:11px;color:var(--sonuk);text-align:center;margin-top:-2px}
.cezaNotu b{color:var(--mercan)}
.ayirac{
  height:1px;background:#3a3462;margin:10px 4px 4px;border-radius:99px;
}
button.pas{background:#332d55;color:var(--metin);font-size:18px;padding:15px}
.kararNotu{
  text-align:center;font-size:14px;font-weight:700;color:var(--sari);
  background:rgba(255,203,69,.10);border-radius:12px;padding:10px 12px;margin-top:12px;
}
/* Gozcude kart daralir ki uc dugme de rahat sigsin */
.kart.kartDar{padding:14px 12px}
.yasaklar.yasakDar{gap:4px}
.yasaklar.yasakDar li{font-size:clamp(14px,4vw,17px);padding:5px 8px}
.pasSayi{font-size:12px;color:var(--sonuk);text-align:center}

/* ---------- TOAST ---------- */
#toast{
  position:fixed;left:0;right:0;
  top:calc(var(--ust) + 8px);
  transition:top .2s ease;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;z-index:40;padding:0 16px;
}
/* Sayac gorunurken toast onu kapatmasin */
body.sayacVar #toast{top:calc(var(--ust) + 82px)}
body.sayacDev #toast{top:calc(var(--ust) + 40vh)}

.toast{
  background:#2b2650;color:var(--metin);border-radius:99px;
  padding:9px 18px;font-size:15px;font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  animation:tst 2.6s ease forwards;max-width:100%;
}
.toast.iyi{background:var(--vurgu);color:#0c1a17}
.toast.kotu{background:var(--mercan);color:#2a0410}
.toast.uyari{background:var(--sari);color:#2b2000}
@keyframes tst{0%{opacity:0;transform:translateY(-14px)}10%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}

/* ---------- DIK TUT ---------- */
#dikTut{
  position:fixed;inset:0;background:var(--zemin);z-index:60;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
}
.dikSimge{
  width:54px;height:86px;border:4px solid var(--vurgu);border-radius:12px;margin:0 auto 18px;
  animation:dnd 2s ease-in-out infinite;
}
@keyframes dnd{0%,100%{transform:rotate(90deg)}40%,80%{transform:rotate(0)}}
#dikTut h2{font-size:22px;letter-spacing:1px}
#dikTut p{color:var(--sonuk);margin-top:8px}
@media (orientation:landscape) and (max-height:520px){
  #dikTut.acik{display:flex !important}
}

/* ---------- KURULUM SERIDI ---------- */
.serit{
  background:var(--kat);border:1px dashed #3a3462;border-radius:14px;
  padding:10px 12px;font-size:13px;color:var(--sonuk);text-align:center;line-height:1.5;
}
.serit b{color:var(--metin)}
.serit.kopuk{
  border-style:solid;border-color:var(--mercan);color:var(--mercan);
  font-weight:700;margin-bottom:8px;flex:0 0 auto;
}

/* ---------- HAKKINDA ---------- */
.hakkinda{font-size:14px;line-height:1.65;color:var(--sonuk)}
.hakkinda h3{color:var(--metin);font-size:15px;margin:16px 0 6px}
.hakkinda p{margin-bottom:6px}
.durumNokta{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--mercan);margin-right:6px}
.durumNokta.acik{background:var(--vurgu)}
.baglantiSerit{font-size:12px;color:var(--sonuk);text-align:center;padding:4px}