:root{font-family:Arial,Helvetica,sans-serif;color:#172820;background:#f3f7f5}*{box-sizing:border-box}body{margin:0}header{background:#007c49;color:white;padding:18px max(20px,calc((100vw - 1050px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand small{letter-spacing:2px;font-weight:800;font-size:11px}.brand h1{margin:3px 0;font-size:26px}nav{display:flex;gap:8px}button,.filebutton{border:0;border-radius:9px;padding:12px 17px;cursor:pointer;font-weight:800;font-size:14px;background:#e7f4ed;color:#08683d}nav button{background:#09673f;color:white}nav button.active{background:white;color:#007c49}button:hover,.filebutton:hover{filter:brightness(.94)}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:#008c50;color:white}.danger{background:#fbe8e8;color:#a02a2a}main{max-width:1050px;margin:32px auto;padding:0 18px;min-height:70vh}.panel{background:white;border:1px solid #e0e9e3;border-radius:17px;padding:34px;box-shadow:0 10px 30px #153d2510}.center{text-align:center}.emblem{font-size:52px}.panel h2{font-size:28px}.panel p{line-height:1.6}.muted{color:#64756a}input,textarea{font:inherit;border:2px solid #d7e4dc;border-radius:9px;padding:13px;width:100%;background:white}input:focus,textarea:focus{outline:2px solid #87cfa9}label{display:block;font-weight:700;text-align:left;margin:14px 0 6px}#intro>input{max-width:360px;display:block;margin:10px auto 18px}#intro>label{text-align:center}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stats>div{background:#173329;color:#d1e7d9;padding:15px;border-radius:11px;font-size:11px;font-weight:800;letter-spacing:1px}.stats strong{display:block;color:white;font-size:24px;letter-spacing:0;margin-top:5px;overflow-wrap:anywhere}.tag{display:inline-block;color:#007c49;background:#e5f6eb;padding:8px 14px;border-radius:99px;font-weight:800;font-size:12px;text-transform:uppercase}#question{margin:24px auto;max-width:760px;line-height:1.35}.letters{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin:26px auto}.letter{width:38px;height:47px;border:2px solid #cbdcd2;border-radius:6px;background:#f6faf8;display:grid;place-items:center;font-size:20px;font-weight:900}.letter.space{border:0;background:none;width:14px}.answer{display:flex;gap:10px;max-width:650px;margin:auto}.answer input{flex:1;min-width:0}.actions,.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.actions{justify-content:center}#feedback{font-weight:800;min-height:24px}.good{color:#00854b}.bad{color:#c52839}.big{font-size:60px;color:#008c50;display:block;margin:12px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}#questionsList{display:grid;gap:9px}.qrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:#f4f8f6;border-radius:10px}.qrow p{margin:5px 0;font-size:13px;color:#637267}.qrow .toolbar{margin:0;flex-shrink:0}.qrow button{padding:8px 10px}footer{text-align:center;color:#738277;padding:20px;font-size:12px}[hidden]{display:none!important}@media(max-width:650px){header{padding:16px}main{margin:16px auto}.panel{padding:23px 15px}.stats{gap:5px}.stats>div{padding:10px 5px;text-align:center;font-size:9px}.stats strong{font-size:18px}.letter{width:29px;height:39px;font-size:16px}.answer{flex-direction:column}.formgrid{grid-template-columns:1fr}.qrow{align-items:flex-start;flex-direction:column}.panel h2{font-size:23px}}

/* v0.5 stüdyo teması */
body{background:radial-gradient(ellipse at 50% 0%,#174a38 0%,#071b17 62%,#06130f 100%);min-height:100vh}
.studio{position:relative;overflow:hidden;border:1px solid rgba(72,221,157,.35);box-shadow:0 16px 60px #0005, inset 0 0 60px #00894a18}
.studio::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#00a95c,#f8fffa,#00a95c)}
.studio .spotlight{position:absolute;pointer-events:none;inset:0;background:radial-gradient(circle at 50% 0%,#00aa6430,transparent 65%)}
.letter{transition:transform .25s,background .25s;animation:letterIn .35s ease both}
@keyframes letterIn{from{opacity:.4;transform:rotateY(90deg)}to{opacity:1;transform:rotateY(0)}}
.flash-good{animation:goodFlash .6s ease}.flash-bad{animation:badFlash .5s ease}
@keyframes goodFlash{50%{box-shadow:0 0 65px #19d884aa}}@keyframes badFlash{50%{box-shadow:0 0 65px #ff4b5caa}}
#difficulty{background:#e5b94b;color:#132b22}#leaderRows .qrow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
#searchQuestions{flex:1;min-width:180px}#filterDifficulty{min-width:145px}#musicToggle,#soundToggle{font-size:13px}
@media(prefers-reduced-motion:reduce){.letter,.flash-good,.flash-bad{animation:none!important;transition:none!important}}

/* v0.6 studio enhancements */
body{background:radial-gradient(ellipse at 50% -10%,#126c64 0%,#071d25 42%,#031014 100%);min-height:100vh}
.studio{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(155deg,#102c36,#07141d 56%,#053a2c);border:1px solid #2f9278;box-shadow:0 18px 55px #0008,inset 0 0 60px #00c88018}
.studio>*:not(.spotlight):not(.stage-lights){position:relative;z-index:2}
.stage-lights{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 20% 0%,#19eab02b,transparent 40%),radial-gradient(ellipse at 80% 0%,#4fc6ff26,transparent 40%);animation:lights 6s ease-in-out infinite alternate}
@keyframes lights{from{opacity:.35;transform:translateX(-3%)}to{opacity:1;transform:translateX(3%)}}
.round-track{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:4px;margin:12px 0}
.round-dot{font-size:11px;font-weight:800;border-radius:6px;text-align:center;padding:6px 0;background:#15313a;color:#9cb9b4;border:1px solid #295158}
.round-dot.completed{background:#07814b;color:#fff}.round-dot.current{background:#f4ca55;color:#132326;box-shadow:0 0 15px #f4ca5577}
.timer-ring{--remaining:100%;width:105px;height:105px;margin:0 auto 12px;border-radius:50%;background:conic-gradient(#34e5a5 var(--remaining),#183943 0);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 24px #24f0aa55;position:relative!important;color:#fff}
.timer-ring:before{content:'';position:absolute;inset:9px;border-radius:50%;background:#071b23;z-index:-1}.timer-ring span{font-size:38px;font-weight:900;line-height:1}.timer-ring small{font-size:10px;letter-spacing:2px}.timer-ring.urgent{background:conic-gradient(#f8ae32 var(--remaining),#183943 0)}.timer-ring.critical{background:conic-gradient(#fa445d var(--remaining),#183943 0);animation:heartbeat .5s infinite alternate}
@keyframes heartbeat{to{transform:scale(1.065);box-shadow:0 0 34px #fa445d99}}
.letter{transform-style:preserve-3d;transition:transform .45s,box-shadow .45s,background .45s;box-shadow:inset 0 -4px #0005,0 3px 8px #0004}.letter.revealed{animation:flipLetter .65s ease both;background:#087d55;box-shadow:0 0 18px #23f5a48a,inset 0 -4px #00442d}
@keyframes flipLetter{0%{transform:rotateY(90deg) scale(.85)}100%{transform:rotateY(0) scale(1)}}
body.celebrate #questionPanel{box-shadow:0 0 70px #19f4a5, inset 0 0 80px #14e89d55}body.wrong-shake #questionPanel{animation:shake .35s ease;background:#421a29}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.round-overlay:not([hidden]){position:fixed;inset:0;z-index:999;background:#020b10e8;display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px)}
.round-dialog{width:min(540px,100%);text-align:center;padding:52px 25px;border:2px solid #26e3a4;border-radius:24px;background:radial-gradient(circle at top,#105747,#071c25 70%);box-shadow:0 0 90px #08b97555;color:#fff;animation:dialogIn .45s ease}
.round-dialog span{color:#f8d76c;letter-spacing:5px;font-weight:900}.round-dialog h2{font-size:clamp(30px,6vw,58px);margin:18px 0}.round-dialog p{margin-bottom:26px}
@keyframes dialogIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
#end{position:relative;overflow:hidden}#end>*:not(canvas){position:relative;z-index:2}#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#shareResult{margin:8px;background:#f0c85a;color:#10242b;font-weight:800}
@media(max-width:600px){.round-dot{font-size:9px;padding:5px 0}.timer-ring{width:85px;height:85px}.timer-ring span{font-size:31px}.round-track{gap:2px}}
@media(prefers-reduced-motion:reduce){.stage-lights,.timer-ring.critical,.letter.revealed,.round-dialog,body.wrong-shake #questionPanel{animation:none!important}}

/* v0.7: accessible local-only demo login and suggestion forms */
#adminGate,#suggest .panel{max-width:850px;margin:0 auto 22px}#loginForm{max-width:420px;margin:20px auto;display:grid;gap:12px}#loginForm input{width:100%}#loginMsg{color:#ff8181;min-height:1.4em}#suggestForm{display:grid;gap:16px}#suggestForm>label{display:grid;gap:8px}#suggestForm textarea,#suggestForm input{width:100%}#suggestionsList .qrow{gap:14px}#adminContent .toolbar h2{margin-right:auto}@media(max-width:650px){#suggestionsList .qrow{flex-direction:column;align-items:stretch}}

/* v0.8: dark studio contrast, animations, mobile controls */
#questionPanel,#questionPanel h2,#questionPanel #question,#questionPanel #length,#questionPanel #feedback{color:#f6fffb!important;text-shadow:0 1px 3px #001b19!important}
#questionPanel #length{color:#c9e6de!important}#questionPanel #feedback.bad{color:#ffb7bf!important}#questionPanel #feedback.good{color:#7dffb8!important}
#questionPanel .letter{color:#0d2823!important}#questionPanel .letter.revealed{color:white!important}
#questionPanel .tag{color:#063c29!important}#questionPanel #difficulty{color:#162a22!important}
#questionPanel .stage-lights{animation:lights 5s ease-in-out infinite alternate;filter:saturate(1.5)}
#questionPanel .spotlight{animation:spotMove 7s ease-in-out infinite alternate}
@keyframes spotMove{to{transform:translateX(6%);opacity:.7}}
#pointBurst{position:absolute;z-index:5;left:50%;top:43%;transform:translate(-50%,-50%);pointer-events:none;font-size:clamp(32px,7vw,64px);font-weight:1000;color:#7dffbd;text-shadow:0 3px 30px #002f20;opacity:0}
#pointBurst.pop{animation:pointPop 1.15s ease-out forwards}@keyframes pointPop{0%{opacity:0;transform:translate(-50%,-15%) scale(.5)}25%{opacity:1;transform:translate(-50%,-65%) scale(1.2)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-125%) scale(.95)}}
.letter.answer-reveal{background:#078b5a!important;color:white!important;animation:answerFlip .55s ease both;box-shadow:0 0 20px #33f9acaa}
@keyframes answerFlip{from{transform:rotateY(95deg)}to{transform:rotateY(0)}}
.hint-text{color:#b9ffe2!important;border:1px solid #40b98e;background:#064034;padding:12px;border-radius:12px;font-weight:700}
.keyboard{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;margin:18px auto 0;max-width:680px}.keyboard button{min-width:0;padding:10px 2px;background:#173f42;color:#f7fffd;border:1px solid #438778;border-radius:7px;font-size:15px}.keyboard button:active{background:#00a86c}.keyboard .key-wide{grid-column:span 2;background:#095d4c}
.result-analysis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:550px;margin:18px auto}.result-analysis div{background:#e8f6ef;border-radius:12px;padding:12px;color:#124d36;font-weight:800}
#reportsList .qrow{margin:9px 0}#questionPanel .actions button{line-height:1.35}
@media(max-width:650px){.keyboard{grid-template-columns:repeat(9,minmax(0,1fr));gap:3px}.keyboard button{font-size:13px;padding:10px 1px}.result-analysis{grid-template-columns:1fr 1fr}#questionPanel #question{font-size:clamp(20px,5vw,28px)}}
@media(prefers-reduced-motion:reduce){#questionPanel .spotlight,#pointBurst,.letter.answer-reveal{animation:none!important}}

/* v0.9: enforce accessible contrast on all dark studio panels including intro. */
#intro,#intro h2,#intro p,#intro label,#intro .muted,#introNote{color:#f5fffa!important;text-shadow:0 1px 2px #00140f!important}
#intro .muted,#introNote{color:#c9eee0!important}
#intro input{color:#122820!important;background:#fff!important}
#intro input::placeholder{color:#52665f!important}
#questionPanel #question{color:#fff!important}
#end{color:#17372d;background:#fff}
.share-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:15px auto}
.share-buttons button{font-weight:800;background:#e5f6ee;color:#074b32;border:1px solid #91d9b8}
.share-buttons button:hover{background:#c6f3db}
#shareNote{max-width:580px;margin:12px auto;color:#50685d}
@media(max-width:650px){.share-buttons button{flex:1 1 42%;font-size:13px}}

/* v1.3 — Bursasporluyuz branded landing page */
main:has(#intro:not([hidden])){max-width:1350px;margin:28px auto}
#intro{isolation:isolate;padding:34px clamp(15px,3vw,42px) 30px;background:radial-gradient(ellipse at 50% 3%,#0d6b4c80,transparent 45%),linear-gradient(160deg,#0a2829,#061819 70%,#073629);border-color:#16bd80;border-top:6px solid #16bd80;box-shadow:0 22px 75px #0008;}
#intro:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(110deg,transparent 0 55px,#2adf9c13 56px 58px,transparent 59px 130px),radial-gradient(ellipse at 50% 100%,#0ca86d,transparent 55%)}
#intro .intro-hero{max-width:850px;margin:0 auto 25px}
#intro .intro-logo{display:block;width:min(530px,95%);height:auto;margin:0 auto 10px;filter:drop-shadow(0 7px 14px #0008)}
#intro .intro-title{font-size:clamp(40px,7vw,84px);letter-spacing:-2px;font-weight:1000;line-height:1.02;margin:12px auto 5px;color:#fff!important;text-shadow:0 5px 20px #0009!important}
#intro .intro-title em{font-style:normal;color:#39eb87}
#intro .intro-subtitle{font-weight:900;font-size:clamp(15px,2.4vw,24px);letter-spacing:3px;color:#b5ffd7!important;margin:9px auto}
#intro .intro-lead{max-width:710px;margin:15px auto 0;font-size:16px;color:#e4f8ef!important}
#intro .intro-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;text-align:left;margin:32px auto 24px}
#intro .intro-card{display:flex;gap:12px;align-items:flex-start;padding:18px 14px;min-height:160px;background:#052b25d9;border:1px solid #20b779;border-radius:15px;box-shadow:inset 0 0 28px #1cdb7d10}
#intro .intro-card h3{font-size:16px;margin:2px 0 9px;color:#fff;letter-spacing:.2px}
#intro .intro-card p{font-size:13px;line-height:1.55;margin:0;color:#e3f8ed!important}
#intro .intro-icon{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border-radius:12px;background:#0d694d;color:#f1fff6;font-size:29px;box-shadow:0 0 20px #12a96b60}
#intro .intro-form{max-width:440px;margin:20px auto 0}
#intro .intro-form label{text-align:center;font-size:17px;margin-bottom:9px;color:#fff!important}
#intro .intro-form input{display:block;margin:0 auto 15px;width:100%;max-width:none;height:54px;border-radius:12px;font-size:17px}
#intro .intro-form #start{display:block;width:100%;padding:17px 18px;background:linear-gradient(110deg,#00b56d,#00945e);color:#fff;border:1px solid #55f1a3;border-radius:13px;font-size:19px;box-shadow:0 8px 24px #00a56a66}
#intro .intro-form #start:hover{filter:brightness(1.13)}
#intro #introNote{font-size:13px;min-height:1.5em;margin:12px auto;color:#c8f7dc!important}
#intro .intro-quote{font-style:italic;font-size:clamp(17px,2.4vw,24px);margin:18px auto 0;color:#e6ffed!important}
@media(max-width:950px){#intro .intro-cards{grid-template-columns:repeat(2,minmax(0,1fr))}#intro .intro-card{min-height:140px}}
@media(max-width:550px){#intro{padding:20px 13px}#intro .intro-cards{gap:9px}#intro .intro-card{display:block;padding:13px 10px;min-height:185px}#intro .intro-icon{margin-bottom:9px}#intro .intro-card h3{font-size:13px}#intro .intro-card p{font-size:12px}#intro .intro-title{letter-spacing:-1px}#intro .intro-subtitle{letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){#intro .intro-form #start{transition:none}}