/* SAHNE · TALEP → ONAY AKIŞI → GÖREV PANOSU (includes/scenes/tasks.php) — adımlar:
   s1 genel müdür «Onayla»ya basar · s2 sayfa «Onaylandı.» ile yenilenir: akış «Tamamlandı», talep «Atandı», Arda Kara ·
   s3 sayfa aşağı kayar: «Uygulama: …» görevi + işlem geçmişinde üç satır · s4 görev panosu yeni yüklenmiş: kart Yapılacak'ın başında ·
   s5 kart Devam ediyor'a sürüklenir · s6 bırakılır, sayfa yenilenir (Yapılacak 2 · Devam ediyor 2) */
@property --tsk-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.tsk { container-type: inline-size; font-size: 12px; line-height: 1.35; --d: 0s; --y0: 56px;
  --tsk-ok: #047857; --tsk-ok-ink: #065f46; --tsk-spring: cubic-bezier(.34, 1.56, .64, 1); }
.tsk.s2 { --d: .12s; } .tsk.s3 { --d: 0s; } .tsk.s4 { --d: 0s; }
.tsk-win { position: relative; --tsk-st: 412px; --y3: 299px; }
.tsk-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş: iki durum aynı hücrede üst üste. k02 = s2'ye kadar, k2 = s2'den itibaren (k03/k3, k04/k4 aynı) */
.tsk-x { display: inline-grid; min-width: 0; }
.tsk-x > * { grid-area: 1 / 1; min-width: 0; }
.tsk .k02, .tsk .k04, .tsk .k2, .tsk .k4 { transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.tsk .k2, .tsk .k4 { opacity: 0; transform: translateY(4px); }
.tsk.s2 .k02, .tsk.s4 .k04 { opacity: 0; transform: translateY(-4px); }
.tsk.s2 .k2, .tsk.s4 .k4 { opacity: 1; transform: none; }

/* sütun sayıları (s6'da bırakıp yenilenince değişir) */
.tsk-n { counter-reset: tsk var(--tsk-n); font-variant-numeric: tabular-nums; transition: --tsk-n .6s var(--ui-ease); }
.tsk-n::after { content: counter(tsk); }

/* imleç: .tsk-hit tıklama noktasıdır; ok ucu tam orada */
.tsk-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.tsk-hit .ui-cur { left: -5px; top: -3px; transform: translate(16px, 14px); }
.tsk-rip { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); opacity: 0; }
@keyframes tsk-cur { 0% { opacity: 0; transform: translate(16px, 14px); } 40% { opacity: 1; transform: none; scale: 1; } 56% { scale: .8; } 70%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes tsk-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .95; } 100% { opacity: 0; scale: 1.8; } }
@keyframes tsk-push { 50% { scale: .94; } }
@keyframes tsk-dip { 0% { opacity: 1; } 18% { opacity: .5; } 100% { opacity: 1; } }

/* ── başlık bandı (kurum rengi) ── */
.tsk-band { display: flex; align-items: center; gap: 10px; margin: 10px 10px 0; padding: 9px 10px 9px 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); }
.tsk-ico { flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.tsk-ico > * { display: grid; place-items: center; }
.tsk-ico .tsk-i { width: 18px; height: 18px; stroke-width: 1.8; }
.tsk-ttl { flex: 1; }
.tsk-ttl > * { display: block; }
.tsk-ttl small { display: block; font-size: 10.5px; line-height: 13px; font-weight: 700; color: rgba(255, 255, 255, .74); white-space: nowrap; }
.tsk-ttl b { display: block; font-size: 15px; line-height: 19px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.tsk-acts { flex: none; justify-items: end; }
.tsk-acts > * { display: flex; gap: 6px; }
.tsk-bb { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.tsk-bb .tsk-i { width: 13px; height: 13px; }
.tsk-bb--w { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(11, 36, 64, .25), inset 0 -1px 0 rgba(11, 36, 64, .08); }
.tsk-bb--g { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }

/* ── sahne gövdesi: iki ekran aynı hücrede ── */
.tsk-stage { position: relative; display: grid; height: var(--tsk-st); overflow: hidden; }
.tsk-stage::after { content: ""; position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.tsk-pane { grid-area: 1 / 1; position: relative; min-width: 0; overflow: hidden; }
.tsk-req { padding: 10px 12px 0; transition: opacity .35s var(--ui-ease), translate .5s var(--ui-ease); }
.tsk.s4 .tsk-req { opacity: 0; translate: -18px 0; }
.tsk-brd { padding: 8px 12px 0; opacity: 0; translate: 22px 0; transition: opacity .4s var(--ui-ease) .08s, translate .55s var(--ui-ease) .08s; }
.tsk.s4 .tsk-brd { opacity: 1; translate: 0 0; }

/* ══ TALEP DETAYI ══ */
.tsk-scr { translate: 0 calc(-1 * var(--y0)); transition: translate .75s cubic-bezier(.45, .05, .25, 1) var(--d); }
.tsk.s2 .tsk-scr { translate: 0 0; }
.tsk.s3 .tsk-scr { translate: 0 calc(-1 * var(--y3)); transition-delay: .1s; }
.tsk-req::before { content: ""; position: absolute; z-index: 8; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); opacity: 0; transition: opacity .3s var(--ui-ease) .4s; pointer-events: none; }
.tsk.s3 .tsk-req::before { opacity: 1; }
.tsk-thumb { position: absolute; z-index: 9; right: 3px; top: 12px; width: 4px; height: 44%; border-radius: 2px; background: rgba(16, 37, 64, .16); transition: translate .75s cubic-bezier(.45, .05, .25, 1) .1s, opacity .3s var(--ui-ease); }
.tsk.s3 .tsk-thumb { translate: 0 118%; }

.tsk-flash { display: flex; align-items: center; gap: 7px; height: 38px; margin-bottom: 18px; padding: 0 12px; border-radius: 10px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0;
  font-size: 12px; font-weight: 800; color: var(--tsk-ok); opacity: 0; transition: opacity .3s var(--ui-ease) .2s; }
.tsk.s2 .tsk-flash { opacity: 1; }
.tsk-card { position: relative; padding: 12px 14px 14px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), 0 8px 18px -14px rgba(16, 37, 64, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.tsk.s2:not(.s3) .tsk-card { animation: tsk-dip .5s var(--ui-ease) .02s; }

.tsk-hd { display: flex; align-items: flex-start; gap: 10px; }
.tsk-hd__t { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: -.01em; color: #18181b; }
.tsk-hd__st { flex: none; justify-items: end; }
.tsk-st { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; }
.tsk-st--w { background: #f4f4f5; color: #3f3f46; }
.tsk-st--a { background: #e0f2fe; color: #0369a1; }
.tsk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: #71717a; }
.tsk-tag { height: 17px; padding: 0 5px; border-radius: 4px; background: #fef3c7; color: #92400e; font-style: normal; font-weight: 800; line-height: 17px; }
.tsk-desc { margin-top: 9px; padding: 7px 10px; border-radius: 10px; background: #f6f7f9; font-size: 11.5px; line-height: 16px; font-weight: 500; color: #3f3f46; }

/* akış paneli */
.tsk-flow { margin-top: 9px; padding: 9px 11px 10px; border-radius: 12px; background: #f3f7fc; box-shadow: inset 0 0 0 1px #c8d7ea; }
.tsk-flow__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 18px; }
.tsk-flow__n { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 900; color: var(--navy-soft); white-space: nowrap; }
.tsk-flow__n .tsk-i { width: 13px; height: 13px; }
.tsk-done { height: 18px; padding: 0 7px; border-radius: 5px; background: #d1fae5; color: var(--tsk-ok); font-style: normal; font-size: 10.5px; font-weight: 800; line-height: 18px;
  opacity: 0; scale: .8; transition: opacity .3s var(--ui-ease) .5s, scale .4s var(--tsk-spring) .5s; }
.tsk.s2 .tsk-done { opacity: 1; scale: 1; }
.tsk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 4px; margin-top: 7px; }
.tsk-arr { width: 11px; height: 11px; color: #c4c9d2; stroke-width: 2.2; }
.tsk-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7;
  font-size: 10.5px; font-weight: 700; color: #71717a; white-space: nowrap;
  transition: background-color .25s var(--ui-ease), color .25s var(--ui-ease), box-shadow .25s var(--ui-ease); }
/* geçerli adım tür renginde (onay amber); s2'de sayfa akış bitmiş açılır: bütün çipler sönük + «Tamamlandı» */
.tsk:not(.s2) .tsk-chip--cur { background: #f59e0b; color: #fff; box-shadow: none; }
.tsk.s2 .tsk-chip--cur { transition-delay: var(--d); }
.tsk-apv, .tsk-lock { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--ui-ease) var(--d), opacity .25s var(--ui-ease) var(--d); }
.tsk-apv > div, .tsk-lock > div { min-height: 0; overflow: hidden; }
.tsk.s2 .tsk-apv, .tsk.s2 .tsk-lock { grid-template-rows: 0fr; opacity: 0; }
.tsk-apv__p { margin-top: 7px; font-size: 10.5px; line-height: 14px; font-weight: 700; color: #71717a; white-space: nowrap; }
.tsk-apv__r { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.tsk-in { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2);
  font-size: 11.5px; font-weight: 600; color: #8a93a3; white-space: nowrap; min-width: 0; }
.tsk-in--note { flex: 1; box-shadow: inset 0 0 0 1px #c8d7ea; }
.tsk-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #fff; white-space: nowrap; }
.tsk-btn .tsk-i { width: 13px; height: 13px; stroke-width: 2.4; }
.tsk-btn--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); }
.tsk-btn--no { background: #ef4444; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(185, 28, 28, .25); }
.tsk-hit--ok { right: 18px; bottom: 9px; }
.tsk.s1:not(.s2) .tsk-btn--ok { animation: tsk-push .3s var(--ui-ease) .62s; }
.tsk.s1:not(.s2) .tsk-hit--ok .ui-cur { animation: tsk-cur 1.1s var(--ui-ease) .1s both; }
.tsk.s1:not(.s2) .tsk-hit--ok .tsk-rip { animation: tsk-rip .55s ease-out .64s both; }

/* durum · öncelik · atanan · termin */
.tsk-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding: 8px 10px 9px; border-radius: 10px; background: #f6f7f9; }
.tsk-f { min-width: 0; }
.tsk-f small { display: block; margin-bottom: 3px; font-size: 10px; line-height: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #71717a; }
.tsk-sel { position: relative; display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 7px 0 9px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2);
  font-size: 11.5px; font-weight: 600; color: #27272a; white-space: nowrap; }
.tsk-sel > span { flex: 1; min-width: 0; }
.tsk-sel .tsk-i { width: 12px; height: 12px; color: #8a93a3; }
.tsk-sel.tsk-x { display: grid; grid-template-columns: minmax(0, 1fr) 12px; }
.tsk-sel.tsk-x > span { grid-area: 1 / 1; }
.tsk-sel.tsk-x > .tsk-i { grid-area: 1 / 2; }
.tsk-due { display: flex; gap: 4px; }
.tsk-sel--d { flex: 1; min-width: 0; }
.tsk-mut { color: #8a93a3; }
.tsk-go { flex: none; display: grid; place-items: center; width: 24px; height: 28px; border-radius: 7px; background: var(--navy-soft); color: #fff; }
.tsk-go .tsk-i { width: 12px; height: 12px; }

/* bölümler */
.tsk-sec { margin-top: 16px; }
.tsk-sec__h { display: flex; align-items: center; gap: 6px; height: 18px; font-size: 12px; font-weight: 800; color: #18181b; }
.tsk-sec__h .tsk-i { width: 14px; height: 14px; }
.tsk-sec__h--pkg .tsk-i { color: #f59e0b; } .tsk-sec__h--task .tsk-i { color: var(--navy-soft); } .tsk-sec__h--msg .tsk-i { color: #0ea5e9; }
.tsk-lock span { display: flex; align-items: center; gap: 5px; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #fffbeb; font-size: 10.5px; line-height: 14px; font-weight: 800; color: #92400e; }
.tsk-lock .tsk-i { width: 12px; height: 12px; }
.tsk-mi { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 30px; padding: 4px 6px 4px 10px; border-radius: 8px; background: #f6f7f9; }
.tsk-mi__n { flex: 1; min-width: 0; font-size: 11.5px; line-height: 15px; }
.tsk-mi__n b { font-weight: 700; color: #18181b; }
.tsk-mi__n small { font-size: 10.5px; font-weight: 800; color: #71717a; white-space: nowrap; }
.tsk-pill { flex: none; height: 18px; padding: 0 7px; border-radius: 999px; background: #e4e4e7; color: #3f3f46; font-style: normal; font-size: 10px; font-weight: 800; line-height: 18px; }
.tsk-mi__b { flex: none; display: flex; gap: 4px; opacity: 0; translate: 4px 0; transition: opacity .3s var(--ui-ease) calc(.9s + var(--i) * 80ms), translate .35s var(--ui-ease) calc(.9s + var(--i) * 80ms); }
.tsk.s2 .tsk-mi__b { opacity: 1; translate: 0 0; }
.tsk-sb { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.tsk-sb--buy { background: #fffbeb; color: #b45309; box-shadow: inset 0 0 0 1px #fcd34d; }
.tsk-sb--rej { background: #fff; color: #b91c1c; box-shadow: inset 0 0 0 1px #fecaca; }

.tsk-tr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 5px 6px 5px 10px; border-radius: 8px; background: #f6f7f9; }
.tsk-tr__t { min-width: 0; font-size: 11.5px; line-height: 15px; font-weight: 600; color: #18181b; }
.tsk-tr__t small { font-size: 10.5px; font-weight: 600; color: #71717a; white-space: nowrap; }
.tsk-sel--s { flex: none; height: 24px; padding: 0 5px 0 7px; border-radius: 6px; font-size: 11px; }
.tsk-add { display: flex; gap: 4px; margin-top: 5px; }
.tsk-in--t { flex: 1; } .tsk-in--a { flex: none; width: 92px; justify-content: space-between; }
.tsk-in--a .tsk-i { width: 12px; height: 12px; }
.tsk-in--d { flex: none; width: 90px; }
.tsk-add .tsk-in { height: 28px; font-size: 11px; }
.tsk-dark { flex: none; display: grid; place-items: center; height: 28px; padding: 0 11px; border-radius: 8px; background: #27272a; color: #fff; font-size: 11.5px; font-weight: 800; }

.tsk-log { margin-top: 4px; font-size: 11.5px; line-height: 16px; font-weight: 500; color: #71717a; }
.tsk-sec__h + .tsk-log { margin-top: 6px; }
.tsk-log small { font-size: 10.5px; font-weight: 800; color: #52525b; font-variant-numeric: tabular-nums; }
.tsk-log--new { opacity: 0; translate: 0 5px; transition: opacity .3s var(--ui-ease) calc(.75s + var(--i) * 140ms), translate .35s var(--ui-ease) calc(.75s + var(--i) * 140ms); }
.tsk.s3 .tsk-log--new { opacity: 1; translate: 0 0; }

/* ══ GÖREV PANOSU ══ */
.tsk-fl { display: flex; align-items: center; gap: 6px; height: 26px; margin-top: 8px; }
.tsk-fc { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7;
  font-size: 11.5px; font-weight: 700; color: #52525b; white-space: nowrap; }
.tsk-fc .tsk-i { width: 12px; height: 12px; }
.tsk-fc--on { background: var(--navy-soft); color: #fff; box-shadow: 0 1px 2px rgba(20, 61, 107, .3); }
.tsk-fc--on .tsk-i { color: rgba(255, 255, 255, .8); stroke-width: 2.4; }
.tsk-fc--g { margin-left: auto; }
.tsk-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tsk-k { display: block; height: 44px; padding: 6px 10px 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .04); }
.tsk-k small { display: block; font-size: 10px; line-height: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #52525b; white-space: nowrap; }
.tsk-k b { display: block; margin-top: 2px; font-size: 17px; line-height: 21px; font-weight: 900; color: #18181b; font-variant-numeric: tabular-nums; }
.tsk-k--me { background: #f4faff; box-shadow: inset 0 0 0 1px #bae6fd; }
.tsk-k--me b { color: #0369a1; }

.tsk-cols { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; --cg: 10px; --cp: 8px; }
.tsk-col { min-width: 0; height: 420px; padding: 6px var(--cp) var(--cp); border-radius: 12px; background: #f4f5f7; }
.tsk-col__h { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 20px; padding: 0 4px; }
.tsk-col__h b { font-size: 12px; font-weight: 900; white-space: nowrap; }
.tsk-col__h em { min-width: 22px; height: 18px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.tsk-col--todo .tsk-col__h b { color: #3f3f46; } .tsk-col--todo .tsk-col__h em { background: #e4e4e7; color: #3f3f46; }
.tsk-col--doing .tsk-col__h b { color: #0369a1; } .tsk-col--doing .tsk-col__h em { background: #e0f2fe; color: #0369a1; }
.tsk-col--done .tsk-col__h b { color: #047857; } .tsk-col--done .tsk-col__h em { background: #d1fae5; color: #047857; }
.tsk-n--todo { --tsk-n: 3; } .tsk.s6 .tsk-n--todo { --tsk-n: 2; transition-delay: .3s; }
.tsk-n--doing { --tsk-n: 1; } .tsk.s6 .tsk-n--doing { --tsk-n: 2; transition-delay: .3s; }
.tsk-list { position: relative; margin-top: 4px; border-radius: 10px; transition: box-shadow .25s var(--ui-ease); }
.tsk-list > .tsk-kc + .tsk-kc { margin-top: 6px; }
/* yeni kart panoda yerinde açılır (yeri baştan ayrılmış); s6'da Yapılacak'taki yeri kapanır, Devam ediyor'da açılır (0fr ↔ 1fr) */
.tsk-slot { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ui-ease); }
.tsk-slot > div { min-height: 0; overflow: hidden; }
.tsk-slot .tsk-kc { margin-bottom: 6px; }
.tsk-slot--doing { grid-template-rows: 0fr; }
.tsk.s6 .tsk-slot--todo { grid-template-rows: 0fr; transition-delay: .2s; }
.tsk.s6 .tsk-slot--doing { grid-template-rows: 1fr; transition-delay: 0s; }
.tsk-new { opacity: 0; scale: .97; transform-origin: 50% 0; transition: opacity .3s var(--ui-ease) .35s, scale .4s var(--tsk-spring) .35s; }
.tsk.s4 .tsk-new { opacity: 1; scale: 1; }
.tsk.s5 .tsk-new { opacity: .5; transition: opacity .25s var(--ui-ease) .38s; }
.tsk.s6 .tsk-new { opacity: 0; transition: opacity .2s var(--ui-ease); }
.tsk-slot--doing .tsk-kc { opacity: 0; transition: opacity .2s var(--ui-ease) .3s; }
.tsk.s6 .tsk-slot--doing .tsk-kc { opacity: 1; }

/* sürüklenen kartın üstüne geldiği bırakma alanı [data-tk-drop] = kart listesi: ring-2 rounded-xl (admin-tasks.php:659, :864) */
.tsk.s5:not(.s6) .tsk-col--doing .tsk-list { box-shadow: 0 0 0 2px #7aa2d3; transition-delay: .7s; }

/* pano kartı */
.tsk-kc { position: relative; display: block; padding: 8px 9px 8px 10px; border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1px #e4e4e7, inset 3px 0 0 var(--pc), 0 1px 2px rgba(16, 37, 64, .05); }
.tsk-kc--y { --pc: #fbbf24; } .tsk-kc--n { --pc: #38bdf8; }
.tsk-kc > span { display: flex; }
.tsk-kc__h { align-items: flex-start; gap: 6px; }
.tsk-kc__h b { flex: 1; min-width: 0; font-size: 11.5px; line-height: 15px; font-weight: 800; color: #18181b; }
.tsk-pr { flex: none; height: 16px; padding: 0 5px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 16px; letter-spacing: .02em; text-transform: uppercase; }
.tsk-pr--y { background: #fef3c7; color: #b45309; } .tsk-pr--n { background: #e0f2fe; color: #0369a1; }
.tsk-kc__d { margin-top: 2px; font-size: 11px; line-height: 14px; font-weight: 500; color: #52525b; }
.tsk-kc__l { align-items: flex-start; gap: 4px; margin-top: 3px; font-size: 10.5px; line-height: 14px; font-weight: 700; color: var(--navy-soft); }
.tsk-kc__l .tsk-i { width: 12px; height: 12px; margin-top: 1px; }
.tsk-kc__l > span { min-width: 0; }
.tsk-kc__l--p { color: #6d28d9; }
.tsk-kc__m { flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 10.5px; line-height: 14px; font-weight: 700; color: #71717a; }
.tsk-kc__m > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.tsk-kc__m .tsk-i { width: 11px; height: 11px; }
.tsk-who { height: 18px; padding: 0 6px; border-radius: 999px; background: #f4f4f5; color: #3f3f46; }
.tsk-kc__t { font-variant-numeric: tabular-nums; }
.tsk-kc__ok { color: var(--tsk-ok); font-variant-numeric: tabular-nums; }
.tsk-eye { margin-left: auto; justify-content: center; width: 22px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px #e4e4e7; color: #8a93a3; }
.tsk-kc__bar { display: block !important; height: 5px; margin-top: 7px; border-radius: 3px; background: #f1f1f3; overflow: hidden; }
.tsk-kc__bar i { display: block; height: 100%; border-radius: inherit; background: var(--navy-soft); }

/* sürüklenen kopya = tarayıcının yerel sürükleme hayaleti: düz (eğiksiz), opak, hafif gölge. Devam ediyor listesinin içinde mutlak:
   s4'te Yapılacak'taki yeni kartın tam üstünde (iki liste aynı yükseklikte başlar), s5'te listenin altına iner — var olan kartın
   yalnız alt kenarına biner, iki kartın yazısı üst üste gelmez; imleç liste kutusunun (bırakma alanı) içinde kalır */
.tsk-mv { position: absolute; z-index: 6; top: 0; left: calc(-100% - 2 * var(--cp) - var(--cg)); width: 100%; opacity: 0;
  transition: opacity .2s var(--ui-ease) .32s, left .7s cubic-bezier(.45, .1, .25, 1) .5s, top .7s cubic-bezier(.45, .1, .25, 1) .5s; }
.tsk.s5 .tsk-mv { opacity: 1; left: 0; top: calc(100% - 14px);
  box-shadow: inset 0 0 0 1px #e4e4e7, inset 3px 0 0 var(--pc), 0 1px 2px rgba(16, 37, 64, .1), 0 8px 16px -8px rgba(16, 37, 64, .35); }
.tsk.s6 .tsk-mv { opacity: 0; left: 0; top: 0; transition: top .3s var(--ui-ease), opacity .2s var(--ui-ease) .45s; }
.tsk-hit--drag { left: 62%; top: 7px; }
.tsk-hit--drag .ui-cur { transition: opacity .25s var(--ui-ease); }
@keyframes tsk-grab { 0% { opacity: 0; transform: translate(16px, 14px); } 45% { opacity: 1; transform: none; scale: 1; } 62%, 100% { opacity: 1; transform: none; scale: .86; } }
.tsk.s5:not(.s6) .tsk-hit--drag .ui-cur { animation: tsk-grab .5s var(--ui-ease) both; }
.tsk.s6 .tsk-hit--drag .ui-cur { opacity: 0; }

/* ── DAR KAPLAR ── */
@container (max-width: 600px) {
  .tsk-win { --tsk-st: 386px; --y3: 399px; }
  .tsk-form { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 7px; }
  .tsk-apv__p { white-space: normal; }
  .tsk-mi { flex-wrap: wrap; row-gap: 4px; }
  .tsk-mi__n { flex-basis: 100%; }
  .tsk-mi .tsk-pill { margin-right: auto; }
  .tsk-kpi { gap: 6px; }
  .tsk-k { padding: 6px 8px 0; }
  .tsk-cols { gap: 8px; --cg: 8px; --cp: 6px; }
  .tsk-kc { padding: 7px 7px 7px 9px; }
  .tsk-kc__h { flex-wrap: wrap; }
  .tsk-kc__h b { flex-basis: 100%; order: 2; }
  .tsk-pr { order: 1; }
  .tsk-kc__s { display: none !important; }
  .tsk-desc { display: none; }
}
@container (max-width: 470px) {
  .tsk-win { --tsk-st: 380px; --y3: 421px; }
  .tsk-band { margin: 8px 8px 0; padding: 8px 8px 8px 10px; gap: 8px; }
  .tsk-ico { width: 30px; height: 30px; }
  .tsk-ttl b { font-size: 14px; }
  .tsk-acts .tsk-bb--w { display: none; }
  .tsk-req, .tsk-brd { padding: 8px 8px 0; }
  .tsk-card { padding: 10px 11px 12px; }
  .tsk-hd__t { font-size: 14px; line-height: 18px; }
  .tsk-flow { position: relative; padding: 8px 9px 9px; }
  .tsk-flow__n { align-items: flex-start; padding-right: 86px; white-space: normal; line-height: 15px; }
  .tsk-flow__n .tsk-i { margin-top: 1px; }
  .tsk-done { position: absolute; top: 8px; right: 9px; }
  .tsk-btn { padding: 0 9px; }
  .tsk-in--note { padding: 0 7px; }
  .tsk-in--a { width: 64px; }
  .tsk-in--d { width: 74px; padding: 0 6px; }
  .tsk-dark { padding: 0 9px; }
  .tsk-fc--g, .tsk-kpi, .tsk-col--done { display: none; }
  .tsk-fl { margin-top: 0; }
  .tsk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* pano dar kapta yoğun (sütunlar dar, kart satırları sık): sahne kenarına denk gelen kart satırı uzun bir geçişle söner */
@container (max-width: 660px) {
  .tsk-brd::after { content: ""; position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%); pointer-events: none; }
}
/* kaydırma payı ölçülerek (son günlük satırı sahnenin altından 14 px yukarıda): dar uçta akış başlığı «Tamamlandı»yı alta sarar */
@container (min-width: 430px) and (max-width: 470px) { .tsk-win { --y3: 415px; } }
@container (max-width: 359px) { .tsk-win { --tsk-st: 403px; --y3: 422px; } }