/* ==========================================================================
   Praxys WMS — hero sahnesi (izometrik depo)
   Yalnız praxys-wms.html yükler. İşaretleme: praxys-wms.html içinde.
   Kart, sitenin .mock / .mock-bar dilini kullanır; renkler style.css token'larına bağlıdır.
   Kartın içindeki küçük yazılar --wms-fs (12 px). Hero'daki 3B eğim geride kalan köşede ekrandaki boyutu küçültür;
   fareyle eğim de açıkken (main.js: hover + fine pointer) en kötü köşede ölçek ~0,91'e iner, bu yüzden o cihazlarda 12,5 px.
   ========================================================================== */

/* ---- hero yerleşimi ----
   Metin keskinliği: sitenin hero'sunda .hs-3d preserve-3d iken kart ayrı bir 3B katman olarak çizilip yeniden
   örnekleniyor; DSF 2'de başlık metninin kenar keskinliği düz çizime göre ~%34 düşük ölçüldü (eski maket de aynı).
   flat ile aynı geometri ve boyutta keskinlik DSF 2'de +%36 (başlık) / +%38 (adım etiketi), DSF 1'de değişmedi.
   Bedeli: yüzen çip derinliğini (translateZ paralaksı) kaybeder, kartın düzleminde durur; konumu praxys-wms.html içinde (.fl.chip style). */
.lp-hero .wms-vis .hs-3d { transform-style: flat; }
/* çip artık kartın düzleminde (büyütmesiz): küçük satır, eğimin en kötü köşesinde de 11 px üstünde kalsın */
.lp-hero .wms-vis .fl.chip small { font-size: 13px; }

/* dar ekranda ölçekleme yerine kartın kendi düzeni (yazılar 11 px altına inmesin) */
@media (max-width: 960px) {
  .lp-hero .wms-vis { height: auto; }
  .lp-hero .wms-vis .hs-3d { scale: none; width: min(540px, 100%); margin-left: auto; margin-right: auto; }
}

/* ---- kart ---- */
.wms-card { --wms-fs: 12px; font-size: 12.5px; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .wms-card { --wms-fs: 12.5px; } }
.wms-in { container-type: inline-size; }

/* başlık çubuğu (.mock-bar) + sayaçlar */
.wms-bar { padding: 11px 14px 11px 16px; }
.wms-bar b { white-space: nowrap; }
.wms-kpis { display: flex; gap: 6px; margin: 0; }
.wms-kpis div { display: flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.wms-kpis dt { font-size: var(--wms-fs); line-height: 16px; font-weight: 500; color: var(--muted); }
.wms-kpis dd { margin: 0; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--navy-700); font-variant-numeric: tabular-nums; }
.wms-kpis .wms-d { display: inline-block; width: .62em; text-align: center; }

/* sahne */
.wms-scene { position: relative; background: linear-gradient(180deg, var(--blue-50), #fff 78%); }
.wms-svg { display: block; width: 100%; max-width: none; height: auto; }

.wms-sign { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--navy-800); box-shadow: 0 4px 10px -4px rgba(var(--navy-950-rgb), .55), 0 0 0 1.5px #fff; color: #fff; font-size: var(--wms-fs); line-height: 1; font-weight: 700; }
.wms-sign::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue-500); opacity: var(--on, 0); }
.wms-sign::after { content: ""; position: absolute; inset: -4px; border-radius: 10px; border: 2px solid var(--blue-500); opacity: var(--on, 0); transform: scale(calc(.8 + .2 * var(--on, 0))); }
.wms-sign b { position: relative; z-index: 1; }

.wms-plist { position: absolute; left: 2.2%; bottom: 3%; width: 200px; padding: 8px 9px 7px; border-radius: 12px; background: rgba(255, 255, 255, .96); border: 1px solid var(--blue-200); box-shadow: 0 14px 28px -16px rgba(var(--navy-950-rgb), .45); font-size: var(--wms-fs); line-height: 16px; opacity: 0; }
.wms-pl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 0 1px 6px; white-space: nowrap; }
.wms-pl-h b { font-weight: 600; color: var(--ink); }
.wms-pl-h span { color: var(--muted); }
.wms-plist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.wms-plist li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 15px; align-items: center; gap: 6px; height: 19px; opacity: 0; }
.wms-plist li i { display: grid; place-items: center; height: 18px; border-radius: 5px; background: var(--navy-800); color: #fff; font-style: normal; font-weight: 700; font-size: var(--wms-fs); }
.wms-plist .wms-nm { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wms-plist .wms-q { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wms-plist .wms-ck { display: block; width: 15px; height: 15px; border-radius: 50%; text-decoration: none; opacity: 0;
  background: var(--navy-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }

/* sipariş kaynakları: şeritler bu çiplerin sağ kenarından çıkar (konumlar şerit başlangıçlarıyla eşleşir) */
.wms-src { position: absolute; left: 6px; display: grid; place-items: center; height: 20px; padding: 0 5px; border-radius: 7px; background: var(--blue-50); border: 1px solid var(--blue-200); box-shadow: 0 4px 10px -6px rgba(var(--navy-950-rgb), .4); color: var(--navy-800); font-size: var(--wms-fs); line-height: 1; font-weight: 600; white-space: nowrap; }
.wms-src[data-src="eticaret"] { top: 4px; }
.wms-src[data-src="erp"] { top: 28px; }

/* alt şerit (.mock-foot dili): adımlar + durum */
.wms-foot { border-top: 1px solid var(--line); background: #f9fafb; padding: 10px 12px 11px; }
.wms-steps { list-style: none; margin: 0; padding: 0 4px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wms-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.wms-steps li + li::before, .wms-steps li + li::after { content: ""; position: absolute; top: 9px; left: calc(-50% + 14px); right: calc(50% + 14px); height: 2px; border-radius: 2px; background: var(--line); }
.wms-steps li + li::after { background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(var(--c, 0)); }
.wms-nd, .wms-nd svg { display: block; width: 20px; height: 20px; overflow: visible; }
.wms-nd .wms-tr { fill: #fff; stroke: var(--line); stroke-width: 2; }
.wms-nd .wms-pr { fill: none; stroke: url(#wms-gStep); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 47.12; stroke-dashoffset: 47.12; transform: rotate(-90deg); transform-origin: 10px 10px; }
.wms-nd .wms-fi { fill: var(--navy-700); opacity: 0; transform-origin: 10px 10px; }
.wms-nd .wms-ck { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; }
.wms-lb { font-size: var(--wms-fs); line-height: 15px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.wms-status { display: flex; align-items: center; gap: 9px; margin: 9px 4px 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-2); }
.wms-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 3px rgba(var(--blue-500-rgb), .16); }
.wms-st { position: relative; flex: 1; min-width: 0; height: 18px; }
.wms-st > span { position: absolute; inset: 0 0 auto 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- dar kart ---- */
@container (max-width: 440px) {
  .wms-bar { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .wms-kpis { width: 100%; }
  .wms-plist { width: auto; padding: 4px; border-radius: 10px; }
  .wms-pl-h { display: none; }
  .wms-src { display: none; }   /* dar kartta yer yok: kaynaklar durum satırında yazılı */
  .wms-plist ul { display: flex; gap: 4px; }
  .wms-plist li { grid-template-columns: 18px auto 14px; gap: 4px; height: 20px; padding: 0 4px 0 1px; border-radius: 7px; background: var(--blue-50); }
  .wms-plist .wms-nm { display: none; }
  .wms-plist .wms-ck { width: 14px; height: 14px; background-size: 14px; }
  .wms-foot { padding: 9px 8px 10px; }
  /* sütunlar etiket genişliğine göre; bağlantı çizgileri cqw ile düğüm merkezlerine oturur */
  .wms-steps { grid-template-columns: 52fr 49fr 63fr 74fr 45fr 48fr; --u: calc((100cqw - 24px) / 331); }
  .wms-steps li:nth-child(1) { --w: calc(var(--u) * 52); }
  .wms-steps li:nth-child(2) { --w: calc(var(--u) * 49); --wp: calc(var(--u) * 52); }
  .wms-steps li:nth-child(3) { --w: calc(var(--u) * 63); --wp: calc(var(--u) * 49); }
  .wms-steps li:nth-child(4) { --w: calc(var(--u) * 74); --wp: calc(var(--u) * 63); }
  .wms-steps li:nth-child(5) { --w: calc(var(--u) * 45); --wp: calc(var(--u) * 74); }
  .wms-steps li:nth-child(6) { --w: calc(var(--u) * 48); --wp: calc(var(--u) * 45); }
  .wms-steps li + li::before, .wms-steps li + li::after { left: calc(var(--wp) / -2 + 14px); right: calc(var(--w) / 2 + 14px); }
  .wms-lb { letter-spacing: -.01em; }
  .wms-status { align-items: flex-start; min-height: 36px; font-size: 12.5px; line-height: 17px; }
  .wms-dot { margin-top: 5px; }
  .wms-st { height: 34px; }
  .wms-st > span { white-space: normal; }
}

/* ---- sahne renkleri: site token'ları (öznitelikteki hex, CSS yüklenmezse yedektir) ---- */
.wms-svg .wms-f-b50 { fill: var(--blue-50); } .wms-svg .wms-f-b100 { fill: var(--blue-100); } .wms-svg .wms-f-b200 { fill: var(--blue-200); }
.wms-svg .wms-f-b300 { fill: var(--blue-300); } .wms-svg .wms-f-b400 { fill: var(--blue-400); } .wms-svg .wms-f-b500 { fill: var(--blue-500); }
.wms-svg .wms-f-b600 { fill: var(--blue-600); } .wms-svg .wms-f-n700 { fill: var(--navy-700); } .wms-svg .wms-f-n800 { fill: var(--navy-800); }
.wms-svg .wms-f-n900 { fill: var(--navy-900); } .wms-svg .wms-f-n950 { fill: var(--navy-950); }
.wms-svg .wms-f-ink { fill: var(--ink); } .wms-svg .wms-f-ink2 { fill: var(--ink-2); } .wms-svg .wms-f-mut { fill: var(--muted); } .wms-svg .wms-f-line { fill: var(--line); }
.wms-svg .wms-s-b200 { stroke: var(--blue-200); } .wms-svg .wms-s-b300 { stroke: var(--blue-300); } .wms-svg .wms-s-b500 { stroke: var(--blue-500); }
.wms-svg .wms-s-b600 { stroke: var(--blue-600); } .wms-svg .wms-s-ink { stroke: var(--ink); } .wms-svg .wms-s-ink2 { stroke: var(--ink-2); } .wms-svg .wms-s-mut { stroke: var(--muted); }
.wms-svg .wms-sc-b100 { stop-color: var(--blue-100); } .wms-svg .wms-sc-la { stop-color: var(--logo-a); } .wms-svg .wms-sc-lb { stop-color: var(--logo-b); }