/* ============================================================
   WIZARD STYLES - Kompakt WinForm tarzi
   ============================================================ */

.wizard-container {
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Step Indicator - Kompakt */
.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 8px;
    padding: 6px 0;
    flex-shrink: 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wizard-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 0;
    background: #f0f2f5;
    border: 2px solid var(--yl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--yl-text-light);
    transition: all 0.3s;
    flex-shrink: 0;
}

.wizard-step-circle.active {
    background: #185FA5;
    border-color: #185FA5;
    color: #fff;
}

.wizard-step-circle.completed {
    background: #3B6D11;
    border-color: #3B6D11;
    color: #fff;
}

.wizard-step-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--yl-text-light);
    white-space: nowrap;
}

.wizard-step-label.active { color: #185FA5; }
.wizard-step-label.completed { color: #3B6D11; }

.wizard-step-line {
    width: 48px;
    height: 2px;
    background: var(--yl-border);
    margin: 0 10px;
    flex-shrink: 0;
}

.wizard-step-line.completed { background: #3B6D11; }

/* Wizard Content */
.wizard-content {
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 8px;
}

.wizard-content.fill {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ──────────────────────────────────────────────
   Adım 3: Teslimat & Fiyat — sol form + sağ özet
   ────────────────────────────────────────────── */
.wizard-content.fill.step3-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 14px;
    align-items: start;
    overflow-y: auto;
}
.step3-grid .step3-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.step3-grid .step3-summary {
    position: sticky;
    top: 0;
    background: #f8fafc;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.step3-summary .step3-summary-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--yl-text-light);
    letter-spacing: 0.6px;
    margin-bottom: 2px;
}
.step3-summary .summary-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.step3-summary .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--yl-text);
}
.step3-summary .summary-row.total {
    font-weight: 700;
    color: var(--yl-primary);
    font-size: 0.92rem;
    margin-top: 2px;
}
.step3-summary .summary-divider {
    border-bottom: 1px dashed var(--yl-border);
    margin: 4px 0;
}

/* Mobil: ozet karti alta dusuyor */
@media (max-width: 1100px) {
    .wizard-content.fill.step3-grid {
        grid-template-columns: 1fr;
    }
    .step3-grid .step3-summary {
        position: static;
    }
}

.app-root.dark .step3-grid .step3-summary {
    background: #161b22;
    border-color: var(--yl-border);
}

/* Teslimat notlari textarea */
.teslimat-notlari-area {
    width: 100%;
    min-height: 110px;
    padding: 8px 10px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    font-size: 0.85rem;
    font-family: inherit;
    background: #fff;
    color: var(--yl-text);
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    line-height: 1.45;
}
.teslimat-notlari-area:focus {
    border-color: var(--yl-primary);
    box-shadow: 0 0 0 2px rgba(24,95,165,0.08);
}
.app-root.dark .teslimat-notlari-area {
    background: #161b22;
    border-color: var(--yl-border);
}

/* TESLIMAT sablon picker (CRUD'lu) */
.quick-modal-content.tlpick {
    max-width: 600px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}
.tlpick-body {
    padding: 8px 14px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.tlpick-search {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    font-size: 0.83rem;
    background: #fff;
    color: var(--yl-text);
    outline: none;
}
.tlpick-search:focus { border-color: var(--yl-primary); }

.tlpick-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 8px;
}
.tlpick-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.1s;
}
.tlpick-row:hover { background: #f7faff; }
.tlpick-text {
    flex: 1;
    text-align: left;
    padding: 7px 10px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--yl-text);
    border-radius: 0;
    font-family: inherit;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tlpick-text:hover { background: #eef3ff; border-color: var(--yl-primary); }
.tlpick-plus {
    color: var(--yl-text-light);
    margin-right: 6px;
    font-weight: 700;
}
.tlpick-text:hover .tlpick-plus { color: var(--yl-primary); }

.tlpick-tool {
    width: 28px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--yl-text-light);
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.12s;
}
.tlpick-row:hover .tlpick-tool { opacity: 1; }
.tlpick-tool:hover {
    border-color: var(--yl-primary);
    color: var(--yl-primary);
    background: rgba(59,125,221,0.08);
}
.tlpick-tool.delete:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fee2e2;
}

/* + Yeni madde inline form */
.tlpick-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(59,125,221,0.05);
    border: 1px dashed rgba(59,125,221,0.3);
    margin-top: 4px;
}
.tlpick-add-bullet {
    color: var(--yl-primary);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.tlpick-add input {
    flex: 1;
    border: 1px solid var(--yl-border);
    background: #fff;
    border-radius: 0;
    padding: 5px 8px;
    font-size: 0.83rem;
    outline: none;
    color: var(--yl-text);
}
.tlpick-add input:focus { border-color: var(--yl-primary); }
.tlpick-add-confirm {
    border: 1px solid var(--yl-primary);
    background: var(--yl-primary);
    color: #fff;
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
}
.tlpick-add-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
    color: var(--yl-text-light);
    border-color: var(--yl-border);
}

/* Dark mode */
.app-root.dark .tlpick-search,
.app-root.dark .tlpick-add input {
    background: #161b22;
    border-color: var(--yl-border);
    color: var(--yl-text);
}
.app-root.dark .tlpick-row { border-bottom-color: rgba(255,255,255,0.05); }
.app-root.dark .tlpick-row:hover { background: rgba(59,125,221,0.06); }
.app-root.dark .tlpick-text:hover { background: rgba(59,125,221,0.12); border-color: var(--yl-primary); }
.app-root.dark .tlpick-add { background: rgba(59,125,221,0.08); border-color: rgba(59,125,221,0.4); }

/* Adım 2: items-editor alta kadar uzasın */
.wizard-content.fill.step2-fill {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.step2-fill .items-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* v2 dual-pane: editor satır olarak iki paneli yan yana açar */
.step2-fill .items-editor.v2 {
    flex-direction: row;
    gap: 0;
    border: 1px solid var(--yl-border);
}
.step2-fill .items-editor.v2 .pane {
    min-height: 0;
}
.step2-fill .items-list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
}

.wizard-section-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--yl-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--yl-border);
}

/* Form Grid */
.wizard-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}

.wizard-grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 14px;
}

.wizard-grid4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px 14px;
}

/* Proportional grid rows for compact layout */
.wizard-row {
    display: grid;
    gap: 6px;
    align-items: start;
    margin-bottom: 2px;
}

.wizard-field {
    margin-bottom: 8px;
}

.wizard-field.compact {
    margin-bottom: 4px;
}

.wizard-field.compact textarea {
    min-height: 40px;
}

.wizard-section-title.tight {
    margin-bottom: 6px;
    margin-top: 4px;
    padding-bottom: 4px;
}

.wizard-field label {
    display: block;
    font-size: 0.73rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--yl-text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wizard-field label .required {
    color: #A32D2D;
}

/* Ikinci El - kondisyonel alanlar */
.wizard-field.extra-field label {
    color: #8B1A1A;
}
.wizard-field.extra-field input,
.wizard-field.extra-field select {
    border-color: rgba(139,26,26,0.35);
    background: #fff8f8;
}
.wizard-field.extra-field input:focus,
.wizard-field.extra-field select:focus {
    border-color: #8B1A1A;
    box-shadow: 0 0 0 2px rgba(139,26,26,0.1);
}

.wizard-field input,
.wizard-field select,
.wizard-field textarea {
    width: 100%;
    padding: 6px 9px;
    border-radius: 0;
    border: 1px solid var(--yl-border);
    background: #fff;
    color: var(--yl-text);
    font-size: 0.85rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.wizard-field input:focus,
.wizard-field select:focus,
.wizard-field textarea:focus {
    outline: none;
    border-color: #185FA5;
    box-shadow: 0 0 0 2px rgba(24,95,165,0.1);
}

.wizard-field textarea {
    resize: vertical;
    min-height: 54px;
}

.wizard-field input:disabled {
    background: #f4f6fa;
    color: var(--yl-text-light);
}

/* Checkbox row */
.wizard-checkbox-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.wizard-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    cursor: pointer;
}

.wizard-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* "Yetkili (isim yazilmasin)" seciliyken kisi kutucuklari kilitlenir:
   isimsiz hitap ile kisi adi ayni anda basilamaz. */
.wizard-checkbox.kilitli {
    opacity: 0.45;
    cursor: not-allowed;
}
.wizard-checkbox.kilitli input[type="checkbox"] { cursor: not-allowed; }

/* Footer Navigation */
.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 0;
    border-top: 1px solid var(--yl-border);
    flex-shrink: 0;
}

.wizard-footer-left,
.wizard-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auto-save-status {
    color: var(--yl-text-light);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.auto-save-status.saving {
    color: var(--yl-primary);
}

.auto-save-status.error {
    color: #b42318;
}

.wizard-btn {
    padding: 7px 18px;
    border-radius: 0;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--yl-border);
    background: #fff;
    color: var(--yl-text);
    transition: all 0.15s;
}

.wizard-btn:hover { background: #f0f2f5; }
.wizard-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.wizard-btn-cancel {
    background: #fff5f5;
    color: #b42318;
    border-color: #f2b8b5;
}

.wizard-btn-cancel:hover {
    background: #d92d20;
    color: #fff;
    border-color: #d92d20;
}

.wizard-btn-primary {
    background: #185FA5;
    color: #fff;
    border-color: #185FA5;
}
.wizard-btn-primary:hover { background: #0C447C; }

.wizard-btn-success {
    background: #3B6D11;
    color: #fff;
    border-color: #3B6D11;
}
.wizard-btn-success:hover { background: #2d5a0d; }

/* Ara-kayit butonu (Adim 1-3'te footer'da) */
.wizard-btn-save-progress {
    background: #f0f5ff;
    color: var(--yl-primary);
    border-color: rgba(59,125,221,0.35);
    display: inline-flex;
    align-items: center;
}
.wizard-btn-save-progress:hover {
    background: var(--yl-primary);
    color: #fff;
    border-color: var(--yl-primary);
}
.app-root.dark .wizard-btn-save-progress {
    background: rgba(59,125,221,0.1);
    color: #7db4f5;
    border-color: rgba(59,125,221,0.3);
}
.app-root.dark .wizard-btn-save-progress:hover {
    background: rgba(59,125,221,0.25);
    color: #fff;
}

.app-root.dark .wizard-btn-cancel {
    background: rgba(217,45,32,0.12);
    color: #ffb4ab;
    border-color: rgba(217,45,32,0.35);
}

.app-root.dark .wizard-btn-cancel:hover {
    background: #d92d20;
    color: #fff;
    border-color: #d92d20;
}

/* Items Editor - Kompakt */
.items-editor {
    border: 1px solid var(--yl-border);
    border-radius: 0;
    overflow: hidden;
}

.items-toolbar {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--yl-border);
}

.items-list {
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
}

.item-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--yl-border);
    transition: background 0.1s;
}

.item-row:hover { background: #f9fbfd; }
.item-row:last-child { border-bottom: none; }

.item-row-header { background: #c8f1f3; }
.item-row-header:hover { background: #c8f1f3; }
.item-row-header .item-desc { font-weight: 700; color: #075b63; }
.item-row-subitem { padding-left: 30px; }
.item-row-option { padding-left: 30px; font-style: italic; font-weight: 700; }
.item-row-option .item-desc { font-style: italic; font-weight: 700; }

/* SPEC: iki kolon tablo satiri — Ozellik : Deger */
.item-row-spec { background: rgba(59,130,246,0.04); border-left: 2px solid rgba(59,130,246,0.25); }
.item-spec-val {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 430px;
    min-width: 320px;
    max-width: 520px;
    padding: 0 6px;
}
.item-spec-val .spec-colon {
    color: var(--yl-text-light);
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.item-spec-val input,
.item-spec-val textarea {
    flex: 1;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 4px 6px;
    font-size: 0.83rem;
    font-weight: 600;
    background: transparent;
    color: var(--yl-primary);
}
/* Tablo deger alani da cok satirli (Enter / Shift+Enter ile alt satir) */
.item-spec-val textarea {
    font-family: inherit;
    line-height: 1.35;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    field-sizing: content;
    min-height: 1.6em;
}
.item-spec-val input:focus,
.item-spec-val textarea:focus {
    border-color: var(--yl-border);
    background: #fff;
    outline: none;
}

/* SPEC deger gorunum modu (tikla-duzenle, kirmizi "|" paragraf isareti) */
.item-spec-val .item-spec-view {
    flex: 1;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 4px 6px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--yl-primary);
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
    min-height: 1.55em;
}
.item-spec-val .item-spec-view:hover {
    border-color: var(--yl-border);
    background: #fff;
}

.item-row-spec .item-price,
.item-row-spec .item-total {
    display: none;
}

.item-sira {
    min-width: 40px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--yl-text-light);
}

.item-desc { flex: 1; }

.item-desc input,
.item-desc textarea {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 3px 5px;
    border-radius: 0;
    font-size: 0.83rem;
}

/* Cok satirli kalem metni: icerige gore otomatik buyur (Enter / Shift+Enter ile alt satir) */
.item-desc textarea {
    font-family: inherit;
    line-height: 1.35;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    field-sizing: content;
    min-height: 1.6em;
}

.item-desc input:focus,
.item-desc textarea:focus {
    border-color: var(--yl-border);
    background: #fff;
    outline: none;
}

/* Aciklama gorunum modu (tikla-duzenle): cok satir + "|" paragraf isareti */
.item-desc-view {
    width: 100%;
    padding: 3px 5px;
    border: 1px solid transparent;
    font-size: 0.83rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
    min-height: 1.55em;
}
.item-desc-view:hover {
    border-color: var(--yl-border);
    background: #fff;
}
.item-desc-ph { color: #9aa3af; }

/* "|" paragraf isareti — koyu kirmizi, paragraf yaptigimiz belli olsun */
.pipe-mark {
    color: #b91c1c;
    font-weight: 700;
    padding: 0 1px;
}
.app-root.dark .pipe-mark { color: #f87171; }

/* Çeviri bilgi banner'ı (toolbar'ın altında, tam genişlik — flex satırını bozmaz) */
.ceviri-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    margin: 0 0 4px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 0;
    color: #166534;
    font-size: 0.78rem;
    line-height: 1.35;
}
.ceviri-banner > span { flex: 1; min-width: 0; }
.ceviri-banner-close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #166534;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 2px;
}
.ceviri-banner-close:hover { color: #14532d; }
.app-root.dark .ceviri-banner {
    background: rgba(22,101,52,0.18);
    border-color: rgba(34,197,94,0.35);
    color: #86efac;
}
.app-root.dark .ceviri-banner-close { color: #86efac; }

/* Adet ve Birim kutulari daraltildi: kalem-basi Adet/Fiyat toggle butonlarina yer acmak
   icin (urunler cok adetli olmadigindan Adet kutusu kucuk yeter, Birim'de "AD" sigar). */
.item-qty  { width: 40px; }
.item-unit { width: 48px; }
.item-price, .item-total { width: 70px; }

.item-qty input, .item-unit input, .item-price input, .item-total input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 3px 5px;
    border-radius: 0;
    font-size: 0.8rem;
    text-align: right;
}

/* Duzenlenebilir sayi/metin kutulari HER ZAMAN kutu gibi gorunsun — yoksa duz yazi
   gibi duruyor ve kullanici tiklanabilecegini anlamiyor. */
.item-qty input, .item-unit input, .item-price input {
    border: 1px solid var(--yl-border);
    background: #fff;
    cursor: text;
}

.item-qty input:hover, .item-unit input:hover, .item-price input:hover {
    border-color: #94a3b8;
}

.item-qty input:focus, .item-unit input:focus, .item-price input:focus {
    border-color: var(--yl-primary, #0C447C);
    box-shadow: 0 0 0 2px rgba(12,68,124,0.15);
    background: #fff;
    outline: none;
}

/* Fiyat kutusu ekstra vurgulu — kullanici en cok burayi degistiriyor */
.item-price input {
    font-weight: 600;
    color: #0C447C;
}

.item-total input {
    font-weight: 700;
    color: #0C447C;
    border-color: transparent;
    background: transparent;
}

.item-actions {
    display: flex;
    gap: 2px;
}

.item-action-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0;
    font-size: 0.75rem;
    color: var(--yl-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-action-btn:hover { background: #f0f2f5; color: var(--yl-text); }
.item-action-btn.delete:hover { background: #FCEBEB; color: #A32D2D; }
.item-action-btn.item-bold-active { background: var(--yl-primary); color: #fff; border-color: var(--yl-primary); }
.item-action-btn.item-bold-active:hover { background: #2563aa; border-color: #2563aa; }
.item-action-btn.item-italic-active { background: #64748b; color: #fff; border-color: #64748b; }
.item-action-btn.item-italic-active:hover { background: #475569; border-color: #475569; }
.item-action-btn.item-underline-active { background: #0d9488; color: #fff; border-color: #0d9488; }
.item-action-btn.item-underline-active:hover { background: #0f766e; border-color: #0f766e; }
/* Kalem-basi Adet/Fiyat goster toggle'lari (aktif = teklifte gorunur) */
.item-action-btn.item-adet-active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.item-action-btn.item-adet-active:hover { background: #6d28d9; border-color: #6d28d9; }
.item-action-btn.item-fiyat-active { background: #13795b; color: #fff; border-color: #13795b; }
.item-action-btn.item-fiyat-active:hover { background: #0f6249; border-color: #0f6249; }

.items-empty {
    text-align: center;
    padding: 24px;
    color: var(--yl-text-light);
    font-size: 0.78rem;
}

/* Summary box - Kompakt */
.wizard-summary {
    background: #f8f9fa;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 10px 12px;
    margin-top: 8px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
}

.summary-row.total {
    font-weight: 700;
    font-size: 1rem;
    border-top: 2px solid var(--yl-border);
    margin-top: 4px;
    padding-top: 8px;
    color: #0C447C;
}

/* Quick Add Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.quick-modal-content {
    background: #fff;
    border-radius: 0;
    width: 380px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--yl-border);
}

.modal-header h4 { margin: 0; font-size: 0.85rem; }

.btn-close {
    border: none;
    background: none;
    font-size: 1rem;
    cursor: pointer;
    color: var(--yl-text-light);
}

.modal-body { padding: 12px 14px; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--yl-border);
}

/* Custom Select (native select replacement) */
.custom-select {
    position: relative;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 9px;
    border-radius: 0;
    border: 1px solid var(--yl-border);
    background: #fff;
    color: var(--yl-text);
    font-size: 0.85rem;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.2s;
}

.custom-select-trigger:focus {
    outline: none;
    border-color: #185FA5;
    box-shadow: 0 0 0 2px rgba(24,95,165,0.1);
}

.custom-select-trigger svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--yl-text-light);
}

.custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--yl-border);
    border-top: none;
    border-radius: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 500;
}

.custom-select-option {
    display: block;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.83rem;
    color: var(--yl-text);
    text-align: left;
    font-family: inherit;
    transition: background 0.1s;
}

.custom-select-option:hover { background: #eef2ff; }
.custom-select-option.selected { background: #e8f0fe; font-weight: 600; }

.dropdown-search-wrap {
    padding: 5px 6px;
    border-bottom: 1px solid var(--yl-border);
    background: #f9fafb;
    position: sticky;
    top: 0;
    z-index: 1;
}
.dropdown-search-input {
    width: 100%;
    padding: 4px 8px;
    font-size: 0.8rem;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    background: #fff;
    color: var(--yl-text);
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}
.dropdown-search-input:focus { border-color: var(--yl-primary); }

.app-root.dark .dropdown-search-wrap { background: #1a1e2e; }
.app-root.dark .dropdown-search-input { background: var(--yl-bg); color: var(--yl-text); border-color: var(--yl-border); }

/* Dark mode */
.app-root.dark .wizard-content { background: var(--yl-bg); border-color: var(--yl-border); }
.app-root.dark .wizard-step-circle { background: var(--yl-bg); }
.app-root.dark .items-editor { border-color: var(--yl-border); }
.app-root.dark .items-toolbar { background: var(--yl-bg); }
.app-root.dark .item-row:hover { background: rgba(255,255,255,0.03); }
.app-root.dark .item-row-header { background: rgba(20,184,166,0.18); }
.app-root.dark .item-row-header:hover { background: rgba(20,184,166,0.18); }
.app-root.dark .quick-modal-content { background: var(--yl-bg); }
.app-root.dark .wizard-summary { background: #1a1e2e; }
.app-root.dark .custom-select-trigger { background: var(--yl-bg); }
.app-root.dark .custom-select-dropdown { background: var(--yl-bg); }
.app-root.dark .custom-select-option:hover { background: rgba(255,255,255,0.05); }
.app-root.dark .custom-select-option.selected { background: rgba(59,125,221,0.1); }

/* Searchable Select (Musteri autocomplete) */
.searchable-select {
    position: relative;
}

.searchable-select input {
    width: 100%;
    padding: 6px 9px;
    border-radius: 0;
    border: 1px solid var(--yl-border);
    background: #fff;
    color: var(--yl-text);
    font-size: 0.85rem;
    box-sizing: border-box;
}

.searchable-select input:focus {
    outline: none;
    border-color: #185FA5;
    box-shadow: 0 0 0 2px rgba(24,95,165,0.1);
}

.searchable-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--yl-border);
    border-top: none;
    border-radius: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 500;
}

.searchable-select-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.83rem;
    color: var(--yl-text);
    text-align: left;
    font-family: inherit;
    transition: background 0.1s;
}

.searchable-select-item:hover { background: #eef2ff; }
.searchable-select-item.selected { background: #e8f0fe; font-weight: 600; }

.searchable-select-code {
    color: var(--yl-primary);
    font-weight: 600;
    font-size: 0.79rem;
    min-width: 54px;
}

.searchable-select-empty {
    padding: 12px;
    text-align: center;
    color: var(--yl-text-light);
    font-size: 0.83rem;
}

.app-root.dark .searchable-select-dropdown { background: var(--yl-bg); }
.app-root.dark .searchable-select-item:hover { background: rgba(255,255,255,0.05); }
.app-root.dark .searchable-select-item.selected { background: rgba(59,125,221,0.1); }

/* ─── Türkçe tarih girişi (DD.MM.YYYY) — TrDateInput ──────────── */
.tr-date {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--yl-border);
    background: #fff;
    border-radius: 0;
    box-sizing: border-box;
}
.tr-date:focus-within {
    border-color: #185FA5;
    box-shadow: 0 0 0 2px rgba(24,95,165,0.1);
}
.tr-date .tr-date-text {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--yl-text);
    font-size: 0.85rem;
    padding: 6px 9px;
    box-sizing: border-box;
    min-width: 0;
}
.tr-date .tr-date-pick-btn {
    border: none;
    border-left: 1px solid var(--yl-border);
    background: #f8f9fa;
    color: var(--yl-text-light);
    cursor: pointer;
    width: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
}
.tr-date .tr-date-pick-btn:hover { color: var(--yl-primary); background: #eef2f7; }
.tr-date .tr-date-pick-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tr-date .tr-date-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    right: 0;
    top: 0;
}

.app-root.dark .tr-date {
    background: var(--yl-bg);
    border-color: var(--yl-border);
}
.app-root.dark .tr-date .tr-date-text { color: var(--yl-text); }
.app-root.dark .tr-date .tr-date-pick-btn {
    background: #161b22;
    border-left-color: var(--yl-border);
    color: var(--yl-text-light);
}
.app-root.dark .tr-date .tr-date-pick-btn:hover { background: rgba(255,255,255,0.05); color: var(--yl-text); }

/* Filtre cubugu icin dar surum: .tr-date varsayilan olarak width:100% (form alani)
   oldugundan arac cubugunda tum satiri kaplardi. Yukseklik komsu filtre
   dugmeleriyle ayni (30px). */
.tr-date.tr-date-sm {
    width: auto;
    flex: 0 0 auto;
    min-height: 30px;
}
.tr-date.tr-date-sm .tr-date-text {
    width: 96px;
    font-size: 0.76rem;
    padding: 4px 7px;
}
.tr-date.tr-date-sm .tr-date-pick-btn { width: 24px; }
/* Koyu temada komsu filtre kontrolleri (.qt-date-input vb.) #161b22 kullaniyor;
   varsayilan .tr-date arka plani onlardan farkli duruyordu. */
.app-root.dark .tr-date.tr-date-sm { background: #161b22; border-color: #3a4250; }
.app-root.dark .tr-date.tr-date-sm .tr-date-pick-btn { background: #1c2128; border-left-color: #3a4250; }
@media (max-width: 768px) {
    /* Telefonda dokunma hedefi: ham date input'un yerini aldigi icin ayni
       yukseklikte kalmali (gor-qf-date/qt-date-input mobil kurallariyla ayni). */
    .tr-date.tr-date-sm { min-height: 36px; }
    .tr-date.tr-date-sm .tr-date-text { width: 104px; }
    .tr-date.tr-date-sm .tr-date-pick-btn { width: 32px; }
}

/* ─── Zirve / Resmi Cari arama öğeleri ──────────────────────── */
.qw-badge-zrv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    background: #1e3a6e;
    color: #fff;
    padding: 1px 5px;
    border-radius: 0;
    flex-shrink: 0;
    text-transform: uppercase;
}
.qw-cari-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qw-cari-linked {
    font-size: 0.7rem;
    color: var(--yl-text-light);
    white-space: nowrap;
    flex-shrink: 0;
}
.qw-cari-warn {
    font-size: 0.68rem;
    font-weight: 600;
    color: #d97706;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Zirve firmasi — ayni cari uc firmada ayri satir; hangisi oldugu gorunsun */
.qw-cari-firma {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--yl-text-light);
    white-space: nowrap;
    flex-shrink: 0;
}
/* Eşleşmemiş satır — tıklanamaz, soluk */
.qw-cari-unmatched {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* Dark mode */
.app-root.dark .qw-badge-zrv { background: #2a4a8a; }
.app-root.dark .qw-cari-linked { color: #8b949e; }
.app-root.dark .qw-cari-warn { color: #fbbf24; }
.app-root.dark .qw-cari-firma { color: #8b949e; }

/* ============================================================
   QUOTE ITEMS EDITOR — DUAL PANE (v2)
   Sol: teklife eklenen kalemler  |  Sağ: şablon ağacı
   ============================================================ */
.items-editor.v2 {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    overflow: hidden;
    min-height: 360px;
    background: #fff;
}

.items-editor.v2 .pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.items-editor.v2 .pane-left {
    flex: 1 1 60%;
}

.items-editor.v2 .pane-right {
    flex: 1 1 40%;
    background: #fafbfc;
}

/* Pane resizer — sol/sağ panel arasındaki sürüklenebilir bölücü */
.items-editor.v2 .pane-resizer {
    width: 5px;
    min-width: 5px;
    background: var(--yl-border);
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    transition: background 0.15s;
    z-index: 10;
}
.items-editor.v2 .pane-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 28px;
    background: rgba(0,0,0,0.18);
    pointer-events: none;
}
.items-editor.v2 .pane-resizer:hover {
    background: var(--yl-primary);
}
.items-editor.v2 .pane-resizer:hover::after {
    background: rgba(255,255,255,0.55);
}
.items-editor.v2 .pane-resizer.is-resizing {
    background: var(--yl-primary);
}
.items-editor.v2 .pane-resizer.is-resizing::after {
    background: rgba(255,255,255,0.55);
    height: 40px;
}
/* Resize sırasında metin seçimini ve pointer karışmalarını engelle */
.items-editor.v2.resize-active {
    user-select: none;
    -webkit-user-select: none;
    cursor: col-resize;
}
.items-editor.v2.resize-active *:not(.pane-resizer) {
    cursor: col-resize !important;
}
/* Mobilde resizer'ı gizle (dikey istifde gereksiz) */
@media (max-width: 900px) {
    .items-editor.v2 .pane-resizer { display: none; }
}

.items-editor.v2 .pane-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--yl-border);
    min-height: 38px;
}

.items-editor.v2 .pane-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--yl-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex: 1;
    min-width: 0;
}

.items-editor.v2 .pane-count {
    background: var(--yl-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 0;
    margin-left: 2px;
}

.items-editor.v2 .pane-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.items-editor.v2 .pane-history-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.items-editor.v2 .item-history-btn {
    width: 26px;
    height: 24px;
    border: 1px solid var(--yl-border);
    background: #fff;
    color: var(--yl-primary);
    cursor: pointer;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.12s;
}

.items-editor.v2 .item-history-btn svg {
    width: 14px;
    height: 14px;
}

.items-editor.v2 .item-history-btn:hover:not(:disabled) {
    background: #eef3ff;
    border-color: var(--yl-primary);
}

.items-editor.v2 .item-history-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    color: var(--yl-text-light);
}

.items-editor.v2 .pane-btn {
    border: 1px solid var(--yl-border);
    background: #fff;
    color: var(--yl-text);
    padding: 4px 9px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.items-editor.v2 .pane-btn:hover {
    background: #eef2f7;
    border-color: #c8d0db;
}

.items-editor.v2 .pane-btn.primary {
    background: var(--yl-primary);
    border-color: var(--yl-primary);
    color: #fff;
}

.items-editor.v2 .pane-btn.primary:hover { background: #2563aa; }
.items-editor.v2 .pane-btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }

.items-editor.v2 .pane-btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--yl-text-light);
}
.items-editor.v2 .pane-btn.ghost:hover { color: var(--yl-text); background: #f0f2f5; }

.items-editor.v2 .pane-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* — Sol panel item satır drag-grip — */
.items-editor.v2 .item-drag-grip {
    width: 22px;
    height: 22px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
    color: #94a3b8;
    transition: all 0.12s;
    border-radius: 0;
}
.items-editor.v2 .item-row:hover .item-drag-grip {
    color: var(--yl-primary);
    background: rgba(59,125,221,0.08);
}
.items-editor.v2 .item-drag-grip:hover {
    color: #fff !important;
    background: var(--yl-primary) !important;
}
.items-editor.v2 .item-drag-grip:active { cursor: grabbing; }

.items-editor.v2 .item-row { cursor: default; }
.items-editor.v2 .item-row.dragging {
    opacity: 0.35;
    background: rgba(59,125,221,0.04) !important;
}
.items-editor.v2 .item-row.drop-target-row {
    background: rgba(59,125,221,0.06) !important;
}
.items-editor.v2 .item-row.drop-target-row.drop-above {
    box-shadow: inset 0 3px 0 0 var(--yl-primary);
}
.items-editor.v2 .item-row.drop-target-row.drop-below {
    box-shadow: inset 0 -3px 0 0 var(--yl-primary);
}

/* Drop zone vurgusu — sol panel boş alana sürüklenirken */
.items-editor.v2 .items-list.drop-target {
    background: rgba(59,125,221,0.04);
    box-shadow: inset 0 0 0 2px var(--yl-primary);
}
.items-editor.v2.drag-active .items-list { transition: background 0.15s; }

/* Sol panel başlık ipucu (sürükle-bırak) */
.items-editor.v2 .pane-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--yl-text-light);
    font-weight: 500;
    flex-shrink: 0;
}

/* — Sağ panel arama kutusu — */
.items-editor.v2 .pane-search-wrap {
    padding: 6px 8px;
    background: #fafbfc;
    border-bottom: 1px solid var(--yl-border);
}

.items-editor.v2 .pane-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 0 8px;
    height: 28px;
}

.items-editor.v2 .pane-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8rem;
    color: var(--yl-text);
}

.items-editor.v2 .search-clear {
    border: none;
    background: none;
    color: var(--yl-text-light);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px;
}
.items-editor.v2 .search-clear:hover { color: #dc2626; }

/* — Yeni grup formu (inline) — */
.items-editor.v2 .new-group-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: #eef4ff;
    border-bottom: 1px solid var(--yl-border);
}
.items-editor.v2 .new-group-form input[type="text"] {
    border: 1px solid var(--yl-border);
    background: #fff;
    border-radius: 0;
    padding: 5px 8px;
    font-size: 0.83rem;
    outline: none;
}
.items-editor.v2 .new-group-form input[type="text"]:focus {
    border-color: var(--yl-primary);
}
.items-editor.v2 .new-group-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.items-editor.v2 .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--yl-text);
    cursor: pointer;
}
.items-editor.v2 .radio-inline input { margin: 0; }

/* — Şablon ağacı — gruplar ve detaylar — */
.items-editor.v2 .groups-tree { padding: 2px 0; }

.items-editor.v2 .group-node {
    border-bottom: 1px solid #eef1f6;
}

.items-editor.v2 .group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 4px;
    cursor: grab;
    transition: background 0.1s;
    user-select: none;
}
.items-editor.v2 .group-header:hover { background: #eef3ff; }
.items-editor.v2 .group-header.expanded { background: #e6efff; }
.items-editor.v2 .group-header:active { cursor: grabbing; }

.items-editor.v2 .chevron-btn {
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--yl-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0;
}
.items-editor.v2 .chevron-btn:hover { color: var(--yl-primary); }

.items-editor.v2 .group-name {
    flex: 1;
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--yl-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.items-editor.v2 .group-sub {
    font-size: 0.66rem;
    color: var(--yl-text-light);
    flex-shrink: 0;
}

.items-editor.v2 .group-badge {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 5px;
    background: rgba(59,125,221,0.1);
    color: var(--yl-primary);
    border-radius: 0;
    flex-shrink: 0;
}

.items-editor.v2 .group-add-btn,
.items-editor.v2 .detail-add-btn {
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--yl-text-light);
    cursor: pointer;
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
}

/* Grup ve detay icin duzenle/sil ikonu */
.items-editor.v2 .group-tool-btn,
.items-editor.v2 .detail-tool-btn {
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--yl-text-light);
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.12s;
}
.items-editor.v2 .group-header:hover .group-tool-btn,
.items-editor.v2 .detail-node:hover .detail-tool-btn,
.items-editor.v2 .sablon-card:hover .group-tool-btn {
    opacity: 1;
}
.items-editor.v2 .group-tool-btn:hover {
    border-color: var(--yl-primary);
    color: var(--yl-primary);
    background: rgba(59,125,221,0.08);
}
.items-editor.v2 .detail-tool-btn:hover {
    border-color: var(--yl-primary);
    color: var(--yl-primary);
    background: rgba(59,125,221,0.08);
}
.items-editor.v2 .group-tool-btn.delete:hover,
.items-editor.v2 .detail-tool-btn.delete:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fee2e2;
}

/* Inline yeni kalem satiri (genisletilmis grubun altinda) */
.items-editor.v2 .add-kalem-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 22px;
    border-top: 1px dashed rgba(59,125,221,0.2);
    background: rgba(59,125,221,0.03);
}
.items-editor.v2 .add-kalem-bullet {
    color: var(--yl-primary);
    font-weight: 700;
    flex-shrink: 0;
    font-size: 0.95rem;
}
.items-editor.v2 .add-kalem-row input {
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.78rem;
    color: var(--yl-text);
    padding: 3px 6px;
    outline: none;
    border-radius: 0;
}
.items-editor.v2 .add-kalem-row input:focus {
    border-color: var(--yl-primary);
    background: #fff;
}
.items-editor.v2 .add-kalem-row input::placeholder {
    color: var(--yl-text-light);
    font-style: italic;
}
.items-editor.v2 .kalem-add-confirm {
    width: 22px;
    height: 22px;
    border: 1px solid var(--yl-primary);
    background: var(--yl-primary);
    color: #fff;
    cursor: pointer;
    border-radius: 0;
    font-weight: 700;
    flex-shrink: 0;
}
.items-editor.v2 .kalem-add-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
    color: var(--yl-text-light);
    border-color: var(--yl-border);
}

/* Multi-lang grid (modal icinde dil alanlari) */
.lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}
.lang-grid.wide {
    grid-template-columns: 1fr;
}
.lang-grid label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--yl-text-light);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.lang-grid label input,
.lang-grid label textarea {
    border: 1px solid var(--yl-border);
    background: #fff;
    border-radius: 0;
    padding: 5px 8px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--yl-text);
    text-transform: none;
    letter-spacing: normal;
    outline: none;
}
/* Modal dil alanlari: cok satirli, icerige gore buyuyen */
.lang-grid label textarea {
    font-family: inherit;
    line-height: 1.4;
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-word;
    field-sizing: content;
    min-height: 2.2em;
}
.lang-grid label input:focus,
.lang-grid label textarea:focus {
    border-color: var(--yl-primary);
    box-shadow: 0 0 0 2px rgba(24,95,165,0.1);
}

/* Ceviri kaynagi rozeti (Otomatik / Manuel) — dil alaninin hemen altinda */
.ceviri-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    padding: 1px 5px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 0;
    width: fit-content;
}
.ceviri-badge.ceviri-otomatik {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.ceviri-badge.ceviri-manuel {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.app-root.dark .ceviri-badge.ceviri-otomatik {
    background: rgba(59,125,221,0.12);
    color: #93c5fd;
    border-color: rgba(59,125,221,0.35);
}
.app-root.dark .ceviri-badge.ceviri-manuel {
    background: rgba(234,88,12,0.12);
    color: #fdba74;
    border-color: rgba(234,88,12,0.35);
}

/* Kalem kopyalama: hangi alan degisti / hangisi silinecek */
.ceviri-badge.kopya-yeni  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ceviri-badge.kopya-sil   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ceviri-badge.kopya-ayni  { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.app-root.dark .ceviri-badge.kopya-yeni { background: rgba(22,163,74,0.12); color: #86efac; border-color: rgba(22,163,74,0.35); }
.app-root.dark .ceviri-badge.kopya-sil  { background: rgba(220,38,38,0.12); color: #fca5a5; border-color: rgba(220,38,38,0.35); }
.app-root.dark .ceviri-badge.kopya-ayni { background: rgba(148,163,184,0.10); color: #94a3b8; border-color: rgba(148,163,184,0.30); }

.kopya-serit {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0;
    padding: 6px 8px;
    font-size: 0.74rem;
    color: #92400e;
    line-height: 1.35;
}
.kopya-serit-sil { margin-top: 3px; color: #b91c1c; }
.app-root.dark .kopya-serit {
    background: rgba(234,179,8,0.10);
    border-color: rgba(234,179,8,0.35);
    color: #fcd34d;
}
.app-root.dark .kopya-serit-sil { color: #fca5a5; }

.kopya-msg {
    font-size: 0.74rem;
    color: #b91c1c;
    max-width: 260px;
    line-height: 1.25;
}
.kopya-sil-listesi {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0;
    padding: 6px 8px;
    font-weight: 700;
    color: #b91c1c;
    font-size: 0.84rem;
}
.app-root.dark .kopya-sil-listesi {
    background: rgba(220,38,38,0.12);
    border-color: rgba(220,38,38,0.35);
    color: #fca5a5;
}
.wizard-btn.kopya-btn-sil {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}
.wizard-btn.kopya-btn-sil:hover { background: #991b1b; border-color: #991b1b; }

/* Dark mode */
.app-root.dark .items-editor.v2 .add-kalem-row {
    background: rgba(59,125,221,0.06);
    border-top-color: rgba(59,125,221,0.3);
}
.app-root.dark .lang-grid label input,
.app-root.dark .lang-grid label textarea {
    background: #161b22;
    border-color: var(--yl-border);
}

.items-editor.v2 .group-header:hover .group-add-btn,
.items-editor.v2 .detail-node:hover .detail-add-btn {
    border-color: var(--yl-primary);
    color: var(--yl-primary);
}
.items-editor.v2 .group-add-btn:hover,
.items-editor.v2 .detail-add-btn:hover {
    background: var(--yl-primary) !important;
    color: #fff !important;
    border-color: var(--yl-primary) !important;
}

.items-editor.v2 .group-details {
    background: #fff;
    border-top: 1px solid #eef1f6;
    padding: 1px 0;
}

.items-editor.v2 .detail-node {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 26px;
    font-size: 0.78rem;
    color: var(--yl-text);
    cursor: grab;
    border-bottom: 1px solid #f3f5f8;
    transition: background 0.1s;
}
.items-editor.v2 .detail-node:hover { background: #f5f8ff; }
.items-editor.v2 .detail-node:last-child { border-bottom: none; }
.items-editor.v2 .detail-node:active { cursor: grabbing; }

.items-editor.v2 .detail-note-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 6px 47px;
    border-bottom: 1px solid #f3f5f8;
    background: #fbfdff;
}

.items-editor.v2 .detail-note-label {
    width: 72px;
    flex-shrink: 0;
    color: var(--yl-text-light);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.items-editor.v2 .detail-note-edit {
    flex: 1;
    min-width: 0;
    border: 1px solid #dce3ec;
    background: #fff;
    color: var(--yl-text);
    font-size: 0.74rem;
    padding: 3px 5px;
    outline: none;
}

.items-editor.v2 .detail-note-edit:focus {
    border-color: var(--yl-primary);
    box-shadow: 0 0 0 2px rgba(24,95,165,0.1);
}

.items-editor.v2 .detail-note-style-btn {
    width: 24px;
    height: 22px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--yl-text-light);
    font-size: 0.72rem;
    font-weight: 700;
}

.items-editor.v2 .detail-note-style-btn.active {
    background: var(--yl-primary);
    border-color: var(--yl-primary);
    color: #fff;
}

.items-editor.v2 .detail-bullet {
    color: var(--yl-text-light);
    font-weight: 700;
    flex-shrink: 0;
}

.items-editor.v2 .detail-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.items-editor.v2 .detail-value-edit,
.items-editor.v2 .detail-price-edit {
    width: 180px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.74rem;
    text-align: right;
    padding: 2px 4px;
    border-radius: 0;
    outline: none;
    flex-shrink: 0;
    font-family: inherit;
}
.items-editor.v2 .detail-value-edit { color: var(--yl-primary); font-weight: 600; }
.items-editor.v2 .detail-price-edit { color: #1e6c38; font-weight: 700; width: 70px; }

/* Detay deger / alt aciklama alanlari cok satirli (Enter / Shift+Enter ile alt satir) */
.items-editor.v2 textarea.detail-value-edit,
.items-editor.v2 textarea.detail-note-edit {
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    field-sizing: content;
    line-height: 1.35;
    min-height: 1.5em;
}

/* Detay deger / alt aciklama gorunum modu (tikla-duzenle, kirmizi "|" paragraf isareti) */
.items-editor.v2 .detail-value-view,
.items-editor.v2 .detail-note-view {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.35;
    cursor: text;
    min-height: 1.4em;
}

.items-editor.v2 .detail-price-cur {
    font-size: 0.74rem;
    font-weight: 700;
    color: #1e6c38;
    flex-shrink: 0;
    min-width: 14px;
    text-align: left;
    margin-left: -2px;
}

.items-editor.v2 .detail-node:hover .detail-value-edit,
.items-editor.v2 .detail-node:hover .detail-price-edit {
    border-color: rgba(59,125,221,0.18);
    background: #fff;
}
.items-editor.v2 .detail-value-edit:focus,
.items-editor.v2 .detail-price-edit:focus {
    border-color: var(--yl-primary);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(24,95,165,0.1);
}
.items-editor.v2 .detail-value-edit::placeholder,
.items-editor.v2 .detail-price-edit::placeholder {
    color: #b0b6c1;
    font-weight: 500;
}
/* Number input spinner'larini gizle */
.items-editor.v2 .detail-price-edit::-webkit-outer-spin-button,
.items-editor.v2 .detail-price-edit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.items-editor.v2 .detail-price-edit { -moz-appearance: textfield; }

.detail-note-modal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 4px;
}

.detail-note-modal input[type="text"],
.detail-note-modal textarea {
    border: 1px solid var(--yl-border);
    padding: 6px 8px;
    font-weight: 400;
}

/* Modal icindeki cok satirli alanlar (Deger / Alt aciklama) */
.quick-modal-content textarea.modal-multiline {
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 5px 8px;
    background: #fff;
    color: var(--yl-text);
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-word;
    field-sizing: content;
    min-height: 2.2em;
    outline: none;
}
.quick-modal-content textarea.modal-multiline:focus {
    border-color: var(--yl-primary);
    box-shadow: 0 0 0 2px rgba(24,95,165,0.1);
}
.app-root.dark .quick-modal-content textarea.modal-multiline {
    background: #161b22;
    border-color: var(--yl-border);
    color: var(--yl-text);
}

.detail-note-modal-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.78rem;
}

.items-editor.v2 .detail-loading,
.items-editor.v2 .detail-empty {
    font-size: 0.74rem;
    color: var(--yl-text-light);
    padding: 6px 26px;
    font-style: italic;
}

/* Grup içi arama kutusu (expanded grupta detay filtresi) */
.items-editor.v2 .group-detail-search {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 8px 4px 22px;
    padding: 0 7px;
    height: 24px;
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
}
.items-editor.v2 .group-detail-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.76rem;
    color: var(--yl-text);
    padding: 0;
}
.items-editor.v2 .group-detail-search input::placeholder {
    color: #b0b6c1;
    font-weight: 500;
}
.app-root.dark .items-editor.v2 .group-detail-search {
    background: #161b22;
    border-color: var(--yl-border);
}

/* — Mobil / tablet: dikey istif — */
@media (max-width: 900px) {
    .items-editor.v2 {
        flex-direction: column;
        min-height: 480px;
    }
    .items-editor.v2 .pane-left,
    .items-editor.v2 .pane-right {
        flex: 1 1 auto;
        border-right: none;
    }
    .items-editor.v2 .pane-left {
        border-bottom: 2px solid var(--yl-border);
        max-height: 50%;
    }
    .items-editor.v2 .pane-right {
        max-height: 50%;
    }
}

/* — Dark mode — */
.app-root.dark .items-editor.v2 {
    background: var(--yl-bg);
    border-color: var(--yl-border);
}
.app-root.dark .items-editor.v2 .pane-resizer {
    background: var(--yl-border);
}
.app-root.dark .items-editor.v2 .pane-resizer:hover,
.app-root.dark .items-editor.v2 .pane-resizer.is-resizing {
    background: var(--yl-primary);
}
.app-root.dark .items-editor.v2 .pane-right {
    background: #0d1117;
}
.app-root.dark .items-editor.v2 .pane-header {
    background: var(--yl-bg);
    border-bottom-color: var(--yl-border);
}
.app-root.dark .items-editor.v2 .pane-search-wrap {
    background: #0d1117;
    border-bottom-color: var(--yl-border);
}
.app-root.dark .items-editor.v2 .pane-search {
    background: #161b22;
    border-color: var(--yl-border);
}
.app-root.dark .items-editor.v2 .pane-btn {
    background: #161b22;
    border-color: var(--yl-border);
    color: var(--yl-text);
}
.app-root.dark .items-editor.v2 .pane-btn:hover {
    background: rgba(255,255,255,0.05);
}
.app-root.dark .items-editor.v2 .item-history-btn {
    background: #161b22;
    border-color: var(--yl-border);
    color: #7db4f5;
}
.app-root.dark .items-editor.v2 .item-history-btn:hover:not(:disabled) {
    background: rgba(59,125,221,0.16);
    border-color: var(--yl-primary);
}
.app-root.dark .items-editor.v2 .group-node {
    border-bottom-color: rgba(255,255,255,0.05);
}
.app-root.dark .items-editor.v2 .group-header:hover {
    background: rgba(59,125,221,0.08);
}
.app-root.dark .items-editor.v2 .group-header.expanded {
    background: rgba(59,125,221,0.12);
}
.app-root.dark .items-editor.v2 .group-details {
    background: var(--yl-bg);
    border-top-color: rgba(255,255,255,0.05);
}
.app-root.dark .items-editor.v2 .detail-node {
    border-bottom-color: rgba(255,255,255,0.04);
}
.app-root.dark .items-editor.v2 .detail-node:hover {
    background: rgba(59,125,221,0.08);
}
.app-root.dark .items-editor.v2 .detail-note-row {
    background: rgba(255,255,255,0.02);
    border-bottom-color: rgba(255,255,255,0.04);
}
.app-root.dark .items-editor.v2 .detail-note-edit,
.app-root.dark .detail-note-modal input[type="text"],
.app-root.dark .detail-note-modal textarea {
    background: #161b22;
    border-color: var(--yl-border);
    color: var(--yl-text);
}
.app-root.dark .items-editor.v2 .group-badge {
    background: rgba(59,125,221,0.18);
    color: #7db4f5;
}
.app-root.dark .items-editor.v2 .new-group-form {
    background: rgba(59,125,221,0.08);
}
.app-root.dark .items-editor.v2 .new-group-form input[type="text"] {
    background: #161b22;
    border-color: var(--yl-border);
    color: var(--yl-text);
}
.app-root.dark .items-editor.v2 .items-list.drop-target {
    background: rgba(59,125,221,0.1);
}
.app-root.dark .items-editor.v2 .detail-value-edit { color: #7db4f5; }
.app-root.dark .items-editor.v2 .detail-price-edit { color: #4ade80; }
.app-root.dark .items-editor.v2 .detail-price-cur { color: #4ade80; }
.app-root.dark .items-editor.v2 .detail-node:hover .detail-value-edit,
.app-root.dark .items-editor.v2 .detail-node:hover .detail-price-edit {
    border-color: rgba(59,125,221,0.25);
    background: #161b22;
}
.app-root.dark .items-editor.v2 .detail-value-edit:focus,
.app-root.dark .items-editor.v2 .detail-price-edit:focus {
    background: #161b22;
}

/* ============================================================
   TEKNIK OZELLIKLER EDITOR
   ============================================================ */
.spec-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spec-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    border: 1.5px dashed var(--yl-border);
    border-radius: 0;
    background: #fafbfc;
}

.spec-group {
    border: 1px solid var(--yl-border);
    border-radius: 0;
    overflow: hidden;
    background: #fff;
}

.spec-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #f0f4fb;
    border-bottom: 1px solid var(--yl-border);
}

.spec-group-name {
    flex: 1;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--yl-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.spec-group-del {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--yl-text-light);
    transition: all 0.12s;
}

.spec-group-del:hover {
    background: #fee2e2;
    color: #dc2626;
}

.spec-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid #f0f2f5;
}

.spec-row:last-of-type {
    border-bottom: none;
}

.spec-input {
    padding: 4px 7px;
    border-radius: 0;
    border: 1px solid var(--yl-border);
    background: #fff;
    color: var(--yl-text);
    font-size: 0.76rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.spec-input:focus {
    outline: none;
    border-color: #185FA5;
    box-shadow: 0 0 0 2px rgba(24,95,165,0.09);
}

.spec-ozellik {
    flex: 1.4;
}

.spec-deger {
    flex: 1;
}

.spec-del-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--yl-text-light);
    flex-shrink: 0;
    transition: all 0.12s;
}

.spec-del-btn:hover {
    background: #fee2e2;
    color: #dc2626;
}

.spec-add-row-btn {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border: none;
    border-top: 1px dashed #e0e5ef;
    background: #fafbfc;
    color: var(--yl-primary);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

.spec-add-row-btn:hover {
    background: #edf2fc;
}

/* Yeni grup ekleme bolumu */
.spec-new-group {
    border: 1.5px dashed #c9d4e8;
    border-radius: 0;
    padding: 10px 12px;
    background: #f8faff;
}

.spec-new-group-inputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spec-group-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.spec-suggestion-btn {
    padding: 3px 9px;
    border: 1px solid #c2cfe0;
    border-radius: 0;
    background: #fff;
    color: var(--yl-primary);
    font-size: 0.69rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}

.spec-suggestion-btn:hover {
    background: #185FA5;
    color: #fff;
    border-color: #185FA5;
}

.spec-custom-group {
    display: flex;
    gap: 7px;
    align-items: center;
}

.spec-custom-group .spec-input {
    flex: 1;
}

.spec-add-group-btn {
    padding: 4px 12px;
    font-size: 0.73rem;
    white-space: nowrap;
}

/* Dark mode */
.app-root.dark .spec-group { background: var(--yl-bg); }
.app-root.dark .spec-group-header { background: rgba(24,95,165,0.08); }
.app-root.dark .spec-empty { background: rgba(255,255,255,0.02); }
.app-root.dark .spec-add-row-btn { background: rgba(255,255,255,0.02); }
.app-root.dark .spec-add-row-btn:hover { background: rgba(24,95,165,0.1); }
.app-root.dark .spec-new-group { background: rgba(255,255,255,0.02); }
.app-root.dark .spec-suggestion-btn { background: var(--yl-bg); border-color: rgba(255,255,255,0.12); }
.app-root.dark .spec-input { background: var(--yl-bg); color: var(--yl-text); }

/* ============================================================
   EKLER EDITOR (Fotograflar & Teknik Cizimler)
   ============================================================ */
.ekler-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ekler-section {
    border: 1px solid var(--yl-border);
    border-radius: 0;
    overflow: hidden;
    background: #fff;
}

.ekler-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #f0f4fb;
    border-bottom: 1px solid var(--yl-border);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--yl-primary);
}

.ekler-count {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--yl-text-light);
    background: rgba(24,95,165,0.08);
    padding: 1px 7px;
    border-radius: 0;
}

.ekler-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
}

.ekler-card {
    width: 100px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    overflow: hidden;
    background: #fafbfc;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.12s;
}

.ekler-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ekler-thumb-wrap {
    width: 100%;
    height: 70px;
    background: #eef0f4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ekler-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ekler-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ekler-info {
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ekler-name {
    font-size: 0.66rem;
    color: var(--yl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ekler-pdf-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.64rem;
    color: var(--yl-text-light);
    cursor: pointer;
}

.ekler-pdf-toggle input[type="checkbox"] {
    width: 11px;
    height: 11px;
    cursor: pointer;
    margin: 0;
}

.ekler-del-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: none;
    background: rgba(0,0,0,0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.12s;
}

.ekler-card:hover .ekler-del-btn {
    opacity: 1;
}

.ekler-del-btn:hover {
    background: #dc2626;
}

/* Vitrin (kapak) fotografi — uretim listesinde satir basinda gorunen resim */
.ekler-vitrin-btn {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: none;
    background: rgba(0,0,0,0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.12s;
}

.ekler-card:hover .ekler-vitrin-btn {
    opacity: 1;
}

.ekler-vitrin-btn:hover {
    background: #b45309;
}

.ekler-vitrin-btn.is-on {
    opacity: 1;
    background: #d97706;
}

.ekler-card.is-vitrin {
    outline: 2px solid #d97706;
    outline-offset: -2px;
}

/* Paylas — cihazin kendi paylasim menusunu acar (WhatsApp, e-posta, Telegram...) */
.ekler-paylas-btn {
    position: absolute;
    top: 3px;
    right: 27px;
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: none;
    background: rgba(0,0,0,0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.12s;
}

.ekler-card:hover .ekler-paylas-btn { opacity: 1; }
.ekler-paylas-btn:hover { background: #16a34a; }
.ekler-paylas-btn:disabled { opacity: 1; background: #16a34a; cursor: default; }

.ekler-paylas-bekle {
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 50%;              /* donen halka - kare olamaz */
    animation: ekler-paylas-don 0.7s linear infinite;
}

@keyframes ekler-paylas-don { to { transform: rotate(360deg); } }

/* Dokunmatik cihazda "uzerine gelme" yoktur: dugmeler her zaman gorunur */
@media (hover: none) {
    .ekler-paylas-btn,
    .ekler-del-btn,
    .ekler-vitrin-btn { opacity: 1; }
}

.ekler-upload-btn {
    width: 100px;
    height: 110px;
    border: 1.5px dashed #c9d4e8;
    border-radius: 0;
    background: #fafbff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.15s;
    font-family: inherit;
}

.ekler-upload-btn:hover:not(:disabled) {
    background: #edf2fc;
    border-color: #185FA5;
}

.ekler-upload-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sürükle-bırak yükleme bölgesi: <label> hem tıklamayı hem drop'u alır,
   gizli InputFile yalnızca Blazor köprüsü olarak durur (tıkla/JS-drop tetikler) */
.ekler-dropzone {
    position: relative;
}
.ekler-file-hidden {
    display: none;
}
/* Buton gibi gorunen dosya-secme etiketi (gizli InputFile sarar). Etikete
   tiklamak dosya secimini dogrudan acar -> hem web hem MAUI WebView'da calisir,
   platforma ozel dosya secici gerekmez. */
.yl-file-label {
    cursor: pointer;
}
.yl-file-label.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.ekler-dropzone.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.ekler-upload-btn.drag-over {
    background: #e3edfc;
    border-color: #185FA5;
    border-style: solid;
}
.app-root.dark .ekler-upload-btn.drag-over {
    background: rgba(24,95,165,0.18);
    border-color: #185FA5;
}

.ekler-error {
    padding: 6px 10px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 0.74rem;
    border-radius: 0;
}

.ekler-uploading {
    padding: 6px 10px;
    background: #eff6ff;
    color: #185FA5;
    font-size: 0.74rem;
    border-radius: 0;
}

/* Step 4 info message */
.step4-save-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0;
    font-size: 0.78rem;
    color: #92400e;
}

/* Lookup Manager — dropdown secenekleri yonetim paneli */
.lookup-mgr-btn {
    padding: 4px 8px;
    font-size: 0.8rem;
    line-height: 1;
    flex-shrink: 0;
    height: 32px;
    align-self: flex-start;
    margin-top: 0;
}

.lookup-manager-panel {
    margin-top: 4px;
    border: 1px solid var(--yl-border);
    background: var(--yl-bg-secondary, #f8f9fa);
    padding: 6px 8px;
}

.lookup-mgr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 0.8rem;
    color: var(--yl-text);
}

.lookup-mgr-row button {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 4px;
    line-height: 1;
}

.lookup-mgr-row button:hover { color: #a71d2a; }

.lookup-mgr-add {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--yl-border);
}

.lookup-mgr-add input {
    flex: 1;
    padding: 3px 6px;
    font-size: 0.78rem;
    border: 1px solid var(--yl-border);
    outline: none;
    height: 26px;
}

.lookup-mgr-add button {
    padding: 3px 10px;
    font-size: 0.82rem;
    background: var(--yl-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    height: 26px;
}

.lookup-mgr-add button:hover { background: var(--yl-primary-dark, #1450a3); }

/* Dark mode */
.app-root.dark .ekler-section { background: var(--yl-bg); }
.app-root.dark .ekler-section-header { background: rgba(24,95,165,0.08); }
.app-root.dark .ekler-card { background: rgba(255,255,255,0.03); }
.app-root.dark .ekler-thumb-wrap { background: rgba(255,255,255,0.05); }
.app-root.dark .ekler-upload-btn { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.1); }

/* Responsive */
@media (max-width: 768px) {
    .wizard-grid2 { grid-template-columns: 1fr; }
    .wizard-grid3 { grid-template-columns: 1fr; }
    .wizard-grid4 { grid-template-columns: 1fr 1fr; }
    .wizard-row { grid-template-columns: 1fr !important; }
    .wizard-steps { flex-wrap: wrap; gap: 6px; }
    .wizard-step-line { width: 20px; }
    .item-qty  { width: 38px; }
    .item-unit { width: 44px; }
    .item-price, .item-total { width: 55px; }
    .ekler-card, .ekler-upload-btn { width: 85px; }
    .ekler-thumb-wrap { height: 58px; }
}

/* ── Tam Şablon — Pane Tabs ─────────────────────────────── */
.items-editor.v2 .pane-header {
    flex-wrap: wrap;
    gap: 4px;
}
.items-editor.v2 .pane-tabs {
    display: flex;
    gap: 0;
    flex: 1;
}
.items-editor.v2 .pane-tab {
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: transparent;
    border: 1px solid var(--yl-border);
    color: var(--yl-text-light);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-radius: 0;
}
.items-editor.v2 .pane-tab:first-child { border-right: none; }
.items-editor.v2 .pane-tab.active {
    background: var(--yl-primary);
    border-color: var(--yl-primary);
    color: #fff;
}
.items-editor.v2 .pane-tab:not(.active):hover {
    background: #eef2f7;
    color: var(--yl-text);
}

/* ── Şablon Kaydet Butonu (sol panel) ────────────────────── */
.items-editor.v2 .sablon-kaydet-btn {
    color: var(--yl-primary);
    border-color: rgba(59,125,221,0.35);
}
.items-editor.v2 .sablon-kaydet-btn:hover:not(:disabled) {
    background: rgba(59,125,221,0.08);
    border-color: var(--yl-primary);
}
.items-editor.v2 .sablon-kaydet-btn:disabled { opacity: 0.35; }

/* ── Tam Şablon Listesi ──────────────────────────────────── */
.items-editor.v2 .sablon-list-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    overflow-y: auto;
}
.items-editor.v2 .sablon-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--yl-border);
    margin-bottom: 6px;
    background: #fff;
    border-radius: 0;
    transition: border-color 0.15s;
}
.items-editor.v2 .sablon-card:hover { border-color: var(--yl-primary); }
.items-editor.v2 .sablon-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.items-editor.v2 .sablon-card-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--yl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.items-editor.v2 .sablon-card-desc {
    font-size: 0.74rem;
    color: var(--yl-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.items-editor.v2 .sablon-card-meta {
    font-size: 0.68rem;
    color: var(--yl-text-light);
    opacity: 0.75;
}
.items-editor.v2 .sablon-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Dark mode */
.app-root.dark .items-editor.v2 .pane-tab {
    background: transparent;
    border-color: var(--yl-border);
    color: var(--yl-text-light);
}
.app-root.dark .items-editor.v2 .pane-tab.active {
    background: var(--yl-primary);
    color: #fff;
}
.app-root.dark .items-editor.v2 .sablon-card {
    background: #161b22;
    border-color: var(--yl-border);
}
.app-root.dark .items-editor.v2 .sablon-card-name { color: var(--yl-text); }

/* ─── KDV SATIRI ─────────────────────────────────────────── */
.kdv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 6px 8px;
    background: #f8fafc;
    border: 1px solid var(--yl-border);
    font-size: 0.82rem;
}
.kdv-label {
    font-size: 0.8rem;
    color: var(--yl-text-light);
    font-weight: 600;
    white-space: nowrap;
}
.kdv-sep {
    color: var(--yl-border);
    font-size: 0.9rem;
    margin: 0 2px;
}
.kdv-oran-input {
    width: 62px;
    text-align: right;
    padding: 3px 5px;
    font-size: 0.82rem;
}
.kdv-tutar {
    font-weight: 700;
    color: var(--yl-primary);
    font-size: 0.83rem;
}
.kdv-tag {
    font-size: 0.72rem;
    background: var(--yl-primary);
    color: #fff;
    padding: 1px 5px;
    margin-left: 4px;
    font-weight: 600;
}

/* ─── ÖDEME ARAÇLARI PİLLS ───────────────────────────────── */
.odeme-araci-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 5px 0 8px;
}
.odeme-araci-pill {
    border: 1px solid var(--yl-border);
    padding: 3px 10px;
    font-size: 0.78rem;
    background: transparent;
    color: var(--yl-text-light);
    cursor: default;
    white-space: nowrap;
}
.odeme-araci-pill.active {
    background: var(--yl-primary);
    color: #fff;
    border-color: var(--yl-primary);
    font-weight: 600;
}

/* ─── TAKSİT TABLOSU ─────────────────────────────────────── */
.odeme-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.81rem;
    margin-top: 6px;
}
.odeme-tablo th {
    padding: 4px 6px;
    font-size: 0.74rem;
    color: var(--yl-text-light);
    font-weight: 600;
    border-bottom: 1px solid var(--yl-border);
    text-align: left;
    white-space: nowrap;
}
.odeme-tablo td {
    padding: 3px 4px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}
.odeme-tablo select,
.odeme-tablo input[type=number],
.odeme-tablo input[type=date] {
    font-size: 0.8rem;
    padding: 3px 4px;
}
/* Vade tarihi TrDateInput (OdemePlaniTablosu) — tablo satirina sigan sik surum */
.odeme-tablo .tr-date .tr-date-text { font-size: 0.8rem; padding: 3px 5px; }
.odeme-tablo .tr-date .tr-date-pick-btn { width: 24px; }
/* Satir aciklamasi kendi satirinda; ust satirla ayni taksite ait oldugu belli olsun */
.odeme-tablo tr.odeme-aciklama-satir td { padding: 0 0 6px 4px; }

/* Yüzde durumu renkleri */
.taksit-yuzde-ok   { color: #16a34a; font-weight: 700; font-size: 0.82rem; }
.taksit-yuzde-warn { color: #d97706; font-weight: 700; font-size: 0.82rem; }
.taksit-yuzde-err  { color: #dc2626; font-weight: 700; font-size: 0.82rem; }

/* ─── ÖZET PANELİ TAKSİT SATIRI ─────────────────────────── */
.summary-taksit-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    padding: 2px 0;
    color: var(--yl-text);
}
.summary-total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    border-top: 1px solid var(--yl-border);
    margin-top: 5px;
    padding-top: 4px;
    font-size: 0.8rem;
}

/* ─── EŞİT BÖL FORMU ────────────────────────────────────── */
.esit-bol-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    font-size: 0.8rem;
}
.esit-bol-label {
    font-size: 0.78rem;
    color: var(--yl-text-light);
    white-space: nowrap;
}
.esit-bol-input {
    padding: 3px 6px;
    font-size: 0.8rem;
    width: 70px;
}
.esit-bol-input.date  { width: 100px; }
.esit-bol-input.small { width: 46px; }
.esit-bol-input select,
.esit-bol-form select { width: 110px; font-size: 0.8rem; padding: 3px 4px; }
.esit-bol-preview {
    font-size: 0.78rem;
    color: var(--yl-primary);
    font-weight: 600;
    margin-left: 4px;
}

/* Dark mode overrides */
.app-root.dark .kdv-row { background: #161b22; border-color: var(--yl-border); }
.app-root.dark .odeme-araci-pill { border-color: var(--yl-border); color: var(--yl-text-light); }
.app-root.dark .odeme-tablo td { border-bottom-color: #1e2533; }
.app-root.dark .esit-bol-form { background: #1a2235; border-color: #2d3f5a; }

/* ============================================================
   MOBIL KART DUZENI (<=700px) - sihirbaz formlari
   Masaustu/tablet goruntusu ETKILENMEZ; her sey bu media
   blogunun icindedir. quotes.css'teki kart deseninin aynisi.

   A) odeme-tablo (taksit giris tablosu, QuoteWizard.razor)
   DIKKAT: td:nth-child eslemesi QuoteWizard.razor'daki SUTUN
   SIRASINA baglidir:
     1 Tur (select) | 2 % | 3 Tutar | 4 V.Farki% | 5 Odenecek
     | 6 Vade Tarihi | 7 Odeme Araci | 8 Sil butonu.
   Sutun eklenir/tasinirsa buradaki numaralari da guncelle.

   B) item-row (kalem satirlari, QuoteItemsEditor.razor)
   nth-child KULLANILMAZ; sinif adlariyla eslesir.
   ============================================================ */
@media (max-width: 700px) {

    /* -- A) TAKSIT TABLOSU: her satir bir kart -- */
    .odeme-tablo { display: block; }
    .odeme-tablo thead { display: none; }
    .odeme-tablo tbody { display: block; }

    .odeme-tablo tbody tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        border: 1px solid var(--yl-border);
        border-radius: 0;
        background: var(--yl-white);
        margin: 0 0 10px 0;
        padding: 10px 12px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .odeme-tablo tbody td {
        display: block;
        border-bottom: none;
        padding: 0;
    }

    /* Her inputun ustunde kucuk gri etiket (thead gizlendigi icin) */
    .odeme-tablo tbody td::before {
        display: block;
        font-size: 0.68rem;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 2px;
        text-align: left;
    }
    .odeme-tablo tbody td:nth-child(1)::before { content: "Tür"; }
    .odeme-tablo tbody td:nth-child(2)::before { content: "%"; }
    .odeme-tablo tbody td:nth-child(3)::before { content: "Tutar"; }
    .odeme-tablo tbody td:nth-child(4)::before { content: "V.Farkı%"; }
    .odeme-tablo tbody td:nth-child(5)::before { content: "Ödenecek"; }
    .odeme-tablo tbody td:nth-child(6)::before { content: "Vade Tarihi"; }
    .odeme-tablo tbody td:nth-child(7)::before { content: "Ödeme Aracı"; }
    /* Aciklama satiri ust taksit kartinin DEVAMI (ayri kart gibi gorunmesin; "Tür" etiketi almasin) */
    .odeme-tablo tbody tr.odeme-aciklama-satir {
        margin-top: -10px;
        border-top: none;
        box-shadow: none;
        padding-top: 0;
    }
    .odeme-tablo tbody tr.odeme-aciklama-satir td { flex: 1 1 100%; padding: 0; }
    .odeme-tablo tbody tr.odeme-aciklama-satir td::before { content: "Açıklama"; }
    .odeme-tablo .tr-date .tr-date-text { font-size: 0.85rem; padding: 6px 8px; }
    .odeme-tablo .tr-date .tr-date-pick-btn { width: 32px; }
    /* 8. sutun (sil) etiket almaz - content tanimlanmadi */

    /* 1. satir: Tur tam genislik (sag ustteki sil butonuna yer birak) */
    .odeme-tablo tbody td:nth-child(1) { flex: 1 1 100%; padding-right: 48px; }

    /* 2. satir: % + Tutar + V.Farki% yan yana */
    .odeme-tablo tbody td:nth-child(2),
    .odeme-tablo tbody td:nth-child(3),
    .odeme-tablo tbody td:nth-child(4) { flex: 1 1 calc(33.33% - 7px); min-width: 84px; }

    /* 3. satir: Odenecek + Vade Tarihi yan yana */
    .odeme-tablo tbody td:nth-child(5),
    .odeme-tablo tbody td:nth-child(6) { flex: 1 1 calc(50% - 5px); min-width: 120px; }
    /* Inline text-align:right'i kart modunda ez - etiket solda, deger solda */
    .odeme-tablo tbody td:nth-child(5) { text-align: left !important; }

    /* 4. satir: Odeme Araci tam genislik */
    .odeme-tablo tbody td:nth-child(7) { flex: 1 1 100%; }

    /* Sil butonu kartin sag ustunde, 36x36 dokunma hedefi */
    .odeme-tablo tbody td:nth-child(8) {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    .odeme-tablo tbody td:nth-child(8) .item-action-btn {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        border: 1px solid var(--yl-border);
        border-radius: 0;
    }

    /* Inputlar tam genislik + dokunmaya uygun yukseklik */
    .odeme-tablo tbody select,
    .odeme-tablo tbody input[type=number],
    .odeme-tablo tbody input[type=text] {
        width: 100%;
        min-height: 36px;
        font-size: 0.85rem;
        padding: 6px 8px;
        border-radius: 0;
    }

    /* Alt butonlar (Taksit Ekle / Esit Bol) blok akisina doner */
    .odeme-tablo tfoot { display: block; }
    .odeme-tablo tfoot tr { display: block; }
    .odeme-tablo tfoot td { display: block; width: 100%; }
    .odeme-tablo tfoot .wizard-btn { min-height: 36px; }

    /* -- B) KALEM SATIRLARI (item-row): 3 sirali kart duzeni --
       1. sira: grip + sira no + aciklama (aciklama kalan tum genislik)
       2. sira: miktar/birim/fiyat/tutar (her biri en az 64px)
       3. sira: islem butonlari sagda */
    .item-row {
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 8px 10px;
        align-items: center;
    }

    /* Grip kucultulmez - dokunma hedefi olarak 36x36'ya buyutulur */
    .items-editor.v2 .item-drag-grip {
        width: 36px;
        height: 36px;
    }

    /* Aciklama ust satirin kalanini kaplar; min-width sonraki
       kutulari (miktar vs.) alt satira zorlar */
    .item-desc {
        flex: 1 1 calc(100% - 104px);
        min-width: calc(100% - 104px);
    }

    /* SPEC deger alani: ikinci satirda tam genislik */
    .item-spec-val {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    /* Sayi kutulari: 768px'teki 55px kuralini ezer (bu blok dosyada
       daha sonra geldigi icin kazanir) */
    .item-qty, .item-unit, .item-price, .item-total {
        width: auto;
        flex: 1 1 64px;
        min-width: 64px;
    }
    /* Bos yer tutucu hucreler (HEADER/SUB_ITEM satirlarinda) gizlenir */
    .item-qty:empty, .item-unit:empty, .item-price:empty, .item-total:empty {
        display: none;
    }
    .item-qty input, .item-unit input, .item-price input, .item-total input {
        min-height: 36px;
        font-size: 0.85rem;
        padding: 5px 6px;
    }

    /* Islem butonlari: kendi satirinda sagda, 36x36 dokunma hedefi */
    .item-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        gap: 4px;
    }
    .item-action-btn {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}


/* Stoktan secim sonrasi "hangi alanlar doldu" bilgisi (tam ekran bildirim degil:
   kullanici tam da dolan alanlara bakacak, formun ustu kapanmamali). */
.wizard-stok-bilgi {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: -2px 0 10px;
    padding: 7px 10px;
    border: 1px solid #bbf7d0;
    border-radius: 0;
    background: #f0fdf4;
    color: #166534;
    font-size: 0.78rem;
    line-height: 1.35;
}

.wizard-stok-bilgi svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    margin-top: 1px;
}


/* ==========================================================================
   DETAYLI FIYAT — ARA KALEMLER (ek kalem + iskonto)
   Ekran sadeligi korunsun diye tek satirlik yerlesim; tablo/baslik yok.
   ========================================================================== */
.dfs-wrap { margin: 2px 0 10px; }

.dfs-satir {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border: 1px solid var(--yl-border);
    border-bottom: none;
    background: #fff;
}

.dfs-satir.is-iskonto { background: #fffbf3; }

.dfs-satir select,
.dfs-satir input {
    height: 30px;
    padding: 3px 6px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    font-size: 0.78rem;
    background: #fff;
}

.dfs-tur   { flex: 0 0 84px; }
.dfs-ad    { flex: 1 1 auto; min-width: 0; }
.dfs-birim { flex: 0 0 64px; }
.dfs-birim-bos { flex: 0 0 64px; }
.dfs-deger { flex: 0 0 96px; text-align: right; }
/* Arac basi / siparis toplamina (yalniz arac sayisi > 1 iken gorunur) */
.dfs-kapsam { flex: 0 0 132px; }

.dfs-etki {
    flex: 0 0 140px;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: #166534;
    white-space: nowrap;
}

.dfs-etki.eksi { color: #b91c1c; }

.dfs-mini {
    flex: 0 0 auto;
    width: 24px;
    height: 26px;
    border: 1px solid var(--yl-border);
    background: #f8fafc;
    color: var(--yl-text-light);
    border-radius: 0;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1;
}

.dfs-mini:hover:not(:disabled) { background: #eef2f7; color: var(--yl-text); }
.dfs-mini:disabled { opacity: .35; cursor: default; }
.dfs-sil:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

/* Alt aciklama satiri: B / I + metin */
.dfs-alt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 6px;
    border: 1px solid var(--yl-border);
    border-top: none;
    border-bottom: none;
    background: #fff;
}

.dfs-satir.is-iskonto + .dfs-alt { background: #fffbf3; }

.dfs-bi {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--yl-border);
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.76rem;
    color: var(--yl-text-light);
}

.dfs-bi.acik {
    background: var(--yl-primary, #1a3a6b);
    border-color: var(--yl-primary, #1a3a6b);
    color: #fff;
}

.dfs-aciklama {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 3px 6px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    font-size: 0.76rem;
    color: #4b5563;
}

.dfs-aciklama.kalin  { font-weight: 700; }
.dfs-aciklama.italik { font-style: italic; }

.dfs-ozet {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 7px 8px;
    border: 1px solid var(--yl-border);
    background: #f8fafc;
    font-size: 0.78rem;
}

.dfs-ekle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.dfs-ekle-btn {
    border: 1px dashed #c9d4e8;
    background: #fafbff;
    color: var(--yl-primary, #1a3a6b);
    border-radius: 0;
    padding: 6px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    min-height: 32px;
}

.dfs-ekle-btn:hover { background: #eef4ff; border-style: solid; }

.dfs-ipucu { font-size: 0.74rem; color: var(--yl-text-light); }

@media (max-width: 768px) {
    .dfs-satir { flex-wrap: wrap; }
    .dfs-ad { flex: 1 1 100%; order: -1; }
    .dfs-etki { flex: 1 1 auto; }
    .dfs-satir select, .dfs-satir input, .dfs-aciklama { min-height: 40px; font-size: 16px; }
}

.ozet-kaynak {
    font-size: 0.68rem;
    color: var(--yl-text-light);
    margin: -4px 0 6px;
    line-height: 1.3;
}


/* ==========================================================================
   FIYAT BLOGU — KALEM LISTESI (hiyerarsik: ana kalem + alt kalem)
   RENK KODU (kullanici istegi: "kalem neresi iskonto neresi belli olsun"):
     ana kalem -> lacivert sol serit / beyaz zemin
     alt kalem -> acik mavi sol serit / gri zemin / girintili
     aciklama  -> kesikli gri sol serit / cok acik zemin
     iskonto   -> turuncu sol serit / amber zemin (blok sonu bolumu)
   ========================================================================== */
.dfk-wrap { margin: 2px 0 10px; }

.dfk-baslik,
.dfs-baslik {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--yl-primary, #1a3a6b);
    padding: 0 0 5px 8px;
    border-left: 3px solid var(--yl-primary, #1a3a6b);
    margin-bottom: 2px;
}

.dfs-baslik { color: #b45309; border-left-color: #d97706; margin-top: 14px; }

.dfk-sutunlar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 9px;
    background: #eef2f8;
    border: 1px solid var(--yl-border);
    border-bottom: none;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #64748b;
}

.dfk-s-bi    { flex: 0 0 53px; }
.dfk-s-ad    { flex: 1 1 auto; min-width: 0; }
.dfk-s-adet  { flex: 0 0 52px; text-align: right; }
.dfk-s-fiyat { flex: 0 0 100px; text-align: right; }
.dfk-s-isk   { flex: 0 0 124px; text-align: right; }
.dfk-s-net   { flex: 0 0 140px; text-align: right; }
.dfk-s-btn   { flex: 0 0 100px; }

.dfk-satir {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 6px;
    border: 1px solid var(--yl-border);
    border-left: 3px solid var(--yl-primary, #1a3a6b);
    border-bottom: none;
    background: #fff;
}

.dfk-satir.alt {
    background: #f4f7fb;
    border-left-color: #7ba7d9;
    padding-left: 16px;
}

.dfk-dal { flex: 0 0 auto; color: #7ba7d9; font-size: 0.82rem; }

.dfk-satir input,
.dfk-satir select {
    height: 30px;
    padding: 3px 6px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    font-size: 0.78rem;
    background: #fff;
    min-width: 0;
}

/* Kalem adi ELDEN GELDIGINCE GENIS — uzun adlar kesilmesin */
.dfk-ad        { flex: 1 1 auto; min-width: 0; }
.dfk-ad.kalin  { font-weight: 700; }
.dfk-ad.italik { font-style: italic; }

/* Adetler buyuk degil — dar birakildi */
.dfk-adet    { flex: 0 0 52px; text-align: right; }
.dfk-carpi   { flex: 0 0 auto; color: #94a3b8; font-size: 0.76rem; }
.dfk-fiyat   { flex: 0 0 100px; text-align: right; }
.dfk-iskturu { flex: 0 0 56px; }
.dfk-isk     { flex: 0 0 64px; text-align: right; }

.dfk-net {
    flex: 0 0 140px;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 700;
    color: #166534;
    white-space: nowrap;
}

.dfk-net .dfk-eski {
    text-decoration: line-through;
    color: #b91c1c;
    font-weight: 400;
    margin-right: 5px;
}

.dfk-net.ucretsiz { color: #b45309; }

.dfk-bi {
    flex: 0 0 auto;
    width: 24px;
    height: 26px;
    border: 1px solid var(--yl-border);
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.74rem;
    color: var(--yl-text-light);
}

.dfk-bi.acik {
    background: var(--yl-primary, #1a3a6b);
    border-color: var(--yl-primary, #1a3a6b);
    color: #fff;
}

.dfk-mini {
    flex: 0 0 auto;
    width: 24px;
    height: 26px;
    border: 1px solid var(--yl-border);
    background: #f8fafc;
    color: var(--yl-text-light);
    border-radius: 0;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1;
}

.dfk-mini-bos { flex: 0 0 24px; }
.dfk-mini:hover:not(:disabled) { background: #eef2f7; color: var(--yl-text); }
.dfk-mini:disabled { opacity: .3; cursor: default; }
.dfk-sil:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

.dfk-alt {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 6px 6px 14px;
    border: 1px solid var(--yl-border);
    border-left: 3px dashed #cbd5e1;
    border-top: none;
    border-bottom: none;
    background: #fcfdfe;
}

.dfk-alt.ic { background: #f4f7fb; padding-left: 26px; }

/* "X YERINE Y" OPSIYONU (11.10.2026) — opsiyonun hangi standart maddenin yerine onerildigi.
   Secilince satir amber cizgiyle ayrisir; fiyat FARK olarak okunur. */
.dfk-yerine {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 6px 6px 14px;
    border: 1px solid var(--yl-border);
    border-left: 3px dashed #cbd5e1;
    border-top: none;
    background: #fcfdfe;
}
.dfk-yerine select {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 520px;
    height: 28px;
    padding: 2px 6px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    font-size: 0.76rem;
    color: #4b5563;
    background: #fff;
}
.dfk-yerine.secili { border-left: 3px solid #d97706; background: #fffbeb; }
.dfk-yerine.secili select { border-color: #fcd34d; color: #92400e; font-weight: 600; }
.dfk-yerine-not { font-size: 0.7rem; color: #b45309; }
.dfk-resim-getir { font-size: 0.7rem; letter-spacing: -1px; }
@media (max-width: 768px) {
    .dfk-yerine select { min-height: 40px; font-size: 16px; flex-basis: 100%; max-width: none; }
}

/* Catal — aciklamanin ustteki kaleme ait oldugunu gosterir */
.dfk-alt-dal {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1;
    margin-right: 1px;
}

.dfk-aciklama {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 3px 6px;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    font-size: 0.76rem;
    color: #4b5563;
}

.dfk-aciklama.kalin  { font-weight: 700; }
.dfk-aciklama.italik { font-style: italic; }

.dfk-ozet {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 7px 8px;
    border: 1px solid var(--yl-border);
    border-left: 3px solid var(--yl-primary, #1a3a6b);
    background: #eef2f8;
    font-size: 0.8rem;
}

.dfk-ekle { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.dfk-ekle-btn {
    border: 1px dashed #c9d4e8;
    background: #fafbff;
    color: var(--yl-primary, #1a3a6b);
    border-radius: 0;
    padding: 6px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    min-height: 32px;
}

.dfk-ekle-btn:hover { background: #eef4ff; border-style: solid; }
.dfk-ekle-btn.acik  { background: #eef4ff; border-style: solid; font-weight: 600; }
.dfk-ipucu { font-size: 0.74rem; color: var(--yl-text-light); }

.dfk-cek { margin-top: 8px; border: 1px solid #c9d4e8; background: #fbfdff; }

.dfk-cek-baslik {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px; background: #eef4ff;
    border-bottom: 1px solid #c9d4e8;
    font-size: 0.78rem; font-weight: 600; color: var(--yl-primary, #1a3a6b);
}

.dfk-cek-satir {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-bottom: 1px solid #e8eef7; font-size: 0.78rem;
}

.dfk-cek-ad      { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dfk-cek-fiyat   { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.dfk-cek-eklendi { flex: 0 0 auto; font-size: 0.72rem; color: #166534; }

.dfk-cek-btn {
    flex: 0 0 auto;
    border: 1px solid var(--yl-primary, #1a3a6b);
    background: var(--yl-primary, #1a3a6b);
    color: #fff; border-radius: 0;
    padding: 4px 12px; font-size: 0.74rem; cursor: pointer; min-height: 28px;
}

.dfk-cek-alt { padding: 7px 10px; }

/* Blok sonu ISKONTO satirlari — turuncu serit, kalemlerden goz ile ayrilir */
.dfs-satir {
    border-left: 3px solid #d97706 !important;
    background: #fffbf3 !important;
}

.dfs-alt {
    border-left: 3px dashed #fcd9a5 !important;
    background: #fffdf8 !important;
}

.dfs-ozet {
    border-left: 3px solid #d97706;
    background: #fff7ed;
}

.dfs-ekle-btn { border-color: #f0c491; color: #b45309; background: #fffbf3; }
.dfs-ekle-btn:hover { background: #fef3e2; border-style: solid; }

@media (max-width: 768px) {
    .dfk-sutunlar { display: none; }
    .dfk-satir { flex-wrap: wrap; }
    .dfk-ad { flex: 1 1 100%; }
    .dfk-net { flex: 1 1 auto; }
    .dfk-satir input, .dfk-satir select, .dfk-aciklama { min-height: 40px; font-size: 16px; }
}


/* ==========================================================================
   OZET KARTI — fiyat dokumu renk kodu
   Iki iskonto TURU birbirinden ayrilsin diye AYRI renk:
     Kalem Iskontolari -> turuncu (kalem satirlariyla ayni dil)
     Indirim (blok sonu) -> bordo
   Ikisi de EKSILTME oldugu icin kirmizi ailesinde: yesil verilseydi kalem
   listesindeki "ustu cizili kirmizi eski fiyat" ile celisirdi.
   ========================================================================== */
.summary-row.oz-kalem-isk {
    color: #b45309;
}

.summary-row.oz-kalem-isk span:last-child {
    font-weight: 600;
}

.summary-row.oz-indirim {
    color: #9f1239;
}

.summary-row.oz-indirim span:last-child {
    font-weight: 700;
}

.summary-row.oz-ara {
    border-top: 1px dashed #d7dfef;
    padding-top: 5px;
    margin-top: 2px;
    font-weight: 600;
}

.summary-row.oz-kdv {
    color: var(--yl-text-light);
}

.summary-row.total.oz-dahil {
    color: var(--yl-primary, #1a3a6b);
    border-top: 2px solid var(--yl-primary, #1a3a6b);
    padding-top: 6px;
    margin-top: 4px;
}

.summary-row.total.oz-dahil span:last-child {
    font-weight: 700;
}


/* ==========================================================================
   GRUP ADI CEVIRISI — onay tiki satiri, rozet ve otomatik ceviri araci
   Ayni duzen HEM Sablon Yonetimi HEM teklif icindeki sablon panelinde kullanilir;
   bu yuzden sayfaya ozel dosyada degil, ortak wizard.css'te.
   ========================================================================== */
.grup-ceviri-ipucu {
    font-size: 0.72rem;
    color: #6b7280;
    line-height: 1.35;
    margin-bottom: 6px;
}

.grup-dil-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grup-ceviri-arac {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.grup-ceviri-msg {
    font-size: 0.74rem;
    color: #166534;
}

/* ── Fiyat bloklari: uzun listede ekleme dugmeleri kaybolmasin ──────────
   Kalem/iskonto satirlari cogalinca blok o kadar uzuyordu ki alttaki
   toplam satiri ve "+ Kalem" / "+ Iskonto" dugmeleri ekrandan cikiyordu
   (kullanici bildirdi). Liste artik kendi icinde kayar; sinir yalnizca
   liste gercekten uzayinca devreye girer, kisa listede hicbir sey degismez. */
.dfk-liste,
.dfs-liste {
    max-height: 46vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* Kaydirma bu kutuda kalsin, sonu gelince sayfayi da suruklemesin */
    overscroll-behavior: contain;
}

/* Alcak pencerelerde (or. ayri acilan kucuk pencere) liste ekranin
   yarisindan fazlasini kaplamasin. */
@media (max-height: 800px) {
    .dfk-liste,
    .dfs-liste { max-height: 38vh; }
}

/* ── Ana Resim Aciklamasi: dilleri AYNI EKRANDA elle yazma paneli ──
   Kullanici istegi 2026-08: cevirileri duzeltmek icin sablona gitmek ya da ayri bir
   pencere acmak gerekmesin — 4. adimda, otomatik cevirinin hemen yaninda acilir. */
.foto-dil-panel {
    margin-top: 10px;
    border: 1px solid var(--yl-border);
    background: var(--yl-bg-soft, #f8fafc);
    padding: 10px 12px;
}
.foto-dil-panel-baslik {
    font-size: 0.75rem;
    color: var(--yl-text-light);
    line-height: 1.5;
    margin-bottom: 8px;
}
.foto-dil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px 12px;
}
.foto-dil-hucre { display: flex; flex-direction: column; gap: 3px; }
.foto-dil-ust { display: flex; align-items: center; gap: 6px; }
.foto-dil-kod {
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--yl-text); min-width: 22px;
}
.foto-dil-rozet {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 1px 5px;
    background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe;
}
.foto-dil-rozet-elle { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.foto-dil-geri {
    margin-left: auto; background: none; border: none; padding: 0;
    font-size: 0.68rem; color: var(--yl-text-light); cursor: pointer;
    text-decoration: underline;
}
.foto-dil-geri:hover { color: #4f46e5; }
.foto-dil-hucre textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    border: 1px solid var(--yl-border); border-radius: 0;
    padding: 5px 7px; font-size: 0.8rem; font-family: inherit;
}

/* ── "Stoktan Sec": durum rozeti + musteri siparisi uyarisi ──
   Kullanici istegi 2026-08: stokta olanin yaninda IMALATTAKILER ve stok icin
   uretilenler de secilebilir. Musteri siparisi olan arac bilincli secilsin diye
   ayri (kirmizi) isaretlenir. */
.stok-durum-chip {
    display: inline-block; padding: 1px 6px; border-radius: 0;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.stok-durum-chip.hazir  { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.stok-durum-chip.imalat { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.stok-uyari {
    margin-top: 2px; font-size: 0.68rem; font-weight: 600; color: #b91c1c;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stok-kaynak {
    margin-top: 2px; font-size: 0.68rem; color: var(--yl-text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Kalem-alti kucuk resim (kullanici istegi 2026-08) ──
   "Alt aciklama gibi ama kucuk resim": kalem metninin altinda kucuk onizleme,
   yanda belge genisligi secimi ve kaldirma. Resimsiz kalemlerde hicbir sey cizilmez. */
/* Coklu resim: kartlar yan yana akar, sigmayan alt satira gecer */
.item-resimler {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 4px;
}
.item-resim {
    display: flex; align-items: flex-start; gap: 6px;
}
/* Islem cubugundaki resim dugmesinde adet rozeti (2+ ise) */
.item-resim-sayi {
    font-size: 0.6rem; font-weight: 700; line-height: 1;
    margin-left: 2px; color: #7c3aed;
}
.item-resim img {
    max-width: 120px; max-height: 90px;
    border: 1px solid var(--yl-border); border-radius: 0;
    object-fit: contain; background: #fff;
}
.item-resim-arac { display: flex; flex-direction: column; gap: 3px; }
.item-resim-arac select {
    border: 1px solid var(--yl-border); border-radius: 0;
    font-size: 0.7rem; padding: 2px 4px; font-family: inherit;
}
.item-resim-sil {
    background: #fff; border: 1px solid #fecaca; border-radius: 0;
    color: #dc2626; font-size: 0.7rem; padding: 2px 6px; cursor: pointer;
}
.item-resim-sil:hover { background: #fef2f2; }
/* Resim ekleme dugmesi (islem cubugunda) — resim varken belirgin */
.item-action-btn.item-resim-active { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }

/* ── 4. adim: aractan gelen gorsel bilgi seridi ──
   Kullanici istegi: arac kaydinda 2D tasarim / favori foto varsa teklife otomatik
   gelir ve burada BILDIRILIR — hazirlayan ayni resmi tekrar yuklemeye kalkmasin. */
.arac-gorsel-notu {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 8px 12px;
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
    font-size: 0.78rem; line-height: 1.45;
}
.arac-gorsel-notu svg { flex: 0 0 auto; }
.arac-gorsel-notu-kapat {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: #047857; font-size: 0.8rem; line-height: 1; padding: 2px 4px;
}

/* ── Arac ekleri: COKLU SECIM + tek PDF paylasimi ──
   Kullanici istegi 2026-08: birden fazla gorsel secilip TEK PDF olarak paylasilsin. */
.ekler-secim-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 10px; margin-bottom: 8px;
    background: #f8fafc; border: 1px solid var(--yl-border);
}
.app-root.dark .ekler-secim-bar { background: #161b22; border-color: #30363d; }
.ekler-secim-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.ekler-secim-say { font-size: 0.76rem; color: var(--yl-text-light); }
.ekler-secim-btn {
    background: #fff; border: 1px solid var(--yl-border); border-radius: 0;
    font-size: 0.74rem; padding: 4px 10px; cursor: pointer; font-family: inherit;
}
.ekler-secim-btn:hover:not(:disabled) { background: #f1f5f9; }
.ekler-secim-btn:disabled { opacity: 0.5; cursor: default; }
.ekler-secim-btn-ana {
    margin-left: auto; background: #7c3aed; color: #fff; border-color: #7c3aed; font-weight: 600;
}
.ekler-secim-btn-ana:hover:not(:disabled) { background: #6d28d9; }
.ekler-secim-btn-mini { margin-left: auto; font-size: 0.68rem; padding: 2px 7px; }

/* Kart uzerindeki secim kutusu */
.ekler-secim-kutu {
    position: absolute; top: 4px; left: 4px; z-index: 2;
    background: rgba(255,255,255,0.92); border: 1px solid var(--yl-border);
    padding: 2px 3px; line-height: 0; cursor: pointer;
}
.ekler-card.is-secili { outline: 2px solid #7c3aed; outline-offset: -2px; }

@media (max-width: 640px) {
    .ekler-secim-btn-ana { margin-left: 0; width: 100%; }
}

/* ── EKSIK DIL UYARISI (teklif kalemleri) ──
   PDF, belge dilinde karsiligi olmayan kalemi SESSIZCE Turkce basar. Kullanici bunu
   ancak ciktiyi aldiktan sonra fark ediyordu; artik editorde gorunur. */
.eksik-dil-uyari {
    display: flex; align-items: center; gap: 8px;
    margin: 6px 0; padding: 7px 10px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    font-size: 0.78rem; line-height: 1.4;
}
.eksik-dil-uyari svg { flex: 0 0 auto; }
.eksik-dil-btn {
    margin-left: auto; white-space: nowrap;
    background: #b45309; color: #fff; border: none; border-radius: 0;
    font-size: 0.74rem; font-weight: 600; padding: 4px 10px; cursor: pointer;
    font-family: inherit;
}
.eksik-dil-btn:hover:not(:disabled) { background: #92400e; }
.eksik-dil-btn:disabled { opacity: 0.6; cursor: default; }

/* Satir basindaki kucuk isaret: bu satir Turkce basacak */
.item-dil-eksik {
    display: inline-block; margin-right: 5px; padding: 0 4px;
    background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
    vertical-align: middle;
}

/* SPEC deger hucresi: final dilde (musteriye giden belgede) RAKAMLAR farkli.
   Kirmizi, cunku fark edilmezse yanlis teknik bilgi musteriye gider. Tiklanir. */
.item-deger-farkli {
    display: inline-block; flex-shrink: 0; margin-left: 4px; padding: 0 5px;
    background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
    cursor: pointer; align-self: center;
}
.item-deger-farkli:hover { background: #fecaca; }

/* ============================================================
   TEKNIK CIZIM — BUYUK ONIZLEME (4. adim). Kullanici istegi 13.09.2026:
   kucuk kart yerine cizim genis ve detaylari gozle okunur gorunsun.
   ============================================================ */
.ekler-cizim-liste { display: flex; flex-direction: column; gap: 12px; }
.ekler-cizim-card {
    border: 1px solid var(--yl-border);
    background: #fff;
    border-radius: 0;
}
.ekler-cizim-ust {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 6px 10px;
    border-bottom: 1px solid var(--yl-border);
    background: #f7f9fc;
    font-size: 0.76rem;
}
.ekler-cizim-ust .ekler-name { flex: 1; min-width: 120px; font-weight: 600; }
.ekler-cizim-ust .ekler-del-btn { position: static; opacity: 1; }
.ekler-cizim-buyut {
    border: 1px solid var(--yl-border); background: #fff; color: #0f2548;
    font-size: 0.72rem; font-weight: 600; padding: 3px 9px; cursor: pointer; border-radius: 0;
}
.ekler-cizim-buyut:hover { background: #e8edf6; }
.ekler-cizim-img {
    /* Yari boy (kullanici: tam genislik asiri buyuktu); detay icin Tam Boyut / tik var. */
    display: block; width: 50%; max-width: 900px; max-height: 360px; object-fit: contain;
    object-position: left center; background: #fff; cursor: zoom-in; padding: 6px;
}
.ekler-cizim-bekle {
    padding: 40px; text-align: center; color: #9ca3af; font-size: 0.78rem;
}
.ekler-cizim-upload { max-width: 320px; }
.ekler-lightbox {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(10, 18, 34, 0.86);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out; padding: 20px;
}
.ekler-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }

/* ─── ÖDEME PLANI TABANI (KDV hariç / KDV dahil) — 18.09.2026 ──────────────
   Kullanıcı isteği: "ödeme takvimini KDV hariç fiyata göre de yapabilmeliyiz,
   KDV'yi ayrı tutmalıyız". Taksitlerin hangi tutarı paylaştığı EKRANDA yazar. */
.plan-taban {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 2px 0 8px;
}
.plan-taban-label { font-size: 0.78rem; font-weight: 600; color: var(--yl-text-light); }
.plan-taban-btn {
    padding: 3px 10px;
    font-size: 0.78rem;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.plan-taban-btn:hover { background: #f3f6fa; }
.plan-taban-btn.secili {
    background: var(--yl-primary);
    border-color: var(--yl-primary);
    color: #fff;
    font-weight: 600;
}
.plan-taban-bilgi { font-size: 0.75rem; color: var(--yl-text-light); }

/* Ayrı ödenen KDV satırı — taksit değildir, farklı zeminle ayrışır. */
.odeme-kdv-satir > td,
tr.odeme-kdv-satir > td { background: #f5f8fc; }

/* ─── OPSİYONEL BÖLÜM (grup başlığı) — 18.09.2026 ──────────────────────────
   İşaretli grup belgede fiyat ve ödeme planından SONRA basılır; editörde hem
   düğme hem küçük rozet ile görünür. */
.item-action-btn.item-ops-active {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
    font-weight: 700;
}
.item-action-btn.item-ops-active:hover { background: #92400e; border-color: #92400e; }
.item-ops-rozet {
    display: inline-block;
    margin-right: 6px;
    padding: 0 5px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    vertical-align: middle;
}

/* ─── GÖNDEREN FİRMA (1. adım) — 22.09.2026 ────────────────────────────────
   Teklifin hangi firmadan (Yalçın Dorse / SAS / Lowbed) gönderileceği; belgenin
   anteti, logosu ve banka hesapları buna göre gelir. */
.qw-gonderen-secenek {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.qw-gonderen-btn {
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--yl-text, #1f2937);
    background: #fff;
    border: 1px solid var(--yl-border, #d1d5db);
    border-radius: 0;
    cursor: pointer;
}
.qw-gonderen-btn:hover { background: #f3f6fa; }
.qw-gonderen-btn.secili {
    color: #fff;
    background: var(--yl-primary);
    border-color: var(--yl-primary);
}
.qw-gonderen-ipucu {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--yl-text-light, #6b7280);
}

/* ─── ŞABLON KAYDI: satır resimleri sorusu — 25.09.2026 ───────────────────── */
.sablon-resim-soru {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 0;
    font-size: 0.8rem;
}
.sablon-resim-soru-baslik { color: #78350f; margin-bottom: 2px; }
.sablon-resim-soru label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ─── ARAÇ SAYISI + OPSİYON LİSTESİ — 27.09.2026 ──────────────────────────── */
.dfk-s-dahil { flex: 0 0 38px; text-align: center; }
.dfk-s-arac  { flex: 0 0 42px; text-align: center; }
.dfk-dahil {
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.dfk-dahil input { width: 16px; height: 16px; cursor: pointer; }
.dfk-satir.dahil { background: #f0fdf4; border-left-color: #16a34a; }
.dfk-arac {
    flex: 0 0 42px;
    height: 26px;
    padding: 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--yl-primary);
    background: #eef2f8;
    border: 1px solid #c7d2e3;
    border-radius: 0;
    cursor: pointer;
}
.dfk-arac.siparis { color: #b45309; background: #fef3c7; border-color: #fcd34d; }
.dfk-arac-bos { flex: 0 0 42px; }
/* ARAC CARPIMI (10.10.2026, "x3 var ama carpmiyor"): TUTAR tek aracin tutari, altinda
   "x 3 = 3.300,00". Opsiyon "Dahil" degilse soluk (fiyata henuz girmiyor). */
.dfk-net .dfk-carpim {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--yl-primary, #1a3a6b);
}
.dfk-net .dfk-carpim.pasif { color: #94a3b8; font-weight: 500; }
/* OPSIYON FIYAT DOKUMU — 3. adimin ozet kartiyla ayni dil; tabloyu tam genislikte kapatir,
   dokum saga yasli dar sutunda. */
.dfk-ozet.dfk-ops-ozet { display: block; border-left-color: #16a34a; background: #f8fafc; }
.dfk-ops-dokum { margin-left: auto; max-width: 360px; }
.dfk-ops-dokum .summary-row { padding: 2px 0; font-size: 0.8rem; }
.dfk-ops-dokum .summary-row.total { font-size: 0.86rem; margin-top: 3px; padding-top: 5px; }
.dfk-ops-not { font-size: 0.74rem; color: var(--yl-text-light); text-align: right; padding-top: 2px; }
.dfk-resim-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dfk-resim-btn.acik { background: #e0f2fe; border-color: #7dd3fc; }
.dfk-resimler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 8px 8px 44px;
    border: 1px solid var(--yl-border);
    border-top: none;
    background: #fafbfd;
}
.dfk-resim { display: flex; flex-direction: column; gap: 3px; }
.dfk-resim img { height: 64px; width: auto; max-width: 140px; object-fit: contain; border: 1px solid var(--yl-border); background: #fff; }
.dfk-resim-arac { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--yl-text-light); }
.dfk-resim-arac input { width: 48px; height: 22px; padding: 1px 4px; font-size: 0.72rem; border: 1px solid var(--yl-border); border-radius: 0; }
.dfk-hata { margin: 4px 0; font-size: 0.75rem; color: #b91c1c; }

.qw-eski-adet { display: block; margin-top: 3px; color: #92400e; }
.qw-opsiyon-bilgi {
    margin: 0 0 10px;
    padding: 8px 10px;
    font-size: 0.8rem;
    color: #1e3a5f;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0;
}
.qw-opsiyon-sablon {
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px dashed var(--yl-border);
    background: #fafbfd;
}
.qw-opsiyon-sablon-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qw-opsiyon-sablon-baslik { font-size: 0.78rem; font-weight: 700; color: var(--yl-text-light); }
.qw-opsiyon-sablon-ust select { min-width: 240px; height: 30px; border: 1px solid var(--yl-border); border-radius: 0; }
.qw-opsiyon-sablon-durum { font-size: 0.75rem; color: var(--yl-text-light); margin-top: 4px; }
.qw-opsiyon-sablon-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid #eef2f6;
    font-size: 0.8rem;
}
.qw-opsiyon-sablon-satir .ad { flex: 1 1 auto; min-width: 0; }
.qw-opsiyon-sablon-satir .fiyat { flex: 0 0 auto; color: var(--yl-text-light); }
.qw-opsiyon-sablon-satir .eklendi { flex: 0 0 auto; font-size: 0.72rem; color: #16a34a; }
.qw-opsiyon-sablon-satir .wizard-btn { padding: 2px 10px; font-size: 0.75rem; }
/* Arama sonucunda satirin geldigi sablon grubu */
.qw-opsiyon-sablon-satir .grup {
    margin-left: 6px; padding: 0 5px; font-size: 0.66rem; font-weight: 600;
    color: var(--yl-text-light); border: 1px solid var(--yl-border); white-space: nowrap;
}
/* Opsiyon arama kutusu (tum sablon gruplarinda) */
.qw-opsiyon-ara { position: relative; flex: 1 1 220px; min-width: 180px; }
.qw-opsiyon-ara input {
    width: 100%; height: 30px; padding: 3px 26px 3px 8px; font-size: 0.8rem;
    border: 1px solid var(--yl-border); border-radius: 0; background: #fff; color: var(--yl-text);
}
.qw-opsiyon-ara button {
    position: absolute; right: 2px; top: 2px; width: 26px; height: 26px;
    border: none; background: none; color: var(--yl-text-light); cursor: pointer; font-size: 1rem;
}
/* Dahil opsiyonun teklif maddelerindeki yeri */
.qw-opsiyon-madde {
    margin-top: 12px; padding: 8px 10px;
    border: 1px solid #bfdbfe; background: #f5f9ff;
}
.qw-opsiyon-madde-baslik { font-size: 0.8rem; font-weight: 700; color: #1e3a5f; margin-bottom: 4px; }
.qw-opsiyon-madde-baslik span { font-weight: 400; font-size: 0.74rem; color: var(--yl-text-light); }
.qw-opsiyon-madde-satir {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 4px 0; border-bottom: 1px solid #e3ecf8; font-size: 0.8rem;
}
.qw-opsiyon-madde-satir .ad { flex: 1 1 200px; min-width: 0; }
.qw-opsiyon-madde-satir select {
    flex: 0 1 260px; min-width: 0; height: 30px; font-size: 0.78rem;
    border: 1px solid var(--yl-border); border-radius: 0; background: #fff;
}
.qw-opsiyon-madde-satir .durum { font-size: 0.72rem; color: #166534; white-space: nowrap; }
.qw-opsiyon-madde-satir .durum.uyari { color: #b45309; }
@media (max-width: 768px) {
    .qw-opsiyon-madde-satir select, .qw-opsiyon-ara input { min-height: 36px; font-size: 16px; }
    .qw-opsiyon-madde-satir select { flex: 1 1 100%; }
}
.app-root.dark .qw-opsiyon-madde { background: #142033; border-color: #2a4a8a; }
.app-root.dark .qw-opsiyon-madde-baslik { color: #93c5fd; }
.app-root.dark .qw-opsiyon-madde-satir { border-bottom-color: #1e2533; }
.app-root.dark .qw-opsiyon-madde-satir select,
.app-root.dark .qw-opsiyon-ara input { background: #161b22; border-color: #3a4250; color: var(--yl-text); }
.qw-opsiyon-ozet {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    font-size: 0.84rem;
    background: #f7f9fc;
    border: 1px solid var(--yl-border);
}
.summary-row.oz-arac span:first-child { color: var(--yl-primary); font-weight: 600; }

/* NAKLIYE BEDELI (fiyat blogu, 02.10.2026) — tutar + "fiyata dahil" secimi; dar ekranda alt alta */
.qw-nakliye {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px 16px;
    margin: 8px 0 6px;
    padding: 8px 10px;
    border: 1px dashed var(--yl-border);
    border-radius: 0;
    background: #fafbfd;
}
.qw-nakliye .qw-nakliye-tutar { flex: 0 1 220px; min-width: 160px; margin: 0; }
.qw-nakliye-not { font-weight: 400; color: var(--yl-text-light); font-size: 0.74rem; }
.qw-nakliye-secim {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
}
.qw-nakliye-secim input[type=checkbox] { margin: 2px 0 0; flex: 0 0 auto; }
.qw-nakliye-secim > span { min-width: 0; }
.qw-nakliye-durum { flex-basis: 100%; display: block; margin: 0; white-space: normal; overflow-wrap: anywhere; }
.qw-nakliye-pasif { opacity: .75; }
@media (max-width: 600px) {
    .qw-nakliye .qw-nakliye-tutar { flex: 1 1 100%; }
}

/* BAYI (1. adim, 04.10.2026) — tam satir; sol yari Musteri'nin, sag yari (ipucu) Teklif
   Kanali'nin tam altina denk gelir (.wizard-grid2 ile ayni sutun araligi). Telefonda alt alta. */
.qw-bayi-satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 14px;
    align-items: end;
}
.qw-bayi-ipucu {
    padding-bottom: 7px;
    font-size: 0.74rem;
    color: var(--yl-text-light, #6b7280);
    overflow-wrap: anywhere;
}
/* Bayi secilince sag sutunda "Bayi Yetkilisi" (Follow #41); ipucu satirin altina iner. */
.qw-bayi-ipucu.qw-bayi-alt { padding: 4px 0 0; }

/* MODEL MODU (Follow #39) — teklif acmadan model paketi: musteri / satis alanlari gizli. */
.qw-model-modu .qw-satis { display: none !important; }
.qw-model-not {
    margin: 0 0 10px;
    padding: 8px 12px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #1e3a5f;
    background: #eef4ff;
    border: 1px solid #c7d7f2;
    border-radius: 0;
}
.app-root.dark .qw-model-not { color: #c9d1d9; background: #161b22; border-color: #30363d; }
@media (max-width: 768px) {
    .qw-bayi-satir { grid-template-columns: 1fr; }
    .qw-bayi-ipucu { padding-bottom: 0; }
    /* Tek sutunda da Bayi, Musteri'nin HEMEN altinda: Teklif Kanali ve sonrasi bir sira geri. */
    .wizard-grid2 > .qw-kanal,
    .wizard-grid2 > .qw-kanal ~ * { order: 2; }
    .wizard-grid2 > .qw-bayi { order: 1; }
}

/* STOKTAN TEKLIF BILGI SERIDI + KALEM KAYNAGI (07.10.2026) — "Bu araç için teklif ver":
   kalemlerin nereden geldigi yazar, "Kalemleri başka tekliften al" ile listeden secilir. */
.qw-stok-not {
    padding: 8px 12px;
    border: 1px solid #b8c8de;
    background: #e8eef7;
    color: #0C447C;
    font-size: 0.82rem;
    margin-bottom: 10px;
    border-radius: 0;
}
.qw-kk-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.qw-kk-satir > span { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.qw-kk-uyari { color: #92400e; font-weight: 600; }
.qw-kk-btn {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #0C447C;
    border-radius: 0;
    background: #fff;
    color: #0C447C;
    cursor: pointer;
}
.qw-kk-btn:hover { background: #0C447C; color: #fff; }
.qw-kk-panel { margin-top: 8px; border-top: 1px solid #b8c8de; padding-top: 8px; }
.qw-kk-ara {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 0.82rem;
    border: 1px solid #b8c8de;
    border-radius: 0;
    background: #fff;
    color: #0f172a;
}
.qw-kk-liste { margin-top: 6px; max-height: 260px; overflow-y: auto; border: 1px solid #d6e0ec; background: #fff; }
.qw-kk-oge {
    display: grid;
    grid-template-columns: 130px 70px minmax(0, 1fr);
    gap: 2px 10px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    background: #fff;
    color: #0f172a;
    text-align: left;
    font-size: 0.8rem;
    cursor: pointer;
}
.qw-kk-oge:hover { background: #f0f6ff; }
.qw-kk-oge .no { font-weight: 700; }
.qw-kk-oge .tip { color: #475569; }
.qw-kk-oge .tip.ayni { color: #047857; font-weight: 700; }
.qw-kk-oge .musteri { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qw-kk-oge .ek { grid-column: 1 / -1; font-size: 0.72rem; color: #64748b; }
.qw-kk-bos { padding: 8px; font-size: 0.78rem; color: #64748b; }
@media (max-width: 768px) {
    .qw-kk-btn { min-height: 36px; }
    .qw-kk-ara { min-height: 36px; font-size: 16px; }
    .qw-kk-oge { grid-template-columns: minmax(0, 1fr) auto; }
    .qw-kk-oge .musteri { grid-column: 1 / -1; white-space: normal; }
}
.app-root.dark .qw-stok-not { background: #13233a; border-color: #2f4a6b; color: #c9dcf5; }
.app-root.dark .qw-kk-btn { background: #0d1117; border-color: #58a6ff; color: #79b8ff; }
.app-root.dark .qw-kk-btn:hover { background: #1f6feb; color: #fff; }
.app-root.dark .qw-kk-panel { border-top-color: #2f4a6b; }
.app-root.dark .qw-kk-ara { background: #0d1117; border-color: #3a4250; color: var(--yl-text); }
.app-root.dark .qw-kk-liste { background: #0d1117; border-color: #30363d; }
.app-root.dark .qw-kk-oge { background: #0d1117; border-bottom-color: #21262d; color: #e6edf3; }
.app-root.dark .qw-kk-oge:hover { background: #161b22; }
.app-root.dark .qw-kk-oge .tip { color: #8b949e; }
.app-root.dark .qw-kk-oge .tip.ayni { color: #3fb950; }
.app-root.dark .qw-kk-uyari { color: #f0b429; }

/* VADE KOSULU (11.10.2026): siparise bagli satirda tarih yerine kosul + elle tarih dugmesi */
.vade-kosul { display: flex; align-items: center; gap: 4px; min-width: 0; }
.vade-kosul > :first-child { flex: 1 1 auto; min-width: 0; }
.vade-kosul-metin { font-size: 0.78rem; color: var(--yl-text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vade-kosul-btn { flex: 0 0 auto; border: 1px solid var(--yl-border); background: transparent; border-radius: 0;
                  padding: 1px 5px; font-size: 0.78rem; line-height: 1.3; cursor: pointer; color: var(--yl-text-light); }
.vade-kosul-btn:hover { border-color: var(--yl-primary); color: var(--yl-primary); }