/* Botluyo — Topluyo tarzı (mor-bordo + magenta), ama katmanları net: zemin → panel → kart → alan */
:root{
 --p:#ee2aa3;--q:#b026e6;--pg:linear-gradient(135deg,#b026e6,#ee2aa3);
 --bgimg:linear-gradient(115deg,#0a070e 0%,#170d1c 45%,#2b1029 100%);
 --head:#130b18;--panel:#1a111f;--tool:#1f1426;--card:#271a33;--field:#110a17;--fieldb:#55396a;
 --btn:#3d2a4b;--btnh:#503762;--btnb:#6a4a80;--b:#3f2b4c;--sel:rgba(238,42,163,.28);
 --t:#fff;--mut:#cdbfd8;--code:#0d0711;--dlg:#1d1225;--ok:#2fd27a;--shadow:0 12px 34px #000a;color-scheme:dark}
html:not(.dark){
 --bgimg:linear-gradient(115deg,#fdf6fb 0%,#f8e8f4 60%,#f1d6ec 100%);
 --head:#fff;--panel:#fff;--tool:#fdf4fb;--card:#fbeff8;--field:#fff;--fieldb:#cfb0cc;
 --btn:#f1e0f0;--btnh:#e6cde6;--btnb:#d2b3d0;--b:#e6d0e3;--sel:rgba(238,42,163,.16);
 --t:#2a1630;--mut:#6b5775;--code:#2a1630;--dlg:#fff;--shadow:0 12px 34px #5a1f6a30;color-scheme:light}
*{box-sizing:border-box;margin:0}
html{background:#0a070e}
body{font:600 14px/1.45 Nunito,"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bgimg) fixed;color:var(--t);min-height:100dvh}
::selection{background:#ee2aa388}
*{scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:9px}

/* ÜST ÇUBUK */
header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px;background:var(--head);border-bottom:1px solid var(--b)}
.brand{display:flex;align-items:center;gap:10px}.brand b{display:block;font-size:19px;font-weight:900;line-height:1.1}.brand small{display:block;color:var(--mut);font-size:11px;font-weight:600}
.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--pg);font-size:21px;box-shadow:0 4px 14px #ee2aa345}
.nameb{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12px;font-weight:800;margin:0}
.nameb input{width:200px;margin:0;font-size:14px;font-weight:800}
.sp{flex:1}.hbtns{display:flex;gap:8px;flex-wrap:wrap}

/* GENEL YERLEŞİM */
main{display:grid;grid-template-columns:1fr 370px;gap:14px;padding:14px}
section,aside{background:var(--panel);border:1px solid var(--b);border-radius:16px;padding:12px;min-width:0}
aside{max-height:calc(100dvh - 92px);overflow:auto}
.wsw{position:relative}
#ws{height:calc(100dvh - 190px);min-height:440px;border-radius:12px;overflow:hidden;border:1px solid var(--b)}
#empty{position:absolute;left:560px;right:34px;top:30%;display:flex;flex-direction:column;gap:8px;text-align:center;color:var(--mut);pointer-events:none;z-index:3}
#empty[hidden]{display:none}
#empty>b{font-size:22px;color:var(--t);font-weight:900}#empty b b{color:var(--p)}#empty .dim{font-size:12px;opacity:.85}
#empty span b{color:var(--t)}

/* DÜĞMELER */
button{font:inherit;font-weight:800;border:1px solid var(--btnb);border-radius:10px;padding:8px 14px;cursor:pointer;background:var(--btn);color:var(--t);transition:background .12s,transform .05s}
button:hover:not(:disabled){background:var(--btnh)}button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--p);outline-offset:1px}
button:disabled{opacity:.4;cursor:default}
.tab.on{background:var(--pg);border-color:transparent;color:#fff}
.tab.on:hover{background:var(--pg)!important;filter:brightness(1.1)}
.big,.pri,#dl,#dlt{background:var(--pg);border-color:transparent;color:#fff;font-weight:900;box-shadow:0 6px 18px #ee2aa340}
.big:hover:not(:disabled),.pri:hover:not(:disabled),#dl:hover,#dlt:hover{background:var(--pg)!important;filter:brightness(1.12)}
.big{width:100%;padding:13px;font-size:16px;margin-bottom:12px}.big small{font-weight:700;opacity:.85;margin-left:6px;font-size:12px}
.pri{width:100%;margin-top:10px}
.runb{background:var(--ok);border-color:transparent;color:#052612;font-weight:900}.runb:hover:not(:disabled){background:var(--ok)!important;filter:brightness(1.1)}
header button.ok{background:#1f8f55;border-color:transparent;color:#fff}
.sm{flex:0 0 auto!important;padding:4px 10px;font-size:12px}
.sm2{width:100%;margin-top:8px;font-size:12px}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between}.row button{flex:1}.row h4{flex:1;margin:0}

/* SEKME ÇUBUKLARI */
#bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
#bar .lbl{font-size:12px;font-weight:800;color:var(--mut)}
#tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto}
.tools{display:flex;gap:6px;align-items:center}.tools button{padding:7px 12px}
#stabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:12px;background:var(--field);border:1px solid var(--b);border-radius:14px}
#stabs .tab{border:0;background:transparent;border-radius:10px;padding:9px}#stabs .tab:hover{background:var(--btn)}#stabs .tab.on{background:var(--pg)}

/* KARTLAR */
.card{background:var(--card);border:1px solid var(--b);border-radius:14px;padding:12px;margin-bottom:12px}
h3{font-weight:900;font-size:19px;margin-bottom:8px}
h4{font-size:13px;font-weight:900;color:var(--t);margin:0 0 8px}
h4 small{font-weight:600;color:var(--mut)}
.hint{font-size:12px;color:var(--mut);margin-top:8px;font-weight:600}
label{display:block;color:var(--mut);font-size:12px;font-weight:700;margin:8px 0 3px}
label.chk,.seg label{color:var(--t);font-size:13px;margin:8px 0 0}

/* YAZI KUTULARI: koyu ve çerçeveli (düğmelerden ayrı görünür) */
input,select,textarea{font:inherit;font-weight:700;color:var(--t);background:var(--field);border:1px solid var(--fieldb);border-radius:10px;padding:9px 12px}
input{width:100%}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:.7;font-weight:600}
input:focus,select:focus,textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px #ee2aa333}
input[type=checkbox],input[type=radio]{width:auto;margin:0 6px 0 0;padding:0;accent-color:var(--p);box-shadow:none}
#vtest select,#vtest textarea{width:100%}#vtest select option{background:var(--dlg);color:var(--t)}
#vtest textarea{font:600 12px/1.5 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
#evf label{margin-top:8px}
.seg{display:flex;gap:6px 14px;flex-wrap:wrap;margin:6px 0 2px}.seg input{width:auto;margin:0 5px 0 0}

/* DOSYA AĞACI, KOD, KONSOL */
#tree{font-size:13px;line-height:1.5}
.ti{display:block;cursor:pointer;padding:5px 10px;border-radius:8px;border-left:3px solid transparent}.ti:hover{background:var(--btn)}
.ti.on{background:var(--sel);border-left-color:var(--p);font-weight:900}.ti.dim{color:var(--mut);cursor:default;background:none;opacity:.8}
pre,#con{background:var(--code);color:#efe9f5;border:1px solid var(--b);border-radius:12px;font:600 12px/1.55 ui-monospace,Menlo,Consolas,monospace}
pre{padding:12px;overflow:auto;max-height:46vh}
#con{padding:10px;max-height:44vh;min-height:90px;overflow:auto}
.ln{white-space:pre-wrap;word-break:break-word;border-bottom:1px solid #ffffff14;padding:2px 0}
.ln.error{color:#ff8fa0}.ln.warn{color:#ffd27a}.ln.api{color:#8fd0ff}.ln.ev{color:#eab6ff}.ln.sys{color:#7ff0ad}.ln.dim{opacity:.7}
.warn{color:#ffd27a;font-weight:800;font-size:12px;flex:1;margin:6px 0}
html:not(.dark) .warn{color:#a35c00}

/* DİYALOGLAR VE LİSTELER */
dialog{margin:auto;border:1px solid var(--btnb);border-radius:20px;padding:22px;width:min(470px,92vw);color:var(--t);background:var(--dlg);box-shadow:var(--shadow)}
dialog button{width:100%;margin-top:10px}dialog .row button,dialog .pi button{margin-top:0}
dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
.pi{display:flex;gap:6px;align-items:center;border:1px solid var(--b);background:var(--card);border-radius:12px;padding:8px 10px}
.pi.on{border-color:var(--p);box-shadow:inset 3px 0 0 var(--p)}
.pi .nm{flex:1;min-width:0;cursor:pointer}.pi .nm small{display:block;color:var(--mut);font-weight:600}
.pi button{width:auto;margin:0;padding:5px 10px}
#plist{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;margin:10px 0}
#hlist,#tlist{max-height:50vh;overflow:auto;margin:10px 0}
.tpl{border:1px solid var(--b);background:var(--card);border-radius:12px;padding:10px 14px;margin:6px 0;cursor:pointer}
.tpl:hover{border-color:var(--p);background:var(--btn)}.tpl b{display:block}.tpl small{display:block;color:var(--mut);font-weight:600}

/* BLOK ARAMA */
.sw{position:relative}.sw input{margin:0;width:210px}
#qr{position:absolute;right:0;top:100%;margin-top:6px;width:380px;max-height:60vh;overflow:auto;background:var(--dlg);border:1px solid var(--btnb);border-radius:14px;z-index:50;box-shadow:var(--shadow);padding:4px}
#qr div{padding:7px 12px;cursor:pointer;font-size:13px;border-radius:9px}#qr div small{color:var(--mut);display:block;font-weight:600}
#qr div.on,#qr div:hover{background:var(--sel)}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--pg);color:#fff;padding:9px 18px;border-radius:99px;opacity:0;transition:.25s;pointer-events:none;z-index:99;font-weight:900;box-shadow:var(--shadow)}
#toast.on{opacity:1}

/* BLOCKLY: kategori listesi ve zemin */
.blocklyToolboxDiv{background:var(--tool)!important;border-right:1px solid var(--b);padding:6px 0 6px 0}
.blocklyTreeRow{border-radius:2px 10px 10px 2px!important;margin:2px 8px 2px 0!important;height:36px!important;line-height:36px!important;font-family:inherit}
.blocklyTreeRow:hover{background-color:#ffffff14}
.blocklyTreeRow.blocklyTreeSelected{background-color:var(--sel)!important}
.blocklyTreeRow.blocklyTreeSelected .blocklyTreeLabel{color:var(--t)!important;font-weight:900}
.blocklyTreeLabel{font-family:inherit!important;font-weight:800}
html:not(.dark) .blocklyTreeLabel{color:#2a1630}
html.dark pattern line{stroke:#ffffff1c!important}

@media(max-width:900px){main{grid-template-columns:1fr;padding:10px}aside{max-height:none}#ws{height:68dvh}#empty{left:16px;right:16px;top:58%}.sw input{width:150px}.nameb input{width:150px}}