#jakar-loom{--jl-accent:#94a3b8}
.jl-viewport{height:440px;position:relative;overflow:hidden;border:1px solid #26374a;border-radius:12px;background:#060c14}
.jl-viewport canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.jl-viewport canvas:active{cursor:grabbing}
.jl-mode{font-size:.75rem;color:#91a8c0;margin-bottom:10px}
.jl-steps{position:absolute;inset:12px 12px auto;display:flex;gap:8px;pointer-events:none;z-index:2}
.jl-step{padding:4px 9px;border:1px solid #334155;background:#0c1725e8;border-radius:6px;font-size:.76rem;color:#9bafc2}
.jl-active{border-color:var(--jl-accent);color:var(--jl-accent)}
.jl-status{color:var(--jl-accent);font-weight:700;margin:14px 0 5px}
.jl-caption{color:#c6d4e1;font-size:.9rem;min-height:2.8em}
.jl-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.jl-footer small{color:#91a8c0;flex:1;min-width:180px}
.jl-replay:disabled{opacity:.45;cursor:default}
.jl-replay:focus-visible{outline:2px solid #e2e8f0;outline-offset:4px}

/* Gelişmiş 3D Jakar Araç Çubuğu & Pik Kontroller */
.jl-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:10px 0;padding:8px 12px;background:#0b1522;border:1px solid #1e2d3d;border-radius:8px}
.jl-btn-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.jl-ctrl-btn{padding:5px 11px;font-size:.78rem;font-weight:600;color:#94a3b8;background:#111e2e;border:1px solid #28394e;border-radius:6px;cursor:pointer;transition:all .15s ease}
.jl-ctrl-btn:hover{color:#e2e8f0;border-color:#38bdf8;background:#16263a}
.jl-ctrl-btn.jl-active-speed{color:#38bdf8;border-color:#38bdf8;background:#0c2740}
.jl-ctrl-btn.jl-audio-active{color:#f59e0b;border-color:#f59e0b;background:#2b2009}

/* Manuel 8-Bit Jakar Delgi Paneli */
.jl-manual-punch{margin-top:14px;padding:12px 14px;background:#08101a;border:1px solid #1c2b3d;border-radius:10px}
.jl-manual-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.jl-manual-title{font-size:.82rem;font-weight:700;color:#e2e8f0;display:flex;align-items:center;gap:6px}
.jl-bits-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.jl-bit-btn{flex:1;min-width:32px;max-width:54px;padding:6px 2px;text-align:center;border-radius:6px;border:1px solid #28394e;background:#0f1c2d;color:#64748b;cursor:pointer;font-family:monospace;font-size:.84rem;font-weight:bold;transition:all .15s}
.jl-bit-btn.jl-bit-1{background:#1e3a5f;color:#38bdf8;border-color:#38bdf8;box-shadow:0 0 8px rgba(56,189,248,.25)}
.jl-bit-label{font-size:.65rem;color:#64748b;display:block;margin-bottom:2px}

/* Çoklu Ajan Yuvaları (Cursor, Antigravity, Astra) */
.jl-agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:14px}
.jl-agent-card{padding:10px 12px;background:#08111d;border:1px solid #1e2c3d;border-radius:8px;display:flex;flex-direction:column;gap:6px;transition:all .2s ease}
.jl-agent-card:hover{border-color:var(--agent-accent,#38bdf8);background:#0b1828}
.jl-agent-head{display:flex;align-items:center;justify-content:space-between}
.jl-agent-name{font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:6px;color:#f1f5f9}
.jl-agent-role{font-size:.72rem;color:#94a3b8}
.jl-agent-badge{font-size:.68rem;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase}
.jl-agent-btn{margin-top:4px;padding:4px 8px;font-size:.74rem;border-radius:4px;border:1px solid #2d3f54;background:#111e2f;color:#cbd5e1;cursor:pointer;transition:all .15s}
.jl-agent-btn:hover{background:#1d334e;border-color:#38bdf8;color:#fff}

/* Durum Tetikleyici Şerit (State Selector) */
.jl-states-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;background:#070d16;border:1px dashed #1c2b3d;border-radius:8px}
.jl-state-btn{padding:3px 8px;font-size:.72rem;font-weight:600;border-radius:4px;border:1px solid #233549;background:#0d1724;color:#94a3b8;cursor:pointer;transition:all .15s}
.jl-state-btn:hover{color:#fff;border-color:#38bdf8}

@media(max-width:600px){
  .jl-viewport{height:300px}
  .jl-step{font-size:.66rem;padding:3px 5px}
  .jl-steps{gap:4px;inset:8px 8px auto}
  .jl-bit-btn{min-width:28px;padding:4px 1px;font-size:.75rem}
  .jl-agent-grid{grid-template-columns:1fr}
}
