/* =========================================================
   GLOBAL TOOL SCANNER WINDOW v1.5.4
   Serial is the visual reference.
   This file owns ONLY the scanner window shell.
   ========================================================= */

.tool-scanner-stage {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 14px 20px !important;
    overflow: visible !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    background: #080d18 !important;
    box-shadow: none !important;
}

.tool-source-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: auto !important;
    margin: 20px 20px 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

.tool-source-tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: rgba(6, 11, 23, .82) !important;
    color: var(--text-soft) !important;
    font: inherit !important;
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.tool-source-tab:last-child {
    border-right: 0 !important;
}

.tool-source-tab:hover {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--text) !important;
}

.tool-source-tab.active {
    background: linear-gradient(100deg, rgba(192, 38, 211, .32), rgba(22, 71, 245, .52)) !important;
    color: #fff !important;
}

.tool-source-tab > span:first-child {
    flex: 0 0 22px !important;
    width: 22px !important;
    font-size: 21px !important;
    text-align: center !important;
}

.tool-source-tab > span:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Barcode's internal image layer must fill the SAME square shell,
   but must not create a second visible window. */
#barcodeScannerPanel #scannerPreview.tool-scanner-stage > #barcodeImageStage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Keep barcode media inside the same Serial-style square. */
#barcodeScannerPanel #scannerPreview.tool-scanner-stage #barcodeImage,
#barcodeScannerPanel #scannerPreview.tool-scanner-stage #barcodeVideo {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    transform-origin: center center !important;
}

/* Same empty state geometry as Serial. */
.tool-scanner-empty {
    position: absolute !important;
    inset: 0 !important;
    z-index: 15 !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;
    padding: 30px !important;
    text-align: center !important;
    background: #080d18 !important;
    color: var(--text-soft) !important;
}
.tool-scanner-empty[hidden],
.tool-scanner-empty.is-hidden {
    display: none !important;
}
.tool-scanner-empty strong {
    font-size: 24px !important;
    line-height: 1.2 !important;
    color: var(--text) !important;
}
.tool-scanner-empty > span {
    max-width: 560px !important;
    color: var(--text-soft) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}
.tool-scanner-empty-icon {
    width: 70px !important;
    height: 70px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(124,58,237,.75) !important;
    border-radius: 24px !important;
    color: #9b6cff !important;
    font-size: 30px !important;
    background: rgba(124,58,237,.08) !important;
}
.tool-scanner-empty-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: min(420px,100%) !important;
    margin-top: 4px !important;
}
.tool-scanner-empty-actions button {
    min-height: 48px !important;
    border-radius: 12px !important;
}

/* Same scan-line clipping/placement policy. */
.tool-scanner-scanline {
    pointer-events: none !important;
}

/* Prevent old Barcode CSS / JS layout patches from visibly creating
   a second window around the shared shell. High specificity is intentional. */
html body #barcodeScannerPanel #scannerPreview.tool-scanner-stage {
    aspect-ratio: 1 / 1 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 14px 20px !important;
    overflow: visible !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    background: #080d18 !important;
}

@media (max-width: 760px) {
    .tool-source-tabs {
        margin: 12px 8px 0 !important;
    }

    .tool-source-tab {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 5px !important;
        gap: 4px !important;
        font-size: 12px !important;
    }

    .tool-source-tab > span:first-child {
        flex-basis: 16px !important;
        width: 16px !important;
        font-size: 15px !important;
    }

    .tool-scanner-stage,
    html body #barcodeScannerPanel #scannerPreview.tool-scanner-stage {
        margin: 12px 8px !important;
    }

    .tool-scanner-empty {
        padding: 18px !important;
    }
    .tool-scanner-empty strong {
        font-size: 20px !important;
    }
    .tool-scanner-empty > span {
        font-size: 13px !important;
    }
    .tool-scanner-empty-actions {
        width: 100% !important;
    }
}


/* =========================================================
   V1.5.5 - GLOBAL WINDOW STATE
   ========================================================= */

.tool-scanner-stage #barcodeImage,
.tool-scanner-stage #barcodeVideo {
    display: none !important;
}

.tool-scanner-stage.has-image #barcodeImage,
.tool-scanner-stage #barcodeImage.is-active {
    display: block !important;
}

.tool-scanner-stage.has-video #barcodeVideo,
.tool-scanner-stage #barcodeVideo.is-active {
    display: block !important;
}

.tool-scanner-stage.has-image .tool-scanner-empty,
.tool-scanner-stage.has-video .tool-scanner-empty,
.tool-scanner-empty.is-hidden {
    display: none !important;
}

.tool-scanner-stage.is-empty .tool-scanner-empty {
    display: flex !important;
}

.tool-scanner-scanline.is-complete,
.tool-scanner-stage.scan-complete .tool-scanner-scanline {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/* =========================================================
   V1.5.6 - GLOBAL IMAGE EDITOR OVERLAY
   Serial is the visual/interaction reference.
   ========================================================= */

.tool-editor-frame {
    position: absolute;
    z-index: 60;
    box-sizing: border-box;
    border: 2px dashed #60a5fa !important;
    background: rgba(37,99,235,.018) !important;
    cursor: move;
    touch-action: none;
    user-select: none;
    overflow: visible !important;
    pointer-events: auto !important;
}

.tool-editor-drag-zone {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: move;
    touch-action: none;
}

.tool-editor-handle {
    position: absolute !important;
    z-index: 5 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    touch-action: none;
    cursor: nwse-resize;
}

.tool-editor-handle::before,
.tool-editor-handle::after {
    content: "";
    position: absolute;
    background: #60a5fa;
    border-radius: 5px;
    box-shadow: 0 0 0 2px rgba(147,197,253,.20);
}

.tool-editor-handle::before {
    width: 8px;
    height: 28px;
}

.tool-editor-handle::after {
    width: 28px;
    height: 8px;
}

.tool-editor-handle-nw {
    left: -8px !important;
    top: -8px !important;
}
.tool-editor-handle-nw::before,
.tool-editor-handle-nw::after {
    left: 0;
    top: 0;
}

.tool-editor-handle-ne {
    right: -8px !important;
    top: -8px !important;
    left: auto !important;
    cursor: nesw-resize;
}
.tool-editor-handle-ne::before {
    right: 0;
    top: 0;
}
.tool-editor-handle-ne::after {
    right: 0;
    top: 0;
}

.tool-editor-handle-sw {
    left: -8px !important;
    bottom: -8px !important;
    top: auto !important;
    cursor: nesw-resize;
}
.tool-editor-handle-sw::before {
    left: 0;
    bottom: 0;
}
.tool-editor-handle-sw::after {
    left: 0;
    bottom: 0;
}

.tool-editor-handle-se {
    right: -8px !important;
    bottom: -8px !important;
    left: auto !important;
    top: auto !important;
}
.tool-editor-handle-se::before {
    right: 0;
    bottom: 0;
}
.tool-editor-handle-se::after {
    right: 0;
    bottom: 0;
}

.tool-editor-actions {
    position: absolute !important;
    z-index: 12 !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translate(-50%, calc(100% + 8px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: max-content !important;
    max-width: calc(100vw - 40px);
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap;
    pointer-events: auto !important;
}

.tool-editor-action {
    min-width: 62px;
    height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(99,102,241,.55) !important;
    border-radius: 9px !important;
    background: rgba(7,14,27,.98) !important;
    color: #f4f7ff !important;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(2,6,23,.28);
}

.tool-editor-action-crop {
    background: linear-gradient(135deg,#b51dde,#7c2ce8) !important;
    border-color: rgba(192,38,211,.86) !important;
}

.tool-editor-action-scan {
    background: linear-gradient(135deg,#5651ec,#2865ec) !important;
    border-color: rgba(79,70,229,.92) !important;
}

/* Barcode frame: existing geometry JS supplies left/top/width/height.
   Global CSS supplies ONLY appearance and interaction. */
#cropSelection.tool-editor-frame {
    display: none;
}

/* Existing barcode classes must not paint a second handle shape. */
#cropSelection .barcode-crop-handle {
    background: transparent !important;
}

/* Action clicks never act like frame drag. */
.tool-editor-actions,
.tool-editor-actions * {
    touch-action: manipulation;
}

@media (max-width:760px) {
    .tool-editor-actions {
        gap: 5px !important;
        max-width: calc(100vw - 20px);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tool-editor-actions::-webkit-scrollbar {
        display: none;
    }
    .tool-editor-action {
        min-width: 56px;
        height: 35px;
        padding: 0 10px;
        font-size: 12px;
    }
}


/* =========================================================
   V1.6.2 - TEK EDITOR UI / IDENTICAL SERIAL + BARCODE
   Görsel sahiplik yalnız buradadır.
   ========================================================= */

#serialCropFrame.tool-editor-frame,
#cropSelection.tool-editor-frame {
    position: absolute !important;
    z-index: 60 !important;
    box-sizing: border-box !important;

    border: 2px dashed #60a5fa !important;
    border-radius: 0 !important;

    background: rgba(37, 99, 235, .018) !important;

    box-shadow:
        0 0 0 9999px rgba(2, 6, 23, .24),
        0 0 12px rgba(59, 130, 246, .10)
        !important;

    pointer-events: auto !important;
    touch-action: none !important;
    user-select: none !important;
    overflow: visible !important;
}

#serialCropFrame.tool-editor-frame[hidden],
#cropSelection.tool-editor-frame[hidden] {
    display: none !important;
}

#serialCropFrame.tool-editor-frame .tool-editor-drag-zone,
#cropSelection.tool-editor-frame .tool-editor-drag-zone {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    cursor: move !important;
    pointer-events: auto !important;
    touch-action: none !important;
}

#serialCropFrame.tool-editor-frame .tool-editor-handle,
#cropSelection.tool-editor-frame .tool-editor-handle {
    position: absolute !important;
    z-index: 8 !important;

    width: 42px !important;
    height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    opacity: 1 !important;
    pointer-events: auto !important;
    touch-action: none !important;
}

#serialCropFrame.tool-editor-frame .tool-editor-handle::before,
#serialCropFrame.tool-editor-frame .tool-editor-handle::after,
#cropSelection.tool-editor-frame .tool-editor-handle::before,
#cropSelection.tool-editor-frame .tool-editor-handle::after {
    content: "" !important;
    position: absolute !important;

    background: #60a5fa !important;
    border-radius: 5px !important;

    box-shadow:
        0 0 0 2px rgba(147, 197, 253, .20)
        !important;
}

#serialCropFrame.tool-editor-frame .tool-editor-handle::before,
#cropSelection.tool-editor-frame .tool-editor-handle::before {
    width: 2px !important;
    height: 32px !important;
}

#serialCropFrame.tool-editor-frame .tool-editor-handle::after,
#cropSelection.tool-editor-frame .tool-editor-handle::after {
    width: 32px !important;
    height: 2px !important;
}

#serialCropFrame .tool-editor-handle-nw,
#cropSelection .tool-editor-handle-nw {
    left: 0 !important;
    top: 0 !important;
    cursor: nwse-resize !important;
}
#serialCropFrame .tool-editor-handle-nw::before,
#serialCropFrame .tool-editor-handle-nw::after,
#cropSelection .tool-editor-handle-nw::before,
#cropSelection .tool-editor-handle-nw::after {
    left: 5px !important;
    top: 5px !important;
}

#serialCropFrame .tool-editor-handle-ne,
#cropSelection .tool-editor-handle-ne {
    right: 0 !important;
    top: 0 !important;
    left: auto !important;
    cursor: nesw-resize !important;
}
#serialCropFrame .tool-editor-handle-ne::before,
#serialCropFrame .tool-editor-handle-ne::after,
#cropSelection .tool-editor-handle-ne::before,
#cropSelection .tool-editor-handle-ne::after {
    right: 5px !important;
    top: 5px !important;
}

#serialCropFrame .tool-editor-handle-se,
#cropSelection .tool-editor-handle-se {
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    cursor: nwse-resize !important;
}
#serialCropFrame .tool-editor-handle-se::before,
#serialCropFrame .tool-editor-handle-se::after,
#cropSelection .tool-editor-handle-se::before,
#cropSelection .tool-editor-handle-se::after {
    right: 5px !important;
    bottom: 5px !important;
}

#serialCropFrame .tool-editor-handle-sw,
#cropSelection .tool-editor-handle-sw {
    left: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    cursor: nesw-resize !important;
}
#serialCropFrame .tool-editor-handle-sw::before,
#serialCropFrame .tool-editor-handle-sw::after,
#cropSelection .tool-editor-handle-sw::before,
#cropSelection .tool-editor-handle-sw::after {
    left: 5px !important;
    bottom: 5px !important;
}

#serialCropFrame.tool-editor-frame .tool-editor-actions,
#cropSelection.tool-editor-frame .tool-editor-actions {
    position: absolute !important;

    left: 50% !important;
    top: calc(100% + 8px) !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    width: max-content !important;
    max-width: calc(100vw - 20px) !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    z-index: 20 !important;
    white-space: nowrap !important;

    pointer-events: auto !important;
}

#serialCropFrame.tool-editor-frame .tool-editor-action,
#cropSelection.tool-editor-frame .tool-editor-action {
    position: static !important;
    transform: none !important;

    flex: 0 0 auto !important;

    min-width: 70px !important;
    width: auto !important;
    height: 38px !important;
    min-height: 38px !important;

    padding: 7px 12px !important;
    margin: 0 !important;

    border: 1px solid rgba(99, 102, 241, .58) !important;
    border-radius: 9px !important;

    background: rgba(7, 14, 27, .98) !important;
    color: #f4f7ff !important;

    font: inherit !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    box-shadow:
        0 7px 16px rgba(2, 6, 23, .28)
        !important;
}

#serialCropFrame .tool-editor-action-crop,
#cropSelection .tool-editor-action-crop {
    min-width: 86px !important;

    background:
        linear-gradient(
            135deg,
            #b51dde,
            #7c2ce8
        )
        !important;

    border-color:
        rgba(192, 38, 211, .86)
        !important;
}

#serialCropFrame .tool-editor-action-scan,
#cropSelection .tool-editor-action-scan {
    min-width: 86px !important;

    background:
        linear-gradient(
            135deg,
            #5651ec,
            #2865ec
        )
        !important;

    border-color:
        rgba(79, 70, 229, .92)
        !important;
}

.legacy-editor-controls,
.legacy-editor-control {
    display: none !important;
}

@media (max-width: 760px) {
    #serialCropFrame.tool-editor-frame .tool-editor-actions,
    #cropSelection.tool-editor-frame .tool-editor-actions {
        gap: 4px !important;
        max-width: calc(100vw - 12px) !important;
    }

    #serialCropFrame.tool-editor-frame .tool-editor-action,
    #cropSelection.tool-editor-frame .tool-editor-action {
        min-width: 58px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 6px 9px !important;
        font-size: 11px !important;
    }

    #serialCropFrame .tool-editor-action-crop,
    #serialCropFrame .tool-editor-action-scan,
    #cropSelection .tool-editor-action-crop,
    #cropSelection .tool-editor-action-scan {
        min-width: 72px !important;
    }
}


/* =========================================================
   V1.6.4 - TOOLBAR CROP DIŞINDA, AMA ASLA KESİLMEZ
   ========================================================= */

/*
 * Araç şeridi tekrar crop çerçevesinin ALTINDA.
 * Seçilen görüntü alanının üstünü kapatmaz.
 */
#serialCropFrame.tool-editor-frame .tool-editor-actions,
#cropSelection.tool-editor-frame .tool-editor-actions {
    left: 50% !important;

    top: calc(100% + 8px) !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;

    padding: 0 !important;

    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: none !important;

    z-index: 80 !important;
}

/*
 * Crop frame'in parent/stage katmanları toolbar'ı pencere
 * sınırında kesmemeli. Toolbar crop'un dışında görünmeye devam eder.
 */
#serialStage,
#barcodeImageStage,
#scannerPreview,
.tool-scanner-stage,
.scanner-editor {
    overflow: visible !important;
}

/*
 * Ana tarama kartı toolbar taşınca içeriği kesmesin.
 */
.serial-scan-stage,
.barcode-image-stage,
.scanner-preview {
    overflow: visible !important;
}

/*
 * Toolbar her durumda crop tutamaçlarından ve görüntüden üstte.
 */
#serialCropFrame.tool-editor-frame .tool-editor-actions,
#cropSelection.tool-editor-frame .tool-editor-actions,
#serialCropFrame.tool-editor-frame .tool-editor-actions *,
#cropSelection.tool-editor-frame .tool-editor-actions * {
    pointer-events: auto !important;
}

/*
 * Alt tutamaçlar toolbar'ın arkasında kalmasın.
 */
#serialCropFrame .tool-editor-handle-sw,
#serialCropFrame .tool-editor-handle-se,
#cropSelection .tool-editor-handle-sw,
#cropSelection .tool-editor-handle-se {
    z-index: 90 !important;
}


/* =========================================================
   V1.6.6 - BARCODE EDITOR TOOLBAR SAFE SPACE
   Toolbar crop alanının dışında kalır; alttaki kontroller üstüne binmez.
   ========================================================= */

/*
 * Barkod tarafında görüntü penceresinin altına, toolbar'ın taşacağı
 * kadar gerçek layout boşluğu bırak.
 * Görüntü/stage boyutu değişmez; sadece sonraki panel aşağı itilir.
 */
#scannerPreview.tool-scanner-stage.has-image {
    margin-bottom: 64px !important;
    z-index: 30 !important;
}

/*
 * Toolbar margin alanında görünür ve tıklanabilir kalır.
 */
#scannerPreview #cropSelection.tool-editor-frame .tool-editor-actions {
    z-index: 120 !important;
    pointer-events: auto !important;
}

/*
 * Hemen sonraki eski zoom/reset ve geliştirme panelleri toolbar'ın
 * üzerine çıkmasın.
 */
#barcodeScannerPanel > .image-control-grid,
#barcodeScannerPanel > .image-enhancement-panel,
#barcodeScannerPanel > .scan-button {
    position: relative;
    z-index: 1;
}

/*
 * Mobilde butonlar biraz daha kısa olduğu için daha az alan yeterlidir.
 */
@media (max-width: 760px) {
    #scannerPreview.tool-scanner-stage.has-image {
        margin-bottom: 58px !important;
    }
}


/* =========================================================
   V1.6.7 - ORTAK SADE GÖRÜNTÜ KONTROL PANELİ
   ========================================================= */

.tool-editor-controls {
    display: grid;
    gap: 14px;

    width: 100%;
    margin-top: 16px;

    box-sizing: border-box;
}

.tool-editor-main-scan {
    width: 100%;
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 13px 18px;

    border: 1px solid rgba(99, 102, 241, .75);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #c21ed8 0%,
            #7c2ee8 46%,
            #2854ff 100%
        );

    color: #fff;

    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(54, 51, 190, .16);
}

.tool-editor-enhance-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 14px;
}

.tool-editor-enhance-control {
    min-width: 0;

    padding: 15px 16px;

    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 14px;

    background: rgba(11, 19, 36, .54);
}

.tool-editor-enhance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 11px;

    color: #aebbd2;
    font-size: 14px;
}

.tool-editor-enhance-head strong {
    color: #f8fafc;
    font-size: 14px;
}

.tool-editor-enhance-control input[type="range"] {
    width: 100%;
    margin: 0;
}

.tool-editor-bottom-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(160px, .55fr);
    gap: 14px;
}

.tool-editor-zoom {
    display: grid;
    grid-template-columns:
        54px
        minmax(90px, 1fr)
        54px;

    min-height: 52px;

    overflow: hidden;

    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 14px;

    background: rgba(8, 15, 29, .72);
}

.tool-editor-zoom button {
    border: 0;
    background: transparent;
    color: #f8fafc;

    font: inherit;
    font-size: 25px;

    cursor: pointer;
}

.tool-editor-zoom button:first-child {
    border-right:
        1px solid rgba(148, 163, 184, .18);
}

.tool-editor-zoom button:last-child {
    border-left:
        1px solid rgba(148, 163, 184, .18);
}

.tool-editor-zoom-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    color: #b8c5da;
}

.tool-editor-zoom-value strong {
    color: #fff;
    font-size: 16px;
}

.tool-editor-reset {
    min-height: 52px;

    border: 1px solid rgba(124, 58, 237, .72);
    border-radius: 14px;

    background: rgba(25, 20, 59, .62);
    color: #f8fafc;

    font: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.tool-editor-main-scan:hover,
.tool-editor-reset:hover {
    filter: brightness(1.06);
}

@media (max-width: 760px) {
    .tool-editor-controls {
        gap: 10px;
        margin-top: 12px;
    }

    .tool-editor-main-scan {
        min-height: 52px;
        font-size: 14px;
    }

    .tool-editor-enhance-row {
        gap: 10px;
    }

    .tool-editor-enhance-control {
        padding: 12px;
    }

    .tool-editor-bottom-row {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(120px, .55fr);
        gap: 10px;
    }

    .tool-editor-zoom {
        grid-template-columns:
            46px
            minmax(72px, 1fr)
            46px;
    }
}


/* =========================================================
   V1.7.3 - TOOLBAR WINDOW BOUNDS + NEW JOB SPACING
   ========================================================= */

/*
 * Ortak JS toolbar'ın yatay konumunu pencere sınırlarına göre hesaplar.
 * Eski crop-merkezli translate davranışını iptal et.
 */
.tool-editor-frame .tool-editor-actions {
    transform: none !important;

    display: flex !important;
    flex-wrap: nowrap !important;

    max-width: calc(100vw - 20px);

    overflow: visible !important;

    z-index: 160 !important;
}

.tool-editor-frame .tool-editor-actions .tool-editor-action {
    flex: 0 1 auto;
    min-width: 74px;
}

/*
 * Küçük editör araçları için stage'in altında güvenli alan.
 * Böylece ortak büyük "Otomatik Taramayı Başlat" butonu
 * araçların üstüne çıkmaz.
 */
#scannerPreview.tool-scanner-stage.has-image,
#serialStage.has-image {
    margin-bottom: 82px !important;
}

/*
 * Ortak alt paneli de birkaç piksel aşağı taşı.
 */
.tool-editor-controls {
    margin-top: 22px !important;
}

@media (max-width: 760px) {
    .tool-editor-frame .tool-editor-actions {
        gap: 6px !important;
    }

    .tool-editor-frame .tool-editor-actions .tool-editor-action {
        min-width: 58px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #scannerPreview.tool-scanner-stage.has-image,
    #serialStage.has-image {
        margin-bottom: 76px !important;
    }

    .tool-editor-controls {
        margin-top: 18px !important;
    }
}


/* =========================================================
   V1.7.4 - TOOLBAR GERÇEK PENCERE SINIRI
   ========================================================= */

/*
 * Barkod'un eski kare image-stage kuralı toolbar'ı kesiyordu.
 * Ortak editör toolbar'ı crop dışında görünmek zorunda.
 */
html body #barcodeScannerPanel
#scannerPreview.tool-scanner-stage
#barcodeImageStage.barcode-image-stage {
    overflow: visible !important;
}

html body #barcodeScannerPanel
#scannerPreview.tool-scanner-stage {
    overflow: visible !important;
}

html body #serialScannerPanel
#serialStage.tool-scanner-stage {
    overflow: visible !important;
}

/*
 * Crop ne kadar daralırsa daralsın toolbar tek satırdır.
 * Desktop'ta mevcut buton ölçüleri korunur.
 */
.tool-editor-frame
.tool-editor-actions {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    overflow: visible !important;
}

/*
 * Gerçek mobil genişlik toolbar'ın doğal genişliğinden küçükse
 * beş buton pencereye eşit şekilde sığar.
 */
.tool-editor-frame
.tool-editor-actions.tool-editor-actions-compact
.tool-editor-action {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

/*
 * Küçük toolbar'ın tamamı için daha fazla gerçek layout alanı.
 * Büyük ortak tarama paneli toolbar'ın altından başlar.
 */
#scannerPreview.tool-scanner-stage.has-image,
#serialStage.tool-scanner-stage.has-image,
#serialStage.tool-scanner-stage {
    margin-bottom: 102px !important;
}

.tool-editor-controls {
    margin-top: 30px !important;
    position: relative;
    z-index: 1;
}

/*
 * Küçük araçlar her zaman büyük tarama panelinin üzerinde.
 */
.tool-editor-frame
.tool-editor-actions {
    z-index: 220 !important;
}

@media (max-width: 760px) {

    #scannerPreview.tool-scanner-stage.has-image,
    #serialStage.tool-scanner-stage.has-image,
    #serialStage.tool-scanner-stage {
        margin-bottom: 94px !important;
    }

    .tool-editor-controls {
        margin-top: 26px !important;
    }

    .tool-editor-frame
    .tool-editor-actions.tool-editor-actions-compact
    .tool-editor-action {
        font-size: 11px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}


/* V1.8.0 - Gerçek ortak raster görüntü motoru */
#barcodeImageStage {
    position: relative;
}

#barcodeImageStage
.barcode-raster-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
}

#barcodeImageStage
#barcodeImage {
    visibility: hidden !important;
    pointer-events: none !important;
}

#barcodeImageStage
.tool-editor-frame {
    z-index: 20;
}


/* =========================================================
   V1.9.4 - TEK ORTAK EDITOR PANELİ
   ========================================================= */
.tool-editor-controls {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 24px !important;
}

.tool-editor-main-scan {
    order: 1;
    width: 100%;
    min-height: 58px;
}

.tool-editor-enhancement-panel {
    order: 2;
    padding: 18px;
    border: 1px solid rgba(148,163,184,.20);
    border-radius: 16px;
    background: rgba(11,19,36,.54);
}

.tool-editor-enhancement-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.tool-editor-enhancement-heading strong {
    color: #f8fafc;
    font-size: 18px;
}

.tool-editor-enhancement-heading span {
    color: #aebbd2;
    font-size: 13px;
}

.tool-editor-enhance-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
}

.tool-editor-enhance-control {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.tool-editor-transform-row {
    order: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}

.tool-editor-transform-row > button {
    min-width: 0;
    min-height: 54px;
    border: 1px solid rgba(82,100,153,.55);
    border-radius: 14px;
    background: #0b1425;
    color: #f8fafc;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}

.tool-editor-transform-row > button:hover {
    border-color: rgba(124,58,237,.82);
}

.tool-editor-transform-row > .tool-editor-reset {
    background: rgba(25,20,59,.62);
    border-color: rgba(124,58,237,.72);
}

.tool-editor-legacy-zoom[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .tool-editor-controls {
        gap: 10px !important;
        margin-top: 18px !important;
    }

    .tool-editor-enhancement-panel {
        padding: 14px;
    }

    .tool-editor-enhancement-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 14px;
    }

    .tool-editor-enhance-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .tool-editor-transform-row {
        gap: 6px;
    }

    .tool-editor-transform-row > button {
        min-height: 48px;
        padding: 0 5px;
        font-size: 13px;
    }
}
\n\n/* =========================================================
   V2.0.0 - KOMPAKT ORTAK KAYNAK BUTONLARI
   Barcode: Fotoğraf Çek | Resim Yükle | Canlı Kamera
   Serial : Fotoğraf Çek | Resim Yükle (kamera DOM'a basılmaz)
   ========================================================= */
.tool-source-tabs.tool-source-tabs--three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.tool-source-tabs.tool-source-tabs--two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.tool-source-tabs {
    margin: 14px 20px 0 !important;
    border-radius: 10px !important;
    background: rgba(4, 9, 21, .62) !important;
}

.tool-source-tab {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    background: rgba(5, 10, 23, .88) !important;
    color: #cbd3e2 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.tool-source-tab:hover {
    background: rgba(13, 21, 42, .94) !important;
    color: #ffffff !important;
}

.tool-source-tab.active {
    background: linear-gradient(105deg, rgba(159, 24, 184, .94) 0%, rgba(70, 46, 194, .96) 50%, rgba(35, 67, 209, .98) 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(98, 113, 255, .28) !important;
}

.tool-source-tab > span:first-child {
    flex: 0 0 19px !important;
    width: 19px !important;
    font-size: 18px !important;
}

/* Barkod ve Serial ortak ana tarama butonu daha kompakt. */
.tool-editor-main-scan {
    min-height: 50px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
}

@media (max-width: 760px) {
    .tool-source-tabs {
        margin: 10px 8px 0 !important;
    }

    .tool-source-tab {
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 5px !important;
        gap: 4px !important;
        font-size: 11.5px !important;
    }

    .tool-source-tab > span:first-child {
        flex-basis: 15px !important;
        width: 15px !important;
        font-size: 14px !important;
    }

    .tool-editor-main-scan {
        min-height: 46px !important;
        padding: 9px 12px !important;
        font-size: 14px !important;
    }
}


/* =========================================================
   V3.5 - ORTAK KIRPMA ARAÇ ÇUBUĞU
   Kırp | Tara | 90° | -1° | +1° | Sıfırla
   Barcode + Serial aynı ortak bileşeni kullanır.
   ========================================================= */
.tool-editor-actions {
    gap: 6px !important;
}

.tool-editor-actions > .tool-editor-action {
    min-width: 56px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
}

.tool-editor-actions > .tool-editor-action-reset {
    min-width: 56px !important;
    width: 56px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(7,14,27,.98) !important;
    border-color: rgba(99,102,241,.55) !important;
}

.tool-editor-actions > .tool-editor-action-reset:hover {
    border-color: rgba(124,58,237,.88) !important;
}

@media (max-width:760px) {
    .tool-editor-actions {
        gap: 4px !important;
        max-width: calc(100vw - 12px) !important;
    }

    .tool-editor-actions > .tool-editor-action {
        min-width: 48px !important;
        height: 32px !important;
        padding: 0 7px !important;
        font-size: 11px !important;
    }

    .tool-editor-actions > .tool-editor-action-reset {
        min-width: 48px !important;
        width: 48px !important;
        padding: 0 !important;
    }
}




/* =========================================================
   V3.7 - ORTAK ARAÇ ÇUBUĞU SON DÜZEN
   Kırp | Tara | [90° simgesi] | -1° | +1° | Sıfırla
   ========================================================= */
.tool-editor-actions > .tool-editor-action-rotate90 {
    min-width: 48px !important;
    width: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
}

.tool-editor-actions > .tool-editor-action-reset {
    min-width: 62px !important;
    width: auto !important;
    padding: 0 9px !important;
    font-size: 12px !important;
}

@media (max-width:760px) {
    .tool-editor-actions > .tool-editor-action-rotate90 {
        min-width: 42px !important;
        width: 42px !important;
        font-size: 17px !important;
    }

    .tool-editor-actions > .tool-editor-action-reset {
        min-width: 56px !important;
        width: auto !important;
        padding: 0 6px !important;
        font-size: 10.5px !important;
    }
}