/* Araç servis sayfalarının temel renk ve yüzey değişkenlerini tanımla. */
:root {
    --arcs-ink: #172033;
    --arcs-muted: #667085;
    --arcs-line: #e5eaf1;
    --arcs-surface: #ffffff;
    --arcs-soft: #f6f8fb;
    --arcs-primary: #3157d5;
    --arcs-primary-soft: #edf1ff;
    --arcs-success: #138a5b;
    --arcs-warning: #bb6b11;
    --arcs-danger: #c63b4a;
    --arcs-shadow: 0 14px 35px rgba(25, 39, 72, 0.08);
}

/* Sayfa başlığını geniş ekran ve mobilde dengeli hizala. */
.arcs-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Başlık tipografisini servis ekranları için belirginleştir. */
.arcs-page-heading h1 {
    color: var(--arcs-ink);
    font-size: clamp(1.55rem, 2.2vw, 2.2rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    margin: 0.2rem 0 0.45rem;
}

/* Başlık açıklamasının okunabilir genişliğini sınırla. */
.arcs-page-heading p {
    color: var(--arcs-muted);
    margin: 0;
    max-width: 780px;
}

/* Küçük bağlam etiketini kurumsal vurgu rengiyle göster. */
.arcs-eyebrow {
    color: var(--arcs-primary);
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Operasyon özet kartlarını esnek kolonlarda sırala. */
.arcs-stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 1.8fr);
    margin-bottom: 1.25rem;
}

/* Özet kartlarının yüzey ve gölge düzenini kur. */
.arcs-stat-card {
    background: linear-gradient(150deg, #fff, #f7f9fd);
    border: 1px solid var(--arcs-line);
    border-radius: 16px;
    box-shadow: var(--arcs-shadow);
    min-height: 118px;
    padding: 1rem 1.1rem;
}

/* Özet kartının küçük başlığını ikincil renkte göster. */
.arcs-stat-card > span {
    color: var(--arcs-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Özet sayısını güçlü görsel hiyerarşiyle göster. */
.arcs-stat-card > strong {
    color: var(--arcs-ink);
    display: block;
    font-size: 2rem;
    line-height: 1.1;
    margin: 0.35rem 0 0.15rem;
}

/* Özet alt bilgisini yumuşak renkte göster. */
.arcs-stat-card > small {
    color: var(--arcs-muted);
}

/* Vurgulu özet kartına mavi ton ekle. */
.arcs-stat-card--accent {
    background: linear-gradient(145deg, #edf3ff, #ffffff);
    border-color: #cfdbff;
}

/* Uyarı özet kartına sıcak ton ekle. */
.arcs-stat-card--warning {
    background: linear-gradient(145deg, #fff7e9, #ffffff);
    border-color: #f2dfbd;
}

/* Geniş özet kartında durum rozetlerini akışkan yerleştir. */
.arcs-stat-card--wide {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Durum açıklamalarını taşmadan çok satıra geçir. */
.arcs-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

/* Ortak kart yüzeyini bütün servis ekranlarında kullan. */
.arcs-card {
    background: var(--arcs-surface);
    border: 1px solid var(--arcs-line);
    border-radius: 18px;
    box-shadow: var(--arcs-shadow);
    overflow: hidden;
}

/* Kart başlığını içerik ve eylemler arasında dağıt. */
.arcs-card__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--arcs-line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
}

/* Kart başlığı tipografisini sadeleştir. */
.arcs-card__header h2,
.arcs-card__body h2 {
    color: var(--arcs-ink);
    font-size: 1.05rem;
    font-weight: 750;
    margin: 0 0 0.25rem;
}

/* Kart açıklamalarını ikincil renkte göster. */
.arcs-card__header p,
.arcs-card__body p {
    color: var(--arcs-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Kart içeriğine tutarlı boşluk ver. */
.arcs-card__body {
    padding: 1.2rem;
}

/* Takvim ve akış kartlarını ana çalışma alanında hizala. */
.arcs-randevu-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2.25fr) minmax(270px, 0.75fr);
}

/* Takvim araçlarını küçük ekranlarda taşabilir düzenle. */
.arcs-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

/* Aktif ay başlığını takvimin merkezinde göster. */
.arcs-calendar-title {
    color: var(--arcs-ink);
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.9rem;
    text-align: center;
}

/* Haftanın günlerini takvim kolonlarıyla hizala. */
.arcs-calendar-weekdays {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 0.35rem;
}

/* Gün başlıklarını küçük ve belirgin göster. */
.arcs-calendar-weekdays span {
    color: var(--arcs-muted);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.3rem;
    text-align: center;
    text-transform: uppercase;
}

/* Takvim günlerini yedi kolonlu ızgarada göster. */
.arcs-calendar-grid {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Takvim gün hücresini randevu taşımaya uygun yüzey yap. */
.arcs-calendar-day {
    background: #fbfcfe;
    border: 1px solid var(--arcs-line);
    border-radius: 10px;
    min-height: 112px;
    padding: 0.38rem;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* Başka aya ait hücreleri görsel olarak geri çek. */
.arcs-calendar-day.is-outside {
    background: #f4f6f9;
    opacity: 0.68;
}

/* Bugünün hücresini belirgin çerçeveyle işaretle. */
.arcs-calendar-day.is-today {
    border-color: var(--arcs-primary);
    box-shadow: inset 0 0 0 1px var(--arcs-primary);
}

/* Sürüklenen randevunun hedef gününü vurgula. */
.arcs-calendar-day.is-drag-over {
    background: var(--arcs-primary-soft);
    border-color: var(--arcs-primary);
}

/* Gün numarası düğmesini yüzeyle bütünleştir. */
.arcs-calendar-day__number {
    background: transparent;
    border: 0;
    color: var(--arcs-ink);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0 0.18rem 0.25rem;
}

/* Takvim randevusunu kompakt ve taşınabilir kart olarak göster. */
.arcs-calendar-event {
    background: var(--arcs-primary-soft);
    border: 0;
    border-left: 3px solid var(--arcs-primary);
    border-radius: 6px;
    color: #243b85;
    cursor: pointer;
    display: block;
    font-size: 0.69rem;
    margin-top: 0.25rem;
    overflow: hidden;
    padding: 0.28rem 0.35rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Geldi durumundaki olayı sıcak renkle ayır. */
.arcs-calendar-event[data-status="GELDI"] {
    background: #fff5df;
    border-left-color: var(--arcs-warning);
    color: #7a480f;
}

/* Kabul edilen olayı yeşil tonla ayır. */
.arcs-calendar-event[data-status="KABUL_EDILDI"] {
    background: #e8f7f0;
    border-left-color: var(--arcs-success);
    color: #0c6843;
}

/* İptal ve gelmedi olaylarını nötr kırmızı tonlarda göster. */
.arcs-calendar-event[data-status="IPTAL"],
.arcs-calendar-event[data-status="GELMEDI"] {
    background: #f7ecee;
    border-left-color: var(--arcs-danger);
    color: #8e2631;
    opacity: 0.78;
}

/* Takvim yükleme ve hata mesajını görünür alanda tut. */
.arcs-calendar-message {
    color: var(--arcs-muted);
    font-size: 0.9rem;
    margin: 0.8rem 0 0;
    text-align: center;
}

/* Araç kabul akışını dikey ve numaralı göster. */
.arcs-flow-list {
    display: grid;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Her akış adımını numara ve metin kolonlarına ayır. */
.arcs-flow-list li {
    align-items: flex-start;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: 34px minmax(0, 1fr);
}

/* Akış adım numarasını dairesel vurguyla göster. */
.arcs-flow-list li > span {
    align-items: center;
    background: var(--arcs-primary-soft);
    border-radius: 50%;
    color: var(--arcs-primary);
    display: inline-flex;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    width: 34px;
}

/* Akış açıklamasını ayrı satırda göster. */
.arcs-flow-list small {
    color: var(--arcs-muted);
    display: block;
    margin-top: 0.15rem;
}

/* Bilgilendirme kutusunu düşük kontrastlı yüzeyle ayır. */
.arcs-info-box {
    background: var(--arcs-primary-soft);
    border: 1px solid #d8e0ff;
    border-radius: 10px;
    color: #344675;
    font-size: 0.85rem;
    padding: 0.8rem;
}

/* Durum rozetlerinin ortak görünümünü tanımla. */
.arcs-badge {
    align-items: center;
    background: #edf0f5;
    border-radius: 999px;
    color: #485568;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 750;
    gap: 0.35rem;
    padding: 0.28rem 0.58rem;
}

/* Rozet içindeki sayıyı hafif ayraçla göster. */
.arcs-badge b {
    border-left: 1px solid currentColor;
    padding-left: 0.35rem;
}

/* Bilgi durumunu mavi rozetle göster. */
.arcs-badge--info {
    background: #eaf0ff;
    color: #3157b8;
}

/* Uyarı durumunu turuncu rozetle göster. */
.arcs-badge--warning {
    background: #fff1d8;
    color: #9d580b;
}

/* Başarılı durumu yeşil rozetle göster. */
.arcs-badge--success {
    background: #e4f6ed;
    color: #11764e;
}

/* Hata durumunu kırmızı rozetle göster. */
.arcs-badge--danger {
    background: #fde9ec;
    color: #a42d3b;
}

/* Nötr durumu gri rozetle göster. */
.arcs-badge--muted {
    background: #edf0f4;
    color: #657184;
}

/* Plakayı kolay taranan monospace benzeri etikette göster. */
.arcs-plate {
    background: #f3f5f8;
    border: 1px solid #d8dee8;
    border-radius: 5px;
    color: #151d2c;
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.42rem;
}

/* Tablo hücrelerindeki ikincil bilgileri ayrı satıra al. */
.arcs-table td small {
    color: var(--arcs-muted);
    display: block;
    margin-top: 0.2rem;
}

/* Tablo başlıklarını küçük ve okunaklı göster. */
.arcs-table thead th {
    background: #f7f9fc;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.8rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Tablo satırlarını yumuşak ayraçlarla böl. */
.arcs-table tbody td {
    border-color: #edf0f4;
    padding: 0.78rem;
}

/* Satır eylemlerini sağda ve taşabilir biçimde sırala. */
.arcs-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

/* Eylem formlarının tablo içinde satır düzenini koru. */
.arcs-row-actions form {
    display: inline-flex;
}

/* Tablo arama alanını kompakt başlık kontrolü yap. */
.arcs-table-search {
    color: var(--arcs-muted);
    display: grid;
    font-size: 0.72rem;
    gap: 0.2rem;
    min-width: 220px;
}

/* Modal içindeki mantıksal form bloklarını ayır. */
.arcs-form-section {
    background: var(--arcs-soft);
    border: 1px solid var(--arcs-line);
    border-radius: 12px;
    height: 100%;
    padding: 1rem;
}

/* Form bölüm başlığını kompakt göster. */
.arcs-form-section h3 {
    color: var(--arcs-ink);
    font-size: 0.92rem;
    font-weight: 800;
    margin: 0 0 0.9rem;
}

/* Araç kabul adımlarını yatay akışta göster. */
.arcs-acceptance-steps {
    background: var(--arcs-surface);
    border: 1px solid var(--arcs-line);
    border-radius: 16px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 1.25rem;
    overflow: hidden;
    padding: 0;
}

/* Kabul adımını numara ve içerik düzeninde yerleştir. */
.arcs-acceptance-steps li {
    align-items: center;
    border-right: 1px solid var(--arcs-line);
    display: grid;
    gap: 0.15rem 0.65rem;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 0.9rem;
}

/* Son kabul adımındaki gereksiz ayıracı kaldır. */
.arcs-acceptance-steps li:last-child {
    border-right: 0;
}

/* Kabul adım numarasını dairesel yüzeyde göster. */
.arcs-acceptance-steps li > span {
    align-items: center;
    background: #edf0f5;
    border-radius: 50%;
    display: flex;
    font-weight: 800;
    grid-row: 1 / 3;
    height: 34px;
    justify-content: center;
    width: 34px;
}

/* Tamamlanan kabul adımını yeşil renkle işaretle. */
.arcs-acceptance-steps li.is-complete > span {
    background: #e4f6ed;
    color: var(--arcs-success);
}

/* Aktif kabul adımını mavi yüzeyle vurgula. */
.arcs-acceptance-steps li.is-active {
    background: var(--arcs-primary-soft);
}

/* Aktif kabul adımı numarasını güçlü göster. */
.arcs-acceptance-steps li.is-active > span {
    background: var(--arcs-primary);
    color: #fff;
}

/* Kabul adımı alt açıklamasını ikincil renkte göster. */
.arcs-acceptance-steps small {
    color: var(--arcs-muted);
}

/* Özet tanım listesini dikey kartlara ayır. */
.arcs-summary-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

/* Her özet satırını yumuşak yüzeyde göster. */
.arcs-summary-list > div {
    background: var(--arcs-soft);
    border-radius: 10px;
    padding: 0.75rem;
}

/* Özet alan adını küçük üst etiket olarak göster. */
.arcs-summary-list dt {
    color: var(--arcs-muted);
    font-size: 0.68rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

/* Özet alan değerini güçlü metinle göster. */
.arcs-summary-list dd {
    color: var(--arcs-ink);
    font-weight: 750;
    margin: 0;
}

/* Özet içindeki ikincil bilgiyi ayrı satıra al. */
.arcs-summary-list dd small {
    color: var(--arcs-muted);
    display: block;
    font-weight: 400;
    margin-top: 0.2rem;
}

/* Checklist seçeneklerini akışkan iki kolonlu ızgarada göster. */
.arcs-check-grid {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Checklist etiketini tıklanabilir kart yüzeyi yap. */
.arcs-check-grid label {
    align-items: center;
    background: var(--arcs-soft);
    border: 1px solid var(--arcs-line);
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    gap: 0.55rem;
    padding: 0.65rem;
}

/* Son kabul eylemini metin ve düğmeler arasında dağıt. */
.arcs-final-action .arcs-card__body {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

/* Orta genişlikte özet ve ana yerleşimleri daha az kolona indir. */
@media (max-width: 1180px) {
    .arcs-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .arcs-stat-card--wide {
        grid-column: 1 / -1;
    }

    .arcs-randevu-layout {
        grid-template-columns: 1fr;
    }
}

/* Tablet görünümünde takvim hücrelerini sıkıştır ve kabul adımlarını böl. */
@media (max-width: 900px) {
    .arcs-calendar-day {
        min-height: 92px;
    }

    .arcs-acceptance-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .arcs-acceptance-steps li:nth-child(2) {
        border-right: 0;
    }

    .arcs-acceptance-steps li:nth-child(-n + 2) {
        border-bottom: 1px solid var(--arcs-line);
    }
}

/* Mobil görünümde başlık, kartlar ve takvimi tek kolona geçir. */
@media (max-width: 680px) {
    .arcs-page-heading,
    .arcs-card__header,
    .arcs-final-action .arcs-card__body {
        align-items: stretch;
        flex-direction: column;
    }

    .arcs-stat-grid {
        grid-template-columns: 1fr;
    }

    .arcs-stat-card--wide {
        grid-column: auto;
    }

    .arcs-calendar-weekdays {
        display: none;
    }

    .arcs-calendar-grid {
        grid-template-columns: 1fr;
    }

    .arcs-calendar-day {
        min-height: 74px;
    }

    .arcs-calendar-day.is-outside {
        display: none;
    }

    .arcs-check-grid,
    .arcs-acceptance-steps {
        grid-template-columns: 1fr;
    }

    .arcs-acceptance-steps li {
        border-bottom: 1px solid var(--arcs-line);
        border-right: 0;
    }

    .arcs-acceptance-steps li:last-child {
        border-bottom: 0;
    }
}
/* Beşli filo özetini geniş ekranda eşit kolonlarda göster. */
.arcs-stat-grid--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Altı göstergeli operasyon özetini iki dengeli satırda göster. */
.arcs-stat-grid--balanced {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Kart alt eylem alanını üst içerikten ayır. */
.arcs-card__footer {
    border-top: 1px solid var(--arcs-line);
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.2rem;
}

/* Tehlikeli işlem kartını kırmızı vurgu çizgisiyle ayır. */
.arcs-danger-zone {
    border-color: #f1c7cd;
}

/* Zaman çizelgesini sol kılavuz üzerinde dikey göster. */
.arcs-timeline {
    border-left: 2px solid #dce3ee;
    display: grid;
    gap: 1rem;
    margin-left: 0.35rem;
    padding-left: 1rem;
}

/* Zaman çizelgesi kaydını nokta işaretiyle hizala. */
.arcs-timeline article {
    position: relative;
}

/* Her zaman çizelgesi olayına görünür başlangıç noktası ekle. */
.arcs-timeline article::before {
    background: var(--arcs-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #cbd6ef;
    content: "";
    height: 12px;
    left: -1.42rem;
    position: absolute;
    top: 0.25rem;
    width: 12px;
}

/* Zaman çizelgesi tarih ve açıklamalarını ayrı satırlara al. */
.arcs-timeline span,
.arcs-timeline small {
    color: var(--arcs-muted);
    display: block;
    font-size: 0.78rem;
}

/* Zaman çizelgesi ana değerini güçlü metinle göster. */
.arcs-timeline strong {
    color: var(--arcs-ink);
    display: block;
    margin: 0.12rem 0;
}

/* Zaman çizelgesi notunu kompakt tut. */
.arcs-timeline p {
    color: var(--arcs-muted);
    font-size: 0.82rem;
    margin: 0.35rem 0 0;
}

/* Orta genişlikte beşli özet kartlarını üç kolona indir. */
@media (max-width: 1180px) {
    .arcs-stat-grid--five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobil görünümde filo özetini tek kolona indir. */
@media (max-width: 680px) {
    .arcs-stat-grid--five {
        grid-template-columns: 1fr;
    }

    /* Dengeli operasyon özetini dar ekranda okunabilir tek kolona indir. */
    .arcs-stat-grid--balanced {
        grid-template-columns: 1fr;
    }
}

/* Araç sağlık skorunu güçlü görsel hiyerarşiyle özetle. */
.arcs-health-hero {
    align-items: stretch;
    background: linear-gradient(135deg, #172554, #1d4ed8);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    box-shadow: 0 1rem 2.25rem rgba(30, 64, 175, .16);
    color: #fff;
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(9.5rem, 1.15fr) repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

/* Sağlık özet hücrelerini yarı saydam ayraçlarla düzenle. */
.arcs-health-hero > div {
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
    min-width: 0;
    padding: 1rem;
}

/* Sağlık özet başlıklarını düşük kontrastla göster. */
.arcs-health-hero > div > span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
}

/* Sağlık özet değerlerini güçlü metinle göster. */
.arcs-health-hero > div > strong {
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    overflow-wrap: anywhere;
}

/* Ana sağlık puanını büyük dairesel gösterge gibi vurgula. */
.arcs-health-score strong {
    font-size: 2.4rem !important;
    line-height: 1;
}

/* Sağlık puanının ölçek ve durum etiketini ayır. */
.arcs-health-score small {
    color: #b9f3d8;
    font-weight: 800;
    margin-top: 0.35rem;
}

/* Araç sağlık uyarılarını tek kolonlu görünür kartlarda göster. */
.arcs-alert-list {
    display: grid;
    gap: 0.6rem;
}

/* Her sağlık uyarısına sıcak renkli yüzey ver. */
.arcs-alert-list > div {
    background: #fff6e5;
    border: 1px solid #f1d7a8;
    border-radius: 10px;
    color: #80500f;
    padding: 0.8rem;
}

/* Tablet görünümünde sağlık özetini iki kolona indir. */
@media (max-width: 800px) {
    .arcs-health-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobil görünümde sağlık özetini tek kolona indir. */
@media (max-width: 680px) {
    .arcs-health-hero {
        grid-template-columns: 1fr;
    }
}

/* Hızlı durum düğmesini simge ve etiketle okunabilir eylem yüzeyi yap. */
.arcs-status-action {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1d4ed8;
    display: flex;
    font-weight: 800;
    gap: .55rem;
    justify-content: flex-start;
    padding: .68rem .8rem;
}

/* Hızlı durum düğmesini fare ve klavye etkileşiminde belirginleştir. */
.arcs-status-action:hover,
.arcs-status-action:focus-visible {
    filter: brightness(.97);
}

/* Durum eylemlerinin anlam renklerini süreç türüne göre uygula. */
.arcs-status-action--info { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
.arcs-status-action--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.arcs-status-action--success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.arcs-status-action--danger { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.arcs-status-action--muted { background: #f8fafc; border-color: #e2e8f0; color: #475569; }

/* Personel adı ve görevini avatar yanında dikey göster. */
.arcs-assignee-list article > div {
    display: grid;
}

/* Personel görev bilgisini küçük ve ikincil metne dönüştür. */
.arcs-assignee-list article small {
    color: var(--arcs-muted);
    font-size: .72rem;
}

/* Yazdırmada navigasyon ve etkileşim kontrollerini gizle. */
@media print {
    .muh-header,
    .offcanvas,
    .arcs-no-print,
    .arcs-page-heading .btn,
    .arcs-danger-zone {
        display: none !important;
    }

    .muh-content,
    .muh-workspace {
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .arcs-card,
    .arcs-health-hero {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* İş emri durumlarını geniş ekranda yatay, dar ekranda kaydırılabilir kanban kolonlarında göster */
.arcs-kanban {
    display: grid;
    grid-auto-columns: minmax(240px, 1fr);
    grid-auto-flow: column;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem;
    scroll-snap-type: x proximity;
}

/* Ayrı kanban sayfasını yatay taşma oluşturmayan responsive ızgaraya dönüştür. */
.arcs-kanban--page {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    overflow: visible;
    padding: 0;
}

/* Tam sayfa kanban kolonlarının dar ekranlarda içerik kadar küçülmesini sağla. */
.arcs-kanban--page .arcs-kanban__column {
    min-width: 0;
    width: auto;
}

/* Filtrelenmiş iş yükü sonuçlarında sayfa bilgisini ve gezinmeyi hizala. */
.arcs-table-pagination {
    align-items: center;
    border-top: 1px solid var(--arcs-border);
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

/* Hızlı iş emri kartını liste ekranındaki ana operasyon eylemi olarak vurgula. */
.arcs-quick-order {
    border-color: rgba(37, 99, 235, .2);
    box-shadow: 0 1.25rem 2.75rem rgba(30, 64, 175, .09);
    overflow: hidden;
}

/* Hızlı kabul başlığını içerik alanından yumuşak renk geçişiyle ayır. */
.arcs-quick-order > .arcs-card__header {
    background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(14, 165, 233, .03));
}

/* Plaka ve kabul ölçümlerini sakin bir iç yüzeyde grupla. */
.arcs-quick-order__acceptance {
    background: var(--bs-tertiary-bg, #f8fafc);
    border: 1px solid var(--arcs-border);
    border-radius: 1rem;
    padding: 1rem;
}

/* Plakayla bulunan müşteri ve araç özetini üç eşit bilgi kartında göster. */
.arcs-quick-vehicle {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 100%;
}

/* Araç özet hücrelerini doğrulanmış seçim durumuna uygun biçimde sınırla. */
.arcs-quick-vehicle > div {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--arcs-border);
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: .75rem;
}

/* Araç özet etiketlerini ikincil tipografiyle ayır. */
.arcs-quick-vehicle span {
    color: var(--arcs-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Araç özet değerlerinin dar hücrelerde taşmasını önle. */
.arcs-quick-vehicle strong {
    overflow-wrap: anywhere;
}

/* İşlem kalemleri bölümünü kabul bilgilerinden yeterli boşlukla ayır. */
.arcs-quick-lines {
    margin-top: 1.25rem;
}

/* İşlem kalemleri başlığı ve ekleme eylemini aynı satırda hizala. */
.arcs-quick-lines > header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;
}

/* İşlem kalemi başlık metinlerinin varsayılan boşluklarını sıkılaştır. */
.arcs-quick-lines h3,
.arcs-quick-lines p {
    margin-bottom: .15rem;
}

/* Birden çok işlem kalemini dikey ve okunabilir aralıkla sırala. */
.arcs-quick-lines__list {
    display: grid;
    gap: .75rem;
}

/* Tek işlem kalemini ürün, açıklama ve finans alanlarıyla responsive ızgaraya yerleştir. */
.arcs-quick-line {
    align-items: end;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--arcs-border);
    border-radius: .9rem;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(14rem, 1.4fr) minmax(12rem, 1fr) 6.5rem 8rem 7rem auto;
    padding: .85rem;
}

/* Orta genişlikte hızlı işlem satırını üç dengeli kolona indir. */
@media (max-width: 1200px) {
    .arcs-quick-line {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobil hızlı kabul ve işlem kalemlerini tek kolonda sun. */
@media (max-width: 767.98px) {
    .arcs-quick-vehicle,
    .arcs-quick-line {
        grid-template-columns: 1fr;
    }
}

/* Ürün arama ve barkod alanlarını fatura formundaki hızlı seçim düzenine taşı. */
.arcs-product-finder {
    background: linear-gradient(135deg, rgba(13, 110, 253, .08), rgba(13, 202, 240, .05));
    border: 1px solid rgba(13, 110, 253, .18);
    border-radius: 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(15rem, .6fr);
    padding: 1rem;
}

/* Ürün arama sonuçlarını klavye ve dokunmatik kullanıma uygun kartlar halinde göster. */
.arcs-product-results {
    background: var(--bs-body-bg);
    border: 1px solid var(--arcs-border);
    border-radius: .85rem;
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, .12);
    display: grid;
    margin-top: .5rem;
    max-height: 18rem;
    overflow: auto;
    padding: .4rem;
}

/* Her ürün sonucunu okunabilir ve tam satır tıklanabilir yap. */
.arcs-product-result {
    background: transparent;
    border: 0;
    border-radius: .6rem;
    color: inherit;
    padding: .7rem .8rem;
    text-align: left;
}

/* Etkileşimli ürün sonucunun odak ve üzerine gelme durumunu belirginleştir. */
.arcs-product-result:not(.arcs-product-result--empty):hover,
.arcs-product-result:not(.arcs-product-result--empty):focus-visible {
    background: rgba(13, 110, 253, .09);
}

/* Küçük ekranlarda ürün ve barkod aramalarını tek kolona indir. */
@media (max-width: 767.98px) {
    .arcs-product-finder {
        grid-template-columns: 1fr;
    }
}

/* Çoklu fotoğraf ve belge alanlarını görünür sürükle-bırak yüzeyine dönüştür. */
.arcs-upload-dropzone {
    background: rgba(13, 110, 253, .035);
    border: 2px dashed rgba(13, 110, 253, .28);
    border-radius: .9rem;
    display: grid;
    gap: .35rem;
    padding: .8rem;
    transition: background-color .2s ease, border-color .2s ease;
}

/* Sürüklenen dosyanın bırakılabileceği alanı belirginleştir. */
.arcs-upload-dropzone.is-dragging {
    background: rgba(13, 110, 253, .1);
    border-color: var(--bs-primary);
}

/* Yükleme alanındaki yönlendirme ve seçim özetini okunabilir tut. */
.arcs-upload-dropzone > span {
    font-weight: 700;
}

/* Dosya sınırlamalarını ikincil bilgi rengiyle göster. */
.arcs-upload-dropzone > small {
    color: var(--bs-secondary-color);
}

/* İş emri belge yükleme alanını seçim, açıklama ve eylem kolonlarında düzenle. */
.arcs-document-upload {
    align-items: end;
    background: linear-gradient(135deg, rgba(37, 99, 235, .05), rgba(14, 165, 233, .025));
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.6fr) minmax(14rem, .8fr) auto;
    padding: 1rem;
}

/* Belge yükleme düzenini dar ekranlarda rahat dokunulabilir tek kolona indir. */
@media (max-width: 900px) {
    .arcs-document-upload {
        align-items: stretch;
        grid-template-columns: 1fr;
    }
}

/* Ayrıntı ekranlarında ardışık içerik bloklarının üst üste binmesini önle. */
.content-section + .content-section {
    margin-top: 1.5rem;
}

/* Katalog seviye navigasyonunu diğer kartlardan ayrı, sabit bir çalışma çubuğu yap. */
.arcs-catalog-nav {
    backdrop-filter: blur(14px);
    background: rgba(248, 250, 252, .97);
    border: 1px solid var(--arcs-line);
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .06);
    padding: .75rem;
    position: sticky;
    top: .75rem;
    z-index: 20;
}

/* Mobil katalog çubuğunu ekran üstüne daha yakın sabitle. */
@media (max-width: 767.98px) {
    .arcs-catalog-nav {
        top: .35rem;
    }
}

/* Katalog sekmelerini küçük ekranlarda sayfayı taşırmadan yatay gezinilebilir tut. */
.arcs-catalog-nav .arcs-tabs {
    margin: 0;
    overflow-x: auto;
    padding-bottom: .2rem;
    scrollbar-width: thin;
}

/* Katalog çalışma kartları arasında form ve tablo sınırını belirginleştir. */
.arcs-catalog-nav ~ .content-section .arcs-card {
    border-color: rgba(30, 64, 175, .12);
    box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, .07);
}

/* WhatsApp eylem metnini marka rengi üzerinde her temada okunur tut. */
.arcs-whatsapp-button,
.arcs-card .btn-success {
    color: #fff;
}

/* Her kanban kolonunu kendi başlığı ve kart yığınıyla sınırla */
.arcs-kanban__column {
    min-height: 180px;
    padding: 0.85rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 94%, #64748b 6%);
    scroll-snap-align: start;
}

/* Kolon başlığında durum ve kayıt sayısını dengeli hizala */
.arcs-kanban__column > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Kanban içindeki iş emri kartlarını okunabilir dikey yığında tut */
.arcs-kanban__stack {
    display: grid;
    gap: 0.65rem;
}

/* İş emri kartını tüm yüzeyi tıklanabilir, belirgin bir detay bağlantısı yap */
.arcs-kanban__item {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.7rem;
    background: var(--bs-body-bg, #fff);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 0.25rem 0.8rem rgba(15, 23, 42, 0.06);
}

/* Kartın ikincil operasyon bilgilerini daha sakin tipografiyle göster */
.arcs-kanban__item span,
.arcs-kanban__item small,
.arcs-kanban__empty {
    color: var(--bs-secondary-color, #64748b);
}

/* Fare ve klavye odağında iş emri kartını görünür biçimde vurgula */
.arcs-kanban__item:hover,
.arcs-kanban__item:focus-visible {
    border-color: var(--bs-primary, #0d6efd);
    color: inherit;
    transform: translateY(-1px);
}

/* Operasyon listesi başlığında arama ve filtreleri yan yana düzenle. */
.arcs-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

/* Operasyon filtrelerini geniş ekranda dengeli kontrol grubu olarak göster. */
.arcs-toolbar__filters {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(240px, 1fr) minmax(170px, 0.55fr);
    width: min(620px, 100%);
}

/* Satır içi operasyon sayaçlarını okunabilir küçük rozetlerde göster. */
.arcs-count-chip {
    background: #eef2ff;
    border-radius: 999px;
    color: #334b9b;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    margin: 0.1rem;
    padding: 0.22rem 0.5rem;
}

/* Boş tablo durumunu nötr ve merkezlenmiş biçimde göster. */
.arcs-empty-state {
    color: var(--arcs-muted);
    padding: 2.5rem 1rem;
    text-align: center;
}

/* Satır içi yaşam döngüsü formlarını tabloyu taşırmadan erişilebilir göster */
.arcs-row-action {
    position: relative;
}

/* Açılan durum ve iade panelini kompakt bir işlem kartına dönüştür */
.arcs-row-action__panel {
    display: grid;
    gap: .5rem;
    min-width: 240px;
    margin-top: .5rem;
    padding: .75rem;
    border: 1px solid #d9e2ec;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}

/* Dar ekranda operasyon başlığı ve filtrelerini tek kolona indir. */
@media (max-width: 760px) {
    .arcs-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .arcs-toolbar__filters {
        grid-template-columns: 1fr;
    }
}

/* Katalog seviye bağlantılarını yatay ve taşabilir sekmeler olarak göster. */
.arcs-tabs {
    background: #fff;
    border: 1px solid var(--arcs-line);
    border-radius: 14px;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.45rem;
}

/* Katalog sekmelerine kompakt ve tutarlı etkileşim yüzeyi ver. */
.arcs-tabs a {
    border-radius: 10px;
    color: var(--arcs-muted);
    font-weight: 700;
    padding: 0.65rem 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Seçili katalog seviyesini ana renkle vurgula. */
.arcs-tabs a.is-active {
    background: var(--arcs-primary);
    color: #fff;
}

/* Satır içi katalog düzenleyicisini küçük bir panelde göster. */
.arcs-inline-editor {
    background: #f8fafc;
    border: 1px solid var(--arcs-line);
    border-radius: 10px;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.5rem;
    min-width: 240px;
    padding: 0.65rem;
}

/* Operasyon hareketlerini zaman sıralı, kolay taranabilir kayıt bloklarında göster. */
.arcs-timeline-item {
    border-left: 3px solid #c7d2fe;
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.15rem 0 0.15rem 0.85rem;
}

/* Hareket açıklamasının kart boşluklarını büyütmesini engelle. */
.arcs-timeline-item p {
    color: var(--arcs-muted);
    margin: 0;
}

/* Hareket aktörü ve zaman bilgisini ikincil metin olarak göster. */
.arcs-timeline-item small {
    color: var(--arcs-muted);
}

/* Tahsise bağlı ceza, hasar ve sözleşmeleri kompakt özet satırlarında göster. */
.arcs-linked-record {
    border-bottom: 1px solid var(--arcs-line);
    display: grid;
    gap: 0.2rem;
    grid-template-columns: 1fr auto;
    padding: 0.75rem 0;
}

/* Son bağlı kayıt satırındaki gereksiz ayırıcıyı kaldır. */
.arcs-linked-record:last-child {
    border-bottom: 0;
}

/* Bağlı kayıt zaman ve durum bilgisini tam satıra yay. */
.arcs-linked-record small {
    color: var(--arcs-muted);
    grid-column: 1 / -1;
}


/* İş emri detay başlığını v1 benzeri güçlü operasyon yüzeyi olarak göster. */
.arcs-work-order-hero {
    align-items: center;
    background: radial-gradient(circle at 92% 12%, rgba(125, 211, 252, .18), transparent 30%), linear-gradient(135deg, #0f2747, #174c72);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(15, 35, 62, .16);
    color: #fff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(480px, .9fr);
    overflow: hidden;
    padding: 1.7rem 1.8rem;
    position: relative;
}

/* Koyu iş emri başlığındaki bölüm etiketini açık ve sakin vurgu rengine getir. */
.arcs-work-order-hero .arcs-eyebrow {
    color: #7dd3fc;
}

/* İş emri başlık içeriğinin uzun numaralarda eylem alanını taşırmasını engelle. */
.arcs-work-order-hero__content {
    min-width: 0;
}

/* İş emri kimliğinin tipografik hiyerarşisini başlıkta belirginleştir. */
.arcs-work-order-hero__content h1 {
    color: #fff;
    font-size: clamp(1.75rem, 2.45vw, 2.35rem);
    letter-spacing: -.035em;
    line-height: 1.08;
    margin: .25rem 0 .45rem;
    overflow-wrap: anywhere;
}

/* İş emri araç ve müşteri özetini başlıkta ikincil metin olarak göster. */
.arcs-work-order-hero__content > p {
    color: rgba(255, 255, 255, .76);
    margin: 0;
}

/* Başlık rozetlerini ekran genişliğine göre sar. */
.arcs-work-order-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Başlık rozetlerini içerikten ayır. */
.arcs-work-order-badges {
    margin-top: 1rem;
}

/* Başlık eylemlerini sağa hizala ve taşmayı engelle. */
.arcs-work-order-actions {
    align-self: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: end;
    max-width: 680px;
    width: 100%;
}

/* Başlık içindeki formların düğme hizasını koru. */
.arcs-work-order-actions form {
    margin: 0;
}

/* Koyu kahraman alanındaki bütün aksiyonları aynı kontrastlı yüzeyde göster. */
.arcs-work-order-actions .btn {
    align-items: center;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: none;
    color: #f8fafc;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 750;
    gap: .35rem;
    justify-content: center;
    min-height: 44px;
    padding: .62rem .75rem;
    text-align: center;
    width: 100%;
}

/* Birincil kalem yönetimi aksiyonunu diğer başlık işlemlerinden belirginleştir. */
.arcs-work-order-actions .btn-primary {
    background: #2563eb;
    border-color: #60a5fa;
    color: #fff;
}

/* Başlık aksiyonlarını fare ve klavye etkileşiminde yüksek kontrastlı hale getir. */
.arcs-work-order-actions .btn:hover,
.arcs-work-order-actions .btn:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #123052;
    transform: translateY(-1px);
}

/* İşlem düğmesi metin simgesini kompakt göster. */
.arcs-action-icon {
    display: inline-flex;
    font-size: .78rem;
    font-weight: 900;
    justify-content: center;
    min-width: 1rem;
}

/* İş emri durumlarının ortak kompakt rozet yüzeyini tanımla. */
.arcs-work-order-badge {
    align-items: center;
    background: #e2e8f0;
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    gap: .35rem;
    line-height: 1;
    padding: .43rem .65rem;
    white-space: nowrap;
}

/* Durum rozetlerinin anlam renklerini tutarlı biçimde uygula. */
.arcs-work-order-badge--primary { background: #dbeafe; color: #1d4ed8; }
.arcs-work-order-badge--info { background: #cffafe; color: #0e7490; }
.arcs-work-order-badge--warning { background: #fef3c7; color: #92400e; }
.arcs-work-order-badge--success { background: #dcfce7; color: #166534; }
.arcs-work-order-badge--danger { background: #fee2e2; color: #b91c1c; }
.arcs-work-order-badge--muted { background: #eef2f6; color: #475569; }

/* Süreç kartını ilerleme çizgisinden bağımsız, kompakt beyaz yüzeyde tut. */
.arcs-work-order-stage-card {
    overflow: hidden;
    padding: .35rem .8rem;
}

/* Sekiz adımlı servis akışını eşit kolonlarda ve yatay taşabilir göster. */
.arcs-work-order-stage-track {
    display: grid;
    grid-template-columns: repeat(8, minmax(112px, 1fr));
    overflow-x: auto;
    padding: .85rem .25rem .75rem;
}

/* Tek servis aşamasını bağlantı çizgisi üzerinde hizala. */
.arcs-work-order-stage {
    align-items: center;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    font-size: .72rem;
    font-weight: 800;
    gap: .48rem;
    line-height: 1.2;
    min-width: 112px;
    position: relative;
    text-align: center;
}

/* Aşamalar arasındaki ilerleme çizgisini noktanın arkasında oluştur. */
.arcs-work-order-stage:not(:last-child)::after {
    background: #dbe3ec;
    content: "";
    height: 2px;
    left: calc(50% + 1.15rem);
    position: absolute;
    right: calc(-50% + 1.15rem);
    top: .94rem;
    z-index: 0;
}

/* Servis aşaması noktasını çizginin üzerinde görünür tut. */
.arcs-work-order-stage__dot {
    align-items: center;
    background: #eef2f7;
    border: 2px solid #d8e0e9;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 1.9rem;
    height: 1.9rem;
    justify-content: center;
    position: relative;
    width: 1.9rem;
    z-index: 1;
}

/* Tamamlanan aşamaların çizgi ve noktasını başarı rengine getir. */
.arcs-work-order-stage.is-complete .arcs-work-order-stage__dot,
.arcs-work-order-stage.is-complete::after {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

/* Tamamlanan aşama etiketlerini çizgiyle aynı başarı ailesinde okunabilir göster. */
.arcs-work-order-stage.is-complete {
    color: #15803d;
}

/* Güncel aşamayı ana renk ve dış vurgu halkasıyla göster. */
.arcs-work-order-stage.is-current {
    color: #1d4ed8;
}

/* Güncel aşama noktasını dolu ana renk yüzeyine dönüştür. */
.arcs-work-order-stage.is-current .arcs-work-order-stage__dot {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, .12);
    color: #fff;
}

/* İptal edilen akışın aşamalarını nötrleştir. */
.arcs-work-order-stage.is-disabled {
    opacity: .52;
}

/* Detay içerik alanını ana çalışma ve sağ özet kolonlarına ayır. */
.arcs-work-order-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

/* Detay kolonlarındaki kartları düzenli dikey aralıkla sırala. */
.arcs-work-order-main,
.arcs-work-order-side {
    display: grid;
    gap: 1.15rem;
    min-width: 0;
}

/* Sağ iş emri panelini uzun sayfada görünür tut. */
.arcs-work-order-side {
    position: sticky;
    top: 1rem;
}

/* Bağlı fatura gövdesini numara ve tutar arasında dağıt. */
.arcs-linked-invoice-card__body {
    align-items: center;
    background: linear-gradient(90deg, #f0f9ff, #fff);
    border-top: 1px solid var(--arcs-line);
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

/* Bağlı fatura kimliğini dikey göster. */
.arcs-linked-invoice-card__body > div {
    display: grid;
}

/* Not ve hareket merkezini üç eşit çalışma paneline ayır. */
.arcs-work-order-operation-hub {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Operasyon panelini bağımsız beyaz çalışma yüzeyi yap. */
.arcs-operation-panel {
    background: #fff;
    border: 1px solid var(--arcs-line);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
    min-width: 0;
    padding: 1rem;
}

/* Not ekleme panelini hafif mavi arka planla ayırt et. */
.arcs-operation-panel--note {
    background: linear-gradient(160deg, #f0f7ff, #fff);
    border-color: #bfdbfe;
}

/* Operasyon paneli başlığını simge ve açıklamayla hizala. */
.arcs-operation-panel__heading {
    align-items: flex-start;
    display: flex;
    gap: .7rem;
    margin-bottom: .9rem;
}

/* Operasyon başlığı simgesine kompakt yüzey ver. */
.arcs-operation-panel__heading > span {
    align-items: center;
    background: #e0edff;
    border-radius: 10px;
    color: #1d4ed8;
    display: inline-flex;
    flex: 0 0 2rem;
    font-weight: 900;
    height: 2rem;
    justify-content: center;
}

/* Operasyon başlığı ve açıklama aralıklarını sıkılaştır. */
.arcs-operation-panel__heading h2,
.arcs-operation-panel__heading p {
    margin: 0;
}

/* Operasyon paneli başlığını okunabilir boyutta göster. */
.arcs-operation-panel__heading h2 {
    font-size: .98rem;
}

/* Operasyon paneli açıklamasını ikincil renkte göster. */
.arcs-operation-panel__heading p {
    color: var(--arcs-muted);
    font-size: .75rem;
}

/* Not ve hareket geçmişini kaydırılabilir dikey listede tut. */
.arcs-compact-timeline {
    display: grid;
    gap: .65rem;
    max-height: 340px;
    overflow: auto;
}

/* Geniş hareket geçmişinde daha yüksek alan kullan. */
.arcs-compact-timeline--wide {
    max-height: 520px;
}

/* Tek hareket veya not kaydını sol vurgu çizgili kartta göster. */
.arcs-compact-timeline__item {
    background: #f8fafc;
    border-left: 3px solid #93c5fd;
    border-radius: 0 10px 10px 0;
    display: grid;
    gap: .25rem;
    padding: .65rem .7rem;
}

/* Açılır not özetini etkileşimli göster. */
details.arcs-compact-timeline__item summary {
    cursor: pointer;
    display: grid;
}

/* Hareket meta ve açıklamasını ikincil renkte göster. */
.arcs-compact-timeline__item small,
.arcs-compact-timeline__item p {
    color: var(--arcs-muted);
    margin: 0;
}

/* Belge satırını simge, bilgi ve eylem kolonlarına ayır. */
.arcs-document-list__item {
    align-items: center;
    border-bottom: 1px solid var(--arcs-line);
    display: grid;
    gap: .7rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: .8rem 0;
}

/* Belge simgesine dosya kartı görünümü ver. */
.arcs-document-list__icon {
    align-items: center;
    background: #eff6ff;
    border-radius: 10px;
    color: #2563eb;
    display: inline-flex;
    height: 2.35rem;
    justify-content: center;
    width: 2.35rem;
}

/* Belge adı ve meta bilgisini dikey göster. */
.arcs-document-list__item > div {
    display: grid;
    min-width: 0;
}

/* Belge meta bilgisini ikincil renkte göster. */
.arcs-document-list__item small {
    color: var(--arcs-muted);
    font-size: .74rem;
}

/* Küçük ve büyük boş durumların panel yüksekliğini düzenle. */
.arcs-empty-state--compact { padding: 1rem .5rem; }
.arcs-empty-state--large {
    background: linear-gradient(140deg, #f8fbff, #eef6ff);
    border: 1px dashed #93c5fd;
    border-radius: 16px;
    font-size: 1rem;
    padding: 3.5rem 1.5rem;
}

/* Müşteri talebini okunabilir metin bloğunda göster. */
.arcs-work-order-request-card__text {
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
}

/* Servis iç notunu müşteri talebinden ayır. */
.arcs-work-order-internal-note {
    background: #fff7ed;
    border-left: 4px solid #fb923c;
    border-radius: 0 10px 10px 0;
    margin-top: 1rem;
    padding: .8rem 1rem;
}

/* Servis iç notunun paragraf boşluğunu sınırla. */
.arcs-work-order-internal-note p {
    color: #7c2d12;
    margin: .25rem 0 0;
}

/* Çok kolonlu kalem tablosunun taşmasını kontrollü tut. */
.arcs-work-order-lines {
    font-size: .78rem;
    min-width: 1120px;
}

/* Finans özetini iki kolonlu kompakt kart ızgarasında göster. */
.arcs-work-order-totals {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Tek finans özet kartını simge ve tutar alanlarına ayır. */
.arcs-work-order-totals article {
    align-items: center;
    background: #fff;
    border: 1px solid var(--arcs-line);
    border-radius: 14px;
    display: grid;
    gap: .55rem;
    grid-template-columns: auto 1fr;
    padding: .8rem;
}

/* Finans kartı simgesini nötr yuvarlak yüzeyde göster. */
.arcs-work-order-totals article > span {
    align-items: center;
    background: #eef2f7;
    border-radius: 50%;
    display: inline-flex;
    height: 2.15rem;
    justify-content: center;
    width: 2.15rem;
}

/* Genel toplam kartını ana renkle vurgula. */
.arcs-work-order-totals article.is-primary {
    background: linear-gradient(135deg, #1d4ed8, #0f6aa8);
    border-color: transparent;
    color: #fff;
}

/* Finans kartı değerlerini dikey göster. */
.arcs-work-order-totals article div {
    display: grid;
}

/* Finans kartı açıklamalarını kompakt göster. */
.arcs-work-order-totals article small,
.arcs-work-order-totals article p {
    color: inherit;
    font-size: .66rem;
    margin: 0;
    opacity: .7;
}

/* İş emri özet satırlarını ayırıcılarla sırala. */
.arcs-work-order-detail-list > div {
    border-bottom: 1px dashed #e2e8f0;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .55rem 0;
}

/* Özet etiketini ikincil renkte göster. */
.arcs-work-order-detail-list dt { color: var(--arcs-muted); }

/* Özet değerini sağa hizalı göster. */
.arcs-work-order-detail-list dd {
    font-weight: 750;
    margin: 0;
    text-align: right;
}

/* Müşteri ve araç kimliklerini yumuşak kartlarda göster. */
.arcs-work-order-identity {
    background: #f8fafc;
    border: 1px solid #edf1f5;
    border-radius: 12px;
    display: grid;
    gap: .2rem;
    margin-top: .65rem;
    padding: .75rem;
}

/* Kimlik kartı meta bilgisini ikincil renkte göster. */
.arcs-work-order-identity > span,
.arcs-work-order-identity small {
    color: var(--arcs-muted);
    font-size: .72rem;
}

/* Durum eylemleri ve personel listesini düzenli dikey gruplarda tut. */
.arcs-status-action-grid,
.arcs-assignee-list,
.arcs-checklist-grid {
    display: grid;
    gap: .6rem;
}

/* Hızlı durum formu ve düğmesini karta yay. */
.arcs-status-action,
.arcs-status-action .btn {
    margin: 0;
    width: 100%;
}

/* Personel atamasını avatar ve bilgi kolonlarına ayır. */
.arcs-assignee-list article {
    align-items: center;
    background: #f8fafc;
    border-radius: 10px;
    display: grid;
    gap: .55rem;
    grid-template-columns: auto 1fr;
    padding: .65rem;
}

/* Personel ilk harfini yuvarlak yüzeyde göster. */
.arcs-assignee-list article > span {
    align-items: center;
    background: #dbeafe;
    border-radius: 50%;
    color: #1d4ed8;
    display: inline-flex;
    font-weight: 900;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

/* Checklist seçeneklerini esnek satırda göster. */
.arcs-checklist-options {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
}

/* İş emri liste metriklerini dört eşit kartta göster. */
.arcs-work-order-metrics {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Tek liste metriğine renk şeridi ve güçlü sayı hiyerarşisi ver. */
.arcs-work-order-metrics article {
    background: #fff;
    border: 1px solid var(--arcs-line);
    border-left: 4px solid #60a5fa;
    border-radius: 14px;
    display: grid;
    padding: 1rem 1.1rem;
}

/* Risk ve finans metriklerini anlam renkleriyle ayırt et. */
.arcs-work-order-metrics article.is-risk { border-left-color: #ef4444; }
.arcs-work-order-metrics article.is-money { border-left-color: #10b981; }

/* Metrik etiket ve açıklamasını ikincil renkte göster. */
.arcs-work-order-metrics span,
.arcs-work-order-metrics small {
    color: var(--arcs-muted);
    font-size: .72rem;
}

/* Metrik değerini kart odağı yap. */
.arcs-work-order-metrics strong {
    font-size: 1.35rem;
}

/* Operasyon paneli ve personel yükünü yan yana göster. */
.arcs-operations-dashboard {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

/* Operasyon risk bağlantılarını üç kolonlu ızgarada göster. */
.arcs-operation-links {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 1rem;
}

/* Tek operasyon riskini etkileşimli bilgi kartına dönüştür. */
.arcs-operation-links a {
    background: #f8fafc;
    border: 1px solid #edf1f5;
    border-radius: 12px;
    color: var(--arcs-ink);
    display: grid;
    padding: .75rem;
    text-decoration: none;
}

/* Kritik ve atama risklerini anlam renkleriyle göster. */
.arcs-operation-links a.is-danger { background: #fff7f7; border-color: #fecaca; }
.arcs-operation-links a.is-warning { background: #fffbeb; border-color: #fde68a; }

/* Operasyon sayı değerini güçlü göster. */
.arcs-operation-links strong { font-size: 1.25rem; }

/* Operasyon etiket ve açıklamasını ikincil göster. */
.arcs-operation-links span,
.arcs-operation-links small {
    color: var(--arcs-muted);
    font-size: .7rem;
}

/* Personel yükü kayıtlarını dikey tıklanabilir listeye dönüştür. */
.arcs-personnel-load {
    display: grid;
    padding: .8rem 1rem 1rem;
}

/* Tek personel yükünü ad, aktif ve geciken kolonlarına ayır. */
.arcs-personnel-load a {
    border-bottom: 1px solid #edf1f5;
    color: var(--arcs-ink);
    display: grid;
    gap: .4rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: .55rem .15rem;
    text-decoration: none;
}

/* Personel gecikmesini uyarı rengiyle göster. */
.arcs-personnel-load small {
    color: #dc2626;
    font-size: .68rem;
}

/* Akıllı filtre formu gövdesini başlıktan ayır. */
.arcs-smart-filters .arcs-card__body {
    background: #fbfdff;
    border-top: 1px solid var(--arcs-line);
}

/* Durum filtrelerini yatay kaydırılabilir çiplerde göster. */
.arcs-status-filter-strip {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
}

/* Tek durum filtresine nötr çip görünümü ver. */
.arcs-status-filter-strip a {
    background: #fff;
    border: 1px solid var(--arcs-line);
    border-radius: 999px;
    color: #475569;
    font-size: .74rem;
    font-weight: 800;
    padding: .48rem .75rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Seçili durum filtresini ana renkle vurgula. */
.arcs-status-filter-strip a.is-active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

/* Liste satırlarındaki ikincil bilgileri alt satırda göster. */
.arcs-work-order-table-card td small {
    color: var(--arcs-muted);
    display: block;
    font-size: .68rem;
    margin-top: .16rem;
}

/* Geciken iş emri satırını sol risk şeridiyle işaretle. */
.arcs-work-order-table-card tr.is-overdue {
    box-shadow: inset 3px 0 0 #ef4444;
}

/* Plakayı kolay taranabilir koyu çipte göster. */
.arcs-plate-chip {
    background: #0f172a;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: .25rem .42rem;
}

/* Sunucu sayfalamasını özet ve gezinme alanlarına ayır. */
.arcs-server-pagination {
    align-items: center;
    border-top: 1px solid var(--arcs-line);
    display: flex;
    justify-content: space-between;
    padding: .85rem 1rem;
}

/* Sayfalama özetini ikincil metin olarak göster. */
.arcs-server-pagination > span {
    color: var(--arcs-muted);
    font-size: .74rem;
}

/* AJAX arama sekmelerini taşabilir tut. */
.arcs-finder-tabs {
    display: flex;
    gap: .35rem;
}

/* AJAX arama alanını simge ve yükleniyor göstergesiyle birleştir. */
.arcs-finder-input {
    align-items: center;
    display: grid;
    position: relative;
}

/* Arama simgesini alanın solunda konumlandır. */
.arcs-finder-input > span:first-child {
    color: #64748b;
    font-size: 1.25rem;
    left: 1rem;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

/* Arama alanının iç boşluğunu simgelere göre artır. */
.arcs-finder-input .form-control {
    padding-left: 2.8rem;
    padding-right: 3rem;
}

/* Arama yükleniyor göstergesini sağda sabitle. */
.arcs-finder-input .spinner-border {
    position: absolute;
    right: 1rem;
}

/* AJAX sonuçlarını araç ve müşteri gruplarına ayır. */
.arcs-finder-results {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

/* Tek sonuç grubunu yumuşak listede göster. */
.arcs-finder-result-group {
    background: #f8fafc;
    border: 1px solid #edf1f5;
    border-radius: 14px;
    display: grid;
    gap: .4rem;
    padding: .75rem;
}

/* Sonuç grubu başlığını kompakt etiket yap. */
.arcs-finder-result-group h3 {
    color: #64748b;
    font-size: .72rem;
    margin: .1rem .2rem;
    text-transform: uppercase;
}

/* Tek AJAX sonucunu kimlik ve sahiplik kolonlarına ayır. */
.arcs-finder-result {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: var(--arcs-ink);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .7rem;
    text-decoration: none;
}

/* Arama sonucunu etkileşimde belirginleştir. */
.arcs-finder-result:hover,
.arcs-finder-result:focus-visible {
    border-color: #60a5fa;
}

/* Sonuç kimlik ve sahiplik alanlarını dikey göster. */
.arcs-finder-result__identity,
.arcs-finder-result__owner {
    display: grid;
    min-width: 0;
}

/* Sonuç sahiplik alanını sağa hizala. */
.arcs-finder-result__owner { text-align: right; }

/* Sonuç meta bilgisini ikincil ve taşma kontrollü göster. */
.arcs-finder-result small {
    color: var(--arcs-muted);
    font-size: .7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Arama yükleme ve hata durumlarını bütün genişliğe yay. */
.arcs-finder-loading,
.arcs-finder-error {
    border-radius: 12px;
    grid-column: 1 / -1;
    padding: 1.5rem;
    text-align: center;
}

/* Arama hata durumunu kırmızı yüzeyde göster. */
.arcs-finder-error {
    background: #fff1f2;
    color: #be123c;
}

/* Seçilen müşteri özetini koyu kahraman kartında göster. */
.arcs-selection-hero {
    align-items: center;
    background: linear-gradient(135deg, #172554, #1d4ed8);
    border-radius: 16px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
}

/* Seçim kahramanı metin boşluklarını sınırla. */
.arcs-selection-hero h2,
.arcs-selection-hero p {
    color: inherit;
    margin: 0;
}

/* Seçim kahramanı açıklamasını yarı saydam göster. */
.arcs-selection-hero p {
    font-size: .78rem;
    opacity: .74;
}

/* Müşterinin araç seçim kartlarını responsive ızgarada göster. */
.arcs-vehicle-choice-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 1rem;
}

/* Tek araç seçimini kimlik, özet ve eylem bloklarına ayır. */
.arcs-vehicle-choice {
    border: 1px solid var(--arcs-line);
    border-radius: 14px;
    display: grid;
    gap: .75rem;
    padding: 1rem;
}

/* Araç seçim plakasını güçlü monospace biçimde göster. */
.arcs-vehicle-choice > div:first-child {
    display: grid;
}

/* Plaka değerini büyük göster. */
.arcs-vehicle-choice > div:first-child strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.25rem;
}

/* Araç seçim kartı model açıklamasını ikincil göster. */
.arcs-vehicle-choice > p {
    color: var(--arcs-muted);
    margin: 0;
}

/* Araç özet tanımlarını üç kolona ayır. */
.arcs-vehicle-choice dl {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

/* Araç özet etiket ve değerlerini dikey göster. */
.arcs-vehicle-choice dl > div { display: grid; }
.arcs-vehicle-choice dt { color: var(--arcs-muted); font-size: .65rem; }
.arcs-vehicle-choice dd { font-size: .75rem; font-weight: 800; margin: 0; }

/* Seçilen araç başlığını plaka, model ve eylem kolonlarına ayır. */
.arcs-selected-vehicle {
    align-items: center;
    background: #fff;
    border: 1px solid var(--arcs-line);
    border-radius: 16px;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1rem 1.2rem;
}

/* Seçilen araç plakasını koyu kimlik kartında göster. */
.arcs-selected-vehicle__plate {
    background: #0f172a;
    border-radius: 8px;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.15rem;
    font-weight: 900;
    padding: .55rem .75rem;
}

/* Seçilen araç metin boşluklarını sıkılaştır. */
.arcs-selected-vehicle h2,
.arcs-selected-vehicle p { margin: 0; }

/* Seçilen araç meta bilgisini ikincil göster. */
.arcs-selected-vehicle span,
.arcs-selected-vehicle p {
    color: var(--arcs-muted);
    font-size: .75rem;
}

/* Yeni iş emri formuna yumuşak kabul yüzeyi ver. */
.arcs-new-work-order-form .arcs-card__body {
    background: linear-gradient(160deg, #fbfdff, #f3f8ff);
    border-top: 1px solid var(--arcs-line);
}

/* Eşleşmeyen plakayı yeni araç kabulüne bağlayan çağrıyı sonuçlardan ayır. */
.arcs-finder-new-vehicle {
    align-items: center;
    background: linear-gradient(135deg, #eff6ff, #ecfeff);
    border: 1px solid #93c5fd;
    border-radius: 14px;
    display: grid;
    gap: 1rem;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1rem 1.1rem;
}

/* Yeni araç çağrısının etiket, başlık ve açıklamasını dikey hiyerarşide göster. */
.arcs-finder-new-vehicle > div {
    display: grid;
    gap: .25rem;
}

/* Yeni araç çağrısının küçük üst etiketini ana renkle vurgula. */
.arcs-finder-new-vehicle span {
    color: #2563eb;
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Yeni plaka ve işlem açıklamasını kompakt metin aralıklarıyla göster. */
.arcs-finder-new-vehicle strong { color: #0f2747; font-size: .98rem; }
.arcs-finder-new-vehicle p { color: var(--arcs-muted); margin: 0; }

/* Firma içinde kayıtlı plakayı yeni kart çağrısından farklı uyarı yüzeyinde göster. */
.arcs-finder-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    color: #92400e;
    font-weight: 700;
    grid-column: 1 / -1;
    padding: .9rem 1rem;
}

/* Seçilen müşteriye yeni plaka ekleme formunu araç listesinin altında hizala. */
.arcs-customer-new-vehicle {
    align-items: end;
    background: #f8fafc;
    border-top: 1px solid var(--arcs-line);
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(220px, 420px) auto;
    padding: 1rem 1.15rem;
}

/* Yeni araç ve iş emri formuna kabul odaklı yumuşak arka plan uygula. */
.arcs-new-vehicle-work-order .arcs-card__body {
    background: linear-gradient(160deg, #fbfdff, #f4f8fd);
}

/* Yeni araç plakasını form başlığında ruhsat etiketi benzeri yüzeyde göster. */
.arcs-new-vehicle-work-order__plate {
    background: #0f2747;
    border: 3px solid #dbeafe;
    border-radius: 10px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .08em;
    padding: .58rem .8rem;
}

/* Yeni kabul formundaki müşteri, araç ve iş emri gruplarını görsel bölümlere ayır. */
.arcs-form-fieldset {
    border: 1px solid var(--arcs-line);
    border-radius: 14px;
    margin: 0 0 1rem;
    padding: 1rem;
}

/* Form bölüm başlığını isteğe bağlı durum bilgisiyle aynı satırda göster. */
.arcs-form-fieldset legend {
    color: #0f172a;
    float: none;
    font-size: .95rem;
    font-weight: 850;
    margin: 0 0 .35rem;
    padding: 0;
    width: auto;
}

/* İsteğe bağlı alan bilgisini bölüm başlığında ikincil rozet olarak göster. */
.arcs-form-fieldset legend small {
    background: #e0f2fe;
    border-radius: 999px;
    color: #0369a1;
    font-size: .66rem;
    margin-left: .35rem;
    padding: .22rem .45rem;
}

/* Form bölüm açıklamasını alanlardan önce sakin ikincil metinde tut. */
.arcs-form-fieldset > p {
    color: var(--arcs-muted);
    margin: 0 0 .9rem;
}

/* Seçilmiş müşteriyi yeni araç formunda değiştirilebilir özet kartı olarak göster. */
.arcs-inline-customer-summary {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
}

/* Seçilmiş müşteri kimlik ve iletişim bilgisini dikey sırala. */
.arcs-inline-customer-summary > div {
    display: grid;
    gap: .18rem;
}

/* Seçilmiş müşteri özetinin etiket ve iletişim metnini ikincil boyutta göster. */
.arcs-inline-customer-summary span,
.arcs-inline-customer-summary small { color: #047857; font-size: .74rem; }

/* Tablet genişliğinde detay ve operasyon kolonlarını sadeleştir. */
@media (max-width: 1180px) {
    .arcs-work-order-hero { grid-template-columns: 1fr; }
    .arcs-work-order-actions { justify-self: stretch; max-width: none; }
    .arcs-work-order-layout { grid-template-columns: 1fr; }
    .arcs-work-order-side { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
    .arcs-work-order-totals { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
    .arcs-work-order-operation-hub { grid-template-columns: repeat(2, 1fr); }
    .arcs-work-order-operation-hub > :last-child { grid-column: 1 / -1; }
    .arcs-work-order-metrics { grid-template-columns: repeat(2, 1fr); }
    .arcs-vehicle-choice-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Dar ekranda bütün iş emri yüzeylerini tek kolona indir. */
@media (max-width: 760px) {
    .arcs-work-order-hero,
    .arcs-selection-hero,
    .arcs-server-pagination { align-items: stretch; flex-direction: column; }
    .arcs-work-order-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: flex-start; max-width: none; }
    .arcs-work-order-actions .btn,
    .arcs-work-order-actions form,
    .arcs-work-order-actions form .btn { width: 100%; }
    .arcs-work-order-stage-track { grid-template-columns: repeat(8, minmax(110px, 1fr)); }
    .arcs-work-order-operation-hub,
    .arcs-work-order-side,
    .arcs-work-order-metrics,
    .arcs-operations-dashboard,
    .arcs-operation-links,
    .arcs-finder-results,
    .arcs-vehicle-choice-grid { grid-template-columns: 1fr; }
    .arcs-work-order-operation-hub > :last-child,
    .arcs-work-order-totals { grid-column: auto; }
    .arcs-work-order-totals { grid-template-columns: repeat(2, 1fr); }
    .arcs-finder-tabs { margin-top: .7rem; width: 100%; }
    .arcs-finder-tabs .btn { flex: 1; }
    .arcs-finder-result,
    .arcs-selected-vehicle { grid-template-columns: 1fr; }
    .arcs-finder-result__owner { text-align: left; }
    .arcs-selected-vehicle .btn { width: 100%; }
    .arcs-server-pagination { display: flex; gap: .7rem; }
    .arcs-finder-new-vehicle,
    .arcs-customer-new-vehicle { align-items: stretch; grid-template-columns: 1fr; }
    .arcs-inline-customer-summary { align-items: stretch; flex-direction: column; gap: .75rem; }
}

/* Telefon genişliğinde başlık aksiyonlarını tek kolonda tam genişlik göster. */
@media (max-width: 480px) {
    .arcs-work-order-actions { grid-template-columns: 1fr; }
}

/* Yazdırmada yalnız iş emri belgesine ait temel içerikleri göster. */
@media print {
    .arcs-no-print,
    .app-sidebar,
    .app-topbar,
    nav,
    footer { display: none !important; }
    .arcs-work-order-hero {
        background: #fff !important;
        border: 1px solid #cbd5e1;
        box-shadow: none;
        color: #0f172a;
    }
    .arcs-work-order-hero__content h1,
    .arcs-work-order-hero__content > p { color: #0f172a; }
    .arcs-work-order-layout,
    .arcs-work-order-main,
    .arcs-work-order-side { display: block; }
    .arcs-work-order-side > *,
    .arcs-work-order-main > * { break-inside: avoid; margin-bottom: 1rem; }
}