@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap";*,body{margin:0}:root{--bg:#e8edf2;--bg-deep:#d5dde6;--surface:#f7f9fb;--ink:#1a2332;--muted:#5c6b7a;--line:#c5d0db;--accent:#1a3668;--accent-soft:#e4eaf3;--brand-red:#c8102e;--danger:#b42318;--danger-soft:#fce8e6;--profile:#8b95a3;--shadow-sm:0 1px 2px #1a23320f, 0 2px 6px #1a23320a;--shadow:0 2px 4px #1a23320f, 0 6px 16px #1a233217;--shadow-md:0 3px 6px #1a233212, 0 10px 24px #1a23321a;--shadow-lg:0 4px 8px #1a233214, 0 12px 28px #1a23321f;--shadow-inset:inset 0 1px 0 #ffffffbf, inset 0 -1px 0 #1a23320a;--shadow-btn:0 1px 2px #1a233214, 0 3px 8px #1a36681f;color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:IBM Plex Sans,sans-serif;line-height:1.4}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{background:radial-gradient(ellipse 80% 50% at 10% -10%, #1a36681f, transparent 50%), radial-gradient(ellipse 60% 40% at 100% 0%, #c8102e14, transparent 45%), linear-gradient(180deg, #eef2f6 0%, var(--bg) 40%, var(--bg-deep) 100%);min-width:320px}button,input,select{font:inherit}.app{flex-direction:column;gap:8px;max-width:1600px;height:100%;margin:0 auto;padding:12px 16px 10px;display:flex;overflow:hidden}.topbar{background:linear-gradient(180deg, #fff 0%, var(--surface) 100%);box-shadow:var(--shadow-md), var(--shadow-inset);border:1px solid #c5d0dbe6;border-radius:14px;flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;margin-bottom:0;padding:12px 16px;display:flex}.brand{align-items:center;gap:14px;display:flex}.brand-logo{object-fit:contain;background:0 0;border-radius:0;width:44px;height:44px}.brand h1{letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin:0;font-size:1.2rem;font-weight:700}.brand p{color:var(--muted);margin:2px 0 0;font-size:.85rem}.top-stats{gap:10px;display:flex}.top-stats>div{border:1px solid var(--line);min-width:96px;box-shadow:var(--shadow-sm), var(--shadow-inset);background:linear-gradient(#f8fafc 0%,#eef3f7 100%);border-radius:12px;padding:10px 14px}.top-stats span{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.72rem;display:block}.top-stats strong{font-family:IBM Plex Mono,monospace;font-size:.95rem}.layout{flex:1;grid-template-columns:280px minmax(0,1fr) 260px;align-items:stretch;gap:16px;min-height:0;margin:0;padding:10px 10px 40px;display:grid;overflow:hidden}.sidebar{box-sizing:border-box;flex-direction:column;gap:12px;min-height:0;padding:6px 10px 18px;display:flex}.sidebar.left{padding-bottom:24px;overflow:hidden auto}.sidebar.right{min-height:0;overflow:visible}.credit{text-align:center;width:100%;color:var(--muted);flex-shrink:0;margin:0;padding:2px 8px 4px;font-size:.72rem}.credit a{color:var(--muted);font-weight:500;text-decoration:none}.credit a:hover{color:var(--accent);text-decoration:underline}.sidebar.right .card.grow,.sidebar.right .panel-order-card{flex-direction:column;flex:1;min-height:0;margin-bottom:4px;display:flex;overflow:hidden}.panel-order-card>h2{flex-shrink:0}.face-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.face-grid button{border:1px solid var(--line);cursor:pointer;text-align:left;box-shadow:var(--shadow-sm), var(--shadow-inset);background:linear-gradient(#fff 0%,#f4f7fa 100%);border-radius:10px;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px 14px;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .22s,background .22s;display:flex;position:relative;overflow:hidden}.face-grid button:hover{box-shadow:var(--shadow), var(--shadow-inset);border-color:#9aabbc;transform:translateY(-2px)}.face-grid button:active{box-shadow:var(--shadow-sm);transform:translateY(0)scale(.98)}.face-grid button:focus-visible{border-color:var(--accent);box-shadow:var(--shadow), 0 0 0 3px #1a366847;outline:none}.face-grid button strong{color:var(--ink);font-size:.88rem}.face-grid button em{color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:.7rem;font-style:normal;line-height:1.3}.face-bar{height:3px;position:absolute;bottom:0;left:0;right:0}.face-bar-empty{background:repeating-linear-gradient(90deg,#c5d0db 0 6px,#0000 6px 12px);animation:1.4s ease-in-out infinite facePulseBar}.face-bar-partial{background:linear-gradient(90deg,#d4a017,#e8c547)}.face-bar-overflow{background:linear-gradient(90deg,#b42318,#f04438)}.face-bar-complete{background:linear-gradient(90deg, var(--accent), var(--brand-red))}.face-grid button.face-empty{background:#f3f6f9;border-style:dashed;border-color:#9aabbc;animation:2.2s ease-in-out infinite faceEmptyPulse}.face-grid button.face-empty em{color:#6b7c8f}.face-grid button.face-partial{background:#fffbeb;border-color:#e8c547}.face-grid button.face-partial em{color:#a87b00}.face-grid button.face-overflow{background:#fef3f2;border-color:#f0b4ae}.face-grid button.face-overflow em{color:var(--danger)}.face-grid button.face-complete{background:#f0f4fa;border-color:#8fa3c4}.face-grid button.face-complete em{color:var(--accent)}.face-grid button.active{background:linear-gradient(180deg, #254a82 0%, var(--accent) 100%);border-color:var(--accent);box-shadow:var(--shadow-btn), inset 0 1px 0 #ffffff2e;border-style:solid;animation:none;transform:none}.face-grid button.active:hover{filter:brightness(1.05);transform:translateY(-1px)}.face-grid button.active:focus-visible{box-shadow:var(--shadow-btn), inset 0 1px 0 #ffffff2e, 0 0 0 3px #1a366859}.face-grid button.active strong,.face-grid button.active em{color:#fff}.face-grid button.active .face-bar{background:#ffffff8c;animation:none}@keyframes faceEmptyPulse{0%,to{box-shadow:inset 0 0 #0000}50%{box-shadow:inset 0 0 0 1px #1a366840}}@keyframes facePulseBar{0%,to{opacity:.45}50%{opacity:1}}.card{background:linear-gradient(180deg, #fff 0%, var(--surface) 72%);box-shadow:var(--shadow), var(--shadow-inset);border:1px solid #c5d0dbd9;border-radius:12px;flex-shrink:0;padding:12px;transition:box-shadow .25s,border-color .25s}.card:hover{box-shadow:var(--shadow-md), var(--shadow-inset);border-color:#8fa3c4bf}.card.accent{background:linear-gradient(180deg, #f4f7fc 0%, #eef3f9 40%, var(--surface) 100%);box-shadow:var(--shadow-md), var(--shadow-inset);border-color:#8fa3c4}.card h2{margin:0 0 10px;font-size:.88rem;font-weight:600}.card-head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;display:flex}.card-head h2{margin:0}.btn-icon{appearance:none;border:1px solid var(--line);width:28px;height:28px;color:var(--ink);cursor:pointer;background:#fff;border-radius:8px;flex-shrink:0;place-items:center;padding:0;font-size:1.25rem;line-height:1;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,background .2s,border-color .2s;display:grid}.btn-icon.danger{background:var(--danger-soft);color:var(--danger);border-color:#f0b4ae;font-weight:700}.btn-icon.danger:hover{filter:brightness(.97);transform:scale(1.08);box-shadow:0 4px 12px #b4231840}.btn-icon.danger:active{transform:scale(.94)}.btn-icon:focus-visible{outline:none;box-shadow:0 0 0 3px #b423184d}.field-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.field-grid.three{grid-template-columns:1fr 1fr 1fr}.export-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;display:grid}.export-card{position:relative;overflow:hidden}.export-card.export-ready{border-color:var(--accent);animation:2.4s ease-in-out infinite exportGlow;box-shadow:0 0 0 1px #1a366840,0 0 24px #1a366847,0 12px 28px #1a233214}.export-card.export-ready:before{content:"";pointer-events:none;z-index:0;background:linear-gradient(110deg,#0000 20%,#ffffff8c 45%,#1a36681f 50%,#0000 70%);animation:2.6s ease-in-out infinite exportShine;position:absolute;inset:0;transform:translate(-120%)}.export-card.export-ready>*{z-index:1;position:relative}.export-card.export-ready .btn.primary{box-shadow:0 0 16px #1a366873}.export-ready-hint{font-weight:600;color:var(--accent)!important;margin-top:8px!important}@keyframes exportGlow{0%,to{box-shadow:0 0 0 1px #1a366838,0 0 18px #1a366838,0 12px 28px #1a233214}50%{box-shadow:0 0 0 2px #1a366866,0 0 32px #1a366866,0 12px 28px #1a23321a}}@keyframes exportShine{0%,30%{opacity:0;transform:translate(-130%)}40%{opacity:1}70%,to{opacity:0;transform:translate(130%)}}.hint.warn,.warn{color:var(--danger);font-weight:600}label{color:var(--muted);flex-direction:column;gap:4px;margin-bottom:8px;font-size:.78rem;font-weight:500;display:flex}input,select{border:1px solid var(--line);width:100%;color:var(--ink);background:linear-gradient(#fff 0%,#f7f9fb 100%);border-radius:8px;outline:none;padding:8px 10px;transition:border-color .15s,box-shadow .15s;box-shadow:inset 0 1px 2px #1a23320d}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #1a366826}.hint{color:var(--muted);margin:0;font-size:.78rem;line-height:1.45}.segmented{grid-template-columns:1fr 1fr;gap:8px;display:grid}.segmented button{border:1px solid var(--line);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);background:linear-gradient(#fff 0%,#f3f6f9 100%);border-radius:8px;padding:8px;font-weight:600;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,background .22s,border-color .22s,color .22s}.segmented button:hover:not(.active){box-shadow:var(--shadow);border-color:#9aabbc;transform:translateY(-2px)}.segmented button:active{transform:translateY(0)scale(.97)}.segmented button:focus-visible{box-shadow:var(--shadow), 0 0 0 3px #1a366847;outline:none}.segmented button.active{background:linear-gradient(180deg, #254a82 0%, var(--accent) 100%);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-btn), inset 0 1px 0 #ffffff2e}.segmented button.active:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn{appearance:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm), var(--shadow-inset);background:linear-gradient(#fff 0%,#f2f5f8 100%);border-radius:8px;padding:8px 12px;font-weight:600;line-height:1.2;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .22s,filter .22s,background .22s}.btn:hover:not(:disabled){box-shadow:var(--shadow), var(--shadow-inset);border-color:#9aabbc;transform:translateY(-2px)}.btn:active:not(:disabled){box-shadow:var(--shadow-sm);transform:translateY(0)scale(.97)}.btn:focus-visible{border-color:var(--accent);box-shadow:var(--shadow), 0 0 0 3px #1a36684d;outline:none}.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.2);box-shadow:none;transform:none}.btn.primary{background:linear-gradient(180deg, #254a82 0%, var(--accent) 100%);color:#fff;width:100%;box-shadow:var(--shadow-btn), inset 0 1px 0 #fff3;border-color:#152f5c;margin-top:4px}.btn.primary:hover:not(:disabled){filter:brightness(1.07);box-shadow:var(--shadow-md), inset 0 1px 0 #ffffff38;transform:translateY(-2px)}.btn.primary:focus-visible{box-shadow:var(--shadow-md), inset 0 1px 0 #ffffff38, 0 0 0 3px #1a366866}.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:#f0b4ae}.btn.move{justify-content:center;align-items:center;gap:6px;width:100%;min-height:36px;padding:8px;font-size:.85rem;display:inline-flex}.row-actions{grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:8px;margin-top:4px;display:grid}.row-actions.two{grid-template-columns:1fr 1fr}.export-actions .btn.primary{width:auto;margin-top:0}.export-actions .btn:disabled{opacity:.45}.panel-list{flex-direction:column;gap:6px;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.panel-list.tall{flex:1;max-height:none}.panel-list-item{cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow-sm);background:linear-gradient(#f7f9fb 0%,#eef3f7 100%);border:1px solid #c5d0dbb3;border-radius:10px;align-items:center;gap:10px;padding:8px 10px;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s,background .2s;display:flex}.panel-list-item:hover{box-shadow:var(--shadow);border-color:#9aabbc;transform:translateY(-2px)}.panel-list-item:active{transform:translateY(0)scale(.98)}.panel-list-item:focus-visible{border-color:var(--accent);box-shadow:var(--shadow), 0 0 0 3px #1a366847;outline:none}.panel-list-item.active{border-color:var(--accent);background:linear-gradient(180deg, #e8eef8 0%, var(--accent-soft) 100%);box-shadow:var(--shadow), inset 0 1px 0 #fff9}.panel-list-item .idx{color:#fff;background:#1a2332;border-radius:8px;flex-shrink:0;place-items:center;width:26px;height:26px;font-size:.75rem;font-weight:700;display:grid}.panel-list-item .meta{flex-direction:column;min-width:0;display:flex}.panel-list-item strong{font-size:.85rem}.panel-list-item em{color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:.75rem;font-style:normal}.stage{background:linear-gradient(180deg, #fff 0%, var(--surface) 55%);box-shadow:var(--shadow-lg), var(--shadow-inset);border:1px solid #c5d0dbd9;border-radius:14px;flex-direction:column;align-self:stretch;height:calc(100% - 12px);min-height:0;max-height:none;margin:6px 4px 12px;padding:12px;display:flex;position:static;overflow:hidden}.stage-head{flex-shrink:0;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;display:flex}.stage-head h2{margin:0;font-size:.92rem}.stage-head span{color:var(--muted);font-size:.8rem}.preview-wrap{min-height:0;box-shadow:inset 0 2px 8px #1a233214, inset 0 0 0 1px #ffffff80, var(--shadow-sm);background:linear-gradient(90deg,#1a23320a 1px,#0000 1px) 0 0/24px 24px,linear-gradient(#1a23320a 1px,#0000 1px) 0 0/24px 24px,linear-gradient(#fff 0%,#eef2f6 100%);border:1px solid #b8c4d0;border-radius:12px;flex:1;place-items:center;padding:10px;display:grid;overflow:hidden}.preview-empty{text-align:center;color:var(--muted)}.preview-empty p{color:var(--ink);margin:0 0 6px;font-size:1.05rem;font-weight:600}.device-svg{filter:drop-shadow(0 6px 14px #1a233224);width:100%;max-width:980px;height:auto;max-height:100%;overflow:visible}.outer-shell{fill:url(#profileGrad);stroke:#6d7684;stroke-width:1px}.profile-frame{fill:url(#profileGrad);stroke:#6a7382;stroke-width:.8px}.panel-fill{fill:url(#panelGrad);stroke:#a8b2bf;stroke-width:.8px;transition:filter .2s}.panel-group:hover .panel-fill{filter:brightness(1.04)}.panel-standart{fill:#e9edf2}.panel-atki_panel{fill:#e4e9ef}.panel-duz_atki{fill:url(#profileGrad)}.panel-mudahale{fill:#eceff3}.panel-gozetleme_camli{fill:#e8eef4}.panel-damper{fill:#dde5ee}.panel-flans{fill:#c5ccd6}.duz-atki-fill{fill:url(#profileGrad);stroke:#5a6472;stroke-width:.6px}.damper-blade{stroke:#3a4658;stroke-width:2.2px;stroke-linecap:round}.damper-blade-edge{stroke:#8a96a6;stroke-width:1px;stroke-linecap:round;opacity:.7}.side-proj-body{fill:#5b8fa8;fill-opacity:.55;stroke:#2a5f78;stroke-width:1.2px}.side-proj-tab{fill:#2a5f78;stroke:#1a3a4a;stroke-width:.8px}.side-proj-flans .side-proj-body{fill:#c5a0a0;fill-opacity:.5;stroke:#8b3a3a;stroke-width:1px}.side-proj-flans .side-proj-tab{fill:#8b3a3a;stroke:#5c2424}.flans-plate{fill:#b0b8c4;stroke:#6a7382;stroke-width:.8px}.flans-bolt{fill:#4a5160;stroke:#2a303a;stroke-width:.5px}.flans-bolt-hole{fill:#1a1f28}input:disabled{color:var(--muted);cursor:not-allowed;background:#eef2f6}.remaining-bay{fill:#f0f3f7;stroke:#b7c2ce;stroke-width:.8px;stroke-dasharray:5 4}.selection-ring{stroke:var(--accent);stroke-width:2.5px;stroke-dasharray:6 4;animation:1.2s linear infinite dash}@keyframes dash{to{stroke-dashoffset:-20px}}.hardware{fill:#1f2630;stroke:#0d1117;stroke-width:.5px}.latch-arm{stroke:#1f2630;stroke-width:2px;stroke-linecap:round}.atki-bar{fill:url(#profileGrad);stroke:#6a7382;stroke-width:.6px}.atki-center{stroke:#5a6472;stroke-width:1px}.panel-detail-line{stroke:#b7c0cb;stroke-width:1px;stroke-dasharray:4 6}.glass-rim{fill:#2a323e;stroke:#11161d;stroke-width:1px}.glass-pane{fill:url(#glassGrad);stroke:#4d6d86;stroke-width:1px}.glass-shine{fill:#ffffff73}.base-slot{fill:#1a1f28}.dim-label,.type-label,.seq-label,.total-dim{fill:var(--muted);font-family:IBM Plex Sans,sans-serif}.dim-label{font-family:IBM Plex Mono,monospace;font-size:11px}.type-label{font-size:10px}.seq-label{fill:var(--ink);font-size:12px;font-weight:700}.overflow-warn{fill:#b42318;font-family:IBM Plex Sans,sans-serif;font-size:14px;font-weight:700}.face-picker{border-top:1px solid var(--line);flex-shrink:0;margin-top:10px;padding-top:10px}.face-picker h2{margin:0 0 8px;font-size:.85rem;font-weight:600}.face-picker .face-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.face-picker .face-grid button{padding:6px 8px 10px}.face-picker .face-grid button em{font-size:.6rem}.legend{border-top:1px solid var(--line);flex-wrap:wrap;flex-shrink:0;gap:10px;margin-top:8px;padding-top:8px;display:flex}.legend-item{color:var(--muted);align-items:center;gap:8px;font-size:.8rem;display:flex}.swatch{background:#e9edf2;border:1px solid #9aa6b4;border-radius:4px;width:18px;height:18px}.swatch-atki_panel{background:linear-gradient(90deg,#e4e9ef 42%,#8b95a3 42% 58%,#e4e9ef 58%)}.swatch-duz_atki{background:linear-gradient(90deg,#9aa3af,#c5ccd6);width:10px}.swatch-mudahale{background:#eceff3;box-shadow:inset 3px 0 #1f2630}.swatch-gozetleme_camli{background:radial-gradient(circle at 50% 45%,#6a9bb8 0 35%,#0000 36%),#e8eef4}.swatch-damper{background:repeating-linear-gradient(-12deg,#dde5ee,#dde5ee 3px,#3a4658 3px 5px)}.swatch-flans{background:radial-gradient(circle at 50% 25%,#4a5160 0 18%,#0000 19%),radial-gradient(circle at 50% 75%,#4a5160 0 18%,#0000 19%),#b0b8c4}@media (width<=1100px){html,body,#root{height:auto;overflow:auto}.app{height:auto;padding:12px;overflow:visible}.layout{flex:none;grid-template-columns:1fr;overflow:visible}.sidebar.right{order:3}.sidebar,.sidebar.left,.sidebar.right,.sidebar.right .panel-order-card{padding:0;overflow:visible}.stage{height:auto;max-height:none;margin:0;position:static;overflow:visible}.preview-wrap{min-height:320px}.panel-list.tall{max-height:280px}.face-picker .face-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.field-grid.three{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}.top-stats{width:100%}.top-stats>div{flex:1}}@media (width<=640px){.face-picker .face-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}