/* powerbank3 — design-editor.css */

/* ── Ana sarmalayıcı — canvas büyük üstte, joystick + araçlar yan yana, kaydet altta ── */
.de-wrap{display:flex;flex-direction:column;gap:0;max-width:880px;margin:0 auto}
.de-layout{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.de-left{min-width:0;display:flex;flex-direction:column;gap:12px}
.de-cc{max-width:640px;width:100%;margin:0 auto}
/* alt satır: joystick bar + araçlar yan yana */
.de-bottom{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.de-savebar{position:sticky;bottom:0;background:#fff;padding-top:6px}

/* ── Sekmeler (ön/arka) ── */
.de-tabs{display:flex;justify-content:center;gap:6px;margin-bottom:16px}
.de-tab{padding:9px 24px;border-radius:10px;border:1.5px solid var(--line);background:transparent;font:600 13.5px var(--font);color:var(--ink-2);cursor:pointer;transition:.15s}
.de-tab.on{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(var(--primary-rgb),.3)}

/* ── Canvas alanı (vektör şablon) — kompakt ── */
.de-cc{position:relative;border-radius:16px;overflow:visible;background:transparent;line-height:0;padding:0;display:flex;align-items:center;justify-content:center}
.de-cc canvas{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.14))}

/* ── Drop overlay ── */
.de-drop-ov{position:absolute;inset:0;background:rgba(var(--primary-rgb),.82);border-radius:inherit;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.de-drop-ov.show{opacity:1;pointer-events:none}
.de-drop-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff}
.de-drop-inner svg{width:40px;height:40px;opacity:.9}
.de-drop-inner span{font:600 14px var(--font)}

/* ── Altı: joystick + slider (simetrik, ortalı) ── */
.de-under{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 16px;background:#fff;border:1px solid var(--line-2);border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.05);flex:1 1 300px;min-width:0}
@media(max-width:480px){.de-under{flex-wrap:wrap}}

/* ── Joystick (yumuşak turuncu — boğmaz) ── */
.de-joy{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:6px;flex-shrink:0;transition:opacity .2s}
.de-jb{width:40px;height:40px;border-radius:11px;border:1.5px solid rgba(var(--primary-rgb),.25);background:rgba(var(--primary-rgb),.08);color:var(--primary-600);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s,background .15s;padding:0;touch-action:none}
.de-jb svg{width:17px;height:17px;pointer-events:none}
.de-jb:hover{background:rgba(var(--primary-rgb),.16);border-color:var(--primary)}
.de-jb:active{transform:scale(.9);background:rgba(var(--primary-rgb),.24)}
.de-jb.center{font-size:18px;font-weight:800;border:none;color:#fff;background:var(--primary);box-shadow:0 3px 9px rgba(var(--primary-rgb),.35)}
.de-jb.center:hover{background:var(--primary-600)}
.de-jb.ghost{visibility:hidden;pointer-events:none}

/* ── Ölçü slider ── */
.de-scale-row{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.de-label{display:flex;align-items:center;gap:3px;font:600 12px var(--font);color:var(--ink-2);white-space:nowrap;flex-shrink:0}
.de-label svg{width:15px;height:15px;color:var(--primary)}
.de-slider{flex:1;min-width:0;height:6px;accent-color:var(--primary);cursor:pointer;border-radius:3px}
.de-slider:disabled{opacity:.45;cursor:not-allowed}

/* ── Araçlar — joystick'in yanında, kendi içinde 2 kolon ── */
.de-tools{flex:1 1 320px;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.de-tblock{background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:8px}
.de-ttitle{margin-bottom:0!important}
#de-txt-opts,#de-sel-tools{grid-column:1/-1}
@media(max-width:520px){.de-tools{grid-template-columns:1fr}}
.de-ttitle{font:600 12px var(--font);color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.de-ubtn{gap:6px;justify-content:center}
.de-hint{font:400 11px var(--font);color:var(--ink-3);margin:0;line-height:1.4}

/* ── Yükleme butonu ── */
.de-font-btn{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid var(--line);background:#fff;font:500 13px var(--font);color:var(--ink);cursor:pointer;transition:.15s;line-height:1}
.de-font-btn:hover{border-color:var(--primary);background:rgba(var(--primary-rgb),.04)}
.de-font-btn svg{width:14px;height:14px;color:var(--ink-2);flex-shrink:0}

/* ── Metin satırları ── */
.de-txt-row{display:flex;align-items:center;gap:8px}
.de-fsz-inp{width:72px;height:36px;flex-shrink:0;text-align:center}
.de-color-inp{width:36px;height:36px;padding:2px;border:1.5px solid var(--line);border-radius:8px;cursor:pointer;flex-shrink:0}

/* ── Format butonları ── */
.de-fmt-row{gap:4px;flex-wrap:wrap}
.de-sep-v{width:1px;height:24px;background:var(--line);margin:0 4px;flex-shrink:0}
.de-fmt{width:34px;height:34px;border-radius:7px;border:1.5px solid var(--line);background:transparent;font:500 13px var(--font);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.de-fmt svg{width:14px;height:14px}
.de-fmt:hover{border-color:var(--primary);color:var(--primary);background:rgba(var(--primary-rgb),.06)}
.de-fmt.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── Sil ── */
.de-delbtn{gap:6px;justify-content:center;border-color:rgba(220,38,38,.3);color:#dc2626}
.de-delbtn:hover{background:rgba(220,38,38,.07);border-color:#dc2626}

/* ── Kaydet bloğu ── */
.de-save-block{border-color:transparent;padding:8px 4px 4px}

/* ═══════════════════════════
   FONT SEÇİCİ MODALİ
═══════════════════════════ */
.de-fp-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:flex-end;justify-content:center;animation:fpFadeIn .18s ease}
@keyframes fpFadeIn{from{opacity:0}to{opacity:1}}
@media(min-width:600px){.de-fp-mask{align-items:center}}

.de-fp-panel{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:720px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -4px 32px rgba(0,0,0,.18)}
@media(min-width:600px){.de-fp-panel{border-radius:16px;max-height:78vh}}

.de-fp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--line-2)}
.de-fp-title{font:600 16px var(--font);color:var(--ink)}

.de-fp-search{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.de-fp-search svg{width:16px;height:16px;color:var(--ink-3);flex-shrink:0}
.de-fp-search .input{height:38px}
#de-fp-q{flex:1 1 200px;min-width:0}
#de-fp-sample{flex:1 1 160px;min-width:0;max-width:240px}

.de-fp-scroll{flex:1;overflow-y:auto;padding:10px 18px 18px;overscroll-behavior:contain}
.de-fp-group{padding:8px 0}
.de-fp-gtitle{font:700 11px var(--font);color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;padding:4px 2px 8px}
.de-fp-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.de-fp-grid{grid-template-columns:1fr 1fr}}
.de-fp-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:16px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;text-align:center;transition:.14s;min-width:0;overflow:hidden}
.de-fp-item:hover{border-color:var(--primary);background:rgba(var(--primary-rgb),.04);transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--primary-rgb),.1)}
.de-fp-item.active{border-color:var(--primary);background:rgba(var(--primary-rgb),.07);box-shadow:0 0 0 1.5px var(--primary) inset}
.de-fp-sample{display:block;width:100%;font-size:32px;line-height:1.2;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.de-fp-name{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--font);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.de-fp-name svg{width:13px;height:13px;color:var(--primary)}
.de-fp-empty{padding:48px 18px;text-align:center;color:var(--ink-3);font:400 14px var(--font);grid-column:1/-1}

/* ═══════════════════════════
   ADMIN — YÖN (Directions)
═══════════════════════════ */
.de-dir-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.de-dir-row{display:flex;align-items:center;gap:8px;background:var(--bg-soft);border-radius:8px;padding:8px 10px}
.de-dir-row .input{height:34px;flex:1;min-width:0}
.de-dir-sides{display:flex;gap:4px;flex-shrink:0}
.de-dir-side-btn{padding:5px 10px;border-radius:6px;border:1.5px solid var(--line);background:#fff;font:500 11px var(--font);color:var(--ink-2);cursor:pointer;transition:.12s;white-space:nowrap}
.de-dir-side-btn.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── Baskı Şablonu sekmesi (admin ürün formu) ── */
.de-ps-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.de-ps-areas{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.de-ps-area-row{display:grid;grid-template-columns:1fr 60px 60px 60px 60px 32px;gap:6px;align-items:center}
.de-ps-area-row .input{height:32px;text-align:center}
.de-ps-area-label{font:500 11px var(--font);color:var(--ink-3);text-align:center}