/* ============================================================
   TEKLIF LISTESI - ERP GRID STYLES
   Professional, clean, SAP Fiori / Dynamics inspired
   ============================================================ */

/* === FILTER BAR === */
.quote-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.quote-filter-select {
    max-width: 155px;
    padding: 6px 28px 6px 10px;
    border-radius: 0;
    border: 1px solid var(--yl-border);
    background: var(--yl-white);
    color: var(--yl-text);
    font-size: 0.8rem;
    height: 34px;
    transition: border-color var(--yl-transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.quote-filter-select:focus {
    border-color: var(--yl-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 125, 221, 0.1);
}

/* === LOADING & ERROR STATES === */
.quote-loading-state {
    text-align: center;
    padding: 40px;
    color: var(--yl-text-light);
    font-size: 0.82rem;
}

/* === TOAST OVERLAY (Ekran ortasi modal onay/hata) === */
.toast-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: toastFadeIn 0.2s ease-out;
}

.toast-card {
    background: #fff;
    border-radius: 0;
    padding: 36px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
    min-width: 280px;
    max-width: 380px;
    animation: toastPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast-icon-success {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    background: #ecfdf5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: toastCheckBounce 0.5s ease 0.2s both;
}

.toast-icon-success svg {
    width: 32px; height: 32px;
    stroke: #059669;
    stroke-width: 2.5;
    fill: none;
}

.toast-icon-success .check-path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: toastCheckDraw 0.4s ease 0.4s forwards;
}

.toast-icon-error {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    background: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: toastCheckBounce 0.5s ease 0.2s both;
}

.toast-icon-error svg {
    width: 32px; height: 32px;
    stroke: #dc2626;
    stroke-width: 2.5;
    fill: none;
}

.toast-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
}

.toast-title.success { color: #065f46; }
.toast-title.error { color: #991b1b; }

.toast-message {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.4;
}

@keyframes toastFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes toastPopIn {
    from { opacity: 0; transform: scale(0.8) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes toastCheckBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes toastCheckDraw {
    to { stroke-dashoffset: 0; }
}

/* Inline banner versions (for minor messages) */
.quote-success-state {
    padding: 10px 16px;
    background: #f0faf4;
    border: 1px solid #b7e4c7;
    border-radius: 0;
    color: #1e6c38;
    margin-bottom: 10px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-error-state {
    padding: 10px 16px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 0;
    color: #c53030;
    margin-bottom: 10px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* === GRID CONTAINER === */
.quote-grid-container {
    background: var(--yl-white);
    border: 1px solid var(--yl-border);
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.quote-table-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Sabit basligin altinda YARIM SATIR kalmasin: kaydirma satir sinirina
   yapisir. Snap noktasinin basligin altina denk gelmesi icin gereken
   scroll-padding-top'u ylgrid.satirHizala() olcup yazar (baslik yuksekligi
   arama satiri acik/kapali, yazi tipi ve yakinlastirmaya gore degisir).
   proximity: yalnizca yakinsa yapisir, uzun listede kaydirma serbest kalir.
   Telefon kart duzeninde satirlar kart oldugu icin uygulanmaz. */
@media (min-width: 701px) {
    .quote-table-wrapper { scroll-snap-type: y proximity; }
    .quote-grid tbody tr { scroll-snap-align: start; }
    /* Genisletilmis detay satiri bir "satir" degil, snap noktasi olmasin */
    .quote-grid tbody tr.detail-row { scroll-snap-align: none; }
}

/* === MASTER TABLE === */
.quote-grid {
    width: 100%;
    /* SEPARATE sart: collapse'ta kenarliklar hucreye degil TABLOYA ait olur ve
       sabit (sticky) baslik kaydirilirken altindaki satirlarin renkleri baslik
       kenarindan 1px cizgiler halinde sizardi. Separate'te her hucre kendi
       kenarligini cizer, baslikla birlikte hareket eder. Kenarliklar asagida
       sag+alt olarak verilir; sol/ust cizgiyi zaten .quote-grid-container'in
       kendi cercevesi sagliyor, gorunum degismez. */
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.8rem;
    text-align: left;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
}

/* Sutun genisligi YlGrid'den CSS DEGISKENI olarak gelir (--ylg-w) ve yalnizca
   genislik VERILMIS hucrelere (.ylg-w) uygulanir. Satir ici "width:110px" olarak
   basilsaydi telefon kart duzenindeki sifirlamayi yener, masaustu piksel
   genislikleri kartin icinde yasamaya devam eder ve hucreler ic ice girerdi. */
.quote-grid thead th.ylg-w,
.quote-grid tbody tr > td.ylg-w { width: var(--ylg-w); }

.quote-grid thead th.ylg-ta-c,
.quote-grid tbody tr > td.ylg-ta-c { text-align: center; }
.quote-grid thead th.ylg-ta-r,
.quote-grid tbody tr > td.ylg-ta-r { text-align: right; }

.quote-grid thead {
    position: sticky;
    top: 0;
    /* Satir icindeki renkli hucreler (PUAN: HOT/WARM/COLD) ve rozetler
       basligin ustune cikmasin diye belirgin sekilde yuksek. */
    z-index: 20;
}

.quote-grid th {
    background: #f8f9fb;
    /* padding-box: arka plan kenarligin ALTINA tasmaz — sabit baslikta
       kenarda renk sizintisi birakan ikinci kaynak buydu. */
    background-clip: padding-box;
    color: #6b7280;
    font-weight: 600;
    padding: 10px var(--yl-space-md);
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    user-select: none;
}

.quote-grid td {
    padding: 9px var(--yl-space-md);
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    color: var(--yl-text);
    vertical-align: middle;
}

.quote-grid tbody tr {
    transition: background var(--yl-transition-fast);
}

.quote-grid tbody tr:hover {
    background: #f5f7fa;
}

.quote-grid tbody tr.expanded-master {
    background: #f8fafd;
    box-shadow: inset 3px 0 0 var(--yl-accent);
}

.quote-grid tbody tr.detail-row:hover {
    background: transparent;
}

/* === SATIR GENISLETME — DURUM + TEMAS GECMISI (chevron) === */
.qt-expand-cell {
    text-align: center;
    padding: 0 !important;
}

.qt-expand-chevron {
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--yl-text-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: color var(--yl-transition-fast);
}

.qt-expand-chevron:hover { color: var(--yl-accent); }

.qt-expand-chevron svg { transition: transform 0.15s ease; }

.qt-expand-chevron.expanded svg { transform: rotate(90deg); }

.qt-history-td {
    padding: 12px 16px !important;
    background: #f8fafd;
    border-radius: 0;
}

.qt-history-loading,
.qt-history-empty {
    font-size: 0.76rem;
    color: var(--yl-text-light);
    padding: 4px 0;
}

.qt-history-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qt-history-entry {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.76rem;
}

.qt-history-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--yl-accent);
    flex-shrink: 0;
}

.qt-history-date {
    color: var(--yl-text-light);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 118px;
}

.qt-history-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--yl-text);
}

.qt-history-arrow {
    color: var(--yl-text-light);
}

.qt-history-created {
    color: var(--yl-text-light);
    font-weight: 600;
}

.qt-history-rev {
    font-size: 0.68rem;
    color: var(--yl-text-light);
    border: 1px solid var(--yl-border);
    padding: 1px 5px;
    border-radius: 0;
}

.qt-history-kisi {
    color: var(--yl-text-light);
}

.qt-history-tip-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--yl-accent);
}

.quote-empty-state {
    text-align: center;
    padding: 32px !important;
    color: var(--yl-text-light);
}

/* === CELL STYLING === */
.quote-date-cell {
    white-space: nowrap;
}

.quote-no {
    font-weight: 600;
    color: var(--yl-accent);
    font-size: 0.8rem;
}

.quote-rev {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 1px;
}

/* Urun spec kodu (Aks.Tip.Lastik.Extension.Suspansiyon.Gooseneck) — teklif no altinda.
   Coklu filtrede hangi teklifin hangi spec oldugunu listeden gormek icin. */
.quote-spec-kod {
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.2px;
    margin-top: 2px;
    white-space: nowrap;
}
.quote-rev-onayli {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 0;
    vertical-align: middle;
}

.quote-customer {
    font-weight: 700;
    font-size: 0.82rem;
    color: #111827;
    letter-spacing: -0.01em;
}

.quote-contact {
    font-size: 0.73rem;
    color: #9ca3af;
    margin-top: 2px;
}

/* Bayi uzerinden satis — musterinin altinda (bayi etiket rengiyle), 04.10.2026 */
.quote-bayi {
    font-size: 0.72rem;
    font-weight: 600;
    color: #B4690E;
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.app-root.dark .quote-bayi { color: #f59e0b; }

.quote-amount-cell {
    text-align: right;
    white-space: nowrap;
}

.quote-amount {
    font-weight: 600;
    color: var(--yl-text);
    letter-spacing: -0.01em;
}

.quote-currency {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-left: 4px;
}

/* === ACTION BUTTONS — 3+3 grid === */
.quote-row-actions {
    display: grid;
    grid-template-columns: repeat(3, 24px);
    gap: 2px;
    align-items: center;
    opacity: 1;
}

.btn-expand {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all var(--yl-transition-fast);
    border-radius: 0;
    flex-shrink: 0;
}

.btn-expand:hover {
    background: rgba(59, 125, 221, 0.08);
    color: var(--yl-accent);
}

.btn-expand svg {
    width: 14px;
    height: 14px;
}

/* ── Liste ISLEM sütunu — renkli ikon butonları ── */

/* Düzenle — slate mavi */
.btn-icon-edit { color: #475569; border-color: #94a3b8; }
.btn-icon-edit:hover { background: #475569; color: #fff; border-color: #475569; }

/* Kopyala — slate (nötr, ikincil aksiyon) */
.btn-icon-copy { color: #64748b; border-color: #cbd5e1; }
.btn-icon-copy:hover { background: #64748b; color: #fff; border-color: #64748b; }

/* PDF Oluştur — mor */
.btn-icon-pdf { color: #6d28d9; border-color: #6d28d9; }
.btn-icon-pdf:hover { background: #6d28d9; color: #fff; border-color: #6d28d9; }
.btn-icon-pdf:disabled { opacity: 0.5; cursor: not-allowed; }

/* Ön İzle — koyu mavi */
.btn-icon-preview { color: #0369a1; border-color: #0369a1; }
.btn-icon-preview:hover { background: #0369a1; color: #fff; border-color: #0369a1; }

/* Hazır Teklif — aktif (dosya var): amber */
.btn-icon-attach-active { color: #b45309; border-color: #b45309; background: rgba(180,83,9,0.05); }
.btn-icon-attach-active:hover { background: #b45309; color: #fff; border-color: #b45309; }

/* Hazır Teklif — pasif (dosya yok): hafif slate */
.btn-icon-attach-empty { color: #94a3b8; border-color: #e2e8f0; }
.btn-icon-attach-empty:hover { background: #64748b; color: #fff; border-color: #64748b; }
.btn-icon-attach-empty:disabled { opacity: 0.5; cursor: not-allowed; }

/* Sil — kırmızı */
.btn-icon-delete { color: #be123c; border-color: #be123c; }
.btn-icon-delete:hover { background: #be123c; color: #fff; border-color: #be123c; }

/* Dark mode */
.app-root.dark .btn-icon-edit  { color: #94a3b8; border-color: #475569; }
.app-root.dark .btn-icon-edit:hover { background: #475569; color: #fff; }
.app-root.dark .btn-icon-copy  { color: #64748b; border-color: #334155; }
.app-root.dark .btn-icon-copy:hover { background: #334155; color: #e2e8f0; }
.app-root.dark .btn-icon-pdf   { color: #c4b5fd; border-color: #6d28d9; }
.app-root.dark .btn-icon-pdf:hover { background: #6d28d9; color: #fff; }
.app-root.dark .btn-icon-preview { color: #7dd3fc; border-color: #0369a1; }
.app-root.dark .btn-icon-preview:hover { background: #0369a1; color: #fff; }
.app-root.dark .btn-icon-attach-active { color: #fcd34d; border-color: #b45309; background: rgba(180,83,9,0.12); }
.app-root.dark .btn-icon-attach-active:hover { background: #b45309; color: #fff; }
.app-root.dark .btn-icon-attach-empty { color: #475569; border-color: #1e293b; }
.app-root.dark .btn-icon-attach-empty:hover { background: #334155; color: #e2e8f0; }
.app-root.dark .btn-icon-delete { color: #fda4af; border-color: #be123c; }
.app-root.dark .btn-icon-delete:hover { background: #be123c; color: #fff; }

/* === DETAIL / REVISION ROW === */
.quote-detail-wrapper {
    background: #fafbfc;
    padding: 0;
    border-bottom: 1px solid #eef0f3;
}

.quote-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    border-bottom: 1px solid #eef0f3;
    background: #f6f7f9;
}

.quote-detail-title {
    font-weight: 600;
    font-size: 0.76rem;
    color: var(--yl-primary);
}

.quote-detail-actions {
    display: flex;
    gap: 6px;
}

.quote-detail-loading {
    padding: 8px 14px;
    color: var(--yl-text-light);
    font-size: 0.76rem;
}

.quote-detail-wrapper .detail-table {
    border-radius: 0;
    border: 0;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
    background: transparent;
    font-variant-numeric: tabular-nums;
}

.detail-table th {
    background: #f0f1f3;
    padding: 4px 10px;
    color: #8b919a;
    font-weight: 600;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #e4e6ea;
}

.detail-table td {
    padding: 4px 10px;
    border-bottom: 1px solid #f0f1f3;
    vertical-align: middle;
}

.detail-table tbody tr:last-child td {
    border-bottom: none;
}

.detail-table tr.header-row td {
    background: #f0f7f2;
    color: #2d6b3f;
    font-weight: 600;
}

.detail-table tr.active-rev-row td {
    background: #f0f4ff;
}

.rev-number-cell {
    text-align: center;
    font-weight: 600;
}

.rev-meta-cell {
    font-size: 0.72rem;
    color: #9ca3af;
    white-space: nowrap;
}

.rev-detail-cell {
    font-size: 0.73rem;
    color: var(--yl-text);
    line-height: 1.35;
}

/* === TRANSITION BUTTONS === */
.btn-transition {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: all var(--yl-transition-fast);
    white-space: nowrap;
    line-height: 1.4;
}

.btn-transition:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Gonder — Mavi ton: solid, okunaklı */
.btn-ts-sent {
    background: #1d4ed8; color: #fff; border-color: #1d4ed8;
}
.btn-ts-sent:hover:not(:disabled) { background: #1e40af; border-color: #1e40af; }

/* Onaya Sun — Amber, kurumsal */
.btn-ts-waiting {
    background: #92400e; color: #fff; border-color: #92400e;
}
.btn-ts-waiting:hover:not(:disabled) { background: #78350f; border-color: #78350f; }

/* Onayla — Yeşil, güçlü */
.btn-ts-approved {
    background: #065f46; color: #fff; border-color: #065f46;
}
.btn-ts-approved:hover:not(:disabled) { background: #064e3b; border-color: #064e3b; }

/* Reddet — Kırmızı, net */
.btn-ts-rejected {
    background: #9f1239; color: #fff; border-color: #9f1239;
}
.btn-ts-rejected:hover:not(:disabled) { background: #881337; border-color: #881337; }

/* Siparis — Koyu yeşil, tamamlanmış hissi */
.btn-ts-order {
    background: #14532d; color: #fff; border-color: #14532d;
}
.btn-ts-order:hover:not(:disabled) { background: #166534; border-color: #166534; }

/* Kapat — Şeffaf, hafif — dikkat çekmesin */
.btn-ts-closed {
    background: #f8fafc; color: #475569; border-color: #cbd5e1;
}
.btn-ts-closed:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }

/* Geri Al / Reaktive — Turuncu vurgu */
.btn-ts-reactivate {
    background: #7c2d12; color: #fff; border-color: #7c2d12;
}
.btn-ts-reactivate:hover:not(:disabled) { background: #9a3412; border-color: #9a3412; }

/* Revize Et — Öne çıkan, indigo */
.btn-revize {
    background: #4f46e5; color: #fff; border-color: #4f46e5;
}
.btn-revize:hover:not(:disabled) { background: #4338ca; border-color: #4338ca; }

/* Revize Onayı — teal; müşteri "Onayla"sından (koyu yeşil) ayrı. REV{n}'i baz kilitler. */
.btn-revize-onay {
    background: #0d9488; color: #fff; border-color: #0d9488;
}
.btn-revize-onay:hover:not(:disabled) { background: #0f766e; border-color: #0f766e; }

/* Asama gecis butonu — soft indigo */
.btn-ts-stage {
    background: #ede9fe; color: #4c1d95; border-color: #c4b5fd;
}
.btn-ts-stage:hover:not(:disabled) { background: #ddd6fe; border-color: #a78bfa; }

/* Belge islem butonlari (detay paneli) */
.btn-doc-pdf {
    background: #6d28d9; color: #fff; border-color: #6d28d9;
}
.btn-doc-pdf:hover:not(:disabled) { background: #5b21b6; border-color: #5b21b6; }

.btn-doc-preview {
    background: #0369a1; color: #fff; border-color: #0369a1;
}
.btn-doc-preview:hover:not(:disabled) { background: #075985; border-color: #075985; }

.btn-doc-proforma {
    background: #0d9488; color: #fff; border-color: #0d9488;
}
.btn-doc-proforma:hover:not(:disabled) { background: #0f766e; border-color: #0f766e; }

/* Ek materyaller — musteriden gelen gorsel/sartname arsivi (belgeye girmez) */
.btn-doc-materyal {
    background: #6d28d9; color: #fff; border-color: #6d28d9;
}
.btn-doc-materyal:hover:not(:disabled) { background: #5b21b6; border-color: #5b21b6; }

.materyal-modal { max-width: 660px; width: 96vw; }
.materyal-body  { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; overflow-y: auto; min-height: 0; }
.materyal-ipucu {
    font-size: 0.76rem; line-height: 1.4; color: #92400e;
    background: #fffbeb; border: 1px solid #fde68a; padding: 6px 8px; border-radius: 0;
}
.materyal-arac     { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.materyal-arac-not { font-size: 0.72rem; color: var(--yl-text-light); }
.materyal-durum    { font-size: 0.76rem; color: var(--yl-accent); }
.materyal-hata     { font-size: 0.76rem; color: #b91c1c; }
.materyal-bos      { font-size: 0.82rem; color: var(--yl-text-light); padding: 14px 0; text-align: center; }

.materyal-liste { display: flex; flex-direction: column; gap: 6px; }
.materyal-satir {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--yl-border); padding: 7px 8px; border-radius: 0;
}
.materyal-onizleme {
    width: 52px; height: 52px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; border: 1px solid var(--yl-border); overflow: hidden;
}
.materyal-onizleme img { width: 100%; height: 100%; object-fit: cover; }
.materyal-uzanti { font-size: 0.62rem; font-weight: 700; color: #475569; letter-spacing: .3px; }
.materyal-bilgi  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.materyal-ad     { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.materyal-meta   { font-size: 0.7rem; color: var(--yl-text-light); }
.materyal-not    {
    font-size: 0.74rem; padding: 3px 5px; border: 1px solid var(--yl-border);
    border-radius: 0; width: 100%; background: transparent; color: inherit;
}
.materyal-eylem  { display: flex; align-items: center; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.materyal-sil-soru { font-size: 0.72rem; color: #b91c1c; font-weight: 700; }
.materyal-btn-sil  { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.materyal-btn-sil:hover { background: #991b1b; border-color: #991b1b; }
.materyal-btn-sil-ikon { padding: 3px 7px; }

.app-root.dark .btn-doc-materyal   { background: #4c1d95; color: #ddd6fe; border-color: #6d28d9; }
.app-root.dark .materyal-ipucu     { background: rgba(234,179,8,0.10); border-color: rgba(234,179,8,0.35); color: #fcd34d; }
.app-root.dark .materyal-onizleme  { background: rgba(148,163,184,0.10); }
.app-root.dark .materyal-uzanti    { color: #cbd5e1; }

/* Telefon: satir dikeye acilsin, eylemler alta gecsin */
@media (max-width: 768px) {
    .materyal-satir { flex-wrap: wrap; }
    .materyal-eylem { width: 100%; justify-content: flex-start; }
}

.btn-doc-attach {
    background: #b45309; color: #fff; border-color: #b45309;
}
.btn-doc-attach:hover:not(:disabled) { background: #92400e; border-color: #92400e; }

.btn-doc-attach-empty {
    background: #f8fafc; color: #64748b; border-color: #cbd5e1;
}
.btn-doc-attach-empty:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }

.btn-doc-delete {
    background: #be123c; color: #fff; border-color: #be123c; padding: 3px 8px; min-width: 0;
}
.btn-doc-delete:hover:not(:disabled) { background: #9f1239; border-color: #9f1239; }

/* === CHIPS (BADGES) — Mum çubuğu gradyan efekti === */
.yl-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 22px;
    padding: 0 6px;
    border-radius: 0;
    border: none;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.04em;
}

/* DURUM chip'leri — notr/renksiz; renk kargasasi olmasin */
.chip-draft,
.chip-sent,
.chip-waiting,
.chip-ready,
.chip-approved,
.chip-rejected,
.chip-order,
.chip-open,
.chip-closed    { background: #f1f3f5; color: #374151; border: 1px solid #d1d5db; }

/* Standing Chips */
.chip-hot          { background: rgba(185,28,28,0.13);  color: #B91C1C; }
.chip-warm         { background: rgba(180,83,9,0.13);   color: #B45309; }
.chip-cold         { background: rgba(29,78,216,0.12);  color: #1D4ED8; }
.chip-taslak-puan  { background: rgba(100,116,139,0.13); color: #64748b; }

/* === FOOTER === */
.quote-grid-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--yl-border);
    font-size: 0.76rem;
    color: var(--yl-text-light);
    background: #fafbfc;
}

/* === MODAL / QUICK ADD === */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.quick-modal-content {
    background: var(--yl-white);
    border-radius: 0;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: modal-pop 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    /* Icerik ekrana sigmadiginda modal tasiyordu; alt alanlara ancak tarayiciyi
       uzaklastirarak erisilebiliyordu (7 dil + alt aciklama = cok uzun form).
       Yukseklik ekranla sinirlanir, GOVDE kendi icinde kayar; baslik ve
       dugmeler her zaman gorunur kalir. */
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

/* min-height:0 SART: flex ogesi varsayilan olarak icerigi kadar buyur ve
   overflow-y:auto hic devreye girmez. */
.quick-modal-content > .modal-body {
    overflow-y: auto;
    min-height: 0;
}

.quick-modal-content > .modal-header,
.quick-modal-content > .modal-footer { flex: 0 0 auto; }

/* Ulke secici (typeahead) iceren hizli-ekle modali: acilir liste modal kutusunun
   ALTINA tasar. overflow:hidden/auto onu kirpiyordu (yalnizca ince serit gorunur,
   ic scroll da ise yaramaz). Kirpmayi kaldir — liste kendi ic scroll'una sahip
   (.ulke-secici-liste max-height:240px + overflow-y:auto). */
.quick-modal-content.quick-modal-ulke { overflow: visible; }
.quick-modal-content.quick-modal-ulke .modal-body { overflow: visible; }

@keyframes modal-pop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* === TEKLIF KAYBEDILME NEDENI (red / kapatma) === */
/* ‼️ CIFT SINIF SART: wizard.css de ".quick-modal-content { width: 380px }" tanimlar ve
   quotes.css'ten SONRA yuklenir. Tek sinifla yazilirsa (ayni ozgulluk) sonraki dosya
   kazanir ve pencere 380px'e sikisir — 10 kategori + neden listesi okunmaz hale gelir. */
.quick-modal-content.red-sebep-modal { width: 660px; }

.red-sebep-header      { background: #fff5f5; border-bottom-color: #fecaca; }
.red-sebep-header h4   { color: #b91c1c; font-size: 0.98rem; }
.red-sebep-kapat {
    background: none; border: none; cursor: pointer;
    color: #b91c1c; font-size: 1rem; line-height: 1; padding: 2px 6px;
}

.red-sebep-body { padding: 14px 18px; }

.red-sebep-adim {
    font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--yl-text-light);
    margin: 12px 0 6px;
}
.red-sebep-body > .red-sebep-adim:first-child { margin-top: 0; }
.red-sebep-zorunlu      { color: #b91c1c; font-weight: 700; text-transform: none; letter-spacing: 0; }
.red-sebep-istege-bagli { color: var(--yl-text-light); font-weight: 500; text-transform: none; letter-spacing: 0; }

.red-sebep-kategoriler { display: flex; flex-wrap: wrap; gap: 5px; }
.red-sebep-kat {
    border: 1px solid var(--yl-border); background: var(--yl-white);
    border-radius: 0; cursor: pointer;
    font-size: 0.76rem; padding: 5px 10px; color: var(--yl-text);
    font-family: inherit; text-align: left;
}
.red-sebep-kat:hover   { background: var(--yl-bg); }
.red-sebep-kat.secili  { background: #b91c1c; border-color: #b91c1c; color: #fff; font-weight: 600; }

/* Uzun neden listesi (8 kaleme kadar) pencereyi tasirmasin: kendi icinde kayar. */
.red-sebep-nedenler {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 240px; overflow-y: auto;
    border: 1px solid var(--yl-border); padding: 4px;
}
.red-sebep-neden {
    display: flex; flex-direction: column; gap: 1px;
    border: 1px solid transparent; background: none;
    border-radius: 0; cursor: pointer; text-align: left;
    padding: 5px 8px; font-family: inherit; width: 100%;
}
.red-sebep-neden:hover  { background: var(--yl-bg); }
.red-sebep-neden.secili { background: #fff5f5; border-color: #b91c1c; }
.red-sebep-neden-ad     { font-size: 0.8rem; color: var(--yl-text); font-weight: 600; }
.red-sebep-neden.secili .red-sebep-neden-ad { color: #b91c1c; }
.red-sebep-neden-ipucu  { font-size: 0.7rem; color: var(--yl-text-light); }

.red-sebep-not {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--yl-border); border-radius: 0;
    padding: 7px 9px; font-size: 0.8rem; font-family: inherit; resize: vertical;
    background: var(--yl-white); color: var(--yl-text);
}

.red-sebep-footer { align-items: center; }
.red-sebep-uyari  { margin-right: auto; font-size: 0.76rem; color: #b91c1c; font-weight: 600; }
.red-sebep-btn {
    border: 1px solid var(--yl-border); background: var(--yl-white);
    border-radius: 0; cursor: pointer;
    font-size: 0.8rem; padding: 6px 14px; font-family: inherit; color: var(--yl-text);
}
.red-sebep-btn:hover:not(:disabled)     { background: var(--yl-bg); }
.red-sebep-btn.is-danger                { background: #b91c1c; border-color: #b91c1c; color: #fff; font-weight: 600; }
.red-sebep-btn.is-danger:hover:not(:disabled) { background: #991b1b; }
.red-sebep-btn:disabled                 { opacity: 0.5; cursor: not-allowed; }

/* Kaydedilmis nedenin listede/karttaki tek satirlik rozeti */
.red-sebep-rozet {
    display: inline-block; max-width: 100%;
    border: 1px solid #fecaca; background: #fff5f5; color: #b91c1c;
    border-radius: 0; font-size: 0.68rem; padding: 1px 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 768px) {
    .quick-modal-content.red-sebep-modal { width: 100%; max-width: 100%; max-height: 100vh; }
    .red-sebep-kategoriler  { gap: 4px; }
    .red-sebep-kat          { flex: 1 1 100%; }
    .red-sebep-nedenler     { max-height: 45vh; }
    .red-sebep-footer       { flex-wrap: wrap; }
    .red-sebep-uyari        { flex: 1 1 100%; margin: 0 0 6px 0; }
    .red-sebep-btn          { flex: 1 1 45%; }
}

.app-root.dark .red-sebep-header    { background: #2a1414; border-bottom-color: #7f1d1d; }
.app-root.dark .red-sebep-header h4,
.app-root.dark .red-sebep-kapat     { color: #fca5a5; }
.app-root.dark .red-sebep-kat       { background: #161b22; border-color: #30363d; color: #e6edf3; }
.app-root.dark .red-sebep-kat:hover { background: #21262d; }
.app-root.dark .red-sebep-kat.secili{ background: #7f1d1d; border-color: #7f1d1d; color: #fff; }
.app-root.dark .red-sebep-nedenler  { border-color: #30363d; }
.app-root.dark .red-sebep-neden:hover  { background: #21262d; }
.app-root.dark .red-sebep-neden.secili { background: #2a1414; border-color: #7f1d1d; }
.app-root.dark .red-sebep-neden.secili .red-sebep-neden-ad { color: #fca5a5; }
.app-root.dark .red-sebep-not       { background: #0d1117; border-color: #30363d; color: #e6edf3; }
.app-root.dark .red-sebep-btn       { background: #161b22; border-color: #30363d; color: #e6edf3; }
.app-root.dark .red-sebep-btn.is-danger { background: #7f1d1d; border-color: #7f1d1d; color: #fff; }
.app-root.dark .red-sebep-rozet     { background: #2a1414; border-color: #7f1d1d; color: #fca5a5; }

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

.modal-header h4 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--yl-primary);
}

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

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--yl-border);
    background: #f9fbfd;
}

/* ============================================================
   DARK MODE
   ============================================================ */
.app-root.dark .quote-grid-container {
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.app-root.dark .quote-grid th {
    background: #161b22;
    border-bottom-color: #30363d;
    border-right-color: #30363d;
    color: #8b949e;
}

.app-root.dark .quote-grid td {
    border-bottom-color: #21262d;
    border-right-color: #21262d;
}

.app-root.dark .quote-grid tbody tr:hover {
    background: rgba(255,255,255,0.03);
}

.app-root.dark .quote-grid tbody tr.expanded-master {
    background: rgba(59,125,221,0.06);
    box-shadow: inset 3px 0 0 var(--yl-accent);
}

.app-root.dark .qt-history-td { background: rgba(59,125,221,0.04); }
.app-root.dark .qt-history-rev { border-color: var(--yl-border); }

.app-root.dark .quote-no { color: #7aafee; }
.app-root.dark .quote-rev { color: #6b7280; }
.app-root.dark .quote-spec-kod { color: #94a3b8; }
.app-root.dark .quote-contact { color: #6b7280; }
.app-root.dark .quote-currency { color: #6b7280; }

.app-root.dark .quote-detail-wrapper {
    background: #13171e;
    border-bottom-color: #21262d;
}

.app-root.dark .quote-detail-header {
    background: #161b22;
    border-bottom-color: #21262d;
}

.app-root.dark .detail-table th {
    background: #1a1f2b;
    border-bottom-color: #2d333b;
    color: #8b949e;
}

.app-root.dark .detail-table td {
    border-bottom-color: #21262d;
}

.app-root.dark .detail-table tr.active-rev-row td {
    background: rgba(59,125,221,0.08);
}

.app-root.dark .detail-table td {
    border-bottom-color: #1c2028;
}

.app-root.dark .detail-table tr.header-row td {
    background: rgba(30,108,56,0.1);
    color: #6ee7b7;
}

.app-root.dark .quote-grid-footer {
    background: #161b22;
    border-top-color: #30363d;
}

.app-root.dark .quote-filter-select {
    background-color: #161b22;
    color: var(--yl-text);
    border-color: var(--yl-border);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.app-root.dark .toast-overlay {
    background: rgba(0,0,0,0.55);
}

.app-root.dark .toast-card {
    background: #1e2330;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}

.app-root.dark .toast-icon-success {
    background: rgba(5,150,105,0.15);
}

.app-root.dark .toast-icon-error {
    background: rgba(220,38,38,0.15);
}

.app-root.dark .toast-title { color: #e2e8f0; }
.app-root.dark .toast-title.success { color: #6ee7b7; }
.app-root.dark .toast-title.error { color: #fca5a5; }
.app-root.dark .toast-message { color: #94a3b8; }

.app-root.dark .quote-success-state {
    background: rgba(30,108,56,0.12);
    border-color: rgba(30,108,56,0.25);
    color: #86efac;
}

.app-root.dark .quote-error-state {
    background: rgba(197,48,48,0.12);
    border-color: rgba(197,48,48,0.25);
    color: #fca5a5;
}

.app-root.dark .btn-expand {
    background: #1e2530;
    border-color: #30363d;
    color: #8b949e;
}

.app-root.dark .btn-expand:hover {
    background: rgba(59, 125, 221, 0.15);
    border-color: rgba(59,125,221,0.4);
    color: #7dd3fc;
}

/* Dark Transition Buttons */
.app-root.dark .btn-ts-sent      { background: #1e3a6e; color: #93c5fd; border-color: #2563eb; }
.app-root.dark .btn-ts-waiting   { background: #451a03; color: #fcd34d; border-color: #d97706; }
.app-root.dark .btn-ts-approved  { background: #064e3b; color: #6ee7b7; border-color: #059669; }
.app-root.dark .btn-ts-rejected  { background: #4c0519; color: #fda4af; border-color: #e11d48; }
.app-root.dark .btn-ts-order     { background: #14532d; color: #86efac; border-color: #16a34a; }
.app-root.dark .btn-ts-closed    { background: #1e2530; color: #94a3b8; border-color: #334155; }
.app-root.dark .btn-ts-reactivate { background: #431407; color: #fdba74; border-color: #ea580c; }
.app-root.dark .btn-revize       { background: #312e81; color: #a5b4fc; border-color: #6366f1; }
.app-root.dark .btn-revize-onay  { background: #134e4a; color: #5eead4; border-color: #14b8a6; }
.app-root.dark .btn-ts-stage     { background: #2e1065; color: #c4b5fd; border-color: #7c3aed; }
.app-root.dark .btn-doc-pdf      { background: #3b0764; color: #d8b4fe; border-color: #9333ea; }
.app-root.dark .btn-doc-preview  { background: #0c4a6e; color: #7dd3fc; border-color: #0284c7; }
.app-root.dark .btn-doc-proforma { background: #134e4a; color: #5eead4; border-color: #0d9488; }
.app-root.dark .btn-doc-attach   { background: #451a03; color: #fcd34d; border-color: #d97706; }
.app-root.dark .btn-doc-attach-empty { background: #1e2530; color: #94a3b8; border-color: #334155; }
.app-root.dark .btn-doc-delete   { background: #4c0519; color: #fda4af; border-color: #be123c; }

/* Dark Chips — sadece puan renkli, durum notr */
.app-root.dark .chip-hot  { background: rgba(220,40,40,0.2);   color: #FCA5A5; }
.app-root.dark .chip-warm { background: rgba(220,130,0,0.2);   color: #FCD34D; }
.app-root.dark .chip-cold { background: rgba(60,130,200,0.2);  color: #93C5FD; }

.app-root.dark .chip-draft,
.app-root.dark .chip-sent,
.app-root.dark .chip-waiting,
.app-root.dark .chip-ready,
.app-root.dark .chip-approved,
.app-root.dark .chip-rejected,
.app-root.dark .chip-order,
.app-root.dark .chip-open,
.app-root.dark .chip-closed { background: #21262d; color: #8b949e; border-color: #30363d; }

/* === DURUM STATÜSÜ — renkli nokta + metin === */
.qt-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 600;
}
.qt-status::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* Draft / Taslak */
.qt-status-draft::before       { background: #9ca3af; }
.qt-status-draft                { color: #6b7280; }

/* Sent / Gönderildi */
.qt-status-sent::before        { background: #3b82f6; }
.qt-status-sent                 { color: #2563eb; }

/* WaitingApproval / Onay Bek. */
.qt-status-waitingapproval::before { background: #f59e0b; }
.qt-status-waitingapproval         { color: #d97706; }

/* Approved / Onaylandi */
.qt-status-approved::before, .qt-status-onaylandi::before { background: #10b981; }
.qt-status-approved, .qt-status-onaylandi                 { color: #059669; }

/* Rejected / Reddedildi */
.qt-status-rejected::before    { background: #ef4444; }
.qt-status-rejected             { color: #dc2626; }

/* ORDER / Siparis */
.qt-status-order::before, .qt-status-siparis::before { background: #7c3aed; }
.qt-status-order, .qt-status-siparis                  { color: #7c3aed; }

/* OPEN / Acik */
.qt-status-open::before        { background: #8b5cf6; }
.qt-status-open                 { color: #7c3aed; }

/* CLOSED / Kapali */
.qt-status-closed::before      { background: #6b7280; }
.qt-status-closed               { color: #6b7280; }

/* Calisma asamalari (satis oncesi) */
.qt-status-to_work::before     { background: #6366f1; }
.qt-status-to_work              { color: #6366f1; }

/* Uretim durumlari */
.qt-status-not_started::before      { background: #9ca3af; }
.qt-status-not_started               { color: #6b7280; }
.qt-status-production::before       { background: #f59e0b; }
.qt-status-production                { color: #d97706; }
.qt-status-on_hold::before          { background: #ef4444; }
.qt-status-on_hold                   { color: #dc2626; }
.qt-status-ready_to_deliver::before { background: #3b82f6; }
.qt-status-ready_to_deliver          { color: #2563eb; }
.qt-status-delivered::before        { background: #10b981; }
.qt-status-delivered                 { color: #059669; }
.qt-status-stock::before            { background: #7c3aed; }
.qt-status-stock                     { color: #7c3aed; }
.qt-status-canceled::before         { background: #6b7280; }
.qt-status-canceled                  { color: #6b7280; }
.qt-status-pre_prep::before    { background: #0d9488; }
.qt-status-pre_prep             { color: #0d9488; }
.qt-status-drawing::before     { background: #d97706; }
.qt-status-drawing              { color: #d97706; }
.qt-status-to_revise::before   { background: #db2777; }
.qt-status-to_revise            { color: #db2777; }

/* ACF / uretim kodu (Siparis durumunda durumun altinda) */
.qt-acf-code {
    font-size: 0.66rem;
    font-weight: 700;
    color: #7c3aed;
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.app-root.dark .qt-acf-code { color: #a78bfa; }

/* Asama gecis butonu */
.btn-ts-stage { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.btn-ts-stage:hover { background: #e0e7ff; }
.app-root.dark .btn-ts-stage { background: rgba(79,70,229,0.15); color: #a5b4fc; border-color: #4f46e5; }

/* ── ACF Modal ── */
.qt-acf-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 1600; display: flex; align-items: center; justify-content: center;
}
.qt-acf-modal {
    background: #fff; border: 1px solid #d0d5dd; width: 440px; max-width: 92vw;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column;
}
.app-root.dark .qt-acf-modal { background: #0d1117; border-color: #30363d; }
.qt-acf-head {
    padding: 12px 16px; background: #1f2937; color: #fff; font-weight: 700; font-size: 0.9rem;
}
.qt-acf-body { padding: 16px; }
.qt-acf-desc { margin: 0 0 10px; font-size: 0.82rem; color: #6b7280; }
.app-root.dark .qt-acf-desc { color: #8b949e; }
.qt-acf-input {
    width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd;
    padding: 8px 10px; font-size: 0.86rem; border-radius: 0; color: #1f2937;
}
.app-root.dark .qt-acf-input { background: #161b22; border-color: #30363d; color: #e6edf3; }
.qt-acf-err {
    margin-top: 9px; padding: 7px 10px; font-size: 0.78rem;
    background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
}
.qt-acf-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 16px; border-top: 1px solid #e2e8f0;
}
.app-root.dark .qt-acf-foot { border-top-color: #30363d; }
.qt-acf-btn-ok {
    background: #7c3aed; color: #fff; border: none; padding: 8px 16px;
    font-weight: 700; font-size: 0.82rem; cursor: pointer; border-radius: 0;
}
.qt-acf-btn-ok:hover { background: #6d28d9; }
.qt-acf-btn-ok:disabled { opacity: 0.6; cursor: default; }
.qt-acf-btn-cancel {
    background: #fff; color: #6b7280; border: 1px solid #d0d5dd; padding: 8px 14px;
    font-size: 0.82rem; cursor: pointer; border-radius: 0;
}
.app-root.dark .qt-acf-btn-cancel { background: #161b22; border-color: #30363d; color: #8b949e; }

/* Modal: input + Otomatik Uret butonu satiri */
.qt-acf-input-row { display: flex; gap: 6px; align-items: stretch; }
.qt-acf-input-row .qt-acf-input { flex: 1; }
.qt-acf-auto-btn {
    background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe;
    font-size: 0.76rem; font-weight: 600; padding: 0 10px; cursor: pointer;
    border-radius: 0; white-space: nowrap;
}
.qt-acf-auto-btn:hover { background: #e0e7ff; }
.qt-acf-auto-btn:disabled { opacity: 0.6; cursor: default; }
.app-root.dark .qt-acf-auto-btn { background: rgba(79,70,229,0.15); color: #a5b4fc; border-color: #4f46e5; }

/* ── Siparise Cevir: coklu uretim birimi tablosu ── */
.qt-acf-modal-genis { width: 760px; }
.qt-acf-adet-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 9px 10px; margin-bottom: 10px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.app-root.dark .qt-acf-adet-bar { background: #161b22; border-color: #30363d; }
.qt-acf-adet-info { font-size: 0.8rem; color: #6b7280; }
.qt-acf-adet-info strong { color: #1f2937; font-size: 0.9rem; }
.app-root.dark .qt-acf-adet-info { color: #8b949e; }
.app-root.dark .qt-acf-adet-info strong { color: #e6edf3; }
.qt-acf-adet-label {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font-size: 0.8rem; font-weight: 600; color: #1f2937;
}
.app-root.dark .qt-acf-adet-label { color: #e6edf3; }
.qt-acf-adet-input {
    width: 68px; box-sizing: border-box; border: 1px solid #d0d5dd;
    padding: 6px 8px; font-size: 0.86rem; border-radius: 0; color: #1f2937;
}
.app-root.dark .qt-acf-adet-input { background: #0d1117; border-color: #30363d; color: #e6edf3; }

/* Satir sayisi artinca modal ekrani asmasin — tablo kendi icinde kayar */
.qt-acf-grid-wrap { max-height: 46vh; overflow-y: auto; border: 1px solid #e2e8f0; }
.app-root.dark .qt-acf-grid-wrap { border-color: #30363d; }
.qt-acf-grid { width: 100%; border-collapse: collapse; }
.qt-acf-grid th {
    position: sticky; top: 0; z-index: 1;
    background: #f1f5f9; text-align: left; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: #475569;
    padding: 7px 8px; border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.app-root.dark .qt-acf-grid th { background: #161b22; color: #8b949e; border-bottom-color: #30363d; }
.qt-acf-grid td { padding: 4px 6px; border-bottom: 1px solid #f1f5f9; }
.app-root.dark .qt-acf-grid td { border-bottom-color: #21262d; }
.qt-acf-grid .qt-acf-col-no {
    width: 34px; text-align: center; font-size: 0.78rem; font-weight: 700; color: #94a3b8;
}
.qt-acf-req { color: #dc2626; }

/* Telefon: tablo satirlari karta doner (yatay kaydirma olmasin) */
@media (max-width: 700px) {
    .qt-acf-grid thead { display: none; }
    .qt-acf-grid, .qt-acf-grid tbody, .qt-acf-grid tr, .qt-acf-grid td { display: block; width: 100%; }
    .qt-acf-grid tr {
        border-bottom: 1px solid #e2e8f0; padding: 6px 0 8px; margin-bottom: 4px;
    }
    .app-root.dark .qt-acf-grid tr { border-bottom-color: #30363d; }
    .qt-acf-grid td { border-bottom: none; padding: 3px 8px; }
    .qt-acf-grid td::before {
        content: attr(data-label); display: block;
        font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.03em; color: #94a3b8; margin-bottom: 2px;
    }
    .qt-acf-grid .qt-acf-col-no {
        width: auto; text-align: left; color: #7c3aed; font-size: 0.82rem;
    }
    .qt-acf-grid .qt-acf-col-no::before { content: "BIRIM"; }
    .qt-acf-adet-label { margin-left: 0; }
    .qt-acf-grid-wrap { max-height: 52vh; }
}

/* Detay panel: ACF degeri + duzenle */
.qt-acf-detail { display: inline-flex; align-items: center; gap: 6px; }
.qt-acf-detail strong { color: #7c3aed; letter-spacing: 0.02em; }
.app-root.dark .qt-acf-detail strong { color: #a78bfa; }
.qt-acf-edit-btn {
    background: none; border: none; cursor: pointer; color: #9ca3af;
    font-size: 0.8rem; padding: 0 2px; line-height: 1;
}
.qt-acf-edit-btn:hover { color: #7c3aed; }
.qt-acf-edit-wrap { display: inline-flex; align-items: center; gap: 3px; }
.qt-acf-edit-input {
    border: 1px solid #d0d5dd; padding: 3px 6px; font-size: 0.78rem;
    border-radius: 0; width: 130px; color: #1f2937;
}
.app-root.dark .qt-acf-edit-input { background: #161b22; border-color: #30363d; color: #e6edf3; }
.qt-acf-mini {
    border: 1px solid #d0d5dd; background: #fff; cursor: pointer;
    width: 24px; height: 24px; font-size: 0.8rem; border-radius: 0; color: #6b7280;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qt-acf-mini:hover { background: #f3f4f6; }
.qt-acf-mini-ok { color: #16a34a; border-color: #86efac; }
.qt-acf-mini-ok:hover { background: #dcfce7; }
.qt-acf-mini-cancel { color: #dc2626; border-color: #fecaca; }
.qt-acf-mini-cancel:hover { background: #fef2f2; }
.app-root.dark .qt-acf-mini { background: #161b22; border-color: #30363d; }
.qt-acf-edit-err { font-size: 0.72rem; color: #dc2626; font-style: italic; }

/* Dark mode */
.app-root.dark .qt-status-draft                { color: #9ca3af; }
.app-root.dark .qt-status-sent                 { color: #60a5fa; }
.app-root.dark .qt-status-waitingapproval      { color: #fbbf24; }
.app-root.dark .qt-status-approved,
.app-root.dark .qt-status-onaylandi            { color: #34d399; }
.app-root.dark .qt-status-rejected             { color: #f87171; }
.app-root.dark .qt-status-order,
.app-root.dark .qt-status-siparis              { color: #a78bfa; }
.app-root.dark .qt-status-open                 { color: #a78bfa; }
.app-root.dark .qt-status-closed               { color: #8b949e; }

/* === PUAN HÜCRESİ — hücrenin arka planı renklenir, yazı ortalı ===
   Yüksek specificity (.quote-grid td...) ile hover/selected arkaplanını da yener */
.qt-puan-cell {
    text-align: center;
    vertical-align: middle;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.quote-grid td.qt-puan-cell.qt-puan-hot,
.quote-grid tbody tr:hover td.qt-puan-cell.qt-puan-hot,
.quote-grid tbody tr.qt-selected td.qt-puan-cell.qt-puan-hot   { background: #dc2626; color: #fff; }
.quote-grid td.qt-puan-cell.qt-puan-warm,
.quote-grid tbody tr:hover td.qt-puan-cell.qt-puan-warm,
.quote-grid tbody tr.qt-selected td.qt-puan-cell.qt-puan-warm  { background: #d97706; color: #fff; }
.quote-grid td.qt-puan-cell.qt-puan-cold,
.quote-grid tbody tr:hover td.qt-puan-cell.qt-puan-cold,
.quote-grid tbody tr.qt-selected td.qt-puan-cell.qt-puan-cold  { background: #2563eb; color: #fff; }
.quote-grid td.qt-puan-cell.qt-puan-none { background: transparent; color: #9ca3af; }

.app-root.dark .quote-grid td.qt-puan-cell.qt-puan-hot,
.app-root.dark .quote-grid tbody tr:hover td.qt-puan-cell.qt-puan-hot  { background: #7f1d1d; color: #fecaca; }
.app-root.dark .quote-grid td.qt-puan-cell.qt-puan-warm,
.app-root.dark .quote-grid tbody tr:hover td.qt-puan-cell.qt-puan-warm { background: #78350f; color: #fde68a; }
.app-root.dark .quote-grid td.qt-puan-cell.qt-puan-cold,
.app-root.dark .quote-grid tbody tr:hover td.qt-puan-cell.qt-puan-cold { background: #1e3a8a; color: #bfdbfe; }
.app-root.dark .quote-grid td.qt-puan-cell.qt-puan-none { color: #4b5563; }

.app-root.dark .modal-footer {
    background: #161b22;
}

.app-root.dark .quick-modal-content {
    background: var(--yl-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .quote-filter-bar {
        flex-direction: column;
        gap: 6px;
    }

    .quote-filter-bar .crm-search-box {
        max-width: 100% !important;
        width: 100%;
    }

    .quote-filter-select {
        max-width: 100%;
        width: 100%;
    }

    .quote-grid {
        font-size: 0.76rem;
    }

    .quote-grid th,
    .quote-grid td {
        padding: 8px 8px;
    }

    .quote-grid th { font-size: 0.64rem; }

    .hide-tablet { display: none; }

    .quote-detail-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .quote-detail-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .quote-grid th,
    .quote-grid td {
        padding: 7px 6px;
    }

    .quote-grid { font-size: 0.74rem; }
    .quote-grid th { font-size: 0.62rem; }

    .hide-mobile { display: none; }

    .yl-chip {
        padding: 2px 6px;
        font-size: 0.65rem;
    }

    .btn-transition {
        padding: 2px 7px;
        font-size: 0.65rem;
    }

    .quote-row-actions {
        opacity: 1;
    }
}

/* ============================================================
   TEKLIF + TEMAS BIRLESIK GORUNUM  (qt-*)
   ============================================================ */

.qt-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--yl-white);
    border-radius: 0;
}

.uretim-readonly-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--yl-text-light);
    margin-bottom: 2px;
}

.uretim-edit-modal {
    max-width: 820px;
    width: 92%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.uretim-edit-body {
    overflow-y: auto;
    flex: 1 1 auto;
}
@media (max-width: 640px) {
    .uretim-edit-modal { width: 96%; max-height: 92vh; }
}

.qt-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.qt-search {
    flex: 1;
    max-width: 260px;
}

/* Ulke filtresi (filtre cubugu) */
.qt-ulke-filter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
}
.qt-ulke-filter {
    border: 1px solid var(--yl-border);
    border-radius: 0;
    background: var(--yl-white);
    color: var(--yl-text);
    font-size: 0.78rem;
    padding: 6px 10px;
    max-width: 200px;
    cursor: pointer;
}
.qt-ulke-filter:focus { outline: none; border-color: var(--yl-accent); }
.app-root.dark .qt-ulke-filter { background: #161b22; color: #e5e9f0; border-color: #3a4250; }

/* Spec filtreler (Teklif Listesi grid arac cubugu icinde) — tip/aks/lastik/extension/suspansiyon/gooseneck */
.qt-spec-filter-ic { display: inline-flex; align-items: center; color: #6b7280; }
.app-root.dark .qt-spec-filter-ic { color: #8b949e; }
.qt-spec-clear {
    border: 1px solid var(--yl-border);
    border-radius: 0;
    background: var(--yl-white);
    color: var(--yl-text-light);
    font-size: 0.76rem;
    padding: 6px 10px;
    cursor: pointer;
}
.qt-spec-clear:hover { background: #e2e8f0; color: var(--yl-text); }
.app-root.dark .qt-spec-clear { background: #161b22; color: #8b949e; border-color: #3a4250; }
.app-root.dark .qt-spec-clear:hover { background: #21262d; color: #e5e9f0; }

/* Tarih araligi filtresi (Teklif + Uretim listesi arac cubugu) */
.qt-date-range { display: inline-flex; align-items: center; gap: 4px; }
.qt-date-input {
    border: 1px solid var(--yl-border);
    border-radius: 0;
    background: var(--yl-white);
    color: var(--yl-text);
    font-size: 0.76rem;
    padding: 5px 7px;
    min-width: 122px;
}
.qt-date-input:focus { outline: none; border-color: var(--yl-primary); }
.app-root.dark .qt-date-input { background: #161b22; color: #e5e9f0; border-color: #3a4250; }

/* Proforma sayisi rozeti (Teklif Listesi sutunu) */
.qt-proforma-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 22px; padding: 0 7px;
    border: 1px solid var(--yl-border); border-radius: 0;
    background: var(--yl-white); color: var(--yl-text-light);
    font-size: 0.76rem; font-weight: 700; cursor: pointer;
    transition: background var(--yl-transition-fast), color var(--yl-transition-fast);
}
.qt-proforma-badge.has { background: #eef2f8; border-color: var(--yl-accent); color: var(--yl-accent); }
.qt-proforma-badge:hover { background: #e2e8f0; }
.qt-proforma-badge.has:hover { background: var(--yl-accent); color: #fff; }
.app-root.dark .qt-proforma-badge { background: #161b22; border-color: #3a4250; color: #8b949e; }
.app-root.dark .qt-proforma-badge.has { background: #23324a; border-color: var(--yl-accent); color: #cfe0ff; }

.qt-filter-chips {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 37, 72, 0.13), 0 0 0 1px rgba(15, 37, 72, 0.10);
}

/* Segmented buton grubu — sadece filtre chips alanindaki chip'ler */
.qt-filter-chips .touch-chip-btn {
    border-radius: 0;
    border: none;
    border-right: 1px solid #d8dfe8;
    padding: 6px 15px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #fff;
    color: #4b5563;
    transition: background 0.12s, color 0.12s;
}

.qt-filter-chips .touch-chip-btn:last-child {
    border-right: none;
}

.qt-filter-chips .touch-chip-btn:hover:not(.active-all):not(.active-hot):not(.active-warm):not(.active-cold):not(.active-draft) {
    background: #f0f5ff;
    color: #1e3a6e;
}

/* Aktif durumlar — arka plan dolgu, kenarlık yok */
.qt-filter-chips .touch-chip-btn.active-all  { background: #e8eef7; color: #0C447C; border-right-color: #b8c8de; }
.qt-filter-chips .touch-chip-btn.active-hot  { background: #DC2828; color: #fff;    border-right-color: #b01e1e; }
.qt-filter-chips .touch-chip-btn.active-warm { background: #DC8200; color: #fff;    border-right-color: #b56800; }
.qt-filter-chips .touch-chip-btn.active-cold { background: #3C82C8; color: #fff;    border-right-color: #2e68a8; }
.qt-filter-chips .touch-chip-btn.active-draft { background: #E6ECF5; color: #3C5A8C; border-right-color: #c0cedf; }

.qt-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 12px;
    overflow: hidden;
}

/* Sol panel */
.qt-list-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: flex 0.25s ease;
}

.qt-list-panel.qt-with-detail {
    flex: 0 0 54%;
}

/* Sag detay paneli */
.qt-detail-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    overflow: hidden;
    background: var(--yl-white);
    animation: qtSlideIn 0.2s ease-out;
}

@keyframes qtSlideIn {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0);    }
}

.qt-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--yl-border);
    flex-shrink: 0;
    gap: 8px;
}

.qt-detail-tabs {
    display: flex;
    border-bottom: 1px solid var(--yl-border);
    flex-shrink: 0;
    padding: 0 8px;
    background: var(--yl-white);
}

.qt-detail-tab {
    padding: 9px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--yl-text-light);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s, border-color 0.15s;
}

.qt-detail-tab.active {
    color: var(--yl-primary);
    border-bottom-color: var(--yl-accent);
}

.qt-detail-tab:hover:not(.active) {
    color: var(--yl-text);
}

.qt-detail-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.qt-transitions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--yl-border);
    background: #fafbfc;
    flex-shrink: 0;
}

.qt-stage-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.qt-stage-picker-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--yl-text-light);
}
.app-root.dark .qt-stage-picker-label { color: var(--yl-text-light); }

/* Tablo satiri davranisi */
.qt-merged-grid tbody tr {
    cursor: pointer;
}

.qt-merged-grid tbody tr:hover td {
    background: #f0f5ff;
}

.qt-merged-grid tbody tr.qt-selected td {
    background: #e8f0ff;
}

.qt-merged-grid tbody tr.qt-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--yl-accent);
}

/* Kolon gizleme */
.qt-hide-sm  { }
.qt-hide-md  { }

@media (max-width: 1000px) {
    .qt-hide-sm { display: none !important; }
}

@media (max-width: 1200px) {
    .qt-list-panel.qt-with-detail .qt-hide-md { display: none !important; }
}

/* Dark mode */
.app-root.dark .qt-shell,
.app-root.dark .qt-detail-panel,
.app-root.dark .qt-detail-tabs {
    background: var(--yl-white);
    border-color: var(--yl-border);
}

.app-root.dark .qt-transitions {
    background: #161b22;
}

/* Belge islem butonlari satiri */
.qt-doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px 6px 14px;
    align-items: center;
}

.qt-doc-filename {
    font-size: 0.72rem;
    color: #b45309;
    margin: 0 14px 8px 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: #fefce8;
    border: 1px solid #fde68a;
}
.app-root.dark .qt-doc-filename {
    background: rgba(180,83,9,0.12);
    border-color: rgba(180,83,9,0.3);
    color: #fcd34d;
}

.app-root.dark .qt-merged-grid tbody tr:hover td {
    background: rgba(255,255,255,0.04);
}

.app-root.dark .qt-merged-grid tbody tr.qt-selected td {
    background: rgba(59,125,221,0.12);
}

/* ============================================================
   QT-HEADER — Professional header with KPI summary
   ============================================================ */

.qt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px 10px 16px;
    background: linear-gradient(135deg, #0f2548 0%, #163362 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.qt-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Ikon kutusu */
.qt-header-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.18);
}

/* Baslik + altyazi */
.qt-header-title-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}
.qt-header-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.qt-header-sub {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.55);
    font-weight: 400;
    line-height: 1.3;
}

/* KPI bantlari */
.qt-kpi-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: 4px;
}

.qt-kpi-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 12px;
    border-radius: 0;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s;
    border: 1px solid transparent;
    user-select: none;
    min-width: 52px;
}
.qt-kpi-chip:hover { transform: translateY(-1px); }

.qt-kpi-num {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
.qt-kpi-lbl {
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    color: rgba(255,255,255,0.7);
}

/* Renk varyantlari */
.qt-kpi-total {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.15);
}
.qt-kpi-total:hover { background: rgba(255,255,255,0.18); }

.qt-kpi-open {
    background: rgba(37,99,235,0.35);
    border-color: rgba(96,165,250,0.35);
}
.qt-kpi-open:hover { background: rgba(37,99,235,0.5); }

.qt-kpi-order {
    background: rgba(16,185,129,0.25);
    border-color: rgba(52,211,153,0.35);
}
.qt-kpi-order:hover { background: rgba(16,185,129,0.4); }
.qt-kpi-order .qt-kpi-num { color: #6ee7b7; }
.qt-kpi-order .qt-kpi-lbl { color: rgba(110,231,183,0.75); }

.qt-kpi-hot {
    background: rgba(239,68,68,0.25);
    border-color: rgba(252,165,165,0.3);
}
.qt-kpi-hot:hover { background: rgba(239,68,68,0.4); }
.qt-kpi-hot .qt-kpi-num { color: #fca5a5; }
.qt-kpi-hot .qt-kpi-lbl { color: rgba(252,165,165,0.75); }

/* Aksiyon butonlari */
.qt-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Yenile butonu - koyu arka planda acik renk */
.qt-header .btn-secondary {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    gap: 5px;
}
.qt-header .btn-secondary:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

/* Teklif Olustur butonu - parlak */
.qt-header .btn-add {
    background: #fff;
    color: #0f2548;
    border: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}
.qt-header .btn-add:hover {
    background: #e8f0fe;
}

/* Spin animation for reload */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 700px) {
    .qt-kpi-row { display: none; }
    .qt-header-sub { display: none; }
}

/* ============================================================
   STATUS SEKME BARI  (qt-status-tabs / qt-stab)
   ============================================================ */
.qt-status-tabs {
    display: flex;
    gap: 4px;
    padding: 8px var(--yl-space-md) 0;
    flex-shrink: 0;
    border-bottom: 2px solid var(--yl-border);
    background: #e8edf6;
}

.qt-stab {
    padding: 7px 18px;
    border-radius: 0;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: #3a4a6b;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
    margin-bottom: -2px;
}

.qt-stab:hover:not(.qt-stab-active) {
    background: #d8e2f0;
    color: #0f2548;
}

.qt-stab-active {
    background: #fff;
    color: #0f2548;
    border-color: var(--yl-border);
    border-bottom-color: #fff;
    font-weight: 700;
}

/* Sekme barindaki spacer ve aksiyon butonlari */
.qt-stab-spacer {
    flex: 1;
}

.qt-stab-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    align-self: flex-end;
}

/* ============================================================
   TARIH HUCRESINDE GORECELI ZAMAN
   ============================================================ */
.quote-date-rel {
    font-size: 0.68rem;
    font-weight: 700;
    color: #9ca3af;
    margin-top: 2px;
    white-space: nowrap;
}
.quote-date-rel--late {
    color: #dc2626;
}

/* ============================================================
   TH SIRALAMA IKONU HIZALAMA
   ============================================================ */
.qt-th-sort {
    text-align: right;
    white-space: nowrap;
}

/* ============================================================
   DARK MODE — yeni elemanlar
   ============================================================ */
.app-root.dark .qt-status-tabs {
    background: #1a2540;
    border-bottom-color: var(--yl-border);
}

.app-root.dark .qt-stab-active {
    background: var(--yl-white);
    color: #7eb3f5;
    border-color: var(--yl-border);
    border-bottom-color: var(--yl-white);
}

.app-root.dark .qt-stab:hover:not(.qt-stab-active) {
    background: rgba(255,255,255,0.06);
    color: var(--yl-text);
}

/* ============================================================
   REVİZYON ZAMAN ÇİZELGESİ
   ============================================================ */
.revize-timeline {
    padding: 10px 8px 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.revize-card {
    border-left: 3px solid #CBD5E1;
    padding: 7px 10px 7px 12px;
    margin-left: 14px;
    position: relative;
    background: transparent;
}

/* Timeline nokta */
.revize-card::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 10px;
    width: 12px;
    height: 12px;
    background: #CBD5E1;
}

.revize-draft  { border-left-color: #94A3B8; }
.revize-draft::before { background: #94A3B8; }

.revize-sent   { border-left-color: #0066CC; }
.revize-sent::before  { background: #0066CC; }

/* Aktif (güncel) revizyon — işlem yapılan sürüm: belirgin sol kenar + hafif zemin */
.revize-active {
    border-left-color: #4f46e5;
    border-left-width: 4px;
    background: rgba(79,70,229,0.06);
    box-shadow: inset 0 0 0 1px rgba(79,70,229,0.12);
}
.revize-active::before { background: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); }
.revize-active-tag {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 1px 5px;
    background: #4f46e5;
    color: #fff;
    white-space: nowrap;
}
.app-root.dark .revize-active { background: rgba(99,102,241,0.12); box-shadow: inset 0 0 0 1px rgba(99,102,241,0.25); }
.app-root.dark .revize-active-tag { background: #6366f1; }

/* Eski (aktif olmayan) revizyonlar soluk — dikkat güncel sürümde. Üzerine gelince netleşir. */
.revize-timeline .revize-card:not(.revize-active) { opacity: 0.5; transition: opacity 0.12s; }
.revize-timeline .revize-card:not(.revize-active):hover { opacity: 1; }

.revize-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Revizyon satırı sağ aksiyon grubu — düzenle/onay/önizle bir arada, sağa yaslı */
.revize-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Aktif revizyon işlem butonları (Düzenle/Revize Et, Revize Onayı) */
.revize-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid transparent;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 0;
    color: #fff;
    white-space: nowrap;
}
.revize-act-btn:disabled { opacity: 0.5; cursor: default; }
.revize-act-edit { background: #4f46e5; border-color: #4f46e5; }
.revize-act-edit:hover:not(:disabled) { background: #4338ca; border-color: #4338ca; }
.revize-act-onay { background: #0d9488; border-color: #0d9488; }
.revize-act-onay:hover:not(:disabled) { background: #0f766e; border-color: #0f766e; }
.app-root.dark .revize-act-edit { background: #312e81; color: #a5b4fc; border-color: #6366f1; }
.app-root.dark .revize-act-onay { background: #134e4a; color: #5eead4; border-color: #14b8a6; }

/* Revizyon önizleme (göz) butonu — o revizyonun o günkü halini açar */
.revize-eye-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    border: 1px solid #BFDBFE;
    background: #fff;
    color: #1D4ED8;
    cursor: pointer;
    border-radius: 0;
    flex: 0 0 auto;
}
.revize-eye-btn:hover { background: #1D4ED8; color: #fff; border-color: #1D4ED8; }
.app-root.dark .revize-eye-btn { background: #161b22; border-color: rgba(29,78,216,0.4); color: #93C5FD; }
.app-root.dark .revize-eye-btn:hover { background: #1D4ED8; color: #fff; }

/* Revizyon silme (çöp kutusu) butonu — aktif olmayan revizyonlarda görünür, geri alınabilir */
.revize-del-btn { border-color: #FECACA; color: #DC2626; }
.revize-del-btn:hover { background: #DC2626; color: #fff; border-color: #DC2626; }
.app-root.dark .revize-del-btn { background: #161b22; border-color: rgba(220,38,38,0.4); color: #FCA5A5; }
.app-root.dark .revize-del-btn:hover { background: #DC2626; color: #fff; }

/* Silinen revizyonlar bölümü */
.silinen-revize-details { margin-top: 6px; }
.silinen-revize-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-top: 1px solid #F1F5F9;
    flex-wrap: wrap;
}
.silinen-revize-row:first-of-type { border-top: none; }
.silinen-badge { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.silinen-revize-info { font-size: 0.74rem; color: #94A3B8; flex: 1 1 auto; }
.revize-act-restore { background: #475569; border-color: #475569; }
.revize-act-restore:hover:not(:disabled) { background: #334155; border-color: #334155; }
.app-root.dark .silinen-revize-row { border-top-color: #1E293B; }
.app-root.dark .silinen-badge { background: rgba(220,38,38,0.15); color: #FCA5A5; border-color: rgba(220,38,38,0.35); }
.app-root.dark .revize-act-restore { background: #334155; border-color: #334155; color: #CBD5E1; }
.app-root.dark .revize-act-restore:hover:not(:disabled) { background: #1E293B; border-color: #1E293B; }

.revize-badge {
    font-size: 0.70rem;
    font-weight: 700;
    padding: 1px 6px;
    background: #EEF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    white-space: nowrap;
}
.revize-draft .revize-badge {
    background: #F8FAFC;
    color: #64748B;
    border-color: #CBD5E1;
}

.revize-status-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #1D4ED8;
}
.revize-draft .revize-status-label { color: #64748B; }

.revize-meta {
    font-size: 0.71rem;
    color: #94A3B8;
    margin-left: auto;
    white-space: nowrap;
}
.revize-yapan {
    font-size: 0.71rem;
    color: #94A3B8;
    white-space: nowrap;
}

.revize-compare-row {
    display: flex;
    justify-content: flex-start;
    padding: 3px 0 3px 22px;
}

.btn-revize-compare {
    font-size: 0.71rem;
    padding: 2px 10px;
    background: #F0F9FF;
    color: #0EA5E9;
    border: 1px solid #BAE6FD;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.btn-revize-compare:hover { background: #E0F2FE; }

.audit-log-details {
    padding: 0 12px 8px;
    margin-top: 4px;
}
.audit-log-details > summary {
    font-size: 0.74rem;
    color: #94A3B8;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
    list-style: none;
}
.audit-log-details > summary::before { content: '▸ '; }
.audit-log-details[open] > summary::before { content: '▾ '; }
.audit-log-details > summary:hover { color: #64748B; }

/* ============================================================
   REVİZYON KARŞILAŞTIRMA MODALI
   ============================================================ */
.diff-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 35, 63, 0.35);
    backdrop-filter: blur(2px);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.diff-modal {
    background: #fff;
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6ebf3;
    box-shadow: 0 20px 60px rgba(23, 35, 63, 0.22);
}

.diff-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    background: linear-gradient(135deg, #1b2a4a 0%, #26375c 100%);
    color: #eef2f9;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    flex-shrink: 0;
    border-bottom: 2px solid #38507e;
}
.diff-modal-header button {
    background: none;
    border: none;
    color: #aebfd8;
    font-size: 1.35rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.12s;
}
.diff-modal-header button:hover { color: #fff; }

.diff-modal-body {
    padding: 14px 16px 16px;
    overflow-y: auto;
    flex: 1;
    background: #fcfdff;
}

.diff-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    color: #6b7891;
}
.diff-filter label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.diff-filter input[type="checkbox"] { accent-color: #5b6fa8; }

.diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.79rem;
    border: 1px solid #eef1f7;
}
.diff-table th {
    background: #f4f6fb;
    border-bottom: 1px solid #e4e9f2;
    padding: 8px 12px;
    text-align: left;
    font-size: 0.66rem;
    color: #7b869e;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.diff-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #f0f3f8;
    vertical-align: middle;
}
.diff-table tbody tr:last-child td { border-bottom: none; }
.diff-table tbody tr:hover { background: #f7f9fd; }
.diff-table tbody tr.diff-changed:hover { background: #fbf8f2; }

.diff-alan {
    font-weight: 600;
    color: #3d4759;
    white-space: nowrap;
    width: 120px;
}
/* Değişen satır — çok yumuşak sıcak zemin + ince sol vurgu */
.diff-changed { background: #fdfbf6; box-shadow: inset 3px 0 0 #e8c88f; }

.diff-eski {
    color: #a8737a;
    text-decoration: line-through;
    text-decoration-color: rgba(168, 115, 122, 0.5);
    max-width: 190px;
    word-break: break-word;
}
.diff-yeni-changed {
    color: #3f8a6b;
    font-weight: 600;
    max-width: 190px;
    word-break: break-word;
}
.diff-same-val {
    color: #9aa4b6;
    max-width: 340px;
    word-break: break-word;
}
.diff-durum { text-align: center; white-space: nowrap; }

.diff-badge-changed,
.diff-badge-same {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 3px 9px;
    border: 1px solid transparent;
    letter-spacing: 0.2px;
}
.diff-badge-changed::before,
.diff-badge-same::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 0;
    flex: 0 0 auto;
}
.diff-badge-changed {
    background: #faf1e2;
    color: #96682e;
    border-color: #efdcbd;
}
.diff-badge-changed::before { background: #d99b45; }
.diff-badge-same {
    background: #eef5f0;
    color: #4d7a63;
    border-color: #d9e8df;
}
.diff-badge-same::before { background: #6fae8c; }

.diff-empty-msg {
    padding: 32px 20px;
    text-align: center;
    color: #8792a6;
    font-size: 0.82rem;
    background: #f8fafd;
    border: 1px dashed #e2e8f2;
}

/* Dark mode — Revize Timeline */
.app-root.dark .revize-card { border-left-color: #334155; }
.app-root.dark .revize-card::before { background: #334155; }
.app-root.dark .revize-draft { border-left-color: #475569; }
.app-root.dark .revize-draft::before { background: #475569; }
.app-root.dark .revize-sent  { border-left-color: #3B82F6; }
.app-root.dark .revize-sent::before  { background: #3B82F6; }
.app-root.dark .revize-badge { background: rgba(29,78,216,0.2); color: #93C5FD; border-color: rgba(29,78,216,0.4); }
.app-root.dark .revize-draft .revize-badge { background: rgba(100,116,139,0.15); color: #94A3B8; border-color: rgba(100,116,139,0.3); }
.app-root.dark .revize-status-label { color: #93C5FD; }
.app-root.dark .revize-draft .revize-status-label { color: #94A3B8; }
.app-root.dark .btn-revize-compare { background: rgba(14,165,233,0.1); color: #38BDF8; border-color: rgba(14,165,233,0.25); }
.app-root.dark .btn-revize-compare:hover { background: rgba(14,165,233,0.2); }

/* Dark mode — Diff Modal */
.app-root.dark .diff-modal { background: #1a2436; color: #e2e8f0; border-color: #2b3850; }
.app-root.dark .diff-modal-header { background: linear-gradient(135deg, #141d30 0%, #1e2b46 100%); border-bottom-color: #33456a; }
.app-root.dark .diff-modal-body { background: #1a2436; }
.app-root.dark .diff-table { border-color: #2b3850; }
.app-root.dark .diff-table th { background: #212d43; color: #94a3c4; border-bottom-color: #33456a; }
.app-root.dark .diff-table td { border-bottom-color: #29344b; }
.app-root.dark .diff-table tbody tr:hover { background: #212d43; }
.app-root.dark .diff-table tbody tr.diff-changed:hover { background: #2a2a20; }
.app-root.dark .diff-changed { background: rgba(217,155,69,0.06); box-shadow: inset 3px 0 0 rgba(217,155,69,0.5); }
.app-root.dark .diff-alan { color: #cbd5e1; }
.app-root.dark .diff-eski { color: #cf9298; text-decoration-color: rgba(207,146,152,0.5); }
.app-root.dark .diff-yeni-changed { color: #6fc19b; }
.app-root.dark .diff-same-val { color: #6b7891; }
.app-root.dark .diff-badge-changed { background: rgba(150,104,46,0.22); color: #e6c085; border-color: rgba(150,104,46,0.4); }
.app-root.dark .diff-badge-changed::before { background: #d99b45; }
.app-root.dark .diff-badge-same { background: rgba(77,122,99,0.18); color: #8fc4a8; border-color: rgba(77,122,99,0.4); }
.app-root.dark .diff-badge-same::before { background: #6fae8c; }
.app-root.dark .diff-empty-msg { background: #212d43; color: #94a3c4; border-color: #33456a; }

.diff-modal { position: relative; }
.diff-modal-body { padding-bottom: 52px; }

.diff-print-btn {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid #d7deeb;
    color: #5b6fa8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(23, 35, 63, 0.12);
    z-index: 2;
}
.diff-print-btn:hover { background: #5b6fa8; color: #fff; border-color: #5b6fa8; }
.app-root.dark .diff-print-btn { background: #212d43; border-color: #33456a; color: #93a3c9; }
.app-root.dark .diff-print-btn:hover { background: #33456a; color: #fff; }

/* Karşılaştırma yazdırma — yalnızca diff modalı yazdırılır, sayfanın geri kalanı gizlenir.
   :has() ile modal açıkken devreye girer; diğer sayfaların yazdırılmasını etkilemez. */
@media print {
    body:has(.diff-modal-overlay) * { visibility: hidden; }
    body:has(.diff-modal-overlay) .diff-modal-overlay,
    body:has(.diff-modal-overlay) .diff-modal-overlay * { visibility: visible; }

    .diff-modal-overlay {
        position: absolute;
        inset: 0;
        background: #fff !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        display: block !important;
    }
    .diff-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    .diff-modal-body { overflow: visible !important; max-height: none !important; padding-bottom: 16px !important; }
    .diff-modal-header { background: none !important; color: #111 !important; border-bottom: 2px solid #333 !important; }
    .no-print { display: none !important; }
    .diff-table tbody tr { break-inside: avoid; }
}

/* Teklif detay bilgi bloğu (olusturan + onay) */
.qt-info-block {
    margin: 8px 14px;
    padding: 8px 10px;
    background: #f8fafc;
    border-left: 3px solid var(--yl-border, #e5e7eb);
    font-size: 0.77rem;
}
.qt-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid #f0f2f5;
}
.qt-info-row:last-child { border-bottom: none; }
.qt-info-label {
    color: #6b7280;
    font-weight: 500;
    min-width: 120px;
}
.qt-info-value {
    font-weight: 600;
    color: #111827;
    text-align: right;
}
.qt-info-approved { color: #059669; }

/* Dark mode */
.app-root.dark .qt-info-block { background: #161b22; border-left-color: #30363d; }
.app-root.dark .qt-info-label { color: #8b949e; }
.app-root.dark .qt-info-value { color: #e6edf3; }
.app-root.dark .qt-info-approved { color: #34d399; }

/* Notlar sutunu — 2 satir */
.qt-not-cell {
    max-width: 240px;
    vertical-align: middle;
    padding-top: 5px;
    padding-bottom: 5px;
}
.qt-not-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.72rem;
    color: #374151;
    line-height: 1.45;
    max-width: 230px;
    cursor: help;
    white-space: normal;
    word-break: break-word;
}
.qt-not-empty {
    color: #9ca3af;
    font-size: 0.78rem;
}
.app-root.dark .qt-not-text { color: #adb5bd; }
.app-root.dark .qt-not-empty { color: #4b5563; }

/* Puan chip — tablo icinde min-width override (global 80px icerigi tasirir) */
.quote-grid td .yl-chip {
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
}

/* Satir yuksekligi: islem 2 satir icin */
.quote-grid tbody tr { min-height: 56px; }
.quote-grid tbody td { vertical-align: middle; }

/* ============================================================
   MOBIL KART DUZENI (<=700px)
   quote-grid tablosu telefonda karta donusur (masaustu etkilenmez).
   Genel kart tabani .quote-grid uzerindedir (her listeye uygulanir);
   SUTUNA OZEL nth-child eslemeleri liste basina ayri siniftadir:
   .teklif-grid (TeklifListesi) ve .uretim-grid (UretimListesi).
   Yeni bir liste quote-grid kullanacaksa kendi X-grid sinifini eklemeli.
   ============================================================ */
/* TELEFON KIRILIMI = 768px — uygulama kabugu (app.css) da bu degerde mobile
   gecer. Eskiden gridler 700px kullaniyordu; 701-768 bandinda hamburger menulu
   mobil kabuk + 12 sutunlu masaustu tablosu ayni anda gorunuyordu. */
@media (max-width: 768px) {
    /* Detay paneli acilinca telefonda tam ekran olur, liste gizlenir */
    .qt-layout { flex-direction: column; }
    .qt-list-panel.qt-with-detail { display: none; }
    .qt-detail-panel { flex: 1 1 100%; min-height: 0; }

    /* Durum sekmeleri yatay kaydirilabilir */
    .qt-status-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .quote-grid { display: block; }
    .quote-grid thead { display: none; }
    .quote-grid tbody { display: block; padding: 6px; }

    .quote-grid tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        border: 1px solid var(--yl-border);
        border-radius: 0;
        background: var(--yl-white);
        margin: 0 0 8px 0;
        padding: 10px 12px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .quote-grid tbody tr > td,
    .quote-grid tbody tr > td.ylg-w {
        display: block;
        border: none;
        padding: 0;
        width: auto;
        min-width: 0;
        order: var(--ylg-mo, 50);
    }
    /* Kartta saga hizalama yalnizca "Sag"/"Islem" slotlarinda anlamli;
       masaustunun ortalama/saga hizalamasi kartta bozuk durur. */
    .quote-grid tbody tr > td.ylg-ta-c,
    .quote-grid tbody tr > td.ylg-ta-r { text-align: left; }
    .quote-grid tbody tr.qt-selected { box-shadow: inset 3px 0 0 var(--yl-accent); }
    .quote-grid tbody tr.expanded-master { box-shadow: inset 3px 0 0 var(--yl-accent); }

    /* Kart modunda dar-ekran gizlemeleri geri acilir (kartta yer var) */
    .quote-grid .qt-hide-sm,
    .quote-grid .qt-hide-md { display: block !important; }

    /* ========================================================================
       KART YERLESIM MOTORU — sutun tanimindaki YlMobilSlot degerinden uretilir.
       Liste basina elle CSS YAZILMAZ; yeni bir sutun eklendiginde varsayilani
       (ylg-m-oto) guvenlidir: kartin SONUNA duser, basina degil.
       ======================================================================== */

    /* Telefonda hic gosterilmeyecek sutun */
    .quote-grid tbody tr > td.ylg-m-gizli,
    .quote-grid .ylg-search-row th.ylg-m-gizli { display: none !important; }

    /* Kart basligi — tam genislik, buyuk ve kalin */
    .quote-grid tbody tr > td.ylg-m-baslik {
        flex: 1 1 100%;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Baslik hucresinin ICINDEKI ozel gosterimler de buyusun */
    .quote-grid tbody tr > td.ylg-m-baslik .quote-customer,
    .quote-grid tbody tr > td.ylg-m-baslik strong {
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.3;
    }

    /* Satir ici ogeler */
    .quote-grid tbody tr > td.ylg-m-satir,
    .quote-grid tbody tr > td.ylg-m-oto { flex: 0 1 auto; font-size: 0.76rem; }

    /* Satirda saga yaslanan oge (tarih, tutar rozeti...) */
    .quote-grid tbody tr > td.ylg-m-sag {
        flex: 0 0 auto;
        margin-left: auto;
        text-align: right;
        font-size: 0.76rem;
    }

    /* Kendi satirini kaplayanlar */
    .quote-grid tbody tr > td.ylg-m-tam { flex: 1 1 100%; font-size: 0.78rem; }

    /* Uzun metin — 2 satirda kirpilir */
    .quote-grid tbody tr > td.ylg-m-tamkirp {
        flex: 1 1 100%;
        font-size: 0.78rem;
        color: #6b7280;
        max-width: none;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Gorsel bandi — kartin en ustunde tam genislik */
    .quote-grid tbody tr > td.ylg-m-gorsel {
        flex: 1 1 100%;
        margin: -10px -12px 2px;
    }
    .quote-grid tbody tr > td.ylg-m-gorsel img { width: 100%; height: 150px; object-fit: cover; display: block; }
    .quote-grid tbody tr > td.ylg-m-gorsel .uretim-vitrin-bos { display: none; }

    /* Eylem dugmeleri — kartin sonunda, sagda */
    .quote-grid tbody tr > td.ylg-m-islem {
        flex: 0 0 auto;
        margin-left: auto;
        text-align: right;
    }

    /* Etiket oneki: sutun basligi olmadigi icin degerin ne oldugunu bu soyler */
    .quote-grid tbody tr > td::before {
        content: var(--ylg-lbl, none);
        color: #6b7280;
        font-weight: 400;
    }

    /* ── DOKUNMA HEDEFLERI: 44x44 esigi ── */
    .ylg-tool-btn,
    .qt-status-tab,
    .qt-filter-chip,
    .ylg-chooser-item { min-height: 44px; }

    .quote-grid .quote-row-actions button,
    .quote-grid .quote-row-actions a { min-width: 40px; min-height: 40px; }

    /* iOS: 16px'in altindaki girdi yazisi odaklaninca sayfayi YAKINLASTIRIR */
    input, select, textarea { font-size: 16px; }

    /* Filtre cipleri kirpilmasin (Taslak filtresi erisilemez kaliyordu) */
    .qt-filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Kart icindeki ICERIK ayarlari (yerlesim artik YlMobilSlot'tan gelir) */
    .quote-grid .qt-expand-chevron {
        width: 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .quote-grid td.ylg-c-not .qt-not-text {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; font-size: 0.78rem; color: #6b7280;
    }
    .quote-grid td.ylg-c-tutar .quote-amount { font-size: 0.95rem; font-weight: 700; }
    .quote-grid .quote-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .quote-grid .quote-row-actions .btn-expand {
        width: 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .quote-grid .quote-row-actions .btn-expand svg { width: 17px !important; height: 17px !important; }

    

    /* Genisletilmis gecmis satiri ve bos-durum tam genislik blok olur.
       Not: bos-durum hucresinin ylg-c-* sinifi YOKTUR, bu yuzden yukaridaki
       kart kurallari (hepsi td.ylg-c-* ile) ona hic uygulanmaz. */
    .quote-grid tbody tr.detail-row { display: block; padding: 0; border-top: none; margin-top: -8px; }
    .quote-grid tbody tr.detail-row > td { display: block; width: 100%; }
    .quote-grid tbody tr > td.quote-empty-state { flex: 1 1 100%; text-align: center; padding: 24px 0; }

    /* Gorusmeler: unscoped .gor-td-not mobilde max-width:100px + nowrap dayatir;
       kart icinde tam genislik acilabilsin diye ezilir (yerlesim degil, ICERIK duzeltmesi). */
    .quote-grid.gorusme-grid tbody tr > td.ylg-c-not { max-width: none; white-space: normal; }

    
}

/* ============================================================
   BELGE HAZIRLANIYOR KATMANI
   PDF/Word uretimi sirasinda tam ekran bilgi katmani. Amac: bekleme
   "anlamsiz" gelmesin (23.07.2026 mobil geri bildirimi) ve ayni anda
   ikinci uretim baslatilmasin. Masaustunde de gecerlidir.
   ============================================================ */
.yl-belge-katman {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15, 37, 72, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(1.5px);
}
.yl-belge-kutu {
    background: var(--yl-white);
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 22px 28px;
    min-width: 240px;
    max-width: 86vw;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.yl-belge-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 12px;
    border: 3px solid #dfe5ee;
    border-top-color: var(--yl-accent);
    border-radius: 50%;               /* donen halka - kare olamaz */
    animation: yl-belge-don 0.8s linear infinite;
}
@keyframes yl-belge-don { to { transform: rotate(360deg); } }
.yl-belge-baslik {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--yl-text);
}
.yl-belge-alt {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #6b7280;
}

/* ==========================================================================
   YlGrid — ortak veri gridi (kolon secici, sutun arama, tikla-sirala, yazdir)
   .quote-grid / .qt-merged-grid gorsel dilini temel alir; keskin koseler.
   ========================================================================== */
.ylg-root { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Dar ekranda sutunlar sigmazsa YATAY KAYDIR (kirpma yok) — islem sutunu
   erisilemez kalmasin. Kart moduna gecene (<=700px) kadar gecerli. */
.ylg-wrapper { overflow-x: auto; }

/* ── Arac cubugu ── */
.ylg-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 8px 0;
    flex-wrap: wrap;
}
.ylg-toolbar-spacer { flex: 1; }
/* Arac cubugu sol-icerik slotu (ToolbarStart) — icerigi solda tutar, butonlari saga iter */
.ylg-toolbar-start { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
/* "Filtreler" dugmesi YALNIZCA telefonda gorunur — masaustunde filtreler zaten acik.
   .ylg-toolbar ile nitelenmeli: cipsiz secici (.ylg-filtre-btn) ile .ylg-tool-btn
   esit ozgullukte olurdu ve sonra gelen .ylg-tool-btn{display:inline-flex} kazanirdi. */
.ylg-toolbar .ylg-filtre-btn { display: none; }

.ylg-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--yl-white);
    color: var(--yl-text);
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 6px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--yl-transition-fast), border-color var(--yl-transition-fast);
    white-space: nowrap;
}
.ylg-tool-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.ylg-tool-btn.active { background: #eef2f8; border-color: var(--yl-accent); color: var(--yl-accent); }
.ylg-tool-btn svg { flex-shrink: 0; }

/* ── Sutun secici (dropdown) ── */
.ylg-chooser-wrap { position: relative; }
.ylg-chooser-backdrop {
    position: fixed;
    inset: 0;
    z-index: 499;
    background: transparent;
}
.ylg-chooser {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 500;
    min-width: 200px;
    max-height: min(60vh, 340px);
    overflow-y: auto;
    background: var(--yl-white);
    border: 1px solid var(--yl-border);
    border-radius: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
    padding: 6px;
}
.ylg-chooser-title {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    padding: 4px 8px 6px;
    border-bottom: 1px solid var(--yl-border);
    margin-bottom: 4px;
}
.ylg-chooser-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
}
.ylg-chooser-item:hover { background: #f1f5f9; }
.ylg-chooser-item input { width: 15px; height: 15px; accent-color: var(--yl-accent); cursor: pointer; }

/* ── GRUPLAMA ─────────────────────────────────────────────────────────── */
/* Gruplama menusunun altindaki toplu ac/kapa dugmeleri */
.ylg-grup-eylem {
    display: flex; gap: 6px; padding: 7px 8px 5px;
    border-top: 1px solid var(--yl-border); margin-top: 4px;
}
.ylg-grup-eylem button {
    flex: 1; border: 1px solid var(--yl-border); background: var(--yl-white);
    border-radius: 0; cursor: pointer; font-size: 0.73rem; padding: 4px 6px;
    color: var(--yl-text); font-family: inherit;
}
.ylg-grup-eylem button:hover { background: var(--yl-bg); }

/* Grup basligi satiri — tablonun icinde, tam genislikte bir ayrac */
.quote-grid tr.ylg-group-row { cursor: pointer; }
.quote-grid tr.ylg-group-row > td {
    background: #eef2f8;
    border-top: 1px solid var(--yl-border);
    border-bottom: 1px solid var(--yl-border);
    padding: 6px 10px;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quote-grid tr.ylg-group-row:hover > td { background: #e2e8f0; }
.ylg-group-ok {
    display: inline-block; width: 13px; color: var(--yl-text-light);
    transition: transform 0.12s ease;
}
.ylg-group-ok.kapali { transform: rotate(-90deg); }
.ylg-group-baslik { color: var(--yl-text-light); margin-right: 4px; }
.ylg-group-deger  { font-weight: 700; color: var(--yl-primary); }
.ylg-group-adet {
    margin-left: 8px; font-size: 0.7rem; color: var(--yl-text-light);
    border: 1px solid var(--yl-border); background: var(--yl-white); padding: 0 6px;
}

.app-root.dark .quote-grid tr.ylg-group-row > td { background: #1c2430; border-color: #30363d; }
.app-root.dark .quote-grid tr.ylg-group-row:hover > td { background: #21262d; }
.app-root.dark .ylg-group-deger { color: #7dd3fc; }
.app-root.dark .ylg-group-adet { background: #0d1117; border-color: #30363d; }
.app-root.dark .ylg-grup-eylem { border-top-color: #30363d; }
.app-root.dark .ylg-grup-eylem button { background: #161b22; border-color: #30363d; color: #e6edf3; }

/* ── Siralanabilir baslik ── */
.quote-grid th.ylg-th-sortable { cursor: pointer; }
.quote-grid th.ylg-th-sortable:hover { background: #eef2f8; }
/* Grid basliklarinda yatay boslugu azalt — dar sutunlarda baslik+ok tasmasin */
.quote-grid th.ylg-th { padding-left: 8px; padding-right: 8px; overflow: hidden; }
/* Baslik ici: baslik SOLDA (tasarsa ...), ok SAGA sabit; ok ASLA hucre disina tasmaz */
.ylg-th-inner { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; justify-content: space-between; }
.ylg-th-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ylg-sort { flex-shrink: 0; opacity: 0.85; }
.ylg-sort .ylg-up, .ylg-sort .ylg-down { color: #b4bcc8; }
.ylg-sort.ylg-sort-asc  .ylg-up   { color: var(--yl-accent); }
.ylg-sort.ylg-sort-desc .ylg-down { color: var(--yl-accent); }

/* ── Sutun bazli arama satiri ── */
.quote-grid thead tr.ylg-search-row th {
    background: #fdfdfe;
    padding: 4px 6px;
    border-top: none;
}
/* Sabit basligin ALT sinirinda net ayrim: altindan gecen satir bir an icin
   yarim kalsa bile golge sayesinde "basligin altina giriyor" gorunur. */
.quote-grid thead tr:last-child th { box-shadow: 0 2px 4px rgba(23, 35, 63, 0.07); }
.app-root.dark .quote-grid thead tr:last-child th { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
.ylg-col-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    padding: 4px 7px;
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--yl-text);
    background: var(--yl-white);
}
.ylg-col-search:focus { outline: none; border-color: var(--yl-accent); }
.ylg-col-search::placeholder { color: #9aa3b0; }

.ylg-detail-td { padding: 0 !important; }
/* YlGrid detay hucresi padding:0 oldugu icin gecmis kutusu kendi ic bosluguyla gelir
   (eski .qt-history-td gorunumunu korur). */
.qt-history-box { padding: 12px 16px; background: #f8fafd; }
.app-root.dark .qt-history-box { background: rgba(59,125,221,0.04); }

/* Gorusmeler gridi ozel (masaustu): satir tiklanabilir + yonetim-dahil solukluk.
   Eski .gor-row/.gor-row-active tabani artik yok; quote-grid'e tekil kural. */
.quote-grid.gorusme-grid tbody tr { cursor: pointer; }
.quote-grid.gorusme-grid tbody tr.gor-row-mgmt td { opacity: 0.6; }

/* ── Koyu tema (uygulama .app-root.dark sinifiyla yonetir, OS tercihiyle DEGIL) ── */
.app-root.dark .ylg-tool-btn { background: #1e2530; color: #e5e9f0; border-color: #3a4250; }
.app-root.dark .ylg-tool-btn:hover { background: #262e3b; border-color: #4a5464; }
.app-root.dark .ylg-tool-btn.active { background: #23324a; border-color: #4a5464; color: #cfe0ff; }
.app-root.dark .ylg-chooser { background: #1e2530; border-color: #3a4250; }
.app-root.dark .ylg-chooser-title { color: #9aa3b0; border-color: #3a4250; }
.app-root.dark .ylg-chooser-item:hover { background: #262e3b; }
.app-root.dark .ylg-col-search { background: #161b22; color: #e5e9f0; border-color: #3a4250; }
.app-root.dark .quote-grid th.ylg-th-sortable:hover { background: #23324a; }
.app-root.dark .quote-grid thead tr.ylg-search-row th { background: #1a2029; }

/* ── Mobil ── */
@media (max-width: 700px) {
    .ylg-toolbar { flex-wrap: wrap; }
    .ylg-tool-btn { padding: 8px 12px; font-size: 0.8rem; }
    .ylg-col-search { font-size: 16px; } /* iOS otomatik zoom esigi */
}

/* ==========================================================================
   FOLLOW — gelistirme talepleri ekrani (durum/kategori rozetleri + satir detayi)
   ========================================================================== */
.fl-count { font-size: 0.7rem; opacity: 0.7; margin-left: 3px; }
.fl-ekleyen-sub { font-size: 0.72rem; color: var(--yl-text-light); margin-top: 2px; display: inline-flex; align-items: center; }
.app-root.dark .fl-ekleyen-sub { color: #8b949e; }
.fl-badge {
    display: inline-block;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px 8px; border-radius: 0; border: 1px solid transparent; white-space: nowrap;
}
.fl-durum-acik       { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.fl-durum-yapiliyor  { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.fl-durum-tamamlandi { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.fl-kat-oneri { color: #3730a3; background: #eef2ff; border-color: #c7d2fe; }
.fl-kat-istek { color: #0f766e; background: #f0fdfa; border-color: #99f6e4; }
.fl-kat-hata  { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.fl-aciklama { font-size: 0.85rem; color: var(--yl-text); white-space: pre-wrap; line-height: 1.5; }
.fl-aciklama.fl-bos { color: var(--yl-text-light); font-style: italic; }
.fl-meta { margin-top: 8px; font-size: 0.74rem; color: #6b7280; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fl-meta-ok { color: #15803d; }
.fl-aksiyonlar { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

.app-root.dark .fl-durum-acik       { color: #93c5fd; background: rgba(37,99,235,0.12); border-color: #2a4a8a; }
.app-root.dark .fl-durum-yapiliyor  { color: #fcd34d; background: rgba(180,83,9,0.12); border-color: #92561a; }
.app-root.dark .fl-durum-tamamlandi { color: #86efac; background: rgba(22,163,74,0.14); border-color: #166534; }
.app-root.dark .fl-kat-oneri { color: #a5b4fc; background: rgba(79,70,229,0.12); border-color: #3730a3; }
.app-root.dark .fl-kat-istek { color: #5eead4; background: rgba(15,118,110,0.14); border-color: #0f766e; }
.app-root.dark .fl-kat-hata  { color: #fca5a5; background: rgba(185,28,28,0.14); border-color: #7f1d1d; }
.app-root.dark .fl-aciklama { color: #e5e9f0; }
.app-root.dark .fl-meta { color: #8b949e; }

/* ── Follow gorsel ekleri (hata ekrani vb.) ── */
/* Baslik altindaki ataş rozeti (kac gorsel ekli) */
.fl-ek-rozet {
    display: inline-flex; align-items: center; gap: 2px;
    margin-left: 8px; padding: 0 5px; height: 15px;
    font-size: 0.68rem; font-weight: 600;
    color: #2563eb; background: rgba(37,99,235,0.10);
    border: 1px solid #bfd3f5; border-radius: 0;
}
.app-root.dark .fl-ek-rozet { color: #93c5fd; background: rgba(37,99,235,0.16); border-color: #2a4a8a; }

/* ── Follow yanitlari (10.10.2026): yonetici <-> talebi acan yazismasi + "Kapatildi" durumu ── */
.fl-durum-kapatildi { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
.fl-meta-kapali { color: #475569; }
.fl-yanit-rozet {
    display: inline-flex; align-items: center; gap: 2px;
    margin-left: 6px; padding: 0 5px; height: 15px;
    font-size: 0.68rem; font-weight: 600;
    color: #0f766e; background: rgba(15,118,110,0.10);
    border: 1px solid #99f6e4; border-radius: 0;
}
.fl-yanitlar { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.fl-yanit { border-left: 3px solid #cbd5e1; background: #f8fafc; padding: 6px 10px; }
.fl-yanit.yonetici { border-left-color: var(--yl-primary, #1a3a6b); background: #eef4ff; }
.fl-yanit-ust { font-size: 0.72rem; color: #6b7280; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fl-yanit-etiket {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: #fff; background: var(--yl-primary, #1a3a6b); padding: 0 5px;
}
.fl-yanit-metin { margin-top: 3px; font-size: 0.84rem; color: var(--yl-text); white-space: pre-wrap; line-height: 1.45; }
.fl-yanit-form { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.fl-yanit-form textarea { width: 100%; min-height: 54px; }
.fl-yanit-form-alt { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fl-yanit-form-alt select { width: auto; min-width: 220px; }
.app-root.dark .fl-durum-kapatildi { color: #cbd5e1; background: rgba(100,116,139,0.16); border-color: #475569; }
.app-root.dark .fl-meta-kapali { color: #94a3b8; }
.app-root.dark .fl-yanit-rozet { color: #5eead4; background: rgba(15,118,110,0.16); border-color: #0f766e; }
.app-root.dark .fl-yanit { background: #161b22; border-left-color: #3a4351; }
.app-root.dark .fl-yanit.yonetici { background: rgba(37,99,235,0.10); border-left-color: #3b82f6; }
.app-root.dark .fl-yanit-metin { color: #e5e9f0; }

/* Gorsel sec/ekle butonu (gizli input'u saran label) */
.fl-yukle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; cursor: pointer; user-select: none;
    font-size: 0.8rem; font-weight: 600; color: var(--yl-primary);
    background: #fff; border: 1px dashed #94a3b8; border-radius: 0;
    width: fit-content;
}
.fl-yukle-btn:hover { background: #f1f5f9; border-color: var(--yl-primary); }
.fl-yukle-btn input[type=file] { display: none; }
.fl-yukle-kucuk { margin-top: 8px; padding: 5px 10px; font-size: 0.76rem; }
.app-root.dark .fl-yukle-btn { background: #161b22; border-color: #3a4351; color: #93c5fd; }
.app-root.dark .fl-yukle-btn:hover { background: #1c2430; border-color: #58a6ff; }

/* Kucuk resim izgarasi (modal onizleme + detay galerisi) */
.fl-ek-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fl-ek-detay { margin-top: 10px; }
.fl-ek-thumb { position: relative; width: 92px; height: 92px; border: 1px solid #d0d7de; background: #f6f8fa; overflow: hidden; }
.fl-ek-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-root.dark .fl-ek-thumb { border-color: #30363d; background: #0d1117; }

/* Resim kaldir/sil (X) rozeti — sag ust kose */
.fl-ek-sil {
    position: absolute; top: 2px; right: 2px;
    width: 20px; height: 20px; padding: 0; line-height: 18px;
    font-size: 0.72rem; color: #fff; cursor: pointer;
    background: rgba(15,23,42,0.72); border: none; border-radius: 0;
}
.fl-ek-sil:hover { background: #dc2626; }

.fl-ek-yukleniyor { margin-top: 10px; font-size: 0.78rem; color: var(--yl-text-light); }
.app-root.dark .fl-ek-yukleniyor { color: #8b949e; }

/* Buyutme (lightbox) */
.fl-lightbox {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2,6,23,0.85); padding: 24px; cursor: zoom-out;
}
.fl-lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border: 1px solid rgba(255,255,255,0.15); cursor: default; }
.fl-lightbox-close {
    position: absolute; top: 16px; right: 20px;
    width: 38px; height: 38px; font-size: 1.1rem; color: #fff; cursor: pointer;
    background: rgba(15,23,42,0.65); border: 1px solid rgba(255,255,255,0.25); border-radius: 0;
}
.fl-lightbox-close:hover { background: #dc2626; }

/* ── "Gorsel iste" akisi (yonetici talebi acan kisiden gorsel ister) ── */
/* Listede baslik altindaki amber rozet */
.fl-gorsel-bekle {
    display: inline-flex; align-items: center; margin-top: 3px;
    padding: 1px 7px; font-size: 0.7rem; font-weight: 700;
    color: #b45309; background: #fef3c7; border: 1px solid #f5d78e; border-radius: 0;
}
.app-root.dark .fl-gorsel-bekle { color: #fcd34d; background: rgba(180,83,9,0.16); border-color: #92561a; }

/* Detay ustundeki uyari bandi */
.fl-gorsel-banner {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 10px; padding: 9px 12px;
    font-size: 0.82rem; line-height: 1.4;
    color: #92400e; background: #fffbeb; border: 1px solid #f5d78e;
    border-left: 3px solid #d97706; border-radius: 0;
}
.fl-gorsel-banner svg { color: #d97706; margin-top: 1px; }
.app-root.dark .fl-gorsel-banner { color: #fcd34d; background: rgba(180,83,9,0.12); border-color: #92561a; border-left-color: #d97706; }
.app-root.dark .fl-gorsel-banner svg { color: #fbbf24; }

/* Yonetici aksiyonunda "istegi kaldir" aktif hali */
.fl-btn-bekle-aktif { color: #b45309 !important; border-color: #f5d78e !important; background: #fffbeb !important; }
.app-root.dark .fl-btn-bekle-aktif { color: #fcd34d !important; border-color: #92561a !important; background: rgba(180,83,9,0.14) !important; }

/* ═══ BILDIRIM MERKEZI (zil + acilir panel) ═══ */
.header-bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-right: 8px; cursor: pointer;
    color: #64748b; border: 1px solid transparent;
}
.header-bell:hover { color: #1e3a6e; background: #eef2f7; }
.header-bell svg { width: 19px; height: 19px; }
.app-root.dark .header-bell { color: #9aa4b2; }
.app-root.dark .header-bell:hover { color: #e5e9f0; background: #1c2430; }

/* Okunmamis sayaci — keskin kose (border-radius:0 kurali) */
.bell-badge {
    position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px;
    padding: 0 3px; font-size: 0.62rem; font-weight: 700; line-height: 15px; text-align: center;
    color: #fff; background: #dc2626; border-radius: 0;
}

.bildirim-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200;
    width: 360px; max-width: 92vw; background: #fff;
    border: 1px solid var(--yl-border); box-shadow: 0 10px 30px rgba(2,6,23,0.18); border-radius: 0;
}
.app-root.dark .bildirim-dropdown { background: #161b22; border-color: #30363d; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

.bildirim-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 14px 8px; border-bottom: 1px solid var(--yl-border);
}
.bildirim-title { font-weight: 700; font-size: 0.9rem; color: var(--yl-text); }
.app-root.dark .bildirim-title { color: #e5e9f0; }
.bildirim-markall {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--yl-primary); font-size: 0.72rem; text-decoration: underline; white-space: nowrap;
}
.app-root.dark .bildirim-markall { color: #58a6ff; }

.bildirim-sub { padding: 6px 14px; font-size: 0.72rem; color: var(--yl-text-light); }
.app-root.dark .bildirim-sub { color: #8b949e; }

.bildirim-list { max-height: 380px; overflow-y: auto; }
.bildirim-empty { padding: 22px 14px; text-align: center; font-size: 0.8rem; color: var(--yl-text-light); }

/* ── COKLU ONAY: aday listesi + durum rozeti ─────────────────────────── */
.onay-aday-liste {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 190px; overflow-y: auto;
    border: 1px solid var(--yl-border); padding: 5px 6px;
}
.onay-aday {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.82rem; cursor: pointer; padding: 3px 2px; user-select: none;
}
.onay-aday input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.onay-aday-dep { font-size: 0.72rem; color: var(--yl-text-light); }

/* Onay satiri: rozet + karar butonlari ayni hizada, durum butonlariyla ayni ritim */
.qt-transitions.onay-satir {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
}
.qt-transitions.onay-satir .onay-rozet {
    /* Butonlarla (btn-transition: 3px 9px / 0.7rem) ayni olcude dursun */
    display: inline-flex; align-items: center;
    font-size: 0.7rem; padding: 3px 9px; line-height: 1.4;
}

.onay-rozet {
    display: inline-block; border-radius: 0;
    border: 1px solid #c7d2e4; background: #eef2f8; color: #1e3a5f;
    font-size: 0.68rem; font-weight: 600; padding: 1px 7px; white-space: nowrap;
}
.onay-rozet.tamam { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.onay-rozet.red   { border-color: #fecaca; background: #fff5f5; color: #b91c1c; }

.revize-act-btn.revize-act-red {
    border-color: #fecaca; background: #fff5f5; color: #b91c1c;
}
.revize-act-btn.revize-act-red:hover:not(:disabled) { background: #fee2e2; }

.app-root.dark .onay-aday-liste { border-color: #30363d; }
.app-root.dark .onay-rozet { background: #161b22; border-color: #30363d; color: #c9d1d9; }
.app-root.dark .onay-rozet.tamam { background: #0d2818; border-color: #14532d; color: #86efac; }
.app-root.dark .onay-rozet.red   { background: #2a1414; border-color: #7f1d1d; color: #fca5a5; }

/* Cihaz bildirimi (Web Push) satiri — zil menusunun en altinda */
.bildirim-push {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-top: 1px solid var(--yl-border); background: #f6f8fa;
}
.bildirim-push-durum { flex: 1; font-size: 0.74rem; color: var(--yl-text-light); line-height: 1.35; }
.bildirim-push-durum.on { color: #15803d; font-weight: 600; }
.bildirim-push-btn {
    flex: 0 0 auto; border: 1px solid var(--yl-border); background: var(--yl-white);
    border-radius: 0; cursor: pointer; font-size: 0.74rem; padding: 4px 10px;
    color: var(--yl-text); font-family: inherit;
}
.bildirim-push-btn:hover:not(:disabled) { background: var(--yl-bg); }
.bildirim-push-btn.is-on { background: var(--yl-primary); border-color: var(--yl-primary); color: #fff; font-weight: 600; }
.bildirim-push-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.app-root.dark .bildirim-push { background: #161b22; border-top-color: #21262d; }
.app-root.dark .bildirim-push-btn { background: #0d1117; border-color: #30363d; color: #e6edf3; }

.bildirim-item {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 14px; border-bottom: 1px solid var(--yl-border); cursor: pointer;
}
.bildirim-item:hover { background: #f6f8fa; }
.app-root.dark .bildirim-item { border-color: #21262d; }
.app-root.dark .bildirim-item:hover { background: #1c2430; }
.bildirim-item.unread { background: #f0f6ff; }
.app-root.dark .bildirim-item.unread { background: rgba(37,99,235,0.12); }

.bildirim-dot {
    flex: none; width: 8px; height: 8px; margin-top: 5px;
    background: #94a3b8; border-radius: 0;
}
.bildirim-dot.onemli { background: #dc2626; }
.bildirim-item:not(.unread) .bildirim-dot { opacity: 0.35; }

.bildirim-baslik { font-weight: 600; font-size: 0.83rem; color: var(--yl-text); }
.app-root.dark .bildirim-baslik { color: #e5e9f0; }
.bildirim-mesaj { font-size: 0.77rem; color: var(--yl-text-light); margin-top: 1px; line-height: 1.35; }
.app-root.dark .bildirim-mesaj { color: #b6bec9; }
.bildirim-zaman { font-size: 0.68rem; color: #94a3b8; margin-top: 3px; }

/* ═══ TELEFON GIRISI (ulke kodu + bicimli numara) ═══ */
.tel-input { position: relative; display: flex; align-items: stretch; width: 100%; }
.tel-dial {
    display: inline-flex; align-items: center; gap: 3px; flex: none;
    padding: 0 8px; min-width: 62px; cursor: pointer;
    background: #f3f4f6; color: var(--yl-text);
    border: 1px solid var(--yl-border); border-right: none; border-radius: 0;
    font-size: 0.82rem; font-family: inherit;
}
.tel-dial:hover:not(:disabled) { background: #e8eaed; }
.tel-dial:disabled { opacity: 0.6; cursor: default; }
.tel-dial-kod { font-weight: 600; }
.tel-num {
    flex: 1 1 auto; min-width: 0; width: 100%;
    padding: 8px 10px; font-size: 0.84rem; font-family: inherit; color: var(--yl-text);
    background: var(--yl-white); border: 1px solid var(--yl-border); border-radius: 0;
}
.tel-num:focus { outline: none; border-color: var(--yl-primary); }
.tel-num:disabled { background: #f3f4f6; color: #9ca3af; }
.app-root.dark .tel-dial { background: #21262d; color: #e5e9f0; border-color: #30363d; }
.app-root.dark .tel-dial:hover:not(:disabled) { background: #2a313a; }
.app-root.dark .tel-num { background: #161b22; color: #e5e9f0; border-color: #30363d; }

.tel-perde { position: fixed; inset: 0; z-index: 499; }
.tel-liste {
    /* Saga hizali (sola dogru buyur): dar 3-sutunlu izgarada sag sutundaki telefon
       alaninda liste panel disina tasip kirpilmasin diye. */
    position: absolute; top: 100%; right: 0; z-index: 500;
    width: 280px; max-width: 92vw; margin-top: 2px;
    background: var(--yl-white); border: 1px solid var(--yl-border); border-radius: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.app-root.dark .tel-liste { background: #161b22; border-color: #30363d; }
.tel-ara {
    display: block; width: 100%; padding: 8px 10px; font-size: 0.82rem; font-family: inherit;
    border: none; border-bottom: 1px solid var(--yl-border); border-radius: 0;
    background: var(--yl-white); color: var(--yl-text);
}
.tel-ara:focus { outline: none; }
.app-root.dark .tel-ara { background: #161b22; color: #e5e9f0; border-color: #30363d; }
.tel-liste-govde { max-height: 240px; overflow-y: auto; }
.tel-liste-satir {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 7px 11px; border: none; border-radius: 0; background: none;
    color: var(--yl-text); font-size: 0.83rem; font-family: inherit; text-align: left; cursor: pointer;
}
.tel-liste-satir:hover, .tel-liste-satir.vurgulu { background: #eef2ff; }
.tel-liste-satir.secili { background: #e8f0fe; font-weight: 600; }
.app-root.dark .tel-liste-satir { color: #e5e9f0; }
.app-root.dark .tel-liste-satir:hover, .app-root.dark .tel-liste-satir.vurgulu { background: #252a34; }
.app-root.dark .tel-liste-satir.secili { background: #2b3242; }
.tel-liste-kod { color: var(--yl-primary); font-weight: 600; font-size: 0.78rem; font-family: ui-monospace, Consolas, monospace; }
.app-root.dark .tel-liste-kod { color: #79b8ff; }
.tel-liste-bos { padding: 14px; text-align: center; font-size: 0.8rem; color: var(--yl-text-light); }

/* ═══ TAM ŞABLON DÜZENLE (kalem editörü modalı) ═══ */
.ds-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-top: 1px solid var(--yl-border); }
.ds-row:first-child { border-top: none; }
.ds-row-head { background: #f3f4f6; }
.app-root.dark .ds-row-head { background: #21262d; }
.ds-birim2 { width: 110px; flex: none; padding: 5px 6px; font-size: 0.8rem; font-family: inherit;
    border: 1px solid var(--yl-border); border-radius: 0; background: var(--yl-white); color: var(--yl-text); }
.app-root.dark .ds-birim2 { background: #161b22; color: #e5e9f0; border-color: #30363d; }
.ds-inp { flex: 1; min-width: 0; padding: 5px 7px; font-size: 0.82rem; font-family: inherit;
    border: 1px solid var(--yl-border); border-radius: 0; background: var(--yl-white); color: var(--yl-text); }
.ds-inp:focus { outline: none; border-color: var(--yl-primary); }
.ds-head-inp { font-weight: 600; }
.ds-num { width: 62px; flex: none; padding: 5px 6px; font-size: 0.8rem; font-family: inherit;
    border: 1px solid var(--yl-border); border-radius: 0; background: var(--yl-white); color: var(--yl-text); }
.ds-birim { width: 46px; flex: none; padding: 5px 6px; font-size: 0.8rem; font-family: inherit;
    border: 1px solid var(--yl-border); border-radius: 0; background: var(--yl-white); color: var(--yl-text); }
.ds-row-tools { display: flex; gap: 2px; flex: none; }
.ds-row-tools button { min-width: 22px; height: 24px; padding: 0 4px; font-size: 0.7rem; line-height: 1; cursor: pointer;
    background: var(--yl-white); border: 1px solid var(--yl-border); border-radius: 0; color: var(--yl-text); }
.ds-row-tools button:hover { background: #eef2ff; }
.ds-row-tools button.ds-add { padding: 0 7px; color: var(--yl-primary); font-weight: 600; }
.ds-row-tools button.ds-del:hover { background: #fee2e2; color: #991b1b; }
.app-root.dark .ds-inp, .app-root.dark .ds-num, .app-root.dark .ds-birim,
.app-root.dark .ds-row-tools button { background: #161b22; color: #e5e9f0; border-color: #30363d; }
.app-root.dark .ds-row-tools button:hover { background: #252a34; }

/* Katalog (Şablon Grupları) seçici — tam şablon düzenlemede "grubundan ekle" */
.kat-grup { border: 1px solid var(--yl-border); margin-bottom: 6px; }
.kat-grup-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #f3f4f6; }
.app-root.dark .kat-grup-head { background: #21262d; }
.kat-exp { background: none; border: none; cursor: pointer; font-size: 0.8rem; color: var(--yl-text-light); padding: 0 2px; }
.kat-grup-ad { flex: 1; font-weight: 600; font-size: 0.85rem; cursor: pointer; color: var(--yl-text); }
.app-root.dark .kat-grup-ad { color: #e5e9f0; }
.kat-kalem { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px 6px 26px; border-top: 1px solid var(--yl-border); font-size: 0.83rem; }
.kat-kalem-ad { flex: 1; color: var(--yl-text); }
.app-root.dark .kat-kalem-ad { color: #e5e9f0; }

/* ── Uretim listesi MASTER-DETAIL (teklif -> birimler) ── */
.uretim-exp-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: none; background: none; cursor: pointer; padding: 2px 4px; color: var(--yl-text-light);
}
.uretim-exp-ok { display: inline-block; transition: transform .15s; font-size: 0.8rem; }
.uretim-exp-ok.acik { transform: rotate(90deg); }
.uretim-birim-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 5px;
    background: #eef2f7; color: #334155; border: 1px solid var(--yl-border);
    font-size: 0.7rem; font-weight: 700;
}
.app-root.dark .uretim-birim-badge { background: #21262d; color: #c9d1d9; border-color: #3a4250; }
.uretim-detay { padding: 8px 10px 10px 34px; background: #f8fafc; }
.app-root.dark .uretim-detay { background: #12171e; }
.uretim-detay-baslik { font-size: 0.74rem; color: var(--yl-text-light); margin-bottom: 6px; font-weight: 600; }
.uretim-detay-tablo { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.uretim-detay-tablo th {
    text-align: left; font-weight: 600; color: var(--yl-text-light);
    border-bottom: 1px solid var(--yl-border); padding: 4px 8px; white-space: nowrap;
}
.uretim-detay-tablo td { padding: 5px 8px; border-bottom: 1px solid #eef2f7; }
.app-root.dark .uretim-detay-tablo td { border-bottom-color: #262c36; }

/* "Hepsinde ayni" isareti — coklu birimli teklifte alan etiketinin yaninda */
.hep-tik {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 6px; padding: 1px 6px;
    border: 1px solid var(--yl-border); border-radius: 0;
    background: var(--yl-white); color: #94a3b8;
    font-size: 0.66rem; font-weight: 700; letter-spacing: .2px;
    cursor: pointer; text-transform: none; vertical-align: middle;
}
.hep-tik:hover { border-color: #16a34a; color: #16a34a; }
.hep-tik.acik { background: #dcfce7; border-color: #16a34a; color: #15803d; }
.app-root.dark .hep-tik { background: #161b22; border-color: #3a4250; color: #8b949e; }
.app-root.dark .hep-tik.acik { background: #14351f; border-color: #16a34a; color: #4ade80; }


/* ── Uretim listesi: satir basindaki VITRIN (kapak) fotografi ────────────────
   Resim HUCREYI TAM DOLDURUR (kenar bosluklari sifirlanir); uzerine gelince
   sag tarafta buyuk onizleme acilir. */
.ylg-c-vitrin,
.uretim-vitrin-td {
    padding: 0 !important;
    width: 78px;
    vertical-align: middle;
}

.uretim-vitrin-thumb {
    width: 78px;
    height: 54px;
    object-fit: cover;
    border-radius: 0;
    border: 0;
    display: block;
    background: #eef1f6;
    cursor: zoom-in;
    transition: filter 0.12s, box-shadow 0.12s;
}

.uretim-vitrin-thumb:hover {
    filter: brightness(1.06);
    box-shadow: inset 0 0 0 2px var(--yl-primary, #1f4e9c);
}

.uretim-vitrin-bos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 54px;
    background: #f7f8fa;
    color: #cbd2dd;
}

.uretim-vitrin-bos svg {
    width: 20px;
    height: 20px;
}

/* Fare ustunde acilan buyuk onizleme — grid'in disinda, position:fixed */
.uretim-vitrin-pop {
    position: fixed;
    z-index: 5000;
    width: 340px;
    background: #fff;
    border: 1px solid #c7d2e4;
    box-shadow: 0 10px 30px rgba(15, 32, 63, 0.28);
    border-radius: 0;
    padding: 4px;
    pointer-events: none;
}

.uretim-vitrin-pop img {
    display: block;
    width: 100%;
    height: 232px;
    object-fit: contain;
    background: #0f172a;
    border-radius: 0;
    transition: filter 0.18s ease-out;
}

/* Tam cozunurluklu resim gelene kadarki kisa an — buyutulmus kucuk resim */
.uretim-vitrin-pop img.yumusak {
    filter: blur(1px);
}

.uretim-vitrin-pop-ad {
    padding: 5px 4px 2px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Fotograf karti: teknik ozet ───────────────────────────────────────────
   Kullanici istegi: tip/aks/olculer resmin altinda okunsun ama "cok alt alta
   uzamasin". Otomatik doldurmali izgara: dar kartta 3, buyuk gorunumde 5-6
   sutun olur — bosluk kalmaz, alt alta yigilmaz. */
.uretim-kart-bilgi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 3px 10px;
    padding: 5px 4px 3px;
    border-top: 1px solid #e2e8f0;
    margin-top: 3px;
}
.uretim-kb-oge   { display: flex; flex-direction: column; min-width: 0; }
.uretim-kb-etiket {
    font-size: 0.61rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: #94a3b8; line-height: 1.25;
}
.uretim-kb-deger {
    font-size: 0.74rem; font-weight: 700; color: #1e293b; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Girilmemis alan: yeri korunur ama goze batmaz — eksik veri fark edilsin */
.uretim-kb-deger.bos { color: #cbd5e1; font-weight: 600; }
/* Sasi no gibi uzun degerler tam satiri kaplar (dar sutunda kirpilmasin) */
.uretim-kb-tam { grid-column: 1 / -1; }

.uretim-vitrin-ipucu {
    padding: 1px 4px 3px;
    font-size: 0.63rem;
    color: #94a3b8;
    text-align: right;
}

/* ── 2 KAT BUYUK GORUNUM (kucuk resme tiklayinca) ───────────────────────── */
.uretim-vitrin-perde {
    position: fixed; inset: 0; z-index: 5200;
    background: rgba(15, 23, 42, 0.62);
    display: flex; align-items: center; justify-content: center;
}
.uretim-vitrin-buyuk {
    position: relative;
    width: 680px;                /* onizleme panelinin (340px) 2 kati */
    max-width: 94vw;
    background: #fff;
    border: 1px solid #c7d2e4;
    box-shadow: 0 18px 50px rgba(15, 32, 63, 0.42);
    border-radius: 0;
    padding: 5px;
}
.uretim-vitrin-buyuk img {
    display: block;
    width: 100%;
    height: 464px;               /* onizlemedeki 232px'in 2 kati */
    max-height: 66vh;
    object-fit: contain;
    background: #0f172a;
    border-radius: 0;
    cursor: zoom-out;
}
.uretim-vitrin-buyuk .uretim-vitrin-pop-ad { font-size: 0.86rem; padding: 7px 5px 3px; }
.uretim-vitrin-buyuk .uretim-kb-etiket { font-size: 0.66rem; }
.uretim-vitrin-buyuk .uretim-kb-deger  { font-size: 0.84rem; }
.uretim-vitrin-kapat {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(15, 23, 42, 0.55);
    color: #fff; border-radius: 0; cursor: pointer;
    font-size: 0.85rem; line-height: 1;
}
.uretim-vitrin-kapat:hover { background: rgba(15, 23, 42, 0.8); }

@media (max-width: 768px) {
    .uretim-vitrin-buyuk { width: 96vw; }
    .uretim-vitrin-buyuk img { height: 46vh; }
    .uretim-kart-bilgi { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

.app-root.dark .uretim-vitrin-buyuk { background: #161b22; border-color: #30363d; }
.app-root.dark .uretim-kart-bilgi   { border-top-color: #30363d; }
.app-root.dark .uretim-kb-deger     { color: #e6edf3; }
.app-root.dark .uretim-kb-etiket    { color: #8b949e; }


/* ==========================================================================
   COKLU SECIM FILTRESI (CokluSecimFiltre)
   Stiller BILEREK sinif olarak duruyor: satir ici stil medya sorgusuyla
   ezilemez, bu yuzden telefonda alttan acilan panele gecis mumkun olmazdi.
   ========================================================================== */
.csf-wrap { position: relative; display: inline-block; }

.csf-perde { position: fixed; inset: 0; z-index: 40; }

.csf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    text-align: left;
}
.csf-btn.secili {
    font-weight: 600;
    color: var(--yl-primary);
    border-color: var(--yl-primary);
}
.csf-ozet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.csf-ok { width: 11px; height: 11px; flex: 0 0 auto; transition: transform 0.14s; }
.csf-ok.acik { transform: rotate(180deg); }

.csf-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 41;
    min-width: 190px;
    max-width: 280px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--yl-border);
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    padding: 4px 0;
}

/* Baslik yalnizca telefonda gorunur (masaustunde dugmenin kendisi zaten yaninda) */
.csf-panel-baslik { display: none; }

.csf-temizle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--yl-border);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.74rem;
    color: var(--yl-text-light);
}

.csf-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
}
.csf-opt.secili { background: #eff6ff; font-weight: 600; }
.csf-opt input { cursor: pointer; }
.csf-opt span { overflow: hidden; text-overflow: ellipsis; }

.csf-bos { padding: 7px 10px; font-size: 0.76rem; color: var(--yl-text-light); }

@media (max-width: 768px) {
    /* Telefon: acilir liste ALTTAN acilan tam genislikli panele doner.
       position:fixed oldugu icin overflow:hidden olan atalar kirpamaz.
       NOT: filtre DUGMESI burada tam genislik YAPILMAZ — yapilsaydi baslik
       alanindaki "Tum Ulkeler" gibi tek tuk filtreler bir satiri tek basina
       kaplardi. Tam genislik yalnizca acilan filtre panelinin ICINDE gecerli
       (bkz. .ylg-toolbar-start.acik .csf-wrap). */
    .csf-btn { min-height: 44px; }

    .csf-perde { z-index: 1199; background: rgba(0,0,0,0.35); }

    .csf-panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 62vh;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        box-shadow: 0 -8px 24px rgba(0,0,0,0.22);
        padding: 0 0 env(safe-area-inset-bottom, 0);
    }

    .csf-panel-baslik {
        display: block;
        position: sticky;
        top: 0;
        background: #f8f9fb;
        border-bottom: 1px solid var(--yl-border);
        padding: 12px 14px;
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--yl-text);
    }

    .csf-temizle { padding: 12px 14px; font-size: 0.82rem; min-height: 44px; }

    .csf-opt {
        padding: 11px 14px;
        font-size: 0.88rem;
        white-space: normal;
        min-height: 44px;
    }
    .csf-opt input { width: 18px; height: 18px; }
}


/* Telefonda belgeyi tarayicida acan BAG — masaustunde gizli
   (masaustunde on izleme ekrani ve yerel acilis kullanilir). */
.yl-mobil-ac { display: none; }

/* ==========================================================================
   TELEFON: LISTE EKRANI BASLIK ALANI
   Bu blok BILEREK dosyanin SONUNDA: YlGrid'in temel kurallari (.ylg-toolbar-start,
   .ylg-tool-btn) yukarida tanimli ve esit ozgullukte; daha once yazilsaydi
   sonra gelen temel kural bunlari ezerdi (filtre paneli hic kapanmiyordu).
   ========================================================================== */
@media (max-width: 768px) {

    /* ── Filtreler tek dugmenin arkasinda ── */
    .ylg-toolbar .ylg-filtre-btn { display: inline-flex; }

    .ylg-toolbar .ylg-toolbar-start { display: none; }
    .ylg-toolbar .ylg-toolbar-start.acik {
        display: flex;
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
        margin-top: 8px;
        border: 1px solid var(--yl-border);
        background: var(--yl-white);
    }
    .ylg-toolbar .ylg-toolbar-start.acik > * { width: 100%; }
    .ylg-toolbar .ylg-toolbar-start.acik .qt-spec-filter-ic { display: none; }
    /* Panel ICINDE acilir filtreler tam genislik olur (disarida degil) */
    .ylg-toolbar-start.acik .csf-wrap { display: block; width: 100%; }

    /* Sutun bazli arama satiri tablo basliginin icinde; telefonda baslik gizli
       oldugu icin bu dugme hicbir sey yapmiyordu. Sutun secici de kartta anlamsiz. */
    .ylg-toolbar .ylg-btn-ara,
    .ylg-toolbar .ylg-btn-sutun { display: none; }

    .ylg-toolbar { padding-bottom: 6px; gap: 6px; }

    /* ── Durum sekmeleri: tek satir, kaydirilabilir, alcak ── */
    .qt-status-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 2px;
        padding: 0;
    }
    .qt-status-tabs::-webkit-scrollbar { display: none; }
    .qt-status-tab {
        flex: 0 0 auto;
        padding: 9px 12px;
        font-size: 0.8rem;
        min-height: 40px;
        white-space: nowrap;
    }

    /* ── Arama + puan cipleri + ulke: 2 sikisik satir ── */
    .qt-filter-bar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 10px;
    }
    .qt-filter-bar .qt-search { flex: 1 1 100%; min-width: 0; }
    .qt-filter-bar .qt-search input { font-size: 16px; }

    .qt-filter-chips {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
    }
    .qt-filter-chips::-webkit-scrollbar { display: none; }
    .qt-filter-chips .touch-chip-btn {
        flex: 0 0 auto;
        padding: 8px 10px;
        font-size: 0.78rem;
        min-height: 40px;
    }

    .qt-ulke-filter-wrap { flex: 0 0 auto; }
    .qt-ulke-filter-wrap .csf-btn { min-width: 96px; max-width: 132px; }

    /* Liste alani ekranin kalanini alsin (filtreler kapaliyken) */
    .qt-list-panel { min-height: 0; }

    /* Telefonda: belge BAGI gorunur, masaustune ozgu dugmeler gizli */
    .yl-mobil-ac { display: inline-flex; align-items: center; justify-content: center; }
    .yl-masaustu-ac { display: none !important; }
}

/* ── "T" sutunu: yetkin dillerdeki ceviri eksigi ────────────────────────
   Dar sutun (44px); icerik ya tek karakter ya da tek basamakli mini dugme. */
.qt-ceviri-cell { text-align: center; }
.qt-ceviri-bos  { color: var(--yl-text-light); opacity: 0.5; }
.qt-ceviri-ok   { color: #16a34a; font-weight: 700; font-size: 0.72rem; cursor: help; }
.qt-ceviri-btn {
    min-width: 46px;
    height: 22px;
    padding: 0 5px;
    border: 1px solid #d97706;
    border-radius: 0;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.qt-ceviri-btn:hover { background: #fde68a; border-color: #b45309; }
.app-root.dark .qt-ceviri-btn { background: rgba(217,119,6,0.18); color: #fbbf24; border-color: #b45309; }
.app-root.dark .qt-ceviri-btn:hover { background: rgba(217,119,6,0.30); }

/* Panodaki touch kartinda DETAY'a basilinca listede ilgili satir vurgulanir. */
.quote-grid tbody tr.qt-vurgu > td {
    background: #fff7ed;
    box-shadow: inset 0 0 0 9999px rgba(217, 119, 6, 0.06);
}
.quote-grid tbody tr.qt-vurgu > td:first-child { box-shadow: inset 3px 0 0 #d97706; }
.app-root.dark .quote-grid tbody tr.qt-vurgu > td { background: #2d2416; }

/* Uretim listesinde "bu arac icin teklif ver" dugmesi (stoktan teklif). */
.btn-icon-quote { color: #0C447C; }
.btn-icon-quote:hover { background: #e8eef7; border-color: #b8c8de; }

/* ── URETIM LISTESI: filtre alani ──
   21 filtrenin tamami acikken tablonun ustunde dort satir yer kapliyordu
   (kullanici: "filtreler ekrani cok bogdu"). Artik TEK SATIR gorunur: ac/kapa
   dugmesi + en sik kullanilan uc filtre. Gerisi katlanmis panelde. */
.uretim-filtreler {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1 1 100%; min-width: 0;
}
.uf-satir { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.uf-ac {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--yl-white); color: var(--yl-text);
    border: 1px solid var(--yl-border); border-radius: 0;
    font-size: 0.76rem; font-weight: 600; font-family: inherit;
    padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.uf-ac:hover { background: #f1f5f9; }
.uf-ac.acik { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.app-root.dark .uf-ac { background: #161b22; border-color: #30363d; color: #e6edf3; }
.app-root.dark .uf-ac.acik { background: rgba(79,70,229,0.18); border-color: #4f46e5; color: #a5b4fc; }
.uf-ok { font-size: 0.6rem; opacity: 0.7; }

/* Acilan panel: obekler halinde, tablodan cizgiyle ayrilir */
.uf-panel {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 0 2px;
    border-top: 1px solid var(--yl-border);
}
.uf-grup { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.uf-grup-ad {
    display: inline-flex; align-items: center; gap: 4px;
    min-width: 78px; padding-right: 4px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #94a3b8; white-space: nowrap;
}
.app-root.dark .uf-grup-ad { color: #6e7681; }

/* Telefon: baslik satiri kendi satirina duser, filtreler tam genislik kullanir */
@media (max-width: 768px) {
    .uf-grup-ad { min-width: 100%; padding: 2px 0 0; }
}

/* ── URETIM DETAYI: ARAC YASAM CIZELGESI ──
   Kullanici istegi 2026-08: "burada sadece bir history olmali, urun hangi
   asamalardan gecmis onu gostermeli". Tablo yerine dikey zaman cizelgesi:
   asama degisiklikleri (mavi) ve siparis/satis hareketleri (amber) tek akista. */
.uretim-gecmis { display: flex; flex-direction: column; gap: 8px; }
.uretim-gecmis-bos {
    font-size: 0.82rem; color: var(--yl-text-light); line-height: 1.55;
    padding: 6px 2px;
}

.ug-cizelge {
    list-style: none; margin: 0; padding: 0 0 0 4px;
    display: flex; flex-direction: column;
}
.ug-olay {
    position: relative;
    display: grid; grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding: 0 0 14px;
}
/* Noktalari birlestiren dikey cizgi — son olayda kesilir */
.ug-olay::before {
    content: ""; position: absolute; left: 8px; top: 14px; bottom: 0;
    width: 1px; background: var(--yl-border);
}
.ug-olay:last-child { padding-bottom: 2px; }
.ug-olay:last-child::before { display: none; }

.ug-nokta {
    width: 9px; height: 9px; margin: 5px 0 0 4px;
    border-radius: 0;                       /* proje kurali: keskin koseler */
    background: var(--yl-white); border: 2px solid #94a3b8;
    position: relative; z-index: 1;
}
.ug-asama .ug-nokta   { border-color: #4f46e5; background: #eef2ff; }
.ug-hareket .ug-nokta { border-color: #b45309; background: #fffbeb; }

.ug-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ug-ust { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ug-baslik { font-size: 0.86rem; font-weight: 600; color: var(--yl-text); }
.ug-asama .ug-baslik { color: #4338ca; }
.ug-tarih {
    margin-left: auto; font-size: 0.72rem; color: var(--yl-text-light);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ug-alt  { font-size: 0.78rem; color: var(--yl-text-light); }
.ug-not  { font-size: 0.74rem; color: var(--yl-text-light); font-style: italic; }
.ug-kullanici { font-size: 0.7rem; color: #94a3b8; }

.app-root.dark .ug-nokta { background: #0d1117; }
.app-root.dark .ug-asama .ug-nokta { background: rgba(79,70,229,0.2); }
.app-root.dark .ug-asama .ug-baslik { color: #a5b4fc; }

@media (max-width: 640px) {
    .ug-tarih { margin-left: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   GORUSME OZETI (yapay zeka) — Touch rakamina tiklaninca acilan pencere
   Keskin koseler (border-radius: 0) proje kurali.
   ═══════════════════════════════════════════════════════════════════ */

/* Listedeki Touch rakami — tiklanabilir oldugu GORUNSUN */
.qt-touch-btn {
    border: 1px solid transparent;
    background: none;
    border-radius: 0;
    padding: 1px 7px;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--yl-accent, #0EA5E9);
    cursor: pointer;
    line-height: 1.5;
    transition: background 0.12s, border-color 0.12s;
}
.qt-touch-btn:hover {
    background: rgba(14,165,233,0.12);
    border-color: rgba(14,165,233,0.45);
}
.qt-touch-bos { font-weight: 700; color: var(--yl-text-light, #94a3b8); }

.ozet-modal { max-width: 460px; }

.ozet-header { display: flex; align-items: baseline; gap: 8px; }
.ozet-header-no {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--yl-text-light, #64748B);
}

.ozet-body { min-height: 156px; }

/* ── Bekleme ekrani ── */
.ozet-bekle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 0 10px;
}
.ozet-daire { display: flex; gap: 7px; }
.ozet-nokta {
    width: 9px; height: 9px;
    background: var(--yl-accent, #0EA5E9);
    display: block;
    animation: ozetZipla 1s ease-in-out infinite;
}
.ozet-nokta:nth-child(2) { animation-delay: 0.16s; }
.ozet-nokta:nth-child(3) { animation-delay: 0.32s; }
@keyframes ozetZipla {
    0%, 70%, 100% { transform: translateY(0);     opacity: 0.35; }
    35%           { transform: translateY(-8px);  opacity: 1;    }
}

.ozet-bekle-yazi {
    font-size: 0.82rem;
    color: var(--yl-text, #334155);
    text-align: center;
    min-height: 1.2em;
}

/* Ilerleme cizgisi — sure bilinmedigi icin suzulen bir seritle "calisiyor"
   hissi verilir; yuzde gostermek yaniltici olurdu. */
.ozet-cizgi {
    width: 190px; height: 2px;
    background: var(--yl-border, #E2E8F0);
    overflow: hidden;
}
.ozet-cizgi span {
    display: block;
    width: 42%; height: 100%;
    background: var(--yl-accent, #0EA5E9);
    animation: ozetSuzul 1.25s ease-in-out infinite;
}
@keyframes ozetSuzul {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(238%); }
}

/* ── Sonuc ── */
.ozet-sonuc { display: flex; flex-direction: column; gap: 9px; }
.ozet-madde {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--yl-text, #334155);
    animation: ozetGir 0.28s ease-out both;
}
.ozet-madde:nth-child(2) { animation-delay: 0.05s; }
.ozet-madde:nth-child(3) { animation-delay: 0.10s; }
.ozet-madde:nth-child(4) { animation-delay: 0.15s; }
.ozet-madde:nth-child(5) { animation-delay: 0.20s; }
@keyframes ozetGir {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.ozet-isaret {
    width: 5px; height: 5px;
    margin-top: 7px;
    flex-shrink: 0;
    background: var(--yl-accent, #0EA5E9);
}

.app-root.dark .ozet-bekle-yazi,
.app-root.dark .ozet-madde { color: #c9d1d9; }
.app-root.dark .ozet-cizgi { background: #30363d; }
.app-root.dark .qt-touch-btn:hover { background: rgba(14,165,233,0.18); }

/* ═══════════════════════════════════════════════════════════════════
   TEKLIF YAZILARI (yorum / soru / oneri)
   Keskin koseler (border-radius: 0) proje kurali.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Listedeki isaret ── */
.qt-yorum-btn {
    min-width: 26px;
    padding: 2px 9px;
    border: 1px solid var(--yl-border, #cbd5e1);
    border-radius: 0;
    background: var(--yl-white, #fff);
    color: var(--yl-text-light, #64748b);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    line-height: 1.5;
}
.qt-yorum-btn:hover { border-color: var(--yl-primary, #185fa5); color: var(--yl-primary, #185fa5); }

/* ── Rozet rengi DURUMU anlatir (ticket akisi) ──
   kirmizi = cevap bekliyor · turuncu = cevaplandi, kapanmadi · yesil = tamamlandi */
.qt-yorum-btn.is-acik {
    background: #C0392B;
    border-color: #C0392B;
    color: #fff;
    animation: qtYorumNabiz 2.4s ease-in-out infinite;
}
.qt-yorum-btn.is-cevaplandi {
    background: #15803D;
    border-color: #15803D;
    color: #fff;
}
.qt-yorum-btn.is-kapandi {
    background: #64748B;
    border-color: #64748B;
    color: #fff;
}
.qt-yorum-btn.is-acik:hover,
.qt-yorum-btn.is-cevaplandi:hover,
.qt-yorum-btn.is-kapandi:hover { filter: brightness(1.12); color: #fff; }
@keyframes qtYorumNabiz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.45); }
    50%      { box-shadow: 0 0 0 4px rgba(192,57,43,0); }
}

.qt-yorum-ekle {
    width: 20px; height: 20px;
    padding: 0;
    border: 1px dashed var(--yl-border, #cbd5e1);
    border-radius: 0;
    background: none;
    color: var(--yl-text-light, #94a3b8);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
}
tr:hover .qt-yorum-ekle { opacity: 1; }
.qt-yorum-ekle:hover { border-style: solid; border-color: var(--yl-primary, #185fa5); color: var(--yl-primary, #185fa5); }

/* ── Pencere ── */
.yrm-modal { max-width: 640px; }
.yrm-header { display: flex; align-items: baseline; gap: 8px; }
.yrm-header-no { font-size: 0.76rem; font-weight: 600; color: var(--yl-text-light, #64748b); }
.yrm-body { max-height: 66vh; overflow-y: auto; }
.yrm-bos { padding: 16px 0; font-size: 0.82rem; color: var(--yl-text-light, #64748b); text-align: center; }

.yrm-liste { display: flex; flex-direction: column; gap: 10px; }

.yrm-yazi {
    border: 1px solid var(--yl-border, #e2e8f0);
    border-left: 3px solid var(--yl-border, #cbd5e1);
    border-radius: 0;
    padding: 9px 11px;
    background: var(--yl-white, #fff);
}
.yrm-yazi.is-acik       { border-left-color: #C0392B; background: rgba(192,57,43,0.035); }
.yrm-yazi.is-cevaplandi { border-left-color: #15803D; background: rgba(21,128,61,0.035); }
.yrm-yazi.is-kapandi    { border-left-color: #64748B; background: rgba(100,116,139,0.05); opacity: 0.85; }

/* Ticket durumu rozeti */
.yrm-durum {
    padding: 0 6px;
    font-size: 0.62rem;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 0;
}
.yrm-durum.is-acik       { background: #C0392B; color: #fff; }
.yrm-durum.is-cevaplandi { background: #15803D; color: #fff; }
.yrm-durum.is-kapandi    { background: #64748B; color: #fff; }

.yrm-durum-btn {
    border: 1px solid var(--yl-border, #cbd5e1);
    border-radius: 0;
    background: none;
    padding: 0 6px;
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--yl-text-light, #64748b);
    cursor: pointer;
}
.yrm-durum-btn:hover { border-color: var(--yl-text, #334155); color: var(--yl-text, #334155); }
.yrm-durum-btn.is-tamamla:hover { border-color: #15803D; color: #15803D; }

.yrm-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 0.71rem;
    color: var(--yl-text-light, #64748b);
    margin-bottom: 4px;
}
.yrm-tur {
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}
.yrm-tur-yorum { background: rgba(100,116,139,0.14); border-color: rgba(100,116,139,0.35); color: #475569; }
.yrm-tur-soru  { background: rgba(29,78,216,0.12);  border-color: rgba(29,78,216,0.4);   color: #1d4ed8; }
.yrm-tur-oneri { background: rgba(180,105,14,0.14); border-color: rgba(180,105,14,0.4);  color: #B4690E; }

.yrm-yazan { font-weight: 700; color: var(--yl-text, #334155); }
.yrm-dep   { opacity: 0.8; }
.yrm-tarih { margin-left: auto; }
.yrm-sil {
    border: none; background: none; cursor: pointer;
    color: var(--yl-text-light, #94a3b8); font-size: 1rem; line-height: 1; padding: 0 2px;
}
.yrm-sil:hover { color: #C0392B; }

.yrm-metin { font-size: 0.84rem; color: var(--yl-text, #334155); line-height: 1.5; white-space: pre-wrap; }

.yrm-cevap {
    margin: 8px 0 0 14px;
    padding: 7px 9px;
    border-left: 2px solid var(--yl-border, #cbd5e1);
    background: var(--yl-bg-soft, #f8fafc);
}

.yrm-cevap-kutu { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; }
.yrm-gonder { white-space: nowrap; }

.yrm-input {
    width: 100%;
    border: 1px solid var(--yl-border, #cbd5e1);
    border-radius: 0;
    padding: 6px 8px;
    font-size: 0.82rem;
    font-family: inherit;
    resize: vertical;
    color: var(--yl-text, #334155);
    background: var(--yl-white, #fff);
}
.yrm-input:focus { outline: none; border-color: var(--yl-primary, #185fa5); }

.yrm-yeni {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--yl-border, #e2e8f0);
}
.yrm-yeni-bas { font-size: 0.78rem; font-weight: 700; color: var(--yl-text, #334155); margin-bottom: 6px; }
.yrm-yeni-satir { display: flex; gap: 5px; margin-bottom: 6px; }
.yrm-tur-sec {
    padding: 2px 10px;
    border: 1px solid var(--yl-border, #cbd5e1);
    border-radius: 0;
    background: var(--yl-white, #fff);
    color: var(--yl-text-light, #64748b);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}
.yrm-tur-sec.is-secili {
    background: var(--yl-primary, #185fa5);
    border-color: var(--yl-primary, #185fa5);
    color: #fff;
}
.yrm-yeni-alt { display: flex; justify-content: flex-end; margin-top: 7px; }

.yrm-hata {
    margin-top: 10px;
    padding: 7px 10px;
    font-size: 0.78rem;
    color: #A32D2D;
    background: rgba(163,45,45,0.08);
    border: 1px solid rgba(163,45,45,0.25);
}

@media (max-width: 700px) {
    .yrm-cevap-kutu { flex-direction: column; }
    .yrm-gonder { align-self: flex-end; }
    .qt-yorum-ekle { opacity: 1; }
}

.app-root.dark .yrm-yazi { background: #161b22; border-color: #30363d; }
.app-root.dark .yrm-cevap { background: #0d1117; border-left-color: #30363d; }
.app-root.dark .yrm-metin, .app-root.dark .yrm-yazan { color: #c9d1d9; }
.app-root.dark .yrm-input { background: #0d1117; border-color: #30363d; color: #c9d1d9; }
.app-root.dark .qt-yorum-btn { background: #161b22; border-color: #30363d; }

/* Red penceresinde nedenlerden ONCE gosterilen ek alan (bagli teklif secimi).
   Yalnizca panodan cagrildiginda dolar; diger uc kullanim yerinde hic cizilmez. */
.red-sebep-ustalan {
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--yl-border, #e2e8f0);
}
.app-root.dark .red-sebep-ustalan { border-bottom-color: #30363d; }

/* Yeni yazi tur secicileri — turun kendi rengi (Soru mavi, Oneri turuncu) */
.yrm-tur-sec.is-soru.is-secili  { background: #1D4ED8; border-color: #1D4ED8; }
.yrm-tur-sec.is-oneri.is-secili { background: #B4690E; border-color: #B4690E; }

/* On izleme sol panelinde dar alan */
.yrm-panel.is-kompakt .yrm-yazi   { padding: 7px 8px; }
.yrm-panel.is-kompakt .yrm-metin  { font-size: 0.78rem; }
.yrm-panel.is-kompakt .yrm-ust    { font-size: 0.66rem; gap: 5px; }
.yrm-panel.is-kompakt .yrm-cevap-kutu { flex-direction: column; }
.yrm-panel.is-kompakt .yrm-gonder { align-self: flex-end; }
.yrm-panel.is-kompakt .yrm-yeni-satir { flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════
   TAKIP (TOUCH) LISTESI UYELIGI — listedeki zil dugmesi
   Kullanici istegi 2026-08: numarasi verilmis her teklif (taslak dahil)
   touch listesine tek tikla eklenip cikarilabilsin.
   Keskin koseler (border-radius: 0) proje kurali.
   ═══════════════════════════════════════════════════════════════════ */
.qt-takip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.qt-takip-btn:disabled { cursor: default; opacity: 0.45; }
/* Takipte: dolu zil, dikkat ceken renk */
.qt-takip-btn.is-on { color: var(--yl-accent, #0EA5E9); }
.qt-takip-btn.is-on:hover:not(:disabled) {
    background: rgba(14,165,233,0.12);
    border-color: rgba(14,165,233,0.45);
}
/* Takip disi: solgun, ustune gelince "ekle" oldugu anlasilsin */
.qt-takip-btn.is-off { color: var(--yl-text-light, #94a3b8); opacity: 0.6; }
tr:hover .qt-takip-btn.is-off { opacity: 1; }
.qt-takip-btn.is-off:hover:not(:disabled) {
    background: rgba(24,95,165,0.10);
    border-color: rgba(24,95,165,0.40);
    color: var(--yl-primary, #185fa5);
}
/* "Sonraki Temas" sutununda takip disi teklifin isareti */
.qt-takip-disi-etiket {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--yl-text-light, #94a3b8);
    border: 1px dashed var(--yl-border, #d5dbe3);
    padding: 0 5px;
}
.app-root.dark .qt-takip-btn.is-on:hover:not(:disabled) { background: rgba(14,165,233,0.18); }
.app-root.dark .qt-takip-btn.is-off:hover:not(:disabled) { background: rgba(56,139,253,0.16); color: #58a6ff; }
.app-root.dark .qt-takip-disi-etiket { border-color: #30363d; color: #8b949e; }
/* Telefonda kart icinde: her zaman gorunur (satir hover yok) */
@media (max-width: 768px) {
    .qt-takip-btn.is-off { opacity: 1; }
}

/* ============================================================
   SIRADAKI TEKLIF NUMARASI (sekme cubugu, sag) — kullanici istegi 13.09.2026:
   teklif acmadan once siradaki numarayi gormek istiyorlar.
   ============================================================ */
.qt-siradaki-no {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid #b7c4dc;
    background: #fff;
    color: #3a4a6b;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 0;
}
.qt-siradaki-no strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f2548;
    letter-spacing: 0.04em;
}

/* Satir SAG TIK menusu */
.qt-ctx-perde {
    position: fixed; inset: 0; z-index: 9000;
}
.qt-ctx-menu {
    position: fixed; z-index: 9001;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--yl-border);
    box-shadow: 0 6px 20px rgba(15, 37, 72, 0.18);
    border-radius: 0;
    padding: 4px 0;
}
.qt-ctx-baslik {
    padding: 6px 12px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--yl-border);
    margin-bottom: 4px;
}
.qt-ctx-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none; background: none;
    text-align: left;
    font-size: 0.8rem;
    color: #0f2548;
    cursor: pointer;
}
.qt-ctx-item:hover { background: #e8edf6; }
.qt-ctx-item:disabled { color: #9ca3af; cursor: default; background: none; }

/* Teknik resim goruntuleyici (sag tik > Teknik Resmi Goster) */
/* resmicariler.css'teki .rc-modal (max-width:480px) daha sonra yuklendigi icin genisligi
   eziyordu — cizim kucuk kaliyordu. Ozgulluk artirildi; neredeyse tam ekran. */
.rc-modal.qt-cizim-modal {
    width: min(96vw, 1600px); max-width: min(96vw, 1600px); min-width: 0;
    max-height: 94vh; display: flex; flex-direction: column;
}
.qt-cizim-govde { overflow: auto; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.qt-cizim-govde img { width: 100%; height: auto; display: block; border: 1px solid var(--yl-border); background: #fff; }
.qt-cizim-ad { font-size: 0.74rem; color: var(--yl-text-light); margin-bottom: 4px; }

/* ─── MODEL OLUŞTUR (sağ tık) — 27.09.2026 ─────────────────────────────────── */
.rc-modal.qt-model-modal { max-width: 540px; width: 100%; }
.qt-model-govde { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.qt-model-govde label { display: flex; flex-direction: column; gap: 4px; font-size: 0.76rem; font-weight: 600; color: #475569; }
.qt-model-govde input, .qt-model-govde textarea {
    padding: 7px 9px; font-size: 0.86rem; font-weight: 400; color: #0f172a;
    border: 1px solid var(--yl-border, #dfe4ec); border-radius: 0;
}
.qt-model-ipucu {
    font-size: 0.78rem; color: #334155; line-height: 1.5;
    background: #f1f5fb; border: 1px solid #d6e2f3; padding: 9px 11px;
}
.qt-model-hiyerarsi { margin-top: 5px; font-size: 0.72rem; color: #64748b; }
.qt-model-uyari { font-size: 0.8rem; color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; padding: 8px 10px; }
.qt-model-hata { font-size: 0.8rem; color: #b91c1c; }
/* Kayitli marka / model / paket adlari — tiklanabilir etiketler (10.10.2026, Follow #39) */
.qt-model-kayitli { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: -4px; }
.qt-model-kayitli-baslik { font-size: 0.7rem; color: #64748b; margin-right: 2px; }
.qt-model-etiket {
    font-size: 0.72rem; padding: 2px 8px; cursor: pointer;
    color: #1e3a5f; background: #f8fafc; border: 1px solid #c7d2e3; border-radius: 0;
}
.qt-model-etiket:hover { background: #eef4ff; border-color: var(--yl-primary, #1a3a6b); }
.qt-model-etiket.secili { color: #fff; background: var(--yl-primary, #1a3a6b); border-color: var(--yl-primary, #1a3a6b); }
.qt-model-kayitli-diger { font-size: 0.7rem; color: #94a3b8; }
.app-root.dark .qt-model-etiket { color: #c9d1d9; background: #161b22; border-color: #3a4351; }
.app-root.dark .qt-model-etiket.secili { color: #fff; background: #1f6feb; border-color: #1f6feb; }

/* ── URETIM ↔ REVIZYON (07.10.2026) — aracin uretildigi revizyon ve "Stoğa Geri Çek" ── */
.uretim-rev { color: var(--yl-text-light, #64748b); font-weight: 600; }
.uretim-rev-yeni {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    font-size: 0.66rem;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 0;
    white-space: nowrap;
}
.uretim-rev-uyari {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    padding: 8px 10px;
    font-size: 0.8rem;
    color: #7c4a03;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 0;
}
.uretim-rev-uyari > span { flex: 1 1 260px; min-width: 0; }
.uretim-durum-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uretim-durum-satir select { flex: 1 1 200px; }
@media (max-width: 768px) {
    .uretim-rev-uyari .rc-btn, .uretim-durum-satir .rc-btn { min-height: 36px; }
    .uretim-durum-satir select { max-width: none !important; }
}
.app-root.dark .uretim-rev-yeni { color: #f0b429; background: #2a2210; border-color: #7c5a12; }
.app-root.dark .uretim-rev-uyari { color: #fcd34d; background: #2a2210; border-color: #7c5a12; }

/* SIPARISE CEVIR — revize edilen siparisin mevcut araclari (07.10.2026) */
.qt-acf-rev-not {
    margin: 0 0 10px;
    padding: 8px 10px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #7c4a03;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 0;
}
.qt-acf-mevcut td { background: #f8fafc; }
.qt-acf-mevcut .qt-acf-input:disabled { background: #eef2f7; color: #334155; font-weight: 600; cursor: not-allowed; }
.qt-acf-rev-hucre label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; white-space: nowrap; cursor: pointer; }
.qt-acf-rev-hucre input[type=checkbox] { width: 16px; height: 16px; }
.qt-acf-rev-yok { font-size: 0.74rem; color: #64748b; }
.qt-acf-tum { display: block; margin-top: 3px; font-size: 0.76rem; color: #475569; overflow-wrap: anywhere; }
@media (max-width: 768px) {
    .qt-acf-rev-hucre input[type=checkbox] { width: 20px; height: 20px; }
}
.app-root.dark .qt-acf-rev-not { color: #fcd34d; background: #2a2210; border-color: #7c5a12; }
.app-root.dark .qt-acf-mevcut td { background: #12171e; }
.app-root.dark .qt-acf-mevcut .qt-acf-input:disabled { background: #161b22; color: #c9d1d9; }
.app-root.dark .qt-acf-rev-yok { color: #8b949e; }
.app-root.dark .qt-acf-tum { color: #8b949e; }

/* ── Siparise Cevir 2. adim: URETIM IS EMRI DETAYLARI (IsEmriGirisi, 08.10.2026) ──
   Ustte "tum araclarda ayni" kartlari, altta arac basina Excel benzeri tablo (yl-matris).
   Pencere ekrani asmaz: baslik/alt sabit, govde kayar; tablo yatayda kendi icinde kayar. */
.qt-acf-modal-isemri { width: 1180px; max-width: 96vw; height: 92vh; max-height: 92vh; }
.qt-acf-modal-isemri .ie-govde { flex: 1; min-height: 0; overflow: auto; }
.ie-ust-not { color: #15803d; }
.ie-bilgi { font-size: 0.8rem; color: #64748b; padding: 6px 0; }
.ie-bolum { margin-top: 12px; }
.ie-bolum-baslik {
    font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: #475569; margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.ie-ipucu { font-size: 0.72rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; }

/* Ortak (hepsi) kartlari */
.ie-ortak { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ie-kart { border: 1px solid #e2e8f0; background: #f8fafc; padding: 8px; min-width: 0; }
.ie-kart.genis { grid-column: span 2; }
.ie-kart-baslik {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    font-size: 0.74rem; font-weight: 700; color: #334155; margin-bottom: 6px;
}
.ie-kart-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.ie-alan { min-width: 0; }
.ie-alan-ad { display: block; font-size: 0.68rem; color: #64748b; margin-bottom: 2px; }
.ie-renk-ad { display: block; font-size: 0.7rem; color: #64748b; margin-top: 2px; }
.ie-kart .ie-in {
    width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; background: #fff;
    padding: 6px 8px; font-size: 0.84rem; color: #1f2937; border-radius: 0;
}
.ie-kart .ie-in:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.12); }

/* Arac bazindaki gruplar: tek tikla "hepsi" yapilir */
.ie-cipler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ie-cipler-ad { font-size: 0.74rem; color: #64748b; }
.ie-cip {
    border: 1px dashed #cbd5e1; background: #fff; color: #334155; font-size: 0.74rem;
    padding: 3px 8px; cursor: pointer; border-radius: 0;
}
.ie-cip span { color: #94a3b8; margin-left: 4px; }
.ie-cip:hover { border-color: #16a34a; color: #15803d; }
.ie-cip:hover span { color: #16a34a; }

/* Excel benzeri tablo */
.ie-matris-kap { overflow: auto; max-height: 70vh; border: 1px solid #cbd5e1; }
.ie-matris { border-collapse: collapse; min-width: 100%; }
.ie-matris th {
    position: sticky; top: 0; z-index: 2; background: #f1f5f9; color: #475569;
    font-size: 0.7rem; font-weight: 700; text-align: left; white-space: nowrap;
    padding: 6px 8px; border: 1px solid #cbd5e1;
}
.ie-th { display: inline-flex; align-items: center; gap: 6px; }
.ie-asagi {
    border: 1px solid #cbd5e1; background: #fff; color: #7c3aed; font-weight: 700;
    font-size: 0.72rem; line-height: 1; padding: 2px 5px; cursor: pointer; border-radius: 0;
}
.ie-asagi:hover { background: #f5f3ff; border-color: #7c3aed; }
.ie-matris td { border: 1px solid #e2e8f0; padding: 0; background: #fff; vertical-align: middle; }
.ie-matris tbody tr:nth-child(even) td { background: #fafbfc; }
.ie-matris .ie-sabit {
    position: sticky; left: 0; z-index: 1; background: #f8fafc; white-space: nowrap;
    padding: 0 10px; font-size: 0.8rem; color: #1f2937; box-shadow: 1px 0 0 #cbd5e1;
}
.ie-matris th.ie-sabit { z-index: 3; background: #e2e8f0; }
.ie-sira { display: inline-block; min-width: 18px; color: #94a3b8; font-size: 0.72rem; margin-right: 6px; }
.ie-matris .ie-in {
    width: 100%; min-width: 120px; box-sizing: border-box; border: none; background: transparent;
    padding: 7px 8px; font-size: 0.82rem; color: #1f2937; border-radius: 0;
}
.ie-matris select.ie-in { min-width: 130px; cursor: pointer; }
.ie-matris .ie-sayi { min-width: 90px; text-align: right; }
.ie-matris .ie-in:focus { outline: 2px solid #7c3aed; outline-offset: -2px; background: #faf5ff; }
.ie-in.hata { background: #fef2f2 !important; box-shadow: inset 0 0 0 1px #dc2626; }
.ie-in.uyari { background: #fffbeb !important; box-shadow: inset 0 0 0 1px #f59e0b; }
.ie-matris .tr-date { border: none; min-width: 140px; background: transparent; }
.ie-matris .tr-date:focus-within { box-shadow: inset 0 0 0 2px #7c3aed; background: #faf5ff; }
.ie-matris .tr-date .tr-date-text { padding: 7px 8px; font-size: 0.82rem; }
.ie-matris .tr-date .tr-date-pick-btn { background: transparent; border-left-color: #eef2f7; }

/* Alt cubuk */
.ie-alt { align-items: center; flex-wrap: wrap; }
.ie-soru { font-size: 0.8rem; color: #b45309; margin-right: auto; }
.qt-acf-btn-cancel.ie-tehlike { color: #b91c1c; border-color: #fecaca; }
.qt-acf-btn-cancel.ie-tehlike:hover { background: #fef2f2; }

@media (max-width: 700px) {
    .qt-acf-modal-isemri { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: none; }
    .qt-acf-modal-isemri .qt-acf-body { padding: 10px; }
    .ie-kart.genis { grid-column: auto; }
    .ie-ortak { grid-template-columns: 1fr; }
    .ie-matris-kap { max-height: none; }
    .ie-matris .ie-in { min-width: 110px; padding: 9px 8px; font-size: 0.86rem; }
}

.app-root.dark .ie-ust-not { color: #4ade80; }
.app-root.dark .ie-bolum-baslik { color: #8b949e; }
.app-root.dark .ie-kart { background: #161b22; border-color: #30363d; }
.app-root.dark .ie-kart-baslik { color: #c9d1d9; }
.app-root.dark .ie-alan-ad, .app-root.dark .ie-renk-ad, .app-root.dark .ie-cipler-ad { color: #8b949e; }
.app-root.dark .ie-kart .ie-in { background: #0d1117; border-color: #30363d; color: #e6edf3; }
.app-root.dark .ie-cip { background: #0d1117; border-color: #3a4250; color: #c9d1d9; }
.app-root.dark .ie-matris-kap { border-color: #30363d; }
.app-root.dark .ie-matris th { background: #161b22; color: #8b949e; border-color: #30363d; }
.app-root.dark .ie-matris th.ie-sabit { background: #1c2128; }
.app-root.dark .ie-matris td { background: #0d1117; border-color: #21262d; }
.app-root.dark .ie-matris tbody tr:nth-child(even) td { background: #11161d; }
.app-root.dark .ie-matris .ie-sabit { background: #161b22; color: #e6edf3; box-shadow: 1px 0 0 #30363d; }
.app-root.dark .ie-matris .ie-in { color: #e6edf3; }
.app-root.dark .ie-matris .ie-in:focus { background: #1d1530; }
.app-root.dark .ie-in.hata { background: #2a1215 !important; }
.app-root.dark .ie-in.uyari { background: #2a2210 !important; }
.app-root.dark .ie-asagi { background: #0d1117; border-color: #30363d; color: #a78bfa; }
.app-root.dark .ie-matris .tr-date:focus-within { background: #1d1530; }

/* ── TEKLIFLERI YAN YANA (11.10.2026) ──────────────────────────────────────────────
   Teklif Listesi'nde secilen 2-4 teklif sutun sutun: ozet karti (farkli degerler vurgulu)
   + belgenin kendisi. Dar ekranda kartlar alt alta, belge cihazin goruntuleyicisinde. */
.ty-sayfa { display: flex; flex-direction: column; height: 100vh; width: 100%; min-width: 0; background: #f1f5f9; }
.ty-sayfa.dar { height: auto; min-height: 100vh; }
.ty-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
          background: #fff; border-bottom: 1px solid var(--yl-border); }
.ty-baslik { font-weight: 700; color: var(--yl-primary); font-size: 1rem; }
.ty-baslik span { font-weight: 400; color: var(--yl-text-light); font-size: 0.8rem; margin-left: 6px; }
.ty-fark-sec { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; cursor: pointer; user-select: none; }
.ty-fark-sec input { width: 16px; height: 16px; }
.ty-durum { padding: 24px 16px; color: var(--yl-text-light); }
.ty-izgara { flex: 1 1 auto; min-height: 0; display: grid; gap: 8px; padding: 8px;
             grid-template-columns: repeat(var(--ty-kolon, 2), minmax(0, 1fr)); }
.ty-izgara.dar { flex: 0 0 auto; }
.ty-kolon { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border: 1px solid var(--yl-border); }
.ty-kart { padding: 8px 10px; border-bottom: 1px solid var(--yl-border); }
.ty-kart-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ty-kart-ust strong { color: var(--yl-primary); font-size: 0.92rem; }
.ty-rev { font-size: 0.72rem; font-weight: 700; color: #0369a1; }
.ty-durum-rozet { font-size: 0.7rem; padding: 1px 6px; background: #eef2f7; color: #334155; }
.ty-kaldir { margin-left: auto; width: 24px; height: 24px; line-height: 1; border: 1px solid var(--yl-border); border-radius: 0;
             background: #fff; color: #64748b; cursor: pointer; }
.ty-kaldir:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.ty-satir { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px; padding: 2px 4px; font-size: 0.76rem; }
.ty-satir .ty-etiket { color: var(--yl-text-light); }
.ty-satir .ty-deger { color: var(--yl-text); font-weight: 600; overflow-wrap: anywhere; }
.ty-satir.fark { background: #fef3c7; }
.ty-satir.fark .ty-deger { color: #92400e; }
.ty-belge { position: relative; flex: 1 1 auto; min-height: 0; }
.ty-iframe { display: block; width: 100%; height: 100%; border: 0; background: #e2e8f0; }
.ty-belge-yukleniyor, .ty-hata { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                                 padding: 12px; text-align: center; font-size: 0.8rem; color: var(--yl-text-light);
                                 background: #f8fafc; pointer-events: none; }
.ty-hata { color: #b91c1c; }
.ty-ac { margin-top: 8px; width: 100%; min-height: 40px; border: 1px solid var(--yl-primary); border-radius: 0;
         background: var(--yl-primary); color: #fff; font-weight: 600; cursor: pointer; }
.ty-ac:disabled { opacity: .6; cursor: default; }
@media (max-width: 768px) {
    .ty-ust { padding: 10px 12px; }
    .ty-satir { grid-template-columns: 96px minmax(0, 1fr); }
}
.app-root.dark .ty-sayfa { background: #0f172a; }
.app-root.dark .ty-ust, .app-root.dark .ty-kolon { background: #1e293b; border-color: #334155; }
.app-root.dark .ty-kart { border-color: #334155; }
.app-root.dark .ty-durum-rozet { background: #334155; color: #e2e8f0; }
.app-root.dark .ty-satir.fark { background: rgba(245, 158, 11, .18); }
.app-root.dark .ty-satir.fark .ty-deger { color: #fbbf24; }

/* Teklif Listesi: yan yana secimi */
.qt-sec-cell { text-align: center; }
.qt-sec-kutu { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
tr.qt-yy-secili > td { background: #eff6ff; }
.app-root.dark tr.qt-yy-secili > td { background: rgba(59, 130, 246, .14); }
.qt-yy-arac { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 6px;
              background: #eff6ff; border: 1px solid #bfdbfe; font-size: 0.76rem; color: #1e3a8a; }
.qt-yy-arac button { height: 26px; padding: 0 10px; border: 1px solid #93c5fd; border-radius: 0; background: #fff;
                     color: #1e40af; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.qt-yy-arac button.ana { background: var(--yl-primary); border-color: var(--yl-primary); color: #fff; }
.qt-yy-arac button:disabled { opacity: .5; cursor: default; }
@media (max-width: 768px) {
    .qt-sec-kutu { width: 22px; height: 22px; }
    .qt-yy-arac button { min-height: 40px; }
}