/* ==========================================================================
   BOYA & DEĞİŞEN ŞEMASI — biçim (js/arac-sema.js'in ikizi)
   --------------------------------------------------------------------------
   Şemayı iki sayfa çiziyor: panelin Hasar sekmesi ve müşteriye giden
   /p/<token> ilan sayfası. Biçim de ORTAK dosyadadır — renkler iki yere
   kopyalanırsa panelde "boyalı" sarısı, müşteri sayfasında turuncu olur ve
   aynı aracın iki ayrı hükmü varmış gibi görünür.
   Yalnız CSS belirteçleri kullanılır (--surface, --line, --warn…); iki sayfa
   da bunları tanımlar, palet tek yerde durur.
   ========================================================================== */
.sema { display: grid; grid-template-columns: minmax(170px, 248px) 1fr; gap: 24px; align-items: center; }
.sema-svg { width: 100%; height: auto; max-height: 420px; display: block; overflow: visible; }

/* Siluet: panellerin ALTINDAKİ gövde. Panel araları bu rengi gösterir —
   boşluklar "delik" değil, aracın kendi gövdesi olarak okunur. */
.sema-golge path { fill: var(--surface-2, #16191f); stroke: var(--line, #23262e); stroke-width: 1; }
.sema-golge .sema-teker { fill: var(--bg-deep, #000); stroke: var(--line-strong, #31353f); }
.sm-p { stroke: var(--line-strong, #31353f); stroke-width: 1.2; transition: filter .18s ease, opacity .18s ease; }
.sm-p title { pointer-events: none; }
.sema-golge .sema-lamba { fill: var(--surface-4, #262a33); stroke: var(--line-strong, #31353f); }
/* Cam, sac değildir: kaydı olmayan cam gövde panelinden bir ton KOYU çizilir —
   aracın kabini bu iki yamuk sayesinde okunur. Kaydı varsa rengi durumdan gelir. */
.sm-cam.sm-orijinal { fill: var(--surface-3, #1e2128); }

/* Orijinal = bilgi VAR ve temiz. Bilinmiyor = bilgi YOK. İkisi aynı
   görünürse bakan kişi ikisine de aynı güveni duyar; bu yüzden bilinmiyor
   kesikli çizgili ve soluktur, orijinal dolu yüzeydir. */
.sm-orijinal { fill: var(--surface-4, #262a33); }
.sm-bilinmiyor { fill: transparent; stroke-dasharray: 4 3; stroke: var(--faint, #666c77); opacity: .8; }
.sm-boya { fill: var(--warn, #efa847); fill-opacity: .82; stroke: var(--warn, #efa847); }
.sm-degisen { fill: var(--danger, #f25c5c); fill-opacity: .82; stroke: var(--danger, #f25c5c); }
.sm-kozmetik { fill: var(--info, #7396ff); fill-opacity: .6; stroke: var(--info, #7396ff); }
.sm-giderildi { fill: var(--ok, #44d08a); fill-opacity: .42; stroke: var(--ok, #44d08a); }

.sema-yon { fill: var(--faint, #666c77); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-anchor: middle; }

/* Tıklanabilir şema yalnız panelde: parçaya basınca o parçanın kaydı açılır. */
.sema-tik .sm-p { cursor: pointer; }
.sema-tik .sm-p:hover { filter: brightness(1.35); }
.sema-tik .sm-p:focus-visible { outline: none; stroke: var(--accent, #d9b85c); stroke-width: 2.4; }

.sema-yan { min-width: 0; max-width: 620px; }
.sema-baslik { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #9aa0aa); margin-bottom: 12px; }
/* Sayaçlar ESNEK dizilir, ızgara değil: 1fr'lik ızgara geniş kartta beş sayıyı
   700 piksele yayıyor ve "11 orijinal" ile "2 boyalı" arasındaki bağ kopuyordu. */
.sema-say { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.sema-say .sm-i { display: flex; flex-direction: column; gap: 3px; min-width: 62px; }
.sema-say .sm-i.off { opacity: .42; }
.sema-say .sm-i b { font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.sema-say .sm-i span { font-size: 11.5px; color: var(--muted, #9aa0aa); }
.sm-d { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
i.sm-orijinal { background: var(--surface-4, #262a33); box-shadow: inset 0 0 0 1px var(--line-strong, #31353f); }
i.sm-bilinmiyor { background: transparent; box-shadow: inset 0 0 0 1px var(--faint, #666c77); }
i.sm-boya { background: var(--warn, #efa847); }
i.sm-degisen { background: var(--danger, #f25c5c); }
i.sm-kozmetik { background: var(--info, #7396ff); }
i.sm-giderildi { background: var(--ok, #44d08a); }
.sema-alt { font-size: 12.5px; color: var(--muted, #9aa0aa); margin-top: 12px; line-height: 1.55; }

.sema-hal { display: flex; flex-direction: column; gap: 6px; border-radius: 12px; padding: 14px 16px; border: 1px solid var(--line, #23262e); background: var(--surface-2, #16191f); }
.sema-hal b { font-size: 15px; }
.sema-hal span { font-size: 12.5px; color: var(--muted, #9aa0aa); line-height: 1.55; }
.sema-hal.temiz { border-color: rgba(68, 208, 138, .4); }
.sema-hal.temiz b { color: var(--ok, #44d08a); }
.sema-hal.bilinmiyor u { text-decoration-color: var(--faint, #666c77); }

/* Döküm: şemadaki renk lekesinin karşılığı kelimeyle de yazılır. Renk tek
   başına bilgi taşımaz (renk körlüğü + yazdırma). */
.sema-dokum { display: flex; flex-direction: column; margin-top: 4px; }
.sema-dokum .sd { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line, #23262e); }
.sema-dokum .sd:last-child { border-bottom: 0; }
.sema-dokum .sd-g { flex: 1; min-width: 0; }
.sema-dokum .sd-g b { font-weight: 600; font-size: 14px; }
.sema-dokum .sd-t { color: var(--muted, #9aa0aa); font-size: 13px; }
.sema-dokum .sd-g small { display: block; color: var(--faint, #666c77); font-size: 12px; margin-top: 2px; }
.sema-dokum .sd-f { width: 58px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line, #23262e); cursor: zoom-in; flex: none; }
.sema-dokum .sd-s { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #9aa0aa); flex: none; }

@media (max-width: 720px) {
  .sema { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .sema-svg { max-height: 340px; }
  .sema-yan { width: 100%; }
}
@media print {
  .sm-p { stroke: #999; }
  .sm-boya, .sm-degisen, .sm-kozmetik, .sm-giderildi { fill-opacity: .55; }
}