/* ============================================================
   Page: etiket_sablonlari — Tam görsel etiket tasarımcısı
   (eski sistem düzeni: Elemanlar+Katmanlar | Kanvas+araç çubuğu | sekmeli özellikler)
   ============================================================ */
.etk-page { padding: var(--space-5); }
.etk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.etk-title { font-size: var(--fs-lg); font-weight: 700; }
.etk-head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* — Aktif şablon çubuğu — */
.etk-active { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; flex-wrap: wrap; }
.etk-active-main { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.etk-active-main > svg { width: 18px; height: 18px; color: var(--brand); flex: 0 0 auto; }
.etk-active-lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.etk-active-input { font-size: var(--fs-md); font-weight: 700; color: var(--navy); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; min-width: 160px; max-width: 320px; flex: 0 1 auto; }
.etk-active-input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-glow); }
.etk-active-size { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.etk-active-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; flex-wrap: wrap; }

/* — Kayıtlı şablonlar ızgarası — */
.etk-saved { margin-bottom: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.etk-saved-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.etk-saved-head h3 { font-size: var(--fs-md); font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.etk-saved-head h3 svg { width: 18px; height: 18px; color: var(--brand); }
.etk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.etk-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: var(--transition, .15s); }
.etk-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.etk-card.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-tint); }
.etk-card-thumb { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); height: 76px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.etk-card-name { font-size: var(--fs-sm); font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etk-card-meta { font-size: 11px; color: var(--text-muted); }
.etk-card-acts { display: flex; gap: 4px; margin-top: 2px; }
.etk-card-btn { flex: 1; padding: 5px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 11px; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.etk-card-btn:hover { border-color: var(--brand); color: var(--brand); }
.etk-card-btn.del { flex: 0 0 30px; }
.etk-card-btn.del svg { width: 13px; height: 13px; }
.etk-card-btn.del:hover { border-color: var(--red); color: var(--red); }
.etk-empty { grid-column: 1/-1; text-align: center; padding: var(--space-6); color: var(--text-muted); font-size: var(--fs-sm); }

/* — Tasarımcı: 3 kolon — */
.etk-designer { display: grid; grid-template-columns: 220px 1fr 264px; gap: var(--space-3); align-items: stretch; min-height: 480px; }
@media (max-width: 1100px) { .etk-designer { grid-template-columns: 190px 1fr 230px; } }
@media (max-width: 860px) { .etk-designer { grid-template-columns: 1fr; } }

.d-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; }
.d-panel-head { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 7px; }
.d-panel-head svg { width: 16px; height: 16px; color: var(--brand); }
.d-panel-body { flex: 1; overflow-y: auto; padding: 12px; }

.etk-sec-h { font-size: var(--fs-xs); font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.etk-sec-h svg { width: 14px; height: 14px; color: var(--brand); }
.etk-sec-h.spaced { margin-top: 16px; }

/* — Eleman ekle ızgarası — */
.etk-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.etk-add-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 11px; font-weight: 700; color: var(--text-muted); cursor: pointer; text-align: center; }
.etk-add-btn svg { width: 16px; height: 16px; color: var(--brand); }
.etk-add-btn:hover { border-color: var(--brand); color: var(--navy); background: var(--brand-tint); }

/* — Katmanlar — */
.etk-layers { display: flex; flex-direction: column; gap: 4px; }
.etk-layer { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; }
.etk-layer:hover { border-color: var(--brand); }
.etk-layer.sel { border-color: var(--brand); background: var(--brand-tint); }
.etk-layer-ico svg { width: 13px; height: 13px; color: var(--brand); display: block; }
.etk-layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etk-layer-btn { padding: 2px; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 4px; }
.etk-layer-btn svg { width: 13px; height: 13px; display: block; }
.etk-layer-btn:hover { color: var(--navy); background: var(--surface-alt); }
.etk-layer-btn.del:hover { color: var(--red); }
.etk-layer-empty { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; padding: 12px; }

/* — Orta: araç çubuğu + kanvas — */
.etk-canvas-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.etk-canvas-outer { min-width: 0; }
.d-panel { min-width: 0; }
.etk-toolbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.etk-ct { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.etk-ct svg { width: 14px; height: 14px; }
.etk-ct:hover { border-color: var(--navy); color: var(--navy); }
.etk-ct.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.etk-ct-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.etk-zoom { font-size: var(--fs-sm); font-weight: 800; color: var(--navy); min-width: 42px; text-align: center; }
.etk-selinfo { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); margin-left: auto; }

.etk-canvas-outer { flex: 1; background: #e8e8ec; background-image: radial-gradient(circle, #bbb 1px, transparent 1px); background-size: 16px 16px; border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; display: flex; align-items: center; justify-content: center; padding: 28px; min-height: 360px; }
.etk-canvas { position: relative; background: #fff; box-shadow: 0 6px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.1); flex-shrink: 0; overflow: hidden; touch-action: none; }

/* — Kanvas elemanları = renderData '.bc-el' (yazdırmayla BİREBİR; DATA_PRINT_CSS ile aynı). — */
.bc-label--canvas { position: relative; box-sizing: border-box; overflow: hidden; background: #fff; color: #000; }
.bc-label--canvas .bc-el { position: absolute; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: center; line-height: 1.05; }
.bc-label--canvas .bc-el-in { width: 100%; overflow: hidden; }
.bc-label--canvas .bc-el--barcode .bc-el-in { display: flex; flex-direction: column; align-items: center; }
.bc-label--canvas .bc-bars { width: 100%; height: auto; }
.bc-label--canvas .bc-num { letter-spacing: 1px; text-align: center; white-space: nowrap; }
.bc-label--canvas .bc-el--line { background: #000; }
.bc-label--canvas .bc-el--box { background: transparent; }

/* Editör etkileşimi (yalnız kanvas; çıktıya gitmez) */
#etkCanvas .bc-el { cursor: move; touch-action: none; }
#etkCanvas .bc-el.sel { outline: 1.5px solid var(--brand); z-index: 100; }
.etk-rh { position: absolute; width: 9px; height: 9px; background: var(--brand); border: 2px solid #fff; border-radius: 2px; display: none; z-index: 200; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
#etkCanvas .bc-el.sel .etk-rh { display: block; }
.etk-rh-nw { top: -5px; left: -5px; cursor: nw-resize; }
.etk-rh-n  { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.etk-rh-ne { top: -5px; right: -5px; cursor: ne-resize; }
.etk-rh-e  { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }
.etk-rh-se { bottom: -5px; right: -5px; cursor: se-resize; }
.etk-rh-s  { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.etk-rh-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.etk-rh-w  { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }

/* — Sağ panel: sekmeler + özellikler — */
.etk-tabs { display: flex; border-bottom: 1px solid var(--border); }
.etk-tab { flex: 1; padding: 10px 6px; border: none; background: none; text-align: center; font-size: var(--fs-xs); font-weight: 800; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.etk-tab svg { width: 14px; height: 14px; }
.etk-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

.etk-nosel { text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: var(--fs-sm); }
.etk-nosel svg { width: 30px; height: 30px; color: var(--border-strong); display: block; margin: 0 auto 10px; }
.etk-pf-h { font-size: var(--fs-sm); font-weight: 800; color: var(--navy); padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.etk-pf-sub { font-size: var(--fs-xs); font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 8px; }
.etk-pf-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.etk-pf-row label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); min-width: 48px; }
.etk-inp, .etk-num, .etk-sel { flex: 1; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--text); outline: none; min-width: 0; }
.etk-inp:focus, .etk-num:focus, .etk-sel:focus { border-color: var(--brand); }
.etk-color { width: 42px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.etk-pf-hint { font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-alt); border-radius: var(--radius-sm); padding: 6px 8px; margin-bottom: 8px; }
.etk-check { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 8px; }
.etk-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.etk-tg { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text-muted); }
.etk-tg.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.etk-aligns { display: flex; gap: 4px; }
.etk-al { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); }
.etk-al svg { width: 15px; height: 15px; }
.etk-al:hover, .etk-al.active { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }

.etk-pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.etk-pf-n { display: flex; flex-direction: column; gap: 3px; }
.etk-pf-n > span { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.etk-pf-actions { display: flex; gap: 6px; margin-top: 14px; }
.etk-pf-actions .btn { flex: 1; }
.etk-del:hover { color: var(--red); }

.etk-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 12px; }
.etk-preset { justify-content: center; }