/* SENTINEL DJ Öğretmeni — paneller ekipman gibi daima koyu; iki temada da okunur. */
.dj{--dj-bg:#0E1420;--dj-card:#151D2C;--dj-line:#2A3650;--dj-txt:#E8EEF8;--dj-sub:#B6C0D0;--dj-acc:#FF9245;--dj-a:#4FD1C5;--dj-b:#A78BFA;--dj-ok:#6EE7A8}
.dj-wrap{max-width:1080px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left))}
.dj-preview{display:block;width:fit-content;font:600 .78rem/1.2 var(--font-mono,ui-monospace,monospace);letter-spacing:.08em;color:var(--dj-acc);border:1px solid var(--dj-acc);border-radius:999px;padding:.35rem .8rem;margin-bottom:1rem}
.dj-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.dj-card,.dj-lesson,.dj-mixer{background:var(--dj-card);color:var(--dj-txt);border:1px solid var(--dj-line);border-radius:16px;padding:20px}
.dj-card h3,.dj-lesson h3,.dj-mixer h3{color:var(--dj-txt);margin:0 0 .5rem;font-size:1.1rem}
.dj-card p,.dj-lesson p,.dj-mixer p,.dj-lesson li{color:var(--dj-sub)}
.dj-deck[data-deck="a"]{border-top:3px solid var(--dj-a)}
.dj-deck[data-deck="b"]{border-top:3px solid var(--dj-b)}
.dj-bpm{font:700 2.4rem/1 var(--font-display,Sora,system-ui,sans-serif);color:var(--dj-txt)}
.dj-bpm small{font-size:.9rem;color:var(--dj-sub);margin-left:.4rem}
.dj-meter{height:10px;background:#0A0F18;border-radius:6px;overflow:hidden;margin:.6rem 0}
.dj-meter>i{display:block;height:100%;width:0;background:var(--dj-acc);transition:width .08s linear}
.dj-meter[data-deck="a"]>i{background:var(--dj-a)}.dj-meter[data-deck="b"]>i{background:var(--dj-b)}
.dj label{display:block;color:var(--dj-txt);font-weight:600;margin:.8rem 0 .3rem}
.dj input[type=range]{width:100%;height:44px;accent-color:var(--dj-acc)}
.dj-row{display:flex;gap:10px;flex-wrap:wrap}
.dj button.dj-btn{min-height:44px;min-width:44px;padding:.55rem 1rem;border-radius:12px;border:1px solid var(--dj-line);background:#1E2940;color:var(--dj-txt);font:600 .95rem/1.2 var(--font-body,Manrope,system-ui,sans-serif);cursor:pointer}
.dj button.dj-btn:hover:not(:disabled){border-color:var(--dj-acc)}
.dj button.dj-btn:disabled{opacity:.45;cursor:not-allowed}
.dj button.dj-primary{background:var(--dj-acc);color:#1A0E02;border-color:var(--dj-acc)}
.dj button:focus-visible,.dj input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.dj-read{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:.8rem}
.dj-read div{background:#0A0F18;border:1px solid var(--dj-line);border-radius:12px;padding:10px}
.dj-read b{display:block;color:var(--dj-sub);font-size:.75rem;font-weight:600;letter-spacing:.06em}
.dj-read span{display:block;color:var(--dj-txt);font:700 1.2rem/1.3 var(--font-display,Sora,system-ui,sans-serif)}
.dj-steps{list-style:none;padding:0;margin:.5rem 0;display:grid;gap:8px;counter-reset:s}
.dj-steps li{counter-increment:s;padding:10px 12px 10px 44px;position:relative;border:1px solid var(--dj-line);border-radius:12px;background:#0F1626}
.dj-steps li::before{content:counter(s);position:absolute;left:12px;top:10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:#26324C;color:var(--dj-txt)}
.dj-steps li[data-state=active]{border-color:var(--dj-acc)}.dj-steps li[data-state=active]::before{background:var(--dj-acc);color:#1A0E02}
.dj-steps li[data-state=done]{border-color:var(--dj-ok)}.dj-steps li[data-state=done]::before{content:"\2713";background:var(--dj-ok);color:#06210F}
.dj-hint{min-height:1.6em;color:var(--dj-acc);font-weight:600}
.dj-note{font-size:.9rem;color:var(--dj-sub);border-left:3px solid var(--dj-line);padding-left:12px;margin-top:1rem}
.dj-result{border:1px solid var(--dj-ok);border-radius:12px;padding:14px;margin-top:12px;background:#0F1F18}
.dj-mixer{margin-top:16px}.dj-lesson{margin-top:16px}
@media (max-width:720px){.dj-grid{grid-template-columns:1fr}.dj-read{grid-template-columns:1fr 1fr 1fr}.dj-bpm{font-size:2rem}}
@media (prefers-reduced-motion:reduce){.dj-meter>i{transition:none}}