/* System control centre */
#app #page-ayarlar.active{display:block!important;max-width:none!important;padding:18px!important;width:100%!important}
#app #page-ayarlar .settings-command{min-height:96px;gap:16px;margin-bottom:16px}.settings-command-copy p{font-size:12px}.settings-command-copy h2{font-size:26px}.settings-command-actions{flex-wrap:wrap;justify-content:flex-end}.settings-save-state{font-size:11px}.settings-save-btn{background:linear-gradient(135deg,#08a98f,#00776c);border-color:#21e3c0;font-size:12px}.settings-command .editor-action{font-size:12px}
.ce-body{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:start}.ce-content{min-width:0}.ce-body .settings-tabs{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:12px;position:sticky;top:12px;overflow:visible;background:linear-gradient(160deg,#082238,#041424);min-height:540px}.ce-body .settings-tabs>button{font-size:13px!important;min-height:46px;white-space:normal;text-align:left;padding:10px;transition:background .18s,border-color .18s}.ce-body .settings-tabs>button[hidden]{display:none!important}.ce-body .settings-tabs svg{width:19px;height:19px;flex-shrink:0}.ce-search{width:100%;min-width:0;margin:0 0 10px;border:1px solid #21475e;border-radius:8px;background:#041524;color:#dcecf5;padding:10px;font-size:12px}
#app #page-ayarlar .ce-content>[data-settings-panel]{display:none!important}#app #page-ayarlar .ce-content>[data-settings-panel].active{display:block!important}
.ce-workspace{display:grid;grid-template-columns:210px minmax(280px,1fr) 230px;gap:12px;align-items:stretch}.ce-panel,.ce-canvas{border:1px solid #1b4d68;border-radius:12px;background:linear-gradient(145deg,#082235,#041624);box-shadow:0 12px 30px #0002;min-width:0;overflow:hidden}.ce-panel{padding:16px}.ce-panel h3{display:flex;align-items:center;gap:9px;font-size:15px;color:#eaf6ff;margin:0 0 18px}.ce-panel svg,.ce-canvas svg,.ce-shortcuts svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:#46c4ff}.ce-panel p{font-size:12px;color:#8eabba;line-height:1.65}.ce-page-label{padding:12px;border:1px solid #24536b;border-radius:7px;font-size:13px;font-weight:600;margin-bottom:14px}.ce-page-label span{float:right;color:#43c8e1;font-size:10px}.ce-layers{padding:14px 10px}.ce-layers h3{padding:0 5px}#ceLayers{display:flex;flex-direction:column;gap:10px}.ce-layer{padding:9px;border:1px solid #1d4259;border-radius:9px;background:#051a2c;cursor:grab;transition:border-color .2s,background .2s}.ce-layer:hover{border-color:#348bac}.ce-layer.selected{border-color:#27acff;background:linear-gradient(100deg,#0b426c,#07263f);box-shadow:inset 3px 0 #26c5fa}.ce-select{display:flex;align-items:center;gap:9px;background:none!important;border:0!important;padding:0!important;color:#e8f4fc;font-size:12px;text-align:left;width:100%;cursor:pointer}.ce-select svg{width:17px;height:17px}.ce-layer-tools{display:flex;align-items:center;gap:8px;margin:8px 0 0 25px}.ce-layer-tools button{padding:0!important;width:25px;height:23px;min-height:0!important;border:1px solid #26536c!important;border-radius:5px!important;background:#09283d!important;color:#b1dcec;cursor:pointer}.ce-layer-tools label{margin-left:auto;display:flex}.ce-layer-tools input{accent-color:#20cdb7;width:16px;height:16px}.ce-hint{margin:18px 4px!important;font-size:11px!important}#ceReset{width:100%;padding:10px;background:#082236;color:#a9cedf;border:1px solid #25506a;border-radius:7px;font-size:11px;cursor:pointer}.ce-canvas header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid #1d4259;flex-wrap:wrap}.ce-canvas header b{display:flex;align-items:center;gap:8px;font-size:13px}.ce-devices{display:flex;gap:4px}.ce-devices button{background:#071e30;color:#8fb0c5;border:1px solid #234b64;border-radius:5px;padding:7px;font-size:10px;cursor:pointer}.ce-devices button.active{border-color:#2daaff;background:#0d3e67;color:#e7f7ff}#ceViewport{height:590px;position:relative;overflow:hidden;margin:10px;background:#030f19;border:1px solid #1a4056;border-radius:7px}#ceFrame{display:block;border:0;transform-origin:top left;max-width:none!important;background:#04111e}.ce-canvas footer{text-align:center;color:#7799ac;font-size:10px;padding:3px 10px 12px}.ce-tag{display:inline-block;border:1px solid #236f92;background:#063351;color:#62d2fc;font-size:11px;border-radius:5px;padding:5px 9px;margin-bottom:16px}.ce-field{display:block!important;font-size:12px;color:#aecbdb;margin-bottom:17px}.ce-field>span{display:flex;align-items:center;gap:10px;margin-top:8px}.ce-field input[type=range]{width:100%;min-width:0;accent-color:#22b0ff;height:22px;background:none;padding:0}.ce-field output{width:51px;flex-shrink:0;font-size:11px;text-align:right;color:#eff7ff}.ce-field select,.ce-field input:not([type=range]),.ce-field textarea{width:100%;padding:9px;background:#041727;border:1px solid #24516b;border-radius:6px;color:#ddecf6;margin-top:8px;font-size:12px}.ce-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#cce0eb;min-height:36px;margin:0!important}.ce-toggle input{appearance:none;width:33px!important;height:19px!important;min-width:33px;padding:0;border:1px solid #3c5b6c;border-radius:20px;background:#223746;position:relative;cursor:pointer;transition:background .2s}.ce-toggle input:before{content:'';position:absolute;width:13px;height:13px;border-radius:50%;background:#b8cbd4;top:2px;left:2px;transition:transform .2s}.ce-toggle input:checked{background:#078dcc;border-color:#38bdf8}.ce-toggle input:checked:before{transform:translateX(14px);background:white}.ce-note{font-size:10px;color:#84a4b7;line-height:1.6;border-top:1px solid #1d4054;margin-top:15px;padding-top:12px}.ce-properties details{margin-top:16px;font-size:12px;color:#9bcadd}.ce-properties summary{cursor:pointer;margin-bottom:12px}.ce-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.ce-shortcuts button{display:flex;align-items:center;gap:10px;background:linear-gradient(120deg,#0a2940,#061928);border:1px solid #21506a;border-radius:10px;padding:15px 12px;color:#d9edf8;cursor:pointer;text-align:left;transition:transform .2s,border-color .2s}.ce-shortcuts button:hover{transform:translateY(-2px);border-color:#28b5e9}.ce-shortcuts button:nth-child(2) svg{color:#ac7eff}.ce-shortcuts button:nth-child(3) svg{color:#26e1b3}.ce-shortcuts button:nth-child(4) svg{color:#e7be55}.ce-shortcuts b{display:block;font-size:12px}.ce-shortcuts small{display:block;font-size:10px;color:#83a7bb;margin-top:4px}.ce-shortcuts i{margin-left:auto;font-size:22px;font-style:normal}.ce-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}.ce-menu-item{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #23506b;border-radius:10px;background:#061a2a}.ce-menu-item .ce-toggle{flex:1}.ce-menu-item svg{color:#2bcdcf}.ce-content .settings-panel-card{border-radius:12px}.ce-content .settings-panel-head h3{font-size:17px}.ce-content .settings-panel-head p{font-size:12px}.ce-content .settings-form-grid label{font-size:12px}.ce-content .settings-form-grid input,.ce-content .settings-form-grid select{font-size:13px;min-height:38px}
@media(min-width:1400px){body[data-page=ayarlar] .sidebar{width:210px!important}body[data-page=ayarlar] #app{grid-template-columns:210px minmax(0,1fr)!important}body[data-page=ayarlar] .main{margin:0!important}body[data-page=ayarlar] .side-brand{display:flex!important;gap:10px!important}body[data-page=ayarlar] .side-brand img{width:46px!important;height:46px!important}body[data-page=ayarlar] .side-brand>div{min-width:0}body[data-page=ayarlar] .side-legal{font:700 11px/1.5 "Segoe UI",sans-serif!important;overflow-wrap:anywhere}body[data-page=ayarlar] .sidebar .side-group{margin-top:18px!important}body[data-page=ayarlar] .sidebar .nav{min-height:42px!important;font-size:13px!important}}
@media(max-width:1500px){.ce-body{grid-template-columns:165px minmax(0,1fr)}.ce-workspace{grid-template-columns:180px minmax(250px,1fr)}.ce-properties{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px}.ce-properties h3,.ce-properties details{grid-column:1/-1}.ce-properties .ce-tag{align-self:start}.ce-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.ce-body{grid-template-columns:1fr}.ce-body .settings-tabs{position:static;min-height:0;display:flex;flex-direction:row;flex-wrap:wrap}.ce-search{flex-basis:100%}.ce-body .settings-tabs>button{min-height:38px;font-size:12px!important}.ce-workspace{grid-template-columns:180px minmax(0,1fr)}.settings-command-copy p{line-height:1.6}}
@media(max-width:650px){#app #page-ayarlar.active{padding:10px!important}.ce-workspace{grid-template-columns:1fr}.ce-properties{grid-template-columns:repeat(2,minmax(0,1fr))}.ce-layers{order:0}.ce-canvas{order:1}.ce-properties{order:2}#ceLayers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ce-shortcuts,.ce-menu-grid{grid-template-columns:1fr}.settings-command-copy h2{font-size:22px}.ce-body .settings-tabs>button{flex:1 1 42%}#ceViewport{height:440px}.ce-field output{width:44px}.ce-panel{padding:12px}}
@media(prefers-reduced-motion:reduce){.ce-body *{transition:none!important}}

#app #page-ayarlar h3{font-family:"Segoe UI",Arial,sans-serif!important}

.ce-audit-table{overflow:auto;max-height:650px}.ce-audit-table table{width:100%;font-size:12px;border-collapse:collapse}.ce-audit-table th,.ce-audit-table td{padding:12px;border-bottom:1px solid #21445b;text-align:left}.ce-audit-table th{position:sticky;top:0;background:#0b2c43;color:#9fdbee}.ce-audit-table td{color:#bed3df}.ce-backup-actions{display:flex;gap:12px;flex-wrap:wrap}.ce-panel>button,.ce-backup-actions button,#ceAuditRefresh{background:#0b3a56;border:1px solid #268cb0;border-radius:7px;color:#d7f2fc;padding:10px 14px;cursor:pointer}.ce-content [data-settings-panel=system]>.ce-panel{margin-bottom:18px}
@media(min-width:1400px){body[data-page=ayarlar] #sidebar .side-brand b.side-legal{font:700 10px/1.45 'Segoe UI',sans-serif!important}body[data-page=ayarlar] #sidebar .side-brand span{font:400 9px/1.5 'Segoe UI',sans-serif!important}body[data-page=ayarlar] #sidebar .side-brand small{font-size:9px!important}body[data-page=ayarlar] #sidebar{gap:5px!important;padding:18px 12px!important}body[data-page=ayarlar] #sidebar .side-group{padding:8px 4px!important;margin:8px 0 0!important}body[data-page=ayarlar] #sidebar .nav{padding:9px 10px!important;line-height:1.4!important}body[data-page=ayarlar] #sidebar .side-brand{padding-bottom:15px!important;margin-bottom:4px!important}}

/* Readable, viewport-aware editor */
#app #page-ayarlar.active{margin:0!important;padding:14px!important;max-width:none!important}
body[data-page=ayarlar] .main{max-width:none!important;padding:0!important;min-width:0}
#page-ayarlar .settings-command{padding:14px 18px;min-height:88px;margin-bottom:12px}
#page-ayarlar .settings-command-copy h2{font-size:26px}
#page-ayarlar .settings-command-copy p,#page-ayarlar .settings-save-state{font-size:13px}
#page-ayarlar .settings-command-actions button{font-size:13px;min-height:38px}
.ce-body{gap:12px;grid-template-columns:190px minmax(0,1fr)}
.ce-body .settings-tabs>button{font-size:14px!important;min-height:43px;padding:9px}
.ce-search{font-size:13px;padding:11px}
.ce-panel h3,.ce-canvas header b{font-size:16px}
.ce-select,.ce-page-label{font-size:14px}
.ce-layer{padding:10px}
.ce-layer-tools{margin-top:7px}
.ce-layer-tools button{width:29px;height:26px;font-size:16px}
.ce-field,.ce-toggle,.ce-properties details{font-size:14px}
.ce-field{margin-bottom:13px}
.ce-field output{font-size:13px;width:56px}
.ce-field select,.ce-field input:not([type=range]),.ce-field textarea{font-size:14px;min-height:38px}
.ce-tag,.ce-devices button{font-size:12px}
.ce-devices button{padding:8px}
.ce-hint,.ce-note,.ce-canvas footer{font-size:12px!important;line-height:1.5}
.ce-shortcuts b{font-size:14px}.ce-shortcuts small{font-size:12px}
.ce-shortcuts button{padding:12px}
.ce-shortcuts{gap:10px;margin-top:10px}
#ceViewport{height:clamp(400px,calc(100dvh - 260px),740px)}
.ce-panel{padding:13px}
.ce-canvas header{padding:11px}
.ce-toggle{min-height:34px}
.ce-menu-item .ce-toggle{font-size:15px}
#ceReset{font-size:13px}
@media(min-width:1200px){
.ce-workspace{grid-template-columns:195px minmax(260px,1fr) 235px;gap:10px}
.ce-properties{grid-column:auto;display:block}
.ce-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr))}
.ce-body .settings-tabs{min-height:0}
}
@media(min-width:1200px) and (max-width:1550px){
.ce-body{grid-template-columns:165px minmax(0,1fr)}
.ce-workspace{grid-template-columns:175px minmax(220px,1fr) 210px}
.ce-panel{padding:11px}.ce-select{font-size:13px}
.ce-canvas header{align-items:flex-start}.ce-devices{flex-wrap:wrap}
}
@media(max-width:1199px){
.ce-body{grid-template-columns:1fr}
.ce-body .settings-tabs{position:static;min-height:0;flex-direction:row;flex-wrap:wrap}
.ce-body .settings-tabs>button{min-height:40px}
.ce-search{flex-basis:100%}
.ce-workspace{grid-template-columns:190px minmax(0,1fr)}
.ce-properties{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ce-properties h3,.ce-properties details{grid-column:1/-1}
}
@media(max-width:650px){
.ce-workspace{grid-template-columns:1fr}.ce-properties{grid-template-columns:repeat(2,minmax(0,1fr))}
.ce-body .settings-tabs>button{font-size:13px!important}
.ce-shortcuts{grid-template-columns:1fr}
#ceViewport{height:470px}.ce-field output{width:48px}
.settings-command-copy p{line-height:1.5}.ce-select{font-size:13px}
}

@media(min-width:1200px){.ce-workspace{height:calc(100dvh - 265px);min-height:490px;max-height:850px}.ce-workspace>.ce-panel{overflow:auto;scrollbar-width:thin;scrollbar-color:#28566c transparent}.ce-canvas{display:flex;flex-direction:column;min-height:0}#ceViewport{flex:1;height:auto;min-height:0}.ce-canvas header,.ce-canvas footer{flex-shrink:0}.ce-canvas footer{padding-bottom:10px}}

/* Compact editor with readable controls and minimal outside spacing */
body[data-page=ayarlar] .main{padding:0!important;margin:0!important}
body[data-page=ayarlar] .content{padding:0!important;margin:0!important;max-width:none!important;width:100%!important}
#app #page-ayarlar.active{padding:10px!important;margin:0!important;width:100%!important}
#page-ayarlar .settings-command{padding:11px 15px;min-height:78px;margin-bottom:10px}
.ce-body{gap:10px}.ce-workspace{gap:10px}
.ce-layers .ce-page-label{padding:9px;margin-bottom:10px}
.ce-layers h3,.ce-properties h3{margin-bottom:12px}
#ceLayers{gap:7px}
.ce-layer{padding:9px}
.ce-select{font-size:13px;gap:6px;line-height:1.35}
.ce-layer-tools{margin-top:6px;margin-left:23px;gap:6px}
.ce-hint{margin:10px 2px!important;font-size:11px!important}
#ceReset{padding:8px;font-size:12px}
.ce-field{margin-bottom:10px}
.ce-field>span{margin-top:4px}
.ce-properties .ce-tag{margin-bottom:12px}
.ce-properties .ce-note{margin-top:8px;padding-top:8px;font-size:11px!important}
.ce-properties details{margin-top:10px}
.ce-properties .ce-toggle{min-height:31px}
.ce-canvas header{padding:9px 11px}
#ceViewport{margin:7px}
.ce-canvas footer{font-size:11px!important;padding:2px 8px 7px!important}
.ce-shortcuts{margin-top:8px;gap:8px}
.ce-shortcuts button{padding:10px}
@media(min-width:1200px){
.ce-body{grid-template-columns:180px minmax(0,1fr)}
.ce-workspace{grid-template-columns:205px minmax(220px,1fr) 235px;height:calc(100dvh - 220px);min-height:490px;max-height:none}
.ce-body .settings-tabs{padding:9px}
.ce-body .settings-tabs>button{min-height:40px}
}
@media(min-width:1200px) and (max-width:1550px){
.ce-body{grid-template-columns:160px minmax(0,1fr)}
.ce-workspace{grid-template-columns:180px minmax(220px,1fr) 210px}
}