:root{--blue:#0e70c7;--blue2:#0a5cab;--sky:#eaf7ff;--ink:#173b58;--muted:#6a8298;--orange:#fb8a12;--line:#c6def0;--card:#fff;--green:#25a56a}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#eef9ff,#f9fcff)}button,input{font:inherit}.app-shell{min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 24px;background:linear-gradient(135deg,#147ccf,#0d63b8);color:#fff;box-shadow:0 4px 12px rgba(12,70,120,.18)}.brand-kicker{font-size:.82rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.9}.brand-block h1{margin:3px 0 0;font-size:clamp(1.6rem,2.5vw,2.45rem);line-height:1.05}.top-actions{display:flex;gap:10px;flex-wrap:wrap}.icon-btn{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:14px;padding:11px 15px;font-weight:900;cursor:pointer}.icon-btn:hover{background:rgba(255,255,255,.18)}.modebar{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:10px 18px;background:#fff;border-bottom:1px solid #d6e7f3}.mode-btn{min-height:48px;border:1px solid #bed8ea;border-radius:14px;background:linear-gradient(#fff,#f2f8fc);color:#234760;font-weight:900;font-size:1rem;cursor:pointer}.mode-btn.is-active{background:linear-gradient(#ff9d22,#fb8210);border-color:#f1840e;color:#fff;box-shadow:0 6px 14px rgba(242,130,15,.25)}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;padding:16px 18px;align-items:start}.control-panel{display:grid;gap:14px}.control-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 6px 18px rgba(31,88,127,.07)}.control-label{font-weight:950;text-transform:uppercase;letter-spacing:.06em;color:#0e70c7;margin-bottom:12px}.control-label.small{font-size:.75rem;margin:15px 0 8px}.tip{font-size:.82rem;line-height:1.4;color:var(--muted);margin:10px 0}.time-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.time-inputs label{display:grid;gap:5px;font-weight:800;font-size:.82rem}.time-inputs input{width:100%;height:48px;border:1px solid #bdd9ec;border-radius:12px;text-align:center;font-size:1.1rem;font-weight:900;color:#17466b;background:#f9fcff}.step-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.step-buttons button,.advance-step-grid button,.level-grid button,.direction-row button,.unit-buttons button{border:1px solid #c2dced;background:#f7fbfe;color:#1d4a6d;border-radius:12px;min-height:42px;font-weight:900;cursor:pointer}.step-buttons button:hover,.advance-step-grid button:hover,.level-grid button:hover,.direction-row button:hover,.unit-buttons button:hover{border-color:#69b7e4;background:#eef8ff}.advance-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.advance-step-grid button.is-active,.level-grid button.is-active,.direction-row button.is-active{background:linear-gradient(#1995e6,#1473cf);border-color:#1473cf;color:#fff}.level-grid{display:grid;gap:8px}.direction-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.action-btn{width:100%;min-height:46px;margin-top:10px;border:0;border-radius:13px;background:linear-gradient(#1995e6,#1473cf);color:#fff;font-weight:950;cursor:pointer;box-shadow:0 6px 12px rgba(20,115,207,.18)}.action-btn.secondary{background:linear-gradient(#f8fbfe,#e9f4fb);color:#1c4d72;border:1px solid #bfd9eb;box-shadow:none}.teacher-step-box{margin-top:12px;border:1px solid #b9d9ed;background:#eef8ff;border-radius:15px;padding:10px}.teacher-step-head{display:flex;justify-content:space-between;gap:8px;align-items:center;text-transform:uppercase;font-size:.75rem;font-weight:900;color:#466982}.teacher-step-head strong{background:#fff;border-radius:999px;padding:4px 8px;color:#0c69bb}.teacher-step-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;margin-top:9px}.teacher-step{min-height:48px;border-radius:12px;font-weight:950;cursor:pointer}.teacher-step.primary{border:0;background:linear-gradient(#1995e6,#1473cf);color:#fff}.teacher-step.secondary{border:1px solid #bdd8eb;background:#fff;color:#1b4a6c}.unit-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.unit-buttons button.is-active{background:linear-gradient(#1995e6,#1473cf);color:#fff;border-color:#1473cf}.board-wrap{display:grid;gap:13px;min-width:0}.instruction-card{padding:15px 20px;border:1px solid #f1c077;border-radius:20px;background:linear-gradient(135deg,#fff8ec,#fff2dc);box-shadow:0 5px 15px rgba(170,107,27,.07)}.instruction-kicker,.math-chain-kicker,.zone-kicker{display:block;font-size:.72rem;font-weight:950;letter-spacing:.08em;color:#bb6109}.instruction-card>strong{display:block;margin-top:5px;font-size:1.25rem;color:#9c4d06}.math-chain{margin-top:12px;padding-top:10px;border-top:1px solid #efd3ab}.math-chain-kicker{font-size:.67rem}.math-chain-row{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:6px}.math-chain-row strong{font-size:1.1rem}.math-chain-row span{padding:5px 9px;border:1px solid #efc27f;border-radius:999px;background:#fff;color:#9c570d;font-weight:900;font-size:.78rem}.clock-card{border:2px solid #a8d6f1;border-radius:24px;background:#fff;overflow:hidden;box-shadow:0 8px 22px rgba(25,90,131,.06)}.clock-head{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 18px;background:#def2ff;border-bottom:1px solid #b7ddef}.zone-kicker{color:#0e70c7}.clock-head h2{margin:3px 0 0;font-size:1rem}.digital-readout{display:flex;align-items:center;gap:9px;background:linear-gradient(#168ce0,#0f6dc5);color:#fff;border-radius:14px;padding:8px 12px}.digital-readout span{font-size:.72rem;font-weight:800}.digital-readout strong{font-size:1.45rem}.digital-readout.is-hidden strong{filter:blur(10px);user-select:none}.clock-stage{display:grid;place-items:center;min-height:585px;padding:10px;background:radial-gradient(circle at center,#fff 0 52%,#f5fbff 75%,#eef8ff 100%)}#clockSvg{width:min(650px,100%);height:auto;touch-action:none}.clock-face{fill:#fff;stroke:#1c5a82;stroke-width:8;filter:url(#clockShadow)}.inner-guide{fill:none;stroke:#d8ebf7;stroke-width:2;stroke-dasharray:4 8}.tick{stroke:#285b7b;stroke-width:4}.tick.major{stroke-width:8}.clock-num{fill:#164969;font-size:37px;font-weight:950;text-anchor:middle;dominant-baseline:middle}.clock-hand{cursor:grab;touch-action:none}.clock-hand:active{cursor:grabbing}.hour-hand line{stroke:#1a5477;stroke-width:22;stroke-linecap:round}.hour-hand polygon{fill:#1a5477}.minute-hand line{stroke:#ef8614;stroke-width:14;stroke-linecap:round}.minute-hand polygon{fill:#ef8614}.hub{fill:#0c6bb9;stroke:#fff;stroke-width:7}.clock-explain{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;padding:10px 14px 15px;color:#557187;font-size:.82rem;font-weight:800}.clock-explain b{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px}.hour-dot{background:#1a5477}.minute-dot{background:#ef8614}.units-board{border:2px solid #a8d6f1;border-radius:24px;background:#fff;padding:20px;box-shadow:0 8px 22px rgba(25,90,131,.06)}.unit-focus{text-align:center;padding:24px;border-radius:20px;background:linear-gradient(135deg,#e8f7ff,#f8fcff);border:1px solid #c4e1f2}.unit-focus span{display:block;color:#0e70c7;font-size:1rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.unit-focus strong{display:block;margin-top:8px;font-size:clamp(1.6rem,3vw,2.8rem);color:#174c71}.unit-focus p{margin:10px auto 0;max-width:750px;color:#5d7589;font-size:1rem}.unit-ladder{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:16px}.unit-ladder button{min-height:82px;border:1px solid #c6dfef;border-radius:14px;background:#f7fbfe;color:#214b68;font-weight:900;cursor:pointer}.unit-ladder button.is-active{background:linear-gradient(#1995e6,#1473cf);color:#fff;border-color:#1473cf}.season-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}.season-strip span{text-align:center;padding:12px;border-radius:13px;background:#fff6e9;border:1px solid #f1d1a1;font-weight:900}.app-footer{display:flex;justify-content:space-between;gap:14px;padding:10px 20px;color:#5f7890;font-size:.78rem;border-top:1px solid #d5e6f2;background:#f7fbfe}.app-footer strong{color:#0e70c7}@media(max-width:980px){.workspace{grid-template-columns:1fr}.control-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.clock-stage{min-height:520px}.unit-ladder{grid-template-columns:repeat(4,1fr)}}@media(max-width:700px){.topbar{padding:13px 14px}.top-actions span{display:none}.modebar{grid-template-columns:repeat(5,minmax(95px,1fr));overflow-x:auto;padding:8px}.workspace{padding:10px}.control-panel{grid-template-columns:1fr}.clock-stage{min-height:390px}.clock-head{align-items:flex-start}.digital-readout{padding:7px 9px}.unit-ladder{grid-template-columns:repeat(2,1fr)}.season-strip{grid-template-columns:repeat(2,1fr)}.app-footer{flex-direction:column}.math-chain-row{align-items:flex-start;flex-direction:column}.brand-block h1{font-size:1.35rem}.mode-btn{font-size:.8rem;min-height:42px}}

/* v1.1.0 — Kaydırmasız büyük saat + sol mod menüsü */
@media (min-width:981px){
  html,body{height:100%;overflow:hidden}
  .app-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .topbar{flex:0 0 auto;padding:10px 20px;min-height:70px}
  .brand-kicker{font-size:.74rem}
  .brand-block h1{font-size:clamp(1.65rem,2.1vw,2.18rem)}
  .icon-btn{padding:9px 13px;border-radius:13px}
  .workspace{flex:1 1 auto;min-height:0;overflow:hidden;grid-template-columns:330px minmax(0,1fr);gap:12px;padding:10px 14px;align-items:stretch}
  .control-panel{min-height:0;overflow:auto;align-content:start;gap:10px;padding-right:2px;scrollbar-width:thin}
  .modebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0;background:transparent;border:0;order:-20}
  .mode-btn{min-height:42px;border-radius:12px;font-size:.88rem;padding:6px 8px}
  .mode-btn:last-child{grid-column:1/-1}
  .control-card{padding:13px;border-radius:17px}
  .control-label{margin-bottom:9px;font-size:.86rem}
  .tip{margin:8px 0;font-size:.77rem}
  .time-inputs input{height:42px}
  .step-buttons button,.advance-step-grid button,.level-grid button,.direction-row button,.unit-buttons button{min-height:38px}
  .action-btn{min-height:41px;margin-top:8px}
  .teacher-step{min-height:43px}
  .board-wrap{min-height:0;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;overflow:hidden}
  .instruction-card{padding:9px 16px;border-radius:16px;min-height:56px}
  .instruction-kicker{font-size:.64rem}
  .instruction-card>strong{margin-top:2px;font-size:1.04rem}
  .math-chain{margin-top:7px;padding-top:6px}
  .clock-card{height:100%;min-height:0;display:flex;flex-direction:column;border-radius:20px}
  .clock-head{flex:0 0 auto;padding:8px 14px;min-height:48px}
  .clock-head h2{font-size:.88rem;margin-top:1px}
  .zone-kicker{font-size:.64rem}
  .digital-readout{padding:6px 10px;border-radius:12px}
  .digital-readout strong{font-size:1.22rem}
  .clock-stage{flex:1 1 auto;min-height:0;padding:2px 8px;background:radial-gradient(circle at center,#fff 0 54%,#f5fbff 76%,#eef8ff 100%)}
  #clockSvg{display:block;height:100%;width:auto;max-width:100%;max-height:100%;min-height:0}
  .clock-explain{flex:0 0 auto;padding:5px 12px 7px;gap:22px;font-size:.75rem}
  .units-board{height:100%;min-height:0;overflow:auto;padding:16px}
  .app-footer{flex:0 0 auto;padding:5px 16px;font-size:.7rem;min-height:26px}
}

@media (max-width:980px){
  .modebar{order:-20}
}
@media (min-width:981px){
  .topbar{min-height:62px;padding:8px 20px}
  .app-footer{display:none}
  .instruction-card{min-height:52px;padding:8px 15px}
  .clock-head{min-height:44px;padding:7px 13px}
  .clock-explain{padding:4px 12px 5px}
}