:root {
  --bg:#f5f3ef; --panel:#ffffff; --sunk:#f0ede7; --line:#e2ddd3; --text:#211f1b; --muted:#6e695f;
  --accent:#ee6a12; --accent-ink:#ffffff; --soft:#fdf0e4; --ok:#1f8a4c; --bad:#c9372c;
  --shadow:0 1px 2px rgba(40,30,15,.06), 0 6px 20px rgba(40,30,15,.06); --radius:12px;
}
:root[data-theme=dark] {
  --bg:#121316; --panel:#1b1d22; --sunk:#15171b; --line:#2c2f37; --text:#eceae6; --muted:#9b9da4;
  --accent:#ff7f2a; --accent-ink:#17120c; --soft:#2b2117; --ok:#4cc37a; --bad:#ff6b5e;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}
* { box-sizing:border-box; }
html { color-scheme:light; } html[data-theme=dark] { color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
h2, h3, p { margin:0; }
.muted { color:var(--muted); }
.hint, small { color:var(--muted); font-size:12px; line-height:1.4; }
.hint.center { text-align:center; margin-top:10px; }

/* ust cubuk */
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:28px; padding:10px 24px; background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:16px; letter-spacing:-.01em; }
.logo { width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg, var(--accent), #ffb347); position:relative; }
.logo::after { content:""; position:absolute; inset:7px 6px 6px; border-radius:2px 2px 4px 4px; background:var(--panel); clip-path:polygon(0 18%, 28% 0, 38% 12%, 62% 12%, 72% 0, 100% 18%, 86% 40%, 78% 34%, 78% 100%, 22% 100%, 22% 34%, 14% 40%); }
.tabs { display:flex; gap:2px; background:var(--sunk); padding:3px; border-radius:10px; }
.tab { background:none; border:0; color:var(--muted); padding:7px 18px; border-radius:8px; cursor:pointer; font:inherit; font-weight:600; transition:background .15s, color .15s; }
.tab:hover { color:var(--text); }
.tab.active { background:var(--panel); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
#themeBtn { margin-left:auto; }

main { padding:22px 24px 40px; max-width:1500px; margin:0 auto; }
.panel { display:none; } .panel.active { display:block; animation:fade .18s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px); } }

/* ortak parcalar */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); display:grid; gap:12px; align-content:start; }
.card h2 { font-size:15px; display:flex; align-items:center; gap:9px; }
.card h2 i { font-style:normal; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:12px; display:grid; place-items:center; }
.card h3 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
button, .btn { font:inherit; border:1px solid var(--line); background:var(--panel); color:var(--text); padding:8px 14px; border-radius:8px; cursor:pointer; text-align:center; transition:background .15s, border-color .15s, transform .05s; }
button:hover:not(:disabled), .btn:hover { border-color:var(--muted); }
button:active:not(:disabled) { transform:translateY(1px); }
button:disabled { opacity:.45; cursor:not-allowed; }
.primary, button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:650; }
.primary:hover:not(:disabled) { filter:brightness(1.06); border-color:var(--accent); }
.big { padding:12px 14px; font-size:15px; }
.ghost { background:none; }
.btn { display:block; }
.link { background:none; border:0; padding:2px 0; color:var(--muted); text-decoration:underline; text-underline-offset:3px; justify-self:start; }
.link:hover { color:var(--text); }
.iconBtn { width:34px; height:34px; padding:0; display:grid; place-items:center; border-radius:8px; flex:none; }
.field { display:grid; gap:5px; color:var(--muted); font-size:13px; }
.field output { float:right; color:var(--text); font-variant-numeric:tabular-nums; }
.check { display:flex; align-items:center; gap:8px; cursor:pointer; }
.pair { display:flex; gap:8px; } .pair > * { flex:1; min-width:0; }
.pathRow { display:flex; gap:8px; } .pathRow input { flex:1; min-width:0; }
textarea { resize:vertical; line-height:1.4; }
input[type=text], input[type=number], select, textarea { font:inherit; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--sunk); color:var(--text); width:100%; }
input:focus-visible, select:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
input[type=range] { width:100%; accent-color:var(--accent); }
input[type=checkbox] { accent-color:var(--accent); width:16px; height:16px; }
input[type=color] { width:100%; height:36px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--sunk); }
.empty { border:2px dashed var(--line); border-radius:var(--radius); padding:48px 20px; text-align:center; color:var(--muted); }

/* URET */
.work { display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:start; }
.rail { display:grid; gap:14px; position:sticky; top:76px; max-height:calc(100vh - 92px); overflow:auto; padding-bottom:4px; }
.drop { border:2px dashed var(--line); border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; color:var(--muted); text-align:center; padding:18px 12px; font-size:12px; transition:border-color .15s, background .15s; }
.drop:hover, .drop.over, body.dragging .drop { border-color:var(--accent); background:var(--soft); }
.drop strong { color:var(--text); font-size:14px; }
.dropIcon { font-size:22px; line-height:1; color:var(--accent); }
.designList { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.designList:empty { display:none; }
.designList li { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:5px; border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.designList li.sel { border-color:var(--accent); background:var(--soft); }
.designList img { width:44px; height:44px; object-fit:contain; border-radius:6px; background:repeating-conic-gradient(#d9d9d9 0 25%, #f4f4f4 0 50%) 0 0/12px 12px; }
.designList .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.designList .st { font-size:12px; color:var(--muted); display:block; font-weight:400; white-space:normal; }
.designList .st.ok { color:var(--ok); } .designList .st.bad { color:var(--bad); }
.designList button { border:0; background:none; color:var(--muted); padding:4px 8px; }
.swatches { display:flex; flex-wrap:wrap; gap:7px; }
.sw { display:flex; align-items:center; gap:6px; padding:4px 10px 4px 5px; border-radius:999px; font-size:12px; }
.sw .dot { width:18px; height:18px; border-radius:50%; border:1px solid rgba(128,128,128,.45); flex:none; }
.sw.on { border-color:var(--accent); background:var(--soft); box-shadow:0 0 0 1px var(--accent); }
.sw.add { position:relative; padding:4px 10px; }
.sw.add input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.progress { height:8px; background:var(--sunk); border-radius:99px; overflow:hidden; }
.progress div { height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .2s; }
.mainHead { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.mainHead h2 { font-size:20px; letter-spacing:-.01em; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
.tile { margin:0; position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .15s, opacity .15s, box-shadow .15s; }
.tile:hover { transform:translateY(-2px); }
.tile canvas { width:100%; aspect-ratio:1; display:block; cursor:zoom-in; background:var(--sunk); }
.tile.loading canvas { animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.45; } }
.tile figcaption { display:flex; align-items:center; gap:7px; padding:8px 10px; font-size:12px; }
.tile figcaption b { background:var(--sunk); border-radius:6px; min-width:22px; text-align:center; padding:1px 5px; font-variant-numeric:tabular-nums; }
.tile figcaption .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.tile figcaption .dot { width:13px; height:13px; border-radius:50%; border:1px solid rgba(128,128,128,.45); flex:none; }
.tile figcaption { padding-right:42px; }
.tile .tog { position:absolute; bottom:6px; right:8px; width:24px; height:24px; font-size:12px; padding:0; border-radius:50%; border:0; background:var(--accent); color:var(--accent-ink); font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.tile.off { opacity:.45; box-shadow:none; }
.tile.off .tog { background:var(--panel); color:var(--muted); }
.tile.fail canvas { visibility:hidden; }
.tile .failMsg { position:absolute; inset:0 0 36px; display:grid; place-items:center; text-align:center; padding:16px; color:var(--muted); font-size:12px; }

/* SABLONLAR */
.tplLayout { display:grid; grid-template-columns:290px 1fr; gap:22px; align-items:start; }
.tplList { list-style:none; margin:0; padding:0; display:grid; gap:6px; max-height:calc(100vh - 380px); min-height:140px; overflow:auto; }
.tplList li { display:grid; grid-template-columns:20px 46px 1fr auto; gap:8px; align-items:center; padding:5px; border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.tplList li:hover { border-color:var(--muted); }
.tplList li.sel { border-color:var(--accent); background:var(--soft); }
.tplList img { width:46px; height:46px; object-fit:cover; border-radius:6px; }
.tplList .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tplList .ops { display:none; gap:2px; } .tplList li:hover .ops, .tplList li.sel .ops { display:flex; }
.tplList .ops button { padding:1px 6px; font-size:12px; border-radius:6px; }
.tplList .ops button.arm { background:var(--bad); border-color:var(--bad); color:#fff; }
#editorBody { display:grid; grid-template-columns:minmax(320px, 680px) minmax(260px, 320px); gap:22px; align-items:start; }
#editorBody[hidden] { display:none; }
.controls { display:grid; gap:12px; }
.saveNote { font-size:12px; color:var(--muted); } .saveNote.ok { color:var(--ok); }
.stage { position:relative; width:100%; aspect-ratio:1; user-select:none; }
.stage canvas { width:100%; height:100%; display:block; border-radius:var(--radius); background:#000; box-shadow:var(--shadow); }
.areaBox { position:absolute; border:2px dashed #8aa; cursor:move; transform-origin:center; box-shadow:0 0 0 1px rgba(0,0,0,.5); touch-action:none; }
.areaBox.active { border-color:#00d1ff; }
.areaHandle { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; background:#fff; border:2px solid #00d1ff; border-radius:2px; z-index:2; }
.rotZone { position:absolute; width:28px; height:28px; z-index:1; cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 13a7 7 0 1 1 7 7' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M5 13a7 7 0 1 1 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1 10l4 5 4-5z' fill='black' stroke='white' stroke-width='1'/%3E%3C/svg%3E") 12 12, alias; }

/* AYARLAR */
.settings { display:grid; gap:14px; max-width:560px; }
#bannerPreview { width:100%; border-radius:8px; background:var(--sunk); }

/* pencereler */
.modal { position:fixed; inset:0; background:rgba(15,12,8,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:20; animation:fade .15s ease; }
.modal[hidden] { display:none; }
.modalBox { background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.fb { width:min(860px, 94vw); height:min(640px, 90vh); display:grid; grid-template-rows:auto 1fr auto; }
.fbHead { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; }
.fbHead h3 { font-size:16px; }
.fbBody { display:grid; grid-template-columns:190px 1fr; min-height:0; border-block:1px solid var(--line); }
.fbPlaces { padding:10px; display:grid; gap:2px; align-content:start; overflow:auto; background:var(--sunk); }
.fbPlaces h4 { margin:8px 8px 2px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.fbPlaces button { border:0; background:none; text-align:left; padding:6px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fbPlaces button:hover { background:var(--panel); } .fbPlaces button.cur { background:var(--soft); color:var(--accent); font-weight:600; }
.fbMain { display:grid; grid-template-rows:auto auto 1fr auto; gap:10px; padding:12px 14px; min-height:0; }
.fbBar { display:flex; gap:6px; align-items:center; min-width:0; }
.crumbs { display:flex; align-items:center; gap:1px; overflow-x:auto; white-space:nowrap; flex:1; scrollbar-width:none; }
.crumbs button { border:0; background:none; padding:5px 7px; } .crumbs button:hover { background:var(--sunk); }
.crumbs button:last-child { font-weight:650; } .crumbs span { color:var(--muted); }
#dirFilter { flex:0 0 170px; }
#dirList { list-style:none; margin:0; padding:4px; overflow:auto; border:1px solid var(--line); border-radius:10px; display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:2px; align-content:start; }
#dirList li { padding:8px 10px; cursor:pointer; border-radius:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#dirList li:hover { background:var(--soft); } #dirList li.none { cursor:default; color:var(--muted); grid-column:1/-1; background:none; }
.fbFoot { display:flex; gap:14px; justify-content:space-between; align-items:center; padding:12px 16px; flex-wrap:wrap; }
.fbFoot .pathRow { flex:1 1 260px; max-width:360px; }
.fbActions { display:flex; gap:8px; }
.lbCard { display:grid; grid-template-columns:minmax(0, 1fr) 290px; width:min(1080px, 82vw); max-height:92vh; overflow:hidden; }
.lbCard .stage { width:min(100%, 88vh); justify-self:center; align-self:center; }
.lbCard .stage canvas { border-radius:0; box-shadow:none; }
.lbSide { display:flex; flex-direction:column; gap:12px; padding:0 16px 16px; border-left:1px solid var(--line); overflow:auto; }
.lbSide .fbHead { padding:14px 0 0; gap:10px; align-items:start; } .lbSide h3 { font-size:15px; }
.lbBlock { display:grid; gap:10px; } .lbBlock[hidden] { display:none; }
.lbSide #lbToggle { margin-top:auto; }
.lbNav { background:rgba(255,255,255,.14); color:#fff; border:0; width:48px; height:48px; border-radius:50%; font-size:26px; margin:0 14px; padding:0; }
.toasts { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:grid; gap:8px; z-index:30; justify-items:center; pointer-events:none; }
.toast { background:var(--text); color:var(--bg); padding:9px 16px; border-radius:99px; box-shadow:0 6px 20px rgba(0,0,0,.25); animation:fade .2s ease; max-width:80vw; }
.toast.bad { background:var(--bad); color:#fff; } .toast.ok { background:var(--ok); color:#fff; }

@media (max-width:980px) {
  .work, .tplLayout, #editorBody, .fbBody, .lbCard { grid-template-columns:1fr; }
  .rail { position:static; max-height:none; } .fbPlaces { display:none; } .tplList { max-height:260px; }
}

/* internet surumu: giris ekrani ve kullanici */
.authWrap { background:var(--bg); backdrop-filter:none; z-index:40; }
.authBox { width:min(400px, 92vw); padding:28px; display:grid; gap:14px; }
.authBox .brand { justify-content:center; font-size:18px; }
.authBox h2 { font-size:20px; text-align:center; }
.authBox input { padding:11px 12px; font-size:15px; width:100%; font:inherit; border-radius:8px; border:1px solid var(--line); background:var(--sunk); color:var(--text); }
.authMsg { padding:9px 12px; border-radius:8px; background:var(--sunk); font-size:13px; }
.authMsg[hidden], .authBox [hidden] { display:none; }
.authMsg.bad { color:var(--bad); } .authMsg.ok { color:var(--ok); }
.authLinks { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.userChip { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.userChip span { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.userChip button { padding:5px 10px; }

.hint.warn { color:var(--bad); }