/* SAHNE · STOK, DEPO VE SATIN ALMA (includes/scenes/inventory.php) — adımlar:
   s1 «Onayla» → akış tamamlanır, durum «Atandı», sonra kilit kalkar, kalem düğmeleri açılır · s2 A4 için depo seçimi «Merkez Kampüs Ana Depo» ·
   s3 «Depodan karşıla» → stokta 368 → 308 · s4 tonerde «Satın al» → «Satın alınacak» · s5 sipariş #19673 ·
   s6 «Teslim Al → Stoğa Gir» → «Teslim alındı» · s7 stok kartı: toplam 3 → 7 adet, yeni «Satın alma girişi» */
@property --inv-a { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --inv-t { syntax: '<integer>'; inherits: false; initial-value: 0; }

.inv { container-type: inline-size; --d: 0s; --inv-st: 396px; --inv-bh: 58px;
  --inv-ok: #047857; --inv-ok-soft: #d1fae5; --inv-amb: #b45309; --inv-amb-soft: #fef3c7; --inv-z: #3f3f46; --inv-z-soft: #f4f4f5;
  --inv-tint: #f4f8fc; --inv-tint-line: #cddcee; --inv-spring: cubic-bezier(.34, 1.56, .64, 1); }
.inv.s1 { --d: .55s; } .inv.s2 { --d: 0s; } .inv.s3 { --d: .5s; } .inv.s4 { --d: .5s; } .inv.s5 { --d: .1s; } .inv.s6 { --d: .55s; } .inv.s7 { --d: 0s; }
.inv-win { position: relative; }
.inv-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş: katmanlar aynı ızgara hücresinde üst üste; wAB = A. adımdan B. adıma kadar görünür */
.inv-x { display: grid; min-width: 0; }
.inv-x > * { grid-area: 1 / 1; min-width: 0; }
.inv .w { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.inv:not(.s1) .w01, .inv:not(.s2) .w02, .inv:not(.s3) .w03, .inv:not(.s4) .w04, .inv:not(.s5) .w05, .inv:not(.s6) .w06,
.inv.s1:not(.s3) .w13, .inv.s1:not(.s5) .w15, .inv.s2 .w2, .inv.s3 .w3, .inv.s3:not(.s4) .w34, .inv.s4 .w4,
.inv.s5 .w5, .inv.s5:not(.s6) .w56, .inv.s6 .w6 { opacity: 1; transform: none; }

/* açılır/kapanır şerit: yükseklik ızgara satırıyla yumuşak değişir (ani display değişimi yok) */
.inv-col { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .45s var(--ui-ease) var(--d), opacity .3s var(--ui-ease) var(--d); }
.inv-col__in { min-height: 0; overflow: hidden; }
.inv.s1 .inv-col--apv, .inv.s1 .inv-col--lock, .inv:not(.s1) .inv-col--a1, .inv:not(.s1) .inv-col--a2, .inv.s3 .inv-col--a1 { grid-template-rows: 0fr; opacity: 0; }
/* s1 sırası: şerit .55 sn → «Tamamlandı» + «Atandı» .8 sn → kilit 1 sn → kalem satırları 1,1 sn (akış bitmeden kalem açılmaz) */
.inv.s1:not(.s2) .inv-col--lock { transition-delay: 1s, 1s; }
.inv.s1:not(.s2) .inv-col--a1, .inv.s1:not(.s2) .inv-col--a2 { transition-delay: 1.1s, 1.18s; }
.inv.s2:not(.s3) .inv-col--a1 .inv-col__in { overflow: visible; }

/* imleç: .inv-hit tıklama noktasıdır; ok ucu tam orada, halka dalgası çevresinde */
.inv-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.inv-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.inv-rip { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 79, 134, .55); opacity: 0; }
@keyframes inv-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 34% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 64%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes inv-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 30% { opacity: 1; transform: none; scale: 1; } 44% { scale: .8; } 56% { scale: 1; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
/* depo seçimi: seçim kutusuna tıklar, açılan listede «Merkez Kampüs Ana Depo»ya iner ve tıklar */
@keyframes inv-cur-sel { 0% { opacity: 0; transform: translate(14px, 12px); } 22% { opacity: 1; transform: none; scale: 1; } 29% { scale: .8; } 36% { scale: 1; transform: none; }
  64% { transform: translate(var(--inv-px), var(--inv-py)); scale: 1; } 70% { scale: .8; } 77% { scale: 1; } 90% { opacity: 1; transform: translate(var(--inv-px), var(--inv-py)); } 100% { opacity: 0; transform: translate(var(--inv-px), var(--inv-py)); } }
@keyframes inv-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes inv-push { 50% { scale: .95; } }
@keyframes inv-pop { 0% { opacity: 0; scale: .5; } 60% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes inv-dd { 0%, 26% { opacity: 0; transform: translateY(-4px) scale(.98); } 34%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-2px); } }
@keyframes inv-pick { 0%, 52% { background: transparent; color: #27272a; } 58%, 100% { background: var(--navy-soft); color: #fff; } }
@keyframes inv-glow { 0% { background-color: #ecfdf5; } 100% { background-color: #fafafa; } }

/* ── başlık bandı (kurum rengi) ── */
.inv-band { display: flex; align-items: center; gap: 12px; min-height: var(--inv-bh); margin: 12px 12px 0; padding: 10px 12px; border-radius: 12px; color: #fff;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(11, 36, 64, .18), 0 10px 20px -14px rgba(11, 36, 64, .7); }
.inv-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.inv-ico > * { display: grid; place-items: center; }
.inv-ico .inv-i { width: 18px; height: 18px; stroke-width: 1.8; }
.inv-ttl { flex: 1; min-width: 0; align-items: center; }
.inv-ttl > * { min-width: 0; }
.inv-ttl b { display: block; font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: -.01em; }
.inv-ttl small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 17px; font-weight: 600; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-tp { display: inline-block; vertical-align: 1px; height: 17px; margin-right: 6px; padding: 0 6px; border-radius: 5px; font-style: normal; font-size: 10.5px; line-height: 17px; font-weight: 800; color: #92400e; background: #fef3c7; }
.inv-pill { flex: none; justify-items: end; }
.inv-pill > * { height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; line-height: 24px; font-weight: 800; white-space: nowrap; box-shadow: 0 1px 2px rgba(11, 36, 64, .25); }
.inv-pill .p-z { background: var(--inv-z-soft); color: var(--inv-z); }
.inv-pill .p-s { background: #e0f2fe; color: #0369a1; }
.inv-pill .p-a { background: var(--inv-amb-soft); color: var(--inv-amb); }
.inv-pill .p-g { background: var(--inv-ok-soft); color: var(--inv-ok); }
.inv.s1:not(.s2) .inv-pill .p-z, .inv.s1:not(.s2) .inv-pill .p-s { transition-delay: .8s, .8s; }
.inv.s6:not(.s7) .inv-pill .p-g { transition-delay: 1.1s, 1.1s; }
.inv.s6 .inv-pill .p-g { animation: inv-pop .45s var(--ui-ease) .55s both; }

/* ── gövde: iki ekran aynı hücrede ── */
.inv-stage { position: relative; display: grid; height: var(--inv-st); overflow: hidden; }
.inv-p { grid-area: 1 / 1; min-width: 0; padding: 10px 14px 0; transition: opacity .35s var(--ui-ease) var(--d), translate .55s var(--ui-ease) var(--d); }
.inv-po { opacity: 0; translate: 22px 0; }
.inv.s5 .inv-req { opacity: 0; translate: -22px 0; }
.inv.s5 .inv-po { opacity: 1; translate: 0 0; }

/* üst satır: açıklama → işlem iletisi (sayfa başındaki yeşil şerit) */
.inv-slot { height: 32px; margin-bottom: 8px; }
/* başarı iletisi uygulamadaki gibi simgesiz, düz yazılı yeşil kutu (admin-requests.php:351) */
.inv-slot > * { display: flex; align-items: center; padding: 0 12px; border-radius: 10px; font-size: 11.5px; line-height: 15px; font-weight: 700; }
.inv-desc { background: #fafafa; box-shadow: inset 0 0 0 1px #efeff1; color: var(--inv-z); font-weight: 600; }
.inv-flash { background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; color: var(--inv-ok); font-weight: 800; }
.inv-back { padding-left: 2px; color: var(--navy-soft); font-weight: 800; }

/* ── onay akışı ── */
.inv-flow { padding: 9px 12px 10px; border-radius: 12px; background: var(--inv-tint); box-shadow: inset 0 0 0 1px var(--inv-tint-line), inset 0 1px 0 rgba(255, 255, 255, .6); }
.inv-flow__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; }
.inv-flow__ad { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 900; color: var(--navy-soft); white-space: nowrap; }
.inv-done { flex: none; height: 19px; padding: 0 8px; border-radius: 5px; font-style: normal; font-size: 10.5px; line-height: 19px; font-weight: 800; color: var(--inv-ok); background: var(--inv-ok-soft); opacity: 0; scale: .6; }
.inv.s1 .inv-done { animation: inv-pop .45s var(--ui-ease) .8s both; }
.inv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 4px; margin-top: 8px; }
.inv-arr { font-style: normal; font-size: 12px; line-height: 22px; color: #c4c4cc; }
.inv-chip { height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; line-height: 22px; font-weight: 700; color: #71717a; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7; white-space: nowrap;
  transition: background-color .3s var(--ui-ease) var(--d), color .3s var(--ui-ease) var(--d), box-shadow .3s var(--ui-ease) var(--d); }
/* mevcut adım tür renginde (onay = amber); akış bitince şerit doğrudan tamamlanmış hâle (hepsi beyaz) geçer */
.inv:not(.s1) .inv-chip--cur { background: #f59e0b; color: #fff; box-shadow: inset 0 0 0 1px #f59e0b, 0 2px 6px -2px rgba(245, 158, 11, .6); }
.inv-prog { margin-top: 7px; font-size: 11px; line-height: 15px; font-weight: 700; color: #71717a; }
.inv-apv { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-bottom: 4px; }
.inv-note { flex: 1; min-width: 0; display: flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--inv-tint-line); font-size: 11.5px; font-weight: 600; color: #a1a1aa; white-space: nowrap; overflow: hidden; }

/* düğmeler */
.inv-b { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 6px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.inv-b .inv-i { width: 13px; height: 13px; stroke-width: 2.4; }
.inv-b--ok, .inv-b--no { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12px; color: #fff; }
.inv-b--ok { background: #059669; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(4, 120, 87, .3), 0 6px 12px -8px rgba(4, 120, 87, .8); }
.inv-b--no { background: #ef4444; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(185, 28, 28, .25); }
.inv-b--stk { color: #fff; background: var(--inv-ok); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(4, 120, 87, .3); }
.inv-b--buy { color: var(--inv-amb); background: #fffbeb; box-shadow: inset 0 0 0 1px #fcd34d; }
.inv-b--rej { color: #b91c1c; background: #fff; box-shadow: inset 0 0 0 1px #fecaca; }
.inv-b--rcv { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12px; color: #fff; background: var(--inv-ok);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(4, 120, 87, .3), 0 8px 16px -10px rgba(4, 120, 87, .9); }
.inv-b--rcv .inv-i { width: 15px; height: 15px; stroke-width: 2; }
.inv-b--ok .inv-hit { right: 20px; bottom: 9px; }
.inv.s1 .inv-b--ok { animation: inv-push .3s var(--ui-ease) .42s; }
.inv.s1:not(.s2) .inv-hit--apv .ui-cur { animation: inv-cur-out .95s var(--ui-ease) both; }
.inv.s1:not(.s2) .inv-hit--apv .inv-rip { animation: inv-rip .55s ease-out .42s both; }

/* ── malzeme kalemleri ── */
.inv-items { margin-top: 10px; }
.inv-items__h { display: flex; align-items: center; gap: 6px; height: 20px; margin-bottom: 6px; }
.inv-items__h b { font-size: 12.5px; font-weight: 800; }
.inv-amb { width: 15px; height: 15px; color: #f59e0b; }
.inv-q { width: 13px; height: 13px; color: #a1a1aa; stroke-width: 1.8; }
.inv-lock { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 6px 10px; border-radius: 8px; background: #fffbeb; box-shadow: inset 0 0 0 1px #fdecc0; font-size: 11px; line-height: 15px; font-weight: 800; color: #92400e; }
.inv-lock .inv-i { width: 13px; height: 13px; }
.inv-mi { margin-bottom: 5px; padding: 6px 10px 6px; border-radius: 9px; background: #fafafa; box-shadow: inset 0 0 0 1px #efeff1; }
.inv-mi__top { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.inv-mi__ad { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ui-text); }
.inv-mi__ad b { font-weight: 800; }
.inv-mi__ad em { font-style: normal; font-size: 11px; font-weight: 800; color: #71717a; white-space: nowrap; }
.inv-stk { font-size: 11px; font-weight: 600; color: #52525b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-mi__r { flex: none; display: flex; align-items: center; gap: 6px; }
.inv-got { max-width: 0; overflow: hidden; font-size: 11px; font-weight: 800; color: var(--inv-ok); white-space: nowrap; opacity: 0; transition: max-width .4s var(--ui-ease) .6s, opacity .3s var(--ui-ease) .7s; }
.inv.s3 .inv-got { max-width: 96px; opacity: 1; }
.inv-fb { justify-items: end; }
.inv-fb > * { height: 19px; padding: 0 8px; border-radius: 999px; font-size: 10px; line-height: 19px; font-weight: 800; white-space: nowrap; }
.inv-fb .f-z { background: var(--inv-z-soft); color: var(--inv-z); }
.inv-fb .f-g { background: var(--inv-ok-soft); color: var(--inv-ok); }
.inv-fb .f-a { background: var(--inv-amb-soft); color: var(--inv-amb); }
.inv.s3 .inv-mi--a4 { animation: inv-glow 1.1s var(--ui-ease) .55s both; }
.inv.s4 .inv-mi--tn .f-a { animation: inv-pop .45s var(--ui-ease) .5s both; }
.inv-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 2px; }
.inv-sel { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 7px 0 8px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font-size: 11px; font-weight: 600; color: #27272a; white-space: nowrap; }
.inv-chev { width: 12px; height: 12px; color: #71717a; }
.inv-qty { flex: none; display: flex; align-items: center; width: 40px; height: 26px; padding: 0 7px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font: 600 11px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; color: #27272a; }
.inv.s2 .inv-sel--a4 .w { transition-delay: .98s; }
.inv.s2:not(.s3) .inv-sel--a4 { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition: box-shadow .25s var(--ui-ease) .25s; }
.inv-sel--a4 .inv-hit { left: 52%; top: 13px; --inv-px: 6px; --inv-py: 82px; }
.inv.s2:not(.s3) .inv-hit--sel .ui-cur { animation: inv-cur-sel 1.3s var(--ui-ease) both; }
.inv.s2:not(.s3) .inv-hit--sel .inv-rip { animation: inv-rip .5s ease-out .3s both; }
/* açılan depo listesi (tarayıcının seçim listesi) */
.inv-dd { position: absolute; z-index: 6; left: -1px; top: calc(100% + 4px); min-width: calc(100% + 2px); padding: 4px; border-radius: 8px; background: #fff; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .1), 0 2px 4px rgba(16, 37, 64, .08), 0 14px 28px -12px rgba(16, 37, 64, .45); }
.inv-dd__o { display: block; height: 24px; padding: 0 8px; border-radius: 5px; font-size: 11px; line-height: 24px; font-weight: 600; color: #27272a; white-space: nowrap; }
.inv-dd__o.is-cur { background: #f1f4f8; }
.inv.s2:not(.s3) .inv-dd { animation: inv-dd 1.3s var(--ui-ease) both; }
.inv.s2:not(.s3) .inv-dd__o.is-pick { animation: inv-pick 1.3s linear both; }
.inv-b--stk .inv-hit { right: 30px; bottom: 8px; }
.inv.s3:not(.s4) .inv-mi--a4 .inv-b--stk { animation: inv-push .3s var(--ui-ease) .4s; }
.inv.s3:not(.s4) .inv-hit--stk .ui-cur { animation: inv-cur-out .9s var(--ui-ease) both; }
.inv.s3:not(.s4) .inv-hit--stk .inv-rip { animation: inv-rip .55s ease-out .4s both; }
/* «Satın al» işaretlenince bekleyen kaleme özgü iki düğme kalkar: önce söner, sonra yeri daralır (sarılan satır boş kalmaz) */
.inv-fade { transition: opacity .25s var(--ui-ease) .55s, padding .35s var(--ui-ease) .95s, box-shadow .2s var(--ui-ease) .8s, margin .35s var(--ui-ease) .95s; }
.inv-lbl { display: inline-block; max-width: 80px; overflow: hidden; vertical-align: top; transition: max-width .35s var(--ui-ease) .95s; }
.inv.s4 .inv-fade { opacity: 0; padding: 0; box-shadow: none; margin-left: -6px; }
.inv.s4 .inv-lbl { max-width: 0; }
.inv-b--buy .inv-hit { right: 18px; bottom: 8px; }
.inv.s4 .inv-mi--tn .inv-b--buy { animation: inv-push .3s var(--ui-ease) .4s; }
.inv.s4:not(.s5) .inv-hit--buy .ui-cur { animation: inv-cur-out .9s var(--ui-ease) both; }
.inv.s4:not(.s5) .inv-hit--buy .inv-rip { animation: inv-rip .55s ease-out .4s both; }
.inv-n { counter-reset: inv-a var(--inv-a) inv-t var(--inv-t); font-variant-numeric: tabular-nums; }
.inv-n--a4 { --inv-a: 368; transition: --inv-a .9s var(--ui-ease) .6s; }
.inv-n--a4::after { content: counter(inv-a); }
.inv.s3 .inv-n--a4 { --inv-a: 308; }

/* ── satın alma siparişi ── */
.inv-card { border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), 0 12px 24px -20px rgba(16, 37, 64, .4); }
.inv-pr { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 7px 14px; border-top: 1px solid #f1f1f3; transition: background-color .4s var(--ui-ease) var(--d), box-shadow .4s var(--ui-ease) var(--d); }
.inv-pr:first-child { border-top: 0; }
.inv-pr__ad { flex: 1; min-width: 0; font-size: 12.5px; line-height: 17px; color: var(--ui-text); }
.inv-pr__ad b { font-weight: 800; }
.inv-pr__ad small { font-size: 11px; font-weight: 800; color: #71717a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-tlp { display: inline-block; height: 16px; margin-left: 2px; padding: 0 5px; border-radius: 4px; vertical-align: 1px; font-style: normal; font-size: 10px; line-height: 16px; font-weight: 800; color: var(--inv-amb); background: var(--inv-amb-soft); }
.inv-pr__r { flex: none; display: flex; align-items: center; gap: 8px; }
.inv-pr__r.inv-x { display: grid; justify-items: end; }
.inv-recv { display: flex; align-items: center; gap: 6px; }
.inv-rcv { font-style: normal; font-size: 11px; font-weight: 800; color: var(--inv-ok); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-tm { height: 18px; padding: 0 8px; border-radius: 999px; font-style: normal; font-size: 10px; line-height: 18px; font-weight: 800; color: var(--inv-ok); background: var(--inv-ok-soft); }
.inv.s5:not(.s6) .inv-pr--tn { background: #fffbeb; box-shadow: inset 3px 0 0 #f59e0b; transition-delay: .5s; }
.inv.s6 .inv-pr--tn { background: #f0fdf4; box-shadow: inset 3px 0 0 #10b981; }
.inv-pf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 56px; padding: 10px 14px; border-top: 1px solid #f1f1f3; }
.inv-sum { font-size: 13px; font-weight: 900; color: #18181b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-pf__r { margin-left: auto; display: flex; align-items: center; gap: 6px; transition: opacity .3s var(--ui-ease) var(--d), translate .3s var(--ui-ease) var(--d); }
.inv.s6 .inv-pf__r { opacity: 0; translate: 0 4px; }
.inv-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font: 600 11px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; color: #a1a1aa; white-space: nowrap; }
.inv-in--fn { width: 92px; }
.inv-in--dt { width: 112px; color: #3f3f46; }
.inv-in--dt .inv-i { width: 13px; height: 13px; color: #3f3f46; }
.inv-b--rcv .inv-hit { right: 40px; bottom: 10px; }
.inv.s6 .inv-b--rcv { animation: inv-push .3s var(--ui-ease) .42s; }
.inv.s6:not(.s7) .inv-hit--rcv .ui-cur { animation: inv-cur-out 1s var(--ui-ease) both; }
.inv.s6:not(.s7) .inv-hit--rcv .inv-rip { animation: inv-rip .55s ease-out .42s both; }
.inv-pn { padding: 8px 14px 9px; border-top: 1px solid #f1f1f3; font-size: 11px; line-height: 15px; font-weight: 700; color: #71717a; }

/* ── stok kartı (alttan gelen yaprak) ── */
.inv-sheet { position: absolute; z-index: 9; inset: 6px 8px 0; padding: 12px 14px 0; border-radius: 14px 14px 0 0; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 -1px 3px rgba(16, 37, 64, .06), 0 -20px 40px -18px rgba(16, 37, 64, .5);
  opacity: 0; translate: 0 40px; transition: opacity .3s var(--ui-ease), translate .6s cubic-bezier(.3, 1.25, .5, 1); }
.inv.s7 .inv-sheet { opacity: 1; translate: 0 0; }
.inv-sh { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-line); }
.inv-sh__ad { flex: 1; min-width: 0; }
.inv-sh__ad b { display: block; font-size: 15px; line-height: 20px; font-weight: 900; letter-spacing: -.01em; }
.inv-sh__ad small { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 11px; line-height: 16px; font-weight: 700; color: #71717a; white-space: nowrap; }
.inv-sh__ad code { height: 16px; padding: 0 5px; border-radius: 4px; background: #f4f4f5; font: 700 10.5px/16px ui-monospace, "SFMono-Regular", Consolas, monospace; color: #52525b; }
.inv-tot { flex: none; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; line-height: 28px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: #fee2e2; color: #b91c1c; transition: background-color .4s var(--ui-ease) 1.15s, color .4s var(--ui-ease) 1.15s; }
.inv.s7 .inv-tot { background: #ecfdf5; color: var(--inv-ok); box-shadow: inset 0 0 0 1px #a7f3d0; }
.inv-n--tot { --inv-t: 3; transition: --inv-t .7s var(--ui-ease) .8s; }
.inv-n--tot::after { content: counter(inv-t); }
.inv.s7 .inv-n--tot { --inv-t: 7; }
.inv-edit { flex: none; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font-size: 11px; line-height: 28px; font-weight: 800; color: #27272a; }
.inv-lb { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 0 6px; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: .05em; color: #71717a; white-space: nowrap; }
.inv-lb em { font-style: normal; font-size: 11px; letter-spacing: 0; font-weight: 800; color: var(--navy-soft); }
.inv-deps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inv-dr { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 6px 10px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .04), inset 0 1px 0 rgba(255, 255, 255, .6); }
.inv-dr > span { min-width: 0; }
.inv-dr b { display: block; font-size: 12px; line-height: 16px; font-weight: 800; }
.inv-dr small { display: block; font-size: 10.5px; line-height: 14px; font-weight: 700; color: #71717a; }
.inv-dr em { flex: none; height: 20px; padding: 0 8px; border-radius: 999px; font-style: normal; font-size: 11px; line-height: 20px; font-weight: 800; color: var(--inv-z); background: var(--inv-z-soft); font-variant-numeric: tabular-nums; }
.inv-dr--new { background: #f0fdf4; box-shadow: 0 0 0 1px #bbf7d0, 0 1px 2px rgba(4, 120, 87, .06); opacity: 0; scale: .92; transition: opacity .35s var(--ui-ease) .9s, scale .45s var(--inv-spring) .9s; }
.inv-dr--new em { color: var(--inv-ok); background: var(--inv-ok-soft); }
.inv.s7 .inv-dr--new { opacity: 1; scale: 1; }
.inv-mv { position: relative; }
.inv-mr { display: grid; grid-template-columns: 66px 90px 46px minmax(0, 1fr) 18px; align-items: center; column-gap: 8px; height: 31px; padding: 0 2px; border-top: 1px solid #f1f1f3; font-variant-numeric: tabular-nums; }
.inv-mr__t { font-size: 10.5px; font-weight: 700; color: #71717a; white-space: nowrap; }
.inv-mr i { justify-self: start; height: 18px; padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 10px; line-height: 18px; font-weight: 800; white-space: nowrap; }
.inv-mr .m-in { color: var(--inv-ok); background: var(--inv-ok-soft); }
.inv-mr .m-out { color: var(--inv-amb); background: var(--inv-amb-soft); }
.inv-mr b { font-size: 12px; font-weight: 900; color: #18181b; white-space: nowrap; }
.inv-mr__k { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; font-weight: 700; color: #71717a; white-space: nowrap; }
.inv-mr__k strong { font-weight: 800; color: var(--inv-z); }
.inv-pr-i { width: 18px; height: 18px; padding: 3px; border-radius: 5px; color: #71717a; box-shadow: inset 0 0 0 1px #e4e4e7; stroke-width: 1.8; }
/* teslimle doğan giriş satırı: yaprak yerleşince geçmişin başına açılır */
.inv-mrw { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ui-ease) .85s, opacity .35s var(--ui-ease) .95s; }
.inv-mrw > * { min-height: 0; overflow: hidden; }
.inv.s7 .inv-mrw { grid-template-rows: 1fr; opacity: 1; }
.inv-mr--new { position: relative; border-top: 0; border-radius: 8px; background: #f0fdf4; box-shadow: inset 0 0 0 1px #d1f5df; margin: 0 -8px; padding: 0 10px; }
.inv-mr--new::before { content: ""; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: #10b981; }
.inv-mv > .inv-mrw + .inv-mr { border-top: 0; }
/* kaydırma ipucu: liste aşağıda sürer (uygulamada geçmiş en çok 24 rem yükseklikte kayar) */
.inv-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; }

/* ── görevler ── */
.inv-tasks { margin-top: 8px; }
.inv-nv { width: 15px; height: 15px; color: var(--navy-soft); }
.inv-task { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; padding: 5px 6px 5px 10px; border-radius: 9px; background: #fafafa; box-shadow: inset 0 0 0 1px #efeff1; }
.inv-task__ad { min-width: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ui-text); }
.inv-task__ad small { font-size: 11px; font-weight: 600; color: #71717a; white-space: nowrap; }
.inv-sel--sm { height: 24px; font-size: 10.5px; }
.inv-col--task { grid-template-rows: 0fr; opacity: 0; }
.inv.s1 .inv-col--task { grid-template-rows: 1fr; opacity: 1; transition-delay: 1.35s, 1.4s; }
.inv-stage::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }

/* ── sipariş sayfası düğmeleri (sayfa başlığındaki eylemler) ── */
.inv-pdesc { margin: 0 0 8px; font-size: 11.5px; line-height: 16px; font-weight: 600; color: #52525b; }
.inv-acts { display: flex; gap: 6px; margin-bottom: 10px; overflow: hidden; }
.inv-ac { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; font-size: 11.5px; font-weight: 800; color: #27272a; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.inv-ac .inv-i { width: 14px; height: 14px; color: #52525b; stroke-width: 1.9; }

/* ── DAR KAPLAR ── */
@container (max-width: 600px) {
  .inv-win { --inv-st: 372px; }
  /* dar kapta içerik sahneye sığar (kesilen satır yok): alt solma şeridi gerekmez */
  .inv-stage::after { display: none; }
  /* dar kapta kalem «Reddet» düğmeleri çizilmez (açıklama bloğunda) */
  .inv-b--rej, .inv-pdesc { display: none; }
  /* dar kapta görev satırı, A4 kaleminin eylem satırı kapanıp yer açılınca (s3) görünür */
  .inv:not(.s3) .inv-tasks { grid-template-rows: 0fr; opacity: 0; }
  .inv.s3 .inv-tasks { transition-delay: .95s, 1s; }
  /* teslimden sonra form çizilmez: düğme grubu söner, sonra yeri kapanır («Toplam» satırı tek kalır, boş şerit yok) */
  .inv-pf { transition: min-height .4s var(--ui-ease) .9s, row-gap .4s var(--ui-ease) .9s; }
  .inv-pf__r { max-height: 40px; transition: opacity .3s var(--ui-ease) var(--d), translate .3s var(--ui-ease) var(--d), max-height .4s var(--ui-ease) .9s; }
  .inv.s6 .inv-pf { min-height: 0; row-gap: 0; }
  .inv.s6 .inv-pf__r { max-height: 0; }
  /* adım şeridi iki satıra iner (oklar kalır) */
  .inv-chips { gap: 4px; }
  .inv-chip { height: 21px; padding: 0 8px; font-size: 10.5px; line-height: 21px; }
  .inv-ttl b { font-size: 14px; }
  .inv-in--fn, .inv-ac--4, .inv-kay { display: none; }
  .inv-mr, .inv-mr--new { grid-template-columns: 66px 90px minmax(0, 1fr) 18px; grid-template-areas: "t c q p" "k k k k"; height: 44px; align-content: center; row-gap: 3px; }
  .inv-mr__t { grid-area: t; }
  .inv-mr i { grid-area: c; justify-self: start; }
  .inv-mr b { grid-area: q; }
  .inv-mr .inv-pr-i { grid-area: p; }
  .inv-mr__k { grid-area: k; }
}
@container (max-width: 470px) {
  .inv-win { --inv-st: 396px; --inv-bh: 0px; }
  .inv-got { display: none; }
  .inv-flow__ad { gap: 5px; font-size: 11px; letter-spacing: -.005em; }
  .inv-flow__ad .inv-i { width: 13px; height: 13px; }
  .inv-band { gap: 10px; margin: 8px 8px 0; padding: 8px 8px 8px 12px; align-items: flex-start; }
  .inv-ico, .inv-kay { display: none; }
  .inv-ttl { align-self: center; }
  .inv-ttl b { font-size: 13.5px; line-height: 18px; }
  .inv-ttl small { margin-top: 2px; font-size: 11px; line-height: 16px; }
  .inv-pill > * { height: 22px; padding: 0 8px; font-size: 10.5px; line-height: 22px; }
  .inv-p { padding: 10px 10px 0; }
  .inv-slot { height: 30px; margin-bottom: 5px; }
  .inv-slot > * { padding: 0 10px; font-size: 11px; line-height: 14px; }
  .inv-flow { padding: 7px 10px 8px; }
  .inv-chips { gap: 4px; margin-top: 6px; }
  .inv-chip { height: 20px; padding: 0 8px; font-size: 10.5px; line-height: 20px; }
  .inv-arr { display: none; }
  .inv-prog { margin-top: 6px; font-size: 10.5px; line-height: 14px; }
  .inv-apv { margin-top: 5px; padding-bottom: 2px; }
  .inv-b--ok, .inv-b--no { height: 28px; }
  .inv-note { display: none; }
  .inv-items { margin-top: 8px; }
  .inv-items__h { margin-bottom: 4px; }
  .inv-lock { margin-bottom: 5px; padding: 5px 9px; font-size: 10.5px; line-height: 14px; }
  .inv-mi { margin-bottom: 4px; padding: 5px 8px; }
  .inv-mi__ad { font-size: 11.5px; line-height: 15px; }
  /* s3'te açılan görev satırı (iki satırlık başlık) sahneye sığar */
  .inv-tasks { margin-top: 6px; }
  .inv-task { margin-bottom: 0; padding: 3px 4px 3px 8px; }
  .inv-task__ad { font-size: 11.5px; line-height: 14px; }
  /* kalem eylemleri uygulamadaki gibi küçük (select/düğme ~24 px); depo seçimi iki kalemde aynı boy (en uzun depo adı kadar),
     iki kalemin eylem satırı aynı dizilir (telefonda ikisi de «depo + miktar» / «Depodan karşıla + Satın al») */
  .inv-act { gap: 4px; padding: 4px 0 2px; }
  .inv-act .inv-b, .inv-act .inv-sel, .inv-act .inv-qty { height: 24px; }
  .inv-sel--a4 .inv-hit { top: 12px; --inv-py: 80px; }
  .inv-acts { gap: 5px; margin-bottom: 8px; }
  .inv-ac { padding: 0 8px; font-size: 11px; }
  .inv-pr { flex-wrap: wrap; row-gap: 4px; padding: 5px 10px; min-height: 0; }
  .inv-pr__ad { flex-basis: 100%; font-size: 12px; line-height: 16px; }
  .inv-pr__r { margin-left: auto; }
  .inv-pf { min-height: 52px; padding: 8px 10px; }
  .inv-in--dt { display: none; }
  .inv-pn { padding: 7px 10px; }
  .inv-sheet { inset: 6px 6px 0; padding: 10px 10px 0; }
  .inv-sh { flex-wrap: wrap; row-gap: 6px; }
  .inv-sh__ad { flex-basis: 100%; }
  .inv-tot { height: 26px; line-height: 26px; font-size: 12px; }
  .inv-edit { height: 26px; line-height: 26px; }
  .inv-lb em { display: none; }
  .inv-deps { gap: 6px; }
  .inv-dr { align-items: flex-start; flex-direction: column; gap: 4px; padding: 7px 9px; }
  .inv-dr small { display: none; }
}
@container (max-width: 328px) {
  .inv-flow__ad .inv-i { display: none; }
}