.serial-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.95fr);gap:20px;align-items:start}.serial-scanner-panel,.serial-result-panel{align-self:start}.serial-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 20px;border:1px solid var(--border);border-radius:9px;overflow:hidden}.serial-tab{min-width:0;min-height:44px;border:0;border-right:1px solid var(--border);background:rgba(6,11,23,.82);color:var(--text-soft);display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}.serial-tab:last-child{border-right:0}.serial-tab.active{background:linear-gradient(100deg,rgba(192,38,211,.32),rgba(22,71,245,.52));color:#fff}.serial-stage{position:relative;aspect-ratio:1/1;margin:14px 20px;overflow:hidden;border:1px solid var(--border-strong);border-radius:12px;background:#080d18}.serial-stage canvas,.serial-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.serial-empty{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:30px;text-align:center;background:#080d18}.serial-empty[hidden]{display:none!important}.serial-empty strong{font-size:24px}.serial-empty span{max-width:560px;color:var(--text-soft);font-size:15px;line-height:1.5}.serial-empty-icon{width:70px;height:70px;display:grid;place-items:center;border:1px solid rgba(124,58,237,.75);border-radius:24px;color:#9b6cff;font-size:30px;background:rgba(124,58,237,.08)}.serial-empty-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(420px,100%);margin-top:4px}.serial-empty-actions button{min-height:48px;border-radius:12px}.serial-status-chip{position:absolute;left:14px;top:14px;z-index:24;max-width:calc(100% - 28px);padding:7px 10px;border:1px solid rgba(100,116,139,.35);border-radius:9px;background:rgba(5,10,22,.8);color:#cbd5e1;font-size:12px;backdrop-filter:blur(5px)}.serial-scanline{position:absolute;z-index:25;left:3%;right:3%;top:3%;height:2px;background:#00e89d;box-shadow:0 0 8px rgba(0,232,157,.9),0 0 18px rgba(0,232,157,.4);animation:serialSweep 1.65s ease-in-out infinite alternate;pointer-events:none}.serial-scanline[hidden]{display:none!important}@keyframes serialSweep{0%{top:3%;opacity:.35}8%{opacity:1}92%{opacity:1}100%{top:96%;opacity:.45}}.serial-crop-frame{position:absolute;z-index:30;border:2px solid #7c3aed;background:rgba(124,58,237,.06);pointer-events:none}.serial-control-grid{display:grid;gap:10px;margin:12px 20px 0}.serial-control-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.serial-control{min-width:0;min-height:54px;border:1px solid var(--border-strong);border-radius:11px;background:var(--panel-soft);color:var(--text);cursor:pointer}.serial-crop-control{border-color:rgba(124,58,237,.72);background:rgba(124,58,237,.08)}.serial-zoom-control{display:grid;grid-template-columns:46px 1fr 46px;min-height:54px;border:1px solid var(--border-strong);border-radius:11px;overflow:hidden;background:var(--panel-soft)}.serial-zoom-control button{border:0;background:transparent;color:var(--text);font-size:22px}.serial-zoom-control span{display:flex;align-items:center;justify-content:center;gap:6px;border-left:1px solid var(--border);border-right:1px solid var(--border)}.serial-zoom-control strong{font-size:13px}.serial-enhancement-panel{margin:12px 20px;padding:16px;border:1px solid var(--border);border-radius:12px;background:rgba(13,20,38,.74)}.serial-enhancement-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.serial-enhancement-heading span{color:var(--text-soft);font-size:12px}.serial-enhancement-controls{display:grid;gap:13px}.serial-enhancement-controls label{display:grid;gap:8px}.serial-enhancement-controls label>span{display:flex;justify-content:space-between;color:var(--text-soft);font-size:13px}.serial-enhancement-controls b{color:var(--text)}.serial-enhancement-controls input[type=range]{width:100%}.serial-scan-button{width:calc(100% - 40px);margin:0 20px 18px}.serial-result-head{padding:18px 20px;border-bottom:1px solid rgba(0,232,157,.2);background:rgba(0,232,157,.06);color:var(--green);display:flex;align-items:center;justify-content:space-between;gap:10px}.serial-result-head strong{font-size:18px}.serial-result-head small{color:var(--text-soft);font-size:12px;text-align:right}.serial-result-body{padding:22px}.serial-warning{margin-bottom:14px;padding:12px 14px;border:1px solid rgba(245,158,11,.35);border-radius:10px;background:rgba(245,158,11,.08);color:#f8d28b;font-size:13px;line-height:1.45}.serial-result-label{display:block;margin-bottom:8px;color:var(--text-soft);font-size:13px}.serial-result-input{width:100%;min-height:58px;font-size:24px;font-weight:700;letter-spacing:.02em}.serial-combine-note{margin-top:8px;color:#93c5fd;font-size:12px}.serial-candidates{display:grid;gap:7px;margin:12px 0}.serial-candidate{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:#08101f;color:var(--text);text-align:left;cursor:pointer}.serial-candidate.active{border-color:rgba(59,130,246,.55);background:rgba(37,99,235,.1)}.serial-candidate i{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:rgba(124,58,237,.15);font-style:normal}.serial-candidate strong{min-width:0;overflow-wrap:anywhere}.serial-candidate em{color:#7dd3fc;font-size:12px;font-style:normal}.serial-record-fields{display:grid;grid-template-columns:.65fr 1.35fr;gap:12px}.serial-workspace-row{display:grid;grid-template-columns:minmax(0,1fr) 46px 46px 46px;gap:8px;margin-top:12px}.serial-workspace-action{height:48px;border:1px solid var(--border-strong);border-radius:8px;background:rgba(6,11,23,.85);color:var(--text);font-size:19px;cursor:pointer}.serial-workspace-delete{color:#ff6677}.serial-save-button{width:100%;margin-top:12px}.serial-cancel-edit{width:100%;margin-top:8px}.serial-records-panel{margin-top:20px;overflow:hidden}.serial-records-toolbar{min-height:70px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border)}.serial-records-toolbar h2{margin:0;font-size:18px}.serial-record-actions{display:flex;align-items:center;gap:10px}.serial-search{width:300px}.serial-table-wrapper{overflow-x:auto}.serial-records-table{width:100%;border-collapse:collapse}.serial-records-table th,.serial-records-table td{padding:13px 16px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}.serial-records-table th{color:#d8dde7;font-weight:500}.serial-records-table td{color:var(--text-soft)}.serial-record-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.serial-record-actions-cell{white-space:nowrap}.serial-record-edit,.serial-record-delete{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:9px;cursor:pointer}.serial-record-edit{color:#a7f3d0;background:rgba(16,185,129,.24);border:1px solid rgba(52,211,153,.75)}.serial-record-delete{margin-left:6px;color:#fecaca;background:rgba(220,38,38,.27);border:1px solid rgba(248,113,113,.76)}.serial-record-edit svg,.serial-record-delete svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.serial-records-footer{min-height:58px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;color:var(--text-soft);font-size:13px}.serial-toast{position:fixed;z-index:13000;right:22px;top:100px;display:flex;align-items:center;gap:10px;max-width:min(400px,calc(100vw - 28px));padding:12px 14px;border:1px solid rgba(0,232,157,.35);border-radius:12px;background:rgba(4,39,34,.97);color:#45f2bd;box-shadow:0 16px 44px rgba(0,0,0,.4)}.serial-toast[hidden]{display:none!important}.serial-toast.error{border-color:rgba(248,113,113,.45);background:rgba(55,12,18,.97);color:#fca5a5}.serial-toast div{display:grid;gap:2px}.serial-toast span{color:inherit;opacity:.82;font-size:12px}.serial-dialog-backdrop{position:fixed;inset:0;z-index:14000;display:grid;place-items:center;padding:18px;background:rgba(0,5,16,.78);backdrop-filter:blur(6px)}.serial-dialog-backdrop[hidden]{display:none!important}.serial-dialog{width:min(520px,100%);padding:20px;border:1px solid rgba(82,100,153,.4);border-radius:18px;background:#080f20;color:var(--text);box-shadow:0 26px 78px rgba(0,0,0,.58)}.serial-dialog h3{margin:0 0 10px}.serial-dialog p{color:var(--text-soft);line-height:1.5}.serial-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.serial-dialog-actions button{min-height:46px;border:1px solid var(--border);border-radius:10px;background:#0b1428;color:var(--text);cursor:pointer}.serial-dialog-actions .btn-primary{border:0}.serial-dialog.danger{border-color:rgba(248,113,113,.35)}.serial-danger-note{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(220,38,38,.08);color:#fca5a5;font-size:12px}.serial-danger-button{background:linear-gradient(135deg,#b91c1c,#ef4444)!important;border-color:rgba(248,113,113,.5)!important}.serial-edit-fields{display:grid;gap:12px}.serial-edit-fields label{display:grid;gap:6px;color:var(--text-soft);font-size:13px} @media(max-width:1100px){.serial-grid{grid-template-columns:1fr}} @media(max-width:760px){.serial-tabs{margin:0 8px}.serial-tab{min-height:46px;padding:0 4px;font-size:12px}.serial-stage{margin:12px 8px}.serial-control-grid{margin-left:8px;margin-right:8px;gap:6px}.serial-control{min-height:48px;font-size:14px}.serial-zoom-control{min-height:48px;grid-template-columns:40px 1fr 40px}.serial-enhancement-panel{margin-left:8px;margin-right:8px}.serial-scan-button{width:calc(100% - 16px);margin-left:8px;margin-right:8px}.serial-result-body{padding:16px}.serial-result-input{font-size:20px}.serial-record-fields{grid-template-columns:1fr}.serial-workspace-row{grid-template-columns:minmax(0,1fr) 44px 44px 44px}.serial-records-toolbar{align-items:stretch;flex-direction:column}.serial-record-actions{flex-wrap:wrap}.serial-search{width:100%}.serial-empty{padding:18px}.serial-empty strong{font-size:20px}.serial-empty span{font-size:13px}.serial-empty-actions{width:100%}.serial-toast{left:14px;right:14px;top:76px}.serial-dialog-backdrop{align-items:end;padding:10px}.serial-dialog{border-radius:18px 18px 12px 12px}.serial-records-footer{align-items:flex-start;flex-direction:column;gap:5px}} /* ========================================================= SERIAL V10.2 - ÇOKLU ADAY SEÇİMİ + ADAY DÜZENLEME ========================================================= */ .serial-candidates { display: grid !important; gap: 10px !important; } .serial-candidate { width: 100% !important; min-width: 0 !important; min-height: 72px !important; display: grid !important; grid-template-columns: 52px minmax(0, 1fr) auto 44px !important; align-items: center !important; gap: 14px !important; padding: 10px 12px !important; box-sizing: border-box !important; border: 1px solid rgba(84, 102, 144, .36) !important; border-radius: 13px !important; background: rgba(6, 14, 30, .86) !important; color: #f8fafc !important; cursor: pointer !important; user-select: none !important; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease !important; } .serial-candidate:hover { border-color: rgba(59, 130, 246, .62) !important; background: rgba(11, 29, 58, .92) !important; } .serial-candidate.active { border-color: rgba(59, 130, 246, .95) !important; background: rgba(24, 48, 94, .60) !important; box-shadow: inset 0 0 0 1px rgba(59,130,246,.10), 0 0 20px rgba(37,99,235,.07) !important; } .serial-candidate-select { width: 42px !important; height: 42px !important; display: grid !important; place-items: center !important; border: 1px solid rgba(124, 58, 237, .34) !important; border-radius: 11px !important; background: rgba(76, 29, 149, .28) !important; color: #e9d5ff !important; font-size: 20px !important; font-style: normal !important; } .serial-candidate.active .serial-candidate-select { color: #d1fae5 !important; border-color: rgba(52, 211, 153, .50) !important; background: rgba(16, 185, 129, .19) !important; } .serial-candidate-text { min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; color: #f8fafc !important; font-size: clamp(15px, 1.25vw, 19px) !important; line-height: 1.25 !important; font-weight: 750 !important; } .serial-candidate-confidence { white-space: nowrap !important; color: #5cc8ff !important; font-size: 15px !important; font-style: normal !important; } .serial-candidate-edit { width: 40px !important; height: 40px !important; min-width: 40px !important; display: grid !important; place-items: center !important; padding: 0 !important; border: 1px solid rgba(52, 211, 153, .70) !important; border-radius: 10px !important; background: rgba(16, 185, 129, .20) !important; color: #34d399 !important; cursor: pointer !important; transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease !important; } .serial-candidate-edit:hover { color: #ecfdf5 !important; border-color: #34d399 !important; background: rgba(16, 185, 129, .42) !important; box-shadow: 0 0 16px rgba(16,185,129,.20) !important; transform: translateY(-1px) !important; } .serial-candidate-edit svg { width: 19px !important; height: 19px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; pointer-events: none !important; } .serial-candidate-edit-field { display: grid !important; gap: 7px !important; margin-top: 16px !important; } .serial-candidate-edit-field span { color: var(--text-soft, #aebbd0) !important; font-size: 13px !important; } .serial-combine-note { color: #6fb4ff !important; } @media (max-width: 760px) { .serial-candidate { min-height: 64px !important; grid-template-columns: 38px minmax(0, 1fr) auto 38px !important; gap: 8px !important; padding: 9px !important; } .serial-candidate-select { width: 34px !important; height: 34px !important; border-radius: 9px !important; font-size: 16px !important; } .serial-candidate-confidence { font-size: 12px !important; } .serial-candidate-edit { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 9px !important; } .serial-candidate-edit svg { width: 16px !important; height: 16px !important; } .serial-candidate-text { font-size: 13px !important; } } /* ========================================================= SERIAL V10.3 - NİHAİ SONUÇ ALANI + INLINE ADAY DÜZENLEME ========================================================= */ .serial-final-value { display: grid !important; gap: 8px !important; margin-top: 4px !important; } .serial-final-value .serial-result-label { margin: 0 !important; color: var(--text-soft) !important; } .serial-result-textarea { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 58px !important; max-height: 124px !important; resize: none !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-all !important; line-height: 1.25 !important; font-weight: 750 !important; } .serial-candidate-editing { grid-template-columns: 42px minmax(0, 1fr) 42px 42px !important; cursor: default !important; } .serial-candidate-inline-input { width: 100% !important; min-width: 0 !important; height: 44px !important; padding: 8px 11px !important; border-color: rgba(52, 211, 153, .65) !important; font-size: 16px !important; font-weight: 700 !important; } .serial-candidate-inline-save, .serial-candidate-inline-cancel { width: 40px !important; height: 40px !important; min-width: 40px !important; display: grid !important; place-items: center !important; padding: 0 !important; border-radius: 10px !important; cursor: pointer !important; font-size: 20px !important; font-weight: 800 !important; } .serial-candidate-inline-save { border: 1px solid rgba(52, 211, 153, .75) !important; background: rgba(16, 185, 129, .23) !important; color: #6ee7b7 !important; } .serial-candidate-inline-cancel { border: 1px solid rgba(248, 113, 113, .65) !important; background: rgba(220, 38, 38, .16) !important; color: #fb7185 !important; } @media (max-width: 760px) { .serial-result-textarea { min-height: 54px !important; max-height: 112px !important; } .serial-candidate-editing { grid-template-columns: 34px minmax(0, 1fr) 34px 34px !important; gap: 6px !important; } .serial-candidate-inline-input { height: 38px !important; padding: 7px 9px !important; font-size: 13px !important; } .serial-candidate-inline-save, .serial-candidate-inline-cancel { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 9px !important; font-size: 17px !important; } } /* ========================================================= SERIAL V10.4 - ADAY DÜZENLEME ALANI ÇOK SATIRLI ========================================================= */ .serial-candidate-editing { align-items: start !important; } .serial-candidate-inline-input { width: 100% !important; min-width: 0 !important; min-height: 62px !important; max-height: 150px !important; height: auto !important; padding: 10px 12px !important; box-sizing: border-box !important; resize: none !important; overflow-x: hidden !important; overflow-y: auto !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-all !important; line-height: 1.35 !important; font-size: 16px !important; font-weight: 700 !important; } .serial-candidate-inline-save, .serial-candidate-inline-cancel, .serial-candidate-editing .serial-candidate-select { margin-top: 3px !important; } @media (max-width: 760px) { .serial-candidate-editing { grid-template-columns: 34px minmax(0, 1fr) 34px 34px !important; align-items: start !important; } .serial-candidate-inline-input { min-height: 58px !important; max-height: 138px !important; padding: 8px 9px !important; font-size: 13px !important; line-height: 1.35 !important; } } /* ========================================================= SERIAL V10.6 - NİHAİ SERİ NUMARASI ALT SATIRA TAŞABİLİR ========================================================= */ #serialInput.serial-result-textarea { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 64px !important; max-height: 190px !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-all !important; overflow-x: hidden !important; overflow-y: auto !important; resize: none !important; line-height: 1.35 !important; /* Uzun değeri gizlemek yerine aşağı satıra taşı */ text-overflow: clip !important; } @media (max-width: 760px) { #serialInput.serial-result-textarea { min-height: 60px !important; max-height: 170px !important; line-height: 1.4 !important; } } /* ========================================================= SERIAL V10.8 - LİSTEYE EKLENECEK KAYIT VURGUSU ========================================================= */ .serial-save-preview { position: relative !important; display: grid !important; gap: 14px !important; margin-top: 18px !important; margin-bottom: 14px !important; padding: 18px !important; border: 1px solid rgba(99, 102, 241, .82) !important; border-radius: 16px !important; background: linear-gradient( 180deg, rgba(31, 41, 87, .30), rgba(7, 13, 28, .82) ) !important; box-shadow: 0 0 0 1px rgba(168, 85, 247, .14), 0 0 26px rgba(79, 70, 229, .12), inset 0 0 28px rgba(79, 70, 229, .05) !important; } .serial-save-preview-title { color: #c7d2fe !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } .serial-save-preview .serial-final-value, .serial-save-preview .serial-record-fields { margin-top: 0 !important; } @media (max-width: 760px) { .serial-save-preview { gap: 11px !important; margin-top: 14px !important; padding: 13px !important; border-radius: 14px !important; } .serial-save-preview-title { font-size: 11px !important; } } /* ========================================================= SERIAL V10.9 - TOUCH/MOUSE KIRPMA + MANUEL YENİDEN TARAMA ========================================================= */ /* * Mobilde parmak sürüklenirken sayfanın kaymasını engeller. * Pointer event'leri kırpma için canvas'a gider. */ #serialCanvas { touch-action: none !important; cursor: crosshair !important; user-select: none !important; -webkit-user-select: none !important; } #serialCanvas.serial-crop-selecting { cursor: crosshair !important; } /* Seçilen kırpma alanını hem PC'de hem mobilde net göster. */ #serialCropFrame { pointer-events: none !important; border: 2px solid rgba(96, 165, 250, .98) !important; box-shadow: 0 0 0 9999px rgba(2, 6, 23, .50), 0 0 0 1px rgba(255,255,255,.20), 0 0 18px rgba(59,130,246,.35) !important; border-radius: 4px !important; } /* İlk tarama dışında kullanıcı son kararı verir. */ #serialScanButton { cursor: pointer !important; } @media (max-width: 760px) { #serialCanvas { touch-action: none !important; } #serialCropFrame { border-width: 2px !important; } } /* ========================================================= SERIAL V10.10 - 4 TARAFLI HASSAS KIRPMA ÇERÇEVESİ ========================================================= */ /* * Frame stage üzerinde yüzdesel konumlanır. * Dış bölge dev box-shadow ile karartılır. */ #serialCropFrame.serial-crop-frame { position: absolute !important; z-index: 25 !important; box-sizing: border-box !important; border: 1px solid rgba(96, 165, 250, .95) !important; border-radius: 5px !important; box-shadow: 0 0 0 9999px rgba(2, 6, 23, .58), 0 0 0 1px rgba(255,255,255,.14), 0 0 24px rgba(59,130,246,.30) !important; touch-action: none !important; pointer-events: auto !important; } /* Kenarlar: görünür çizgi + geniş dokunma alanı */ .serial-crop-edge { position: absolute !important; z-index: 2 !important; background: rgba(96, 165, 250, .92) !important; touch-action: none !important; } .serial-crop-edge-top, .serial-crop-edge-bottom { left: 0 !important; width: 100% !important; height: 2px !important; } .serial-crop-edge-top { top: -1px !important; cursor: ns-resize !important; } .serial-crop-edge-bottom { bottom: -1px !important; cursor: ns-resize !important; } .serial-crop-edge-left, .serial-crop-edge-right { top: 0 !important; height: 100% !important; width: 2px !important; } .serial-crop-edge-left { left: -1px !important; cursor: ew-resize !important; } .serial-crop-edge-right { right: -1px !important; cursor: ew-resize !important; } /* * Edge hit area'larını pseudo-element ile genişlet. * Görsel çizgi ince, dokunma alanı rahat. */ .serial-crop-edge::after { content: "" !important; position: absolute !important; } .serial-crop-edge-top::after, .serial-crop-edge-bottom::after { left: 0 !important; right: 0 !important; top: -10px !important; bottom: -10px !important; } .serial-crop-edge-left::after, .serial-crop-edge-right::after { top: 0 !important; bottom: 0 !important; left: -10px !important; right: -10px !important; } /* Köşe ve orta kenar tutamaçları */ .serial-crop-handle { position: absolute !important; z-index: 5 !important; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; border: 2px solid #dbeafe !important; border-radius: 6px !important; background: linear-gradient( 135deg, #2563eb, #7c3aed ) !important; box-shadow: 0 0 0 2px rgba(15,23,42,.78), 0 0 14px rgba(59,130,246,.38) !important; touch-action: none !important; } .serial-crop-handle-nw { left: -11px !important; top: -11px !important; cursor: nwse-resize !important; } .serial-crop-handle-ne { right: -11px !important; top: -11px !important; cursor: nesw-resize !important; } .serial-crop-handle-se { right: -11px !important; bottom: -11px !important; cursor: nwse-resize !important; } .serial-crop-handle-sw { left: -11px !important; bottom: -11px !important; cursor: nesw-resize !important; } .serial-crop-handle-n, .serial-crop-handle-s { left: 50% !important; transform: translateX(-50%) !important; cursor: ns-resize !important; } .serial-crop-handle-n { top: -11px !important; } .serial-crop-handle-s { bottom: -11px !important; } .serial-crop-handle-e, .serial-crop-handle-w { top: 50% !important; transform: translateY(-50%) !important; cursor: ew-resize !important; } .serial-crop-handle-e { right: -11px !important; } .serial-crop-handle-w { left: -11px !important; } /* Ortadaki kesin kırp butonu */ .serial-crop-commit { position: absolute !important; z-index: 7 !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; min-width: 92px !important; min-height: 44px !important; padding: 10px 18px !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 12px !important; background: linear-gradient( 135deg, rgba(192,38,211,.96), rgba(37,99,235,.96) ) !important; color: #fff !important; font-size: 15px !important; font-weight: 800 !important; box-shadow: 0 10px 28px rgba(37,99,235,.28), 0 0 18px rgba(168,85,247,.20) !important; cursor: pointer !important; touch-action: manipulation !important; } .serial-crop-commit:hover { filter: brightness(1.08) !important; } /* Frame kullanılırken canvas hareket değil seçim alanıdır */ #serialCanvas { touch-action: none !important; } /* Mobilde daha büyük hit target */ @media (max-width: 760px) { .serial-crop-handle { width: 28px !important; height: 28px !important; border-radius: 8px !important; } .serial-crop-handle-nw { left: -14px !important; top: -14px !important; } .serial-crop-handle-ne { right: -14px !important; top: -14px !important; } .serial-crop-handle-se { right: -14px !important; bottom: -14px !important; } .serial-crop-handle-sw { left: -14px !important; bottom: -14px !important; } .serial-crop-handle-n { top: -14px !important; } .serial-crop-handle-s { bottom: -14px !important; } .serial-crop-handle-e { right: -14px !important; } .serial-crop-handle-w { left: -14px !important; } .serial-crop-commit { min-width: 88px !important; min-height: 46px !important; padding: 10px 16px !important; font-size: 14px !important; } } /* ========================================================= SERIAL V10.11 - KAYIPSIZ KIRPMA + %60 KESİK ÇERÇEVE ========================================================= */ /* Ana çizgi: kesik, yaklaşık %60 saydam */ #serialCropFrame.serial-crop-frame { border: 2px dashed rgba(96, 165, 250, .60) !important; box-shadow: 0 0 0 9999px rgba(2, 6, 23, .54), 0 0 18px rgba(59,130,246,.16) !important; } /* * Kenar elemanları artık çizgi çizmez; * yalnız geniş mouse/touch yakalama alanı olarak kalır. * Görsel çizgiyi yukarıdaki dashed border verir. */ .serial-crop-edge { background: transparent !important; opacity: 1 !important; } /* Tutamaçlar da biraz daha yumuşak/saydam */ .serial-crop-handle { opacity: .82 !important; background: linear-gradient( 135deg, rgba(37, 99, 235, .88), rgba(124, 58, 237, .88) ) !important; } /* Crop modunda üst durum yazısı görünmez */ #serialStatus[hidden] { display: none !important; } /* ========================================================= SERIAL V10.12 - KIRPMA ALTINDA YENİDEN TARA ========================================================= */ .serial-crop-rescan { position: absolute !important; z-index: 8 !important; left: 50% !important; top: calc(100% + 12px) !important; transform: translateX(-50%) !important; min-width: 150px !important; min-height: 42px !important; padding: 9px 16px !important; border: 1px solid rgba(99, 102, 241, .76) !important; border-radius: 11px !important; background: linear-gradient( 135deg, rgba(126, 34, 206, .96), rgba(37, 99, 235, .96) ) !important; color: #fff !important; font-size: 14px !important; font-weight: 800 !important; white-space: nowrap !important; box-shadow: 0 8px 24px rgba(37, 99, 235, .24), 0 0 14px rgba(168, 85, 247, .14) !important; cursor: pointer !important; touch-action: manipulation !important; } .serial-crop-rescan:hover { filter: brightness(1.08) !important; } .serial-scan-button-crop-hidden { visibility: hidden !important; pointer-events: none !important; } /* * Frame ekranda aynı yerde kalırken altındaki Yeniden Tara'nın * stage içinde görünmesine izin ver. */ .serial-stage { overflow: visible !important; } @media (max-width: 760px) { .serial-crop-rescan { top: calc(100% + 10px) !important; min-width: 136px !important; min-height: 42px !important; padding: 9px 13px !important; font-size: 13px !important; } } /* ========================================================= SERIAL V10.13 - MOBİL PINCH/PAN + SEÇİM TABANLI KIRPMA ========================================================= */ /* * Çerçevenin ortası tamamen boş. * Dokunma/click canvas'a geçer: * tek parmak = resmi taşı * iki parmak = resmi büyüt/küçült */ #serialCropFrame.serial-crop-frame { pointer-events: none !important; } .serial-crop-edge, .serial-crop-handle, .serial-crop-actions, .serial-crop-action { pointer-events: auto !important; } /* Seçim kilitlendiğinde hafif yeşil-mavi vurgu */ #serialCropFrame.serial-crop-locked { border-color: rgba(52, 211, 153, .68) !important; box-shadow: 0 0 0 9999px rgba(2, 6, 23, .54), 0 0 16px rgba(52, 211, 153, .18) !important; } /* Kırp + Tara yan yana, çerçevenin hemen altında */ .serial-crop-actions { position: absolute !important; z-index: 9 !important; left: 50% !important; top: calc(100% + 10px) !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: max-content !important; } .serial-crop-action { position: static !important; transform: none !important; min-width: 92px !important; min-height: 40px !important; padding: 8px 14px !important; border: 1px solid rgba(99, 102, 241, .70) !important; border-radius: 10px !important; color: #fff !important; font-size: 13px !important; font-weight: 800 !important; white-space: nowrap !important; box-shadow: 0 7px 20px rgba(37, 99, 235, .18) !important; } .serial-crop-commit { background: linear-gradient( 135deg, rgba(192,38,211,.95), rgba(124,58,237,.95) ) !important; } .serial-crop-rescan { background: linear-gradient( 135deg, rgba(79,70,229,.96), rgba(37,99,235,.96) ) !important; } /* Tutamaçları biraz küçült */ .serial-crop-handle { width: 18px !important; height: 18px !important; border-width: 1px !important; border-radius: 5px !important; opacity: .72 !important; } .serial-crop-handle-nw { left: -9px !important; top: -9px !important; } .serial-crop-handle-ne { right: -9px !important; top: -9px !important; } .serial-crop-handle-se { right: -9px !important; bottom: -9px !important; } .serial-crop-handle-sw { left: -9px !important; bottom: -9px !important; } .serial-crop-handle-n { top: -9px !important; } .serial-crop-handle-s { bottom: -9px !important; } .serial-crop-handle-e { right: -9px !important; } .serial-crop-handle-w { left: -9px !important; } /* Canvas mobil galerideki gibi gesture alır */ #serialCanvas { touch-action: none !important; } /* Eski tekil crop/rescan positioning kurallarını geçersiz kıl */ .serial-crop-commit, .serial-crop-rescan { left: auto !important; top: auto !important; } @media (max-width: 760px) { .serial-crop-handle { width: 22px !important; height: 22px !important; border-radius: 6px !important; } .serial-crop-handle-nw { left: -11px !important; top: -11px !important; } .serial-crop-handle-ne { right: -11px !important; top: -11px !important; } .serial-crop-handle-se { right: -11px !important; bottom: -11px !important; } .serial-crop-handle-sw { left: -11px !important; bottom: -11px !important; } .serial-crop-handle-n { top: -11px !important; } .serial-crop-handle-s { bottom: -11px !important; } .serial-crop-handle-e { right: -11px !important; } .serial-crop-handle-w { left: -11px !important; } .serial-crop-actions { top: calc(100% + 8px) !important; gap: 7px !important; } .serial-crop-action { min-width: 86px !important; min-height: 40px !important; padding: 8px 12px !important; font-size: 13px !important; } } /* ========================================================= SERIAL V10.14 - KIRP SONRASI PENCEREYE FIT ÖNİZLEME ========================================================= */ /* * Kırp'a basınca seçilen yüksek çözünürlüklü alan stage'e fit edilir. * Önizleme modunda tutamaçları gizliyoruz; kullanıcı önce sonucu görür. */ #serialCropFrame.serial-crop-preview { border-color: rgba(96, 165, 250, .42) !important; box-shadow: 0 0 0 9999px rgba(2, 6, 23, .62), 0 0 18px rgba(59,130,246,.12) !important; } #serialCropFrame.serial-crop-preview .serial-crop-handle, #serialCropFrame.serial-crop-preview .serial-crop-edge { opacity: 0 !important; pointer-events: none !important; } /* * Önizleme sırasında sadece Kırp/Tara aksiyonları görünür. * Kırp tekrar basılırsa aynı seçim korunur; Tara doğrudan OCR yapar. */ #serialCropFrame.serial-crop-preview .serial-crop-actions { opacity: 1 !important; pointer-events: auto !important; } /* Stage crop preview için siyah fonu korur */ .serial-stage { background: #080d18 !important; } /* ========================================================= SERIAL V10.15 - ARDIŞIK KAYIPSIZ KIRPMA ========================================================= */ /* * Kırpılmış çalışma kaynağı üzerinde ikinci kırpma yapılırken * görüntü stage içinde sabit FIT kalır. * Böylece kullanıcı yalnız tutamaçları daraltır; * resim eski/orijinal haline zıplamaz. */ #serialCropFrame:not(.serial-crop-preview) .serial-crop-handle { transition: opacity .12s ease, transform .12s ease !important; } /* ========================================================= SERIAL V10.16 - DAR ALANDA TÜM KIRPMA KUTUSUNU TAŞIMA ========================================================= */ /* * İlk crop sonrasında, committed yüksek çözünürlüklü kaynak üzerinde * çerçevenin içini sürüklemek tüm seçim kutusunu taşır. */ .serial-crop-drag-zone { position: absolute !important; inset: 0 !important; z-index: 3 !important; background: transparent !important; pointer-events: auto !important; touch-action: none !important; cursor: move !important; } /* * Görsel çizgiler ve tutamaçlar drag-zone'dan üstte. * Kenara dokunulursa tüm kutu değil yalnız o kenar hareket eder. */ .serial-crop-edge { z-index: 12 !important; } .serial-crop-handle { z-index: 20 !important; } /* * Kırp / Tara butonları tutamaçlardan daha aşağı katmanda. * Dar seçimlerde alt tutamaçlara erişimi engellemez. */ .serial-crop-actions { z-index: 10 !important; } .serial-crop-action { z-index: 10 !important; } /* Dar alanlarda kenarların görünmez hit alanını biraz azalt. */ .serial-crop-edge-top::after, .serial-crop-edge-bottom::after { top: -7px !important; bottom: -7px !important; } .serial-crop-edge-left::after, .serial-crop-edge-right::after { left: -7px !important; right: -7px !important; } /* Tüm kutu taşınırken küçük görsel geri bildirim */ #serialCropFrame.serial-crop-dragging { border-color: rgba(52, 211, 153, .78) !important; box-shadow: 0 0 0 9999px rgba(2, 6, 23, .54), 0 0 20px rgba(52, 211, 153, .20) !important; } /* * Preview modunda önceki sürüm tutamaçları gizliyordu. * Dokunup ikinci crop'a geçildiğinde drag-zone devreye girer. */ #serialCropFrame.serial-crop-preview .serial-crop-drag-zone { pointer-events: auto !important; } @media (max-width: 760px) { /* * Mobilde çok dar seri satırında tutamaçların fiziksel kutularının * birbirine binmesini azalt. */ .serial-crop-handle { width: 18px !important; height: 18px !important; border-radius: 5px !important; } .serial-crop-handle-nw { left: -9px !important; top: -9px !important; } .serial-crop-handle-ne { right: -9px !important; top: -9px !important; } .serial-crop-handle-se { right: -9px !important; bottom: -9px !important; } .serial-crop-handle-sw { left: -9px !important; bottom: -9px !important; } .serial-crop-handle-n { top: -9px !important; } .serial-crop-handle-s { bottom: -9px !important; } .serial-crop-handle-e { right: -9px !important; } .serial-crop-handle-w { left: -9px !important; } } /* ========================================================= SERIAL V10.17 - SADECE 4 KÖŞE TUTAMACI ========================================================= */ /* Eski kenar ve orta tutamaçları tamamen devre dışı. */ .serial-crop-edge, .serial-crop-handle-n, .serial-crop-handle-e, .serial-crop-handle-s, .serial-crop-handle-w { display: none !important; } /* * Köşe butonunun kendisi görünmez geniş dokunma alanıdır. * Görsel L şekli ::before / ::after ile çizilir. */ .serial-crop-handle-nw, .serial-crop-handle-ne, .serial-crop-handle-se, .serial-crop-handle-sw { width: 38px !important; height: 38px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; touch-action: none !important; z-index: 30 !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } /* L'nin yatay ve dikey parçaları */ .serial-crop-handle-nw::before, .serial-crop-handle-ne::before, .serial-crop-handle-se::before, .serial-crop-handle-sw::before, .serial-crop-handle-nw::after, .serial-crop-handle-ne::after, .serial-crop-handle-se::after, .serial-crop-handle-sw::after { content: "" !important; position: absolute !important; display: block !important; background: rgba(96, 165, 250, .82) !important; box-shadow: 0 0 0 1px rgba(219, 234, 254, .44), 0 0 9px rgba(59, 130, 246, .20) !important; pointer-events: none !important; } /* Sol üst */ .serial-crop-handle-nw { left: -19px !important; top: -19px !important; cursor: nwse-resize !important; } .serial-crop-handle-nw::before { left: 11px !important; top: 11px !important; width: 18px !important; height: 4px !important; border-radius: 3px !important; } .serial-crop-handle-nw::after { left: 11px !important; top: 11px !important; width: 4px !important; height: 18px !important; border-radius: 3px !important; } /* Sağ üst */ .serial-crop-handle-ne { right: -19px !important; top: -19px !important; cursor: nesw-resize !important; } .serial-crop-handle-ne::before { right: 11px !important; top: 11px !important; width: 18px !important; height: 4px !important; border-radius: 3px !important; } .serial-crop-handle-ne::after { right: 11px !important; top: 11px !important; width: 4px !important; height: 18px !important; border-radius: 3px !important; } /* Sağ alt */ .serial-crop-handle-se { right: -19px !important; bottom: -19px !important; cursor: nwse-resize !important; } .serial-crop-handle-se::before { right: 11px !important; bottom: 11px !important; width: 18px !important; height: 4px !important; border-radius: 3px !important; } .serial-crop-handle-se::after { right: 11px !important; bottom: 11px !important; width: 4px !important; height: 18px !important; border-radius: 3px !important; } /* Sol alt */ .serial-crop-handle-sw { left: -19px !important; bottom: -19px !important; cursor: nesw-resize !important; } .serial-crop-handle-sw::before { left: 11px !important; bottom: 11px !important; width: 18px !important; height: 4px !important; border-radius: 3px !important; } .serial-crop-handle-sw::after { left: 11px !important; bottom: 11px !important; width: 4px !important; height: 18px !important; border-radius: 3px !important; } /* * Dar crop alanında köşelerin dokunma kutuları birbirine çok yaklaşsa bile * drag-zone tüm kutuyu taşımaya devam eder. */ .serial-crop-drag-zone { z-index: 4 !important; } /* Kırp / Tara köşe tutamaçlarının altında kalır. */ .serial-crop-actions { z-index: 12 !important; } @media (max-width: 760px) { /* * Mobilde görünen L küçük; gerçek dokunma alanı 44px. * Bu, parmakla tutmayı kolaylaştırır fakat görüntüyü kapatmaz. */ .serial-crop-handle-nw, .serial-crop-handle-ne, .serial-crop-handle-se, .serial-crop-handle-sw { width: 44px !important; height: 44px !important; } .serial-crop-handle-nw { left: -22px !important; top: -22px !important; } .serial-crop-handle-ne { right: -22px !important; top: -22px !important; } .serial-crop-handle-se { right: -22px !important; bottom: -22px !important; } .serial-crop-handle-sw { left: -22px !important; bottom: -22px !important; } /* Mobilde görünür L biraz daha büyük ama hâlâ sade */ .serial-crop-handle-nw::before, .serial-crop-handle-ne::before, .serial-crop-handle-se::before, .serial-crop-handle-sw::before { width: 20px !important; } .serial-crop-handle-nw::after, .serial-crop-handle-ne::after, .serial-crop-handle-se::after, .serial-crop-handle-sw::after { height: 20px !important; } } /* ========================================================= SERIAL V10.18 - SEÇİM ÖNCE / TEMİZ KIRPMA GÖRÜNÜMÜ ========================================================= */ #serialCropFrame.serial-crop-frame, #serialCropFrame.serial-crop-locked, #serialCropFrame.serial-crop-preview, #serialCropFrame.serial-crop-dragging { box-shadow: 0 0 12px rgba(59, 130, 246, .10) !important; } /* Görsel yokken tutamaç yok. */ .serial-stage:not(.has-image) #serialCropFrame { display: none !important; } #serialCropFrame.serial-crop-preview .serial-crop-handle { opacity: 1 !important; pointer-events: auto !important; } /* ========================================================= SERIAL V10.19 - HAFİF MASKE + İÇ KÖŞELER + TEK SATIR ARAÇLAR ========================================================= */ /* Seçim dışı alan yalnız hafif koyulaşır. */ #serialCropFrame.serial-crop-frame, #serialCropFrame.serial-crop-locked, #serialCropFrame.serial-crop-preview, #serialCropFrame.serial-crop-dragging { box-shadow: 0 0 0 9999px rgba(2, 6, 23, .24), 0 0 12px rgba(59, 130, 246, .10) !important; } /* 4 L köşe tutamacının dokunma alanı ve çizgisi çerçevenin İÇİNDE. */ .serial-crop-handle-nw, .serial-crop-handle-ne, .serial-crop-handle-se, .serial-crop-handle-sw { width: 42px !important; height: 42px !important; z-index: 40 !important; } .serial-crop-handle-nw { left: 0 !important; top: 0 !important; } .serial-crop-handle-ne { right: 0 !important; top: 0 !important; } .serial-crop-handle-se { right: 0 !important; bottom: 0 !important; } .serial-crop-handle-sw { left: 0 !important; bottom: 0 !important; } .serial-crop-handle-nw::before, .serial-crop-handle-nw::after { left: 5px !important; top: 5px !important; } .serial-crop-handle-ne::before, .serial-crop-handle-ne::after { right: 5px !important; top: 5px !important; } .serial-crop-handle-se::before, .serial-crop-handle-se::after { right: 5px !important; bottom: 5px !important; } .serial-crop-handle-sw::before, .serial-crop-handle-sw::after { left: 5px !important; bottom: 5px !important; } /* Kırp / Tara / 90 / -1 / +1 aynı satırda. */ .serial-crop-actions { left: 50% !important; top: calc(100% + 8px) !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; z-index: 18 !important; } .serial-crop-action { position: static !important; transform: none !important; flex: 0 0 auto !important; min-width: 0 !important; min-height: 38px !important; padding: 7px 10px !important; border-radius: 9px !important; font-size: 12px !important; font-weight: 800 !important; white-space: nowrap !important; } .serial-crop-commit, .serial-crop-rescan { min-width: 70px !important; } .serial-crop-rotate { min-width: 58px !important; background: linear-gradient( 135deg, rgba(67, 56, 202, .96), rgba(37, 99, 235, .96) ) !important; } .serial-crop-angle { min-width: 45px !important; background: rgba(15, 23, 42, .96) !important; } /* Toolbar köşe tutamaçlarının üstüne çıkmaz. */ .serial-crop-handle-nw, .serial-crop-handle-ne, .serial-crop-handle-se, .serial-crop-handle-sw { pointer-events: auto !important; } /* Mobilde tek satır için daha kompakt. */ @media (max-width: 760px) { .serial-crop-actions { gap: 3px !important; max-width: calc(100vw - 14px) !important; } .serial-crop-action { min-height: 35px !important; padding: 6px 7px !important; font-size: 10.5px !important; border-radius: 8px !important; } .serial-crop-commit, .serial-crop-rescan { min-width: 54px !important; } .serial-crop-rotate { min-width: 50px !important; } .serial-crop-angle { min-width: 37px !important; } .serial-crop-handle-nw, .serial-crop-handle-ne, .serial-crop-handle-se, .serial-crop-handle-sw { width: 44px !important; height: 44px !important; } } /* ========================================================= SERIAL V10.20 - AÇI DEĞİŞİRKEN KIRPMA ALANI SABİT ========================================================= */ /* * Açı butonlarına basıldığında kırpma çerçevesi yeniden çizilirken * görsel sıçramayı azalt. */ #serialCropFrame { transition: border-color .10s ease, box-shadow .10s ease !important; } /* V1.9.6: durum etiketi ortak sade pencere tasarımında görünmez. */ #serialStatus { display: none !important; }