/* Atölye masası: açık tonlu kağıt zemin, kartlar ortada, sağda çalışma paneli */
:root{--bg:#f4f1ec;--card:#fffdfa;--ink:#2b2622;--muted:#756a61;--line:#e3dbd1;--accent:#8a6a52;--btn-ink:#fffdfa;--note:#fff6e3;--note-line:#ecd4a2;--stage:#ebe6df;--field:#fffdfa}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1d1a18;--card:#262220;--ink:#efe8df;--muted:#b0a59b;--line:#3b3531;--accent:#d2ae8f;--btn-ink:#1d1a18;--note:#3a3022;--note-line:#6b5631;--stage:#161412;--field:#1f1c1a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1d1a18;--card:#262220;--ink:#efe8df;--muted:#b0a59b;--line:#3b3531;--accent:#d2ae8f;--btn-ink:#1d1a18;--note:#3a3022;--note-line:#6b5631;--stage:#161412;--field:#1f1c1a;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Montserrat,system-ui,sans-serif;font-size:15px}
[hidden]{display:none!important}
.top{display:flex;align-items:center;gap:12px;padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line);background:var(--card)}
.brand{font-family:'Playfair Display',Georgia,serif;font-size:22px;color:var(--ink);text-decoration:none}
.tag{font-size:12px;color:var(--muted)}
#catalog{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hero{max-width:900px;margin:32px auto 8px;text-align:center}
.hero h1{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:34px;margin:0 0 8px;text-wrap:balance}
.hero p{color:var(--muted);margin:0 auto;max-width:60ch;line-height:1.5}
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px auto}
.filters button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 16px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--btn-ink);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px;max-width:1200px;margin:0 auto 60px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;transition:transform .15s}
.tile:hover{transform:translateY(-2px)}
.tile .thumb{display:flex;align-items:center;justify-content:center;height:230px;background:var(--stage);border-radius:6px;margin-bottom:6px}
.tile svg{max-width:88%;max-height:205px;width:auto;height:auto;box-shadow:0 3px 12px #0003}
.tile b{font-size:13px}.tile span{font-size:12px;color:var(--muted)}
#editor{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:calc(100vh - 60px)}
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:10px;background:var(--stage);min-width:0}
.paper{width:100%;max-width:560px;display:flex;justify-content:center}
.paper svg{width:auto;height:auto;max-width:100%;max-height:78vh;box-shadow:0 10px 30px #0004}
.size{font-size:12px;color:var(--muted);margin:0}
.panel{background:var(--card);border-left:1px solid var(--line);padding:22px;overflow:auto;max-height:calc(100vh - 60px)}
.panel h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:22px;margin:8px 0 14px;text-wrap:balance}
.panel h3{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.back{font-size:13px;color:var(--muted);text-decoration:none}
.locked{background:var(--note);border:1px solid var(--note-line);border-radius:8px;padding:12px;font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:8px}
.unlock{display:flex;gap:8px}
.unlock input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13px;background:var(--field);color:var(--ink)}
.unlock button{padding:8px 14px;border-radius:6px;border:1px solid var(--ink);background:var(--ink);color:var(--btn-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.err{color:#c0392b;font-size:12px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 5px;background:var(--field);cursor:pointer;font:inherit;font-size:12px;color:var(--ink)}
.sw i{width:22px;height:22px;border-radius:50%;display:inline-block;border:1px solid #0003}
.sw[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
form label{display:block;font-size:12px;font-weight:600;margin:0 0 12px}
form input,form textarea,.opt select{display:block;width:100%;margin-top:5px;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:14px;font-weight:400;color:var(--ink);background:var(--field)}
form textarea{resize:vertical;min-height:64px}
.opt{display:block;font-size:12px;font-weight:600;margin-bottom:12px}
.btns{display:flex;gap:10px}
button.primary,.btns button{flex:1;padding:12px;border-radius:8px;border:1px solid var(--ink);background:var(--field);font:inherit;font-weight:600;cursor:pointer;color:var(--ink)}
button.primary{background:var(--ink);color:var(--btn-ink)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.link{background:none;border:0;color:var(--muted);text-decoration:underline;padding:10px 0;font:inherit;font-size:12px;cursor:pointer}
.hint{font-size:12px;color:var(--muted);line-height:1.5}
.status{font-size:13px;min-height:1.2em;color:var(--accent)}
@media (max-width:860px){
  #editor{grid-template-columns:1fr}
  .panel{border-left:0;border-top:1px solid var(--line);max-height:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .stage{padding:16px}
  .paper svg{max-height:60vh}
  .hero h1{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.tile{transition:none}}

.fhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tools{display:flex;gap:2px}
.tools button{width:26px;height:24px;border:1px solid var(--line);background:var(--field);color:var(--muted);border-radius:5px;font:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:0}
.tools button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
.photoRow{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.photoRow input[type=file]{font-size:12px;max-width:100%}
.photoRow select{padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--ink);font:inherit;font-size:12px}
.photoRow button{border:0;background:none;color:var(--muted);text-decoration:underline;font:inherit;font-size:12px;cursor:pointer}
.check{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;margin-bottom:6px}
.suite{display:flex;flex-wrap:wrap;gap:6px}
.suite a{font-size:12px;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:5px 10px;text-decoration:none;background:var(--field)}
button.wide{width:100%;margin-top:10px;padding:10px;border-radius:8px;border:1px dashed var(--ink);background:none;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
button.wide:disabled{opacity:.45;cursor:not-allowed}
.opt textarea,.opt input[type=number]{display:block;width:100%;margin-top:5px;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13px;font-weight:400;color:var(--ink);background:var(--field)}

/* ---------- Oyunlar: TV'de okunacak büyük, yüksek kontrastlı tek tema (kendi renkleri) ---------- */
#game{background:var(--g-bg);color:var(--g-ink);min-height:calc(100vh - 60px);padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#game:fullscreen{min-height:100vh;overflow:auto}
.g-setup{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.g-setup h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:28px;margin:4px 0}
.g-setup .back,.g-setup .hint,.g-setup .link{color:var(--g-soft)}
.g-setup .opt{color:var(--g-ink)}
.g-setup input,.g-setup textarea{background:rgba(255,255,255,.07);color:var(--g-ink);border:1px solid rgba(255,255,255,.18)}
.g-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g-cats{display:flex;flex-direction:column;gap:8px}
.g-cats details{background:var(--g-panel);border-radius:10px;padding:10px 12px}
.g-cats summary{cursor:pointer;list-style:revert}
.g-cats summary input{font-weight:700;font-size:15px;width:calc(100% - 30px);display:inline-block;padding:7px 9px;border-radius:6px;font-family:inherit}
.g-q{display:grid;grid-template-columns:44px minmax(0,1.4fr) minmax(0,1fr);gap:8px;align-items:center;margin-top:8px}
.g-q input{width:100%;padding:8px 9px;border-radius:6px;font:inherit;font-size:13px}
.g-val{font-weight:700;color:var(--g-accent);font-size:13px}
.g-actions{margin-top:8px}
.g-actions button{border-color:var(--g-ink);color:var(--g-ink);background:transparent}
.g-actions button.primary{background:var(--g-accent);border-color:var(--g-accent);color:#151515}
.g-lock{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.g-lock .unlock input{background:rgba(255,255,255,.1);color:var(--g-ink);border:1px solid rgba(255,255,255,.25)}
.g-lock .unlock button{background:var(--g-accent);border-color:var(--g-accent);color:#151515}
.g-host{color:var(--g-soft);font-size:13px}
.g-stage{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.g-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.g-bar h2{font-family:Fredoka,system-ui,sans-serif;font-weight:600;font-size:clamp(22px,3.4vw,40px);margin:0;text-align:center;flex:1}
.g-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--g-ink);border-radius:8px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}
.g-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px}
.g-head{background:var(--g-panel);border-radius:8px;padding:14px 6px;text-align:center;font-family:Fredoka,system-ui,sans-serif;font-weight:600;font-size:clamp(12px,1.7vw,22px);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;min-height:64px}
.g-cell{background:var(--g-tile);border:0;border-radius:8px;color:var(--g-accent);font-family:Fredoka,system-ui,sans-serif;font-weight:600;font-size:clamp(20px,3.6vw,46px);aspect-ratio:16/10;cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);transition:transform .1s}
.g-cell:hover:not(:disabled){transform:scale(1.03)}
.g-cell:disabled{opacity:.35;cursor:default}
.g-scores{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.g-team{background:var(--g-panel);border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:12px;font-size:16px}
.g-team b{font-family:Fredoka,system-ui,sans-serif;font-size:26px;color:var(--g-accent);font-variant-numeric:tabular-nums}
.g-adj button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--g-ink);font:inherit;cursor:pointer}
.g-qview{align-items:center;text-align:center;justify-content:center;min-height:70vh}
.g-pill{display:inline-block;background:var(--g-panel);border-radius:999px;padding:6px 16px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--g-accent)}
.g-big{font-family:Fredoka,system-ui,sans-serif;font-weight:600;font-size:clamp(26px,4.4vw,58px);line-height:1.2;max-width:24ch;margin:10px auto;text-wrap:balance}
.g-answer{font-size:clamp(20px,3vw,36px);color:var(--g-accent);font-weight:600;margin:0}
.g-who{color:var(--g-soft);margin:6px 0 0}
.g-award{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.g-award button,.g-reveal{background:var(--g-accent);color:#151515;border:0;border-radius:10px;padding:14px 22px;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.g-award button.g-ghost{background:transparent;color:var(--g-ink);border:1px solid rgba(255,255,255,.35)}
.g-final{display:flex;flex-direction:column;gap:6px;min-width:min(360px,100%)}
.g-final div{display:flex;justify-content:space-between;background:var(--g-panel);border-radius:8px;padding:10px 16px;font-size:18px}
.g-final b{color:var(--g-accent);font-variant-numeric:tabular-nums}
.g-title{font-family:Fredoka,system-ui,sans-serif;font-weight:600;font-size:clamp(24px,3.6vw,44px);margin:0;text-align:center}
.g-story{font-size:clamp(16px,2vw,22px);line-height:1.5;max-width:46ch;margin:0 auto;text-align:center}
.g-esc{align-items:center}
.g-timer{font-family:Fredoka,system-ui,sans-serif;font-weight:600;font-size:24px;font-variant-numeric:tabular-nums;color:var(--g-accent)}
.g-timer.late{color:#ff6b6b}
.g-dots{display:flex;gap:8px}
.g-dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2)}
.g-dots i.done{background:var(--g-accent)}
.g-dots i.now{background:var(--g-ink)}
.g-scene{width:100%;max-width:640px;height:auto;border-radius:12px}
.g-abc{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px;max-width:640px;width:100%}
.g-abc span{background:var(--g-panel);border-radius:6px;padding:4px 0;text-align:center;font-size:12px;display:flex;flex-direction:column}
.g-abc b{font-size:16px;color:var(--g-accent)}
.g-answerbox{display:flex;gap:8px;width:100%;max-width:520px}
.g-answerbox input{flex:1;min-width:0;padding:14px;border-radius:10px;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:var(--g-ink);font:inherit;font-size:20px;text-transform:uppercase;letter-spacing:2px}
.g-answerbox button{background:var(--g-accent);color:#151515;border:0;border-radius:10px;padding:0 22px;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.g-msg{min-height:1.4em;font-weight:600;color:var(--g-accent);margin:0}
.g-hints{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--g-soft)}
.g-hints p{margin:0}
@media (max-width:700px){.g-grid2{grid-template-columns:1fr}.g-q{grid-template-columns:36px 1fr}.g-q input[data-a]{grid-column:2}.g-abc{grid-template-columns:repeat(7,minmax(0,1fr))}}
.g-setup .opt input{display:block;width:100%;margin-top:5px;padding:9px 10px;border-radius:6px;font:inherit;font-size:14px}
.swatches{flex-direction:column;align-items:stretch}
.swRow{display:flex;flex-wrap:wrap;gap:8px}
.sw i.rainbow{background:conic-gradient(#F07E6E,#E8A317,#6BAA4F,#4FA3A5,#5BA4E0,#8C83D1,#D94A5F,#F07E6E)}
.customBox{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:10px 12px;border:1px dashed var(--line);border-radius:10px}
.customBox label{display:flex;align-items:center;gap:6px;font-size:12px;margin:0}
.customBox input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.lowC{font-size:12px;color:#B0552A;flex-basis:100%}
.moreSw summary{cursor:pointer;font-size:13px;margin:4px 0 8px;color:var(--ink)}
.fontSets{display:flex;flex-direction:column;gap:8px}
.fs{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--field);cursor:pointer;font-size:13px;color:var(--ink)}
.fs[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.moreSw .opt{margin-top:6px}
.btns,.wide{width:100%}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{display:block}
.paper canvas{display:block;max-width:100%;height:auto;box-shadow:0 10px 30px #0004;user-select:none;-webkit-user-drag:none}
.thumb canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 4px 12px #0002}