/* ============================================================
   Page: etiket_sablonlari — Tam görsel etiket tasarımcısı
   (ekran-tabanlı: Şablon listesi ⇄ Tasarım editörü | üst pill sekmeler)
   ============================================================ */
.etk-page { padding: var(--space-5); overflow-x: hidden; }   /* kanvas kendi kaydırma kabında → sayfa yatay taşmaz (mobil hayalet-scroll) */
.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); }
/* — Üst pill sekmeler — */
.etk-pillnav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.etk-pillnav-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 800; color: var(--navy); }
.etk-pillnav-title svg { width: 18px; height: 18px; color: var(--brand); }
.etk-pills { display: inline-flex; gap: 4px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-full, 999px); padding: 3px; }
.etk-pill { padding: 6px 16px; border: none; background: none; border-radius: var(--radius-full, 999px); font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); cursor: pointer; }
.etk-pill:hover { color: var(--navy); }
.etk-pill.active { background: var(--brand); color: #fff; }

/* — Liste: aksiyon çubuğu — */
.etk-actionbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.etk-ab-left { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 700; color: var(--navy); }
.etk-ab-left svg { width: 18px; height: 18px; color: var(--brand); }
.etk-ab-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.etk-search { padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); min-width: 200px; }
.etk-search:focus { border-color: var(--brand); outline: none; }

/* — Kartlar (prototip birebir) — */
.etk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--space-5); align-items: start; }
.etk-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); cursor: pointer; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); transition: var(--transition, .15s); }
.etk-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md, var(--shadow)); }
/* Varsayılan şablon: kart sarı çerçeveyle işaretlenir (yıldız dolu). */
.etk-card.is-default { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow) inset, var(--shadow-sm); }
/* Köşe yıldızı — kartın sağ üst köşesinde, küçük yuvarlak dokunma hedefi (mobilde de basılabilir). */
.etk-card-star { position: absolute; top: calc(var(--space-3) + 6px); right: calc(var(--space-3) + 6px); z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-faint, var(--text-muted)); cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition, .15s); }
.etk-card-star svg { width: 17px; height: 17px; }
.etk-card-star:hover { color: var(--yellow); border-color: var(--yellow); }
.etk-card-star.is-on { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-soft, var(--surface)); }
@media (max-width: 768px) { .etk-card-star { width: 38px; height: 38px; } .etk-card-star svg { width: 19px; height: 19px; } }
.etk-card-thumb { background: var(--surface-alt); border-radius: var(--radius); height: 168px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.etk-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.etk-card-name { font-size: var(--fs-base); font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.etk-card-row .badge { flex: 0 0 auto; }
.etk-card-meta { font-size: var(--fs-xs); color: var(--text-faint, var(--text-muted)); }
.etk-card-acts { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.etk-icobtn { padding-left: 9px; padding-right: 9px; }
.etk-icobtn svg { width: 15px; height: 15px; }
.etk-del { color: var(--red); }
.etk-del:hover { color: var(--red); border-color: var(--red); }
.etk-card--new { border: 2px dashed var(--border-strong); background: transparent; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 288px; color: var(--text-muted); cursor: pointer; font: inherit; }
.etk-card--new:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.etk-card--new svg { width: 26px; height: 26px; }
.etk-card--new b { font-size: var(--fs-sm); font-weight: 700; }
.etk-empty { grid-column: 1/-1; text-align: center; padding: var(--space-6); color: var(--text-muted); font-size: var(--fs-sm); }

/* — Editör üst şeridi — */
.etk-editor-head { 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: 8px 12px; flex-wrap: wrap; }
.etk-eh-left { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.etk-eh-right { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; flex-wrap: wrap; }
.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: 140px; max-width: 320px; flex: 0 1 auto; }
.etk-active-input:focus { border-color: var(--brand); outline: none; }
.etk-active-size { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }

/* — Mobil / dar ekran: yeni üst şeritler taşmadan sarsın — */
@media (max-width: 720px) {
  .etk-pillnav, .etk-editor-head { flex-direction: column; align-items: stretch; }
  .etk-pills { align-self: flex-start; }
  .etk-actionbar { align-items: stretch; }
  .etk-ab-right { justify-content: space-between; }
  .etk-search { min-width: 0; flex: 1 1 auto; }
  .etk-eh-left .etk-active-input { flex: 1 1 auto; max-width: none; }
  .etk-eh-right { justify-content: flex-start; }
  .etk-eh-right .btn { flex: 0 1 auto; }
}

/* — Tasarımcı: 3 kolon (borderless paneller, prototip) — */
.etk-designer { display: grid; grid-template-columns: 240px 1fr 320px; gap: var(--space-5); align-items: start; min-height: 520px; }
@media (max-width: 1100px) { .etk-designer { grid-template-columns: 210px 1fr 280px; gap: var(--space-4); } }
@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; }

/* — Borderless paneller (prototip) — */
.etk-pane { display: flex; flex-direction: column; min-width: 0; }
.etk-pane-body { display: flex; flex-direction: column; }
.etk-pane-h { font-size: var(--fs-xs); font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.etk-pane-h--sp { margin-top: 22px; }

/* — Eleman ekle: outline pill butonlar (ikonsuz) — */
.etk-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.etk-add-btn { padding: 10px 8px; border-radius: var(--radius-sm); border: 1px solid var(--brand); background: var(--surface); font-size: var(--fs-sm); font-weight: 700; color: var(--brand); cursor: pointer; text-align: center; }
.etk-add-btn:hover { background: var(--brand-tint); }
.etk-add-wide { display: block; width: 100%; margin-top: 8px; padding: 10px 8px; border-radius: var(--radius-sm); border: 1px solid var(--brand); background: var(--surface); font-size: var(--fs-sm); font-weight: 700; color: var(--brand); cursor: pointer; }
.etk-add-wide:hover { 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: 8px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.etk-ct { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); 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(--brand); color: var(--brand); }
.etk-chip.on { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }
.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: 46px; text-align: center; }
.etk-tb-prod { display: inline-flex; align-items: center; gap: 6px; }
.etk-tb-prod label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); }
.etk-tb-prod select { min-width: 180px; 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); }
.etk-selinfo { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); margin-left: auto; }

/* — Alt durum çubuğu — */
.etk-statusbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 2px; font-size: var(--fs-xs); color: var(--text-muted); }
.etk-st-size { font-weight: 800; color: var(--navy); }
.etk-st-dot { font-weight: 700; }
.etk-st-tip { margin-left: auto; color: var(--text-faint, var(--text-muted)); }
.etk-pf-lbl { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); margin: 8px 0 6px; }
.etk-inp--full { width: 100%; }

.etk-canvas-outer { flex: 1; background: var(--surface-alt); background-image: radial-gradient(circle, rgba(70,62,124,.16) 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: 460px; }
.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; font-family: Arial, Helvetica, sans-serif; }
.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 { justify-content: stretch; }
.bc-label--canvas .bc-el--barcode .bc-el-in { display: flex; flex-direction: column; align-items: stretch; height: 100%; }
.bc-label--canvas .bc-bars { width: 100%; flex: 1 1 auto; min-height: 0; height: auto; display: block; }
.bc-label--canvas .bc-num { letter-spacing: 1px; text-align: center; white-space: nowrap; flex: 0 0 auto; }
.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; }

/* — Zengin fiyat + görsel öğe (kanvas/baskı ortak) — */
.bc-label--canvas .bc-el--price .bc-el-in { display: flex; flex-direction: column; }
.bc-label--canvas .bc-el--price .bc-price-main { display: flex; align-items: baseline; }
.bc-label--canvas .bc-el--image { display: block; }
.bc-label--canvas .bc-el--image img { width: 100%; height: 100%; display: block; }

/* — Hizalama kılavuzu (canlı, sürüklerken) + 5mm ızgara (yalnız ekran) — */
.etk-guide { position: absolute; background: var(--brand); pointer-events: none; z-index: 150; }
.etk-grid5 { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(to right, rgba(70,62,124,.16) .5px, transparent .5px), linear-gradient(to bottom, rgba(70,62,124,.16) .5px, transparent .5px); }

/* — Araç çubuğu: taşma rozeti + dot okuması — */
.etk-overflow { margin-left: 8px; }
.etk-overflow .badge { font-size: 11px; }
.etk-pf-dot { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); background: var(--surface-alt); border-radius: var(--radius-sm); padding: 6px 8px; margin-top: 4px; text-align: center; }

/* — Metin biçim düğmeleri (italik/BÜYÜK/kaydır) — */
.etk-pf-toggles { display: flex; gap: 4px; margin-bottom: 8px; }
.etk-pf-toggles .etk-tg { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 800; }
.etk-pf-toggles .etk-tg i { font-style: italic; }
.etk-pf-actions--top { margin-top: 0; margin-bottom: 10px; }

/* — Fiyat öğesi ekleme modalı — */
.etk-price-pick { display: flex; flex-direction: column; gap: 10px; min-width: 300px; }
.etk-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); flex-wrap: wrap; }
.etk-price-info { display: flex; flex-direction: column; gap: 2px; }
.etk-price-info b { font-size: var(--fs-sm); color: var(--navy); }
.etk-price-info span { font-size: var(--fs-xs); color: var(--text-muted); }
.etk-price-btns { display: flex; gap: 6px; flex-wrap: wrap; }