/* ═══════════════════════════════════════════════════════════════
   KTE EDİTÖR — BİRLEŞİK STYLESHEET (v50)
   Önceki 5 ayrı dosya (editor + v19 + v20 + v35 + v46) yükleme
   sırasıyla tek dosyada birleştirildi. Cascade birebir korundu.
   ═══════════════════════════════════════════════════════════════ */

/* ░░░░░░░░░░ KATMAN 1/5: temel (editor.css) ░░░░░░░░░░ */
/* KTE Editor v8.0 — Pro */
:root{--kb:#0073aa;--kbd:#005b87;--kr:#dc3545;--kg:#28a745;--kbor:#dde1e7;--kbg:#f4f6f8;}
*{box-sizing:border-box;}

#kte-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:999999;display:flex;align-items:center;justify-content:center;padding:6px;}
.kte-modal{background:#fff;border-radius:10px;width:100%;max-width:1320px;max-height:96vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;}

/* Header */
.kte-hdr{height:52px;background:linear-gradient(135deg,#0073aa,#005b87);display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex-shrink:0;}
.kte-hdr-title{margin:0;font-size:16px;font-weight:700;color:#fff;}
.kte-hdr-btns{display:flex;gap:5px;align-items:center;}
.kte-hbtn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff;padding:5px 11px;border-radius:5px;cursor:pointer;font-size:12px;font-weight:600;transition:background .15s;}
.kte-hbtn:hover{background:rgba(255,255,255,.32);}
.kte-hbtn-danger{background:rgba(220,53,69,.4);}
.kte-hbtn-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:2px 8px;border-radius:4px;line-height:1;}
.kte-hbtn-close:hover{background:rgba(255,255,255,.2);}

#kte-color-bar{display:flex;align-items:center;gap:0;padding:0 14px;background:rgba(0,0,0,.18);height:38px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.08);}

/* Body */
.kte-body{display:flex;flex:1;overflow:hidden;min-height:0;}
.kte-left{width:200px;flex-shrink:0;background:#fff;border-right:1px solid var(--kbor);display:flex;flex-direction:column;overflow:hidden;}
.kte-ptitle{padding:6px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#6c757d;background:var(--kbg);border-bottom:1px solid var(--kbor);flex-shrink:0;}
.kte-layers-wrap{flex:1;overflow-y:auto;padding:3px;min-height:0;}

.kte-layer{display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:4px;cursor:pointer;border:1px solid transparent;margin-bottom:2px;transition:background .1s;}
.kte-layer:hover{background:#eef4fb;}
.kte-lay-sel{background:#ddeeff!important;border-color:var(--kb)!important;}
.kte-lay-msel{background:#d4edda!important;border-color:var(--kg)!important;}
.kte-lay-hid{opacity:.35;}
.kte-lay-ko{background:#fff3cd!important;}
.kte-lay-ico{font-size:12px;width:14px;text-align:center;flex-shrink:0;}
.kte-lay-name{flex:1;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kte-lay-btns{display:flex;gap:1px;opacity:0;transition:opacity .15s;flex-shrink:0;}
.kte-layer:hover .kte-lay-btns{opacity:1;}
.kte-lay-btns button{background:none;border:none;cursor:pointer;padding:1px 3px;font-size:10px;border-radius:2px;line-height:1;}
.kte-lay-btns button:hover{background:#ddd;}
.kte-no-layer{padding:14px;color:#aaa;font-size:11px;text-align:center;}

/* Tools */
.kte-tools-wrap{border-top:1px solid var(--kbor);padding:7px;flex-shrink:0;}
.kte-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:7px;}
.kte-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 3px;border:1px solid var(--kbor);border-radius:5px;background:#fff;cursor:pointer;transition:all .15s;}
.kte-tool span{font-size:14px;font-weight:700;line-height:1;}
.kte-tool small{font-size:9px;color:#6c757d;}
.kte-tool:hover{background:var(--kb);border-color:var(--kb);color:#fff;}
.kte-tool:hover small{color:rgba(255,255,255,.8);}

.kte-qt-wrap{border-top:1px solid var(--kbor);padding-top:6px;}
.kte-qt-title{font-size:10px;color:#6c757d;font-weight:700;text-transform:uppercase;margin-bottom:4px;}
.kte-qt-btn{display:block;width:100%;text-align:left;padding:4px 6px;margin-bottom:2px;background:var(--kbg);border:1px solid var(--kbor);border-radius:3px;cursor:pointer;font-size:11px;}
.kte-qt-btn:hover{background:#ddeeff;border-color:var(--kb);}

/* Canvas area */
.kte-canvas-area{flex:1;display:flex;flex-direction:column;background:#c8cbd0;overflow:hidden;}
.kte-canvas-info{padding:4px 12px;background:var(--kbg);border-bottom:1px solid var(--kbor);display:flex;justify-content:space-between;font-size:11px;color:#6c757d;flex-shrink:0;align-items:center;gap:10px;}
.kte-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px;position:relative;}
#kte-canvas{box-shadow:0 4px 24px rgba(0,0,0,.25);cursor:crosshair;display:block;background:#fff;}
.kte-canvas-ctrls{flex-shrink:0;display:flex;gap:5px;padding:6px 12px;background:var(--kbg);border-top:1px solid var(--kbor);align-items:center;}
.kte-canvas-ctrls button{padding:4px 10px;border:1px solid var(--kbor);border-radius:4px;background:#fff;cursor:pointer;font-size:12px;}
.kte-canvas-ctrls button:hover{background:var(--kb);color:#fff;border-color:var(--kb);}

/* Float panels */
.kte-float-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--kbor);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.35);z-index:1000020;max-width:540px;width:90%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;}
.kte-float-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:1000015;}
.kte-fp-hdr{padding:11px 16px;background:linear-gradient(135deg,#0073aa,#005d8a);color:#fff;border-bottom:none;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.kte-fp-close{background:none;border:none;cursor:pointer;font-size:20px;padding:0 6px;color:#fff;opacity:0.85;}
.kte-fp-close:hover{opacity:1;}
.kte-sh-grid,.kte-tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;overflow-y:auto;flex:1;}
@media (max-width:600px){
  .kte-float-panel{max-width:95%;max-height:85vh;}
  .kte-sh-grid,.kte-tpl-grid{grid-template-columns:repeat(3,1fr);}
}
.kte-sg-cat{grid-column:1/-1;font-size:10px;font-weight:700;text-transform:uppercase;color:#6c757d;padding:4px 2px 2px;border-bottom:1px solid #eee;margin-top:4px;}
.kte-sg-cat:first-child{margin-top:0;}
.kte-sh-thumb,.kte-tpl-thumb{border:1px solid var(--kbor);border-radius:5px;padding:4px;text-align:center;cursor:pointer;transition:all .12s;}
.kte-sh-thumb:hover,.kte-tpl-thumb:hover{border-color:var(--kb);background:#eef4fb;}
.kte-sh-thumb span,.kte-tpl-thumb span{display:block;font-size:9px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kte-tpl-noimg{width:64px;height:64px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto;}

/* Right */
.kte-right{width:235px;flex-shrink:0;background:#fff;border-left:1px solid var(--kbor);overflow-y:auto;}
.kte-ps{padding:9px;border-bottom:1px solid var(--kbor);}
.kte-ptitle2{font-size:10px;font-weight:700;text-transform:uppercase;color:#6c757d;letter-spacing:.5px;margin-bottom:7px;}
.kte-pr{margin-bottom:6px;}
.kte-pr label,.kte-r4 label,.kte-r3 label,.kte-r2 label{display:block;font-size:10px;color:#6c757d;margin-bottom:2px;font-weight:600;}
.kte-r4,.kte-r3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:6px;}
.kte-r2{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:6px;}
.kte-if{width:100%;padding:5px 7px;border:1px solid var(--kbor);border-radius:4px;font-size:12px;}
.kte-if:focus{outline:none;border-color:var(--kb);}
.kte-is{width:100%;padding:4px 5px;border:1px solid var(--kbor);border-radius:4px;font-size:11px;}
.kte-ic{width:100%;height:30px;border:1px solid var(--kbor);border-radius:4px;cursor:pointer;padding:2px;}
.kte-range{width:100%;accent-color:var(--kb);cursor:pointer;}
.kte-chk{font-size:11px;cursor:pointer;display:inline-flex;align-items:center;gap:3px;}
.kte-act-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;}
.kte-ab{padding:4px 7px;border:1px solid var(--kbor);border-radius:4px;background:#fff;cursor:pointer;font-size:11px;transition:all .12s;}
.kte-ab:hover{background:var(--kb);color:#fff;border-color:var(--kb);}
.kte-ab-d:hover{background:var(--kr)!important;border-color:var(--kr)!important;}

/* Footer */
.kte-footer{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:var(--kbg);border-top:1px solid var(--kbor);flex-shrink:0;}
.kte-footer-l,.kte-footer-r{display:flex;gap:7px;}
.kte-fbtn{padding:9px 16px;border-radius:5px;border:1px solid var(--kbor);cursor:pointer;font-size:13px;font-weight:600;transition:all .15s;background:#fff;}
.kte-fbtn:hover{background:var(--kbg);}
.kte-fbtn-p{background:var(--kb);color:#fff;border-color:var(--kb);}
.kte-fbtn-p:hover{background:var(--kbd);border-color:var(--kbd);}
.kte-fbtn:disabled{opacity:.55;cursor:not-allowed;}

/* ════════════ Product page ════════════ */
.kte-pb{background:#f0f6ff;border:2px solid #0073aa;border-radius:8px;padding:14px;margin:0 0 15px;}
.kte-pb-head{margin-bottom:10px;}
.kte-pb-title{font-size:15px;font-weight:700;color:#0073aa;margin-bottom:4px;}
.kte-pb-info{font-size:12px;color:#555;}
.kte-pb-tabs{display:flex;gap:0;background:#fff;border:1px solid #c3d4e3;border-radius:6px;padding:3px;margin-bottom:12px;overflow:hidden;}
.kte-pb-tab{flex:1;padding:8px 6px;background:transparent;border:none;cursor:pointer;font-size:12px;font-weight:600;color:#666;border-radius:4px;transition:all .15s;}
.kte-pb-tab.active{background:#0073aa;color:#fff;}
.kte-pb-tab:not(.active):hover{background:#e8f2fb;}
.kte-pb-pane{display:none;}
.kte-pb-pane.active{display:block;}
.kte-pb-desc{font-size:12px;color:#555;margin:0 0 10px;line-height:1.45;}
.kte-pb-btn-primary{width:100%;background:#0073aa;color:#fff;border:none;padding:11px;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;margin-top:6px;}
.kte-pb-btn-primary:hover{background:#005b87;}
.kte-pb-warn{background:#fff3cd;border:1px solid #ffc107;border-radius:4px;padding:8px;margin-bottom:8px;font-size:12px;color:#856404;}
.kte-pb-ok{background:#d4edda;border:1px solid #28a745;border-radius:4px;padding:8px;margin-bottom:8px;font-size:12px;color:#155724;}
.kte-pb-colors{margin-bottom:11px;}
.kte-pb-clbl{font-size:12px;font-weight:600;color:#333;margin-bottom:6px;}
.kte-pb-cwrap{display:flex;gap:7px;flex-wrap:wrap;}
.kte-ink-lbl{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:2px solid #003399;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;}
.kte-ink-lbl span{width:13px;height:13px;border:1px solid rgba(0,0,0,.2);border-radius:50%;display:inline-block;}
.kte-pb-input,.kte-pb-textarea{width:100%;padding:7px 9px;border:1px solid #c3c4c7;border-radius:4px;font-size:13px;}
.kte-pb-textarea{margin-top:8px;resize:vertical;font-family:inherit;}

/* Upload zone */
.kte-up-zone{border:2px dashed #c3c4c7;border-radius:8px;padding:20px;text-align:center;background:#fafafa;cursor:pointer;transition:all .15s;}
.kte-up-zone:hover,.kte-up-zone.drag-over{border-color:#0073aa;background:#f0f6ff;}
.kte-up-list{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.kte-up-item{display:flex;align-items:center;gap:7px;padding:5px 8px;background:#fff;border:1px solid #ddd;border-radius:4px;font-size:12px;}
.kte-up-item .kte-up-rm{margin-left:auto;background:none;border:none;color:#dc3545;cursor:pointer;font-size:14px;}

/* Brief form */
.kte-bf-row{margin-bottom:8px;}
.kte-bf-row label{display:block;font-size:11px;font-weight:600;color:#444;margin-bottom:3px;}

/* Quantity */
.kte-qty-row{display:flex;align-items:center;gap:10px;margin:11px 0 5px;padding-top:10px;border-top:1px solid #c3d4e3;}
.kte-qty-row label{font-size:12px;font-weight:600;color:#444;}
.kte-qty-row input[type=number]{width:75px;padding:6px 8px;border:1px solid #c3c4c7;border-radius:4px;font-size:14px;font-weight:600;text-align:center;}

@media(max-width:900px){.kte-left{width:155px;}.kte-right{width:185px;}}
@media(max-width:650px){.kte-modal{max-height:100vh;border-radius:0;}.kte-left{width:118px;}.kte-right{display:none;}}

/* ════════ v9 additions ════════ */
.kte-align-grp{display:flex;gap:3px;}
.kte-align-btn{flex:1;padding:5px 4px;border:1px solid var(--kbor);background:#fff;cursor:pointer;font-size:11px;font-weight:600;border-radius:3px;transition:all .12s;}
.kte-align-btn:hover{background:#eef4fb;border-color:var(--kb);}
.kte-align-btn.active{background:var(--kb);color:#fff;border-color:var(--kb);}

/* ════════ v11 additions ════════ */

/* New circular color picker on product page */
.kte-pb-cwrap-v2{display:flex;gap:9px;flex-wrap:wrap;}
.kte-cv2{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 8px 4px;border:2px solid transparent;border-radius:8px;cursor:pointer;background:#f7f9fc;min-width:54px;transition:all .15s;}
.kte-cv2:hover{background:#e8f1fa;}
.kte-cv2.is-active{background:#e3effb;border-color:#0073aa;}
.kte-cv2-dot{width:30px;height:30px;border-radius:50%;border:2px solid rgba(0,0,0,.1);box-shadow:0 2px 4px rgba(0,0,0,.08);transition:transform .15s;}
.kte-cv2:hover .kte-cv2-dot{transform:scale(1.08);}
.kte-cv2.is-active .kte-cv2-dot{box-shadow:0 0 0 2px #fff, 0 0 0 4px #0073aa;}
.kte-cv2-lbl{font-size:11px;font-weight:600;color:#444;}
.kte-cv2.is-active .kte-cv2-lbl{color:#0073aa;}

/* Rulers */
.kte-canvas-rulers{position:relative;display:inline-block;}
.kte-canvas-rulers > canvas#kte-ruler-h{display:block;margin-left:18px;}
.kte-canvas-rulers > canvas#kte-ruler-v{display:block;float:left;}
.kte-canvas-rulers > #kte-canvas{display:block;}
.kte-ruler-corner{position:absolute;top:0;left:0;width:18px;height:18px;background:#e8e8e8;border:1px solid #bbb;}

/* Locked layer */
.kte-lay-locked{background:#f0e6ff!important;}
.kte-lay-locked .kte-lay-name{font-style:italic;color:#666;}

/* Mobile */
@media(max-width:480px){
  .kte-modal{font-size:12px;}
  .kte-hdr{height:44px;padding:0 8px;}
  .kte-hdr-title{font-size:14px;}
  .kte-hbtn{padding:4px 7px;font-size:11px;}
  .kte-left{width:120px;}
  .kte-right{width:160px;}
  .kte-tools-grid{grid-template-columns:1fr;}
  .kte-tool small{font-size:8px;}
  .kte-canvas-info{font-size:10px;padding:3px 6px;}
  .kte-canvas-ctrls span{display:none;}
  .kte-footer{height:46px;padding:0 8px;}
  .kte-fbtn{padding:7px 10px;font-size:11px;}
}

/* ════════ v12 additions ════════ */

/* Color bar inside editor - matches product page picker */
#kte-color-bar{display:flex;align-items:center;gap:10px;padding:6px 14px;background:rgba(0,0,0,.18);min-height:46px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.08);}
.kte-cbar-single{display:flex;align-items:center;gap:6px;color:#fff;}
.kte-cbar-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.3);}
.kte-cbar-lbl{font-size:12px;font-weight:600;}
.kte-cbar-title{font-size:11px;color:#fff;font-weight:600;}
.kte-cbar-list{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.kte-cbar-swatch{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 7px 3px;background:rgba(255,255,255,.08);border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .15s;}
.kte-cbar-swatch:hover{background:rgba(255,255,255,.18);}
.kte-cbar-swatch.is-active{background:rgba(255,255,255,.25);border-color:#fff;}
.kte-cbar-sw-dot{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2);}
.kte-cbar-swatch.is-active .kte-cbar-sw-dot{box-shadow:0 0 0 2px rgba(255,255,255,.4);}
.kte-cbar-sw-lbl{font-size:10px;color:#fff;font-weight:600;}

/* Quick text/shape tabs */
.kte-qt-tabs{display:flex;gap:0;border-bottom:1px solid var(--kbor);margin-bottom:6px;}
.kte-qt-tab{flex:1;background:#fff;border:none;border-bottom:2px solid transparent;cursor:pointer;padding:6px 4px;font-size:11px;font-weight:600;color:#666;}
.kte-qt-tab:hover{color:var(--kb);}
.kte-qt-tab.active{color:var(--kb);border-bottom-color:var(--kb);}
.kte-qt-pane{padding:2px 0;}
.kte-qt-shape-cat{font-size:9px;text-transform:uppercase;color:#999;font-weight:700;letter-spacing:.4px;margin:6px 2px 3px;}
.kte-qt-shape-row{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:4px;}
.kte-qt-shape-btn{background:#fff;border:1px solid var(--kbor);border-radius:4px;cursor:pointer;padding:3px;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.kte-qt-shape-btn:hover{background:var(--kb);color:#fff;border-color:var(--kb);}


/* Extra ink on product page */
.kte-pb-extra-ink{margin-bottom:12px;padding:10px 12px;background:#fff8ec;border:1px solid #f0c674;border-radius:6px;}
.kte-pb-extra-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;}
.kte-pb-extra-toggle strong{color:#7a5a00;}
.kte-pb-extra-hint{font-size:11px;color:#999;font-style:italic;}
.kte-pb-extra-options{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
.kte-cv2-extra{position:relative;padding-bottom:18px;}
.kte-cv2-price{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-size:10px;color:#7a5a00;font-weight:700;}

/* ════════ v13 additions ════════ */

/* Collapsible side panels */
.kte-left, .kte-right{
  position:relative;
  transition:width .25s ease, min-width .25s ease, padding .25s ease, opacity .25s ease;
  overflow-y:auto;            /* SCROLL on left + right */
  overflow-x:hidden;
}
.kte-panel-toggle{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:48px;
  border:1px solid var(--kbor);
  background:#fff;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  color:#0073aa;
  padding:0;
  z-index:20;
  border-radius:0 6px 6px 0;
  box-shadow:1px 0 3px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.kte-pt-left{right:-9px;}
.kte-pt-right{left:-9px;border-radius:6px 0 0 6px;}
.kte-panel-toggle:hover{background:#0073aa;color:#fff;}
.kte-left.is-collapsed{width:18px!important;min-width:18px;padding:0;opacity:0.7;}
.kte-left.is-collapsed > *:not(.kte-panel-toggle){display:none;}
.kte-left.is-collapsed:hover{opacity:1;}
.kte-right.is-collapsed{width:18px!important;min-width:18px;padding:0;opacity:0.7;}
.kte-right.is-collapsed > *:not(.kte-panel-toggle){display:none;}
.kte-right.is-collapsed:hover{opacity:1;}

/* Login prompt for guests */
.kte-login-prompt{
  background:linear-gradient(135deg,#fff8ec,#ffeacd);
  border:1px solid #f0c674;
  border-radius:6px;
  padding:10px 12px;
  margin:8px 0;
  font-size:12px;
  color:#7a5a00;
  display:flex;
  align-items:center;
  gap:8px;
}
.kte-login-prompt strong{display:block;font-size:13px;}
.kte-login-prompt a{color:#0073aa;font-weight:600;text-decoration:none;}
.kte-login-prompt a:hover{text-decoration:underline;}
.kte-login-prompt-close{margin-left:auto;background:none;border:none;color:#999;cursor:pointer;font-size:16px;line-height:1;}

/* Touch-friendly button sizes */
.kte-tool, .kte-fbtn, .kte-hbtn, .kte-ab, .kte-align-btn, .kte-cv2, .kte-cbar-swatch{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
@media(pointer:coarse){
  .kte-tool{min-height:48px;}
  .kte-fbtn{min-height:44px;padding:10px 14px;}
  .kte-hbtn{min-height:36px;}
  .kte-align-btn{min-height:36px;}
}

/* ════════════════ v14: Beginner-Friendly Left Panel ════════════════ */

/* Wider, more breathable left panel */
.kte-left{
  width:280px!important;
  min-width:280px;
  background:linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
  padding:0!important;
  border-right:1px solid var(--kbor);
  display:flex;
  flex-direction:column;
}
.kte-left > * { flex-shrink: 0; }

/* Welcome banner */
.kte-welcome{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:10px 10px 0;
  padding:10px 12px;
  background:linear-gradient(135deg, #e3f2fd, #bbdefb);
  border:1px solid #90caf9;
  border-radius:8px;
  position:relative;
  font-size:11.5px;
  line-height:1.4;
  color:#0d47a1;
}
.kte-welcome-emoji{font-size:22px;line-height:1;}
.kte-welcome-body{flex:1;}
.kte-welcome-body strong{display:block;font-size:13px;margin-bottom:2px;color:#0d47a1;}
.kte-welcome-close{
  background:none;border:none;
  color:#0d47a1;cursor:pointer;
  font-size:18px;line-height:1;
  padding:0 4px;opacity:0.6;
}
.kte-welcome-close:hover{opacity:1;}

/* Step sections (accordion) */
.kte-step{
  margin:8px 10px;
  background:#fff;
  border:1px solid var(--kbor);
  border-radius:8px;
  overflow:hidden;
  transition:box-shadow 0.18s;
}
.kte-step:hover{box-shadow:0 1px 4px rgba(0,0,0,0.04);}
.kte-step-hdr{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:#fff;
  border:none;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:#1a1a1a;
  text-align:left;
  transition:background 0.12s;
}
.kte-step-hdr:hover{background:#f5f7fa;}
.kte-step-num{
  width:22px;height:22px;
  border-radius:50%;
  background:#0073aa;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  flex-shrink:0;
}
.kte-step-title{flex:1;}
.kte-step-hint{font-size:10.5px;font-weight:400;color:#888;}
.kte-step-toggle{
  font-size:12px;color:#999;
  transition:transform 0.2s;
}
.kte-step.is-open .kte-step-toggle{transform:rotate(0deg);}
.kte-step:not(.is-open) .kte-step-toggle{transform:rotate(-90deg);}
.kte-step-body{
  display:none;
  padding:10px 12px 12px;
  border-top:1px solid var(--kbor);
}
.kte-step.is-open .kte-step-body{display:block;}
.kte-step-desc{
  font-size:11px;
  color:#666;
  margin:0 0 10px;
  line-height:1.4;
}

/* Step body for layers - max height + scroll */
.kte-step-body-layers .kte-layers-wrap{
  max-height:260px;
  overflow-y:auto;
  margin:0;
}

/* Big Add buttons */
.kte-add-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:14px;
}
.kte-add-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:14px 8px 10px;
  background:#fff;
  border:1.5px solid #d0d7e2;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.15s;
  text-align:center;
  min-height:88px;
}
.kte-add-btn:hover{
  background:linear-gradient(180deg, #e3f2fd, #fff);
  border-color:#0073aa;
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(0,115,170,0.12);
}
.kte-add-btn:active{transform:translateY(0);}
.kte-add-icon{font-size:24px;line-height:1;}
.kte-add-label{
  font-size:12px;
  font-weight:700;
  color:#1a1a1a;
}
.kte-add-sub{
  font-size:9.5px;
  color:#7a7a7a;
  line-height:1.2;
  margin-top:1px;
}
.kte-add-btn:hover .kte-add-label{color:#0073aa;}

/* Mini collapsible sections */
.kte-mini-sec{
  border-top:1px solid #ebeef2;
  padding-top:8px;
  margin-top:8px;
}
.kte-mini-hdr{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:6px 4px;
  font-size:11.5px;
  font-weight:600;
  color:#444;
  text-align:left;
}
.kte-mini-hdr:hover{color:#0073aa;}
.kte-mini-toggle{font-size:11px;color:#999;}
.kte-mini-body{
  padding:6px 4px 4px;
}

/* Quick text buttons (inside mini-body) */
.kte-qt-pane-text .kte-qt-btn{
  display:block;
  width:100%;
  padding:6px 8px;
  margin-bottom:3px;
  background:#fff;
  border:1px solid var(--kbor);
  border-radius:5px;
  cursor:pointer;
  font-size:11.5px;
  color:#333;
  text-align:left;
  transition:all 0.12s;
}
.kte-qt-pane-text .kte-qt-btn:hover{
  background:#0073aa;
  color:#fff;
  border-color:#0073aa;
  transform:translateX(2px);
}

/* Mini buttons (for advanced section) */
.kte-mini-btn{
  display:block;
  width:100%;
  padding:7px 9px;
  margin-bottom:4px;
  background:#fff;
  border:1px solid var(--kbor);
  border-radius:5px;
  cursor:pointer;
  font-size:11.5px;
  color:#333;
  text-align:left;
}
.kte-mini-btn:hover{background:#f0f4f8;}
.kte-mini-btn small{color:#999;font-size:10px;}

/* Large template thumbnails */
.kte-tpl-large-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.kte-tpl-large-grid .kte-tpl-large{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6px;
  background:#fff;
  border:1.5px solid #e0e4ea;
  border-radius:6px;
  cursor:pointer;
  transition:all 0.12s;
}
.kte-tpl-large-grid .kte-tpl-large:hover{
  border-color:#0073aa;
  background:#f5fafe;
  transform:translateY(-1px);
}
.kte-tpl-large img{
  max-width:100%;
  max-height:60px;
  object-fit:contain;
  margin-bottom:3px;
}
.kte-tpl-large .kte-tpl-noimg{
  width:100%;height:60px;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#bbb;
}
.kte-tpl-large span{
  font-size:10px;
  color:#555;
  font-weight:600;
  text-align:center;
  line-height:1.2;
}

/* Improved layers in steppped panel */
.kte-step-body-layers .kte-layer{
  margin-bottom:3px;
  border-radius:5px;
}

.kte-step-body-layers .kte-layers-wrap:empty::before{
  content:"Henüz katman yok. Yukarıdan içerik ekleyin.";
  display:block;
  padding:18px 6px;
  text-align:center;
  font-size:11px;
  color:#999;
  font-style:italic;
}

/* Help footer */
.kte-help-foot{
  margin-top:auto;
  padding:10px;
  border-top:1px solid var(--kbor);
  background:#fff;
}
.kte-help-link{
  width:100%;
  padding:8px;
  background:transparent;
  border:1px dashed #c4cdd8;
  border-radius:6px;
  cursor:pointer;
  font-size:11.5px;
  color:#0073aa;
  font-weight:600;
}
.kte-help-link:hover{
  background:#f0f7fc;
  border-style:solid;
}

/* Help modal */
#kte-help-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:1000000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.kte-help-card{
  background:#fff;
  border-radius:12px;
  max-width:520px;
  width:100%;
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.kte-help-hdr{
  padding:14px 18px;
  background:linear-gradient(135deg, #0073aa, #005d8a);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.kte-help-close{
  background:none;border:none;color:#fff;
  cursor:pointer;font-size:22px;line-height:1;padding:0 6px;opacity:0.8;
}
.kte-help-close:hover{opacity:1;}
.kte-help-body{
  padding:14px 18px;
  overflow-y:auto;
  font-size:12.5px;color:#333;line-height:1.5;
}
.kte-help-body h4{margin:10px 0 6px;color:#0073aa;font-size:13px;}
.kte-help-tbl{width:100%;border-collapse:collapse;font-size:12px;}
.kte-help-tbl td{padding:4px 6px;border-bottom:1px solid #eef1f5;}
.kte-help-tbl td:first-child{width:140px;}
.kte-help-tbl kbd{
  display:inline-block;
  background:#f0f4f8;
  border:1px solid #d4dae3;
  border-bottom-width:2px;
  border-radius:3px;
  padding:1px 5px;
  font-size:10.5px;
  font-family:monospace;
  color:#444;
  margin:0 1px;
}

/* Mobile: stack everything */
@media(max-width:680px){
  .kte-left{width:100%!important;min-width:0;max-height:38vh;}
  .kte-add-grid{grid-template-columns:1fr 1fr;}
  .kte-tpl-large-grid{grid-template-columns:1fr 1fr 1fr;}
}

/* ════════════════ v15: Vectorize loading + tune modals ════════════════ */
#kte-vec-loading{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000010;display:flex;align-items:center;justify-content:center;}
.kte-vec-loading-card{background:#fff;border-radius:12px;padding:24px 30px;display:flex;align-items:center;gap:20px;box-shadow:0 20px 60px rgba(0,0,0,0.4);max-width:420px;}
.kte-vec-spinner{width:46px;height:46px;border:4px solid #e0e4ea;border-top-color:#0073aa;border-radius:50%;animation:kte-spin 0.9s linear infinite;flex-shrink:0;}
@keyframes kte-spin{to{transform:rotate(360deg);}}
.kte-vec-loading-text strong{display:block;color:#0073aa;font-size:15px;margin-bottom:3px;}
.kte-vec-loading-text span{font-size:12px;color:#666;line-height:1.4;}

#kte-vec-tune{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000010;display:flex;align-items:center;justify-content:center;padding:20px;}
.kte-vec-tune-card{background:#fff;border-radius:12px;max-width:720px;width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 25px 70px rgba(0,0,0,0.45);overflow:hidden;}
.kte-vec-tune-hdr{padding:14px 18px;background:linear-gradient(135deg,#0073aa,#005d8a);color:#fff;display:flex;justify-content:space-between;align-items:center;}
.kte-vec-tune-close{background:none;border:none;color:#fff;cursor:pointer;font-size:22px;line-height:1;padding:0 6px;opacity:0.85;}
.kte-vec-tune-close:hover{opacity:1;}
.kte-vec-tune-body{padding:16px 18px;overflow-y:auto;flex:1;}
.kte-vec-preview-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
.kte-vec-preview-orig,.kte-vec-preview-result{border:1px solid #e0e4ea;border-radius:8px;padding:8px;background:#f8f9fa;text-align:center;}
.kte-vec-prev-label{font-size:11px;font-weight:700;color:#0073aa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.kte-vec-preview-orig img{max-width:100%;max-height:200px;object-fit:contain;display:block;margin:0 auto;}
.kte-vec-result-svg{max-height:200px;display:flex;align-items:center;justify-content:center;}
.kte-vec-result-svg svg{max-width:100%;max-height:200px;}
.kte-vec-controls{background:#f8f9fa;border-radius:8px;padding:12px;}
.kte-vec-row{display:grid;grid-template-columns:130px 1fr 60px;gap:10px;align-items:center;margin-bottom:10px;}
.kte-vec-row label{font-size:12px;font-weight:600;color:#444;}
.kte-vec-row input[type=range]{width:100%;}
.kte-vec-row select{padding:5px 8px;border:1px solid #c4cdd8;border-radius:5px;font-size:12px;background:#fff;}
.kte-vec-row span{font-size:12px;font-weight:600;color:#0073aa;text-align:right;}
.kte-vec-tip{font-size:11px;color:#666;line-height:1.4;background:#fff8ec;border:1px solid #f0c674;border-radius:6px;padding:8px 10px;margin:8px 0 0;}
.kte-vec-tune-foot{padding:12px 18px;border-top:1px solid #e0e4ea;display:flex;justify-content:flex-end;gap:8px;background:#f8f9fa;}
.kte-vec-tune-cancel,.kte-vec-tune-apply{padding:8px 16px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid;}
.kte-vec-tune-cancel{background:#fff;border-color:#c4cdd8;color:#444;}
.kte-vec-tune-cancel:hover{background:#f0f4f8;}
.kte-vec-tune-apply{background:#0073aa;border-color:#0073aa;color:#fff;}
.kte-vec-tune-apply:hover{background:#005d8a;}
@media(max-width:640px){
  .kte-vec-preview-wrap{grid-template-columns:1fr;}
  .kte-vec-row{grid-template-columns:1fr;gap:4px;}
}

/* ════════════════ v17: Logo Library modal ════════════════ */
.kte-loglib-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000010;display:flex;align-items:center;justify-content:center;padding:20px;}
.kte-loglib-card{background:#fff;border-radius:12px;max-width:760px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.45);}
.kte-loglib-hdr{padding:14px 18px;background:linear-gradient(135deg,#0073aa,#005d8a);color:#fff;display:flex;justify-content:space-between;align-items:center;}
.kte-loglib-close{background:none;border:none;color:#fff;cursor:pointer;font-size:22px;line-height:1;padding:0 6px;opacity:0.85;}
.kte-loglib-close:hover{opacity:1;}
.kte-loglib-body-wrap{padding:14px 18px;overflow-y:auto;flex:1;}
.kte-loglib-cat{font-size:11px;font-weight:700;color:#0073aa;text-transform:uppercase;letter-spacing:0.4px;margin:10px 0 6px;border-bottom:1px solid #e0e4ea;padding-bottom:3px;}
.kte-loglib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:10px;}
.kte-loglib-pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;background:#fff;border:1.5px solid #e0e4ea;border-radius:8px;cursor:pointer;transition:all 0.15s;}
.kte-loglib-pick:hover{border-color:#0073aa;background:#f5fafe;transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,115,170,0.12);}
.kte-loglib-pick img{max-width:64px;max-height:64px;object-fit:contain;}
.kte-loglib-pick span{font-size:10.5px;font-weight:600;color:#555;text-align:center;line-height:1.2;}
.kte-loglib-foot{padding:12px 18px;border-top:1px solid #e0e4ea;display:flex;justify-content:center;background:#f8f9fa;}
.kte-loglib-upload{padding:10px 20px;background:#fff;border:1.5px dashed #c4cdd8;border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:600;color:#444;}
.kte-loglib-upload:hover{background:#f0f7fc;border-color:#0073aa;color:#0073aa;border-style:solid;}

/* ════════════════ v22: Compact left panel buttons + critical mobile fixes ════════════════ */

/* Override v14 oversized buttons - make them compact */
.kte-add-btn{
  min-height: 58px !important;
  padding: 8px 6px 6px !important;
  gap: 2px !important;
}
.kte-add-icon{ font-size: 18px !important; line-height: 1 !important; }
.kte-add-label{ font-size: 11px !important; line-height: 1.1 !important; }
.kte-add-sub{
  font-size: 9px !important;
  line-height: 1.1 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Compact step headers (less vertical space) */
.kte-step-hdr{ padding: 7px 10px !important; font-size: 12px !important; }
.kte-step-body{ padding: 8px 10px 10px !important; }
.kte-step-desc{ font-size: 10.5px !important; margin: 0 0 6px !important; }
.kte-step{ margin: 4px 8px !important; }
.kte-welcome{ padding: 7px 10px !important; font-size: 11px !important; }
.kte-presets{ padding: 7px 10px !important; }

/* Mobile: full screen editor, 1-column add buttons (horizontal flow) */
@media (max-width: 680px){
  /* Make the editor modal take full screen */
  .kte-modal{
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  /* Mobile drawer states */
  .kte-modal .kte-left,
  .kte-modal .kte-right{
    position: fixed !important;
    top: 50px;
    bottom: 0;
    width: 88% !important;
    max-width: 320px !important;
    z-index: 100 !important;
    background: #fafbfc !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.25) !important;
    overflow-y: auto !important;
    transition: transform 0.25s ease !important;
  }
  .kte-modal .kte-left{ left: 0; transform: translateX(-100%); }
  .kte-modal .kte-right{ right: 0; transform: translateX(100%); }
  .kte-modal .kte-left.kte-is-open{ transform: translateX(0); }
  .kte-modal .kte-right.kte-is-open{ transform: translateX(0); }

  /* Drawer backdrop */
  .kte-modal .kte-drawer-bg{
    position: fixed !important;
    inset: 50px 0 0 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 99 !important;
    display: none !important;
  }
  .kte-modal .kte-drawer-bg.kte-is-open{ display: block !important; }

  /* Mobile menu buttons in canvas info bar */
  .kte-modal .kte-mob-btn{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid #d0d7e2;
    background: #fff;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    margin: 0 4px;
  }
  .kte-modal .kte-mob-btn:active{ background: #e3f2fd; }

  /* Body becomes single column */
  .kte-body{ flex-direction: column !important; }
  .kte-canvas-area{ flex: 1 1 auto !important; }

  /* Compact add buttons on mobile - row layout */
  .kte-add-btn{
    flex-direction: row !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
  }
  .kte-add-icon{ font-size: 20px !important; }
  .kte-add-label{ font-size: 12px !important; }
  .kte-add-sub{ display: none !important; }
  .kte-add-grid{ grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
}

/* Hide mobile drawer buttons on desktop */
@media (min-width: 681px){
  .kte-mob-btn{ display: none !important; }
  .kte-drawer-bg{ display: none !important; }
}


/* ════════════════ v23: Mobile right panel — bottom-docked (reference design) ════════════════ */

@media (max-width: 680px){
  /* OVERRIDE v22 right-side drawer — switch to bottom-sheet pattern */
  .kte-modal .kte-right{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 65vh !important;
    transform: translateY(100%) !important;
    border-top: 2px solid var(--kbor);
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18) !important;
    background: #fff !important;
    z-index: 101 !important;
    overflow-y: auto !important;
    padding: 8px 12px 12px !important;
    transition: transform 0.28s cubic-bezier(.21,.85,.41,.99) !important;
  }
  .kte-modal .kte-right.kte-is-open{ transform: translateY(0) !important; }

  /* Drag handle at top of bottom sheet */
  .kte-modal .kte-right::before{
    content: '';
    display: block;
    width: 40px; height: 4px;
    margin: 4px auto 8px;
    background: #c4cdd8;
    border-radius: 2px;
  }

  /* Backdrop for bottom-sheet panel */
  .kte-modal .kte-drawer-bg{
    position: fixed !important;
    inset: 0 !important;
    top: 50px !important;
    background: rgba(0,0,0,0.4) !important;
    z-index: 100 !important;
    display: none !important;
  }
  .kte-modal .kte-drawer-bg.kte-is-open{ display: block !important; }

  /* Auto-open right panel when an object is selected */
  .kte-modal.kte-has-selection .kte-right{
    transform: translateY(0) !important;
  }

  /* Compact properties on mobile */
  .kte-modal .kte-right .kte-pr{ margin-bottom: 6px !important; }
  .kte-modal .kte-right .kte-pr label{ font-size: 11.5px !important; }
  .kte-modal .kte-right input, .kte-modal .kte-right select{ min-height: 36px !important; }
}

/* Smaller QR slider for the new mm scale */
.kte-qr-slider-row{
  display: flex;
  align-items: center;
  gap: 6px;
}
.kte-qr-slider-row button{
  width: 30px; height: 30px;
  border: 1px solid #d0d7e2;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  color: #444;
}
.kte-qr-slider-row button:active{ background: #e3f2fd; }
.kte-qr-slider-row input{ flex: 1; }

/* Empty state for shape/template float panels */
.kte-sh-grid:empty::before,
.kte-tpl-grid:empty::before{
  content: 'Henüz şekil yüklenmedi. Admin panelden ekleyin.';
  display: block;
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 13px;
  grid-column: 1 / -1;
}
.kte-tpl-grid:empty::before{
  content: 'Henüz şablon yüklenmedi. Admin panelden ekleyin.';
}

/* ════════════════ v25: saaSEDITOR-Style UI Overhaul (Dark Header + Purple CTA) ════════════════ */

/* Dark gradient header */
.kte-modal .kte-hdr{
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: #fff !important;
  border-bottom: none !important;
  padding: 10px 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.kte-modal .kte-hdr h2,
.kte-modal .kte-hdr .kte-hdr-title{
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
}
.kte-modal .kte-hdr .kte-size-badge{
  display: inline-block;
  background: rgba(255,255,255,0.12);
  color: #cbd5e1;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 12px;
  letter-spacing: 0.4px;
}
.kte-modal .kte-hdr .kte-close,
.kte-modal .kte-hdr button{
  color: #e2e8f0 !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  transition: all 0.15s;
}
.kte-modal .kte-hdr button:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* Purple primary CTA button — "Tasarımı Tamamla" / "Onayla ve Kaydet" */
.kte-modal #kte-btn-save,
.kte-modal .kte-btn-primary{
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.3px;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
  transition: all 0.18s !important;
}
.kte-modal #kte-btn-save:hover,
.kte-modal .kte-btn-primary:hover{
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45) !important;
  transform: translateY(-1px);
}
.kte-modal #kte-btn-save:active{
  transform: translateY(0);
}

/* Vertical left rail (subtle modernization of accordion sidebar) */
.kte-modal .kte-left{
  background: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
}
.kte-modal .kte-step{
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.kte-modal .kte-step-hdr{
  background: #fff !important;
  color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.kte-modal .kte-step.is-open .kte-step-hdr{
  background: linear-gradient(90deg, #eef2ff, #fff) !important;
  color: #4f46e5 !important;
  font-weight: 700 !important;
}
.kte-modal .kte-add-btn{
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}
.kte-modal .kte-add-btn:hover{
  border-color: #6366f1 !important;
  background: #eef2ff !important;
  color: #4f46e5 !important;
}

/* Canvas area lighter background */
.kte-modal .kte-canvas-area{
  background: #f1f5f9 !important;
}

/* Floating top toolbar above canvas */
.kte-modal .kte-canvas-toolbar{
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  background: #1e293b;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  gap: 4px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.kte-modal .kte-canvas-toolbar button{
  background: transparent;
  border: none;
  color: #cbd5e1;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}
.kte-modal .kte-canvas-toolbar button:hover{
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.kte-modal .kte-canvas-toolbar button.is-active{
  background: #6366f1;
  color: #fff;
}

/* Bottom zoom indicator */
.kte-modal .kte-zoom-indicator{
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(30, 41, 59, 0.92);
  color: #fff;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  z-index: 10;
  letter-spacing: 0.3px;
  pointer-events: none;
}

/* Right panel: cleaner cards */
.kte-modal .kte-right{
  background: #fff !important;
  border-left: 1px solid #e2e8f0 !important;
}
.kte-modal .kte-pr{
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}
.kte-modal .kte-pr label{
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  margin-bottom: 4px !important;
}
.kte-modal .kte-pr input[type="text"],
.kte-modal .kte-pr input[type="number"],
.kte-modal .kte-pr select{
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}
.kte-modal .kte-pr input:focus,
.kte-modal .kte-pr select:focus{
  border-color: #6366f1 !important;
  outline: 2px solid rgba(99,102,241,0.2) !important;
}

/* Mobile bottom tabbar (replaces drawer toggles for primary nav) */
@media (max-width: 680px){
  .kte-modal .kte-mob-tabbar{
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #1e293b;
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.18);
    height: 56px;
  }
  .kte-modal .kte-mob-tabbar button{
    flex: 1;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 10px;
    padding: 4px 2px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: color 0.15s;
  }
  .kte-modal .kte-mob-tabbar button .kte-tab-ico{ font-size: 18px; }
  .kte-modal .kte-mob-tabbar button.is-active{ color: #6366f1; }

  .kte-modal .kte-canvas-area{ padding-bottom: 60px !important; }
  .kte-modal .kte-right{ bottom: 56px !important; }
}
@media (min-width: 681px){
  .kte-modal .kte-mob-tabbar{ display: none !important; }
}


/* ════════════════ v28: Reference-style mobile UI with vertical icon strips ════════════════ */

@media (max-width: 680px){
  /* CRITICAL: layout becomes a fixed 3-column grid */
  .kte-modal .kte-body{
    display: flex !important;
    flex-direction: row !important;
    height: calc(100vh - 60px) !important;
    overflow: hidden;
  }

  /* Left vertical icon strip — always visible, narrow */
  .kte-modal .kte-left{
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 64px !important;
    max-width: 64px !important;
    min-width: 64px !important;
    transform: none !important;
    box-shadow: 1px 0 4px rgba(0,0,0,0.05) !important;
    background: #fff !important;
    border-right: 1px solid #e2e8f0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 4px !important;
    z-index: 5 !important;
  }

  /* Hide accordion steps; show only icon-based add buttons */
  .kte-modal .kte-left .kte-step,
  .kte-modal .kte-left .kte-welcome,
  .kte-modal .kte-left .kte-presets,
  .kte-modal .kte-left .kte-step-hdr,
  .kte-modal .kte-left .kte-step-desc,
  .kte-modal .kte-left .kte-add-sub,
  .kte-modal .kte-left .kte-add-label,
  .kte-modal .kte-left .kte-mini-sec,
  .kte-modal .kte-left .kte-step-body > *:not(.kte-add-grid){
    display: none !important;
  }
  .kte-modal .kte-left .kte-step[data-step="add"]{
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .kte-modal .kte-left .kte-step[data-step="add"] .kte-step-body{
    padding: 0 !important;
    display: block !important;
  }
  .kte-modal .kte-left .kte-add-grid{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .kte-modal .kte-left .kte-add-btn{
    flex-direction: column !important;
    min-height: 52px !important;
    width: 100% !important;
    padding: 6px 2px !important;
    border-radius: 10px !important;
    text-align: center !important;
    gap: 0 !important;
    position: relative;
  }
  .kte-modal .kte-left .kte-add-btn .kte-add-icon{
    font-size: 22px !important;
    margin: 0 !important;
  }
  .kte-modal .kte-left .kte-add-btn::after{
    content: '+';
    position: absolute;
    top: 6px; right: 8px;
    width: 14px; height: 14px;
    background: #4f46e5;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    font-weight: 700;
  }

  /* Canvas area takes remaining space */
  .kte-modal .kte-canvas-area{
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  /* Right panel: narrow always-visible icon strip when no selection,
     bottom-sheet when object selected (existing behavior) */
  .kte-modal .kte-right{
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: translateY(100%) !important;
    z-index: 100 !important;
  }
  .kte-modal.kte-has-selection .kte-right{
    transform: translateY(0) !important;
  }

  /* Always-visible right action icon strip (separate from bottom-sheet panel) */
  .kte-modal .kte-right-strip{
    position: fixed !important;
    right: 0 !important;
    top: 60px !important;
    bottom: 60px !important;
    width: 50px !important;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -1px 0 4px rgba(0,0,0,0.05);
    z-index: 10;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 8px;
  }
  .kte-modal .kte-right-strip button{
    width: 40px;
    height: 40px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    color: #475569;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .kte-modal .kte-right-strip button:hover,
  .kte-modal .kte-right-strip button.is-active{
    background: #eef2ff;
    border-color: #6366f1;
    color: #4f46e5;
  }

  /* Header buttons compact */
  .kte-modal .kte-hdr{
    padding: 8px 10px !important;
    flex-wrap: nowrap !important;
  }
  .kte-modal .kte-hdr-title{
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kte-modal .kte-size-badge{
    font-size: 9px !important;
    padding: 2px 6px !important;
    margin-left: 4px !important;
  }
  .kte-modal .kte-hdr-btns button{
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  .kte-modal .kte-hdr-btns .kte-hbtn-danger{
    display: none !important;  /* hide clear button on mobile */
  }

  /* Hide bottom tabbar (v25) — replaced by left strip */
  .kte-modal .kte-mob-tabbar{ display: none !important; }
  .kte-modal .kte-mob-btn{ display: none !important; }

  /* Canvas info bar centered, simplified */
  .kte-modal .kte-canvas-info{
    text-align: center;
    padding: 6px !important;
    font-size: 11px !important;
  }

  /* Bottom-sheet right panel adjustments */
  .kte-modal .kte-right{
    max-height: 70vh !important;
    padding: 12px !important;
  }

  /* Drag-handle on top of right panel */
  .kte-modal .kte-right::before{
    content: '';
    display: block;
    width: 40px; height: 4px;
    margin: 0 auto 10px;
    background: #cbd5e1;
    border-radius: 2px;
  }
}


/* ════════════════ v30: Mobile-First Editor Rebuild — Bottom Anchored ════════════════ */

@media (max-width: 680px){
  /* RESET: clear conflicting rules from v22-v28 */
  .kte-modal .kte-body{
    display: flex !important;
    flex-direction: column !important;  /* COLUMN not ROW */
    height: calc(100vh - 50px) !important;
    overflow: hidden !important;
  }

  /* Canvas takes most of viewport */
  .kte-modal .kte-canvas-area{
    flex: 1 1 auto !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    padding-bottom: 56px !important;  /* room for bottom tool strip */
  }

  /* Hide ALL sidebars by default - they become drawers */
  .kte-modal .kte-left,
  .kte-modal .kte-right{
    position: fixed !important;
    top: 50px !important;
    bottom: 56px !important;
    width: 88% !important;
    max-width: 320px !important;
    z-index: 200 !important;
    background: #fff !important;
    box-shadow: 0 0 24px rgba(0,0,0,0.18) !important;
    overflow-y: auto !important;
    transition: transform 0.25s ease !important;
    padding: 12px !important;
  }
  .kte-modal .kte-left{
    left: 0 !important;
    transform: translateX(-105%) !important;
  }
  .kte-modal .kte-right{
    right: 0 !important;
    left: auto !important;
    transform: translateX(105%) !important;
    width: 88% !important;
    max-width: 340px !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
  .kte-modal .kte-left.kte-is-open{ transform: translateX(0) !important; }
  .kte-modal .kte-right.kte-is-open{ transform: translateX(0) !important; }

  /* Right panel no drag-handle on mobile (it's a side drawer now) */
  .kte-modal .kte-right::before{ display: none !important; }

  /* Drawer backdrop */
  .kte-modal .kte-drawer-bg{
    position: fixed !important;
    inset: 50px 0 56px 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 150 !important;
    display: none !important;
  }
  .kte-modal .kte-drawer-bg.kte-is-open{ display: block !important; }

  /* HIDE old right-strip (v28) — no longer needed */
  .kte-modal .kte-right-strip{ display: none !important; }

  /* Bottom TOOL STRIP — the main mobile navigation */
  .kte-modal .kte-mob-toolstrip{
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: #1e293b !important;
    z-index: 100 !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.18) !important;
    align-items: stretch;
    padding: 4px;
    gap: 2px;
  }
  .kte-modal .kte-mob-toolstrip button{
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: #cbd5e1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    transition: all 0.15s !important;
  }
  .kte-modal .kte-mob-toolstrip button .kte-tab-ico{
    font-size: 18px !important;
    line-height: 1 !important;
    display: block !important;
  }
  .kte-modal .kte-mob-toolstrip button.is-active{
    background: rgba(99, 102, 241, 0.18) !important;
    color: #a5b4fc !important;
  }
  .kte-modal .kte-mob-toolstrip button:active{
    background: rgba(99, 102, 241, 0.30) !important;
  }
  .kte-modal .kte-mob-toolstrip .kte-tab-save{
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
  }
  .kte-modal .kte-mob-toolstrip .kte-tab-save:active{
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
  }

  /* Hide ALL old mobile UI bits */
  .kte-modal .kte-mob-tabbar{ display: none !important; }
  .kte-modal .kte-mob-btn{ display: none !important; }

  /* Header very compact */
  .kte-modal .kte-hdr{
    padding: 6px 8px !important;
    min-height: 50px !important;
  }
  .kte-modal .kte-hdr-title{
    font-size: 12px !important;
    flex: 1 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .kte-modal .kte-size-badge{
    font-size: 9px !important;
    padding: 2px 5px !important;
    margin-left: 4px !important;
  }
  .kte-modal .kte-hdr-btns{ flex-shrink: 0 !important; gap: 4px !important; }
  .kte-modal .kte-hdr-btns button{
    padding: 4px 7px !important;
    font-size: 11px !important;
    min-width: 30px !important;
  }
  .kte-modal .kte-hdr-btns .kte-hbtn-danger{ display: none !important; }

  /* Left drawer content: accordion-style but compact */
  .kte-modal .kte-left .kte-add-btn{
    flex-direction: row !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .kte-modal .kte-left .kte-add-btn .kte-add-icon{ font-size: 24px !important; }
  .kte-modal .kte-left .kte-add-btn .kte-add-label{ font-size: 13px !important; }
  .kte-modal .kte-left .kte-add-btn .kte-add-sub{
    font-size: 10px !important;
    line-height: 1.2 !important;
    display: block !important;
  }
  .kte-modal .kte-left .kte-add-grid{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Drawer close button — clear visual exit */
  .kte-modal .kte-drawer-close{
    display: block !important;
    width: 100%;
    background: #f1f5f9 !important;
    border: none !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    cursor: pointer !important;
  }
  .kte-modal .kte-drawer-close:active{ background: #e2e8f0 !important; }

  /* Larger touch targets globally on mobile */
  .kte-modal button{ min-height: 40px !important; }
  .kte-modal input[type="text"], .kte-modal input[type="number"], .kte-modal select{
    min-height: 40px !important;
    font-size: 14px !important;  /* iOS won't zoom in */
  }

  /* Float panels — larger and friendlier on mobile */
  .kte-float-panel{
    width: 95% !important;
    max-width: 95% !important;
    max-height: 80vh !important;
  }
  .kte-sh-grid, .kte-tpl-grid{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
  }
}
@media (min-width: 681px){
  .kte-modal .kte-mob-toolstrip{ display: none !important; }
}

/* ════════════════ v31: Mobile UX RE-REBUILD — All controls accessible ════════════════ */

@media (max-width: 680px){
  /* Right panel becomes FULL-HEIGHT slide-in from right with all controls */
  .kte-modal .kte-right{
    position: fixed !important;
    top: 50px !important;
    bottom: 0 !important;  /* go all the way down */
    right: 0 !important;
    left: auto !important;
    width: 92% !important;
    max-width: 380px !important;
    max-height: none !important;
    transform: translateX(105%) !important;
    background: #fff !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.22) !important;
    z-index: 200 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: transform 0.28s cubic-bezier(.21,.85,.41,.99) !important;
  }
  .kte-modal .kte-right.kte-is-open{
    transform: translateX(0) !important;
  }
  .kte-modal .kte-right::before{ display: none !important; }

  /* Properties: scrollable inner with sticky header */
  .kte-modal .kte-right .kte-drawer-close{
    position: sticky;
    top: 0;
    background: #1e293b !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 14px !important;
    margin: 0 !important;
    z-index: 10;
    font-size: 14px !important;
    width: 100% !important;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  .kte-modal .kte-right .kte-drawer-close:active{ background: #0f172a !important; }

  /* All property cards full-width with breathing space */
  .kte-modal .kte-right .kte-pr,
  .kte-modal .kte-right .kte-ps{
    padding: 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }
  .kte-modal .kte-right .kte-pr label,
  .kte-modal .kte-right .kte-ps label{
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
    display: block !important;
  }

  /* Inputs: 44px tall, font-size 16px (no iOS zoom) */
  .kte-modal .kte-right input[type="text"],
  .kte-modal .kte-right input[type="number"],
  .kte-modal .kte-right select,
  .kte-modal .kte-right textarea{
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Sliders: 32px tall thumbs */
  .kte-modal .kte-right input[type="range"]{
    height: 32px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
  }
  .kte-modal .kte-right input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none !important;
    width: 28px !important; height: 28px !important;
    background: #6366f1 !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.35) !important;
    cursor: pointer !important;
  }
  .kte-modal .kte-right input[type="range"]::-webkit-slider-runnable-track{
    height: 6px !important;
    background: linear-gradient(to right, #6366f1 var(--val,50%), #e2e8f0 0) !important;
    border-radius: 3px !important;
  }

  /* Color swatches: bigger circles */
  .kte-modal .kte-right .kte-cv2{
    padding: 10px !important;
  }
  .kte-modal .kte-right .kte-cv2-dot{
    width: 40px !important; height: 40px !important;
  }

  /* Buttons in properties: bigger */
  .kte-modal .kte-right button{
    min-height: 44px !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
  }

  /* Align buttons (Sol/Orta/Sağ): touch-friendly row */
  .kte-modal .kte-right .kte-align-btn{
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Quick action bar - ALWAYS visible at bottom when object selected */
  .kte-modal .kte-quick-actions{
    display: none !important;
    position: fixed !important;
    bottom: 56px !important;  /* above toolstrip */
    left: 0 !important;
    right: 0 !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    z-index: 90 !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
  }
  .kte-modal.kte-has-selection .kte-quick-actions{
    display: flex !important;
  }
  .kte-modal .kte-quick-actions button{
    flex: 1 !important;
    min-height: 44px !important;
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .kte-modal .kte-quick-actions button:active{ background: #e2e8f0 !important; }
  .kte-modal .kte-quick-actions .qa-primary{
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
    border: none !important;
  }
  .kte-modal.kte-has-selection .kte-canvas-area{
    padding-bottom: 116px !important;  /* room for quick actions + toolstrip */
  }

  /* Mobile toolstrip — slightly bigger */
  .kte-modal .kte-mob-toolstrip{
    height: 60px !important;
  }
  .kte-modal .kte-mob-toolstrip button{
    min-height: 52px !important;
    font-size: 10.5px !important;
  }
  .kte-modal .kte-mob-toolstrip button .kte-tab-ico{
    font-size: 22px !important;
  }
}

/* ░░░░░░░░░░ KATMAN 2/5: v19 ░░░░░░░░░░ */
/* ════════════════════════════════════════════════════════════════
 * KTE Editor v19.0 — Modern UI Overlay
 * Bu dosya editor.css üzerine bindirilir; mevcut sınıf adlarını
 * koruyarak görsel olarak modernleştirir. JS hiç değiştirilmedi.
 * ════════════════════════════════════════════════════════════════ */

:root {
  --kte-accent: #4F46E5;
  --kte-accent-soft: rgba(79, 70, 229, 0.10);
  --kte-accent-border: rgba(79, 70, 229, 0.30);
  --kte-bg: #F6F5F1;
  --kte-surface: #FFFFFF;
  --kte-surface-2: #FAF9F5;
  --kte-surface-3: #F0EEE8;
  --kte-border: #E8E5DD;
  --kte-border-strong: #D5D0C3;
  --kte-text: #16181D;
  --kte-text-dim: #535766;
  --kte-text-mute: #8F8B7F;
  --kte-success: #059669;
  --kte-warn: #D97706;
  --kte-danger: #DC2626;
  --kte-radius: 10px;
  --kte-radius-sm: 8px;
  --kte-shadow: 0 1px 2px rgba(16,18,29,0.05), 0 8px 28px rgba(16,18,29,0.06);
}

/* ── Modal shell ──────────────────────────────────────────────── */
#kte-overlay {
  background: rgba(16, 18, 29, 0.55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0 !important;
}

.kte-modal {
  background: var(--kte-bg) !important;
  border-radius: 14px !important;
  max-width: 1400px !important;
  max-height: 98vh !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  color: var(--kte-text);
}

/* ── Header ──────────────────────────────────────────────────── */
.kte-hdr {
  height: auto !important;
  min-height: 56px;
  padding: 12px 18px !important;
  background: var(--kte-surface) !important;
  border-bottom: 1px solid var(--kte-border);
  color: var(--kte-text);
}

.kte-hdr-title {
  color: var(--kte-text) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kte-hbtn {
  background: var(--kte-surface) !important;
  border: 1px solid var(--kte-border) !important;
  color: var(--kte-text) !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  transition: all 0.12s !important;
}

.kte-hbtn:hover {
  background: var(--kte-surface-2) !important;
  border-color: var(--kte-accent) !important;
  color: var(--kte-accent) !important;
}

.kte-hbtn-danger {
  color: var(--kte-danger) !important;
  border-color: rgba(220, 38, 38, 0.20) !important;
  background: rgba(220, 38, 38, 0.04) !important;
}

.kte-hbtn-danger:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: var(--kte-danger) !important;
}

.kte-hbtn-close {
  color: var(--kte-text-dim) !important;
  font-size: 18px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

.kte-hbtn-close:hover {
  background: var(--kte-surface-2) !important;
  color: var(--kte-text) !important;
}

/* ── Color bar ───────────────────────────────────────────────── */
#kte-color-bar {
  background: var(--kte-surface-2) !important;
  border-top: 1px solid var(--kte-border) !important;
  padding: 10px 18px !important;
  min-height: 48px !important;
  gap: 10px !important;
}

.kte-cbar-title {
  color: var(--kte-text-mute) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
}

.kte-cbar-dot {
  border-color: var(--kte-surface) !important;
  box-shadow: 0 0 0 1px var(--kte-border) !important;
}

.kte-cbar-lbl {
  color: var(--kte-text) !important;
  font-weight: 600 !important;
}

/* Color bar circles (new picker) */
.kte-cv2 {
  background: transparent !important;
  border: 1px solid var(--kte-border) !important;
}

.kte-cv2:hover { background: var(--kte-surface-2) !important; }

.kte-cv2.is-active {
  background: var(--kte-accent-soft) !important;
  border-color: var(--kte-accent) !important;
}

.kte-cv2-dot {
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 0 1px var(--kte-border-strong) !important;
}

.kte-cv2.is-active .kte-cv2-dot {
  box-shadow: 0 0 0 2px var(--kte-surface), 0 0 0 4px var(--kte-accent) !important;
}

/* ── Body / Panels ───────────────────────────────────────────── */
.kte-body { background: var(--kte-bg) !important; }

.kte-left,
.kte-right {
  background: var(--kte-surface) !important;
  border-color: var(--kte-border) !important;
}

.kte-left { width: 280px !important; }
.kte-right { width: 300px !important; }

.kte-ptitle,
.kte-ptitle2 {
  background: transparent !important;
  color: var(--kte-text-mute) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  padding: 14px 16px 8px !important;
}

/* Step accordion */
.kte-step {
  border-bottom: 1px solid var(--kte-border);
}

.kte-step-hdr {
  background: transparent !important;
  border: none !important;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px !important;
  cursor: pointer;
  color: var(--kte-text) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.kte-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kte-surface-3);
  color: var(--kte-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.kte-step.is-open .kte-step-num {
  background: var(--kte-accent);
  color: #fff;
}

.kte-step-title { flex: 1; text-align: left; }

.kte-step-hint {
  font-size: 11px;
  color: var(--kte-text-mute);
  font-weight: 500;
}

.kte-step-toggle {
  color: var(--kte-text-mute);
  transition: transform 0.15s;
  font-size: 14px;
}

.kte-step.is-open .kte-step-toggle { transform: rotate(180deg); }

.kte-step-body {
  padding: 0 16px 16px;
  display: none;
}

.kte-step.is-open .kte-step-body { display: block; }

.kte-step-desc {
  font-size: 12px;
  color: var(--kte-text-mute);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* Welcome banner */
.kte-welcome {
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: var(--kte-accent-soft);
  border: 1px solid var(--kte-accent-border);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.kte-welcome-emoji { font-size: 18px; flex-shrink: 0; }
.kte-welcome-body strong {
  display: block;
  font-size: 13px;
  color: var(--kte-text);
  margin-bottom: 2px;
}

.kte-welcome-body span {
  font-size: 12px;
  color: var(--kte-text-dim);
  line-height: 1.5;
}

.kte-welcome-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kte-text-mute);
  font-size: 16px;
  padding: 0;
  margin-left: auto;
}

/* Add-content buttons */
.kte-add-btn {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px !important;
  background: var(--kte-surface) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: var(--kte-radius-sm) !important;
  cursor: pointer;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  transition: all 0.12s;
}

.kte-add-btn:hover {
  background: var(--kte-accent-soft) !important;
  border-color: var(--kte-accent) !important;
}

.kte-add-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--kte-accent-soft);
  color: var(--kte-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.kte-add-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--kte-text);
  display: block;
}

.kte-add-sub {
  font-size: 11px;
  color: var(--kte-text-mute);
  display: block;
  margin-top: 1px;
}

/* Tool grid (compact mode) */
.kte-tool {
  background: var(--kte-surface) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: 8px !important;
  padding: 10px 6px !important;
  transition: all 0.12s !important;
  color: var(--kte-text) !important;
}

.kte-tool:hover {
  background: var(--kte-accent-soft) !important;
  border-color: var(--kte-accent) !important;
  color: var(--kte-accent) !important;
}

.kte-tool:hover small { color: var(--kte-accent) !important; opacity: 0.8; }

/* Quick text chips */
.kte-qt-btn,
.kte-mini-btn {
  background: var(--kte-surface-2) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: 99px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  color: var(--kte-text) !important;
  font-weight: 500 !important;
  transition: all 0.12s !important;
}

.kte-qt-btn:hover,
.kte-mini-btn:hover {
  background: var(--kte-accent-soft) !important;
  border-color: var(--kte-accent) !important;
  color: var(--kte-accent) !important;
}

/* Layers list */
.kte-layer {
  padding: 9px 10px !important;
  border-radius: 6px !important;
  margin-bottom: 2px !important;
}

.kte-layer:hover { background: var(--kte-surface-2) !important; }

.kte-lay-sel {
  background: var(--kte-accent-soft) !important;
  border: 1px solid var(--kte-accent-border) !important;
}

.kte-lay-name {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kte-text) !important;
}

.kte-lay-btns {
  opacity: 0.5 !important;
  transition: opacity 0.15s !important;
}

.kte-layer:hover .kte-lay-btns { opacity: 1 !important; }

.kte-lay-btns button {
  padding: 4px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  color: var(--kte-text-mute) !important;
}

.kte-lay-btns button:hover {
  background: var(--kte-surface-3) !important;
  color: var(--kte-text) !important;
}

/* ── Canvas area ─────────────────────────────────────────────── */
.kte-canvas-area {
  background: #EDEAE2 !important;
}

.kte-canvas-info {
  background: var(--kte-surface) !important;
  border-bottom: 1px solid var(--kte-border) !important;
  padding: 8px 16px !important;
  font-size: 11px !important;
  color: var(--kte-text-dim) !important;
}

.kte-canvas-ctrls {
  background: var(--kte-surface) !important;
  border-top: 1px solid var(--kte-border) !important;
  padding: 10px 16px !important;
}

.kte-canvas-ctrls button {
  border: 1px solid var(--kte-border) !important;
  background: var(--kte-surface) !important;
  color: var(--kte-text) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
}

.kte-canvas-ctrls button:hover {
  background: var(--kte-accent-soft) !important;
  border-color: var(--kte-accent) !important;
  color: var(--kte-accent) !important;
}

#kte-canvas {
  box-shadow: 0 8px 32px rgba(16, 18, 29, 0.15) !important;
  border-radius: 2px;
}

/* ── Properties panel inputs ─────────────────────────────────── */
.kte-if,
.kte-is {
  border-color: var(--kte-border) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  background: var(--kte-surface) !important;
  color: var(--kte-text) !important;
  font-family: inherit !important;
}

.kte-if:focus,
.kte-is:focus {
  border-color: var(--kte-accent) !important;
  box-shadow: 0 0 0 3px var(--kte-accent-soft) !important;
  outline: none !important;
}

.kte-ic {
  border-color: var(--kte-border) !important;
  border-radius: 8px !important;
  height: 36px !important;
}

.kte-pr label,
.kte-r4 label,
.kte-r3 label,
.kte-r2 label {
  font-size: 11px !important;
  color: var(--kte-text-dim) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  margin-bottom: 6px !important;
}

.kte-range { accent-color: var(--kte-accent) !important; }

/* Align buttons */
.kte-align-btn {
  border-color: var(--kte-border) !important;
  background: var(--kte-surface) !important;
  border-radius: 6px !important;
  padding: 7px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  color: var(--kte-text) !important;
}

.kte-align-btn:hover {
  background: var(--kte-accent-soft) !important;
  border-color: var(--kte-accent) !important;
  color: var(--kte-accent) !important;
}

.kte-align-btn.active {
  background: var(--kte-accent) !important;
  border-color: var(--kte-accent) !important;
  color: #fff !important;
}

/* Action row buttons */
.kte-ab {
  border-color: var(--kte-border) !important;
  background: var(--kte-surface) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  color: var(--kte-text) !important;
}

.kte-ab:hover {
  background: var(--kte-accent-soft) !important;
  border-color: var(--kte-accent) !important;
  color: var(--kte-accent) !important;
}

.kte-ab-d:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: var(--kte-danger) !important;
  color: var(--kte-danger) !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.kte-footer {
  background: var(--kte-surface) !important;
  border-top: 1px solid var(--kte-border) !important;
  height: auto !important;
  padding: 12px 18px !important;
}

.kte-fbtn {
  border-color: var(--kte-border) !important;
  border-radius: 8px !important;
  background: var(--kte-surface) !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: var(--kte-text) !important;
  transition: all 0.12s !important;
}

.kte-fbtn:hover {
  background: var(--kte-surface-2) !important;
  border-color: var(--kte-accent) !important;
}

.kte-fbtn-p {
  background: var(--kte-accent) !important;
  border-color: var(--kte-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25) !important;
}

.kte-fbtn-p:hover {
  background: #4338CA !important;
  border-color: #4338CA !important;
}

/* ── Product page ────────────────────────────────────────────── */
.kte-pb {
  background: var(--kte-surface) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--kte-shadow) !important;
  padding: 18px !important;
}

.kte-pb-title {
  color: var(--kte-text) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.kte-pb-info { color: var(--kte-text-dim) !important; }

.kte-pb-tabs {
  background: var(--kte-surface-2) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: 8px !important;
  padding: 3px !important;
}

.kte-pb-tab {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--kte-text-dim) !important;
}

.kte-pb-tab.active {
  background: var(--kte-accent) !important;
  color: #fff !important;
}

.kte-pb-btn-primary {
  background: var(--kte-accent) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25) !important;
  transition: all 0.12s !important;
}

.kte-pb-btn-primary:hover {
  background: #4338CA !important;
  transform: translateY(-1px);
}

/* Ink picker on product page (modern circular) */
.kte-ink-lbl {
  border-radius: 99px !important;
  border-width: 2px !important;
  border-color: var(--kte-border) !important;
  padding: 7px 14px !important;
  font-weight: 600 !important;
  transition: all 0.12s !important;
}

.kte-ink-lbl:hover {
  border-color: var(--kte-accent) !important;
}

.kte-ink-lbl--active {
  border-color: currentColor !important;
}

/* Upload zone */
.kte-up-zone {
  border: 2px dashed var(--kte-border-strong) !important;
  border-radius: 12px !important;
  background: var(--kte-surface-2) !important;
  padding: 28px !important;
  transition: all 0.15s !important;
}

.kte-up-zone:hover,
.kte-up-zone.drag-over {
  border-color: var(--kte-accent) !important;
  background: var(--kte-accent-soft) !important;
}

.kte-up-item {
  background: var(--kte-surface) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* Brief form */
.kte-pb-input,
.kte-pb-textarea {
  border: 1px solid var(--kte-border) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  background: var(--kte-surface) !important;
  color: var(--kte-text) !important;
}

.kte-pb-input:focus,
.kte-pb-textarea:focus {
  border-color: var(--kte-accent) !important;
  box-shadow: 0 0 0 3px var(--kte-accent-soft) !important;
  outline: none !important;
}

/* Notices */
.kte-pb-warn,
.kte-pb-ok {
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.kte-pb-warn {
  background: rgba(217, 119, 6, 0.08) !important;
  border-color: rgba(217, 119, 6, 0.30) !important;
  color: var(--kte-warn) !important;
}

.kte-pb-ok {
  background: rgba(5, 150, 105, 0.08) !important;
  border-color: rgba(5, 150, 105, 0.30) !important;
  color: var(--kte-success) !important;
}

/* Quantity row */
.kte-qty-row input[type=number] {
  border: 1px solid var(--kte-border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Login prompt */
.kte-login-prompt {
  background: linear-gradient(135deg, var(--kte-accent-soft), var(--kte-surface-2)) !important;
  border: 1px solid var(--kte-accent-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
}

/* ── Float panels ────────────────────────────────────────────── */
.kte-float-panel {
  background: var(--kte-surface) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
  /* v20.3: keep centered fixed positioning from base CSS */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1000020 !important;
}

.kte-fp-hdr {
  background: var(--kte-surface-2) !important;
  border-bottom: 1px solid var(--kte-border) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--kte-text) !important;
  padding: 10px 14px !important;
}

.kte-sh-thumb,
.kte-tpl-thumb {
  border: 1px solid var(--kte-border) !important;
  border-radius: 8px !important;
  padding: 6px !important;
  transition: all 0.12s !important;
}

.kte-sh-thumb:hover,
.kte-tpl-thumb:hover {
  border-color: var(--kte-accent) !important;
  background: var(--kte-accent-soft) !important;
}

/* ── Rulers ──────────────────────────────────────────────────── */
.kte-canvas-rulers canvas {
  background: var(--kte-surface-2);
}

.kte-ruler-corner {
  background: var(--kte-surface-2) !important;
  border-color: var(--kte-border) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
.kte-modal ::-webkit-scrollbar { width: 8px; height: 8px; }
.kte-modal ::-webkit-scrollbar-thumb {
  background: var(--kte-border-strong);
  border-radius: 4px;
}
.kte-modal ::-webkit-scrollbar-track { background: transparent; }

/* ── v19.10 — Raster thumbnail tinting ──────────────────────── */
.kte-modal .kte-loglib-pick img,
.kte-modal .kte-tpl-thumb img,
.kte-modal #kte-tpl-thumbs-large img {
  filter: brightness(0) saturate(100%);
  opacity: 0.85;
  transition: filter .15s, opacity .15s;
}
.kte-modal .kte-loglib-pick:hover img,
.kte-modal .kte-tpl-thumb:hover img {
  opacity: 1;
}

/* ── v19.6 — Top quick-access bar ─────────────────────────────── */
.kte-quick-top {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  background: var(--kte-surface);
  border-bottom: 1px solid var(--kte-border);
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}

.kte-qt-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  background: var(--kte-surface);
  color: var(--kte-text);
  border: 1px solid var(--kte-border);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .12s;
}

.kte-qt-tab:hover {
  border-color: var(--kte-accent);
  background: var(--kte-accent-soft);
  color: var(--kte-accent);
}

.kte-qt-tab.is-active {
  background: var(--kte-accent);
  border-color: var(--kte-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

@media (max-width: 640px) {
  .kte-qt-tab { padding: 9px 12px; font-size: 12px; }
  .kte-qt-tab span { display: none; }   /* show only emoji on phones */
}
.kte-modal,
.kte-modal *,
.kte-pb,
.kte-pb * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.kte-modal input,
.kte-modal textarea,
.kte-pb input,
.kte-pb textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

#kte-canvas {
  -webkit-touch-callout: none;
  pointer-events: auto;
}

/* ── Contrast safety net (v19.1) ─────────────────────────────── */
/* The original editor.css uses dark gradient header w/ white text.
 * Our v19 overlay flipped header to light surface — force ALL text
 * inside the editor to use the new readable token colors. */
.kte-modal,
.kte-modal p,
.kte-modal label,
.kte-modal span,
.kte-modal div,
.kte-modal td,
.kte-modal th {
  color: var(--kte-text);
}

.kte-modal small,
.kte-modal .kte-step-desc,
.kte-modal .kte-step-hint,
.kte-modal .kte-add-sub,
.kte-modal .kte-canvas-info,
.kte-modal .kte-no-layer {
  color: var(--kte-text-mute) !important;
}

/* Primary buttons explicitly white on accent */
.kte-pb-btn-primary,
.kte-fbtn-p {
  color: #fff !important;
}

/* SVG content (shape thumbs) inherits dark stroke even on hover */
.kte-modal svg,
.kte-pb svg {
  color: var(--kte-text);
}

/* Dropdown <select> text */
.kte-modal select,
.kte-modal .kte-if,
.kte-modal .kte-is,
.kte-pb select,
.kte-pb .kte-pb-input {
  color: var(--kte-text) !important;
  background: var(--kte-surface) !important;
}

/* Vector-effect: keep stroke widths constant when SVG shapes scale */
.kte-modal svg circle,
.kte-modal svg ellipse,
.kte-modal svg rect,
.kte-modal svg path,
.kte-modal svg polygon,
.kte-modal svg polyline,
.kte-modal svg line {
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

/* Modal images (logo previews etc.) rendered with high-quality smoothing */
.kte-modal img,
.kte-pb img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ── Responsive breakpoints ──────────────────────────────────── */
@media (max-width: 900px) {
  .kte-modal {
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }
  .kte-left { width: 240px !important; }
  .kte-right { width: 240px !important; }
}

@media (max-width: 650px) {
  .kte-left,
  .kte-right {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 50;
    width: 85vw !important;
    max-width: 320px;
    transition: transform 0.25s;
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  .kte-left  { left: 0;  transform: translateX(-100%); }
  .kte-right { right: 0; transform: translateX(100%); }
  .kte-left.is-open  { transform: translateX(0); }
  .kte-right.is-open { transform: translateX(0); }
}

/* ── Welcome screen helpers ──────────────────────────────────── */
.kte-help-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--kte-border);
  background: var(--kte-surface-2);
}

.kte-help-link {
  background: none;
  border: 1px solid var(--kte-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kte-text-dim);
  cursor: pointer;
  width: 100%;
  transition: all 0.12s;
}

.kte-help-link:hover {
  background: var(--kte-accent-soft);
  border-color: var(--kte-accent);
  color: var(--kte-accent);
}

/* ░░░░░░░░░░ KATMAN 3/5: v20 ░░░░░░░░░░ */
/* ════════════════════════════════════════════════════════════════
 * KTE Editor v20.0 — Compact & Mobile UI overlay
 * Loaded after editor-v19.css to apply targeted fixes:
 *  - Smaller add-content buttons (2-col grid)
 *  - Compact step headers
 *  - Real mobile drawer (left panel hides on <860px)
 *  - Larger touch hit areas where needed
 *  - Better top toolbar styling
 *  - Inline QR panel (replaces modal)
 * ════════════════════════════════════════════════════════════════ */

/* ──────────────────── COMPACT LEFT PANEL ──────────────────── */

/* Step headers: thinner */
.kte-modal .kte-step-hdr {
  padding: 11px 14px !important;
  font-size: 12.5px !important;
}
.kte-modal .kte-step-num {
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
}
.kte-modal .kte-step-body {
  padding: 4px 12px 12px !important;
}
.kte-modal .kte-step-desc {
  font-size: 11px !important;
  margin: 2px 0 8px !important;
}

/* Add-content buttons → 2-col compact grid */
.kte-modal .kte-add-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;
}
.kte-modal .kte-add-btn {
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 9px 6px !important;
  text-align: center !important;
  min-height: 68px;
}
.kte-modal .kte-add-icon {
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}
.kte-modal .kte-add-label {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}
.kte-modal .kte-add-sub {
  display: none !important;   /* hide sub-text in compact mode */
}

/* Hide the verbose welcome banner — saves vertical space */
.kte-modal .kte-welcome {
  display: none !important;
}

/* Step 3 ("Hazır Şablonlar") starts collapsed */
.kte-modal .kte-tpl-large-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important;
}
.kte-modal .kte-tpl-large-grid > * {
  padding: 4px !important;
}

/* Mini sections more compact */
.kte-modal .kte-mini-sec {
  margin-top: 6px !important;
}
.kte-modal .kte-mini-hdr {
  padding: 7px 10px !important;
  font-size: 11px !important;
}
.kte-modal .kte-mini-body {
  padding: 6px 0 !important;
}

/* Quick texts: tighter chips */
.kte-modal .kte-qt-btn {
  padding: 3px 8px !important;
  font-size: 10.5px !important;
}

/* Layers list: tighter rows */
.kte-modal .kte-layer {
  padding: 6px 8px !important;
}
.kte-modal .kte-lay-name {
  font-size: 11.5px !important;
}

/* Help footer smaller */
.kte-modal .kte-help-foot {
  padding: 8px 12px !important;
}
.kte-modal .kte-help-link {
  font-size: 11px !important;
  padding: 5px 10px !important;
}

/* Sidebars narrower on desktop too */
.kte-modal .kte-left { width: 240px !important; }
.kte-modal .kte-right { width: 280px !important; }

/* ──────────────────── TOP QUICK BAR — POLISH ──────────────────── */

.kte-modal .kte-quick-top {
  gap: 4px !important;
  padding: 8px 12px !important;
  scrollbar-width: thin;
}
.kte-modal .kte-qt-tab {
  padding: 7px 11px !important;
  font-size: 12px !important;
  gap: 5px !important;
}

/* ──────────────────── MOBILE — REAL DRAWER ──────────────────── */

@media (max-width: 860px) {
  #kte-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .kte-modal {
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Hide ruler decorations to save space */
  .kte-modal .kte-canvas-rulers .kte-ruler-corner,
  .kte-modal #kte-ruler-h,
  .kte-modal #kte-ruler-v {
    display: none !important;
  }
  .kte-modal #kte-canvas {
    margin-left: 0 !important;
  }

  /* Left panel becomes drawer */
  .kte-modal .kte-left {
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    z-index: 999999;
    width: 86vw !important;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
  }
  .kte-modal .kte-left.kte-is-open {
    transform: translateX(0);
  }
  /* Right panel also a drawer */
  .kte-modal .kte-right {
    position: fixed !important;
    right: 0; top: 0; bottom: 0;
    z-index: 999999;
    width: 86vw !important;
    max-width: 320px;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
    border-left: 1px solid var(--kte-border) !important;
  }
  .kte-modal .kte-right.kte-is-open {
    transform: translateX(0);
  }

  /* Mobile toggle buttons in canvas-info bar */
  .kte-modal .kte-mob-btn {
    display: inline-flex !important;
  }

  /* Drawer backdrop */
  .kte-modal .kte-drawer-bg {
    position: fixed;
    inset: 0;
    background: rgba(16, 18, 29, 0.5);
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  .kte-modal .kte-drawer-bg.kte-is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Compact header */
  .kte-modal .kte-hdr {
    padding: 8px 10px !important;
  }
  .kte-modal .kte-hdr-title {
    font-size: 13px !important;
  }
  .kte-modal .kte-hbtn {
    padding: 6px 9px !important;
    font-size: 11px !important;
  }

  /* Footer buttons full width */
  .kte-modal .kte-footer {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .kte-modal .kte-fbtn {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  /* Top quick bar compact */
  .kte-modal .kte-quick-top {
    padding: 6px 10px !important;
  }
  .kte-modal .kte-qt-tab {
    padding: 8px 10px !important;
    font-size: 14px !important;   /* emoji larger */
  }
  .kte-modal .kte-qt-tab span {
    display: none !important;     /* emoji-only on mobile */
  }

  /* Canvas info: hide secondary text */
  .kte-modal .kte-canvas-info > span:nth-child(2) {
    display: none;
  }
}

/* Mobile floating drawer toggles (hidden on desktop) */
.kte-mob-btn {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--kte-surface);
  border: 1px solid var(--kte-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  color: var(--kte-text);
}

/* ──────────────────── INLINE QR PANEL ──────────────────── */
/* Replaces the modal — opens INSIDE the right properties pane as a section. */

#kte-qr-inline {
  display: none;
  padding: 14px;
  background: var(--kte-surface);
  border-bottom: 1px solid var(--kte-border);
  animation: kteQrSlide .2s ease;
}
@keyframes kteQrSlide {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
#kte-qr-inline.is-open { display: block; }

#kte-qr-inline h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--kte-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#kte-qr-inline h3 button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kte-text-mute);
  font-size: 18px;
  padding: 0 4px;
}

#kte-qr-inline .kte-qr-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
#kte-qr-inline .kte-qr-tab {
  flex: 1;
  padding: 7px 4px;
  font-size: 11px;
  font-weight: 700;
  background: transparent;
  color: var(--kte-text-dim);
  border: 1px solid var(--kte-border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
#kte-qr-inline .kte-qr-tab.is-active {
  background: var(--kte-accent);
  color: #fff;
  border-color: var(--kte-accent);
}
#kte-qr-inline .kte-qr-tab:hover:not(.is-active) {
  background: var(--kte-accent-soft);
  color: var(--kte-accent);
}

#kte-qr-inline input[type="text"],
#kte-qr-inline input[type="email"],
#kte-qr-inline input[type="tel"] {
  width: 100%;
  padding: 9px 11px;
  font-size: 13px;
  border: 1px solid var(--kte-border);
  border-radius: 8px;
  background: var(--kte-surface);
  color: var(--kte-text);
  font-family: inherit;
  margin-bottom: 8px;
  -webkit-user-select: text;
  user-select: text;
}
#kte-qr-inline input:focus {
  outline: none;
  border-color: var(--kte-accent);
  box-shadow: 0 0 0 3px var(--kte-accent-soft);
}

#kte-qr-inline label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--kte-text-dim);
  margin: 10px 0 4px;
}
#kte-qr-inline label span:last-child {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--kte-accent);
  font-weight: 700;
}
#kte-qr-inline .kte-qr-slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
#kte-qr-inline .kte-qr-slider-row button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--kte-border);
  background: var(--kte-surface);
  color: var(--kte-text);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}
#kte-qr-inline input[type="range"] {
  flex: 1;
  accent-color: var(--kte-accent);
}
#kte-qr-inline .kte-qr-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
#kte-qr-inline .kte-qr-actions button {
  flex: 1;
  padding: 9px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid var(--kte-border);
  background: var(--kte-surface);
  color: var(--kte-text);
  cursor: pointer;
  font-family: inherit;
}
#kte-qr-inline .kte-qr-actions .kte-qr-add {
  background: var(--kte-accent);
  color: #fff;
  border-color: var(--kte-accent);
  box-shadow: 0 2px 6px rgba(79,70,229,0.25);
}
#kte-qr-inline .kte-qr-hint {
  font-size: 10px;
  color: var(--kte-text-mute);
  margin-top: 4px;
}

/* QR live preview inside panel */
#kte-qr-inline .kte-qr-prev {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 140px;
  margin: 8px auto 0;
  background: #fff;
  border: 1px solid var(--kte-border);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#kte-qr-inline .kte-qr-prev svg {
  width: 100%;
  height: 100%;
}

/* ──────────────────── v20.2 — PROFESSION CATEGORY BAR ──────────────────── */
.kte-modal .kte-cat-bar {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  background: var(--kte-surface-2);
  border-bottom: 1px solid var(--kte-border);
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.kte-modal .kte-cat-btn {
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  background: var(--kte-surface);
  color: var(--kte-text);
  border: 1px solid var(--kte-border);
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .12s;
}
.kte-modal .kte-cat-btn:hover {
  border-color: var(--kte-accent);
  color: var(--kte-accent);
}
.kte-modal .kte-cat-btn.is-active {
  background: var(--kte-accent);
  border-color: var(--kte-accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}
@media (max-width: 640px) {
  .kte-modal .kte-cat-bar { padding: 6px 10px; gap: 4px; }
  .kte-modal .kte-cat-btn { padding: 7px 12px; font-size: 11.5px; }
}

/* ──────────────────── CANVAS CLIP ENFORCEMENT ──────────────────── */
/* Hard clip overflow visually too — defense in depth */
.kte-modal #kte-canvas {
  /* Already clipped via JS clipPath, but enforce CSS too */
  overflow: hidden !important;
}

/* ──────────────────── v20.1 — LOGO PICKER COLOR TINT ──────────────────── */
/* In the logo library picker, raster logos are mask-tinted with the
 * current ink color (set via inline style="--kte-ink:#..."). Falls back
 * to silhouette on browsers without mask-image. */
.kte-modal .kte-loglib-pick {
  --kte-ink: #1E3A8A;
  position: relative;
}
.kte-modal .kte-loglib-pick[data-tint-src] img {
  visibility: hidden;
}
.kte-modal .kte-loglib-pick[data-tint-src]::before {
  content: '';
  position: absolute;
  inset: 8px 8px 22px 8px;
  background-color: var(--kte-ink);
  -webkit-mask-image: var(--tint-mask);
          mask-image: var(--tint-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
}

/* ░░░░░░░░░░ KATMAN 4/5: v35 ░░░░░░░░░░ */
/* ════════════════════════════════════════════════════════════════════
 * v35 PREMIUM DESIGN SYSTEM
 * Inspired by: Figma, Canva, Adobe Express, Framer, Linear, Stripe
 * 8pt spacing · Inter font · Soft shadows · WCAG AA contrast
 * ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── Design Tokens (override v19/v20 vars) ─────────────────────────── */
:root {
  /* Spacing (8pt grid) */
  --kte-sp-1: 4px;   --kte-sp-2: 8px;
  --kte-sp-3: 12px;  --kte-sp-4: 16px;
  --kte-sp-5: 20px;  --kte-sp-6: 24px;
  --kte-sp-8: 32px;  --kte-sp-10: 40px;

  /* Border radius */
  --kte-r-sm: 6px;   --kte-r-md: 10px;
  --kte-r-lg: 12px;  --kte-r-xl: 16px;

  /* Colors — Premium palette */
  --kte-bg-app: #f4f6f8;            /* App background — soft gray */
  --kte-bg-canvas: #f4f6f8;          /* Canvas area */
  --kte-bg-panel: #ffffff;           /* Panels — pure white */
  --kte-bg-elev1: #ffffff;
  --kte-bg-elev2: #fafbfc;
  --kte-bg-hover: #f1f5f9;

  --kte-fg-primary: #09090b;         /* Near-black text */
  --kte-fg-secondary: #3f3f46;
  --kte-fg-tertiary: #71717a;
  --kte-fg-muted: #a1a1aa;

  --kte-border: #e4e4e7;
  --kte-border-strong: #d4d4d8;
  --kte-divider: #f1f5f9;

  /* Brand */
  --kte-brand: #6366f1;              /* Vibrant violet — primary CTA */
  --kte-brand-hover: #4f46e5;
  --kte-brand-active: #4338ca;
  --kte-brand-soft: #eef2ff;
  --kte-brand-fg: #4f46e5;

  /* Success (alt CTA) */
  --kte-success: #16a34a;
  --kte-success-soft: #dcfce7;

  /* Warning */
  --kte-warn: #f59e0b;
  --kte-warn-soft: #fef3c7;

  /* Danger */
  --kte-danger: #dc2626;
  --kte-danger-soft: #fee2e2;

  /* Header */
  --kte-header-bg: #18181b;          /* Near-black header */
  --kte-header-fg: #fafafa;
  --kte-header-fg-muted: #a1a1aa;

  /* Shadows — soft, layered */
  --kte-sh-xs: 0 1px 2px rgba(0,0,0,0.04);
  --kte-sh-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --kte-sh-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --kte-sh-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
  --kte-sh-canvas: 0 4px 24px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04);

  /* Transitions */
  --kte-tr: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --kte-tr-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --kte-tr-spring: 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Reset overrides — apply Inter globally ────────────────────────── */
.kte-modal,
.kte-modal *,
#kte-overlay *,
.kte-float-panel,
.kte-float-panel * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

.kte-modal kbd {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace !important;
}

/* ─── Overlay backdrop ──────────────────────────────────────────────── */
#kte-overlay {
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ─── Modal container ───────────────────────────────────────────────── */
.kte-modal {
  background: var(--kte-bg-app) !important;
  border-radius: var(--kte-r-xl) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.40) !important;
  border: none !important;
  overflow: hidden !important;
  width: min(1400px, 96vw) !important;
  max-height: 96vh !important;
}

/* ═══════════════ HEADER (64-72px premium) ═══════════════════════════ */
.kte-modal .kte-hdr {
  background: var(--kte-header-bg) !important;
  color: var(--kte-header-fg) !important;
  height: 64px !important;
  padding: 0 var(--kte-sp-5) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--kte-sp-4) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  flex-shrink: 0 !important;
}
.kte-modal .kte-hdr-title {
  color: var(--kte-header-fg) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--kte-sp-3);
}
.kte-modal .kte-size-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,0.08) !important;
  color: #d4d4d8 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin-left: 0 !important;
  border: 1px solid rgba(255,255,255,0.08);
}
.kte-modal .kte-hdr-btns {
  display: flex !important;
  align-items: center !important;
  gap: var(--kte-sp-2) !important;
}
.kte-modal .kte-hdr-btns button,
.kte-modal .kte-hbtn {
  background: rgba(255,255,255,0.06) !important;
  color: var(--kte-header-fg) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--kte-r-md) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--kte-tr-fast) !important;
  min-height: 36px;
}
.kte-modal .kte-hdr-btns button:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.kte-modal .kte-hbtn-danger {
  color: #fca5a5 !important;
}
.kte-modal .kte-close-modal,
.kte-modal .kte-hbtn-close {
  background: rgba(255,255,255,0.06) !important;
  color: var(--kte-header-fg) !important;
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════ BODY layout ════════════════════════════════════════ */
.kte-modal .kte-body {
  display: flex !important;
  flex: 1;
  min-height: 0;
  background: var(--kte-bg-app) !important;
}

/* ═══════════════ LEFT PANEL (280px) ═════════════════════════════════ */
.kte-modal .kte-left {
  width: 280px !important;
  min-width: 280px !important;
  background: var(--kte-bg-panel) !important;
  border-right: 1px solid var(--kte-border) !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Left panel tabs (Ekle / Katmanlar) */
.kte-left-tabs {
  display: flex;
  background: var(--kte-bg-panel);
  border-bottom: 1px solid var(--kte-border);
  position: sticky;
  top: 0;
  z-index: 5;
}
.kte-left-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 14px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kte-fg-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  transition: color var(--kte-tr-fast);
}
.kte-left-tab.is-active {
  color: var(--kte-brand-fg);
}
.kte-left-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 16px; right: 16px;
  height: 2px;
  background: var(--kte-brand);
  border-radius: 2px 2px 0 0;
}
.kte-left-tab:hover { color: var(--kte-fg-primary); }
.kte-left-tab .kte-tab-count {
  background: var(--kte-bg-hover);
  color: var(--kte-fg-tertiary);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}

/* Hide accordion appearance entirely - using tabs now */
.kte-modal .kte-step {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.kte-modal .kte-step-hdr {
  display: none !important;
}
.kte-modal .kte-step-body {
  display: none;
  padding: var(--kte-sp-4) !important;
}
.kte-modal .kte-step.is-tab-active .kte-step-body {
  display: block;
}

/* "Ekle" tools — card grid */
.kte-modal .kte-add-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--kte-sp-2) !important;
  margin-top: 0 !important;
}
.kte-modal .kte-add-btn {
  background: var(--kte-bg-elev2) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: var(--kte-r-md) !important;
  padding: 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all var(--kte-tr-fast) !important;
  min-height: 84px !important;
}
.kte-modal .kte-add-btn:hover {
  background: var(--kte-bg-panel) !important;
  border-color: var(--kte-brand) !important;
  box-shadow: 0 0 0 3px var(--kte-brand-soft);
  transform: translateY(-1px);
}
.kte-modal .kte-add-btn .kte-add-icon {
  font-size: 22px !important;
  line-height: 1 !important;
  color: var(--kte-fg-secondary) !important;
  margin: 0 !important;
}
.kte-modal .kte-add-btn:hover .kte-add-icon {
  color: var(--kte-brand-fg) !important;
}
.kte-modal .kte-add-btn .kte-add-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kte-fg-primary) !important;
  line-height: 1.2 !important;
}
.kte-modal .kte-add-btn .kte-add-sub {
  font-size: 10px !important;
  color: var(--kte-fg-tertiary) !important;
  line-height: 1.2 !important;
  display: none !important;  /* Hide subs - cleaner */
}

/* Mini sections inside left panel */
.kte-modal .kte-mini-sec {
  margin-top: var(--kte-sp-4);
  padding-top: var(--kte-sp-4);
  border-top: 1px solid var(--kte-divider);
}
.kte-modal .kte-mini-hdr {
  background: none !important;
  border: none !important;
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kte-fg-secondary) !important;
  cursor: pointer;
}
.kte-modal .kte-mini-btn {
  background: var(--kte-bg-elev2) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: var(--kte-r-sm) !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  color: var(--kte-fg-secondary) !important;
  cursor: pointer !important;
  width: 100%;
  text-align: left;
  margin-bottom: 4px;
}
.kte-modal .kte-mini-btn:hover {
  background: var(--kte-brand-soft) !important;
  border-color: var(--kte-brand) !important;
  color: var(--kte-brand-fg) !important;
}

/* Layers list */
.kte-modal .kte-layers-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kte-modal .kte-layer {
  background: var(--kte-bg-elev2) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: var(--kte-r-md) !important;
  padding: 10px 12px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--kte-tr-fast);
}
.kte-modal .kte-layer:hover {
  background: var(--kte-bg-panel) !important;
  border-color: var(--kte-border-strong) !important;
}
.kte-modal .kte-layer.is-selected {
  background: var(--kte-brand-soft) !important;
  border-color: var(--kte-brand) !important;
}

/* Empty state for layers */
.kte-layers-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--kte-fg-tertiary);
  font-size: 12.5px;
}
.kte-layers-empty .ico {
  font-size: 40px; opacity: 0.3; margin-bottom: 10px;
}

/* ═══════════════ CENTER (Canvas) ════════════════════════════════════ */
.kte-modal .kte-canvas-area {
  flex: 1 !important;
  background: var(--kte-bg-canvas) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Canvas info bar (top of canvas) - cleaner */
.kte-modal .kte-canvas-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: transparent;
  font-size: 11.5px;
  color: var(--kte-fg-tertiary);
  border: none;
}

/* Canvas wrap - premium float */
.kte-modal .kte-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kte-sp-6);
  position: relative;
}

/* Floating zoom toolbar (bottom-left) */
.kte-zoom-fab {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(24, 24, 27, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--kte-r-md);
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  box-shadow: var(--kte-sh-md);
  z-index: 10;
}
.kte-zoom-fab button {
  background: none;
  border: none;
  color: #d4d4d8;
  width: 32px; height: 32px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kte-zoom-fab button:hover { background: rgba(255,255,255,0.10); color: #fff; }
.kte-zoom-fab .kte-zoom-val {
  color: #fafafa;
  font-size: 11px;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}

/* Empty state — premium dashed helper */
.kte-canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  opacity: 0.5;
}
.kte-canvas-empty .ico { font-size: 56px; opacity: 0.4; }
.kte-canvas-empty .msg {
  font-size: 14px;
  font-weight: 500;
  color: var(--kte-fg-tertiary);
  text-align: center;
  line-height: 1.5;
  max-width: 260px;
}

/* ═══════════════ RIGHT PANEL (320px) ════════════════════════════════ */
.kte-modal .kte-right {
  width: 320px !important;
  min-width: 320px !important;
  background: var(--kte-bg-panel) !important;
  border-left: 1px solid var(--kte-border) !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

/* Right panel header */
.kte-right-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--kte-divider);
  position: sticky;
  top: 0;
  background: var(--kte-bg-panel);
  z-index: 5;
}
.kte-right-header .ttl {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kte-fg-tertiary);
  display: flex; align-items: center; gap: 6px;
}

/* Property cards */
.kte-modal .kte-pr,
.kte-modal .kte-ps {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--kte-divider) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  margin: 0 !important;
}
.kte-modal .kte-pr label,
.kte-modal .kte-ps label,
.kte-prop-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--kte-fg-tertiary) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Inputs — Linear/Figma style */
.kte-modal input[type="text"],
.kte-modal input[type="number"],
.kte-modal input[type="email"],
.kte-modal input[type="url"],
.kte-modal select,
.kte-modal textarea {
  background: var(--kte-bg-elev2) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: var(--kte-r-sm) !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  color: var(--kte-fg-primary) !important;
  min-height: 36px !important;
  font-family: inherit !important;
  transition: all var(--kte-tr-fast) !important;
  width: 100%;
  box-sizing: border-box;
}
.kte-modal input:focus,
.kte-modal select:focus,
.kte-modal textarea:focus {
  background: var(--kte-bg-panel) !important;
  border-color: var(--kte-brand) !important;
  outline: 3px solid var(--kte-brand-soft) !important;
  outline-offset: 0 !important;
}

/* Range sliders — premium */
.kte-modal input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  height: 24px !important;
  padding: 0 !important;
  border: none !important;
  min-height: 24px !important;
}
.kte-modal input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 18px; height: 18px;
  background: var(--kte-brand) !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(99,102,241,0.40) !important;
  cursor: pointer !important;
}
.kte-modal input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  background: var(--kte-border) !important;
  border-radius: 2px !important;
}
.kte-modal input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--kte-brand);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(99,102,241,0.4);
  cursor: pointer;
}

/* Buttons */
.kte-modal button,
.kte-modal .kte-fbtn {
  font-family: inherit !important;
}

/* Premium save CTA */
.kte-modal #kte-btn-save,
.kte-modal .kte-fbtn-p {
  background: linear-gradient(180deg, var(--kte-brand) 0%, var(--kte-brand-hover) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--kte-r-md) !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  cursor: pointer !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 16px rgba(99,102,241,0.30) !important;
  transition: all var(--kte-tr-fast) !important;
  min-height: 40px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kte-modal #kte-btn-save:hover {
  background: linear-gradient(180deg, var(--kte-brand-hover) 0%, var(--kte-brand-active) 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 8px 22px rgba(99,102,241,0.45) !important;
  transform: translateY(-1px);
}
.kte-modal #kte-btn-save:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 2px 4px rgba(99,102,241,0.30) !important;
}
.kte-modal #kte-btn-save.is-saving {
  pointer-events: none;
  opacity: 0.8;
}
.kte-modal #kte-btn-save.is-saved {
  background: linear-gradient(180deg, var(--kte-success) 0%, #15803d 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 16px rgba(22,163,74,0.35) !important;
}

/* Secondary buttons */
.kte-modal .kte-fbtn {
  background: var(--kte-bg-panel) !important;
  color: var(--kte-fg-secondary) !important;
  border: 1px solid var(--kte-border) !important;
  border-radius: var(--kte-r-md) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--kte-tr-fast) !important;
  min-height: 36px !important;
}
.kte-modal .kte-fbtn:hover {
  background: var(--kte-bg-hover) !important;
  border-color: var(--kte-border-strong) !important;
}

/* ═══════════════ FOOTER ═════════════════════════════════════════════ */
.kte-modal .kte-footer {
  background: var(--kte-bg-panel) !important;
  border-top: 1px solid var(--kte-border) !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--kte-sp-4) !important;
  flex-shrink: 0 !important;
}
.kte-modal .kte-footer-l,
.kte-modal .kte-footer-c,
.kte-modal .kte-footer-r {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ═══════════════ Advanced Settings Accordion ════════════════════════ */
.kte-adv-section {
  border-top: 1px solid var(--kte-divider);
  margin-top: 8px;
}
.kte-adv-toggle {
  width: 100%;
  background: none !important;
  border: none !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kte-fg-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
}
.kte-adv-toggle:hover { color: var(--kte-fg-primary) !important; }
.kte-adv-toggle .chev {
  transition: transform var(--kte-tr-fast);
  font-size: 10px;
}
.kte-adv-section.is-open .kte-adv-toggle .chev { transform: rotate(180deg); }
.kte-adv-content {
  display: none;
  padding: 0;
}
.kte-adv-section.is-open .kte-adv-content { display: block; }

/* ═══════════════ Floating Contextual Toolbar ════════════════════════ */
.kte-context-toolbar {
  position: absolute;
  background: #18181b;
  border-radius: var(--kte-r-md);
  padding: 4px;
  display: none;
  align-items: center;
  gap: 2px;
  box-shadow: var(--kte-sh-lg);
  z-index: 50;
  pointer-events: auto;
}
.kte-context-toolbar.is-visible { display: flex; }
.kte-context-toolbar button {
  background: none !important;
  border: none !important;
  color: #d4d4d8 !important;
  width: 32px; height: 32px;
  border-radius: 6px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--kte-tr-fast);
}
.kte-context-toolbar button:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}
.kte-context-toolbar .kte-ctx-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.10);
  margin: 0 2px;
}
.kte-context-toolbar .kte-ctx-danger:hover {
  background: rgba(220,38,38,0.20) !important;
  color: #fca5a5 !important;
}

/* ═══════════════ MOBILE EXPERIENCE (≤767px) ═════════════════════════ */
@media (max-width: 767px){
  .kte-modal {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* Mobile header — compact, premium */
  .kte-modal .kte-hdr {
    height: 56px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .kte-modal .kte-hdr-title {
    font-size: 13px !important;
  }
  .kte-modal .kte-size-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  .kte-modal .kte-hbtn-danger { display: none !important; }
  .kte-modal .kte-hbtn { padding: 6px 8px !important; min-height: 32px !important; font-size: 12px !important; }
  .kte-modal #kte-btn-undo, .kte-modal #kte-btn-redo {
    padding: 6px 8px !important;
  }

  .kte-modal .kte-body {
    flex-direction: column !important;
    height: calc(100vh - 56px - 64px) !important;  /* 56 header + 64 bottom nav */
  }

  /* Left panel becomes a bottom sheet */
  .kte-modal .kte-left {
    position: fixed !important;
    bottom: 64px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 60vh !important;
    max-height: 60vh !important;
    transform: translateY(100%) !important;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1) !important;
    z-index: 80 !important;
    border-right: none !important;
    border-top-left-radius: var(--kte-r-xl) !important;
    border-top-right-radius: var(--kte-r-xl) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18) !important;
  }
  .kte-modal .kte-left.kte-is-open {
    transform: translateY(0) !important;
  }
  .kte-modal .kte-left::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--kte-border-strong);
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }

  /* Right panel — also bottom sheet (alternative to left) */
  .kte-modal .kte-right {
    position: fixed !important;
    bottom: 64px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 60vh !important;
    max-height: 60vh !important;
    transform: translateY(100%) !important;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1) !important;
    z-index: 80 !important;
    border-left: none !important;
    border-top-left-radius: var(--kte-r-xl) !important;
    border-top-right-radius: var(--kte-r-xl) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18) !important;
  }
  .kte-modal .kte-right.kte-is-open {
    transform: translateY(0) !important;
  }
  .kte-modal .kte-right::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--kte-border-strong);
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }

  /* Backdrop */
  .kte-modal .kte-drawer-bg {
    position: fixed !important;
    top: 56px !important; left: 0 !important; right: 0 !important; bottom: 64px !important;
    background: rgba(0,0,0,0.32) !important;
    display: none !important;
    z-index: 70 !important;
  }
  .kte-modal .kte-drawer-bg.kte-is-open { display: block !important; }

  /* Canvas takes the rest */
  .kte-modal .kte-canvas-area {
    height: 100% !important;
    flex: 1 !important;
  }

  /* MOBILE BOTTOM NAVIGATION (4 tabs) */
  .kte-mob-bottomnav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: var(--kte-bg-panel) !important;
    border-top: 1px solid var(--kte-border) !important;
    display: flex !important;
    z-index: 90 !important;
    padding: 6px 4px env(safe-area-inset-bottom, 6px) !important;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.04);
  }
  .kte-mob-bottomnav button {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 4px !important;
    cursor: pointer !important;
    color: var(--kte-fg-tertiary) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    transition: all var(--kte-tr-fast) !important;
  }
  .kte-mob-bottomnav button .ico {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .kte-mob-bottomnav button.is-active {
    color: var(--kte-brand-fg) !important;
    background: var(--kte-brand-soft) !important;
  }
  .kte-mob-bottomnav button.is-cta {
    color: var(--kte-brand-fg) !important;
    font-weight: 700 !important;
  }
  .kte-mob-bottomnav button:active { transform: scale(0.95); }

  /* Hide old mobile UI from previous versions */
  .kte-modal .kte-mob-tabbar,
  .kte-modal .kte-mob-toolstrip,
  .kte-modal .kte-mob-btn,
  .kte-modal .kte-right-strip,
  .kte-modal .kte-quick-actions {
    display: none !important;
  }

  /* Mobile footer hide download buttons - they go to Export sheet */
  .kte-modal .kte-footer {
    display: none !important;
  }

  /* Mobile floating quick toolbar near object */
  .kte-context-toolbar {
    bottom: 76px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
  }
  .kte-context-toolbar button {
    width: 40px !important;
    height: 40px !important;
  }

  /* Bottom sheet content padding */
  .kte-modal .kte-left .kte-step-body,
  .kte-modal .kte-right .kte-pr,
  .kte-modal .kte-right .kte-ps {
    padding: 12px 16px !important;
  }

  /* Inputs bigger for touch */
  .kte-modal input[type="text"],
  .kte-modal input[type="number"],
  .kte-modal select,
  .kte-modal textarea {
    font-size: 16px !important;  /* prevent iOS zoom */
    min-height: 44px !important;
  }
  .kte-modal button { min-height: 44px !important; }
}

@media (min-width: 768px) {
  .kte-mob-bottomnav { display: none !important; }
}

/* ═══════════════ Help footer ════════════════════════════════════════ */
.kte-modal .kte-help-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--kte-divider);
  margin-top: auto;
}
.kte-modal .kte-help-link {
  background: none !important;
  border: none !important;
  color: var(--kte-fg-tertiary) !important;
  font-size: 11.5px !important;
  cursor: pointer !important;
  padding: 4px !important;
}
.kte-modal .kte-help-link:hover { color: var(--kte-brand-fg) !important; }

/* ════════════════ v36: Toggle Switch (Premium) ════════════════ */
.kte-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.kte-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.kte-toggle-track {
  position: absolute;
  inset: 0;
  background: #d4d4d8;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.kte-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kte-toggle-switch input:checked ~ .kte-toggle-track {
  background: var(--kte-brand);
}
.kte-toggle-switch input:checked ~ .kte-toggle-track .kte-toggle-thumb {
  transform: translateX(18px);
}
.kte-toggle-switch input:focus-visible ~ .kte-toggle-track {
  outline: 3px solid var(--kte-brand-soft);
  outline-offset: 2px;
}

/* ════════════════ v36: Mobile Slider +/- Buttons ════════════════ */
@media (max-width: 767px){
  .kte-modal .kte-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .kte-modal .kte-slider-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--kte-bg-elev2);
    border: 1px solid var(--kte-border);
    color: var(--kte-fg-secondary);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .kte-modal .kte-slider-btn:active {
    background: var(--kte-brand-soft);
    border-color: var(--kte-brand);
    color: var(--kte-brand-fg);
  }
  .kte-modal .kte-slider-row input[type="range"] {
    flex: 1;
    margin: 0 !important;
  }
}

/* ════════════════ v36: Print Warnings Bar (Better Style) ════════════════ */
#kte-print-warn-bar {
  font-family: 'Inter', sans-serif !important;
  line-height: 1.5 !important;
  border-top-width: 1px !important;
}

/* ════════════════ v36: Keyboard Shortcut Hints ════════════════ */
.kte-shortcut-hints {
  display: none !important;
  pointer-events: none !important;
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 6px;
  z-index: 9;
  flex-wrap: wrap;
  max-width: 320px;
  justify-content: flex-end;
}
.kte-shortcut-hints .sc {
  font-size: 10.5px;
  color: var(--kte-fg-muted);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--kte-border);
  font-variant-numeric: tabular-nums;
}
.kte-shortcut-hints kbd {
  background: #fff;
  border: 1px solid var(--kte-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: var(--kte-fg-secondary);
  box-shadow: 0 1px 0 var(--kte-border);
}
@media (max-width: 767px){
  .kte-shortcut-hints { display: none !important; }
}

/* ░░░░░░░░░░ KATMAN 5/5: v46 modern (Fluent) ░░░░░░░░░░ */
/* ============================================================
   Kaşe Tasarım Editörü — Modern Tema (v46)
   "Windows 11 / Fluent Design" — yumuşak gölgeler, yuvarlatılmış
   köşeler, ferah boşluklar, temiz tipografi, mobil uyumlu.
   Bu dosya EN SON yüklenir; mevcut sınıfları yeniden stillendirir.
   ============================================================ */

:root{
  /* Fluent renk paleti — modern mavi accent */
  --kb:#2563eb;          /* accent */
  --kbd:#1d4ed8;         /* accent koyu */
  --kr:#ef4444;          /* tehlike */
  --kg:#16a34a;          /* başarı */
  --kbor:#e5e9ef;        /* ince kenar */
  --kbg:#f7f9fc;         /* yüzey arkaplan */
  --k-surface:#ffffff;
  --k-text:#1f2937;
  --k-muted:#6b7280;
  --k-radius:10px;
  --k-radius-sm:8px;
  --k-shadow:0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
  --k-shadow-lg:0 8px 28px rgba(16,24,40,.14);
  --k-font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,system-ui,sans-serif;
}

/* ── Genel tipografi ── */
.kte-modal{font-family:var(--k-font) !important;color:var(--k-text);border-radius:14px !important;box-shadow:0 24px 70px rgba(16,24,40,.40) !important;}

/* ── Üst başlık (header) — temiz, düz mavi ── */
.kte-hdr{height:56px !important;background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;box-shadow:0 1px 0 rgba(0,0,0,.04);}
.kte-hdr-title{font-weight:650 !important;letter-spacing:-.01em;}
.kte-hbtn{background:rgba(255,255,255,.16) !important;border:1px solid rgba(255,255,255,.22) !important;border-radius:8px !important;font-weight:600 !important;backdrop-filter:blur(6px);transition:background .15s,transform .1s !important;}
.kte-hbtn:hover{background:rgba(255,255,255,.28) !important;transform:translateY(-1px);}
.kte-hbtn:active{transform:translateY(0);}

/* ── Panel başlıkları ── */
.kte-ptitle,.kte-ptitle2{color:var(--k-muted) !important;letter-spacing:.5px;background:transparent !important;border-bottom:none !important;padding:12px 14px 6px !important;}
.kte-left,.kte-right{background:var(--k-surface) !important;border-color:var(--kbor) !important;}
.kte-canvas-area{background:#eef1f5 !important;}
.kte-canvas-info,.kte-canvas-ctrls{background:rgba(255,255,255,.7) !important;backdrop-filter:blur(8px);border-color:var(--kbor) !important;}
#kte-canvas{box-shadow:0 6px 30px rgba(16,24,40,.18) !important;border-radius:4px;}

/* ── Sol araç butonları (Yazı/Şekil/Logo/QR ekle) ── */
.kte-add-btn{
  border:1px solid var(--kbor) !important;
  border-radius:var(--k-radius) !important;
  background:var(--k-surface) !important;
  box-shadow:var(--k-shadow) !important;
  padding:12px 10px !important;
  transition:transform .12s, box-shadow .15s, border-color .15s !important;
}
.kte-add-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--k-shadow-lg) !important;
  border-color:#c7d2fe !important;
}
.kte-add-btn:active{transform:translateY(0);}
.kte-add-icon{font-size:22px !important;}
.kte-add-label{font-weight:650 !important;color:var(--k-text) !important;}
.kte-add-sub{color:var(--k-muted) !important;font-size:10.5px !important;}

/* ── Aksiyon butonları (sağ panel: Ortala/Kopyala/Sil) ── */
.kte-ab{
  border:1px solid var(--kbor) !important;
  border-radius:var(--k-radius-sm) !important;
  background:var(--k-surface) !important;
  color:var(--k-text) !important;
  font-weight:600 !important;
  padding:8px 6px !important;
  box-shadow:0 1px 1px rgba(16,24,40,.04) !important;
  transition:background .14s, border-color .14s, transform .1s !important;
}
.kte-ab:hover{background:#f0f5ff !important;border-color:#bfdbfe !important;transform:translateY(-1px);}
.kte-ab:active{transform:translateY(0);}
.kte-ab-d{color:var(--kr) !important;}
.kte-ab-d:hover{background:#fef2f2 !important;border-color:#fecaca !important;}

/* ── Footer butonları (İndir/Kaydet/Gelişmiş) ── */
.kte-fbtn{
  border:1px solid var(--kbor) !important;
  border-radius:var(--k-radius-sm) !important;
  background:var(--k-surface) !important;
  color:var(--k-text) !important;
  font-weight:600 !important;
  padding:9px 14px !important;
  box-shadow:var(--k-shadow) !important;
  transition:background .14s, transform .1s, box-shadow .15s !important;
}
.kte-fbtn:hover{background:#f0f5ff !important;transform:translateY(-1px);box-shadow:var(--k-shadow-lg) !important;}
.kte-fbtn:active{transform:translateY(0);}
/* Ana "Kaydet" butonu — vurgulu accent */
#kte-btn-save{background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;color:#fff !important;border-color:#1d4ed8 !important;}
#kte-btn-save:hover{background:linear-gradient(180deg,#1d4ed8,#1e40af) !important;}

/* ── İndir açılır menüsü (v45) ── */
#kte-dl-menu{border-radius:var(--k-radius) !important;box-shadow:var(--k-shadow-lg) !important;border-color:var(--kbor) !important;}
.kte-dl-item{border-radius:var(--k-radius-sm) !important;transition:background .12s;}

/* ── Form girişleri (input/select/textarea) ── */
.kte-is,.kte-if,.kte-mb input,.kte-mb select,
.kte-ps input[type=text],.kte-ps input[type=number],.kte-ps select,.kte-ps textarea{
  border:1px solid #d6dde6 !important;
  border-radius:var(--k-radius-sm) !important;
  padding:8px 10px !important;
  font-size:13px !important;
  background:#fff !important;
  transition:border-color .15s, box-shadow .15s !important;
}
.kte-is:focus,.kte-if:focus,
.kte-ps input:focus,.kte-ps select:focus,.kte-ps textarea:focus{
  border-color:var(--kb) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.13) !important;
  outline:none !important;
}
.kte-ic{border-radius:var(--k-radius-sm) !important;border:1px solid #d6dde6 !important;cursor:pointer;height:34px;}

/* ── Hizalama butonları ── */
.kte-align-grp{display:flex;gap:4px;background:#f1f5f9;border-radius:var(--k-radius-sm);padding:3px;}
.kte-align-btn{
  flex:1;border:none !important;background:transparent !important;border-radius:6px !important;
  padding:6px 8px !important;font-size:12px !important;font-weight:600 !important;color:var(--k-muted) !important;
  transition:background .14s, color .14s !important;cursor:pointer;
}
.kte-align-btn:hover{background:rgba(37,99,235,.08) !important;color:var(--kb) !important;}
.kte-align-btn.active{background:#fff !important;color:var(--kb) !important;box-shadow:var(--k-shadow) !important;}

/* ── Gelişmiş toggle (açılır bölümler) ── */
.kte-adv-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:#f7f9fc !important;border:1px solid var(--kbor) !important;border-radius:var(--k-radius-sm) !important;
  padding:9px 12px !important;font-size:12.5px !important;font-weight:600 !important;color:var(--k-text) !important;
  cursor:pointer;transition:background .14s !important;
}
.kte-adv-toggle:hover{background:#eef2f8 !important;}
.kte-adv-toggle .chev{transition:transform .2s;color:var(--k-muted);}
.kte-adv-section.is-open .kte-adv-toggle .chev{transform:rotate(180deg);}
.kte-adv-content{padding:10px 2px 2px;}

/* ── Toggle switch (dişi yazı vb.) ── */
.kte-toggle-track{width:40px;height:22px;border-radius:11px;background:#cbd5e1;position:relative;transition:background .2s;display:inline-block;}
.kte-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s;}
.kte-toggle-switch input:checked + .kte-toggle-track{background:var(--kb);}
.kte-toggle-switch input:checked + .kte-toggle-track .kte-toggle-thumb{transform:translateX(18px);}
.kte-toggle-switch input{position:absolute;opacity:0;width:0;height:0;}

/* ── Float paneller (şekil/şablon) + modal'lar ── */
.kte-float-panel,.kte-vec-tune-card,.kte-help-card{
  border-radius:14px !important;box-shadow:var(--k-shadow-lg) !important;border:1px solid var(--kbor) !important;
}

/* ── Zoom kontrolleri ── */
.kte-zoom-btn,#kte-zoom-in,#kte-zoom-out,#kte-zoom-1{
  border:1px solid var(--kbor) !important;border-radius:var(--k-radius-sm) !important;background:#fff !important;
  transition:background .14s !important;
}
.kte-zoom-btn:hover{background:#f0f5ff !important;}

/* ── Panel daralt/aç tutamaçları ── */
.kte-panel-toggle{border-radius:50% !important;box-shadow:var(--k-shadow) !important;background:#fff !important;border:1px solid var(--kbor) !important;}

/* ============================================================
   MOBİL UYUM (≤ 860px) — yan paneller alt-çekmece olur
   ============================================================ */
@media (max-width:860px){
  .kte-modal{max-width:100vw !important;max-height:100vh !important;border-radius:0 !important;height:100vh;}
  .kte-body{flex-direction:column !important;}

  /* Sol araçlar: üstte yatay kaydırılabilir şerit */
  .kte-left{
    width:100% !important;flex-shrink:0;flex-direction:row !important;
    overflow-x:auto !important;overflow-y:hidden !important;
    border-right:none !important;border-bottom:1px solid var(--kbor) !important;
    max-height:none;height:auto;
  }
  .kte-add-grid{display:flex !important;flex-wrap:nowrap !important;gap:8px;padding:8px;}
  .kte-add-btn{min-width:96px;flex-shrink:0;}
  .kte-left .kte-ptitle{display:none;}

  /* Tuval ortada, esner */
  .kte-canvas-area{flex:1;min-height:0;}

  /* Sağ özellik paneli: alttan açılan çekmece */
  .kte-right{
    position:fixed !important;left:0;right:0;bottom:0;top:auto !important;
    width:100% !important;max-height:62vh;
    border-left:none !important;border-top:1px solid var(--kbor) !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:0 -8px 30px rgba(16,24,40,.18) !important;
    transform:translateY(calc(100% - 46px));
    transition:transform .28s ease !important;
    z-index:50;
  }
  .kte-right.kte-sheet-open{transform:translateY(0);}
  /* Çekmece tutamacı */
  .kte-right::before{
    content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:#cbd5e1;
  }
  .kte-ptitle{padding-top:18px !important;text-align:center;cursor:pointer;}

  /* Footer butonları sığsın */
  .kte-footer{flex-wrap:wrap;gap:6px;padding:8px !important;}
  .kte-fbtn{padding:9px 12px !important;font-size:12px !important;}

  /* Dokunma hedefleri büyüsün */
  .kte-ab{padding:11px 6px !important;}
  .kte-align-btn{padding:9px 8px !important;}
}

/* Çok küçük ekran (≤ 480px) ince ayar */
@media (max-width:480px){
  .kte-hdr{height:50px !important;padding:0 10px !important;}
  .kte-hdr-title{font-size:14px !important;}
  .kte-hbtn{padding:5px 8px !important;font-size:11px !important;}
  .kte-add-btn{min-width:84px;padding:10px 8px !important;}
}

/* Erişilebilirlik: klavye odak halkası */
.kte-add-btn:focus-visible,.kte-ab:focus-visible,.kte-fbtn:focus-visible,.kte-align-btn:focus-visible{
  outline:2px solid var(--kb);outline-offset:2px;
}

/* ═══════════════════════════════════════════════════════════════
   v55 — FİNAL ARAYÜZ CİLASI (mockup ilhamı: temiz, premium, mobil)
   Mevcut sınıfların üzerine; referans görsellere yaklaştırır.
   ═══════════════════════════════════════════════════════════════ */

/* Onayla ve Kaydet — mockup'taki mor gradient */
.kte-modal #kte-btn-save{
  background:linear-gradient(135deg,#7c3aed,#6d28d9) !important;
  border:none !important; color:#fff !important;
  border-radius:12px !important; font-weight:700 !important;
  padding:11px 22px !important; box-shadow:0 4px 14px rgba(124,58,237,.35) !important;
}
.kte-modal #kte-btn-save:hover{ background:linear-gradient(135deg,#6d28d9,#5b21b6) !important; transform:translateY(-1px); }

/* Sol Ekle/Katmanlar sekmeleri — temiz, alt çizgili aktif */
.kte-modal .kte-left-tabs{ display:flex; gap:0; border-bottom:1px solid var(--kte-border,#e5e9ef); margin-bottom:8px; }
.kte-modal .kte-left-tab{
  flex:1; background:none !important; border:none !important; padding:12px 8px !important;
  font-size:13px !important; font-weight:650 !important; color:#6b7280 !important;
  cursor:pointer; border-bottom:2.5px solid transparent !important; transition:color .15s,border-color .15s;
}
.kte-modal .kte-left-tab.is-active{ color:#7c3aed !important; border-bottom-color:#7c3aed !important; }

/* Ekle kartları — mockup grid stili */
.kte-modal .kte-add-btn{
  border-radius:14px !important; border:1px solid #eceef2 !important;
  background:#fff !important; box-shadow:0 1px 3px rgba(16,24,40,.05) !important;
  transition:transform .14s, box-shadow .15s, border-color .15s !important;
}
.kte-modal .kte-add-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(16,24,40,.10) !important; border-color:#ddd6fe !important; }

/* Özellikler paneli — bölümler kart, başlık net */
.kte-modal #kte-right-panel{ background:#fff !important; }
.kte-modal .kte-ps label,.kte-modal .kte-ps .kte-fld-label{
  font-size:11.5px !important; font-weight:600 !important; color:#6b7280 !important;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px !important; display:block;
}
/* Slider'lar — değer etiketi sağda */
.kte-modal input[type=range]{ accent-color:#7c3aed; height:6px; }
.kte-modal .kte-ps .val,.kte-modal [id$="-val"]{ font-weight:650; color:#7c3aed; font-size:12px; }

/* Segmented hizalama — mockup'taki kapsül */
.kte-modal .kte-align-grp{ background:#f3f4f6 !important; border-radius:10px !important; padding:3px !important; }
.kte-modal .kte-align-btn.active{ background:#fff !important; color:#7c3aed !important; box-shadow:0 1px 3px rgba(0,0,0,.12) !important; }

/* ───────── MOBİL (≤860px): alt çekmece + alt navigasyon ───────── */
@media (max-width:860px){
  .kte-modal #kte-btn-save{ border-radius:10px !important; padding:10px 16px !important; }
  /* Sağ panel alttan çekmece (v46 mekanizması korunur, görünüm cilalı) */
  .kte-modal #kte-right-panel.kte-sheet-open{ box-shadow:0 -10px 40px rgba(16,24,40,.22) !important; }
  .kte-modal #kte-right-panel{ border-radius:18px 18px 0 0 !important; }
  /* Dokunma hedefleri büyük */
  .kte-modal .kte-add-btn{ min-height:84px; }
  .kte-modal .kte-ab,.kte-modal .kte-fbtn{ min-height:44px !important; }
  .kte-modal input[type=range]{ height:10px; }
}

/* ═══════════════════════════════════════════════════════════════
   v60 #7 — OTORİTER MOBİL KATMAN (referans mockup: tam ekran, canvas
   üstte, paneller alt çekmece, büyük dokunma hedefleri). En sonda = öncelik.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px){
  #kte-overlay{ padding:0 !important; }
  .kte-modal{ max-height:100vh !important; height:100vh !important; border-radius:0 !important; }
  .kte-body{ position:relative; }

  /* Canvas tam genişlik (fit-to-view JS ölçekler) */
  .kte-canvas-area{ flex:1 1 auto !important; min-width:0 !important; }
  .kte-canvas-wrap{ padding:10px !important; }

  /* Sol panel (Ekle/Katmanlar) → alt çekmece */
  .kte-modal .kte-left{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important; max-height:62vh !important; z-index:1000030 !important;
    transform:translateY(100%); transition:transform .25s ease;
    border-radius:18px 18px 0 0 !important; box-shadow:0 -10px 40px rgba(0,0,0,.25) !important;
    overflow-y:auto !important;
  }
  .kte-modal .kte-left.kte-is-open{ transform:translateY(0); }

  /* Sağ panel (Özellikler) → alt çekmece (display:none kuralını EZER) */
  .kte-modal .kte-right{
    display:flex !important; flex-direction:column !important;
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important; max-height:62vh !important; z-index:1000031 !important;
    transform:translateY(100%); transition:transform .25s ease;
    border-radius:18px 18px 0 0 !important; box-shadow:0 -10px 40px rgba(0,0,0,.25) !important;
    overflow-y:auto !important; background:#fff !important;
  }
  .kte-modal .kte-right.kte-is-open{ transform:translateY(0); }

  /* Çekmece arka planı (karartma) */
  .kte-drawer-bg{
    position:fixed !important; inset:0 !important; background:rgba(0,0,0,.4);
    z-index:1000029 !important; opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .kte-drawer-bg.kte-is-open{ opacity:1; pointer-events:auto; }

  /* Büyük dokunma hedefleri */
  .kte-modal .kte-ab, .kte-modal .kte-fbtn, .kte-modal .kte-add-btn,
  .kte-modal .kte-quick-actions button{ min-height:46px !important; font-size:14px !important; }
  .kte-modal input[type=range]{ height:12px !important; }
  /* Üst başlık kompakt */
  .kte-hdr{ height:46px !important; }
}

/* ═══ v66: "Tasarla" butonu — 10 stil. Eski .kte-pb-btn-primary kuralları !important
   kullandığı için BURASI da !important kullanır + kaynakta SONRA gelir → kazanır.
   Frontend butonu .kte-pb-btn-primary.kte-pbs-N (yüksek özgüllük), admin önizleme .kte-pbs-N. ═══ */
.kte-pbs-1,.kte-pbs-2,.kte-pbs-3,.kte-pbs-4,.kte-pbs-5,.kte-pbs-6,.kte-pbs-7,.kte-pbs-8,.kte-pbs-9,.kte-pbs-10{
  cursor:pointer !important; font-weight:700 !important; font-size:15px !important; padding:13px 22px !important;
  border:none !important; transition:all .18s ease !important; line-height:1.2 !important;
  display:inline-block !important; text-align:center !important; width:100% !important; box-shadow:none !important;
}
.kte-pbs-1 { background:var(--kbtn-bg) !important; color:var(--kbtn-fg) !important; border-radius:8px !important; }
.kte-pbs-1:hover { filter:brightness(.92); background:var(--kbtn-bg) !important; }
.kte-pbs-2 { background:linear-gradient(135deg,var(--kbtn-bg),color-mix(in srgb,var(--kbtn-bg) 60%,#000)) !important; color:var(--kbtn-fg) !important; border-radius:10px !important; }
.kte-pbs-2:hover { filter:brightness(1.08); }
.kte-pbs-3 { background:var(--kbtn-bg) !important; color:var(--kbtn-fg) !important; border-radius:999px !important; }
.kte-pbs-3:hover { filter:brightness(.92); transform:translateY(-1px); }
.kte-pbs-4 { background:transparent !important; color:var(--kbtn-bg) !important; border:2.5px solid var(--kbtn-bg) !important; border-radius:8px !important; }
.kte-pbs-4:hover { background:var(--kbtn-bg) !important; color:var(--kbtn-fg) !important; }
.kte-pbs-5 { background:var(--kbtn-bg) !important; color:var(--kbtn-fg) !important; border-radius:10px !important; box-shadow:0 8px 20px color-mix(in srgb,var(--kbtn-bg) 45%,transparent) !important; }
.kte-pbs-5:hover { transform:translateY(-2px); }
.kte-pbs-6 { background:var(--kbtn-bg) !important; color:var(--kbtn-fg) !important; border-radius:10px !important; box-shadow:0 5px 0 color-mix(in srgb,var(--kbtn-bg) 55%,#000) !important; }
.kte-pbs-6:active { transform:translateY(4px); }
.kte-pbs-7 { background:var(--kbtn-bg) !important; color:var(--kbtn-fg) !important; border-radius:10px !important; animation:ktebtnglow 1.8s ease-in-out infinite; }
@keyframes ktebtnglow{0%,100%{box-shadow:0 0 8px 1px color-mix(in srgb,var(--kbtn-bg) 50%,transparent);}50%{box-shadow:0 0 22px 5px color-mix(in srgb,var(--kbtn-bg) 65%,transparent);}}
.kte-pbs-8 { background:transparent !important; color:var(--kbtn-bg) !important; border-radius:0 !important; padding:10px 6px !important; border-bottom:2px solid transparent !important; width:auto !important; }
.kte-pbs-8:hover { border-bottom-color:var(--kbtn-bg) !important; }
.kte-pbs-9 { background:var(--kbtn-bg) !important; color:var(--kbtn-fg) !important; border-radius:0 !important; text-transform:uppercase; letter-spacing:.5px; }
.kte-pbs-9:hover { filter:brightness(.9); }
.kte-pbs-10 { background:linear-gradient(270deg,var(--kbtn-bg),color-mix(in srgb,var(--kbtn-bg) 55%,#000),var(--kbtn-bg)) !important; background-size:200% 200% !important; color:var(--kbtn-fg) !important; border-radius:10px !important; animation:ktebtnshift 3s ease infinite; }
@keyframes ktebtnshift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* ═══ v69: Hover'da ZIT RENK (dolgu↔yazı yer değiştirir) — aynı görünüme dönmez ═══ */
.kte-pbs-1:hover,.kte-pbs-2:hover,.kte-pbs-3:hover,.kte-pbs-5:hover,.kte-pbs-6:hover,
.kte-pbs-7:hover,.kte-pbs-9:hover,.kte-pbs-10:hover{
  background:var(--kbtn-fg) !important;
  color:var(--kbtn-bg) !important;
  box-shadow:inset 0 0 0 2px var(--kbtn-bg) !important;
  filter:none !important;
}
/* Çerçeveli (4): zaten dolgu var → hover'da ters çevir (boş çerçeve) */
.kte-pbs-4:hover{ background:transparent !important; color:var(--kbtn-bg) !important; }
/* Minimal (8): hover'da zıt arka plan */
.kte-pbs-8:hover{ background:var(--kbtn-bg) !important; color:var(--kbtn-fg) !important; border-bottom-color:transparent !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v72 — PREMIUM SaaS YENİDEN TASARIM KATMANI (Canva/Figma/Adobe Express ruhu)
   Renkler: primary #6D4AFF, bg #F8F9FC, kart #fff, kenar #E6E8EF, metin #1E2430
   ═══════════════════════════════════════════════════════════════════════ */
#kte-overlay{
  --k-primary:#6D4AFF; --k-primary-2:#8B5CFF; --k-bg:#F8F9FC; --k-card:#FFFFFF;
  --k-border:#E6E8EF; --k-text:#1E2430; --k-muted:#6B7280; --k-radius:12px;
  --k-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --k-shadow-lg:0 12px 32px rgba(16,24,40,.12);
}
#kte-overlay .kte-modal{ background:var(--k-bg) !important; border-radius:16px !important; box-shadow:var(--k-shadow-lg) !important; color:var(--k-text); }
#kte-overlay .kte-body{ background:var(--k-bg) !important; gap:0; }

/* ─── Paneller: beyaz, ferah, yumuşak ─── */
#kte-overlay .kte-left, #kte-overlay .kte-right{
  background:var(--k-card) !important; border-color:var(--k-border) !important;
}
#kte-overlay .kte-left{ width:280px !important; border-right:1px solid var(--k-border) !important; }

/* ─── Sol "Ekle" kartları: büyük, modern ─── */
#kte-overlay .kte-add-grid{ grid-template-columns:1fr !important; gap:9px !important; }
#kte-overlay .kte-add-btn{
  display:flex !important; flex-direction:row !important; align-items:center !important;
  gap:12px !important; text-align:left !important; padding:13px 14px !important;
  background:var(--k-card) !important; border:1px solid var(--k-border) !important;
  border-radius:var(--k-radius) !important; box-shadow:var(--k-shadow) !important;
  transition:all .15s ease !important; min-height:auto !important; cursor:pointer;
}
#kte-overlay .kte-add-btn:hover{ border-color:var(--k-primary) !important; box-shadow:0 4px 14px rgba(109,74,255,.16) !important; transform:translateY(-1px); }
#kte-overlay .kte-add-icon{ font-size:22px !important; width:42px !important; height:42px !important; display:flex !important; align-items:center; justify-content:center; background:#F3F0FF !important; border-radius:10px !important; flex-shrink:0; margin:0 !important; }
#kte-overlay .kte-add-label{ font-weight:700 !important; font-size:13.5px !important; color:var(--k-text) !important; display:block; }
#kte-overlay .kte-add-sub{ font-size:11px !important; color:var(--k-muted) !important; display:block; margin-top:1px; }

/* ─── Adım başlıkları ─── */
#kte-overlay .kte-step-hdr{ border-radius:10px; }
#kte-overlay .kte-step-num{ background:var(--k-primary) !important; }
#kte-overlay .kte-step-title{ color:var(--k-text) !important; font-weight:700; }

/* ─── AYRI KATMANLAR PANELİ (ANA KURAL) ─── */
#kte-overlay .kte-layers-panel{
  width:250px; flex-shrink:0; background:var(--k-card);
  border-left:1px solid var(--k-border); border-right:1px solid var(--k-border);
  display:flex; flex-direction:column; overflow:hidden;
}
#kte-overlay .kte-lp-toggle{ display:none; }
#kte-overlay .kte-lp-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--k-border); }
#kte-overlay .kte-lp-title{ font-weight:700; font-size:14px; color:var(--k-text); }
#kte-overlay .kte-lp-count{ background:#F3F0FF; color:var(--k-primary); font-weight:700; font-size:11px; padding:2px 9px; border-radius:99px; }
#kte-overlay .kte-lp-body{ flex:1; overflow-y:auto; padding:12px; }
#kte-overlay .kte-lp-hint{ font-size:11px; color:var(--k-muted); margin:0 0 10px; }

/* Katman kartları */
#kte-overlay .kte-layers-wrap .kte-layer,
#kte-overlay #kte-layers > *{ border-radius:10px !important; }
#kte-overlay #kte-layers .kte-layer.sel,
#kte-overlay #kte-layers .is-selected{ background:#F3F0FF !important; border-color:var(--k-primary) !important; box-shadow:inset 0 0 0 1.5px var(--k-primary) !important; }

/* ─── Sağ "Özellikler" paneli ─── */
#kte-overlay .kte-right{ width:300px !important; border-left:1px solid var(--k-border) !important; }
#kte-overlay .kte-ps{ background:var(--k-card); }
#kte-overlay .kte-pr, #kte-overlay .kte-ps .kte-card{ background:var(--k-card); border:1px solid var(--k-border); border-radius:var(--k-radius); box-shadow:var(--k-shadow); padding:12px; margin-bottom:10px; }

/* ─── Form alanları ─── */
#kte-overlay input[type=text], #kte-overlay input[type=number], #kte-overlay select, #kte-overlay textarea{
  border:1px solid var(--k-border) !important; border-radius:9px !important; padding:8px 10px !important;
  font-size:13px !important; background:#fff !important; color:var(--k-text) !important; transition:border-color .15s,box-shadow .15s;
}
#kte-overlay input:focus, #kte-overlay select:focus, #kte-overlay textarea:focus{ border-color:var(--k-primary) !important; box-shadow:0 0 0 3px rgba(109,74,255,.13) !important; outline:none !important; }

/* ─── Butonlar ─── */
#kte-overlay .kte-ab{ border-radius:9px !important; border:1px solid var(--k-border) !important; background:#fff !important; color:var(--k-text) !important; font-weight:600 !important; }
#kte-overlay .kte-ab:hover{ border-color:var(--k-primary) !important; color:var(--k-primary) !important; }
#kte-overlay #kte-btn-save{ background:var(--k-primary) !important; border:none !important; border-radius:10px !important; font-weight:700 !important; box-shadow:0 4px 14px rgba(109,74,255,.3) !important; }
#kte-overlay #kte-btn-save:hover{ background:#5b3ce0 !important; }

/* ─── Canvas alanı ─── */
#kte-overlay .kte-canvas-area{ background:var(--k-bg) !important; }
#kte-overlay .kte-canvas-wrap{ background:var(--k-bg) !important; }

/* ─── En×Boy göstergesi (mor tema) ─── */
#kte-overlay #kte-dim-readout{ background:#F3F0FF !important; border-color:#E5DEFF !important; color:var(--k-primary) !important; border-radius:10px !important; }

/* ═══ Mobil: 3 sekme (Ekle/Katmanlar/Özellikler) — Layers paneli de çekmece ═══ */
@media (max-width:680px){
  #kte-overlay .kte-layers-panel{
    position:fixed !important; left:0; right:0; bottom:0; width:100% !important;
    max-height:62vh; z-index:1000031; transform:translateY(100%); transition:transform .25s ease;
    border-radius:18px 18px 0 0 !important; box-shadow:0 -10px 40px rgba(0,0,0,.25) !important;
  }
  #kte-overlay .kte-layers-panel.kte-is-open{ transform:translateY(0); }
}

/* ═══ v74 Faz 2: Floating toolbar (obje seçilince canvas üstünde) ═══ */
#kte-overlay .kte-canvas-wrap{ position:relative; }
#kte-overlay .kte-floating-tb{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; z-index:40;
  background:#fff; border:1px solid var(--k-border,#E6E8EF); border-radius:12px;
  padding:5px 7px; box-shadow:0 8px 24px rgba(16,24,40,.16);
}
#kte-overlay .kte-floating-tb button{
  width:34px; height:34px; border:none; background:transparent; border-radius:8px;
  font-size:15px; cursor:pointer; color:#1E2430; display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}
#kte-overlay .kte-floating-tb button:hover{ background:#F3F0FF; color:#6D4AFF; }
#kte-overlay .kte-floating-tb .kte-ftb-del:hover{ background:#fee2e2; color:#dc2626; }
#kte-overlay .kte-floating-tb .kte-ftb-sep{ width:1px; height:20px; background:var(--k-border,#E6E8EF); margin:0 3px; }
@media (max-width:680px){
  #kte-overlay .kte-floating-tb{ top:6px; padding:4px 5px; }
  #kte-overlay .kte-floating-tb button{ width:40px; height:40px; font-size:16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v75 — FAZ 4/5/6 + ŞABLON MODALI (yalnız UI/UX; motor/HTML mantığı değişmez)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── FAZ 4: Özellik paneli — gruplu kart görünümü ─── */
#kte-overlay .kte-ps{ padding:14px !important; }
#kte-overlay .kte-ps .kte-pr{
  background:#fff; border:1px solid var(--k-border,#E6E8EF); border-radius:12px;
  padding:11px 12px; margin-bottom:10px; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
#kte-overlay .kte-ps .kte-pr > label{
  display:block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:#6B7280; margin-bottom:6px;
}
#kte-overlay .kte-ps .kte-pr small{ text-transform:none; font-weight:500; color:#9aa1af; }
/* Konum satırı (X/Y/W/H) yatay grid */
#kte-overlay .kte-ps .kte-pr.kte-pr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#kte-overlay .kte-ps .kte-pr.kte-pr-grid > label{ grid-column:1/-1; }

/* ─── FAZ 5: Mobil — dokunmatik hedefler + alt nav cilası ─── */
@media (max-width:680px){
  #kte-overlay .kte-mob-bottomnav{
    position:fixed; left:0; right:0; bottom:0; z-index:1000040; display:flex;
    background:#fff; border-top:1px solid var(--k-border,#E6E8EF);
    box-shadow:0 -4px 20px rgba(16,24,40,.10); padding:4px env(safe-area-inset-right,4px) calc(env(safe-area-inset-bottom,0px) + 4px) env(safe-area-inset-left,4px);
  }
  #kte-overlay .kte-mob-bottomnav button{
    flex:1; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; border:none; background:transparent; font-size:10px; font-weight:600; color:#6B7280; cursor:pointer; border-radius:10px;
  }
  #kte-overlay .kte-mob-bottomnav button .ico{ font-size:19px; }
  #kte-overlay .kte-mob-bottomnav button.is-active{ color:var(--k-primary,#6D4AFF); background:#F3F0FF; }
  #kte-overlay .kte-mob-bottomnav button.is-cta{ color:#fff; background:var(--k-primary,#6D4AFF); margin:3px; border-radius:12px; }
  /* Tüm dokunmatik kontroller min 44px */
  #kte-overlay .kte-add-btn, #kte-overlay .kte-ab, #kte-overlay .kte-fbtn,
  #kte-overlay .kte-canvas-ctrls button{ min-height:44px !important; }
  #kte-overlay .kte-canvas-ctrls button{ min-width:44px; }
  /* Alt nav için canvas altına boşluk */
  #kte-overlay .kte-canvas-area{ padding-bottom:60px; }
}

/* ─── FAZ 6: Erişilebilirlik — net odak halkaları ─── */
#kte-overlay button:focus-visible,
#kte-overlay input:focus-visible,
#kte-overlay select:focus-visible,
#kte-overlay textarea:focus-visible,
#kte-overlay [tabindex]:focus-visible{
  outline:2px solid var(--k-primary,#6D4AFF) !important;
  outline-offset:2px !important; border-radius:8px;
}
#kte-overlay .kte-add-btn:focus-visible{ border-color:var(--k-primary,#6D4AFF) !important; }

/* ─── ŞABLON MODALI: yan floating panel yerine ortalı modal ─── */
#kte-overlay #kte-panel-tpls{
  position:fixed !important; top:50% !important; left:50% !important; right:auto !important;
  transform:translate(-50%,-50%) !important; width:min(680px,92vw) !important; max-height:80vh !important;
  background:#fff !important; border:1px solid var(--k-border,#E6E8EF) !important; border-radius:16px !important;
  box-shadow:0 24px 60px rgba(16,24,40,.28) !important; z-index:1000050 !important; overflow:hidden; display:flex; flex-direction:column;
}
#kte-overlay #kte-panel-tpls .kte-fp-hdr{
  font-size:16px !important; font-weight:700 !important; color:#1E2430 !important;
  padding:16px 18px !important; border-bottom:1px solid var(--k-border,#E6E8EF) !important;
}
#kte-overlay #kte-panel-tpls .kte-tpl-grid{
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important;
  gap:12px !important; padding:18px !important; overflow-y:auto !important;
}
#kte-overlay #kte-panel-tpls .kte-tpl-thumb{
  border:1px solid var(--k-border,#E6E8EF) !important; border-radius:12px !important;
  padding:10px !important; cursor:pointer; transition:all .15s; background:#fff;
}
#kte-overlay #kte-panel-tpls .kte-tpl-thumb:hover{ border-color:var(--k-primary,#6D4AFF) !important; box-shadow:0 6px 18px rgba(109,74,255,.15) !important; transform:translateY(-2px); }
/* Modal arkası karartma */
#kte-overlay #kte-panel-tpls::before{ content:none; }

/* ═══════════════════════════════════════════════════════════════════════
   v76 — Canvas/zoom/renk seçici cilası (kullanıcı geri bildirimi)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Zoom FAB: tasarımın üstünden al → SAĞ ALT köşe, şık ve kompakt ─── */
#kte-overlay .kte-zoom-fab{
  position:absolute !important; bottom:14px !important; right:14px !important;
  left:auto !important; top:auto !important; transform:none !important;
  display:flex !important; align-items:center; gap:2px;
  background:rgba(255,255,255,.96) !important; backdrop-filter:blur(6px);
  border:1px solid var(--k-border,#E6E8EF) !important; border-radius:11px !important;
  padding:4px 5px !important; box-shadow:0 4px 16px rgba(16,24,40,.14) !important; z-index:35 !important;
}
#kte-overlay .kte-zoom-fab button{
  width:30px !important; height:30px !important; border:none !important; background:transparent !important;
  color:#1E2430 !important; font-size:15px !important; cursor:pointer; border-radius:8px !important;
  display:flex; align-items:center; justify-content:center;
}
#kte-overlay .kte-zoom-fab button:hover{ background:#F3F0FF !important; color:#6D4AFF !important; }
#kte-overlay .kte-zoom-fab .kte-zoom-val{
  font-size:12px !important; font-weight:700 !important; color:#1E2430 !important;
  min-width:42px !important; text-align:center; padding:0 2px;
}

/* ─── Canvas alanı daha büyük & şık ─── */
#kte-overlay .kte-canvas-area{ flex:1 1 auto !important; min-width:0; }
#kte-overlay .kte-canvas-wrap{
  background:#F8F9FC !important; border-radius:14px; margin:8px;
  box-shadow:inset 0 0 0 1px var(--k-border,#E6E8EF);
  display:flex; align-items:center; justify-content:center; position:relative;
}
/* Panelleri biraz daralt → canvas'a daha çok yer */
#kte-overlay .kte-left{ width:262px !important; }
#kte-overlay .kte-layers-panel{ width:230px !important; }
#kte-overlay .kte-right{ width:290px !important; }

/* ─── Mürekkep rengi seçici: modern, derli toplu ─── */
#kte-overlay #kte-color-bar{ padding:8px 14px !important; }
#kte-overlay .kte-cbar-title{ font-size:11px !important; font-weight:700 !important; color:#6B7280 !important; text-transform:uppercase; letter-spacing:.4px; margin-right:10px; }
#kte-overlay .kte-cbar-list{ display:inline-flex !important; gap:7px !important; flex-wrap:wrap; vertical-align:middle; }
#kte-overlay .kte-cbar-swatch{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  padding:5px 11px 5px 7px !important; background:#fff !important;
  border:1.5px solid var(--k-border,#E6E8EF) !important; border-radius:999px !important;
  cursor:pointer; transition:all .14s; font-size:12px !important; font-weight:600 !important; color:#1E2430 !important;
}
#kte-overlay .kte-cbar-swatch:hover{ border-color:#c9c2f5 !important; }
#kte-overlay .kte-cbar-swatch.is-active{ border-color:var(--k-primary,#6D4AFF) !important; background:#F3F0FF !important; box-shadow:0 0 0 3px rgba(109,74,255,.12) !important; }
#kte-overlay .kte-cbar-sw-dot{ width:18px !important; height:18px !important; border-radius:50% !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); flex-shrink:0; }
#kte-overlay .kte-cbar-sw-lbl{ font-size:12px !important; }
#kte-overlay .kte-cbar-single{ display:inline-flex; align-items:center; gap:8px; }
#kte-overlay .kte-cbar-dot{ width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
#kte-overlay .kte-cbar-lbl{ font-size:12.5px; font-weight:600; color:#1E2430; }

/* ─── Floating toolbar: tasarımı kapatmasın diye canvas üst kenarına yapışsın ─── */
#kte-overlay .kte-floating-tb{ top:8px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v77 — A1 YERLEŞİM YENİDEN DÜZENİ (masaüstü ≥681px)
   Ekle → ÜST yatay · Katmanlar → SOL · Canvas → ORTA · Özellikler → SAĞ
   Mobil (≤680px) mevcut çekmece sistemiyle kalır.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:681px){
  #kte-overlay .kte-body{
    display:grid !important;
    grid-template-columns:210px 1fr 290px !important;
    grid-template-rows:auto 1fr !important;
    grid-template-areas:
      "add add add"
      "layers canvas props" !important;
    gap:0 !important; overflow:hidden;
  }
  #kte-overlay .kte-left{ grid-area:add !important; }
  #kte-overlay .kte-layers-panel{ grid-area:layers !important; }
  #kte-overlay .kte-canvas-area{ grid-area:canvas !important; }
  #kte-overlay .kte-right{ grid-area:props !important; }

  /* ─── ÜST: Ekle barı yatay & sade ─── */
  #kte-overlay .kte-left{
    width:auto !important; max-width:none !important; height:auto !important;
    border-right:none !important; border-bottom:1px solid var(--k-border,#E6E8EF) !important;
    display:flex !important; flex-direction:row !important; align-items:center !important;
    gap:8px !important; padding:8px 12px !important; overflow-x:auto !important; overflow-y:hidden !important;
  }
  #kte-overlay .kte-left .kte-welcome,
  #kte-overlay .kte-left .kte-panel-toggle,
  #kte-overlay .kte-left .kte-step-hdr,
  #kte-overlay .kte-left .kte-step-desc,
  #kte-overlay .kte-left .kte-step[data-step="tpl"],
  #kte-overlay .kte-left .kte-mini-sec{ display:none !important; }
  #kte-overlay .kte-left .kte-step,
  #kte-overlay .kte-left .kte-step-body{
    display:flex !important; flex-direction:row !important; align-items:center !important;
    gap:8px !important; margin:0 !important; padding:0 !important; background:transparent !important;
  }
  #kte-overlay .kte-left .kte-add-grid{
    display:flex !important; flex-direction:row !important; gap:8px !important; grid-template-columns:none !important;
  }
  /* Sade, küçük "chip" butonlar (göz yormasın) */
  #kte-overlay .kte-left .kte-add-btn{
    flex-direction:row !important; align-items:center !important; gap:7px !important;
    padding:7px 12px !important; min-height:38px !important; white-space:nowrap !important;
    border-radius:10px !important; box-shadow:none !important; background:#fff !important;
  }
  #kte-overlay .kte-left .kte-add-icon{
    width:24px !important; height:24px !important; font-size:15px !important;
    background:#F3F0FF !important; border-radius:7px !important;
  }
  #kte-overlay .kte-left .kte-add-label{ font-size:12.5px !important; font-weight:600 !important; }
  #kte-overlay .kte-left .kte-add-sub{ display:none !important; } /* alt açıklamayı gizle = sade */

  /* ─── SOL: Katmanlar paneli ─── */
  #kte-overlay .kte-layers-panel{
    width:auto !important; border-left:none !important; border-right:1px solid var(--k-border,#E6E8EF) !important;
  }
  /* ─── SAĞ: Özellikler ─── */
  #kte-overlay .kte-right{ width:auto !important; }
  /* ─── ORTA: Canvas en büyük alan ─── */
  #kte-overlay .kte-canvas-area{ min-width:0 !important; }
}

/* ─── Genel: butonları sadeleştir (her yerde daha az iri) ─── */
#kte-overlay .kte-ab{ padding:7px 10px !important; font-size:12px !important; }
#kte-overlay #kte-btn-save{ padding:9px 18px !important; font-size:13px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v78 — TEMİZLİK (E1): masaüstünde gereksiz mobil/eski öğeleri gizle
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:681px){
  /* "✕ Kapat" (mobil çekmece kapatma) — masaüstünde paneller hep açık → gereksiz */
  #kte-overlay .kte-drawer-close{ display:none !important; }
  /* ‹ › panel daralt/aç okları — yeni grid yerleşimde gereksiz */
  #kte-overlay .kte-panel-toggle{ display:none !important; }
  /* Alt "ÇOĞALT/SİL/AYARLAR" mobil barı — floating toolbar + paneller bunu karşılıyor */
  #kte-overlay .kte-quick-actions{ display:none !important; }
  /* Katmanlar panelinin mobil 📚 toggle'ı — masaüstünde gereksiz */
  #kte-overlay .kte-lp-toggle{ display:none !important; }
  /* Sağ panel başlığı tek ve net */
  #kte-overlay .kte-ptitle{
    font-size:13px !important; font-weight:700 !important; color:#1E2430 !important;
    padding:14px 16px !important; border-bottom:1px solid var(--k-border,#E6E8EF) !important; margin:0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v79 — Sadeleştirme: floating toolbar daha şık/az girişken + çift başlık temizliği
   ═══════════════════════════════════════════════════════════════════════ */
/* Enjekte edilen çift başlık kalıntısı varsa gizle */
#kte-overlay .kte-right-header{ display:none !important; }

/* Floating toolbar: küçük, yarı saydam, üzerine gelince netleşir → tasarımı az kapatır */
#kte-overlay .kte-floating-tb{
  top:10px !important; padding:3px 5px !important; gap:2px !important;
  opacity:.55; transition:opacity .15s ease; background:rgba(255,255,255,.97) !important;
}
#kte-overlay .kte-canvas-wrap:hover .kte-floating-tb,
#kte-overlay .kte-floating-tb:hover{ opacity:1; }
#kte-overlay .kte-floating-tb button{ width:30px !important; height:30px !important; font-size:14px !important; }
#kte-overlay .kte-floating-tb .kte-ftb-sep{ height:18px !important; }

/* Üst Ekle barı: "Klavye Kısayolları" chip'i daha sade, ayrık durmasın */
#kte-overlay .kte-left{ box-shadow:none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v80 — Mobil Özellikler paneli: OTORİTER alt-sheet (çakışan kuralları ezer)
   "Üstte kalıyor / kalkmıyor" sorununu çözer. En sonda = en yüksek öncelik.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  #kte-overlay .kte-right, #kte-overlay #kte-right-panel{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-height:72vh !important; display:flex !important; flex-direction:column !important;
    transform:translateY(100%) !important; transition:transform .26s ease !important;
    border-radius:18px 18px 0 0 !important; box-shadow:0 -10px 40px rgba(16,24,40,.22) !important;
    z-index:1000045 !important; overflow-y:auto !important; background:#fff !important; border-left:none !important;
  }
  #kte-overlay .kte-right.kte-sheet-open, #kte-overlay #kte-right-panel.kte-sheet-open,
  #kte-overlay .kte-right.kte-is-open, #kte-overlay #kte-right-panel.kte-is-open{ transform:translateY(0) !important; }
  /* Kapatma çubuğu: üstte sabit, büyük dokunma */
  #kte-overlay .kte-right .kte-drawer-close{
    display:block !important; position:sticky; top:0; z-index:2; width:100%; text-align:right;
    background:#fff; border:none; border-bottom:1px solid var(--k-border,#E6E8EF);
    padding:12px 16px; font-size:14px; font-weight:700; color:#6B7280; cursor:pointer;
  }
  /* Tutamak çizgisi (sheet hissi) */
  #kte-overlay .kte-right::before{
    content:''; position:sticky; top:0; display:block; width:42px; height:4px; border-radius:99px;
    background:#D7DAE3; margin:8px auto 2px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v81 — A2 (canvas) · B1 (şablon arama/kategori) · B2 (özellik grupları) · C2
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── B1: Şablon modalı arama + kategori çipleri ─── */
#kte-overlay .kte-tpl-filter{ padding:12px 16px 6px; border-bottom:1px solid var(--k-border,#E6E8EF); }
#kte-overlay .kte-tpl-search{
  width:100%; box-sizing:border-box; padding:9px 12px; font-size:13px;
  border:1px solid var(--k-border,#E6E8EF); border-radius:10px; outline:none; margin-bottom:9px; background:#F8F9FC;
}
#kte-overlay .kte-tpl-search:focus{ border-color:var(--k-primary,#6D4AFF); background:#fff; }
#kte-overlay .kte-tpl-cats{ display:flex; flex-wrap:wrap; gap:6px; }
#kte-overlay .kte-tpl-cat{
  padding:5px 11px; font-size:11.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--k-border,#E6E8EF); background:#fff; color:#6B7280; border-radius:999px; transition:all .13s;
}
#kte-overlay .kte-tpl-cat:hover{ border-color:#c9c2f5; }
#kte-overlay .kte-tpl-cat.is-active{ background:var(--k-primary,#6D4AFF); border-color:var(--k-primary,#6D4AFF); color:#fff; }

/* ─── A2: Canvas alanını büyüt + premium çerçeve ─── */
@media (min-width:681px){
  #kte-overlay .kte-canvas-area{ padding:0 !important; }
  #kte-overlay .kte-canvas-wrap{ margin:10px 14px !important; min-height:0; }
  /* Üstteki "38.5mm çap · Zoom" bilgi şeridi sade ─── */
  #kte-overlay .kte-canvas-info{ padding:8px 14px !important; font-size:12px !important; color:#6B7280 !important; }
}

/* ─── B2: Özellik paneli — alt-grupları görsel ayır ─── */
#kte-overlay .kte-ptitle2{
  font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.5px;
  color:var(--k-primary,#6D4AFF) !important; margin:14px 0 8px !important; padding-bottom:6px;
  border-bottom:1px dashed var(--k-border,#E6E8EF);
}
#kte-overlay .kte-adv-section{
  margin-top:10px !important; border:1px solid var(--k-border,#E6E8EF) !important;
  border-radius:12px !important; overflow:hidden; background:#fff;
}
#kte-overlay .kte-adv-toggle{ font-weight:600 !important; }

/* ─── C2: Erişilebilirlik — alt bar Grupla/Grup Boz görünür hizada ─── */
#kte-overlay #kte-foot-group, #kte-overlay #kte-foot-ungroup{ font-size:12px !important; padding:7px 11px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v82 — MOBİL çekmece sistemi: tutarlı, temiz alt-sheet (Ekle / Katman / Özellik)
   Üst üste binmeleri giderir, kibar ve kolay kullanım. En sonda = en yüksek öncelik.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* Üç çekmece de alttan açılan temiz sheet */
  #kte-overlay .kte-left, #kte-overlay #kte-left-panel,
  #kte-overlay .kte-layers-panel{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-height:74vh !important; box-sizing:border-box;
    transform:translateY(100%) !important; transition:transform .26s ease !important;
    border-radius:18px 18px 0 0 !important; box-shadow:0 -10px 40px rgba(16,24,40,.22) !important;
    z-index:1000045 !important; overflow-y:auto !important; background:#fff !important;
    border:none !important; padding:14px !important; display:block !important;
  }
  #kte-overlay .kte-left.kte-is-open, #kte-overlay #kte-left-panel.kte-is-open,
  #kte-overlay .kte-layers-panel.kte-is-open{ transform:translateY(0) !important; }

  /* Sheet tutamak çizgisi */
  #kte-overlay .kte-left::before, #kte-overlay .kte-layers-panel::before{
    content:''; display:block; width:42px; height:4px; border-radius:99px;
    background:#D7DAE3; margin:0 auto 12px;
  }
  /* Ekle araçları mobilde dikey, ferah kartlar (yatay üst-bar değil) */
  #kte-overlay .kte-left .kte-add-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
  #kte-overlay .kte-left .kte-add-btn{ flex-direction:column !important; align-items:center !important; text-align:center; min-height:84px !important; padding:14px 10px !important; gap:8px !important; }
  #kte-overlay .kte-left .kte-add-icon{ width:34px !important; height:34px !important; font-size:19px !important; }
  #kte-overlay .kte-left .kte-add-sub{ display:none !important; }
  #kte-overlay .kte-left .kte-step-hdr{ display:none !important; }
  #kte-overlay .kte-left .kte-step-body{ display:block !important; }

  /* Backdrop */
  #kte-overlay .kte-drawer-bg{ position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:1000044; display:none; }
  #kte-overlay .kte-drawer-bg.kte-is-open{ display:block; }

  /* Renkler üst barda hep görünür ve dokunmatik */
  #kte-overlay #kte-color-bar{ overflow-x:auto !important; }

  /* Mobilde boş-durum hızlı butonları gizle (Ekle ile karışmasın) */
  #kte-overlay #kte-ps-none .kte-quick-start{ display:none !important; }
  #kte-overlay #kte-ps-none p{ font-size:12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v83 — #1 Mürekkep rengi barı (şık) · #2 Canvas merkezleme
   ═══════════════════════════════════════════════════════════════════════ */

/* #1 — Mürekkep rengi barı: açık, premium, derli toplu */
#kte-overlay #kte-color-bar{
  background:#fff !important; border-bottom:1px solid var(--k-border,#E6E8EF) !important;
  border-top:none !important; min-height:50px !important; height:auto !important;
  padding:9px 16px !important; gap:12px !important; align-items:center !important;
}
#kte-overlay #kte-color-bar .kte-cbar-title,
#kte-overlay #kte-color-bar > span:first-child{
  color:#6B7280 !important; font-size:11px !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.5px;
}
#kte-overlay #kte-color-bar .kte-cbar-swatch{
  background:#fff !important; border:1.5px solid var(--k-border,#E6E8EF) !important;
  border-radius:999px !important; padding:5px 13px 5px 7px !important; gap:8px !important;
  font-size:12.5px !important; font-weight:600 !important; color:#1E2430 !important;
}
#kte-overlay #kte-color-bar .kte-cbar-swatch.is-active{
  border-color:var(--k-primary,#6D4AFF) !important; background:#F3F0FF !important;
  box-shadow:0 0 0 3px rgba(109,74,255,.12) !important;
}
#kte-overlay #kte-color-bar .kte-cbar-sw-dot{
  width:20px !important; height:20px !important; border-radius:50% !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14) !important;
}

/* #2 — Canvas merkezleme: tam ortalı, kırpılmadan, gerekirse kaydırılabilir */
#kte-overlay .kte-canvas-area{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
}
#kte-overlay .kte-canvas-wrap{
  display:flex !important; align-items:center !important; justify-content:center !important;
  overflow:auto !important; flex:1 1 auto !important; min-height:340px !important;
}
#kte-overlay .kte-canvas-wrap canvas{
  display:block !important; margin:auto !important; max-width:100% !important; max-height:100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v85 — G2 Mobil son cila + G3 odak (renk swatch zaten ARIA aldı)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* Alt navigasyon üstünde içerik gizlenmesin */
  #kte-overlay .kte-footer{ padding-bottom:64px !important; }
  /* Sheet başlıkları net, dokunmatik kapatma rahat */
  #kte-overlay .kte-lp-head, #kte-overlay .kte-ptitle{
    font-size:15px !important; padding:14px 16px !important;
  }
  /* Renk barı mobilde yatay kaydırmalı, gizli kalmasın */
  #kte-overlay #kte-color-bar{ position:sticky; top:0; z-index:5; }
  /* Floating toolbar mobilde biraz daha büyük dokunma */
  #kte-overlay .kte-floating-tb button{ width:38px !important; height:38px !important; }
  /* Ekle kartları arası ferah */
  #kte-overlay .kte-left .kte-add-grid{ padding:2px 0 8px !important; }
}
/* G3: aktif renk swatch odak halkası belirgin */
#kte-overlay .kte-cbar-swatch:focus-visible{ outline:2px solid var(--k-primary,#6D4AFF) !important; outline-offset:2px; }

/* ═══════════════════════════════════════════════════════════════════════
   v88 — MOBİL ALT MENÜ: net ikon + her zaman görünür etiket + belirgin aktif
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  #kte-overlay .kte-mob-bottomnav{
    display:flex !important; gap:2px !important;
    padding:6px 4px calc(env(safe-area-inset-bottom,0px) + 6px) !important;
    background:#fff !important; border-top:1px solid var(--k-border,#E6E8EF) !important;
    box-shadow:0 -6px 24px rgba(16,24,40,.12) !important;
  }
  #kte-overlay .kte-mob-bottomnav button{
    flex:1 1 0 !important; min-height:58px !important;
    display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important; gap:3px !important;
    border:none !important; background:transparent !important; border-radius:12px !important;
    color:#6B7280 !important; cursor:pointer; padding:6px 2px !important;
  }
  #kte-overlay .kte-mob-bottomnav button .ico{
    font-size:22px !important; line-height:1 !important; display:block !important;
  }
  #kte-overlay .kte-mob-bottomnav button .lbl{
    font-size:11px !important; font-weight:700 !important; line-height:1.1 !important;
    display:block !important; white-space:nowrap !important; letter-spacing:.1px;
  }
  /* Aktif sekme: belirgin mor zemin + renk */
  #kte-overlay .kte-mob-bottomnav button.is-active{
    background:#F0ECFF !important; color:var(--k-primary,#6D4AFF) !important;
  }
  /* Kaydet = mor dolu CTA, net dursun */
  #kte-overlay .kte-mob-bottomnav button.is-cta{
    background:var(--k-primary,#6D4AFF) !important; color:#fff !important;
    margin:0 2px !important; box-shadow:0 4px 12px rgba(109,74,255,.35) !important;
  }
  #kte-overlay .kte-mob-bottomnav button.is-cta .lbl{ font-weight:800 !important; }

  /* Açılan çekmecelere NET başlık (hangi panel olduğu belli olsun) */
  #kte-overlay .kte-left::before{
    content:'➕  İçerik Ekle' !important; display:block !important;
    width:auto !important; height:auto !important; background:none !important;
    font-size:15px !important; font-weight:700 !important; color:#1E2430 !important; text-align:center !important;
    padding:0 0 12px !important; margin:0 0 10px !important;
    border-radius:0 !important; border-bottom:1px solid var(--k-border,#E6E8EF) !important;
  }
  /* Katmanlar ve Özellikler panellerinde başlık zaten var (.kte-lp-head / .kte-ptitle) — netleştir */
  #kte-overlay .kte-layers-panel .kte-lp-head,
  #kte-overlay .kte-right .kte-ptitle{
    font-size:15px !important; font-weight:700 !important; text-align:center !important;
    padding:2px 0 12px !important; border-bottom:1px solid var(--k-border,#E6E8EF) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v91 — #3 Mobil canvas merkezleme · #5 Mobil "Ekle" kartları net (ikon+etiket)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* #3: Canvas dikeyde ORTALA, alta düşmesin, etrafı kapanmasın */
  #kte-overlay .kte-canvas-area{
    display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    padding:8px 8px 64px !important; min-height:0 !important;
  }
  #kte-overlay .kte-canvas-wrap{
    margin:auto !important; width:100% !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  #kte-overlay .kte-canvas-wrap canvas{ margin:auto !important; }

  /* #5: "Ekle" kartlarında ETİKET GÖRÜNSÜN + net büyük ikon */
  #kte-overlay .kte-left .kte-add-btn{
    display:flex !important; flex-direction:column !important; align-items:center !important;
    justify-content:center !important; gap:8px !important; text-align:center !important;
    min-height:90px !important; padding:14px 8px !important;
    border:1px solid var(--k-border,#E6E8EF) !important; border-radius:14px !important; background:#fff !important;
  }
  #kte-overlay .kte-left .kte-add-icon{
    width:38px !important; height:38px !important; font-size:20px !important;
    background:#F3F0FF !important; border-radius:10px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  #kte-overlay .kte-left .kte-add-label{
    display:block !important; font-size:12.5px !important; font-weight:700 !important;
    color:#1E2430 !important; line-height:1.25 !important; white-space:normal !important;
  }
  #kte-overlay .kte-left .kte-add-sub{ display:none !important; }
  /* Kart köşesindeki "+" rozetini gizle (kafa karıştırıyordu) */
  #kte-overlay .kte-left .kte-add-btn::after{ display:none !important; content:none !important; }
  #kte-overlay .kte-left .kte-add-btn .kte-add-plus,
  #kte-overlay .kte-left .kte-add-btn .kte-add-badge{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v92 — Mobil İndir menüsü: footer gizli olsa bile ORTADA görünür popup
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* İndir menüsü açıkken (inline display:block) ekran ortasında sabit popup */
  #kte-overlay #kte-dl-menu[style*="block"]{
    position:fixed !important; left:50% !important; bottom:auto !important; top:50% !important;
    transform:translate(-50%,-50%) !important; margin:0 !important;
    width:min(280px,86vw) !important; min-width:0 !important;
    border-radius:16px !important; box-shadow:0 24px 60px rgba(16,24,40,.3) !important;
    z-index:1000060 !important; padding:10px !important;
  }
  #kte-overlay #kte-dl-menu[style*="block"] .kte-dl-item{
    min-height:48px !important; font-size:15px !important; padding:12px 14px !important;
  }
  /* Footer mobilde gizliyse bile dl-wrap'in görünür kalması için */
  #kte-overlay #kte-dl-wrap{ position:static !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v94 — #4+#6: Kanvasın altını kaplayan ÇOĞALT/SİL/AYARLAR barını kaldır.
   Bu bar (position:fixed; bottom:56px) alttaki objelerin (yıldız vb.) üstüne
   binip hem görünümü engelliyor hem de tıklamayı yutuyordu. Aynı işlevler
   floating context toolbar (Çoğalt/Sil/Ayarlar ikonları) + sağ panelde mevcut.
   ═══════════════════════════════════════════════════════════════════════ */
.kte-modal .kte-quick-actions,
#kte-overlay .kte-quick-actions{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v99 — MOBİL SaaS YENİLEME (mockup baz): viewport lock, canvas header altında,
   50vh bottom-sheet, yüzen zoom kaldırma, RENK butonu, 6'lı nav.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* 1) Viewport lock — modal tam ekran, header→canvas→nav dikey akış, ÜST BOŞLUK YOK */
  #kte-overlay .kte-modal{
    position:fixed !important; inset:0 !important; width:100% !important; height:100dvh !important;
    max-width:none !important; max-height:none !important; border-radius:0 !important;
    display:flex !important; flex-direction:column !important; overflow:hidden !important; margin:0 !important;
  }
  #kte-overlay .kte-hdr{ flex:0 0 auto !important; }
  /* Canvas header'ın HEMEN altında, kalan alanı doldurur, dikey ortalı */
  #kte-overlay .kte-canvas-area{
    flex:1 1 auto !important; min-height:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    padding:6px 6px 70px !important; background:#eef0f4 !important;
  }
  #kte-overlay .kte-canvas-wrap{
    margin:auto !important; display:flex !important; align-items:center !important; justify-content:center !important;
    max-width:100% !important; max-height:100% !important;
  }
  /* 2) Grafik oranı korunur — canvas alana sığar, basık/elips OLMAZ */
  #kte-overlay .kte-canvas-wrap canvas{
    max-width:96vw !important; max-height:100% !important; width:auto !important; height:auto !important;
    object-fit:contain !important; margin:auto !important;
  }
  /* 3) Yüzen zoom kontrollerini kaldır (grafiği kapatıyordu) — pinch-zoom arka planda kalır */
  #kte-overlay .kte-zoom-fab{ display:none !important; }
  #kte-overlay .kte-canvas-ctrls{ display:none !important; }

  /* Üstteki ikincil GERİ/İLERİ barı ve gereksiz boşlukları sıkıştır */
  #kte-overlay .kte-toolbar-secondary, #kte-overlay .kte-subbar{ display:none !important; }

  /* 6'lı alt nav — ferah, parmak dostu (≥44px), Türkçe etiketli */
  #kte-overlay .kte-mob-bottomnav{
    position:fixed !important; left:0; right:0; bottom:0; z-index:1000040 !important;
    display:flex !important; justify-content:space-around !important; align-items:stretch !important;
    background:#fff !important; border-top:1px solid #E6E8EF !important; padding:4px 2px env(safe-area-inset-bottom) !important;
    box-shadow:0 -4px 16px rgba(16,24,40,.06) !important;
  }
  #kte-overlay .kte-mob-bottomnav button{
    flex:1 1 0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
    gap:2px !important; min-height:52px !important; background:transparent !important; border:0 !important;
    color:#5A6072 !important; font-size:10.5px !important; font-weight:600 !important; padding:4px 2px !important;
  }
  #kte-overlay .kte-mob-bottomnav button .ico{ font-size:19px !important; line-height:1 !important; }
  #kte-overlay .kte-mob-bottomnav button.is-active{ color:#6D4AFF !important; }
  #kte-overlay .kte-mob-bottomnav button.is-active .ico{ filter:none !important; }
  #kte-overlay .kte-mob-bottomnav button.is-cta{ color:#6D4AFF !important; }
  /* RENK ikonu: seçili mürekkep rengini gösteren yuvarlak nokta */
  #kte-overlay .kte-mnav-color-dot{
    width:19px !important; height:19px !important; border-radius:50% !important; display:inline-block !important;
    background:var(--kte-ink,#1E3A8A) !important; border:2px solid #fff !important; box-shadow:0 0 0 1px #CBD2E0 !important;
  }

  /* 4) BOTTOM-SHEET — tam genişlik, 50vh, alttan yukarı, üstte tutamaç, objeyi kapatmaz */
  #kte-overlay .kte-right.kte-sheet-open,
  #kte-overlay .kte-left.kte-is-open,
  #kte-overlay .kte-layers-panel.kte-is-open,
  #kte-overlay #kte-color-bar.kte-color-sheet-open{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:none !important; height:auto !important; max-height:50vh !important;
    border-radius:18px 18px 0 0 !important; background:#fff !important; z-index:1000050 !important;
    box-shadow:0 -16px 48px rgba(16,24,40,.22) !important; overflow-y:auto !important;
    padding:18px 16px calc(64px + env(safe-area-inset-bottom)) !important;
    transform:translateY(0) !important; animation:kteSheetUp .22s ease both !important;
  }
  @keyframes kteSheetUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
  /* Tutamaç (drag handle) */
  #kte-overlay .kte-right.kte-sheet-open::before,
  #kte-overlay .kte-left.kte-is-open::before,
  #kte-overlay .kte-layers-panel.kte-is-open::before,
  #kte-overlay #kte-color-bar.kte-color-sheet-open::before{
    content:'' !important; position:sticky !important; top:0 !important; display:block !important;
    width:40px !important; height:4px !important; margin:-6px auto 12px !important; border-radius:99px !important; background:#D7DBE6 !important;
  }
  /* Panel içi girdiler parmak dostu (≥44px) */
  #kte-overlay .kte-right.kte-sheet-open input,
  #kte-overlay .kte-right.kte-sheet-open select,
  #kte-overlay .kte-right.kte-sheet-open .kte-prop-row > *{ min-height:44px !important; font-size:15px !important; }

  /* Renk bottom-sheet: swatch'lar büyük dokunmatik */
  #kte-overlay #kte-color-bar.kte-color-sheet-open .kte-cbar-swatch{ min-height:48px !important; font-size:15px !important; }
  #kte-overlay #kte-color-bar.kte-color-sheet-open .kte-cbar-list{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; }

  /* Backdrop */
  #kte-overlay .kte-drawer-bg.kte-is-open{ display:block !important; position:fixed !important; inset:0 !important; background:rgba(16,24,40,.38) !important; z-index:1000045 !important; }
}

/* v101 — Çizgi kalınlığı presetleri (İnce/Orta/Kalın) */
.kte-sw-preset{
  flex:1 1 0; padding:7px 4px; border:1px solid #CBD2E0; border-radius:7px; background:#fff;
  font-size:12px; font-weight:600; color:#475067; cursor:pointer; transition:all .15s;
}
.kte-sw-preset:hover{ border-color:#6D4AFF; color:#6D4AFF; }
.kte-sw-preset.is-active{ background:#6D4AFF; color:#fff; border-color:#6D4AFF; }
@media (max-width:680px){ #kte-overlay .kte-sw-preset{ min-height:44px; font-size:14px; } }

/* v104 — Parametrik şekil butonları */
.kte-pshape{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:10px 4px;border:1px solid #CBD2E0;border-radius:8px;background:#fff;
  font-size:11px;font-weight:600;color:#475067;cursor:pointer;transition:all .15s;min-height:52px;
}
.kte-pshape:hover{ border-color:#6D4AFF;color:#6D4AFF;background:#F7F5FF; }
@media (max-width:680px){ #kte-overlay .kte-pshape{ min-height:60px;font-size:12px; } }

/* ═══════════════════════════════════════════════════════════════════════
   v107 — MOBİL DÜZEN KESİN DÜZELTME (eski çakışan kuralları ezer)
   Sorunlar: canvas üstünde boşluk (sol panel akış-içi), footer Grupla/Boz
   canvas'ı kaplıyor, ortalama. Çözüm: paneller akıştan çıkar (fixed),
   sadece canvas-area kalır; footer gizlenir.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  #kte-overlay .kte-modal{ display:flex !important; flex-direction:column !important; height:100dvh !important; }
  #kte-overlay .kte-body{ flex:1 1 auto !important; min-height:0 !important; display:block !important; position:relative !important; overflow:hidden !important; }

  /* Sol/sağ/katman panelleri AKIŞTAN ÇIKAR → canvas tüm alanı kaplar, üstte boşluk kalmaz */
  #kte-overlay .kte-left,
  #kte-overlay .kte-right,
  #kte-overlay .kte-layers-panel{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:none !important; height:auto !important; max-height:60vh !important;
    transform:translateY(110%) !important; transition:transform .25s ease !important;
    z-index:1000050 !important; border-radius:18px 18px 0 0 !important; border:0 !important;
    box-shadow:0 -16px 48px rgba(16,24,40,.22) !important; overflow-y:auto !important;
    padding:18px 14px calc(70px + env(safe-area-inset-bottom)) !important; background:#fff !important;
    display:flex !important; flex-direction:column !important;
  }
  /* Açık durumda yukarı kay */
  #kte-overlay .kte-left.kte-is-open,
  #kte-overlay .kte-left.kte-sheet-open,
  #kte-overlay .kte-right.kte-is-open,
  #kte-overlay .kte-right.kte-sheet-open,
  #kte-overlay .kte-layers-panel.kte-is-open,
  #kte-overlay .kte-layers-panel.kte-sheet-open{ transform:translateY(0) !important; max-height:55vh !important; }

  /* Canvas alanı: header'ın HEMEN altında, tüm alanı doldurur, ortalı, ÜST BOŞLUK YOK */
  #kte-overlay .kte-canvas-area{
    position:absolute !important; inset:0 !important; margin:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    padding:8px 8px 66px !important; background:#eef0f4 !important; overflow:hidden !important;
  }
  #kte-overlay .kte-canvas-wrap{ margin:auto !important; max-width:100% !important; max-height:100% !important; }
  #kte-overlay .kte-canvas-wrap canvas{ max-width:94vw !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; }

  /* Masaüstü footer'ı (Grupla/Boz/Gelişmiş/SVG/PDF/Kaydet) GİZLE — mobil nav onu değiştirir */
  #kte-overlay .kte-footer{ display:none !important; }
  /* Yüzen zoom + canvas kontrolleri gizli */
  #kte-overlay .kte-zoom-fab, #kte-overlay .kte-canvas-ctrls{ display:none !important; }
  /* Eski 650px yan-panel kuralını ez */
  #kte-overlay .kte-left{ width:100% !important; }
  #kte-overlay .kte-right{ display:flex !important; }
}

/* v107 — Mobilde panel içeriği her zaman görünür (collapse/gizleme ezilir), tıklanabilir */
@media (max-width:680px){
  #kte-overlay .kte-left.is-collapsed > *,
  #kte-overlay .kte-right.is-collapsed > *{ display:revert !important; }
  #kte-overlay .kte-panel-toggle{ display:none !important; }
  #kte-overlay .kte-left .kte-step[data-step="add"]{ display:block !important; }
  /* panel içi butonlar tam tıklanabilir */
  #kte-overlay .kte-left button, #kte-overlay .kte-right button{ pointer-events:auto !important; opacity:1 !important; }
  /* backdrop panelin ALTINDA kalsın */
  #kte-overlay .kte-drawer-bg.kte-is-open{ z-index:1000045 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v109 — RENK bölümü modern tasarım (chip swatch'lar, net aktif durum)
   ═══════════════════════════════════════════════════════════════════════ */
#kte-color-bar .kte-cbar-title{ font-size:12px; font-weight:700; color:#475067; display:block; margin-bottom:8px; }
#kte-color-bar .kte-cbar-list{ display:flex; flex-wrap:wrap; gap:8px; }
#kte-color-bar .kte-cbar-swatch{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 8px;
  border:1.5px solid #E2E6EF; border-radius:999px; background:#fff; cursor:pointer;
  font-size:12.5px; font-weight:600; color:#3A4254; transition:all .15s; line-height:1;
}
#kte-color-bar .kte-cbar-swatch:hover{ border-color:#B9C0D4; box-shadow:0 2px 8px rgba(16,24,40,.08); }
#kte-color-bar .kte-cbar-swatch.is-active{ border-color:#6D4AFF; background:#F6F4FF; box-shadow:0 0 0 3px rgba(109,74,255,.14); }
#kte-color-bar .kte-cbar-sw-dot{ width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); flex:0 0 auto; }
#kte-color-bar .kte-cbar-swatch.is-active .kte-cbar-sw-dot{ box-shadow:0 0 0 1px #6D4AFF; }
#kte-color-bar .kte-cbar-single{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; background:#F7F8FB; border-radius:10px; }
#kte-color-bar .kte-cbar-dot{ width:24px; height:24px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
#kte-color-bar .kte-cbar-lbl{ font-size:13px; font-weight:600; color:#3A4254; }

/* Mobil renk bottom-sheet: ferah grid, büyük dokunmatik */
@media (max-width:680px){
  #kte-overlay #kte-color-bar.kte-color-sheet-open .kte-cbar-title{ font-size:15px; margin-bottom:12px; }
  #kte-overlay #kte-color-bar.kte-color-sheet-open .kte-cbar-list{ gap:10px; }
  #kte-overlay #kte-color-bar.kte-color-sheet-open .kte-cbar-swatch{ flex:1 1 44%; justify-content:flex-start; padding:13px 14px; font-size:15px; border-radius:14px; }
  #kte-overlay #kte-color-bar.kte-color-sheet-open .kte-cbar-sw-dot{ width:26px; height:26px; }
}