/*
 * KTE UI MASTER — v226
 * TEK OTORİTE DOSYASI. Tüm eski UI blokları nötralize edildi.
 * Değiştirilmeyecek: editor.css'teki canvas/render/QR/font mantığı.
 * Değiştirilen: layout, renkler, spacing, mobil, masaüstü, butonlar.
 * Kaynak: public/css/kte-themes.css → --t-* token sistemi
 */

/* ═══════════════════════════════════════════════════════════
   TEMEL RESET — Her şeyin üstüne geçer
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay *,
body #kte-overlay *::before,
body #kte-overlay *::after {
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased !important;
}
body #kte-overlay {
  /* display: KASITLI OLARAK YOK — jQuery fadeIn/fadeOut kontrol eder (style="display:none" ilk değer) */
  position: fixed !important; inset: 0 !important;
  /* v227.2 KÖK DÜZELTME — "Mobilde Ekle üstünde ürün düzenleme linkinin ikonu kalıyor":
     Overlay z-index'i 99999 idi = WordPress admin barı ve bazı tema sticky/buton
     katmanlarıyla AYNI seviye → ana sayfadaki "Düzenle" linki/ikonu editörün
     ÜSTÜNDE görünüyordu. Overlay'i tüm ana-sayfa kromunun üstüne çıkarıyoruz
     (editör içi sihirbaz/modallar 2147483450'de KALDIĞI için onların altında). */
  z-index: 2147483000 !important;
  background: rgba(0,0,0,.5) !important;
  align-items: stretch !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif !important;
}
/* Overlay görünür olduğunda flex layout uygula */
body #kte-overlay:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL ÇERÇEVE
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay .kte-modal {
  display: flex !important; flex-direction: column !important;
  width: 100% !important; height: 100dvh !important;
  background: var(--t-bg, #EEF0F8) !important;
  overflow: hidden !important; position: relative !important;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay .kte-hdr {
  display: flex !important; align-items: center !important; gap: 8px !important;
  height: 54px !important; min-height: 54px !important; flex-shrink: 0 !important;
  padding: 0 14px !important;
  background: var(--t-header-bg, #16182A) !important;
  border-bottom: 1px solid var(--t-header-bdr, rgba(255,255,255,.07)) !important;
}
body #kte-overlay .kte-hdr-title,
body #kte-overlay .kte-hdr h2 {
  font-size: 13.5px !important; font-weight: 700 !important;
  color: var(--t-header-fg, #E8EBF5) !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; margin: 0 !important;
  flex: 0 0 auto !important;
}
/* Ölçü rozeti */
body #kte-overlay .kte-hdr #kte-size-badge,
body #kte-overlay .kte-hdr .kte-size-badge {
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--t-header-fg, #E8EBF5) !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 99px !important; padding: 3px 11px !important;
  white-space: nowrap !important;
}
/* Header butonları */
body #kte-overlay .kte-hbtn {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 33px !important; padding: 0 12px !important;
  font-size: 12px !important; font-weight: 600 !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--t-header-fg, #E8EBF5) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 8px !important; cursor: pointer !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
  transition: background .12s, border-color .12s !important;
}
body #kte-overlay .kte-hbtn:hover { background: rgba(255,255,255,.15) !important; }
body #kte-overlay .kte-hbtn:active { opacity: .85 !important; }
/* v228.80 — Geri/İleri/Temizle başlık butonlarını RENKLE belirginleştir (az belli oluyordu) */
body #kte-overlay #kte-btn-undo,
body #kte-overlay #kte-btn-redo{
  background: rgba(30,41,120,.55) !important; border-color: rgba(129,140,248,.7) !important; color:#ffffff !important;
}
body #kte-overlay #kte-btn-undo svg,
body #kte-overlay #kte-btn-redo svg{ stroke:#ffffff !important; }
body #kte-overlay #kte-btn-undo:hover,
body #kte-overlay #kte-btn-redo:hover{ background: rgba(79,70,229,.6) !important; }
body #kte-overlay #kte-btn-clear{
  background: rgba(120,20,20,.55) !important; border-color: rgba(248,113,113,.7) !important; color:#ffffff !important;
}
body #kte-overlay #kte-btn-clear svg{ stroke:#ffffff !important; }
body #kte-overlay #kte-btn-clear:hover{ background: rgba(220,38,38,.6) !important; }
body #kte-overlay .kte-hbtn-close {
  width: 33px !important; padding: 0 !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body #kte-overlay .kte-hbtn-close:hover { background: rgba(220,38,38,.3) !important; }
body #kte-overlay .kte-hdr-btns { margin-left: auto !important; display: flex !important; gap: 6px !important; align-items: center !important; }
/* Tema toggle */
body #kte-overlay #kte-theme-toggle { width: 33px !important; padding: 0 !important; border-radius: 50% !important; }

/* ═══════════════════════════════════════════════════════════
   ANA BODY SATIRI (Desktop)
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay .kte-body {
  display: flex !important; flex-direction: row !important;
  flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   SOL MENÜ — MASAÜSTÜ
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 681px) {
  body #kte-overlay .kte-left,
  body #kte-overlay #kte-left-panel {
    width: 214px !important; min-width: 214px !important; max-width: 214px !important;
    flex: 0 0 214px !important;
    background: var(--t-left-bg, #fff) !important;
    border-right: 1px solid var(--t-left-bdr, #E0E3EF) !important;
    display: flex !important; flex-direction: column !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    padding: 12px 10px !important; gap: 0 !important;
    position: static !important; transform: none !important;
    z-index: auto !important;
  }
  /* AI CTA */
  body #kte-overlay .kte-left .kte-ai-cta {
    display: flex !important; align-items: center !important; gap: 9px !important;
    width: 100% !important; padding: 10px 12px !important; margin: 0 0 10px !important;
    background: var(--t-accent-soft, rgba(79,70,229,.10)) !important;
    border: 1px solid var(--t-accent, #4F46E5) !important;
    border-radius: 11px !important; cursor: pointer !important;
    color: var(--t-accent, #4F46E5) !important; text-align: left !important;
    transition: background .12s !important;
  }
  body #kte-overlay .kte-left .kte-ai-cta:hover { background: rgba(79,70,229,.16) !important; }
  /* Grup etiketi */
  body #kte-overlay .kte-left .kte-grp-label {
    display: block !important; font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .06em !important;
    color: var(--t-text-p, #9CA3AF) !important; margin: 8px 2px 5px !important;
  }
  /* Araç grid — tek sütun liste */
  body #kte-overlay .kte-left .kte-add-grid,
  body #kte-overlay .kte-left .kte-step .kte-add-grid {
    display: flex !important; flex-direction: column !important;
    gap: 5px !important; width: 100% !important; padding: 0 !important; margin: 0 0 10px !important;
  }
  /* Araç butonu */
  body #kte-overlay .kte-left .kte-add-btn {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 10px !important;
    width: 100% !important; padding: 9px 11px !important;
    background: var(--t-surface, #fff) !important;
    border: 1px solid var(--t-border, #E0E3EF) !important;
    border-radius: 9px !important; cursor: pointer !important;
    text-align: left !important; color: var(--t-text, #111827) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
    transition: border-color .12s, background .12s, box-shadow .12s !important;
    position: static !important;
  }
  body #kte-overlay .kte-left .kte-add-btn::after { display: none !important; }
  body #kte-overlay .kte-left .kte-add-btn:hover {
    border-color: var(--t-accent, #4F46E5) !important;
    background: var(--t-surface-2, #F5F6FB) !important;
    box-shadow: 0 0 0 3px var(--t-accent-soft, rgba(79,70,229,.10)) !important;
  }
  body #kte-overlay .kte-left .kte-add-btn.kte-rail-on {
    border-color: var(--t-accent, #4F46E5) !important;
    background: var(--t-accent-soft, rgba(79,70,229,.08)) !important;
  }
  /* İkon kutusu */
  body #kte-overlay .kte-left .kte-add-icon {
    width: 32px !important; height: 32px !important; flex: 0 0 32px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: var(--t-accent-soft, rgba(79,70,229,.10)) !important;
    color: var(--t-accent, #4F46E5) !important;
    border-radius: 8px !important; font-size: 16px !important;
  }
  body #kte-overlay .kte-left .kte-add-icon svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; }
  /* Etiket */
  body #kte-overlay .kte-left .kte-add-label {
    font-size: 13px !important; font-weight: 700 !important;
    color: var(--t-text, #111827) !important;
    line-height: 1.2 !important; flex: 1 !important; white-space: normal !important;
  }
  body #kte-overlay .kte-left .kte-add-sub {
    font-size: 10px !important; font-weight: 500 !important;
    color: var(--t-text-p, #9CA3AF) !important; display: block !important;
  }
  /* Add step her zaman açık */
  body #kte-overlay .kte-left .kte-step[data-step="add"] { display: block !important; }
  body #kte-overlay .kte-left .kte-step[data-step="add"] .kte-step-body { display: block !important; padding: 0 !important; }
  body #kte-overlay .kte-left .kte-step[data-step="add"] > .kte-step-hdr,
  body #kte-overlay .kte-left .kte-step[data-step="add"] > .kte-step-toggle { display: none !important; }
  /* Renk butonu */
  body #kte-overlay .kte-left .kte-rail-color {
    display: flex !important; align-items: center !important; gap: 10px !important;
    width: 100% !important; padding: 10px 12px !important; margin-top: auto !important;
    background: var(--t-surface-2, #F5F6FB) !important;
    border: 1px solid var(--t-border, #E0E3EF) !important; border-radius: 9px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   CANVAS ALANI
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay .kte-canvas-area {
  flex: 1 1 0 !important; min-width: 0 !important;
  background: var(--t-canvas-bg, #D4D8E8) !important;
  display: flex !important; flex-direction: column !important;
  position: relative !important; overflow: hidden !important;
}
body #kte-overlay .kte-canvas-info {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 12px !important;
  padding: 7px 16px !important; flex-shrink: 0 !important;
  background: rgba(0,0,0,.18) !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  color: rgba(255,255,255,.85) !important;
}
body #kte-overlay .kte-canvas-wrap,
body #kte-overlay #kte-canvas-wrap {
  flex: 1 1 0 !important; overflow: auto !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; padding: 24px !important;
}
body #kte-overlay #kte-canvas-wrap-inner {
  background: #fff !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.20), 0 0 0 1px rgba(0,0,0,.10) !important;
  border-radius: 2px !important;
}
/* Zoom butonları */
body #kte-overlay .kte-canvas-ctrls {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  padding: 8px !important; flex-shrink: 0 !important;
}
body #kte-overlay .kte-canvas-ctrls button,
body #kte-overlay #kte-zoom-out, body #kte-overlay #kte-zoom-in, body #kte-overlay #kte-zoom-fit {
  height: 32px !important; padding: 0 14px !important;
  background: rgba(0,0,0,.25) !important; border: 1px solid rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.90) !important; border-radius: 8px !important;
  font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important;
}
body #kte-overlay .kte-canvas-ctrls button:hover { background: rgba(0,0,0,.40) !important; }

/* ═══════════════════════════════════════════════════════════
   SAĞ PANEL — MASAÜSTÜ
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 681px) {
  body #kte-overlay .kte-right,
  body #kte-overlay #kte-right-panel {
    width: 300px !important; min-width: 300px !important; max-width: 300px !important;
    flex: 0 0 300px !important;
    background: var(--t-right-bg, #fff) !important;
    border-left: 1px solid var(--t-right-bdr, #E0E3EF) !important;
    display: flex !important; flex-direction: column !important;
    /* v227.2 KÖK DÜZELTME — "Sağ özellikler paneli aşağı kaydırılamıyor":
       Eski kod dış paneli overflow:hidden yapıp kaydırmayı var olmayan bir iç
       sarmalayıcıya (.kte-right-inner) bırakıyordu → hiçbir şey kaymadı. Artık
       panelin KENDİSİ dikeyde kayar. */
    overflow-y: auto !important; overflow-x: hidden !important;
    position: static !important; transform: none !important;
  }
  body #kte-overlay .kte-right > .kte-ps-wrap,
  body #kte-overlay .kte-right-inner,
  body #kte-overlay .kte-right .kte-right-content {
    flex: 1 1 0 !important; overflow-y: auto !important;
    padding: 14px !important;
    background: var(--t-right-bg, #fff) !important;
  }
  /* Katmanlar paneli — sağ panelde üstte */
  body #kte-overlay .kte-layers-panel,
  body #kte-overlay #kte-layers-panel {
    width: auto !important; min-width: 0 !important; max-width: none !important;
    flex-shrink: 0 !important; order: -1 !important;
    background: var(--t-surface-2, #F5F6FB) !important;
    border-bottom: 1px solid var(--t-border, #E0E3EF) !important;
    border-left: none !important; border-right: none !important;
    display: flex !important; flex-direction: column !important;
    position: static !important; transform: none !important;
    overflow: hidden !important;
    transition: max-height .2s !important;
    max-height: 44px !important; /* Varsayılan: kapalı */
  }
  body #kte-overlay .kte-layers-panel.kte-is-open,
  body #kte-overlay #kte-layers-panel.kte-is-open {
    max-height: 200px !important;
  }
}
/* Katmanlar başlık satırı */
body #kte-overlay .kte-lp-head,
body #kte-overlay .kte-lp-toggle {
  display: flex !important; align-items: center !important; gap: 6px !important;
  padding: 10px 14px !important; flex-shrink: 0 !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  color: var(--t-text-m, #6B7280) !important;
  cursor: pointer !important; background: transparent !important;
  border: none !important; width: 100% !important; text-align: left !important;
}
body #kte-overlay .kte-lp-title { font-weight: 700 !important; color: var(--t-text, #111827) !important; flex: 1 !important; }
body #kte-overlay .kte-lp-count {
  background: var(--t-accent-soft, rgba(79,70,229,.10)) !important;
  color: var(--t-accent, #4F46E5) !important;
  border-radius: 99px !important; padding: 1px 8px !important;
  font-size: 10.5px !important; font-weight: 700 !important; margin-left: auto !important;
}
body #kte-overlay .kte-lp-body, body #kte-overlay .kte-lp-inner {
  overflow-y: auto !important; background: var(--t-surface, #fff) !important; padding: 6px !important;
}
/* Katman ögesi */
body #kte-overlay .kte-lp-item {
  display: flex !important; align-items: center !important; gap: 7px !important;
  padding: 6px 8px !important; border-radius: 7px !important;
  cursor: pointer !important; font-size: 12px !important;
  color: var(--t-text-2, #374151) !important; font-weight: 500 !important;
  transition: background .10s !important;
}
body #kte-overlay .kte-lp-item:hover { background: var(--t-surface-2, #F5F6FB) !important; }
body #kte-overlay .kte-lp-item.is-sel {
  background: var(--t-accent-soft, rgba(79,70,229,.10)) !important;
  color: var(--t-accent, #4F46E5) !important; font-weight: 700 !important;
}
/* Sağ panel tab bar */
body #kte-overlay .kte-right-tabs, body #kte-overlay .kte-sheet-head {
  display: flex !important; flex-shrink: 0 !important;
  background: var(--t-surface-2, #F5F6FB) !important;
  border-bottom: 1px solid var(--t-border, #E0E3EF) !important;
}
body #kte-overlay .kte-right-tabs .kte-tab-btn,
body #kte-overlay .kte-sheet-head .kte-tab-btn {
  flex: 1 !important; padding: 11px 4px !important;
  font-size: 11.5px !important; font-weight: 700 !important; text-align: center !important;
  color: var(--t-text-m, #6B7280) !important;
  border-bottom: 2px solid transparent !important; cursor: pointer !important;
  background: transparent !important; border-top: none !important;
  border-left: none !important; border-right: none !important;
  transition: color .12s, border-color .12s !important;
}
body #kte-overlay .kte-right-tabs .kte-tab-btn.is-active {
  color: var(--t-accent, #4F46E5) !important;
  border-bottom-color: var(--t-accent, #4F46E5) !important;
}
/* Özellik satırları */
body #kte-overlay .kte-ptitle,
body #kte-overlay .kte-ptitle2 {
  font-size: 10.5px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .05em !important;
  color: var(--t-text-p, #9CA3AF) !important; margin: 14px 0 6px !important;
  padding: 0 !important; display: flex !important; align-items: center !important; gap: 6px !important;
}
body #kte-overlay .kte-ptitle:first-child { margin-top: 0 !important; }
body #kte-overlay .kte-pr {
  display: flex !important; align-items: center !important;
  gap: 8px !important; margin-bottom: 8px !important;
  background: var(--t-input-bg, #F5F6FB) !important;
  border: 1px solid var(--t-border, #E0E3EF) !important;
  border-radius: 9px !important; padding: 8px 10px !important;
}
body #kte-overlay .kte-pr label {
  flex: 0 0 68px !important; font-size: 11px !important;
  font-weight: 600 !important; color: var(--t-text-m, #6B7280) !important; margin: 0 !important;
}
/* Hizalama butonları */
body #kte-overlay .kte-align-btn,
body #kte-overlay .kte-tool-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important;
  background: var(--t-surface-2, #F5F6FB) !important;
  border: 1px solid var(--t-border, #E0E3EF) !important;
  border-radius: 8px !important; color: var(--t-text-m, #6B7280) !important;
  cursor: pointer !important; font-size: 13px !important;
  transition: background .10s, color .10s, border-color .10s !important;
}
body #kte-overlay .kte-align-btn:hover { background: var(--t-accent-soft) !important; color: var(--t-accent) !important; border-color: var(--t-accent) !important; }
body #kte-overlay .kte-align-btn.active {
  background: var(--t-accent, #4F46E5) !important; color: #fff !important; border-color: var(--t-accent) !important;
}
/* v228 — METİN hizalama grubu (SOL/ORTA/SAĞ) METİN içerir; 34px kare kalıp
   yazıyı sıkıştırıyordu. Bu grup butonları esnek genişlikte, ferah ve tek
   satır olur (ikon-only .kte-tool-btn 34px kare kalır). */
body #kte-overlay .kte-align-grp{
  display:flex !important; gap:6px !important; flex:1 1 auto !important; min-width:0 !important;
}
body #kte-overlay .kte-align-grp .kte-align-btn{
  width:auto !important; height:auto !important; flex:1 1 0 !important; min-width:0 !important;
  min-height:36px !important; padding:7px 8px !important; gap:5px !important;
  font-size:12px !important; font-weight:600 !important; white-space:nowrap !important;
  border-radius:8px !important; line-height:1.1 !important;
}

/* ═══════════════════════════════════════════════════════════
   INPUT / SELECT / TEXTAREA / RANGE
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay .kte-if,
body #kte-overlay .kte-ic,
body #kte-overlay input[type="text"]:not(.kte-no-style),
body #kte-overlay input[type="number"]:not(.kte-no-style),
body #kte-overlay select:not(.kte-no-style),
body #kte-overlay textarea:not(.kte-no-style) {
  background: var(--t-input-bg, #F5F6FB) !important;
  border: 1px solid var(--t-input-bdr, #D8DCF0) !important;
  border-radius: 8px !important; color: var(--t-text, #111827) !important;
  font-size: 13px !important; padding: 7px 10px !important;
  width: 100% !important; outline: none !important;
  transition: border-color .12s, box-shadow .12s !important;
  -webkit-appearance: none !important; appearance: none !important;
}
body #kte-overlay .kte-if:focus,
body #kte-overlay .kte-ic:focus,
body #kte-overlay input[type="text"]:focus:not(.kte-no-style),
body #kte-overlay input[type="number"]:focus:not(.kte-no-style),
body #kte-overlay select:focus:not(.kte-no-style) {
  border-color: var(--t-accent, #4F46E5) !important;
  box-shadow: 0 0 0 3px var(--t-accent-soft, rgba(79,70,229,.10)) !important;
}
body #kte-overlay select:not(.kte-no-style) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important;
  padding-right: 28px !important; cursor: pointer !important;
}
/* Range/slider */
body #kte-overlay input[type="range"]:not(.kte-no-style) {
  -webkit-appearance: none !important; appearance: none !important;
  width: 100% !important; height: 5px !important;
  border-radius: 99px !important; cursor: pointer !important;
  background: var(--t-border, #E0E3EF) !important;
  background-image: linear-gradient(var(--t-accent,#4F46E5), var(--t-accent,#4F46E5)) !important;
  background-repeat: no-repeat !important;
  border: none !important; padding: 0 !important; outline: none !important;
  box-shadow: none !important;
}
body #kte-overlay input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important; width: 16px !important; height: 16px !important;
  background: #fff !important; border: 2.5px solid var(--t-accent,#4F46E5) !important;
  border-radius: 50% !important; box-shadow: 0 1px 4px rgba(0,0,0,.18) !important; cursor: pointer !important;
}
/* +/- Stepper */
body #kte-overlay .kte-stp { display: flex !important; align-items: center !important; gap: 6px !important; }
body #kte-overlay .kte-stp-b {
  flex: 0 0 28px !important; width: 28px !important; height: 28px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--t-surface-2,#F5F6FB) !important; border: 1px solid var(--t-border,#E0E3EF) !important;
  border-radius: 8px !important; color: var(--t-accent,#4F46E5) !important;
  font-size: 18px !important; font-weight: 600 !important; cursor: pointer !important; padding: 0 !important;
}
body #kte-overlay .kte-stp-b:hover { background: var(--t-accent-soft) !important; border-color: var(--t-accent) !important; }

/* ═══════════════════════════════════════════════════════════
   BİRİNCİL / İKİNCİL BUTONLAR
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay .kte-btn-primary,
body #kte-overlay #kte-btn-save,
body #kte-overlay .kte-save-btn,
body #kte-overlay #kte-btn-finalize {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  height: 40px !important; padding: 0 20px !important;
  background: var(--t-accent, #4F46E5) !important; color: #fff !important;
  border: none !important; border-radius: 11px !important;
  font-size: 13.5px !important; font-weight: 700 !important; cursor: pointer !important;
  box-shadow: 0 2px 8px var(--t-accent-soft, rgba(79,70,229,.30)) !important;
  transition: background .12s, transform .12s, box-shadow .12s !important;
}
body #kte-overlay .kte-btn-primary:hover,
body #kte-overlay #kte-btn-save:hover { background: var(--t-accent-hover,#4338CA) !important; transform: translateY(-1px) !important; }
body #kte-overlay .kte-btn-secondary {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  height: 36px !important; padding: 0 16px !important;
  background: var(--t-surface-2,#F5F6FB) !important; color: var(--t-text-2,#374151) !important;
  border: 1px solid var(--t-border,#E0E3EF) !important; border-radius: 11px !important;
  font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important;
  transition: background .12s, border-color .12s !important;
}
body #kte-overlay .kte-btn-secondary:hover { background: var(--t-surface-3,#ECEEF6) !important; }

/* ═══════════════════════════════════════════════════════════
   FOOTER — MASAÜSTÜ
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay .kte-footer {
  display: flex !important; align-items: center !important; gap: 8px !important;
  height: 52px !important; min-height: 52px !important; flex-shrink: 0 !important;
  padding: 0 14px !important;
  background: var(--t-footer-bg, #fff) !important;
  border-top: 1px solid var(--t-footer-bdr, #E0E3EF) !important;
}
body #kte-overlay .kte-footer-l, body #kte-overlay .kte-footer-c, body #kte-overlay .kte-footer-r {
  display: flex !important; align-items: center !important; gap: 6px !important;
}
body #kte-overlay .kte-footer-c { flex: 1 !important; justify-content: center !important; }
body #kte-overlay .kte-footer-r { margin-left: auto !important; }
body #kte-overlay .kte-fbtn {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 34px !important; padding: 0 12px !important;
  background: var(--t-surface-2,#F5F6FB) !important;
  color: var(--t-text-2,#374151) !important;
  border: 1px solid var(--t-border,#E0E3EF) !important;
  border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important;
  cursor: pointer !important; white-space: nowrap !important;
  transition: background .12s, border-color .12s !important;
}
body #kte-overlay .kte-fbtn:hover { background: var(--t-surface-3) !important; border-color: var(--t-border-strong) !important; }
body #kte-overlay .kte-fbtn-p,
body #kte-overlay .kte-fbtn-accent,
body #kte-overlay #kte-btn-save {
  background: var(--t-accent,#4F46E5) !important; color: #fff !important;
  border-color: var(--t-accent) !important; height: 38px !important; padding: 0 20px !important;
  font-size: 13px !important; border-radius: 11px !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.25) !important;
}
body #kte-overlay .kte-fbtn-p:hover { background: var(--t-accent-hover,#4338CA) !important; }

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay ::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
body #kte-overlay ::-webkit-scrollbar-track { background: transparent !important; }
body #kte-overlay ::-webkit-scrollbar-thumb { background: var(--t-border-strong,#C8CCDE) !important; border-radius: 99px !important; }

/* ═══════════════════════════════════════════════════════════
   TOAST / BİLDİRİMLER
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay .kte-toast {
  background: var(--t-surface,#fff) !important; border: 1px solid var(--t-border) !important;
  border-radius: 11px !important; box-shadow: 0 8px 32px rgba(0,0,0,.14) !important;
  color: var(--t-text) !important; font-size: 13px !important; font-weight: 600 !important;
  padding: 10px 16px !important;
}
body #kte-overlay .kte-toast-success { border-color: var(--t-success,#059669) !important; background: rgba(5,150,105,.06) !important; }
body #kte-overlay .kte-toast-error   { border-color: var(--t-danger,#DC2626) !important; background: rgba(220,38,38,.06) !important; }

/* ═══════════════════════════════════════════════════════════
   ━━━━━━━━━ MOBİL (≤680px) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* Header küçük */
  body #kte-overlay .kte-hdr { height: 48px !important; min-height: 48px !important; padding: 0 8px !important; gap: 4px !important; }
  body #kte-overlay .kte-hdr-title { font-size: 12px !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; flex: 1 1 auto !important; }
  body #kte-overlay #kte-ver-stamp { display: none !important; } /* sürüm damgası dar ekranda yer kaplamasın */
  /* v228.10 KÖK DÜZELTME — dar telefonlarda (≤414, özellikle 320/360) başlık
     butonları (Geri/İleri/Temizle) METİN etiketli olduğu için sığmıyor, sağa
     taşıp ekran dışına çıkıyordu (kapat/tema butonu görünmez oluyordu). Dar
     ekranda METNİ gizle, yalnız İKON kalsın; padding daralt → hepsi sığar. */
  body #kte-overlay .kte-hdr-btns { gap: 3px !important; flex-shrink: 0 !important; }
  body #kte-overlay .kte-hbtn { padding: 0 8px !important; font-size: 0 !important; gap: 0 !important; }
  body #kte-overlay .kte-hbtn svg { margin-right: 0 !important; }
  body #kte-overlay #kte-size-badge,
  body #kte-overlay .kte-size-badge { display: none !important; } /* ölçü rozeti başlıkta yer kaplamasın; zaten tuval bilgisinde var */
  /* Footer gizle — mobil nav bar yerine geçiyor */
  body #kte-overlay .kte-footer { display: none !important; }
  /* Canvas alanı — alt nav için boşluk */
  body #kte-overlay .kte-canvas-area {
    padding-bottom: 58px !important;
    flex: 1 1 0 !important; min-height: 0 !important;
  }
  /* Sol menü — gizli (drawer olarak açılıyor) */
  body #kte-overlay .kte-left,
  body #kte-overlay #kte-left-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 58px !important; top: auto !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: auto !important; max-height: 78dvh !important;
    flex: none !important;
    background: var(--t-surface, #fff) !important;
    border-top: 1px solid var(--t-border, #E0E3EF) !important;
    border-right: none !important; border-left: none !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.16) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    padding: 6px 14px 20px !important;
    transform: translateY(105%) !important;
    transition: transform .26s cubic-bezier(.32,.72,0,1) !important;
    z-index: 150 !important; display: block !important;
  }
  body #kte-overlay .kte-left::before {
    content: '' !important; display: block !important;
    width: 36px !important; height: 4px !important;
    background: var(--t-border-strong, #C8CCDE) !important;
    border-radius: 99px !important; margin: 6px auto 12px !important;
  }
  body #kte-overlay .kte-left.kte-is-open { transform: translateY(0) !important; }

  /* EKLE ToolGrid — 3 sütun */
  body #kte-overlay .kte-left .kte-add-grid,
  body #kte-overlay .kte-left .kte-step .kte-add-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 9px !important; width: 100% !important;
    padding: 0 !important; margin: 0 !important;
  }
  body #kte-overlay .kte-left .kte-add-btn {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 7px !important; padding: 14px 8px !important;
    background: var(--t-surface-2, #F5F6FB) !important;
    border: 1px solid var(--t-border, #E0E3EF) !important;
    border-radius: 13px !important; color: var(--t-text, #111827) !important;
    min-height: 82px !important; width: 100% !important;
    cursor: pointer !important; position: static !important;
    transition: background .10s, border-color .10s !important;
  }
  body #kte-overlay .kte-left .kte-add-btn::after { display: none !important; }
  body #kte-overlay .kte-left .kte-add-btn:hover {
    background: var(--t-accent-soft) !important; border-color: var(--t-accent) !important;
  }
  body #kte-overlay .kte-left .kte-add-icon {
    width: 38px !important; height: 38px !important; flex: 0 0 38px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: var(--t-accent-soft, rgba(79,70,229,.10)) !important;
    color: var(--t-accent, #4F46E5) !important;
    border-radius: 11px !important; font-size: 19px !important; margin: 0 !important;
  }
  body #kte-overlay .kte-left .kte-add-icon svg { width: 20px !important; height: 20px !important; }
  body #kte-overlay .kte-left .kte-add-label {
    font-size: 11.5px !important; font-weight: 700 !important;
    color: var(--t-text, #111827) !important; text-align: center !important;
    white-space: normal !important; padding-left: 0 !important; flex: none !important;
  }
  body #kte-overlay .kte-left .kte-add-sub { display: none !important; }
  body #kte-overlay .kte-left .kte-ai-cta { display: none !important; }
  body #kte-overlay .kte-left .kte-grp-label { display: none !important; }
  body #kte-overlay .kte-left .kte-rail-color { display: none !important; }

  /* Sağ panel — Özellikler drawer */
  body #kte-overlay .kte-right,
  body #kte-overlay #kte-right-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 58px !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: 80dvh !important;
    flex: none !important;
    background: var(--t-surface, #fff) !important;
    border-top: 1px solid var(--t-border, #E0E3EF) !important;
    border-left: none !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.16) !important;
    transform: translateY(105%) !important;
    transition: transform .26s cubic-bezier(.32,.72,0,1) !important;
    z-index: 150 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
  }
  body #kte-overlay .kte-right::before {
    content: '' !important; display: block !important;
    width: 36px !important; height: 4px !important;
    background: var(--t-border-strong, #C8CCDE) !important;
    border-radius: 99px !important; margin: 10px auto 4px !important; flex-shrink: 0 !important;
  }
  body #kte-overlay .kte-right.kte-is-open,
  body #kte-overlay .kte-right.kte-sheet-open { transform: translateY(0) !important; }
  body #kte-overlay .kte-right .kte-drawer-close,
  body #kte-overlay .kte-right .kte-sheet-close {
    background: var(--t-surface-2) !important; color: var(--t-text) !important;
    border-bottom: 1px solid var(--t-border) !important; border-radius: 0 !important;
    padding: 10px 16px !important; font-size: 12.5px !important; font-weight: 700 !important;
    display: flex !important; align-items: center !important; gap: 6px !important;
    cursor: pointer !important; flex-shrink: 0 !important;
  }
  body #kte-overlay .kte-right > *:not(.kte-sheet-head) { overflow-y: auto !important; }
  /* v228.52 (#59) — KÖK: bottom-sheet flex kolonunda kayd\u0131r\u0131labilir alan b\u00fcy\u00fcyemiyordu;
     ba\u015fl\u0131k/katman \u00fcstte kaybolup boyut ayarlar\u0131 altta kal\u0131yordu. Aktif .kte-ps
     b\u00f6l\u00fcm\u00fc flex:1 + min-height:0 ile sheet i\u00e7inde kayd\u0131r\u0131l\u0131r olur; ba\u015fl\u0131k sabit kal\u0131r. */
  body #kte-overlay #kte-right-panel .kte-ps:not([style*="display: none"]),
  body #kte-overlay .kte-right .kte-ps:not([style*="display: none"]){
    flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; padding-bottom: 24px !important;
  }
  body #kte-overlay #kte-right-panel .kte-ptitle,
  body #kte-overlay .kte-right .kte-ptitle{ flex: 0 0 auto !important; font-size: 13px !important; padding: 6px 10px !important; }
  /* Mobil sağ panel içerik */
  body #kte-overlay .kte-right .kte-ps-wrap,
  body #kte-overlay .kte-right-inner { padding: 12px !important; }

  /* Backdrop */
  body #kte-overlay .kte-drawer-bg {
    position: fixed !important; inset: 0 !important; bottom: 58px !important;
    background: rgba(0,0,0,.45) !important; z-index: 140 !important;
    display: none !important;
  }
  body #kte-overlay .kte-drawer-bg.kte-is-open { display: block !important; }

  /* Katmanlar — mobilde gizli */
  body #kte-overlay .kte-layers-panel,
  body #kte-overlay #kte-layers-panel { display: none !important; }

  /* Pr — mobil uyumlu */
  body #kte-overlay .kte-pr { flex-wrap: wrap !important; }
  body #kte-overlay .kte-pr label { flex: 0 0 auto !important; min-width: 60px !important; }

  /* Mobil input daha büyük */
  body #kte-overlay .kte-if,
  body #kte-overlay .kte-ic,
  body #kte-overlay input[type="text"]:not(.kte-no-style),
  body #kte-overlay input[type="number"]:not(.kte-no-style) {
    font-size: 14px !important; padding: 9px 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBİL ALT NAVBAR — .kte-mob-bottomnav
   JS tarafından dinamik üretilir (editor-v20-init.js)
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay .kte-mob-bottomnav {
  position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  display: flex !important; align-items: stretch !important;
  height: 58px !important; z-index: 200 !important;
  background: var(--t-header-bg, #16182A) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 0 !important; gap: 0 !important;
}
body #kte-overlay .kte-mob-bottomnav button {
  flex: 1 !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 3px !important; padding: 4px 2px !important;
  background: transparent !important; border: none !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .03em !important;
  cursor: pointer !important; transition: color .12s !important;
}
body #kte-overlay .kte-mob-bottomnav button .ico {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 24px !important; height: 24px !important;
}
body #kte-overlay .kte-mob-bottomnav button .ico svg {
  width: 22px !important; height: 22px !important; stroke: currentColor !important;
  fill: none !important;
}
body #kte-overlay .kte-mob-bottomnav button .lbl { font-size: 9.5px !important; font-weight: 700 !important; }
body #kte-overlay .kte-mob-bottomnav button:hover,
body #kte-overlay .kte-mob-bottomnav button.is-active { color: var(--t-accent, #818CF8) !important; }
body #kte-overlay .kte-mob-bottomnav button.is-cta {
  background: var(--t-accent, #4F46E5) !important; color: #fff !important;
  border-radius: 12px !important; margin: 7px 8px !important;
  flex: 0 0 80px !important; padding: 4px 6px !important;
}
body #kte-overlay .kte-mob-bottomnav button.is-cta:hover { background: var(--t-accent-hover,#4338CA) !important; }
body #kte-overlay .kte-mob-bottomnav .kte-mnav-color-dot {
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  background: var(--kte-accent, #4F46E5) !important;
  border: 2.5px solid rgba(255,255,255,.3) !important; display: block !important;
}

/* ═══════════════════════════════════════════════════════════
   VEKTÖRİZASYON MODAL + MOTOR SEÇIM
   ═══════════════════════════════════════════════════════════ */
body #kte-vec-tune {
  position: fixed !important; inset: 0 !important;
  /* v227.6 GERÇEK KÖK SEBEP — "Vektör penceresi editörün ALTINDA açılıyor":
     #kte-vec-tune (ve loglib/help/ai/preview) PHP'de #kte-overlay'in DIŞINDA,
     KARDEŞİ olarak duruyor. v227.4'te overlay z-index'i 2147483000'e çıkarılınca
     bu kardeş modallar (10000–1000300) editörün ALTINDA kaldı. Eski seçici
     "body #kte-vec-tune" de hiç eşleşmiyordu (vec-tune overlay'in
     çocuğu değil). Doğru seçici body düzeyinde + overlay'in üstünde z-index. */
  z-index: 2147483600 !important;
  background: rgba(0,0,0,.5) !important;
  align-items: center !important; justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v227.6 — TÜM KARDEŞ MODALLAR EDİTÖR OVERLAY'İNİN (2147483000) ÜSTÜNDE.
   Bunlar #kte-overlay'in dışında konumlandığı için body düzeyinde yüksek
   z-index gerekir; aksi halde editörün arkasında açılırlar.
   ═══════════════════════════════════════════════════════════════════════ */
body #kte-loglib,
body #kte-vec-loading,
body #kte-vec-tune,
body #kte-help-modal,
body #kte-ai-overlay,
body #kte-preview-overlay{ z-index: 2147483600 !important; }
body #kte-vec-loading{ z-index: 2147483550 !important; } /* tune'un hemen altında */
body .kte-vec-tune-card {
  background: var(--t-surface,#fff) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.20) !important;
  width: 90% !important; max-width: 620px !important;
  max-height: 90dvh !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important;
}
body .kte-vec-tune-hdr {
  display: flex !important; align-items: center !important; padding: 16px 20px !important;
  background: var(--t-header-bg,#16182A) !important; color: var(--t-header-fg,#E8EBF5) !important;
  flex-shrink: 0 !important;
}
body .kte-vec-tune-hdr strong { font-size: 14px !important; font-weight: 700 !important; }
body .kte-vec-tune-close {
  margin-left: auto !important; background: rgba(255,255,255,.10) !important;
  border: none !important; color: #fff !important; border-radius: 50% !important;
  width: 28px !important; height: 28px !important; cursor: pointer !important;
  font-size: 18px !important; line-height: 1 !important;
}
body .kte-vec-tune-body { overflow-y: auto !important; padding: 16px 20px !important; flex: 1 !important; }
body .kte-vec-tune-foot {
  display: flex !important; gap: 8px !important; justify-content: flex-end !important;
  padding: 12px 20px !important; border-top: 1px solid var(--t-border) !important;
  background: var(--t-surface-2) !important; flex-shrink: 0 !important;
}
body .kte-vec-preview-wrap { display: flex !important; gap: 12px !important; margin-bottom: 16px !important; }
body .kte-vec-preview-orig,
body .kte-vec-preview-result {
  flex: 1 !important; background: var(--t-surface-2) !important;
  border: 1px solid var(--t-border) !important; border-radius: 10px !important;
  overflow: hidden !important; min-height: 120px !important;
  display: flex !important; flex-direction: column !important;
}
body .kte-vec-prev-label {
  font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important;
  color: var(--t-text-p) !important; padding: 6px 10px !important;
  border-bottom: 1px solid var(--t-border) !important;
}
body #kte-vec-orig-img,
body .kte-vec-result-svg {
  flex: 1 !important; object-fit: contain !important; padding: 8px !important; width: 100% !important;
}
body .kte-vec-controls .kte-vec-row {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  gap: 8px !important; margin-bottom: 10px !important;
}
body .kte-vec-controls .kte-vec-row label {
  flex: 0 0 100% !important; font-size: 11px !important; font-weight: 600 !important;
  color: var(--t-text-m) !important;
}
body .kte-vec-tip { font-size: 11px !important; color: var(--t-text-m) !important; margin-top: 6px !important; }
/* Motor kartları */
body .kte-eng-card {
  display: block !important; border-radius: 10px !important; padding: 10px 8px !important;
  text-align: center !important; cursor: pointer !important;
  border: 2px solid var(--t-border,#E0E3EF) !important;
  background: var(--t-surface,#fff) !important;
  transition: border-color .15s, background .15s !important;
}
body .kte-eng-card:hover { border-color: var(--t-accent) !important; background: var(--t-accent-soft) !important; }
body .kte-eng-card.kte-eng-sel {
  border-color: var(--t-accent,#4F46E5) !important;
  background: var(--t-accent-soft,rgba(79,70,229,.08)) !important;
  box-shadow: 0 0 0 3px var(--t-accent-soft) !important;
}

/* ═══════════════════════════════════════════════════════════
   AI MODAL
   ═══════════════════════════════════════════════════════════ */
body #kte-ai-modal,
body .kte-ai-modal {
  background: var(--t-surface,#fff) !important;
  border-radius: 16px !important; border: 1px solid var(--t-border) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
  padding: 24px !important; max-width: 520px !important; width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   RENK ÇUBUĞU
   ═══════════════════════════════════════════════════════════ */
body #kte-overlay #kte-color-bar,
body #kte-overlay .kte-color-bar {
  display: flex !important; align-items: center !important; gap: 5px !important;
  padding: 8px 14px !important; flex-wrap: wrap !important;
  background: var(--t-surface-2,#F5F6FB) !important;
  border-top: 1px solid var(--t-border,#E0E3EF) !important;
  flex-shrink: 0 !important;
}
body #kte-overlay .kte-cbar-swatch,
body #kte-overlay .kte-color-swatch {
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  cursor: pointer !important; box-shadow: 0 0 0 1px rgba(0,0,0,.12) !important;
  border: 2px solid transparent !important;
  transition: transform .12s, border-color .12s !important;
}
body #kte-overlay .kte-cbar-swatch:hover { transform: scale(1.15) !important; }
body #kte-overlay .kte-cbar-swatch.is-active { border-color: var(--t-text,#111) !important; transform: scale(1.2) !important; }

/* ╔═══════════════════════════════════════════════════════════════╗
   ║ v226.2 — TÜM SORUNLARIN KÖKLİ DÜZELTMESİ                   ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── 1) KATMANLAR PANELİ — gerçek konum (canvas ile sağ panel arası) ── */
/* HTML: .kte-body > [.kte-left | .kte-canvas-area | .kte-layers-panel | .kte-right] */
@media (min-width: 681px) {
  body #kte-overlay .kte-layers-panel,
  body #kte-overlay #kte-layers-panel {
    /* Düzeltme: order:-1 yanlıştı, normal sırada kal */
    order: 0 !important;
    /* Sabit genişlik sütun */
    width: 190px !important; min-width: 190px !important; max-width: 190px !important;
    flex: 0 0 190px !important;
    /* Yükseklik kısıtı kaldır */
    max-height: none !important; height: auto !important;
    /* Görünür yap */
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
    background: var(--t-surface, #fff) !important;
    border-left: 1px solid var(--t-border, #E0E3EF) !important;
    position: static !important; transform: none !important;
  }
  body #kte-overlay .kte-lp-head { flex-shrink: 0 !important; }
  body #kte-overlay .kte-lp-body {
    flex: 1 1 0 !important; overflow-y: auto !important;
    background: var(--t-surface, #fff) !important;
    padding: 6px !important;
  }
}

/* ── 2) SAĞ PANEL SCROLL — overflow-y:auto (wrap div yok, panel kendisi kaydırır) ── */
@media (min-width: 681px) {
  body #kte-overlay .kte-right,
  body #kte-overlay #kte-right-panel {
    overflow-y: auto !important;      /* içerik kaydırılabilir */
    overflow-x: hidden !important;
    display: flex !important; flex-direction: column !important;
    /* Sheet head sabit kalsın */
  }
  body #kte-overlay .kte-right .kte-sheet-head { display: none !important; } /* masaüstünde gereksiz */
  body #kte-overlay .kte-right .kte-ptitle:first-of-type {
    position: sticky !important; top: 0 !important;
    background: var(--t-surface, #fff) !important;
    z-index: 5 !important; margin: 0 !important;
    padding: 12px 14px 8px !important;
    border-bottom: 1px solid var(--t-border, #E0E3EF) !important;
  }
  body #kte-overlay .kte-right .kte-ps { padding: 12px 14px !important; }
}

/* ── 3) CANVAS KONTROLLERI (zoom) — arka plan şeffaf ── */
body #kte-overlay .kte-canvas-ctrls {
  background: transparent !important;
}
body #kte-overlay .kte-canvas-ctrls button,
body #kte-overlay #kte-zoom-out,
body #kte-overlay #kte-zoom-in,
body #kte-overlay #kte-zoom-1 {
  /* v227.4: beyaz tuval üzerinde rgba(0,0,0,.28) açık griye dönüp beyaz yazıyı
     okunmaz yapıyordu → koyu opak pill (beyaz yazı net okunur). */
  background: rgba(20,26,40,.82) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 8px !important;
  padding: 5px 14px !important; font-size: 12.5px !important; font-weight: 700 !important;
  cursor: pointer !important;
  backdrop-filter: blur(4px) !important;
}
body #kte-overlay .kte-canvas-ctrls button:hover { background: rgba(20,26,40,.95) !important; }

/* ── 4) FLOATING TOOLBAR — v228.39: mobilde de GÖRÜNÜR (obje seçince taşıma serbest,
   bu çubuk özelleştir/sil/hizala sağlar; ⚙ ile özellikler açılır) ── */
@media (max-width: 680px) {
  /* v226.126 (#94) KÖK DÜZELTME — "canvas altında dağınık/sürekli buton": Bu kural
     eskiden koşulsuz 'display:flex !important' ile yüzen araç çubuğunu HER ZAMAN
     görünür kılıyor, JS'in seçim yokken uyguladığı inline display:none'ı eziyordu
     (nesnel ölçüm: sel=-1 iken bile computed=flex). Artık YALNIZ obje seçiliyken
     (.kte-has-selection) görünür; seçim yokken kesin gizli → tek, temiz alt bant. */
  body #kte-overlay .kte-modal:not(.kte-has-selection) #kte-floating-tb { display: none !important; }
  body #kte-overlay .kte-modal.kte-has-selection #kte-floating-tb {
    display: flex !important; gap: 4px !important;
    flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    max-width: calc(100vw - 16px) !important;
    bottom: calc(64px + env(safe-area-inset-bottom)) !important; top: auto !important;
    left: 50% !important; transform: translateX(-50%) !important;
    background: var(--kte-surface,#fff) !important; border:1px solid var(--kte-line,#E6E8EF) !important;
    border-radius: 14px !important; padding: 6px !important;
    box-shadow: 0 8px 26px rgba(0,0,0,.22) !important; z-index: 2147483300 !important;
  }
  body #kte-overlay #kte-floating-tb button {
    min-width: 40px !important; min-height: 42px !important; font-size: 17px !important;
    border-radius: 10px !important; flex: 0 0 auto !important;
  }
  /* v228.67 — 10 buton kaydırma gerektiriyordu; separatörleri inceltip aralığı
     daraltarak görünür alana daha fazla buton sığar (kaydırma yine açık). */
  body #kte-overlay #kte-floating-tb .kte-ftb-sep{ width:1px !important; margin:0 1px !important; }
  body #kte-overlay .kte-ftb-props { background: var(--kte-accent,#2F50E6) !important; color:#fff !important; }
  /* v228.51 — Sil butonu mobilde belirgin KIRMIZI + etiketli (yalnız ikon kaçırılıyordu) */
  body #kte-overlay #kte-floating-tb .kte-ftb-del{ background:#dc2626 !important; color:#fff !important; }
  /* v228.70 — "canvas üzerine gelen butonları topla": üst-sol GERİ FAB (başlıkta
     zaten ↶ var → gizle), üst-orta PLAKA ÖLÇÜ rozeti (alt zoom çubuğunda ⌀.. zaten
     var → gizle), üst-sağ KATMANLAR rozeti alt çubuk hizasına (zoom barının yanına)
     indirilir. Böylece canvas üzeri tamamen temiz. */
  body #kte-overlay #kte-undo-fab{ display:none !important; }
  body #kte-overlay #kte-plate-badge{ display:none !important; }
  body #kte-overlay #kte-lay-pill{ top:auto !important; bottom:calc(168px + env(safe-area-inset-bottom)) !important; right:8px !important; padding:7px 11px !important; font-size:12px !important; z-index:1000061 !important; }
}
@media (min-width: 681px) {
  body #kte-overlay .kte-ftb-mob { display: none !important; }
}
/* v228.79 — kanvas Geri/İleri butonları kaldırıldı (tuvali kapatıyordu) */
body #kte-overlay #kte-mob-quick{ display:none !important; }
/* v228.68 KÖK DÜZELTME — "Zoom butonların üstünde duruyor / canvas üstünde
   dağınık butonlar": Mobilde zoom çubuğu (.kte-mob-zoom) ve obje seçilince çıkan
   yüzen araç çubuğu (#kte-floating-tb) İKİSİ de alt-ortada aynı bantta → üst üste
   biniyordu. Çözüm: obje SEÇİLİYKEN zoom çubuğunu gizle (yüzen çubuk işi devralır);
   seçim yokken zoom görünür. Böylece her an tek, düzenli alt çubuk olur. */
@media (max-width: 680px){
  /* v226.129 (#99) — MOBİL ÖZELLİKLER SAYFASI TÜRE-ÖZEL BAŞLASIN: Panel açılınca
     en üstteki "eylem satırı" (Ortala/Kopyala/Öne/Arkaya/Sil) yüzen araç çubuğuyla
     BİREBİR çakışıyordu → hem gereksiz yer kaplıyor hem kullanıcıyı "aradığım ayar
     nerede" diye alta kaydırmaya zorluyordu. Mobilde bu satır gizlenir (eylemler
     zaten çubukta) → sayfa kısalır ve doğrudan türe-özel kontrollerle (font/boyut/
     renk/kontur/yarıçap) başlar; canvas'ı daha az kapatır. */
  body #kte-overlay .kte-right.kte-sheet-open .kte-act-row{ display:none !important; }
  body #kte-overlay .kte-modal.kte-has-selection .kte-mob-zoom{ display:none !important; }
  /* Yüzen araç çubuğunu biraz yukarı al ki alt menüyle de boşluk kalsın */
  body #kte-overlay #kte-floating-tb{ bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}

/* ── 5) BİLEŞEN / ŞABLON / LOGO THUMBNAIL ARKA PLANI ── */
body #kte-overlay .kte-sh-thumb,
body #kte-overlay .kte-tpl-thumb,
body #kte-overlay .kte-logo-thumb,
body #kte-overlay .kte-sh-grid .kte-sh-thumb {
  background: var(--t-surface, #fff) !important;
  border: 1px solid var(--t-border, #E0E3EF) !important;
  border-radius: 8px !important;
}
body #kte-overlay .kte-sh-thumb:hover,
body #kte-overlay .kte-tpl-thumb:hover {
  background: var(--t-accent-soft) !important;
  border-color: var(--t-accent) !important;
}

/* ── 6) MOBİL FONT SEÇİCİ — native dropdown çalışsın ── */
@media (max-width: 680px) {
  body #kte-overlay select.kte-font-sel,
  body #kte-overlay #kte-txt-font,
  body #kte-overlay #kte-arc-font {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    font-size: 16px !important; /* iOS'ta 16px altı zoom yapıyor */
    padding: 11px 12px !important;
    background: var(--t-surface, #fff) !important;
    color: var(--t-text, #111827) !important;
    border: 1px solid var(--t-border, #E0E3EF) !important;
    border-radius: 8px !important;
    width: 100% !important;
    /* v227.2 KÖK DÜZELTME — "Mobilde font değiştirilemiyor":
       editor.css:6594 D-Font sistemi native select'i gizliyordu
       (position:absolute; opacity:0; pointer-events:none; 1x1px).
       Mobilde özel D-Font menüsü yerine GÜVENİLİR native dropdown kullanılır;
       bu yüzden o gizlemeleri tamamen geri alıyoruz. */
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: 46px !important;
    margin: 0 !important;
    visibility: visible !important;
    display: block !important;
  }
  /* Mobilde özel D-Font tetik butonunu gizle — native select onun yerine geçer */
  body #kte-overlay .kte-font-trig,
  body #kte-overlay .kte-font-menu { display: none !important; }
}

/* ── 7) AYDINLIK MODDA BEYAZ KALAN METİNLER ── */
/* body.kte-theme-dark olmayan = aydınlık tema */
body:not(.kte-theme-dark) #kte-overlay .kte-add-label { color: var(--t-text, #111827) !important; }
body:not(.kte-theme-dark) #kte-overlay .kte-add-sub { color: var(--t-text-m, #6B7280) !important; }
body:not(.kte-theme-dark) #kte-overlay .kte-grp-label { color: var(--t-text-p, #9CA3AF) !important; }
body:not(.kte-theme-dark) #kte-overlay .kte-ptitle,
body:not(.kte-theme-dark) #kte-overlay .kte-ptitle2 { color: var(--t-text-p, #9CA3AF) !important; }
body:not(.kte-theme-dark) #kte-overlay .kte-hdr-title { color: var(--t-header-fg, #E8EBF5) !important; } /* header her zaman açık metin */
body:not(.kte-theme-dark) #kte-overlay .kte-pr label { color: var(--t-text-m, #6B7280) !important; }
/* QR panel tab butonlar */
body:not(.kte-theme-dark) #kte-overlay .kte-qr-tab,
body:not(.kte-theme-dark) #kte-overlay .kte-qt-tab {
  background: var(--t-surface-2, #F5F6FB) !important;
  color: var(--t-text, #111827) !important;
  border: 1px solid var(--t-border, #E0E3EF) !important;
}
body:not(.kte-theme-dark) #kte-overlay .kte-qr-tab.is-active,
body:not(.kte-theme-dark) #kte-overlay .kte-qt-tab.is-active {
  background: var(--t-accent, #4F46E5) !important;
  color: #fff !important;
}

/* ── 8) MOBİL: GECE/GÜNDÜZ UYUMU ── */
/* Aydınlık modda: drawer içleri açık */
@media (max-width: 680px) {
  /* Nav bar her zaman koyu (Figma/Sketch tarzı) */
  body #kte-overlay .kte-mob-bottomnav {
    background: #16182A !important; /* token yerine sabit — tema değişse de nav koyu kalır */
  }
  body #kte-overlay .kte-mob-bottomnav button { color: rgba(255,255,255,.50) !important; }
  body #kte-overlay .kte-mob-bottomnav button.is-active { color: #818CF8 !important; }
  body #kte-overlay .kte-mob-bottomnav button.is-cta {
    background: var(--t-accent, #4F46E5) !important; color: #fff !important;
  }
  /* Aydınlık mod — buton yazıları görünür olsun */
  body:not(.kte-theme-dark) #kte-overlay .kte-left .kte-add-label {
    color: #111827 !important;
  }
  body:not(.kte-theme-dark) #kte-overlay .kte-left .kte-add-btn {
    background: #F5F6FB !important;
    border-color: #E0E3EF !important;
    color: #111827 !important;
  }
  body:not(.kte-theme-dark) #kte-overlay .kte-left .kte-add-icon {
    background: rgba(79,70,229,.10) !important;
    color: #4F46E5 !important;
  }
}

/* ── 9) SAĞ PANEL SCROLL — inline style olan quick-start butonları düzelt ── */
/* PHP'de inline style yazılmış, bunları override et */
body #kte-overlay .kte-quick-start {
  background: var(--t-surface, #fff) !important;
  border: 1px solid var(--t-border, #E0E3EF) !important;
  color: var(--t-text, #111827) !important;
  box-shadow: var(--t-shadow-sm) !important;
  border-radius: 12px !important;
}
body #kte-overlay .kte-quick-start:hover {
  background: var(--t-accent-soft) !important;
  border-color: var(--t-accent) !important;
}

/* ── 10) INLINE STYLE HARDCODE — boyut readout ── */
body #kte-overlay #kte-dim-readout {
  color: var(--t-accent, #7c3aed) !important;
  background: var(--t-accent-soft) !important;
  border: 1px solid var(--t-accent-soft) !important;
  border-radius: 8px !important; padding: 6px 10px !important; margin-bottom: 8px !important;
}

/* ── 11) VEKTÖRİZASYON ORAN KORUDU — SVG aspect-ratio ── */
body .kte-vec-result-svg,
body #kte-vec-result-svg {
  aspect-ratio: unset !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body .kte-vec-result-svg svg,
body #kte-vec-result-svg svg {
  max-width: 100% !important; max-height: 140px !important;
  width: auto !important; height: auto !important;
  object-fit: contain !important;
}

/* ── 12) CANVAS WRAP — scroll davranışı ── */
body #kte-overlay .kte-canvas-wrap,
body #kte-overlay #kte-canvas-wrap {
  overflow: auto !important;
  padding: 20px !important;
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║ v226.3 — KÖK NEDENLİ DÜZELTMELER                           ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── AI CTA — aydınlık modda metin rengi (hardcode #fff nötralize edildi) ── */
body #kte-overlay .kte-ai-cta-title {
  font-weight: 800 !important; font-size: 14px !important;
  color: #fff !important; /* header (koyu bg) üzerinde her zaman beyaz */
}
body #kte-overlay .kte-ai-cta-sub {
  font-size: 11px !important;
  color: rgba(255,255,255,.82) !important; /* aynı şekilde */
}
/* Ama aydınlık modda sol menü AÇIK renk — CTA da buna uymalı */
body:not(.kte-theme-dark) #kte-overlay .kte-left .kte-ai-cta {
  background: var(--t-accent-soft, rgba(79,70,229,.10)) !important;
  border: 1.5px solid var(--t-accent, #4F46E5) !important;
}
body:not(.kte-theme-dark) #kte-overlay .kte-left .kte-ai-cta .kte-ai-cta-title {
  color: var(--t-accent, #4F46E5) !important; /* açık modda koyu aksan */
}
body:not(.kte-theme-dark) #kte-overlay .kte-left .kte-ai-cta .kte-ai-cta-sub {
  color: var(--t-text-m, #6B7280) !important;
}

/* ── MOBİL CANVAS CTRLS — yanlış konum düzelt ── */
@media (max-width: 680px) {
  /* Canvas ctrls'ü fixed pozisyonda nav bar üstüne taşı */
  body #kte-overlay .kte-canvas-ctrls {
    position: fixed !important;
    bottom: 66px !important; /* nav bar (58px) + 8px boşluk */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 120 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  body #kte-overlay .kte-canvas-ctrls button,
  body #kte-overlay #kte-zoom-out,
  body #kte-overlay #kte-zoom-in,
  body #kte-overlay #kte-zoom-1 {
    height: 34px !important; padding: 0 12px !important;
    font-size: 13px !important; font-weight: 700 !important;
    background: rgba(22,24,42,.80) !important;
    color: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
}

/* ── FLOATING TOOLBAR — v228.39: mobilde GÖRÜNÜR (yukarıdaki blok konumlandırır) ── */
/* (Eski "mobilde tamamen gizle" kuralı kaldırıldı; çubuk artık manuel manipülasyon
   sırasında özelleştir/sil/hizala/⚙ sağlar.) */

/* ── SAĞ PANEL SCROLL — kalıcı düzeltme ── */
@media (min-width: 681px) {
  body #kte-overlay .kte-right,
  body #kte-overlay #kte-right-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  /* İlk .kte-ptitle sticky başlık */
  body #kte-overlay .kte-right > .kte-ptitle:first-of-type {
    position: sticky !important;
    top: 0 !important; z-index: 5 !important;
    background: var(--t-surface, #fff) !important;
    margin: 0 !important; padding: 10px 14px 8px !important;
    border-bottom: 1px solid var(--t-border, #E0E3EF) !important;
  }
}

/* ── BİLEŞEN / ŞABLON / LOGO THUMBNAIL — beyaz zemin ── */
/* v228.41 (#45,#57) — MOBİL ŞABLON PANELİ: tam ekran sheet, OPAK arka plan
   (şeffaflık giderildi), 2 sütun düzgün kart, büyük dokunulabilir kategori çipleri. */
@media (max-width:680px){
  body #kte-overlay #kte-panel-tpls:not([style*="display:none"]):not([style*="display: none"]),
  body #kte-overlay #kte-panel-shapes:not([style*="display:none"]):not([style*="display: none"]){
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-height:78vh !important; transform:none !important;
    background:var(--kte-surface,#fff) !important; border-radius:18px 18px 0 0 !important;
    box-shadow:0 -8px 30px rgba(0,0,0,.25) !important; z-index:2147483360 !important;
    display:flex !important; flex-direction:column !important; padding:12px !important;
  }
  body #kte-overlay #kte-panel-shapes[style*="display: none"],
  body #kte-overlay #kte-panel-shapes[style*="display:none"],
  body #kte-overlay #kte-panel-tpls[style*="display: none"],
  body #kte-overlay #kte-panel-tpls[style*="display:none"]{ display:none !important; }
  body #kte-overlay #kte-tpls-grid,
  body #kte-overlay #kte-shapes-grid{
    display:grid !important; grid-template-columns:1fr 1fr 1fr !important; gap:10px !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; padding:2px !important;
    flex:1 1 auto !important; min-height:0 !important; /* v228.54 (#61,#62) sheet içinde gerçekten kaydırılır */
  }
  /* panel başlığı + kategori/arama sabit kalsın, yalnız ızgara kaysın */
  body #kte-overlay #kte-panel-shapes .kte-fp-hdr,
  body #kte-overlay #kte-panel-tpls .kte-fp-hdr,
  body #kte-overlay .kte-param-shapes,
  body #kte-overlay .kte-tpl-filter{ flex:0 0 auto !important; }
  body #kte-overlay #kte-tpls-grid{ grid-template-columns:1fr 1fr !important; }
  body #kte-overlay #kte-tpls-grid .kte-tpl-thumb{ width:100% !important; height:auto !important; aspect-ratio:1/1 !important; }
  body #kte-overlay #kte-shapes-grid .kte-sh-thumb{ width:100% !important; height:auto !important; aspect-ratio:1/1 !important; }
  body #kte-overlay .kte-tpl-cats{ display:flex !important; flex-wrap:nowrap !important; gap:7px !important; padding:6px 2px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; white-space:nowrap !important; }
  body #kte-overlay .kte-tpl-cats button,
  body #kte-overlay .kte-tpl-cats .kte-tpl-cat{ min-height:38px !important; padding:7px 14px !important; font-size:13px !important; border-radius:20px !important; flex:0 0 auto !important; }
  body #kte-overlay .kte-tpl-search{ min-height:42px !important; font-size:15px !important; }
  /* v228.59 — Bileşen özelleştirilebilir şekiller (yazılı kartlar) yatay kaydırmalı
     tek satır → dikey yer kaplamaz, alttaki hazır şekiller görünür. */
  body #kte-overlay .kte-param-shapes{ display:flex !important; grid-template-columns:none !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; gap:8px !important; padding-bottom:4px !important; }
  body #kte-overlay .kte-param-shapes .kte-pshape{ flex:0 0 auto !important; min-height:44px !important; font-size:13px !important; white-space:nowrap !important; padding:0 14px !important; }
}
body #kte-overlay .kte-sh-thumb {
  background: #ffffff !important; /* token değil sabit (SVG görünürlüğü için) */
  border: 1px solid #E0E3EF !important;
  border-radius: 8px !important;
}
body #kte-overlay .kte-tpl-thumb {
  background: #ffffff !important;
  border: 1px solid #E0E3EF !important;
  border-radius: 8px !important;
}
body #kte-overlay .kte-logo-thumb {
  background: #ffffff !important;
  border: 1px solid #E0E3EF !important;
  border-radius: 8px !important;
}
body #kte-overlay .kte-sh-thumb:hover,
body #kte-overlay .kte-tpl-thumb:hover,
body #kte-overlay .kte-logo-thumb:hover {
  background: var(--t-accent-soft, rgba(79,70,229,.08)) !important;
  border-color: var(--t-accent, #4F46E5) !important;
}

/* ── MOBİL SAĞ PANEL SCROLL ── */
/* v228.56 KÖK DÜZELTME — ÇAKIŞMA giderildi: bu eski blok panelin KENDİSİNE
   overflow-y:auto veriyordu; bu, v228.52'deki "panel=sabit flex kolon, başlık sabit,
   yalnız aktif .kte-ps kayar" modelini eziyordu (başlık da kayabiliyordu). Panelin
   kendi overflow'u gizli kalmalı; kaydırma içteki .kte-ps'te. Yalnız iç dolgu bırakıldı. */
@media (max-width: 680px) {
  body #kte-overlay .kte-right > .kte-ps {
    padding: 10px 12px !important;
  }
}

/* ── MOBİL ÖZELLIKLER PANELİ — sheet head görünür ── */
@media (max-width: 680px) {
  /* v228.46 (#56) — sadeleştirme: bölümler net ayrılır, kontroller ferah ve büyük
     dokunmatik; "aradığını bul" kolaylaşır. Yalnız görsel — handler/yapı değişmez. */
  body #kte-overlay .kte-right .kte-ptitle2{
    position:sticky !important; top:0 !important; z-index:3 !important;
    background:var(--kte-surface,#fff) !important; padding:10px 4px 6px !important;
    font-size:12px !important; letter-spacing:.02em !important;
    border-bottom:1px solid var(--kte-line,#E6E8EF) !important; margin-bottom:8px !important;
  }
  body #kte-overlay .kte-pr{ margin-bottom:12px !important; }
  body #kte-overlay .kte-pr label{ flex:0 0 auto !important; min-width:64px !important; font-size:12.5px !important; }
  body #kte-overlay .kte-if,
  body #kte-overlay .kte-is,
  body #kte-overlay .kte-input,
  body #kte-overlay .kte-right select,
  body #kte-overlay .kte-right input[type=text],
  body #kte-overlay .kte-right input[type=number],
  body #kte-overlay .kte-right textarea{ min-height:44px !important; font-size:15px !important; }
  body #kte-overlay .kte-range{ height:34px !important; }
  body #kte-overlay .kte-act-row button,
  body #kte-overlay .kte-ab{ min-height:44px !important; font-size:13.5px !important; }
  /* Gelişmiş bölümleri varsayılan kapalı görünüm (katlanır) — kalabalığı azaltır */
  body #kte-overlay .kte-adv-toggle{ min-height:44px !important; font-size:13px !important; font-weight:700 !important; }
  body #kte-overlay .kte-right .kte-sheet-head {
    display: flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    flex-shrink: 0 !important;
    background: var(--t-surface-2, #F5F6FB) !important;
    border-bottom: 1px solid var(--t-border, #E0E3EF) !important;
  }
  body #kte-overlay .kte-right .kte-sheet-title {
    flex: 1 !important; text-align: center !important;
    font-size: 13px !important; font-weight: 700 !important;
    color: var(--t-text, #111827) !important;
  }
  body #kte-overlay .kte-right .kte-sheet-grip {
    display: block !important;
    width: 36px !important; height: 4px !important;
    background: var(--t-border-strong, #C8CCDE) !important;
    border-radius: 99px !important; margin: 0 auto 6px !important;
  }
}

/* ── VEKTÖRİZASYON ORAN KORUMASI ── */
body #kte-vec-result-svg,
body .kte-vec-result-svg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 120px !important;
}
body #kte-vec-result-svg svg,
body .kte-vec-result-svg svg {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 140px !important;
  display: block !important;
}

/* ── ZOOM / MOUSE WHEEL — canvas-wrap overflow ── */
body #kte-overlay .kte-canvas-wrap,
body #kte-overlay #kte-canvas-wrap {
  overflow: hidden !important; /* JS transform-based zoom kontrolü */
  touch-action: none !important; /* pinch-to-zoom çakışmasını önle */
}

/* ═══════════════════════════════════════════════════════════════════════
   v227 — TEK YETKİLİ MASAÜSTÜ/MOBİL SINIRI (en son yüklenen sayfanın en son
   kuralı → cascade'i kesin kazanır). Eşit özgüllük (body #kte-overlay .sınıf).
   Sorun: guard'sız "body #kte-overlay .kte-mob-bottomnav{display:flex}" alt
   menüyü HER genişlikte gösteriyordu → masaüstüne sızıyor, 681–767px'te footer
   ile çakışıyordu. Çözüm: ≥681 masaüstü (footer var, alt nav yok), ≤680 mobil.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:681px){
  body #kte-overlay .kte-mob-bottomnav{ display:none !important; }
  body #kte-overlay .kte-footer{ display:flex !important; }
  body #kte-overlay .kte-drawer-bg{ display:none !important; }
}
@media (max-width:680px){
  body #kte-overlay .kte-mob-bottomnav{ display:flex !important; z-index:1000090 !important; }
  body #kte-overlay .kte-footer{ display:none !important; }
  /* v227.2 KÖK DÜZELTME — "Zoom ayarının altında farklı ayar kalmış":
     Mobilde GERÇEK zoom widget'ı .kte-mob-zoom'dur ("− %141 + ⊡"). Eski masaüstü
     zoom barı .kte-canvas-ctrls ("🔍− 🔍+ 1:1") guard'sız bir display:flex kuralı
     yüzünden onun ALTINDA/arkasında görünmeye devam ediyordu (çift kontrol). Mobilde
     tamamen gizle — tek zoom kontrolü kalsın. */
  body #kte-overlay .kte-canvas-ctrls{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v227.2 — TEK YETKİLİ SAĞ PANEL KAYDIRMA (en son kural → kesin kazanır).
   Eski sürümlerde "overflow:hidden" ve "overflow-y:auto" kuralları çelişip
   masaüstünde özellikler panelinin alt kısmı kesiliyordu. Bu blok son sözü söyler.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:681px){
  body #kte-overlay .kte-right,
  body #kte-overlay #kte-right-panel{
    overflow-y:auto !important; overflow-x:hidden !important;
    min-height:0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v227.3 — KOŞULLU GİZLENEN SATIRLAR (JS .hide()/.toggle()) SAYGI GÖRSÜN.
   Sorun: "body #kte-overlay .kte-pr{display:flex !important}" kuralı, JS'in
   inline style="display:none" ile gizlediği satırları (Çizgi Stili kesik/boşluk
   ayarları, parametrik şekil parametreleri vb.) EZİP her zaman gösteriyordu.
   Bu kural inline gizlemeyi geri kazandırır → ayarlar yalnız ilgiliyken görünür.
   ═══════════════════════════════════════════════════════════════════════ */
body #kte-overlay .kte-pr[style*="display:none"],
body #kte-overlay .kte-pr[style*="display: none"],
body #kte-overlay [style*="display:none"].kte-pr,
body #kte-overlay [style*="display: none"].kte-pr{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v227.4 — TEK TUTARLI AÇIK TEMA. Bozuk koyu tema (beyaz üstüne beyaz / ters
   renk) tamamen devre dışı: koyu tetikleyici toggle gizli. Editör daima açık.
   ═══════════════════════════════════════════════════════════════════════ */
#kte-theme-toggle,
body #kte-overlay #kte-theme-toggle{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v227.4 — ÇİZGİ KALINLIĞI −/+ mm STEPPER (net, sıkışık değil)
   ═══════════════════════════════════════════════════════════════════════ */
body #kte-overlay .kte-sw-stepper{
  display:flex !important; align-items:center !important; gap:8px !important; margin-bottom:8px !important;
}
body #kte-overlay .kte-sw-step{
  width:40px !important; height:40px !important; min-width:40px !important; flex:0 0 40px !important;
  border:1px solid var(--t-border,#E0E3EF) !important; border-radius:10px !important;
  background:var(--t-surface,#fff) !important; color:var(--t-text,#1E2430) !important;
  font-size:20px !important; font-weight:700 !important; line-height:1 !important; cursor:pointer !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; transition:background .12s,border-color .12s !important;
}
body #kte-overlay .kte-sw-step:hover{ background:var(--t-bg,#EEF0F8) !important; border-color:var(--t-accent,#4F46E5) !important; }
body #kte-overlay .kte-sw-step:active{ transform:scale(.94) !important; }
body #kte-overlay .kte-sw-num-wrap{
  flex:1 !important; display:flex !important; align-items:center !important; justify-content:center !important;
  gap:5px !important; border:1px solid var(--t-border,#E0E3EF) !important; border-radius:10px !important;
  background:var(--t-surface,#fff) !important; height:40px !important; padding:0 10px !important;
}
body #kte-overlay #kte-sh-sw-num{
  width:64px !important; border:none !important; background:transparent !important;
  font-size:17px !important; font-weight:700 !important; text-align:right !important;
  color:var(--t-text,#1E2430) !important; padding:0 !important; -moz-appearance:textfield !important;
}
body #kte-overlay #kte-sh-sw-num::-webkit-outer-spin-button,
body #kte-overlay #kte-sh-sw-num::-webkit-inner-spin-button{ -webkit-appearance:none !important; margin:0 !important; }
/* v228.37 — "çift buton (− − + +)": TÜM number input'larda native +/- spinner'ı
   gizle; özel stepper/slider zaten var, native spinner ile çiftleşip kaba görünüyordu. */
body #kte-overlay input[type=number]::-webkit-outer-spin-button,
body #kte-overlay input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none !important; margin:0 !important; }
body #kte-overlay input[type=number]{ -moz-appearance:textfield !important; }
/* v228.37 — mobilde katman satırı butonları (sil/kopya/kilit...) dokunulabilir boyutta */
@media (max-width:680px){
  body #kte-overlay .kte-lay-btns button{ min-width:34px !important; min-height:34px !important; font-size:15px !important; }
  body #kte-overlay .la-del{ background:#fee2e2 !important; border-radius:7px !important; }
}
body #kte-overlay .kte-sw-unit{ font-size:13px !important; font-weight:600 !important; color:var(--t-text-m,#6B7280) !important; }
body #kte-overlay .kte-sw-presets{ display:flex !important; gap:6px !important; margin-top:6px !important; }
body #kte-overlay .kte-sw-preset{
  flex:1 !important; padding:8px 4px !important; border:1px solid var(--t-border,#E0E3EF) !important;
  border-radius:8px !important; background:var(--t-surface,#fff) !important; color:var(--t-text,#1E2430) !important;
  font-size:12px !important; font-weight:600 !important; cursor:pointer !important;
}
body #kte-overlay .kte-sw-preset.is-active{ background:var(--t-accent,#4F46E5) !important; color:#fff !important; border-color:var(--t-accent,#4F46E5) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v227.5 — MOBİL: yüzen ok-pad (#kte-pad) özellik panelini KAPATIYORDU.
   right:8px;top:50% sabit konumu dar mobil ekranda ayar sliderlarının üstüne
   biniyordu. Mobilde gizlendi (tuvalde sürükleme + Yatay/Dikey/Döndür sliderları
   + −/+ stepper'lar zaten var). Masaüstünde zaten görünmüyor.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  body #kte-overlay #kte-pad{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v227.5 — ÇİZGİ STİLİ "Kesik Uzunluğu / Boşluk" satırı SIKIŞIKTI.
   .kte-pr{display:flex} kuralı satırın 4 çocuğunu (2 etiket + 2 slider) yan yana
   diziyor, etiketler kırpılıyordu. Bu satır dikey istiflenir, sliderlar tam genişlik.
   ═══════════════════════════════════════════════════════════════════════ */
/* Düz çizgide GİZLİ kalmalı (inline display:none'a id-özgüllükle saygı) */
body #kte-overlay #kte-sh-dash-row[style*="display:none"],
body #kte-overlay #kte-sh-dash-row[style*="display: none"]{ display:none !important; }
/* Kesik/Noktalı seçilince GÖRÜNÜR — dikey istif, tam genişlik */
body #kte-overlay #kte-sh-dash-row:not([style*="display:none"]):not([style*="display: none"]){
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  gap:2px !important;
}
body #kte-overlay #kte-sh-dash-row label{
  display:block !important; width:100% !important; margin:6px 0 2px !important;
  font-size:12px !important; font-weight:600 !important; white-space:normal !important;
}
body #kte-overlay #kte-sh-dash-row label:first-child{ margin-top:0 !important; }
/* v227.8: dash sliderları v185 .kte-stp sarmalı içinde [−][slider][+] olarak
   diziliyor; eski kuralım range'i width:100% yapıp + butonunu panel DIŞINA
   itiyordu. Range stepper içinde esnemeli, sarmal tam genişlik + taşma kırpık. */
body #kte-overlay #kte-sh-dash-row .kte-stp{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
body #kte-overlay #kte-sh-dash-row input[type="range"]{
  flex:1 1 auto !important; width:auto !important; min-width:0 !important; max-width:100% !important;
  display:block !important; margin:0 !important; box-sizing:border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v227.7 — KULLANIM DÜZELTMELERİ (mobil + masaüstü)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Kesik/Boşluk sliderları dar (235px masaüstü) sağ panelde TAŞIYORDU.
   Satırı kutuya kilitle, taşmayı kırp. (range genişliği yukarıda .kte-stp ile yönetilir) */
body #kte-overlay #kte-sh-dash-row{ box-sizing:border-box !important; max-width:100% !important; overflow:hidden !important; }
body #kte-overlay .kte-right .kte-pr,
body #kte-overlay #kte-right-panel .kte-pr{ box-sizing:border-box !important; max-width:100% !important; }
body #kte-overlay .kte-right input[type="range"],
body #kte-overlay #kte-right-panel input[type="range"]{ max-width:100% !important; box-sizing:border-box !important; }

@media (max-width:680px){
  /* 2) Alt menü ikonları çok soluktu/karanlıktı. KÖK SEBEP: svg'nin `color`'ı
     --t-text (koyu) çözülüyor → stroke:currentColor = koyu → koyu zeminde görünmez.
     Çözüm: stroke'u DOĞRUDAN beyaz ver (currentColor'a güvenme). */
  body #kte-overlay .kte-mob-bottomnav button{ color:rgba(255,255,255,.92) !important; }
  body #kte-overlay .kte-mob-bottomnav button .ico svg{
    stroke:#ffffff !important; color:#ffffff !important; stroke-width:2 !important; opacity:1 !important;
  }
  body #kte-overlay .kte-mob-bottomnav button .ico svg *{ stroke:#ffffff !important; }
  body #kte-overlay .kte-mob-bottomnav button .lbl{ color:rgba(255,255,255,.95) !important; }
  body #kte-overlay .kte-mob-bottomnav button.is-active{ color:#A5B4FC !important; }
  body #kte-overlay .kte-mob-bottomnav button.is-active .ico svg,
  body #kte-overlay .kte-mob-bottomnav button.is-active .ico svg *{ stroke:#A5B4FC !important; }

  /* 3) "AI ile Damga Oluştur" butonu mobil EKLE çekmecesinde görünsün
     (kullanıcı talebi: Ekle listesinde olsun). Eski sürümde gizleniyordu. */
  body #kte-overlay .kte-left .kte-ai-cta{
    display:flex !important; width:auto !important; margin:4px 4px 12px !important;
  }
  body #kte-overlay .kte-left .kte-grp-label{ display:block !important; }

  /* 4) Özellikler bottom-sheet'i TÜM ekranı kaplayıp tuvali gizliyordu →
     %58 yükseklikle sınırla (canonical 80dvh kuralını ezecek özgüllük), üstte
     tuval görünür kalsın (ayarı GÖREREK yap). İçerik kaydırılır. */
  body #kte-overlay #kte-right-panel.kte-is-open,
  body #kte-overlay .kte-right.kte-is-open,
  body #kte-overlay #kte-right-panel.kte-sheet-open,
  body #kte-overlay .kte-right.kte-sheet-open{
    max-height:58vh !important; height:auto !important;
    overflow-y:auto !important;
    border-radius:18px 18px 0 0 !important;
    background:var(--kte-surface,#fff) !important; /* v228.42 (#54) OPAK zemin — şeffaflık/okunmazlık giderildi */
    box-shadow:0 -10px 40px rgba(0,0,0,.28) !important;
  }
  /* 5) Sheet kapatma X'i her zaman tıklanır (üstte) */
  body #kte-overlay #kte-right-panel .kte-sheet-head{ z-index:10 !important; }
  body #kte-overlay #kte-right-sheet-close{
    position:relative !important; z-index:12 !important; pointer-events:auto !important;
  }
  /* v228 6) TEK-SHEET GÜVENCESİ — Katmanlar açıkken Özellikler sheet'i ASLA
     ekranda kalmasın (tab geçişinde üst üste binme/"alttan ikinci panel" önlenir).
     .kte-body sırası: …layers-panel, right-panel → kardeş seçici çalışır. */
  body #kte-overlay #kte-layers-panel.kte-is-open ~ #kte-right-panel:not(.kte-is-open),
  body #kte-overlay #kte-left-panel.kte-is-open ~ #kte-right-panel:not(.kte-is-open){
    transform:translateY(115%) !important; pointer-events:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v228 — MOBİL TUVAL ÜST BOŞLUĞU: tuval dikeyde ORTALIYDI (margin:auto)
   → header ile tasarım arasında geniş boşluk kalıyordu. Mobilde tuvali
   ÜSTE yaslıyoruz (ufak nefes payıyla) → tasarım yukarı gelir, üstte
   gereksiz boşluk kalmaz, panel açıkken tasarımı görmek kolaylaşır.
   Tuval boyutu/oranı/fit mantığı değişmez; yalnız dikey hizalama.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* v228.35 — tuval DİKEYDE ORTALI (fit zoom mobilde ≤1.0 olduğundan taşmaz);
     eski flex-start, center-origin scale ile çelişip tuvali kaydırıp "büyük/
     ortasız" gösteriyordu. Ortalama + küçük üst pay = dengeli, tam ortalı görünüm. */
  /* v228.49 (#63 düzeltme) — overflow:auto KALDIRILDI: canvas-wrap'a eklenen
     overflow, içindeki şekil/şablon panellerini (fixed) arkada bırakıp "şekiller
     arkada açılıyor" sorununu doğuruyordu. Üst-yaslama overflow olmadan yapılır. */
  body #kte-overlay .kte-canvas-wrap{
    align-items:center !important; justify-content:center !important;
    padding-top:24px !important; padding-bottom:96px !important;
  }
  /* v228.51 — tuvali dikeyde biraz aşağı: rulers bloğuna otomatik üst-pay
     (justify-content tek başına sarmalayıcı yapısında ortalamıyordu). */
  body #kte-overlay .kte-canvas-rulers{ margin-top:auto !important; margin-bottom:auto !important; }
  /* v228.50 — üstteki şeritleri sıkıştır: tuval daha yukarı gelir, üst boşluk azalır */
  body #kte-overlay .kte-canvas-info{ display:none !important; } /* v228.69 — mobilde yüzen bilgi gizli; ölçü+zoom alt çubukta toplandı */
  body #kte-overlay #kte-view-tb{ display:none !important; } /* v228.86 — mobilde canvas üstüne öğe gelmesin (ızgara/hizalama/zemin masaüstünde kalır) */
  body #kte-overlay .kte-canvas-rulers{ align-items:center !important; }
  body #kte-overlay #kte-canvas,
  body #kte-overlay .kte-canvas-wrap > canvas{
    margin-left:auto !important; margin-right:auto !important; margin-top:0 !important;
  }
}